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