← Back
Editing: colors.less
/** * 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%); // Scrollbars @color-scrollbar-thumb: #c1c1c1; @color-scrollbar-track: #f1f1f1; // 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: darken(@color-main, 25%); @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;
Save File
Cancel