Project

General

Profile

1
// Variables
2
// Syntax: <control>-(<sub control>)-<bg|border|text>-(<state>)-(<extra>);
3
// Example: @btn-primary-bg-hover-hlight;
4

    
5
@prefix:                         mce;
6

    
7
// Default font
8
@font-family:                    "Helvetica Neue", Helvetica, Arial, sans-serif;
9
@font-size:                      14px;
10
@line-height:                    20px;
11
@has-gradients:                  false;
12
@has-radius:                     false;
13
@has-boxshadow:                  false;
14
@has-button-borders:             false;
15

    
16
// Text colors
17
@text:                           #333333;
18
@text-inverse:                   #ffffff;
19
@text-disabled:                  #aaaaaa;
20
@text-shadow:                    0 1px 1px hsla(hue(@text-inverse), saturation(@text-inverse), lightness(@text-inverse), 0.75);
21
@text-error:                     #aa0000;
22

    
23
// Button
24
@btn-text:                       #333333;
25
@btn-text-shadow:                #ffffff;
26
@btn-border-top:                 transparent;
27
@btn-border-right:               transparent;
28
@btn-border-bottom:              transparent;
29
@btn-border-left:                transparent;
30
@btn-caret-border:               @btn-text;
31
@btn-text-disabled:              @text-disabled;
32
@btn-box-shadow:                 inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
33
@btn-box-shadow-active:          inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);
34
@btn-box-disabled-opacity:       0.4;
35
@btn-bg:                         #ffffff;
36
@btn-bg-hlight:                  #d9d9d9;
37
@btn-bg-hover:                   darken(@btn-bg, 5%);
38
@btn-bg-hlight-hover:            darken(@btn-bg-hlight, 5%);
39
@btn-border-hover:               darken(@btn-bg, 20%);
40
@btn-border-active:              darken(@btn-bg, 20%);
41
@btn-padding:                    4px 8px;
42

    
43
@btn-primary-bg:                 #0088cc;
44
@btn-primary-bg-hlight:          #0044cc;
45
@btn-primary-bg-hover:           darken(@btn-primary-bg, 5%);
46
@btn-primary-bg-hover-hlight:    darken(@btn-primary-bg-hlight, 5%);
47
@btn-primary-text:               #ffffff;
48
@btn-primary-text-shadow:        #333333;
49
@btn-primary-border-top:         mix(@btn-border-top, @btn-primary-bg, 50%);
50
@btn-primary-border-right:       mix(@btn-border-right, @btn-primary-bg, 50%);
51
@btn-primary-border-bottom:      mix(@btn-border-bottom, @btn-primary-bg, 50%);
52
@btn-primary-border-left:        mix(@btn-border-left, @btn-primary-bg, 50%);
53
@btn-primary-border:             transparent;
54
@btn-primary-border-hover:       transparent;
55

    
56
// Button group
57
@btn-group-border-width:         1px;
58

    
59
// Menu
60
@menuitem-text:                  #333333;
61
@menu-bg:                        #ffffff;
62
@menu-margin:                    -1px 0 0;
63
@menu-border:                    rgba(0,0,0,0.2);
64
@menubar-border:                 mix(@panel-border, @panel-bg, 60%);
65
@menuitem-text-inverse:          #ffffff;
66
@menubar-bg-active:              darken(@btn-bg, 10%);
67
@menuitem-bg-hover:              #0081C2;
68
@menuitem-bg-selected:           #0088cc;
69
@menuitem-bg-selected-hlight:    #0077b3;
70
@menuitem-bg-disabled:           #CCC;
71
@menuitem-caret:                 @menuitem-text;
72
@menuitem-caret-selected:        @menuitem-text-inverse;
73
@menuitem-separator-top:         #cbcbcb;
74
@menuitem-separator-bottom:      #ffffff;
75
@menuitem-bg-active:             #c8def4;
76
@menuitem-text-active:           #333333;
77
@menuitem-preview-border-active: #aaaaaa;
78

    
79
// Panel
80
@panel-border:                   #9e9e9e;
81
@panel-bg:                       #fdfdfd;
82
@panel-bg-hlight:                #dddddd;
83

    
84
// Tabs
85
@tab-border:                     #c5c5c5;
86
@tab-bg:                         #e3e3e3;
87
@tab-bg-hover:                   #fdfdfd;
88
@tab-bg-active:                  #fdfdfd;
89

    
90
// Tooltip
91
@tooltip-bg:                     #000;
92
@tooltip-text:                   white;
93
@tooltip-font-size:              11px;
94

    
95
// Window
96
@window-border:                  #c4c4c4;
97
@window-head-border:             @window-border;
98
@window-head-close:              mix(@text, @window-bg, 60%);
99
@window-head-close-hover:        mix(@text, @window-bg, 40%);
100
@window-foot-border:             @window-border;
101
@window-foot-bg:                 @window-bg;
102
@window-fullscreen-bg:           #FFF;
103
@window-modalblock-bg:           #000;
104
@window-modalblock-opacity:      0.3;
105
@window-box-shadow:              0 3px 7px rgba(0, 0, 0, 0.3);
106
@window-bg:                      #ffffff;
107
@window-title-font-size:         20px;
108

    
109
// Popover
110
@popover-bg:                     @window-bg;
111
@popover-arrow-width:            10px;
112
@popover-arrow:                  @window-bg;
113
@popover-arrow-outer-width:      @popover-arrow-width + 1;
114
@popover-arrow-outer:            rgba(0, 0, 0, 0.25);
115

    
116
// Floatpanel
117
@floatpanel-box-shadow:          0 5px 10px rgba(0, 0, 0, .2);
118

    
119
// Checkbox
120
@checkbox-bg:                    @btn-bg;
121
@checkbox-bg-hlight:             @btn-bg-hlight;
122
@checkbox-box-shadow:            inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
123
@checkbox-border:                #c5c5c5;
124
@checkbox-border-focus:          #59a5e1;
125

    
126
// Path
127
@path-text:                      @text;
128
@path-bg-focus:                  #666;
129
@path-text-focus:                #fff;
130

    
131
// Textbox
132
@textbox-text-placeholder:       #aaa;
133
@textbox-box-shadow:             inset 0 1px 1px rgba(0, 0, 0, 0.075);
134
@textbox-bg:                     #ffffff;
135
@textbox-border:                 #c5c5c5;
136
@textbox-border-focus:           #59a5e1;
137

    
138
// Throbber
139
@throbber-bg:                    #fff url('img/loader.gif') no-repeat center center;
140

    
141
// Combobox
142
@combobox-border:                @textbox-border;
143

    
144
// Colorpicker
145
@colorpicker-border:             @textbox-border;
146
@colorpicker-hue-bg:             #fff;
147
@colorpicker-hue-border:         #333;
148

    
149
// Grid
150
@grid-bg-active:                 @menuitem-bg-active;
151
@grid-border-active:             #a1a1a1;
152
@grid-border:                    #d6d6d6;
153

    
154
// Misc
155
@colorbtn-backcolor-bg:          #bbbbbb;
156
@iframe-border:                  @panel-border;
157

    
158
// Slider
159
@slider-border:                  #aaaaaa;
160
@slider-bg:                      #eeeeee;
161
@slider-handle-border:           #bbbbbb;
162
@slider-handle-bg:               #dddddd;
163

    
164
@flow-layout-spacing:            2px;
165
@tabs-bg:						 #FFF;
(1-1/6)