mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-09-19 15:56:22 +00:00
224 lines
8.3 KiB
Plaintext
224 lines
8.3 KiB
Plaintext
|
// Variables
|
||
|
|
// Syntax: <control>-(<sub control>)-<bg|border|text>-(<state>)-(<extra>);
|
||
|
|
// Example: @btn-primary-bg-hover-hlight;
|
||
|
|
|
||
|
|
@prefix: mce;
|
||
|
|
|
||
|
|
// Default font
|
||
|
|
@font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||
|
|
@font-size: 14px;
|
||
|
|
@line-height: 20px;
|
||
|
|
@has-gradients: false;
|
||
|
|
@has-radius: false;
|
||
|
|
@has-boxshadow: false;
|
||
|
|
@has-button-borders: true;
|
||
|
|
|
||
|
|
// Text colors
|
||
|
|
@text: #b5b9bf;
|
||
|
|
@text-inverse: #000000;
|
||
|
|
@text-disabled: #6e737a;
|
||
|
|
@text-shadow: 0 1px 1px hsla(hue(@text-inverse), saturation(@text-inverse), lightness(@text-inverse), 0.75);
|
||
|
|
@text-error: #b94a48;
|
||
|
|
@text-warning: #c09853;
|
||
|
|
@text-success: #468847;
|
||
|
|
@text-link: #2980b9;
|
||
|
|
|
||
|
|
// Button
|
||
|
|
@btn-text: #b5b9bf;
|
||
|
|
@btn-text-shadow: #000000;
|
||
|
|
@btn-border-top: rgba(0,0,0,0);
|
||
|
|
@btn-border-right: rgba(0,0,0,0);
|
||
|
|
@btn-border-bottom: rgba(0,0,0,0);
|
||
|
|
@btn-border-left: rgba(0,0,0,0);
|
||
|
|
@btn-caret-border: @btn-text;
|
||
|
|
@btn-text-disabled: @text-disabled;
|
||
|
|
@btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
|
||
|
|
@btn-box-shadow-active: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);
|
||
|
|
@btn-box-disabled-opacity: 0.4;
|
||
|
|
@btn-bg: #333;
|
||
|
|
@btn-bg-hlight: #454f59;
|
||
|
|
@btn-bg-hover: darken(@btn-bg, 5%);
|
||
|
|
@btn-bg-hlight-hover: darken(@btn-bg-hlight, 5%);
|
||
|
|
@btn-border-hover: darken(@btn-bg, 20%);
|
||
|
|
@btn-border-active: darken(@btn-bg, 20%);
|
||
|
|
@btn-padding: 4px 10px;
|
||
|
|
|
||
|
|
@btn-primary-bg: #006fa6;
|
||
|
|
@btn-primary-bg-hlight: #005580;
|
||
|
|
@btn-primary-bg-hover: darken(@btn-primary-bg, 5%);
|
||
|
|
@btn-primary-bg-hover-hlight: darken(@btn-primary-bg-hlight, 5%);
|
||
|
|
@btn-primary-text: #ffffff;
|
||
|
|
@btn-primary-text-shadow: #333333;
|
||
|
|
@btn-primary-border-top: mix(@btn-border-top, @btn-primary-bg, 50%);
|
||
|
|
@btn-primary-border-right: mix(@btn-border-right, @btn-primary-bg, 50%);
|
||
|
|
@btn-primary-border-bottom: mix(@btn-border-bottom, @btn-primary-bg, 50%);
|
||
|
|
@btn-primary-border-left: mix(@btn-border-left, @btn-primary-bg, 50%);
|
||
|
|
@btn-primary-border: transparent;
|
||
|
|
@btn-primary-border-hover: transparent;
|
||
|
|
|
||
|
|
// Button group
|
||
|
|
@btn-group-border-width: 1px;
|
||
|
|
|
||
|
|
// Menu
|
||
|
|
@menuitem-text: #dddddd;
|
||
|
|
@menu-bg: #2f3740;
|
||
|
|
@menu-margin: -1px 0 0;
|
||
|
|
@menu-border: #202a33;
|
||
|
|
@menubar-border: mix(@panel-border, @panel-bg, 60%);
|
||
|
|
@menuitem-text-inverse: #ffffff;
|
||
|
|
@menubar-bg-active: darken(@btn-bg, 10%);
|
||
|
|
@menuitem-bg-hover: #0081C2;
|
||
|
|
@menuitem-bg-selected: #006fa6;
|
||
|
|
@menuitem-bg-selected-hlight: #005580;
|
||
|
|
@menuitem-bg-disabled: #CCC;
|
||
|
|
@menuitem-caret: @menuitem-text;
|
||
|
|
@menuitem-caret-selected: @menuitem-text-inverse;
|
||
|
|
@menuitem-separator-top: #25313f;
|
||
|
|
@menuitem-separator-bottom: #424f5f;
|
||
|
|
@menuitem-bg-active: #0085c7;
|
||
|
|
@menuitem-text-active: #ffffff;
|
||
|
|
@menuitem-preview-border-active: #08608c;
|
||
|
|
@menubar-menubtn-text: #b5b9bf;
|
||
|
|
|
||
|
|
// Panel
|
||
|
|
@panel-border: #232b33;
|
||
|
|
@panel-bg: #333333;
|
||
|
|
@panel-bg-hlight: #404952;
|
||
|
|
|
||
|
|
// Tabs
|
||
|
|
@tab-border: #202a33;
|
||
|
|
@tab-bg: #303942;
|
||
|
|
@tab-bg-hover: #404952;
|
||
|
|
@tab-bg-active: #404952;
|
||
|
|
@tabs-bg: #303942;
|
||
|
|
|
||
|
|
// Tooltip
|
||
|
|
@tooltip-bg: #000;
|
||
|
|
@tooltip-text: white;
|
||
|
|
@tooltip-font-size: 11px;
|
||
|
|
|
||
|
|
// Notification
|
||
|
|
@notification-font-size: 14px;
|
||
|
|
@notification-bg: #f0f0f0;
|
||
|
|
@notification-border: #cccccc;
|
||
|
|
@notification-text: #333333;
|
||
|
|
@notification-success-bg: #dff0d8;
|
||
|
|
@notification-success-border: #d6e9c6;
|
||
|
|
@notification-success-text: #3c763d;
|
||
|
|
@notification-info-bg: #d9edf7;
|
||
|
|
@notification-info-border: #779ecb;
|
||
|
|
@notification-info-text: #31708f;
|
||
|
|
@notification-warning-bg: #fcf8e3;
|
||
|
|
@notification-warning-border: #faebcc;
|
||
|
|
@notification-warning-text: #8a6d3b;
|
||
|
|
@notification-error-bg: #f2dede;
|
||
|
|
@notification-error-border: #ebccd1;
|
||
|
|
@notification-error-text: #a94442;
|
||
|
|
|
||
|
|
// Infobox
|
||
|
|
@infobox-bg: @notification-bg;
|
||
|
|
@infobox-border: @notification-border;
|
||
|
|
@infobox-text: @notification-text;
|
||
|
|
@infobox-success-bg: @notification-success-bg;
|
||
|
|
@infobox-success-border: @notification-success-border;
|
||
|
|
@infobox-success-text: @notification-success-text;
|
||
|
|
@infobox-info-bg: @notification-info-bg;
|
||
|
|
@infobox-info-border: @notification-info-border;
|
||
|
|
@infobox-info-text: @notification-info-text;
|
||
|
|
@infobox-warning-bg: @notification-warning-bg;
|
||
|
|
@infobox-warning-border: @notification-warning-border;
|
||
|
|
@infobox-warning-text: @notification-warning-text;
|
||
|
|
@infobox-error-bg: @notification-error-bg;
|
||
|
|
@infobox-error-border: @notification-error-border;
|
||
|
|
@infobox-error-text: @notification-error-text;
|
||
|
|
|
||
|
|
// Window
|
||
|
|
@window-border: #9e9e9e;
|
||
|
|
@window-head-border: @window-border;
|
||
|
|
@window-head-close: mix(@text, @window-bg, 60%);
|
||
|
|
@window-head-close-hover: mix(@text, @window-bg, 40%);
|
||
|
|
@window-foot-border: @window-border;
|
||
|
|
@window-foot-bg: @window-bg;
|
||
|
|
@window-fullscreen-bg: #FFF;
|
||
|
|
@window-modalblock-bg: #000;
|
||
|
|
@window-modalblock-opacity: 0.3;
|
||
|
|
@window-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
|
||
|
|
@window-bg: #333;
|
||
|
|
@window-title-font-size: 20px;
|
||
|
|
|
||
|
|
// Popover
|
||
|
|
@popover-bg: @window-bg;
|
||
|
|
@popover-arrow-width: 10px;
|
||
|
|
@popover-arrow: @window-bg;
|
||
|
|
@popover-arrow-outer-width: @popover-arrow-width + 1;
|
||
|
|
@popover-arrow-outer: rgba(0, 0, 0, 0.25);
|
||
|
|
|
||
|
|
// Floatpanel
|
||
|
|
@floatpanel-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
|
||
|
|
|
||
|
|
// Checkbox
|
||
|
|
@checkbox-bg: @btn-bg;
|
||
|
|
@checkbox-bg-hlight: @btn-bg-hlight;
|
||
|
|
@checkbox-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
|
||
|
|
@checkbox-border: #202a33;
|
||
|
|
@checkbox-border-focus: #1e7dad;
|
||
|
|
|
||
|
|
// Path
|
||
|
|
@path-text: @text;
|
||
|
|
@path-bg-focus: #666;
|
||
|
|
@path-text-focus: #fff;
|
||
|
|
|
||
|
|
// Textbox
|
||
|
|
@textbox-text-placeholder: #aaa;
|
||
|
|
@textbox-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||
|
|
@textbox-bg: #515c67;
|
||
|
|
@textbox-border: #202a33;
|
||
|
|
@textbox-border-focus: #1e7dad;
|
||
|
|
|
||
|
|
// Selectbox
|
||
|
|
@selectbox-bg: @textbox-bg;
|
||
|
|
@selectbox-border: @textbox-border;
|
||
|
|
|
||
|
|
// Throbber
|
||
|
|
@throbber-bg: #fff url('img/loader.gif') no-repeat center center;
|
||
|
|
|
||
|
|
// Combobox
|
||
|
|
@combobox-border: @textbox-border;
|
||
|
|
@combobox-error-text: @text-error;
|
||
|
|
@combobox-warning-text: @text-warning;
|
||
|
|
@combobox-success-text: @text-success;
|
||
|
|
|
||
|
|
// Colorpicker
|
||
|
|
@colorpicker-border: @textbox-border;
|
||
|
|
@colorpicker-hue-bg: #fff;
|
||
|
|
@colorpicker-hue-border: #333;
|
||
|
|
|
||
|
|
// Grid
|
||
|
|
@grid-bg-active: @menuitem-bg-active;
|
||
|
|
@grid-border-active: #d6d6d6;
|
||
|
|
@grid-border: #d6d6d6;
|
||
|
|
|
||
|
|
// Misc
|
||
|
|
@colorbtn-backcolor-bg: #384552;
|
||
|
|
@iframe-border: @panel-border;
|
||
|
|
|
||
|
|
// Slider
|
||
|
|
@slider-border: #202a33;
|
||
|
|
@slider-bg: #515c67;
|
||
|
|
@slider-handle-border: #000000;
|
||
|
|
@slider-handle-bg: #454f59;
|
||
|
|
@slider-handle-bg-focus: #BBB;
|
||
|
|
|
||
|
|
// Progress
|
||
|
|
@progress-border: #202a33;
|
||
|
|
@progress-bar-bg: #515c67;
|
||
|
|
@progress-bar-bg-hlight: #515c67;
|
||
|
|
@progress-text: #c4c4c4;
|
||
|
|
|
||
|
|
// Flow layout
|
||
|
|
@flow-layout-spacing: 2px;
|
||
|
|
|
||
|
|
// Table
|
||
|
|
|
||
|
|
@table-row-even: #fafafa;
|
||
|
|
@table-row-hover: darken(@table-row-even, 10%);
|