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. * See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/ */
@color-font: #141823;
@color-main: #37beff; @color-main: #37beff;
@color-black: #161b1d;
@color-font: @color-black;
@color-link: #00acff; @color-link: #00acff;
@color-link-hover: darken(@color-link, 10%); @color-link-hover: darken(@color-link, 10%);
@color-border: #ddd; @color-border: #ddd;
@color-error: #ff5552; @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 // Layout elements
@color-layout-border: #ddd; @color-layout-border: @color-black-shade-border;
@color-layout-sidebar-background: #fff; @color-layout-sidebar-background: #fff;
@color-layout-list-background: #fff; @color-layout-list-background: #fff;
@color-layout-content-background: #fff; @color-layout-content-background: #fff;
@ -64,25 +72,25 @@
@color-list-selected: inherit; @color-list-selected: inherit;
@color-list-selected-background: tint(@color-main, 96%); @color-list-selected-background: tint(@color-main, 96%);
@color-list-flagged: @color-error; @color-list-flagged: @color-error;
@color-list-deleted: #ccc; @color-list-deleted: @color-black-shade-border;
@color-list-secondary: #666; @color-list-secondary: @color-black-shade-text;
@color-list-droptarget-background: #ffffcc; @color-list-droptarget-background: #ffffcc;
@color-list-focus-indicator: lighten(@color-main, 20%); @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: #fff;
@color-list-badge-background: @color-main; @color-list-badge-background: @color-main;
@color-list-recent: blue; @color-list-recent: blue;
@color-list-recent-badge: #fff; @color-list-recent-badge: #fff;
@color-list-recent-badge-background: @color-list-recent; @color-list-recent-badge-background: @color-list-recent;
@color-list-pagenav: #888; @color-list-pagenav: @color-black-shade-text;
// Drag-n-drop layer // Drag-n-drop layer
@color-drag-layer: #fff; @color-drag-layer: #fff;
@color-drag-layer-background: @color-taskmenu-background; @color-drag-layer-background: @color-taskmenu-background;
@color-drag-layer-shadow: #eee; @color-drag-layer-shadow: @color-black-shade-bg;
// Messages // Messages
@ -90,20 +98,20 @@
@color-message-border: rgba(0, 0, 0, 0.15); @color-message-border: rgba(0, 0, 0, 0.15);
@color-message-background: #f8fafb; @color-message-background: #f8fafb;
@color-message-link: @color-main; @color-message-link: @color-main;
@color-message-shadow: #ddd;
@color-message-information: @color-main; @color-message-information: @color-main;
@color-message-success: #41b849; @color-message-success: @color-success;
@color-message-warning: #ffd452; @color-message-warning: @color-warning;
@color-message-error: @color-error; @color-message-error: @color-error;
@color-message-loading: #333; @color-message-loading: #333;
@color-message-shadow: @color-black-shade-bg;
// Popovers (menus) // Popovers (menus)
@color-popover-header: #888; @color-popover-header: @color-black-shade-text;
@color-popover-header-background: transparent; @color-popover-header-background: transparent;
@color-popover-shadow: #eee; @color-popover-shadow: @color-black-shade-bg;
@color-popover-separator: #666; @color-popover-separator: @color-black-shade-text;
@color-popover-separator-background: #f4f4f4; @color-popover-separator-background: @color-black-shade-bg;
// Dialogs // Dialogs
@ -112,52 +120,53 @@
@color-dialog-header-border: @color-border; @color-dialog-header-border: @color-border;
@color-spinner-circle: #eee; @color-spinner-circle: @color-black-shade-bg;
@color-spinner-item: #666; @color-spinner-item: @color-black-shade-text;
// Forms // 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-focus: #80bdff; // from Bootstrap's .form-control:focus
@color-input-border-invalid: @color-error; @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-border: @color-input-border;
@color-recipient-input-background: #f4f4f4; @color-recipient-input-background: @color-black-shade-bg;
@color-checkbox: @color-main; @color-checkbox: @color-main;
@color-checkbox-checked: @color-main; @color-checkbox-checked: @color-main;
@color-checkbox-focus: darken(@color-checkbox, 30%); @color-checkbox-focus: darken(@color-checkbox, 30%);
@color-checkbox-checked-focus: darken(@color-checkbox-checked, 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: #fff;
@color-btn-secondary-background: #7f8a90; @color-btn-secondary-background: lighten(@color-black, 50%);
@color-btn-primary: #fff; @color-btn-primary: #fff;
@color-btn-primary-background: @color-main; @color-btn-primary-background: @color-main;
@color-btn-danger: #fff; @color-btn-danger: #fff;
@color-btn-danger-background: @color-error; @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: @color-main;
@color-quota-value-warning: @color-error; @color-quota-value-warning: @color-error;
@color-blockquote-background: #f6f6f6; @color-blockquote-background: fadeout(@color-black-shade-bg, 50%);
@color-blockquote-0: blue; @color-blockquote-0: darken(@color-main, 30%);
@color-blockquote-1: green; @color-blockquote-1: darken(@color-success, 25%);
@color-blockquote-2: #900; @color-blockquote-2: darken(@color-error, 20%);
@color-blockquote-0-border: blue; @color-blockquote-0-border: @color-blockquote-0;
@color-blockquote-1-border: green; @color-blockquote-1-border: @color-blockquote-1;
@color-blockquote-2-border: #b00; @color-blockquote-2-border: @color-blockquote-2;
@color-mail-signature: #aaa; @color-mail-signature: @color-black-shade-text;
@color-mail-headers: #666; @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: @color-list-selected;
@color-table-selected-background: @color-list-selected-background; @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 { & > .header {
border-bottom: 1px solid #ddd; border-bottom: 1px solid @color-layout-border;
.header-title { .header-title {
.overflow-ellipsis; .overflow-ellipsis;
@ -131,7 +131,7 @@ body > #layout {
} }
& > .footer { & > .footer {
border-top: 1px solid #ddd; border-top: 1px solid @color-layout-border;
&:empty { &:empty {
display: none; display: none;

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

@ -249,7 +249,7 @@ fieldset.image-attachment {
.count { .count {
display: block; display: block;
color: #999; color: @color-quota-text;
font-size: 1.1rem; font-size: 1.1rem;
line-height: 2; line-height: 2;
} }
@ -348,7 +348,7 @@ fieldset.image-attachment {
} }
tr:last-child td { 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 { 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; padding: 1rem 1rem 12rem;
margin: 0 1rem .25rem 1rem; margin: 0 1rem .25rem 1rem;
border-radius: .5rem; border-radius: .5rem;
border: .2rem dashed #ddd; border: .2rem dashed @color-table-border;
// TODO background image // TODO background image

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

@ -162,7 +162,7 @@
} }
&.btn-primary { &.btn-primary {
color: #007bff; // TODO: var color: @color-btn-primary-background;
background: transparent; background: transparent;
} }
@ -170,6 +170,11 @@
color: @color-toolbar-button; color: @color-toolbar-button;
background: transparent; 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 { div.header-links {
a { a {
color: #aaa; color: @color-link-secondary;
font-size: 90%; font-size: 90%;
margin-right: .5rem; margin-right: .5rem;
text-decoration: none; text-decoration: none;
@ -152,8 +152,8 @@
font-size: 90%; font-size: 90%;
color: @color-font; color: @color-font;
text-align: center; text-align: center;
background: #f8f8f8; background: @color-black-shade-bg;
border: 1px solid #e8e8e8; border: 1px solid @color-black-shade-border;
border-top: none; border-top: none;
border-bottom-right-radius: .3rem; border-bottom-right-radius: .3rem;
border-bottom-left-radius: .3rem; border-bottom-left-radius: .3rem;

Write Preview
Loading…
Cancel
Save