Added new original theme

This commit is contained in:
benweet 2014-03-09 01:50:03 +00:00
parent c4481f0294
commit 8f07660f67
4 changed files with 177 additions and 48 deletions

View File

@ -65,6 +65,7 @@ define([], function() {
constants.THEME_LIST = { constants.THEME_LIST = {
"default": "Default", "default": "Default",
"gray": "Gray", "gray": "Gray",
"original": "Original",
"night": "Night", "night": "Night",
"school": "School", "school": "School",
}; };

View File

@ -43,6 +43,7 @@
// Panel buttons // Panel buttons
@panel-button-bg-color: #FFF; @panel-button-bg-color: #FFF;
@panel-button-border-fade: 80%; @panel-button-border-fade: 80%;
@panel-button-box-shadow: ~"0 0 1px rgba(0,0,0,.5)";
@panel-border-color: fade(@primary-desaturated, 10%); @panel-border-color: fade(@primary-desaturated, 10%);
@error-border: #FF6161; @error-border: #FF6161;
@ -55,12 +56,13 @@
@menu-panel-width: 280px; @menu-panel-width: 280px;
@document-panel-width: 340px; @document-panel-width: 340px;
@jgrowl-width: 260px; @jgrowl-width: 260px;
@resizer-size: 35px; @resizer-size: 30px;
/* Bootstrap */ /* Bootstrap */
@body-bg: @secondary-bg-light; @body-bg: @secondary-bg-light;
@text-color: @secondary-color-darkest; @text-color: @secondary-color-darkest;
@link-color: desaturate(#0080FF, 25%); @link-color: desaturate(#0080FF, 25%);
@link-hover-color: darken(@link-color, 20%);
@input-bg: @secondary-bg-lighter; @input-bg: @secondary-bg-lighter;
@input-border: @secondary-border-color; @input-border: @secondary-border-color;
@input-height-base: 38px; @input-height-base: 38px;
@ -81,7 +83,7 @@
@dropdown-link-color: @secondary-color-darkest; @dropdown-link-color: @secondary-color-darkest;
@dropdown-link-hover-color: darken(@primary-desaturated, 25%); @dropdown-link-hover-color: darken(@primary-desaturated, 25%);
@dropdown-link-hover-bg: @btn-default-hover-bg; @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-link-disabled-color: @disabled-color;
@dropdown-divider-bg: @dropdown-border; @dropdown-divider-bg: @dropdown-border;
@list-group-link-color: @secondary-color-darkest; @list-group-link-color: @secondary-color-darkest;
@ -101,6 +103,7 @@
@btn-primary-color: @secondary-color-darker; @btn-primary-color: @secondary-color-darker;
@btn-primary-bg: @primary-bg; @btn-primary-bg: @primary-bg;
@btn-primary-border: fade(@secondary, 5%); @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-color: darken(@primary-desaturated, 25%);
@btn-success-bg: @transparent; @btn-success-bg: @transparent;
@btn-success-border: @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"); .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 { .nav-pills > li {
> a { > a {
border: 1px solid @transparent; border: 1px solid @transparent;
@ -275,7 +260,7 @@ a {
.open &.dropdown-toggle { .open &.dropdown-toggle {
color: darken(@secondary, 30%); color: darken(@secondary, 30%);
border-color: fade(@secondary, 10%); 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 &, .info-tooltip &,
.open &.dropdown-toggle { .open &.dropdown-toggle {
color: darken(@secondary, 30%); 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 background-color: @secondary-bg !important; // important to override .nav > li > a:hover
} }
} }
@ -523,7 +508,8 @@ a {
border-radius: 8px; border-radius: 8px;
position: absolute; position: absolute;
margin-top: 6px; 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 { &:active {
.box-shadow(~"inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 1px rgba(0,0,0,.5)"); .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); margin-left: (-@menu-panel-width - 15);
.transition(~"margin-left ease-in-out 0.35s"); .transition(~"margin-left ease-in-out 0.35s");
.sub-menu { .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 { &.in {
margin-left: 0; margin-left: 0;
@ -562,7 +560,6 @@ a {
right: -50px; right: -50px;
z-index: -1; z-index: -1;
padding: 0 10px 0 50px; 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 { .collapse-button:hover, &.in .collapse-button, &.collapsing .collapse-button {
right: -55px; right: -55px;
@ -571,11 +568,6 @@ a {
background-color: @secondary-bg-light; background-color: @secondary-bg-light;
padding-top: 6px; padding-top: 6px;
border-right: 1px solid @secondary-border-color-light; border-right: 1px solid @secondary-border-color-light;
& > .nav > li > a {
&:hover, &:active {
background-color: inherit;
}
}
} }
} }
@ -594,7 +586,6 @@ a {
left: -50px; left: -50px;
padding: 0 50px 0 3px; padding: 0 50px 0 3px;
z-index: -1; z-index: -1;
.transition(~"border-width ease-in-out .15s, left ease-in-out 0.15s");
i.icon-folder-open { i.icon-folder-open {
font-size: 19px; font-size: 19px;
padding-bottom: 1px; padding-bottom: 1px;
@ -871,9 +862,11 @@ a {
& > li.active > a { & > li.active > a {
&, &:hover, &:focus { &, &:hover, &:focus {
color: @btn-primary-color; color: @btn-primary-color;
background-color: @btn-primary-bg; background-color: @modal-content-bg;
border-color: @btn-primary-border; border-color: @modal-header-border-color;
border-bottom-color: @transparent; border-bottom-color: @transparent;
margin-bottom: -1px;
padding: 10px 15px 11px;
} }
} }
} }
@ -993,16 +986,16 @@ a {
box-sizing: initial; box-sizing: initial;
} }
.ace_marker-layer .ace_active-line {
background-color: fade(@primary-desaturated, 5%);
}
.ace_cursor { .ace_cursor {
color: darken(@primary-desaturated, 30%); color: darken(@primary-desaturated, 30%);
} }
.ace_print-margin { .ace_print-margin-layer {
background-color: fade(@primary-desaturated, 5%); display: none;
}
.ace_marker-layer .ace_bracket {
display: none;
} }
.ace_markup.ace_heading { .ace_markup.ace_heading {
@ -1021,7 +1014,6 @@ a {
.ace_meta.ace_tag { .ace_meta.ace_tag {
color: @tertiary-color-dark; color: @tertiary-color-dark;
font-style: italic;
font-weight: bold; font-weight: bold;
background-color: @code-bg; background-color: @code-bg;
} }
@ -1044,7 +1036,6 @@ a {
.ace_string { .ace_string {
color: @tertiary-color-dark; color: @tertiary-color-dark;
font-style: italic;
background-color: @code-bg; background-color: @code-bg;
} }

View File

@ -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;
}
}
*/

View File

@ -56,12 +56,13 @@
background-image: url("../img/school-line.png"); background-image: url("../img/school-line.png");
background-repeat: repeat; background-repeat: repeat;
} }
.ace_marker-layer .ace_active-line {
background-color: fade(@blue-ink, 5%); .ace_print-margin-layer {
} display: block;
.ace_print-margin { .ace_print-margin {
background-color: fade(@red-ink, 50%); background-color: fade(@red-ink, 50%);
} }
}
.ace_markup.ace_heading { .ace_markup.ace_heading {
color: @black-ink; color: @black-ink;