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