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: true; |
|
12 @has-radius: true; |
|
13 @has-boxshadow: true; |
|
14 |
|
15 // Text colors |
|
16 @text: #333; |
|
17 @text-inverse: white; |
|
18 @text-disabled: #aaa; |
|
19 @text-shadow: 0 1px 1px hsla(hue(@text-inverse), saturation(@text-inverse), lightness(@text-inverse), 0.75); |
|
20 @text-error: #aa0000; |
|
21 |
|
22 // Button |
|
23 @btn-text: @text; |
|
24 @btn-text-shadow: @text-inverse; |
|
25 @btn-border-top: rgba(0, 0, 0, .1); |
|
26 @btn-border-right: rgba(0, 0, 0, .1); |
|
27 @btn-border-bottom: fadein(rgba(0, 0, 0, .1), 15%); |
|
28 @btn-border-left: fadein(rgba(0, 0, 0, .1), 15%); |
|
29 @btn-split-border: #bdbdbd; |
|
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: white; |
|
36 @btn-bg-hlight: #D9D9D9; |
|
37 @btn-bg-hover: darken(@btn-bg, 5%); |
|
38 @btn-bg-hlight-hover: darken(@btn-bg-hlight, 5%); |
|
39 |
|
40 @btn-primary-bg: #0088cc; |
|
41 @btn-primary-bg-hlight: #0044cc; |
|
42 @btn-primary-bg-hover: darken(@btn-primary-bg, 5%); |
|
43 @btn-primary-bg-hover-hlight: darken(@btn-primary-bg-hlight, 5%); |
|
44 @btn-primary-text: #fff; |
|
45 @btn-primary-text-shadow: #333; |
|
46 @btn-primary-border-top: mix(@btn-border-top, @btn-primary-bg, 50%); |
|
47 @btn-primary-border-right: mix(@btn-border-right, @btn-primary-bg, 50%); |
|
48 @btn-primary-border-bottom: mix(@btn-border-bottom, @btn-primary-bg, 50%); |
|
49 @btn-primary-border-left: mix(@btn-border-left, @btn-primary-bg, 50%); |
|
50 |
|
51 // Menu |
|
52 @menuitem-text: @text; |
|
53 @menu-bg: #fff; |
|
54 @menu-border: rgba(0, 0, 0, 0.2); |
|
55 @menubar-border: mix(@panel-border, @panel-bg, 60%); |
|
56 @menuitem-text-inverse: @text-inverse; |
|
57 @menubar-bg-active: darken(@btn-bg, 10%); |
|
58 @menuitem-bg-hover: #0081C2; |
|
59 @menuitem-bg-selected: #08C; |
|
60 @menuitem-bg-selected-hlight: #0077B3; |
|
61 @menuitem-bg-disabled: #CCC; |
|
62 @menuitem-caret: @menuitem-text; |
|
63 @menuitem-caret-selected: @menuitem-text-inverse; |
|
64 @menuitem-separator-top: #CBCBCB; |
|
65 @menuitem-separator-bottom: @menu-bg; |
|
66 @menuitem-bg-active: #C8DEF4; |
|
67 @menuitem-text-active: @text; |
|
68 @menuitem-preview-border-active: #aaa; |
|
69 |
|
70 // Panel |
|
71 @panel-border: #9E9E9E; |
|
72 @panel-bg: #FDFDFD; |
|
73 @panel-bg-hlight: #DDD; |
|
74 |
|
75 // Tabs |
|
76 @tab-border: #c5c5c5; |
|
77 @tab-bg: #e3e3e3; |
|
78 @tab-bg-hover: #FDFDFD; |
|
79 @tab-bg-active: #FDFDFD; |
|
80 |
|
81 // Tooltip |
|
82 @tooltip-bg: #000; |
|
83 @tooltip-text: white; |
|
84 @tooltip-font-size: 11px; |
|
85 |
|
86 // Window |
|
87 @window-border: #c5c5c5; |
|
88 @window-head-border: @window-border; |
|
89 @window-head-close: mix(@text, @window-bg, 60%); |
|
90 @window-head-close-hover: mix(@text, @window-bg, 40%); |
|
91 @window-foot-border: @window-border; |
|
92 @window-foot-bg: @window-bg; |
|
93 @window-fullscreen-bg: #FFF; |
|
94 @window-modalblock-bg: #000; |
|
95 @window-modalblock-opacity: 0.3; |
|
96 @window-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); |
|
97 @window-bg: #FFF; |
|
98 @window-title-font-size: 20px; |
|
99 |
|
100 // Popover |
|
101 @popover-bg: @window-bg; |
|
102 @popover-arrow-width: 10px; |
|
103 @popover-arrow: @window-bg; |
|
104 @popover-arrow-outer-width: @popover-arrow-width + 1; |
|
105 @popover-arrow-outer: rgba(0, 0, 0, 0.25); |
|
106 |
|
107 // Floatpanel |
|
108 @floatpanel-box-shadow: 0 5px 10px rgba(0, 0, 0, .2); |
|
109 |
|
110 // Checkbox |
|
111 @checkbox-bg: @btn-bg; |
|
112 @checkbox-bg-hlight: @btn-bg-hlight; |
|
113 @checkbox-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05); |
|
114 @checkbox-border: #c5c5c5; |
|
115 @checkbox-border-focus: rgba(82, 168, 236, .8); |
|
116 |
|
117 // Path |
|
118 @path-text: @text; |
|
119 @path-bg-focus: #666; |
|
120 @path-text-focus: #fff; |
|
121 |
|
122 // Textbox |
|
123 @textbox-text-placeholder: #aaa; |
|
124 @textbox-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); |
|
125 @textbox-bg: #fff; |
|
126 @textbox-border: #c5c5c5; |
|
127 @textbox-border-focus: rgba(82, 168, 236, .8); |
|
128 |
|
129 // Throbber |
|
130 @throbber-bg: #fff url('img/loader.gif') no-repeat center center; |
|
131 |
|
132 // Combobox |
|
133 @combobox-border: @textbox-border; |
|
134 |
|
135 // Colorpicker |
|
136 @colorpicker-border: @textbox-border; |
|
137 @colorpicker-hue-bg: #fff; |
|
138 @colorpicker-hue-border: #333; |
|
139 |
|
140 // Grid |
|
141 @grid-bg-active: @menuitem-bg-active; |
|
142 @grid-border-active: #a1a1a1; |
|
143 @grid-border: #d6d6d6; |
|
144 |
|
145 // Misc |
|
146 @colorbtn-backcolor-bg: #BBB; |
|
147 @iframe-border: @panel-border; |
|