colors.less
11.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
/**
* Roundcube Webmail styles for the Elastic skin
*
* Copyright (c) The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
@color-main: #37beff;
@color-main-dark: darken(@color-main, 35%);
@color-black: #161b1d;
@color-font: lighten(@color-black, 10%);
@color-link: #00acff;
@color-link-hover: darken(@color-link, 10%);
@color-border: #ddd;
@color-error: #ff5552;
@color-success: #41b849;
@color-warning: #ffd452;
@color-black-shade-text: tint(@color-black, 40%);
@color-black-shade-border: lighten(@color-black, 75%);
@color-black-shade-bg: lighten(@color-black, 85%);
// Layout elements
@color-layout-border: @color-black-shade-border;
@color-layout-header: @color-font;
@color-layout-sidebar-background: #fff;
@color-layout-list-background: #fff;
@color-layout-content-background: #fff;
@color-layout-header-background: #f4f4f4;
@color-layout-footer-background: #fff;
@color-layout-mobile-header-background: @color-layout-header-background;
@color-layout-mobile-footer-background: @color-layout-header-background;
// Task menu
@color-taskmenu-background: #2f3a3f;
@color-taskmenu-button: #fff;
@color-taskmenu-button-selected: @color-taskmenu-button;
@color-taskmenu-button-action: @color-main;
@color-taskmenu-button-selected-background: lighten(@color-taskmenu-background, 10%);
@color-taskmenu-button-action-background: transparent;
@color-taskmenu-button-hover: #fff;
@color-taskmenu-button-selected-hover: #fff;
@color-taskmenu-button-action-hover: @color-main;
@color-taskmenu-button-background-hover: lighten(@color-taskmenu-background, 10%);
@color-taskmenu-button-action-background-hover: @color-taskmenu-button-background-hover;
@color-taskmenu-button-logout: @color-error;
@color-taskmenu-button-logout-hover: @color-error;
// Toolbar
@color-toolbar-button: @color-font;
@color-toolbar-button-background-hover: darken(@color-layout-header-background, 3%);
@color-searchbar-background: #fbfbfb;
// Toolbar menu
@color-menu-hover: #fff;
@color-menu-hover-background: @color-main;
// Listings
@color-list: @color-font;
@color-list-selected: @color-font;
@color-list-selected-background: tint(@color-main, 90%);
@color-list-flagged: @color-error;
@color-list-deleted: fadeout(@color-font, 50%);
@color-list-secondary: @color-black-shade-text;
@color-list-droptarget-background: #ffffcc;
@color-list-focus-indicator: lighten(@color-main, 20%);
@color-list-border: @color-black-shade-bg;
@color-list-badge: #fff;
@color-list-badge-background: @color-main;
@color-list-recent: darken(@color-main, 20%);
@color-list-recent-badge: #fff;
@color-list-recent-badge-background: @color-main;
@color-list-pagenav: @color-black-shade-text;
@color-list-icon: fadeout(@color-list-secondary, 25%);
@color-list-unread-status: @color-warning;
@color-attachmentlist-border: #f4f4f4;
@color-attachmentlist-background: #fcfcfc;
// Drag-n-drop layer
@color-drag-layer: #fff;
@color-drag-layer-background: @color-taskmenu-background;
@color-drag-layer-shadow: @color-black-shade-bg;
// Messages
@color-message: @color-font;
@color-message-border: transparent;
@color-message-background: fadeout(@color-main, 95%);
@color-message-text: #fff;
@color-message-link: @color-main;
@color-message-link-font-weight: normal;
@color-message-information: @color-main;
@color-message-success: @color-success;
@color-message-warning: @color-warning;
@color-message-error: @color-error;
@color-message-loading: tint(@color-font, 30%);
@color-message-information-text: @color-message-text;
@color-message-success-text: @color-message-text;
@color-message-warning-text: @color-message;
@color-message-error-text: @color-message-text;
@color-message-loading-text: @color-message-text;
@color-message-error-box: @color-message;
@color-message-information-box: @color-message;
@color-message-success-box: @color-message;
@color-message-warning-box: @color-message;
@color-message-error-box-background: fadeout(@color-message-error, 80%);
@color-message-information-box-background: fadeout(@color-message-information, 80%);
@color-message-success-box-background: fadeout(@color-message-success, 80%);
@color-message-warning-box-background: fadeout(@color-message-warning, 80%);
// Popovers (menus)
@color-popover-shadow: @color-black-shade-bg;
@color-popover-separator: @color-black-shade-text;
@color-popover-separator-background: @color-black-shade-bg;
@color-popover-mobile-header: #fff;
@color-popover-mobile-header-background: @color-main-dark;
@color-popover-mobile-dropbutton-background: #f6f6f6;
// Dialogs
@color-dialog-overlay-background: fade(@color-font, 50%);
@color-dialog-header: @color-layout-header;
@color-dialog-header-border: @color-border;
@color-spinner-circle: @color-black-shade-bg;
@color-spinner-item: @color-black-shade-text;
// Forms
@color-input: @color-font;
@color-input-border: #ced4da; // from Bootstrap's .form-control
@color-input-border-focus: @color-main;
@color-input-border-focus-shadow: fadeout(@color-main, 75);
@color-input-border-invalid: @color-error;
@color-input-border-invalid-shadow: fadeout(@color-error, 75);
@color-input-addon-background: @color-black-shade-bg;
@color-recipient-input-border: @color-input-border;
@color-recipient-input-background: @color-black-shade-bg;
@color-input-placeholder: #bbb;
@color-checkbox: @color-main;
@color-checkbox-checked: @color-main;
@color-checkbox-checked-disabled: lighten(@color-main, 15%);
@color-checkbox-focus: @color-input-border-focus;
@color-checkbox-focus-shadow: @color-input-border-focus-shadow;
@color-form-hint: @color-black-shade-text;
@color-image-upload-background: #f4f4f4;
@color-btn-secondary: #fff;
@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: #fff;
@color-quota-text: @color-black-shade-text;
@color-quota-value: @color-main;
@color-quota-value-warning: @color-error;
@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: @color-black-shade-text;
@color-mail-headers: @color-black-shade-text;
@color-messagepart-border: #f4f4f4;
@color-messagepart-background: #fcfcfc;
@color-spellcheck-link: @color-error;
@color-table-border: @color-layout-border;
@color-table-selected: @color-list-selected;
@color-table-selected-background: @color-list-selected-background;
// Datepicker
@color-datepicker-border: @color-layout-border;
@color-datepicker-font: @color-font;
@color-datepicker-highlight: @color-main;
@color-datepicker-highlight-background: lighten(@color-main, 30%);
@color-datepicker-active: #fff;
@color-datepicker-active-background: @color-main;
// HTML editor
@color-editor-disabled-mask: fadeout(lighten(@color-black, 85), 10);
// Image tools
@color-image-tools: #fff;
@color-image-tools-background: fadeout(@color-main, 60%);
@color-image-tools-hover: fadeout(@color-main, 50%);
// Dark mode colors
@color-dark-main: darken(@color-main, 30%);
@color-dark-background: #21292c;
@color-dark-font: #c5d1d3;
@color-dark-border: #4d6066;
@color-dark-hint: darken(@color-dark-font, 20%);
@color-dark-information: shade(@color-main, 40%);
@color-dark-success: shade(@color-success, 40%);
@color-dark-warning: shade(@color-warning, 40%);
@color-dark-error: shade(@color-error, 40%);
@color-dark-list-selected: @color-main;
@color-dark-list-selected-background: #374549;
@color-dark-list-badge: lighten(@color-dark-font, 10%);
@color-dark-list-badge-background: @color-dark-border;
@color-dark-list-deleted: darken(@color-dark-hint, 15%);
@color-dark-list-droptarget-background: #4d4d00;
@color-dark-list-border: #2c373a;
@color-dark-input: @color-dark-font;
@color-dark-input-border: #7c949c;
@color-dark-input-background: @color-dark-background;
@color-dark-input-focus: #e2e7e9;
@color-dark-input-border-focus: @color-main;
@color-dark-input-background-focus: lighten(@color-dark-background, 5%);
@color-dark-input-addon-background: #374549;
@color-dark-input-addon-background-focus: lighten(@color-dark-list-selected-background, 15%);
@color-dark-checkbox: @color-dark-border;
@color-dark-checkbox-checked: @color-dark-main;
@color-dark-btn: lighten(@color-dark-font, 10%);
@color-dark-btn-primary-background: @color-dark-main;
@color-dark-btn-secondary-background: @color-dark-border;
@color-dark-btn-danger-background: @color-dark-error;
@color-dark-dialog-overlay-background: fade(black, 70%);
@color-dark-popover-background: #161b1d;
@color-dark-popover-border: lighten(#161b1d, 50%);
@color-dark-message-information: @color-dark-information;
@color-dark-message-success: @color-dark-success;
@color-dark-message-warning: @color-dark-warning;
@color-dark-message-error: @color-dark-error;
@color-dark-message-loading: lighten(@color-dark-background, 10%);
@color-dark-scrollbar-thumb: @color-dark-main;
@color-dark-scrollbar-track: @color-dark-border;
@color-dark-blockquote-0: lighten(@color-main, 10%);
@color-dark-blockquote-1: lighten(@color-success, 10%);
@color-dark-blockquote-2: lighten(@color-error, 10%);
@color-dark-blockquote-0-border: @color-dark-blockquote-0;
@color-dark-blockquote-1-border: @color-dark-blockquote-1;
@color-dark-blockquote-2-border: @color-dark-blockquote-2;