jodit/src/styles/variables.less

Jodit is awesome and usefully wysiwyg editor with filebrowser

/*!
 * Jodit Editor (https://xdsoft.net/jodit/)
 * Licensed under GNU General Public License version 2 or later or a commercial license or MIT;
 * For GPL see LICENSE-GPL.txt in the project root for license information.
 * For MIT see LICENSE-MIT.txt in the project root for license information.
 * For commercial licenses see https://xdsoft.net/jodit/commercial/
 * Copyright (c) 2013-2019 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
 */

// Border
@color-border: #ccc;
@color-border-selected: #1e88e5;
@color-border-moved: #1e88e5;
@color-border-tab: rgba(0, 0, 0, 0.1);
@color-border-tab_hover: #c6c6c6;
@color-border-tab_active: #ccc;
@color-border-resize: rgba(3, 14, 82, 0.92);
@color-border-active: #b5b5b5;
@color-border-drag: #ccc;

@color-default: #000000;
@color-selection: #000000;
@color-separator: #e6e6e6;
@color-error: #f7d1d1;
@color-placeholder: rgba(0, 0, 0, 0.35);
@color-toolbar: #f9f9f9;
@color-resizer: #c8c8c8;

@color-tab: #737373;
@color-tab_hover: #111;
@color-tab_active: #333;
@color-text: #222222;
@color-link: #b8312f;
@color-button: #000;
@color-link_hover: #d65f5e;
@color-selection-area: #bdbdbd;

@color-white: #ffffff;
@color-background-default: @color-white;
@color-background-gray: rgba(225, 225, 225, 0.99);
@color-background-gray-hover: #f8f8f8;
@color-background-tab: #f5f5f5;
@color-background-tab_active: #fff;
@color-background-hover: #7a450f;
@color-background-button-hover: #ecebe9;
@color-background-progress: #b91f1f;
@color-background-filebrowser-folders: #3f3f3f;
@color-background-selection: #b5d6fd;

@font-default: Helvetica, sans-serif, Arial;
@font-size-default: 14px;
@font-size-small: 11px;

@color-text-icons: rgba(0, 0, 0, 0.75);
@color-icon: rgb(34, 34, 34);

@padding-text-icons: 0 12px;
@padding-default: 10px;

//z-index
@z-index-fullsize: 100000;
@z-index-popap: 100001;
@z-index-dialog: 2222223;
@z-index-context-menu: 2222224;
@z-index-dialog-overlay: 2222222;
@z-index-dropdownlist: 10000;
@z-index-fly-toolbar: 30000;

//toolbar
@toolbar_small_size: 12px;
@toolbar_middle_size: 16px;
@toolbar_large_size: 18px;

@icon_small_size: 12px;
@icon_middle_size: 14px;
@icon_large_size: 16px;
@icon_loader_size: 48px;

@width_element_default: 18px;
@height_element_default: 18px;

// dark theme
@dark_background_color: #575757;
@dark_text_color: #d1cccc;
@dark_icon_color: #c0c0c0;
@dark_toolbar_color: #5f5c5c;
@dark_toolbar_seperator_color1: rgba(81, 81, 81, 0.41);
@dark_toolbar_seperator_color2: #686767;
@dark_toolbar_seperator_color3: rgba(104, 103, 103, 0.75);
@dark_color-border-selected: #152f5f;

//context menu
@context_menu_bg: #fff;
@context_menu_shadow: rgba(0, 0, 0, 0.24);
@context_menu_border_color: rgba(204, 204, 204, 0.24);
@context_menu_icon_color: #727272;
@context_menu_icon_hover_color: #000;
@context_menu_item_color: #727272;
@context_menu_item_bg_hover_color: #e3e3e3;
@context_menu_item_hover_color: #000;
@context_menu_icon_size: 18px;
@context_menu_item_padding: 10px;
@context_menu_item_height: 38px;

@width-input-min: 220px;
@height-input: @width-input-min;

// screen
@screen-xs: 480px;
@screen-sm: 768px;
@screen-md: 992px;
@screen-lg: 1200px;

// triangle
@popup-bg-color: #ffffff;
@popup-triangle-size: 8px;