banananetwork
/
roundcubemail
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Limit number of used shades of gray, make them "inherit" from the main black

Browse Source
pull/5742/merge
Aleksander Machniak 7 years ago
parent b9249554a8
commit 9b4678ed65
6 changed files with 57 additions and 43 deletions
Show Stats Download Patch File Download Diff File

77
skins/elastic/styles/colors.less
Unescape Escape View File

@ -9,16 +9,24 @@
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
@color-font: #141823;
@color-main: #37beff;
@color-black: #161b1d;
@color-font: @color-black;
@color-link: #00acff;
@color-link-hover: darken(@color-link, 10%);
@color-border: #ddd;
@color-error: #ff5552;
@color-success: #41b849;
@color-warning: #ffd452;
@color-link-secondary: lighten(@color-font, 60%);
@color-black-shade-text: lighten(@color-black, 35%);
@color-black-shade-border: lighten(@color-black, 75%);
@color-black-shade-bg: lighten(@color-black, 85%);
// Layout elements
@color-layout-border: #ddd;
@color-layout-border: @color-black-shade-border;
@color-layout-sidebar-background: #fff;
@color-layout-list-background: #fff;
@color-layout-content-background: #fff;
@ -64,25 +72,25 @@
@color-list-selected: inherit;
@color-list-selected-background: tint(@color-main, 96%);
@color-list-flagged: @color-error;
@color-list-deleted: #ccc;
@color-list-secondary: #666;
@color-list-deleted: @color-black-shade-border;
@color-list-secondary: @color-black-shade-text;
@color-list-droptarget-background: #ffffcc;
@color-list-focus-indicator: lighten(@color-main, 20%);
@color-list-border: #f4f4f4;
@color-list-border: @color-black-shade-bg;
@color-list-badge: #fff;
@color-list-badge-background: @color-main;
@color-list-recent: blue;
@color-list-recent-badge: #fff;
@color-list-recent-badge-background: @color-list-recent;
@color-list-pagenav: #888;
@color-list-pagenav: @color-black-shade-text;
// Drag-n-drop layer
@color-drag-layer: #fff;
@color-drag-layer-background: @color-taskmenu-background;
@color-drag-layer-shadow: #eee;
@color-drag-layer-shadow: @color-black-shade-bg;
// Messages
@ -90,20 +98,20 @@
@color-message-border: rgba(0, 0, 0, 0.15);
@color-message-background: #f8fafb;
@color-message-link: @color-main;
@color-message-shadow: #ddd;
@color-message-information: @color-main;
@color-message-success: #41b849;
@color-message-warning: #ffd452;
@color-message-success: @color-success;
@color-message-warning: @color-warning;
@color-message-error: @color-error;
@color-message-loading: #333;
@color-message-shadow: @color-black-shade-bg;
// Popovers (menus)
@color-popover-header: #888;
@color-popover-header: @color-black-shade-text;
@color-popover-header-background: transparent;
@color-popover-shadow: #eee;
@color-popover-separator: #666;
@color-popover-separator-background: #f4f4f4;
@color-popover-shadow: @color-black-shade-bg;
@color-popover-separator: @color-black-shade-text;
@color-popover-separator-background: @color-black-shade-bg;
// Dialogs
@ -112,52 +120,53 @@
@color-dialog-header-border: @color-border;
@color-spinner-circle: #eee;
@color-spinner-item: #666;
@color-spinner-circle: @color-black-shade-bg;
@color-spinner-item: @color-black-shade-text;
// Forms
@color-input-border: rgba(0, 0, 0, 0.15); // from Bootstrap's .form-control
@color-input-border: rgba(22, 27, 29, 0.15);
@color-input-border-focus: #80bdff; // from Bootstrap's .form-control:focus
@color-input-border-invalid: @color-error;
@color-input-addon-background: #e9ecef; // from Bootstrap's .input-group-addon
@color-input-addon-background: @color-black-shade-bg;
@color-recipient-input-border: @color-input-border;
@color-recipient-input-background: #f4f4f4;
@color-recipient-input-background: @color-black-shade-bg;
@color-checkbox: @color-main;
@color-checkbox-checked: @color-main;
@color-checkbox-focus: darken(@color-checkbox, 30%);
@color-checkbox-checked-focus: darken(@color-checkbox-checked, 30%);
@color-form-hint: #888;
@color-form-hint: @color-black-shade-text;
@color-image-upload-background: #f6f6f6;
@color-image-upload-background: @color-black-shade-bg;
@color-btn-secondary: #fff;
@color-btn-secondary-background: #7f8a90;
@color-btn-secondary-background: lighten(@color-black, 50%);
@color-btn-primary: #fff;
@color-btn-primary-background: @color-main;
@color-btn-danger: #fff;
@color-btn-danger-background: @color-error;
@color-quota-background: #ddd;
@color-quota-background: @color-black-shade-border;
@color-quota-text: @color-black-shade-text;
@color-quota-value: @color-main;
@color-quota-value-warning: @color-error;
@color-blockquote-background: #f6f6f6;
@color-blockquote-0: blue;
@color-blockquote-1: green;
@color-blockquote-2: #900;
@color-blockquote-0-border: blue;
@color-blockquote-1-border: green;
@color-blockquote-2-border: #b00;
@color-blockquote-background: fadeout(@color-black-shade-bg, 50%);
@color-blockquote-0: darken(@color-main, 30%);
@color-blockquote-1: darken(@color-success, 25%);
@color-blockquote-2: darken(@color-error, 20%);
@color-blockquote-0-border: @color-blockquote-0;
@color-blockquote-1-border: @color-blockquote-1;
@color-blockquote-2-border: @color-blockquote-2;
@color-mail-signature: #aaa;
@color-mail-headers: #666;
@color-mail-signature: @color-black-shade-text;
@color-mail-headers: @color-black-shade-text;
@color-spellcheck-link: #b91414;
@color-spellcheck-link: @color-error;
@color-table-border: #e9ecef; // from Bootstrap
@color-table-border: @color-layout-border;
@color-table-selected: @color-list-selected;
@color-table-selected-background: @color-list-selected-background;

