123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196 |
- // 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: true;
- @has-boxshadow: false;
- @has-button-borders: false;
- // Text colors
- @text: #454545;
- @text-inverse: #ffffff;
- @text-disabled: #aaaaaa;
- @text-shadow: 0 1px 1px hsla(hue(@text-inverse), saturation(@text-inverse), lightness(@text-inverse), 0.75);
- @text-error: #aa0000;
- // Button
- @btn-text: #333333;
- @btn-text-shadow: #ffffff;
- @btn-border-top: #CFD3D6;
- @btn-border-right: #CFD3D6;
- @btn-border-bottom: #CFD3D6;
- @btn-border-left: #CFD3D6;
- @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: #ffffff;
- @btn-bg-hlight: #f5f5f5;
- @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: 5px 10px;
- @btn-primary-bg: #1B2531;
- @btn-primary-bg-hlight: #1b2531;
- @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: #333333;
- @menu-bg: #ffffff;
- @menu-margin: -1px 0 0;
- @menu-border: #CFD3D6;
- @menubar-border: mix(@panel-border, @panel-bg, 60%);
- @menuitem-text-inverse: #333;
- @menubar-bg-active: darken(@btn-bg, 10%);
- @menuitem-bg-hover: #0081C2;
- @menuitem-bg-selected: #f5f5f5;
- @menuitem-bg-selected-hlight: #f5f5f5;
- @menuitem-bg-disabled: #CCC;
- @menuitem-caret: @menuitem-text;
- @menuitem-caret-selected: @menuitem-text-inverse;
- @menuitem-separator-top: #CFD3D6;
- @menuitem-separator-bottom: #ffffff;
- @menuitem-bg-active: #F5F5F5;
- @menuitem-text-active: #333333;
- @menuitem-preview-border-active: #CFD3D6;
- @menubar-menubtn-text: ;
- // Panel
- @panel-border: #cfd3d6;
- @panel-bg: #f5f5f5;
- @panel-bg-hlight: #f5f5f5;
- // Tabs
- @tab-border: #c5c5c5;
- @tab-bg: #e3e3e3;
- @tab-bg-hover: #fdfdfd;
- @tab-bg-active: #fdfdfd;
- @tabs-bg: #ffffff;
- // 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;
- // Window
- @window-border: #cfd3d6;
- @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: #ffffff;
- @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: #cfd3d6;
- @checkbox-border-focus: #CFD3D6;
- // 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: #ffffff;
- @textbox-border: #c5c5c5;
- @textbox-border-focus: #59a5e1;
- // 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;
- // Colorpicker
- @colorpicker-border: @textbox-border;
- @colorpicker-hue-bg: #fff;
- @colorpicker-hue-border: #333;
- // Grid
- @grid-bg-active: @menuitem-bg-active;
- @grid-border-active: #a1a1a1;
- @grid-border: #d6d6d6;
- // Misc
- @colorbtn-backcolor-bg: #bbbbbb;
- @iframe-border: @panel-border;
- // Slider
- @slider-border: #aaaaaa;
- @slider-bg: #eeeeee;
- @slider-handle-border: #bbbbbb;
- @slider-handle-bg: #dddddd;
- // Progress
- @progress-border: #cccccc;
- @progress-bar-bg: #dfdfdf;
- @progress-bar-bg-hlight: #cccccc;
- @progress-text: #333333;
- @progress-text-shadow: #ffffff;
- // Flow layout
- @flow-layout-spacing: 2px;
|