caojiezi2003/Stackedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New theme v4

Browse Source
This commit is contained in:
benweet 2014-08-11 00:40:45 +01:00
parent 050dfc21f4
commit 6f94e8d45e
5 changed files with 169 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/res/styles/base.less
View File

@ -372,6 +372,10 @@ kbd {
} }
} }
.icon-trash {
line-height: 1.50em;
}
.icon-folder-open { .icon-folder-open {
font-size: 80%; font-size: 80%;
&:before { &:before {

127
public/res/styles/main.less
View File

@ -3,16 +3,17 @@
@import (less) "jquery.jgrowl.css"; @import (less) "jquery.jgrowl.css";
/* Colors */ /* Colors */
@logo-yellow: #FFD900; @logo-yellow: #ffe600;
@logo-blue: #53a9ff; @logo-blue: #75b7fd;
@logo-orange: #ff7606; @logo-orange: #ff8a00;
@logo-green: #a5cc0a; @logo-green: #bbd500;
@primary: #0080FF; @primary: #0080FF;
@secondary: @primary; @secondary: @primary;
@tertiary: @primary; @tertiary: @primary;
@primary-desaturated: desaturate(@primary, 70%); @primary-desaturated: desaturate(@primary, 70%);
@secondary-desaturated: desaturate(@secondary, 80%); @secondary-desaturated: desaturate(@secondary, 80%);
@transparent: fade(#000, 0%); @transparent: fade(#000, 0%);
@red-color: #E84C3D;
// Navbar // Navbar
@primary-bg: lighten(@primary-desaturated, 42%); @primary-bg: lighten(@primary-desaturated, 42%);
@ -41,11 +42,11 @@
// Panel buttons // Panel buttons
@panel-button-bg-color: #FFF; @panel-button-bg-color: #FFF;
@panel-button-border-fade: 80%; @panel-button-border-fade: 90%;
@panel-button-box-shadow: ~"0 0 1px rgba(0,0,0,.5)"; @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: @red-color;
@disabled-color: mix(@secondary-color, @input-bg, 33%); @disabled-color: mix(@secondary-color, @input-bg, 33%);
@folder-color: @secondary-color-darker; @folder-color: @secondary-color-darker;
@jgrowl-bg-color: fade(@modal-backdrop-bg, 90%); @jgrowl-bg-color: fade(@modal-backdrop-bg, 90%);
@ -54,7 +55,7 @@
@title-max-width: 400px; @title-max-width: 400px;
@menu-panel-width: 280px; @menu-panel-width: 280px;
@document-panel-width: 320px; @document-panel-width: 320px;
@jgrowl-width: 260px; @jgrowl-width: 240px;
@resizer-size: 32px; @resizer-size: 32px;
@editor-line-weight: 1.65; @editor-line-weight: 1.65;
@ -97,24 +98,6 @@
@list-group-hover-border-color: fade(@secondary, 10%); @list-group-hover-border-color: fade(@secondary, 10%);
@input-color: @secondary-color-darkest; @input-color: @secondary-color-darkest;
@input-color-placeholder: @disabled-color; @input-color-placeholder: @disabled-color;
@btn-default-color: @secondary-color-darker;
@btn-default-bg: @transparent;
@btn-default-border: @transparent;
@btn-default-hover-bg: fade(@secondary-desaturated, 4%);
@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, 20%);
@btn-success-bg: @transparent;
@btn-success-border: @transparent;
@btn-success-hover-bg: fade(@primary-desaturated, 5%);
@btn-info-color: fade(@secondary-desaturated, 35%);
@btn-info-bg: @transparent;
@btn-info-border: @transparent;
@btn-info-hover-color: darken(@secondary, 30%);
@btn-info-hover-border: fade(@secondary, 8%);
@btn-info-hover-bg: @secondary-bg-dark;
@gray-lighter: @body-bg; @gray-lighter: @body-bg;
@modal-header-border-color: @secondary-border-color-light; @modal-header-border-color: @secondary-border-color-light;
@modal-content-bg: @secondary-bg-lighter; @modal-content-bg: @secondary-bg-lighter;
@ -129,15 +112,14 @@
@popover-arrow-color: @secondary-bg; @popover-arrow-color: @secondary-bg;
@popover-arrow-outer-color: @secondary-border-color; @popover-arrow-outer-color: @secondary-border-color;
@popover-title-bg: @transparent; @popover-title-bg: @transparent;
@alert-border-radius: 0;
@label-warning-bg: spin(darken(@logo-yellow, 4%), -5); @label-warning-bg: spin(darken(@logo-yellow, 4%), -5);
@state-warning-text: spin(darken(@logo-yellow, 14%), -5); @state-warning-text: spin(darken(@logo-yellow, 14%), -5);
@state-warning-bg: fade(spin(@logo-yellow, -5), 12%); @state-warning-bg: fade(spin(@logo-yellow, -5), 12%);
@state-warning-border: fade(spin(@logo-yellow, -5), 24%); @state-warning-border: fade(spin(@logo-yellow, -5), 24%);
@label-danger-bg: spin(darken(@logo-orange, 4%), -8); @label-danger-bg: darken(@red-color, 4%);
@state-danger-text: spin(darken(@logo-orange, 18%), -8); @state-danger-text: darken(@red-color, 10%);
@state-danger-bg: fade(spin(@logo-orange, -8), 10%); @state-danger-bg: fade(@red-color, 10%);
@state-danger-border: fade(spin(@logo-orange, -8), 20%); @state-danger-border: fade(@red-color, 15%);
body { body {
@ -314,6 +296,10 @@ 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");
} }
@btn-default-color: @secondary-color-darker;
@btn-default-bg: @transparent;
@btn-default-border: @transparent;
@btn-default-hover-bg: fade(@secondary-desaturated, 4%);
.btn-default { .btn-default {
&:hover, &:hover,
&:focus, &:focus,
@ -325,6 +311,10 @@ a {
} }
} }
@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-primary { .btn-primary {
&:hover, &:hover,
&:focus, &:focus,
@ -337,18 +327,28 @@ a {
} }
// Navbar buttons // Navbar buttons
@btn-success-color: darken(@primary-desaturated, 20%);
@btn-success-bg: @transparent;
@btn-success-border: @transparent;
@btn-success-hover-bg: fade(@primary-desaturated, 5%);
.btn-success { .btn-success {
&:hover, &:hover,
&:focus, &:focus,
&:active, &:active,
.open &.dropdown-toggle { .open &.dropdown-toggle {
color: darken(@primary, 30%); color: darken(@primary, 30%) !important;
border-color: @primary-border-color; border-color: @primary-border-color;
background-color: @btn-success-hover-bg !important; // important to override .nav > li > a:hover background-color: @btn-success-hover-bg !important; // important to override .nav > li > a:hover
} }
} }
// Buttons over preview // Buttons over preview
@btn-info-color: fade(@secondary-desaturated, 35%);
@btn-info-bg: @transparent;
@btn-info-border: @transparent;
@btn-info-hover-color: darken(@secondary, 30%);
@btn-info-hover-border: fade(@secondary, 8%);
@btn-info-hover-bg: @secondary-bg-dark;
.btn-info { .btn-info {
&:hover, &:hover,
&:focus, &:focus,
@ -418,7 +418,7 @@ a {
.form-control.error { .form-control.error {
border-color: @error-border; border-color: @error-border;
.box-shadow(~"@{form-control-inset-shadow}, 0 0 8px rgba(255, 0, 0, 0.6)"); .box-shadow(~"@{form-control-inset-shadow}, 0 0 8px @{red-color}");
} }
.help-block { .help-block {
@ -436,7 +436,7 @@ a {
.input-group-btn { .input-group-btn {
.btn { .btn {
i { i {
font-size: 120%; font-size: 110%;
} }
} }
&:first-child .btn { &:first-child .btn {
@ -554,7 +554,7 @@ a {
border-radius: 1px; border-radius: 1px;
margin: 0 2px; margin: 0 2px;
opacity: 0.25; opacity: 0.25;
background-color: @btn-success-color; background-color: fade(@btn-success-color, 75%);
} }
} }
@ -621,9 +621,6 @@ a {
.menu-panel { .menu-panel {
.layout-panel(); .layout-panel();
width: @menu-panel-width; width: @menu-panel-width;
.alert {
padding: 10px 0;
}
i { i {
margin-right: 8px; margin-right: 8px;
} }
@ -643,6 +640,11 @@ a {
} }
} }
} }
.alert {
padding: 10px;
margin-left: -10px;
margin-right: -10px;
}
.toggle-button { .toggle-button {
border-top: 4px solid fade(@logo-yellow, @panel-button-border-fade); border-top: 4px solid fade(@logo-yellow, @panel-button-border-fade);
border-right: 5px solid fade(@logo-blue, @panel-button-border-fade); border-right: 5px solid fade(@logo-blue, @panel-button-border-fade);
@ -735,7 +737,7 @@ a {
// Dropdown document selector // Dropdown document selector
.dropdown-file-selector { .dropdown-file-selector {
top: 6px; top: 6px;
right: 55px; right: 45px;
left: auto; left: auto;
margin: 0; margin: 0;
min-width: 280px; min-width: 280px;
@ -754,8 +756,8 @@ a {
.nav-pills { .nav-pills {
margin-bottom: 15px; margin-bottom: 15px;
} }
.list-group { .list-group {
background-color: @list-group-bg;
.nav { .nav {
margin-bottom: 30px; margin-bottom: 30px;
border: 0; border: 0;
@ -768,11 +770,14 @@ a {
.list-group-item { .list-group-item {
padding: 3px; padding: 3px;
margin: 0; margin: 0;
border-left-width: 1px;
border-right-width: 1px;
i { i {
margin-right: 3px; margin-right: 3px;
} }
.btn { .btn {
float: right; float: right;
margin-right: 3px;
i { i {
margin: 0; margin: 0;
font-size: 105%; font-size: 105%;
@ -783,13 +788,19 @@ a {
} }
} }
.file-list .list-group-item { .file-list .list-group-item {
background-color: @transparent;
padding: 0 3px; padding: 0 3px;
} }
margin-bottom: 0;
.list-group .list-group-item {
border-radius: @border-radius-base;
}
.folder { .folder {
font-weight: bold; font-weight: bold;
color: @folder-color; color: @folder-color;
font-size: 15px; font-size: 15px;
border-top-color: @modal-content-separator-color; background-color: @transparent;
} }
.input-rename { .input-rename {
width: 220px; width: 220px;
@ -835,7 +846,7 @@ a {
cursor: move; cursor: move;
&.animate { &.animate {
.transition-transform(350ms ease-in-out); .transition(350ms ease-in-out all);
} }
.btn-group { .btn-group {
.btn { .btn {
@ -953,7 +964,7 @@ a {
& > li.active > a { & > li.active > a {
&, &:hover, &:focus { &, &:hover, &:focus {
color: @btn-primary-color; color: @text-color;
background-color: @modal-content-bg; background-color: @modal-content-bg;
border-color: @modal-header-border-color; border-color: @modal-header-border-color;
border-bottom-color: @transparent; border-bottom-color: @transparent;
@ -1151,11 +1162,7 @@ a {
font-size: 1em !important; font-size: 1em !important;
} }
.comment-highlight { .comment-highlight, .find-replace-highlight {
background-color: fade(@label-warning-bg, 30%);
}
.find-replace-highlight {
background-color: fade(@logo-yellow, 60%); background-color: fade(@logo-yellow, 60%);
} }
@ -1235,8 +1242,8 @@ a {
} }
} }
.h1, .h11 { font-size: 1.4em; } .h1, .h11 { font-size: 1.7em; }
.h2, .h22 { font-size: 1.3em; } .h2, .h22 { font-size: 1.4em; }
.h3 { font-size: 1.2em; } .h3 { font-size: 1.2em; }
.h4 { font-size: 1.1em; } .h4 { font-size: 1.1em; }
.h5 { font-size: 1em; } .h5 { font-size: 1em; }
@ -1365,11 +1372,6 @@ div.dropdown-menu, {
} }
} }
.btn-gittip {
width: 52px;
height: 25px;
}
// File titles // File titles
.title-icon-category { .title-icon-category {
display: inline-block; display: inline-block;
@ -1450,8 +1452,8 @@ input[type="file"] {
.disabled { .disabled {
display: none; display: none;
} }
.popover-navigation { iframe {
margin-top: -40px; position: absolute;
} }
} }
@ -1486,6 +1488,7 @@ input[type="file"] {
} }
.form-group, blockquote { .form-group, blockquote {
margin-bottom: 10px; margin-bottom: 10px;
padding: 0;
} }
.comment-author { .comment-author {
font-weight: bold; font-weight: bold;
@ -1543,21 +1546,21 @@ input[type="file"] {
div.jGrowl { div.jGrowl {
z-index: 1040; z-index: 1040;
font-size: inherit; font-size: 14px;
&.bottom-right { &.bottom-right {
right: 30px; right: 35px;
} }
div.jGrowl-notification, div.jGrowl-closer { div.jGrowl-notification, div.jGrowl-closer {
background-color: @jgrowl-bg-color; background-color: @jgrowl-bg-color;
width: @jgrowl-width; width: @jgrowl-width;
margin: 20px 0; margin: 10px 0;
padding: 15px 20px; padding: 10px 12px;
-ms-filter: none; -ms-filter: none;
filter: none; filter: none;
border-radius: 5px; border-radius: 4px;
} }
div.jGrowl-notification { div.jGrowl-notification {
min-height: 80px; min-height: 60px;
} }
} }

1
public/res/themes/blue.less Normal file
View File

@ -0,0 +1 @@
@import "../styles/main.less";

99
public/res/themes/default.less
View File

@ -1 +1,100 @@
@import "../styles/main.less"; @import "../styles/main.less";
@primary: #808080;
@navbar-default-bg: #4a4a4a;
@link-color: #4FA1DB;
@input-bg: #fff;
@input-border: @secondary-border-color-light;
@panel-button-box-shadow: ~"0 0 1px rgba(255,255,255,0.75)";
@modal-backdrop-bg: #606060;
@input-color: @secondary-color-darkest;
@disabled-color: mix(@secondary-color, @input-bg, 50%);
// Navbar buttons
@btn-success-color: #ddd;
@btn-success-hover-bg: darken(@navbar-default-bg, 10%);
.btn-success {
&:hover,
&:focus,
&:active,
.open &.dropdown-toggle {
color: #fff !important;
}
.buttons-dropdown .dropdown-menu & {
color: darken(@primary-desaturated, 20%) !important;
&:hover,
&:focus,
&:active {
border-color: @primary-border-color;
background-color: fade(@primary-desaturated, 5%) !important; // important to override .nav > li > a:hover
}
}
}
// Buttons over preview
@btn-info-hover-bg: @secondary-bg-dark;
@btn-primary-color: #fff;
@btn-primary-bg: @link-color;
@btn-primary-hover-bg: darken(@btn-primary-bg, 8%);
.btn-primary {
&:hover,
&:focus,
&:active,
.open &.dropdown-toggle {
color: @btn-primary-color;
}
}
@btn-default-color: @text-color;
@btn-default-bg: #fff;
@btn-default-border: @input-border;
@btn-default-hover-bg: fade(#000, 2%);
@secondary-bg: #fcfcfc;
@secondary-bg-light: #f6f6f6;
@secondary-bg-lighter: @secondary-bg;
@secondary-bg-dark: #f0f0f0;
@secondary-border-color: #e2e2e2;
@secondary-border-color-light: #eee;
@secondary-border-color-lighter: #eee;
@tertiary-bg: @secondary-bg;
.sub-menu, .file-list .list-group-item {
background-color: @secondary-bg;
}
.extension-preview-buttons.closed {
.opacity(0.25);
&.info-tooltip-container {
.opacity(1);
}
}
.modal-document-manager {
.btn-default {
background-color: transparent;
border-color: transparent;
&:hover,
&:focus,
&:active,
.open &.dropdown-toggle {
border-color: fade(@secondary, 10%);
}
}
}
.form-control-focus(@color: @link-color) {
@color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
&:focus {
border-color: fade(@color, 50%);
outline: 0;
.box-shadow(~"@{form-control-inset-shadow}, 0 0 12px -1px @{color}");
}
}

160
public/res/themes/original.less
View File

@ -1,160 +0,0 @@
@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: #9a9a9a;
@secondary-color: #a8a8a8;
@navbar-default-bg: #474747;
@btn-default-hover-bg: fade(@primary, 16%);
@btn-primary-bg: #e6e6e6;
@btn-primary-hover-bg: darken(@btn-primary-bg, 4%);
//@btn-primary-color: #bbb;
//@btn-primary-hover-bg: fade(@primary, 25%);
@btn-success-color: #a0a0a0;
@btn-success-hover-bg: darken(@navbar-default-bg, 10%);
@btn-info-hover-bg: #ededed;
@panel-button-bg-color: #e8e8e8;
@panel-button-box-shadow: ~"0 0 1px rgba(255,255,255,0.75)";
@input-bg: #fff;
@modal-backdrop-bg: #606060;
@input-color: @secondary-color-darkest;
@disabled-color: mix(@secondary-color, @input-bg, 50%);
//@list-group-active-color: @text-color;
//@list-group-border: @transparent;
//@list-group-active-border: fade(@secondary, 8%);
//@list-group-hover-border-color: fade(@secondary, 8%);
/*
@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: @tertiary-bg;
@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 {
.buttons-dropdown .dropdown-menu & {
&:hover,
&:focus,
&:active {
background-color: #777 !important;
}
}
&:hover,
&:focus,
&:active,
.open &.dropdown-toggle {
color: #fff;
}
}
a.list-group-item,
.dropdown-menu a {
&:hover,
&:focus {
color: #333;
border-top-color: fade(@secondary, 15%);
border-bottom-color: fade(#fff, 85%);
.box-shadow(inset 1px 1px 4px rgba(0,0,0,.025))
}
}
.list-group-item.active {
&,
&:hover,
&:focus {
background-color: fade(@primary, 8%);
color: #606060;
border-top-color: fade(@secondary, 10%);
border-bottom-color: fade(#fff, 80%);
.box-shadow(inset 1px 1px 4px rgba(0,0,0,.025))
}
}
.ace-tm {
.ace_cursor {
border-left-color: #555;
}
}
.ui-layout-resizer-north {
background-color: fade(@navbar-default-bg, 75%);
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: @tertiary-bg;
}
}
/*
.menu-panel {
.sub-menu {
background-color: @navbar-default-bg;
}
.panel-content {
background-color: @navbar-default-bg;
}
}
*/