4
skins/elastic/styles/layout.less
Unescape Escape View File

@ -120,7 +120,7 @@ body > #layout {
}
& > .header {
border-bottom: 1px solid #ddd;
border-bottom: 1px solid @color-layout-border;
.header-title {
.overflow-ellipsis;
@ -131,7 +131,7 @@ body > #layout {
}
& > .footer {
border-top: 1px solid #ddd;
border-top: 1px solid @color-layout-border;
&:empty {
display: none;

4
skins/elastic/styles/widgets/common.less
Unescape Escape View File

@ -249,7 +249,7 @@ fieldset.image-attachment {
.count {
display: block;
color: #999;
color: @color-quota-text;
font-size: 1.1rem;
line-height: 2;
}
@ -348,7 +348,7 @@ fieldset.image-attachment {
}
tr:last-child td {
border-bottom: 1px solid #e9ecef; // TODO: color from Bootstrap, use var
border-bottom: 1px solid @color-table-border;
}
tr.selected td {

2
skins/elastic/styles/widgets/forms.less
Unescape Escape View File

@ -639,7 +639,7 @@ html.touch .popupmenu.form {
padding: 1rem 1rem 12rem;
margin: 0 1rem .25rem 1rem;
border-radius: .5rem;
border: .2rem dashed #ddd;
border: .2rem dashed @color-table-border;
// TODO background image

7
skins/elastic/styles/widgets/jqueryui.less
Unescape Escape View File

@ -162,7 +162,7 @@
}
&.btn-primary {
color: #007bff; // TODO: var
color: @color-btn-primary-background;
background: transparent;
}
@ -170,6 +170,11 @@
color: @color-toolbar-button;
background: transparent;
}
&.btn-danger {
color: @color-btn-danger-background;
background: transparent;
}
}
}
}

6
skins/elastic/styles/widgets/mail.less
Unescape Escape View File

@ -52,7 +52,7 @@
div.header-links {
a {
color: #aaa;
color: @color-link-secondary;
font-size: 90%;
margin-right: .5rem;
text-decoration: none;
@ -152,8 +152,8 @@
font-size: 90%;
color: @color-font;
text-align: center;
background: #f8f8f8;
border: 1px solid #e8e8e8;
background: @color-black-shade-bg;
border: 1px solid @color-black-shade-border;
border-top: none;
border-bottom-right-radius: .3rem;
border-bottom-left-radius: .3rem;

Write Preview
Loading…
Cancel
Save