From 9b4678ed65a097c57154d444c39e6b95653b2fb9 Mon Sep 17 00:00:00 2001 From: Aleksander Machniak Date: Wed, 22 Nov 2017 19:20:35 +0100 Subject: [PATCH] Limit number of used shades of gray, make them "inherit" from the main black --- skins/elastic/styles/colors.less | 77 ++++++++++++---------- skins/elastic/styles/layout.less | 4 +- skins/elastic/styles/widgets/common.less | 4 +- skins/elastic/styles/widgets/forms.less | 2 +- skins/elastic/styles/widgets/jqueryui.less | 7 +- skins/elastic/styles/widgets/mail.less | 6 +- 6 files changed, 57 insertions(+), 43 deletions(-) diff --git a/skins/elastic/styles/colors.less b/skins/elastic/styles/colors.less index d977402fb..85aeff3f5 100644 --- a/skins/elastic/styles/colors.less +++ b/skins/elastic/styles/colors.less @@ -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; diff --git a/skins/elastic/styles/layout.less b/skins/elastic/styles/layout.less index 95fbb8617..ded1aa8e5 100644 --- a/skins/elastic/styles/layout.less +++ b/skins/elastic/styles/layout.less @@ -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; diff --git a/skins/elastic/styles/widgets/common.less b/skins/elastic/styles/widgets/common.less index 326ca8b41..ca6fbf449 100644 --- a/skins/elastic/styles/widgets/common.less +++ b/skins/elastic/styles/widgets/common.less @@ -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 { diff --git a/skins/elastic/styles/widgets/forms.less b/skins/elastic/styles/widgets/forms.less index dbbaba98b..8b9286c42 100644 --- a/skins/elastic/styles/widgets/forms.less +++ b/skins/elastic/styles/widgets/forms.less @@ -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 diff --git a/skins/elastic/styles/widgets/jqueryui.less b/skins/elastic/styles/widgets/jqueryui.less index 4410cd856..d504e6138 100644 --- a/skins/elastic/styles/widgets/jqueryui.less +++ b/skins/elastic/styles/widgets/jqueryui.less @@ -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; + } } } } diff --git a/skins/elastic/styles/widgets/mail.less b/skins/elastic/styles/widgets/mail.less index f944388ae..c646dd5be 100644 --- a/skins/elastic/styles/widgets/mail.less +++ b/skins/elastic/styles/widgets/mail.less @@ -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;