mirror of
https://github.com/Foundry376/Mailspring.git
synced 2025-01-04 07:10:06 +08:00
8f2211f6a0
Summary: This diff uses the new ?expanded=true threads request to fetch threads and the messages inside them at the same time. The messages from this endpoint don't contain bodies. Message bodies have been moved to a new "secondary attribute" type, which can be optionally requested when making queries. This allows us to 1) quickly fetch messages without worrying about MBs of JSON, 2) update messages without updating their bodies, and 3) avoid calls to /messages?thread_id=123. The new message store fetches just the items it wants to display in expanded mode, and we'll show snippets for the rest. Fix up forwarded message Approach: Thread.messageMetadata join approach WIP join approach complete "" || null = null. OMG. Make spinner a bit smarter, use code delays and not css delays Search suggestion store should only show first 10 matches Msg collapsing, refactored msg store that will fetch individual messages that are marked as expanded, set loaded = true when it's all done Test Plan: Tests coming soon. The query refactoring here broke a lot of tests... Reviewers: evan Reviewed By: evan Differential Revision: https://review.inboxapp.com/D1345
492 lines
15 KiB
Text
492 lines
15 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 (FaktPro)
|
|
// 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, .salesforce-h1)
|
|
|
|
//=============================== Colors ===============================//
|
|
//== Brand colors
|
|
@nilas-yellow: #D5DC28;
|
|
@nilas-yellow-dark: #A0C23A;
|
|
@nilas-green: #5CB346;
|
|
@nilas-green-dark: #078E46;
|
|
@nilas-blue: #11A1A2;
|
|
@nilas-blue-dark: #0F7982;
|
|
@nilas-black: #313435;
|
|
@nilas-gray: #434648;
|
|
|
|
//== Generic colors
|
|
@black: @nilas-black;
|
|
@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: #2794c3;
|
|
@blue-dark: #1880ab;
|
|
// @blue-dark: darken(@blue, 10%);
|
|
|
|
//== Color descriptors
|
|
@accent-primary: @blue;
|
|
@accent-primary-dark: @blue-dark;
|
|
@accent-secondary: @nilas-yellow;
|
|
|
|
@background-primary: #ffffff;
|
|
@background-off-primary: #fbfbfb;
|
|
@background-secondary: #f6f6f6;
|
|
@background-tertiary: #6d7987;
|
|
|
|
@border-primary-bg: darken(@background-primary, 10%);
|
|
@border-secondary-bg: darken(@background-secondary, 10%);
|
|
@border-tertiary-bg: darken(@background-tertiary, 10%);
|
|
@border-color-divider: @border-secondary-bg;
|
|
|
|
@info-color: @blue-dark;
|
|
@success-color: @nilas-green;
|
|
@warning-color: #f0ad4e;
|
|
@error-color: #d9534f;
|
|
@danger-color: #d9534f;
|
|
|
|
|
|
//============================= 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: @nilas-gray;
|
|
|
|
@text-color-link: @blue;
|
|
@text-color-link-hover: @blue-dark;
|
|
@text-color-link-active: @blue-dark;
|
|
|
|
@text-color-selected: @text-color-inverse;
|
|
@text-color-highlight: @text-color;
|
|
|
|
@text-color-info: @info-color;
|
|
@text-color-success: @success-color;
|
|
@text-color-warning: @warning-color;
|
|
@text-color-error: @error-color;
|
|
@text-color-destructive: @danger-color;
|
|
|
|
// ----- Font Families -----
|
|
@font-face {
|
|
font-family: 'FaktPro';
|
|
font-style: normal;
|
|
font-weight: 300;
|
|
src: local('FaktPro-Blond'), url('fonts/Fakt/FaktPro-Blond.ttf'), local('Comic Sans MS');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'FaktPro';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: local('FaktPro-Normal'), url('fonts/Fakt/FaktPro-Normal.ttf'), local('Comic Sans MS');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'FaktPro';
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
src: local('FaktPro-Medium'), url('fonts/Fakt/FaktPro-Medium.ttf'), local('Comic Sans MS');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'FaktPro';
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
src: local('FaktPro-SemiBold'), url('fonts/Fakt/FaktPro-SemiBold.ttf'), local('Comic Sans MS');
|
|
}
|
|
|
|
@font-family-sans-serif: "FaktPro", "Helvetica", 'Lucida Grande', 'Segoe UI', sans-serif;
|
|
@font-family-smallcap: "Proxima Nova Regular Small Cap", "sans-serif";
|
|
@font-family-serif: Georgia, "Times New Roman", Times, serif;
|
|
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
|
|
|
@font-family-base: @font-family-sans-serif;
|
|
@font-family: @font-family-base;
|
|
@font-family-heading: @font-family-sans-serif;
|
|
|
|
// ----- Font Weights -----
|
|
@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: 15px;
|
|
|
|
@font-size-smaller: @font-size-base * 0.80; // 12px
|
|
@font-size-small: @font-size-base * 0.93; // 14px
|
|
@font-size: @font-size-base; // 15px
|
|
@font-size-large: @font-size-base * 1.06; // 16px
|
|
@font-size-larger: @font-size-base * 1.20; // 18px
|
|
|
|
@font-size-h1: @font-size-base * 1.6; // 24px
|
|
@font-size-h2: @font-size-base * 1.6; // 24px
|
|
@font-size-h3: @font-size-base * 1.7; // 24px
|
|
@font-size-h4: @font-size-base * 1.25; // 18px
|
|
@font-size-h5: @font-size-base;
|
|
@font-size-h6: @font-size-base * 0.85; // 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;
|
|
|
|
|
|
//============================ Iconography =============================//
|
|
// Specify custom location and filename of the included Glyphicons icon
|
|
// font. Useful for those including Bootstrap via Bower.
|
|
|
|
//** Load fonts from this directory.
|
|
@icon-font-path: "../fonts/";
|
|
//** File name for all font files.
|
|
@icon-font-name: "glyphicons-halflings-regular";
|
|
//** Element ID within SVG icon file.
|
|
@icon-font-svg-id: "glyphicons_halflingsregular";
|
|
|
|
|
|
//============================== 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-sub-double: @spacing-standard * 1.75;
|
|
@spacing-double: @spacing-standard * 2;
|
|
@spacing-super-double: @spacing-standard * 2.25;
|
|
|
|
|
|
@padding-base-vertical: 6px;
|
|
@padding-base-horizontal: 12px;
|
|
|
|
@padding-large-vertical: 10px;
|
|
@padding-large-horizontal: 16px;
|
|
|
|
@padding-small-vertical: 5px;
|
|
@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: 4px;
|
|
@border-radius-large: 6px;
|
|
@border-radius-small: 3px;
|
|
|
|
|
|
//============================== Shadows ===============================//
|
|
@standard-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.21);
|
|
@standard-shadow-up: 0 -1px 4px 0 rgba(0, 0, 0, 0.21);
|
|
|
|
|
|
//============================== Tables ===============================//
|
|
// Customizes the `.table` component with basic values, each used across
|
|
// all table variations.
|
|
|
|
//** Padding for `<th>`s and `<td>`s.
|
|
@table-cell-padding: 8px;
|
|
//** Padding for cells in `.table-condensed`.
|
|
@table-condensed-cell-padding: 5px;
|
|
|
|
//** Default background color used for all tables.
|
|
@table-bg: transparent;
|
|
//** Background color used for `.table-striped`.
|
|
@table-bg-accent: #f9f9f9;
|
|
//** Background color used for `.table-hover`.
|
|
@table-bg-hover: #f5f5f5;
|
|
@table-bg-active: @table-bg-hover;
|
|
|
|
//** Border color for table and cell borders.
|
|
@table-border-color: #ddd;
|
|
|
|
|
|
//=============================== Buttons ==============================//
|
|
|
|
@btn-shadow: @standard-shadow;
|
|
|
|
@btn-default-bg-color: @background-primary;
|
|
@btn-default-text-color: @text-color;
|
|
|
|
@btn-action-bg-color: @success-color;
|
|
@btn-action-text-color: @text-color;
|
|
|
|
@btn-emphasis-bg-color: #5b90fb;
|
|
@btn-emphasis-text-color: @text-color-inverse;
|
|
|
|
@btn-danger-bg-color: @danger-color;
|
|
@btn-danger-text-color: @text-color-inverse;
|
|
|
|
//=============================== Inputs ===============================//
|
|
|
|
//** `<input>` background color
|
|
@input-bg: #fff;
|
|
//** `<input disabled>` background color
|
|
@input-bg-disabled: @gray-lighter;
|
|
|
|
@input-background-color: white;
|
|
|
|
@input-border-color: fadeout(@border-color, 10%);
|
|
@input-border-color-blurred: desaturate(@input-border-color, 100%);
|
|
|
|
@input-tint-color: fade(@background-color-selected, 10%);
|
|
@input-tint-color-hover: fade(@input-tint-color, 30%);
|
|
@input-tint-color-blurred: desaturate(@input-tint-color, 100%);
|
|
|
|
|
|
@input-accessory-color-hover: @light-blue;
|
|
@input-accessory-color: @cool-gray;
|
|
@input-cancel-color: @red;
|
|
|
|
//** Text color for `<input>`s
|
|
@input-color: @gray;
|
|
//** `<input>` border color
|
|
@input-border: #ccc;
|
|
|
|
// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
|
|
//** Default `.form-control` border radius
|
|
@input-border-radius: @border-radius-base;
|
|
//** Large `.form-control` border radius
|
|
@input-border-radius-large: @border-radius-large;
|
|
//** Small `.form-control` border radius
|
|
@input-border-radius-small: @border-radius-small;
|
|
|
|
//** Border color for inputs on focus
|
|
@input-border-focus: #66afe9;
|
|
|
|
//** Placeholder text color
|
|
@input-color-placeholder: #999;
|
|
|
|
//** Default `.form-control` height
|
|
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
|
|
//** Large `.form-control` height
|
|
@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
|
|
//** Small `.form-control` height
|
|
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
|
|
|
|
//** Background color for textual input addons
|
|
@input-group-addon-bg: @gray-lighter;
|
|
//** Border color for textual input addons
|
|
@input-group-addon-border-color: @input-border;
|
|
|
|
|
|
//=============================== Z-Index ==============================//
|
|
//-- Z-index master list
|
|
//
|
|
// Warning: Avoid customizing these values. They're used for a bird's eye
|
|
// view of components dependent on the z-axis and are designed to all work
|
|
// together.
|
|
//
|
|
// Note: These variables are not generated into the Customizer.
|
|
|
|
@zindex-navbar: 1000;
|
|
@zindex-dropdown: 1000;
|
|
@zindex-popover: 1060;
|
|
@zindex-tooltip: 1070;
|
|
@zindex-navbar-fixed: 1030;
|
|
@zindex-modal: 1040;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//== Source List (used in Sidebar, iTunes-style)
|
|
//
|
|
// ##
|
|
|
|
//** Global color for active items (e.g., navs or dropdowns).
|
|
@component-active-color: @background-primary;
|
|
//** Global background color for active items (e.g., navs or dropdowns).
|
|
@component-active-bg: #383d44;
|
|
@component-secondary-active-bg: @background-tertiary;
|
|
|
|
//** Background color on `.list-group-item`
|
|
@source-list-bg: @background-primary;
|
|
//** Text color of active list items
|
|
@source-list-active-color: @component-active-color;
|
|
//** Background color of active list items
|
|
@source-list-active-bg: @component-active-bg;
|
|
|
|
//== List
|
|
//
|
|
//##
|
|
|
|
//** Background color on `.list-group-item`
|
|
@list-bg: #fff;
|
|
//** `.list-item` border color
|
|
@list-border: #ddd;
|
|
//** List group border radius
|
|
@list-border-radius: @border-radius-base;
|
|
|
|
//** Background color of single list items on hover
|
|
@list-hover-bg: #f5f5f5;
|
|
//** Text color of active list items
|
|
@list-active-color: @component-active-color;
|
|
//** Background color of active list items
|
|
@list-active-bg: @component-secondary-active-bg;
|
|
//** Border color of active list elements
|
|
@list-active-border: @list-active-bg;
|
|
//** Text color for content within active list items
|
|
@list-active-color-muted: lighten(@list-active-bg, 40%);
|
|
|
|
//** Text color of disabled list items
|
|
@list-disabled-color: @gray-light;
|
|
//** Background color of disabled list items
|
|
@list-disabled-bg: @gray-lighter;
|
|
//** Text color for content within disabled list items
|
|
@list-disabled-text-color: @list-disabled-color;
|
|
|
|
|
|
//** Abbreviations and acronyms border color
|
|
@abbr-border-color: @gray-light;
|
|
//** Blockquote small color
|
|
@blockquote-small-color: @gray-light;
|
|
//** Blockquote font size
|
|
@blockquote-font-size: (@font-size-base * 1.25);
|
|
//** Blockquote border color
|
|
@blockquote-border-color: @gray-lighter;
|
|
|
|
|
|
|
|
//== Form states and alerts
|
|
//
|
|
//## Define colors for form feedback states and, by default, alerts.
|
|
|
|
@state-success-text: #3c763d;
|
|
@state-success-bg: #dff0d8;
|
|
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
|
|
|
|
@state-info-text: #31708f;
|
|
@state-info-bg: #d9edf7;
|
|
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
|
|
|
|
@state-warning-text: #8a6d3b;
|
|
@state-warning-bg: #fcf8e3;
|
|
@state-warning-border: darken(spin(@state-warning-bg, -10), 5%);
|
|
|
|
@state-danger-text: #a94442;
|
|
@state-danger-bg: #f2dede;
|
|
@state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
|
|
|
|
/////
|
|
|
|
// -------------
|
|
// EVERYTHING BELOW THIS NEEDS TO BE DEPRECATED OR MOVED ABOVE THIS
|
|
// old stuff
|
|
// -------------
|
|
|
|
// Private
|
|
//
|
|
// Do not use these colors outside of this file.
|
|
// You should choose variables based on the role of your
|
|
// interface elements. In other themes, @light-blue may
|
|
// not be light or blue.
|
|
|
|
@PANTONE-340-UP: #00ac6f;
|
|
@PANTONE-7704-UP: #009ec4;
|
|
@PANTONE-7547-UP: #3c505f;
|
|
@PANTONE-296-UP: #003c56;
|
|
@PANTONE-421-UP: #b4babd;
|
|
@PANTONE-Red-032-UP: #f15f4b;
|
|
@PANTONE-326-UP: #3bbeb4;
|
|
@PANTONE-Process-Black-UP: #231f20;
|
|
@PANTONE-Cool-Gray-1-UP: #e1e0dc;
|
|
|
|
@green: @PANTONE-340-UP;
|
|
@light-blue: @PANTONE-7704-UP;
|
|
@blue-gray: @PANTONE-7547-UP;
|
|
@dark-blue: @PANTONE-296-UP;
|
|
@light-gray: @PANTONE-421-UP;
|
|
@red: @PANTONE-Red-032-UP;
|
|
@teal: @PANTONE-326-UP;
|
|
@black: @PANTONE-Process-Black-UP;
|
|
@cool-gray: @PANTONE-Cool-Gray-1-UP;
|
|
|
|
@blue-grey: @blue-gray;
|
|
@light-grey: @light-gray;
|
|
|
|
// Public
|
|
//
|
|
// Use these variables in your packages. Choose the variable
|
|
// that best matches the role of the element you are styling.
|
|
|
|
// TEXT
|
|
|
|
@unread-color: @blue; //!
|
|
@action-color: @green;
|
|
|
|
@progress-bar-fill: @light-blue;
|
|
@progress-bar-background: @light-gray;
|
|
|
|
@background-color: #fff;
|
|
@background-color-highlight: darken(@background-color, 2.5%);
|
|
@background-color-selected: @light-blue;
|
|
@background-color-secondary: darken(@background-color, 5%);
|
|
@background-color-accent: @blue-gray;
|
|
|
|
@background-color-info: @light-blue;
|
|
@background-color-success: @green;
|
|
@background-color-warning: #ff4800;
|
|
@background-color-error: @red;
|
|
@background-color-pending: @light-gray;
|
|
|
|
@base-border-color: darken(@background-color, 15%);
|
|
@border-color: darken(@background-color, 15%);
|
|
@border-color-subtle: darken(@background-color, 8%);
|
|
|
|
// Inputs
|
|
|
|
// Menus
|
|
|
|
@menu-color: white;
|
|
@menu-divider-color: @light-gray;
|
|
@menu-item-color-hover: fade(@background-color-selected, 10%);
|
|
@menu-item-color-selected: @background-color-selected;
|
|
@menu-text-color-selected: @text-color-inverse;
|
|
|
|
// Sizes
|
|
|
|
@disclosure-arrow-size: 12px;
|
|
@input-font-size: 14px;
|
|
|
|
@component-padding: 10px;
|
|
@component-icon-padding: 5px;
|
|
@component-icon-size: 16px;
|
|
@component-line-height: 25px;
|
|
@component-border-radius: 2px;
|
|
|
|
|
|
|
|
@body-bg: @white;
|
|
//== Panels and Sidebars
|
|
@panel-background-color: @gray-lighter;
|
|
@toolbar-background-color: @gray-lighter;
|