mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-12-25 09:32:33 +08:00
227bc81736
- Make the retry interval go 2 sec, 3.4s, 6 sec... - Only show the connection status bar if the interval is > 5 seconds, in case the error was temporary. - Do not show sync errors in the sidebar. The only available action is "Try Again", and we try again on our own. The error is frustrating and the user can't do anything about it anyway.
237 lines
7.7 KiB
Text
237 lines
7.7 KiB
Text
// Color abstraction hierarchy:
|
|
// 1. Hex code (#428bca)
|
|
// 2. Common color name (@blue)
|
|
// 3. Generic color descriptor (@accent-primary, @background-primary)
|
|
// --------
|
|
// 4. Generic usage descriptor (@input-background, @button-background)
|
|
// 5. Application-specific usage (@unread-label-background)
|
|
|
|
// Typography abstraction hierarchy
|
|
// 1. Font-face (Nylas-Pro)
|
|
// 2. Common name (@bold, @italic)
|
|
// 3. Generic font descriptor mixins (.bold, .italic, .h1, .h2)
|
|
// --------
|
|
// 4. Generic usage descriptor (.btn-text, .p-body)
|
|
// 5. Application-specific usage (.message-list-h1)
|
|
|
|
|
|
//=============================== Colors ===============================//
|
|
//== Color Definitions
|
|
@black: #231f20;
|
|
@gray-base: #0a0b0c;
|
|
@gray-darker: lighten(@gray-base, 13.5%); // #222
|
|
@gray-dark: lighten(@gray-base, 20%); // #333
|
|
@gray: lighten(@gray-base, 33.5%); // #555
|
|
@gray-light: lighten(@gray-base, 46.7%); // #777
|
|
@gray-lighter: lighten(@gray-base, 92.5%); // #eee
|
|
@white: #ffffff;
|
|
|
|
@blue-dark: #3187e1;
|
|
@blue: #419bf9;
|
|
@blue-light: #009ec4;
|
|
|
|
//== Color Descriptors
|
|
@accent-primary: @blue;
|
|
@accent-primary-dark: @blue-dark;
|
|
|
|
@background-primary: @white;
|
|
@background-off-primary: #fdfdfd;
|
|
@background-secondary: #f6f6f6;
|
|
@background-tertiary: #6d7987;
|
|
|
|
@color-info: @blue-dark;
|
|
@color-success: #5CB346;
|
|
@color-warning: #f0ad4e;
|
|
@color-error: #d9534f;
|
|
@color-danger: #d9534f;
|
|
|
|
@component-active-color: @accent-primary-dark;
|
|
@component-active-bg: @background-primary;
|
|
|
|
@background-gradient: linear-gradient(to top, rgba(241,241,241,0.75) 0%,
|
|
rgba(253,253,253,0.75) 100%);
|
|
|
|
@border-color-primary: darken(@background-primary, 10%);
|
|
@border-color-secondary: darken(@background-secondary, 10%);
|
|
@border-color-tertiary: darken(@background-tertiary, 10%);
|
|
@border-color-divider: @border-color-secondary;
|
|
|
|
|
|
//============================= Typography =============================//
|
|
|
|
// ----- Colors -----
|
|
@text-color: @black;
|
|
@text-color-subtle: fadeout(@text-color, 20%);
|
|
@text-color-very-subtle: fadeout(@text-color, 50%);
|
|
@text-color-inverse: @white;
|
|
@text-color-inverse-subtle: fadeout(@text-color-inverse, 20%);
|
|
@text-color-inverse-very-subtle: fadeout(@text-color-inverse, 50%);
|
|
|
|
@text-color-heading: #434648;
|
|
|
|
@text-color-link: @blue;
|
|
@text-color-link-hover: @blue-dark;
|
|
@text-color-link-active: @blue-dark;
|
|
|
|
@text-color-selected: @text-color-inverse;
|
|
|
|
@text-color-search-match: #fff000;
|
|
@text-color-search-current-match: #ff8b1a;
|
|
|
|
@font-family-sans-serif: "Nylas-Pro", "Helvetica", sans-serif;
|
|
@font-family-serif: Georgia, "Times New Roman", Times, serif;
|
|
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
|
|
|
@font-family: @font-family-sans-serif;
|
|
@font-family-heading: @font-family-sans-serif;
|
|
|
|
// ----- Font Weights -----
|
|
@font-weight-thin: 200;
|
|
@font-weight-blond: 300;
|
|
@font-weight-normal: 400;
|
|
@font-weight-medium: 500;
|
|
@font-weight-semi-bold: 600;
|
|
@headings-font-weight: 600;
|
|
|
|
// ----- Font Sizes -----
|
|
@font-size-base: 14px;
|
|
|
|
@font-size-tiny: @font-size-base * 0.75; // 10.5px
|
|
@font-size-smaller: @font-size-base * 0.86; // 12px
|
|
@font-size-small: @font-size-base * 0.93; // 13px
|
|
@font-size: @font-size-base; // 14px
|
|
@font-size-large: @font-size-base * 1.14; // 16px
|
|
@font-size-larger: @font-size-base * 1.29; // 18px
|
|
|
|
@font-size-h1: @font-size-base * 1.71; // 24px
|
|
@font-size-h2: @font-size-base * 1.71; // 24px
|
|
@font-size-h3: @font-size-base * 1.43; // 20px
|
|
@font-size-h4: @font-size-base * 1.29; // 18px
|
|
@font-size-h5: @font-size-base;
|
|
@font-size-h6: @font-size-base * 0.86; // 12px
|
|
|
|
// ----- Line Height -----
|
|
@line-height-base: 1.5; // 22.5/15
|
|
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
|
|
@line-height-heading: 1.1;
|
|
|
|
|
|
//============================== Spacing ===============================//
|
|
// Define common padding and border radius sizes and more. Values based on
|
|
// 14px text and 1.428 line-height (~20px to start).
|
|
|
|
@spacing-standard: @font-size-base;
|
|
|
|
@spacing-quarter: @spacing-standard * 0.25;
|
|
@spacing-half: @spacing-standard * 0.5;
|
|
@spacing-three-quarters: @spacing-standard * 0.75;
|
|
@spacing-double: @spacing-standard * 2;
|
|
|
|
@padding-base-vertical: 5px;
|
|
@padding-base-horizontal: 12px;
|
|
|
|
@padding-large-vertical: 9px;
|
|
@padding-large-horizontal: 16px;
|
|
|
|
@padding-small-vertical: 4px;
|
|
@padding-small-horizontal: 10px;
|
|
|
|
@padding-xs-vertical: 1px;
|
|
@padding-xs-horizontal: 5px;
|
|
|
|
@line-height-large: @line-height-computed * 1.3;
|
|
@line-height-small: @line-height-computed * 0.95;
|
|
|
|
@border-radius-base: 3px;
|
|
@border-radius-large: 5px;
|
|
@border-radius-small: 2px;
|
|
|
|
|
|
//============================== Shadows ===============================//
|
|
|
|
@standard-shadow-color: rgba(0, 0, 0, 0.15);
|
|
@standard-shadow: 0 1px 4px 0 @standard-shadow-color;
|
|
@standard-shadow-up: 0 -1px 4px 0 @standard-shadow-color;
|
|
@shadow-border: 0 0.5px 0 @standard-shadow-color, 0 -0.5px 0 @standard-shadow-color,
|
|
0.5px 0 0 @standard-shadow-color, -0.5px 0 0 @standard-shadow-color;
|
|
|
|
|
|
//=============================== Buttons ==============================//
|
|
|
|
@btn-shadow: @standard-shadow;
|
|
|
|
@btn-default-bg-color: darken(@background-primary, 0.5%);
|
|
@btn-default-text-color: @text-color;
|
|
|
|
@btn-action-bg-color: @color-success;
|
|
@btn-action-text-color: @text-color;
|
|
|
|
@btn-emphasis-bg-color: #5b90fb;
|
|
@btn-emphasis-text-color: @text-color-inverse;
|
|
|
|
@btn-danger-bg-color: @color-danger;
|
|
@btn-danger-text-color: @text-color-inverse;
|
|
|
|
|
|
//=============================== Dropdowns ============================//
|
|
|
|
@dropdown-default-bg-color: @background-primary;
|
|
@dropdown-default-text-color: @text-color;
|
|
@dropdown-default-border-color: fadeout(@border-color-primary, 10%);
|
|
|
|
|
|
//=============================== Inputs ===============================//
|
|
|
|
@input-bg: @white;
|
|
@input-bg-disabled: @gray-lighter;
|
|
|
|
@input-border-color: fadeout(@border-color-primary, 10%);
|
|
@input-border-color-blurred: desaturate(@input-border-color, 100%);
|
|
|
|
@input-font-size: 14px;
|
|
|
|
|
|
//=============================== Components ===========================//
|
|
|
|
//== Toolbar
|
|
@toolbar-background-color: darken(@white, 17.5%);
|
|
|
|
//== Account Sidebar
|
|
@panel-background-color: @gray-lighter;
|
|
@source-list-bg: @panel-background-color;
|
|
@source-list-active-bg: @panel-background-color;
|
|
@source-list-active-color: @component-active-color;
|
|
|
|
//== Thread List (e.g, `.list-group-item`, `.list-item`)
|
|
@list-bg: @white;
|
|
@list-border: #ddd;
|
|
@list-hover-bg: darken(@list-bg, 4%);
|
|
@list-focused-color: @list-bg;
|
|
@list-focused-bg: @component-active-color;
|
|
@list-focused-border: @list-focused-bg;
|
|
@list-selected-color: inherit;
|
|
@list-selected-bg: mix(@component-active-color, @list-bg, 17%);
|
|
@list-selected-border: mix(@component-active-color, @list-bg, 50%);
|
|
|
|
//== Notifications
|
|
@background-color-info: @blue-light;
|
|
@background-color-success: #00ac6f;
|
|
@background-color-warning: #ff4800;
|
|
@background-color-error: #ca2541;
|
|
@background-color-pending: #b4babd;
|
|
|
|
//== Menus
|
|
@menu-item-color-hover: fade(@blue-light, 10%);
|
|
@menu-item-color-selected: @blue-light;
|
|
@menu-text-color-selected: @text-color-inverse;
|
|
|
|
//== Sizes
|
|
@component-padding: 10px;
|
|
@component-icon-padding: 5px;
|
|
@component-icon-size: 16px;
|
|
@component-line-height: 25px;
|
|
@component-border-radius: 2px;
|
|
|
|
|
|
// Helpers for Specs - Do Not Remove
|
|
@spec-test-variable: rgb(152,123,0);
|