From 8f07660f67cf6978f22ceeacdcaf59a36c2175ba Mon Sep 17 00:00:00 2001 From: benweet Date: Sun, 9 Mar 2014 01:50:03 +0000 Subject: [PATCH] Added new original theme --- public/res/constants.js | 1 + public/res/styles/main.less | 73 ++++++++--------- public/res/themes/original.less | 136 ++++++++++++++++++++++++++++++++ public/res/themes/school.less | 15 ++-- 4 files changed, 177 insertions(+), 48 deletions(-) create mode 100644 public/res/themes/original.less diff --git a/public/res/constants.js b/public/res/constants.js index fd4ce601..7d63a586 100644 --- a/public/res/constants.js +++ b/public/res/constants.js @@ -65,6 +65,7 @@ define([], function() { constants.THEME_LIST = { "default": "Default", "gray": "Gray", + "original": "Original", "night": "Night", "school": "School", }; diff --git a/public/res/styles/main.less b/public/res/styles/main.less index f13c24b1..052ee9a7 100644 --- a/public/res/styles/main.less +++ b/public/res/styles/main.less @@ -43,6 +43,7 @@ // Panel buttons @panel-button-bg-color: #FFF; @panel-button-border-fade: 80%; +@panel-button-box-shadow: ~"0 0 1px rgba(0,0,0,.5)"; @panel-border-color: fade(@primary-desaturated, 10%); @error-border: #FF6161; @@ -55,12 +56,13 @@ @menu-panel-width: 280px; @document-panel-width: 340px; @jgrowl-width: 260px; -@resizer-size: 35px; +@resizer-size: 30px; /* Bootstrap */ @body-bg: @secondary-bg-light; @text-color: @secondary-color-darkest; @link-color: desaturate(#0080FF, 25%); +@link-hover-color: darken(@link-color, 20%); @input-bg: @secondary-bg-lighter; @input-border: @secondary-border-color; @input-height-base: 38px; @@ -81,7 +83,7 @@ @dropdown-link-color: @secondary-color-darkest; @dropdown-link-hover-color: darken(@primary-desaturated, 25%); @dropdown-link-hover-bg: @btn-default-hover-bg; -@dropdown-header-color: fade(@secondary-color, 50%); +@dropdown-header-color: fade(@secondary-color, 60%); @dropdown-link-disabled-color: @disabled-color; @dropdown-divider-bg: @dropdown-border; @list-group-link-color: @secondary-color-darkest; @@ -101,6 +103,7 @@ @btn-primary-color: @secondary-color-darker; @btn-primary-bg: @primary-bg; @btn-primary-border: fade(@secondary, 5%); +@btn-primary-hover-bg: mix(@primary-desaturated, @btn-primary-bg, 7.5%); @btn-success-color: darken(@primary-desaturated, 25%); @btn-success-bg: @transparent; @btn-success-border: @transparent; @@ -188,24 +191,6 @@ a { .transition(~"background-color ease-in-out .15s, color ease-in-out .15s, border-color ease-in-out .15s"); } -.list-group .nav { - border-left: 10px solid @primary-bg; - margin-left: 15px; - > li > a { - border-top: 1px solid @transparent; - border-bottom: 1px solid @transparent; - &:hover, - &:focus { - border-top-color: @list-group-hover-border-color; - border-bottom-color: @list-group-hover-border-color; - } - &.active { - border-top-color: @list-group-active-border; - border-bottom-color: @list-group-active-border; - } - } -} - .nav-pills > li { > a { border: 1px solid @transparent; @@ -275,7 +260,7 @@ a { .open &.dropdown-toggle { color: darken(@secondary, 30%); border-color: fade(@secondary, 10%); - background-color: mix(@primary-desaturated, @btn-primary-bg, 7.5%) !important; // important to override .nav > li > a:hover + background-color: @btn-primary-hover-bg !important; // important to override .nav > li > a:hover } } @@ -299,7 +284,7 @@ a { .info-tooltip &, .open &.dropdown-toggle { color: darken(@secondary, 30%); - border-color: fade(@secondary, 10%); + border-color: fade(@secondary, 8%); background-color: @secondary-bg !important; // important to override .nav > li > a:hover } } @@ -523,7 +508,8 @@ a { border-radius: 8px; position: absolute; margin-top: 6px; - .box-shadow(~"0 0 1px rgba(0,0,0,.5)"); + .transition(~"border-width ease-in-out .15s, left ease-in-out 0.15s, right ease-in-out 0.15s, background-color ease-in-out 0.15s"); + .box-shadow(@panel-button-box-shadow); &:active { .box-shadow(~"inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 1px rgba(0,0,0,.5)"); } @@ -550,7 +536,19 @@ a { margin-left: (-@menu-panel-width - 15); .transition(~"margin-left ease-in-out 0.35s"); .sub-menu { - background-color: @list-group-bg; + background-color: @secondary-bg-lighter; + padding-bottom: 20px; + .box-shadow(~"inset 1px 0 1px rgba(0,0,0,.05), inset 2px 2px 6px rgba(0,0,0,.075)"); + .nav { + padding-top: 20px; + > li > a { + padding-left: 30px; + &:hover, + &:focus { + background-color: @transparent; + } + } + } } &.in { margin-left: 0; @@ -562,7 +560,6 @@ a { right: -50px; z-index: -1; padding: 0 10px 0 50px; - .transition(~"border-width ease-in-out .15s, right ease-in-out 0.15s"); } .collapse-button:hover, &.in .collapse-button, &.collapsing .collapse-button { right: -55px; @@ -571,11 +568,6 @@ a { background-color: @secondary-bg-light; padding-top: 6px; border-right: 1px solid @secondary-border-color-light; - & > .nav > li > a { - &:hover, &:active { - background-color: inherit; - } - } } } @@ -594,7 +586,6 @@ a { left: -50px; padding: 0 50px 0 3px; z-index: -1; - .transition(~"border-width ease-in-out .15s, left ease-in-out 0.15s"); i.icon-folder-open { font-size: 19px; padding-bottom: 1px; @@ -871,9 +862,11 @@ a { & > li.active > a { &, &:hover, &:focus { color: @btn-primary-color; - background-color: @btn-primary-bg; - border-color: @btn-primary-border; + background-color: @modal-content-bg; + border-color: @modal-header-border-color; border-bottom-color: @transparent; + margin-bottom: -1px; + padding: 10px 15px 11px; } } } @@ -993,17 +986,17 @@ a { box-sizing: initial; } - .ace_marker-layer .ace_active-line { - background-color: fade(@primary-desaturated, 5%); - } - .ace_cursor { color: darken(@primary-desaturated, 30%); } - .ace_print-margin { - background-color: fade(@primary-desaturated, 5%); + .ace_print-margin-layer { + display: none; } + + .ace_marker-layer .ace_bracket { + display: none; + } .ace_markup.ace_heading { color: @tertiary-color-darker; @@ -1021,7 +1014,6 @@ a { .ace_meta.ace_tag { color: @tertiary-color-dark; - font-style: italic; font-weight: bold; background-color: @code-bg; } @@ -1044,7 +1036,6 @@ a { .ace_string { color: @tertiary-color-dark; - font-style: italic; background-color: @code-bg; } diff --git a/public/res/themes/original.less b/public/res/themes/original.less new file mode 100644 index 00000000..dd6b6d62 --- /dev/null +++ b/public/res/themes/original.less @@ -0,0 +1,136 @@ +@import "../styles/main.less"; + +/* +@primary: #FFF; +@primary-bg: #444; +@secondary-bg: darken(@primary-bg, 4%); +@secondary-bg-light: darken(@primary-bg, 13%); +@secondary-bg-lighter: darken(@primary-bg, 15%); +@secondary-border-color: darken(@primary-desaturated, 70%); +@secondary-border-color-light: darken(@primary-desaturated, 75%); +@secondary-border-color-lighter: darken(@primary-desaturated, 80%); +@tertiary-bg: darken(@primary-bg, 15%); +@tertiary-color-darker: @primary; +@tertiary-color-dark: darken(@primary, 12.5%); +@tertiary-color: darken(@primary, 37.5%); +@panel-button-bg-color: #aaa; + +@link-color: #f73; +@input-border: @primary-bg; +@input-bg: #111; +@blockquote-bg: fade(#fff, 5%); +@code-bg: fade(#fff, 10%); +@pre-bg: #bbb; +@pre-border-color: darken(@pre-bg, 30%); +@blockquote-border-color: fade(#fff, 8%); +@modal-backdrop-bg: #444; +@dropdown-border: @primary-bg; + +@kbd-bg-color: @pre-bg; +@kbd-border-color: fade(@text-color, 40%); + +.form-control:focus { + .box-shadow(~"inset 0 1px 1px rgba(255, 255, 255, 0), 0 0 12px rgba(255, 255, 255, 1)"); +} + +.ace-tm { + .ace_cursor { + border-left-color: #fff; + } +} +*/ + +@primary: #a0a0a0; +@navbar-default-bg: #474747; +@btn-default-hover-bg: fade(@primary, 14%); +@btn-primary-bg: #e2e2e2; +@btn-primary-hover-bg: darken(@btn-primary-bg, 4%); +//@btn-primary-color: #bbb; +//@btn-primary-hover-bg: fade(@primary, 25%); +@btn-success-color: #C0C0C0; +@btn-success-hover-bg: darken(@navbar-default-bg, 10%); +@panel-button-bg-color: #E6E6E6; +@panel-button-box-shadow: ~"0 0 1px rgba(255,255,255,0.75)"; +@input-bg: #fff; + + +@list-group-border: @transparent; +@list-group-active-border: @transparent; +@list-group-hover-border-color: @transparent; +/* +@list-group-link-color: @btn-success-color; +@list-group-bg: lighten(@navbar-default-bg, 2%); +@list-group-active-color: lighten(@btn-success-color, 20%); +@list-group-active-bg: darken(@navbar-default-bg, 2%); +@list-group-hover-bg: @btn-success-hover-bg; +*/ + + +@tertiary-bg: #fcfcfc; +@secondary-bg: #ededed; +@secondary-bg-light: #f6f6f6; +@secondary-bg-lighter: @tertiary-bg; +@secondary-border-color: #e2e2e2; +@secondary-border-color-light: #eee; +@secondary-border-color-lighter: #eee; + + +// Navbar buttons +.btn-success { + border-width: 0; + &:hover, + &:focus, + &:active, + .open &.dropdown-toggle { + color: #fff; + } +} + + +.dropdown-menu > .disabled > a, +.list-group-item.active { + &, + &:hover, + &:focus { + background-color: lighten(@navbar-default-bg, 8%); + color: #fff; + .box-shadow(inset -1px 2px 4px rgba(0,0,0,0.25)); + } +} + +.ace-tm { + .ace_cursor { + border-left-color: #555; + } +} + +.ui-layout-resizer-north { + background-color: fade(@navbar-default-bg, 50%); + border-bottom: 0; + //.box-shadow(~"0 0 1px 1px rgba(0,0,0,0.15), 0 3px 8px rgba(0,0,0,0.15)"); +} + +.resizer-decorator { + .ui-layout-resizer-east & { + border-left: 1px solid fade(@secondary, 4%); + } + .ui-layout-resizer-south & { + border-top: 1px solid fade(@secondary, 4%); + } +} + +.menu-panel, .document-panel { + .collapse-button:hover, &.in .collapse-button, &.collapsing .collapse-button { + background-color: lighten(@panel-button-bg-color, 10%); + } +} +/* +.menu-panel { + .sub-menu { + background-color: @navbar-default-bg; + } + .panel-content { + background-color: @navbar-default-bg; + } +} +*/ \ No newline at end of file diff --git a/public/res/themes/school.less b/public/res/themes/school.less index b3634eca..7fee7a34 100644 --- a/public/res/themes/school.less +++ b/public/res/themes/school.less @@ -56,13 +56,14 @@ background-image: url("../img/school-line.png"); background-repeat: repeat; } - .ace_marker-layer .ace_active-line { - background-color: fade(@blue-ink, 5%); - } - .ace_print-margin { - background-color: fade(@red-ink, 50%); - } - + + .ace_print-margin-layer { + display: block; + .ace_print-margin { + background-color: fade(@red-ink, 50%); + } + } + .ace_markup.ace_heading { color: @black-ink; }