| 1 | 1 |
new file mode 100644 |
| ... | ... |
@@ -0,0 +1,196 @@ |
| 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: true; |
|
| 13 |
+@has-boxshadow: true; |
|
| 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: #313824; |
|
| 25 |
+@btn-text-shadow: #ffffff; |
|
| 26 |
+@btn-border-top: rgba(68,171,32,0.1); |
|
| 27 |
+@btn-border-right: rgba(68,171,32,0.1); |
|
| 28 |
+@btn-border-bottom: rgba(68,171,32,0.1); |
|
| 29 |
+@btn-border-left: rgba(68,171,32,0.1); |
|
| 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: #e6f0d2; |
|
| 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 10px; |
|
| 42 |
+ |
|
| 43 |
+@btn-primary-bg: #31b011; |
|
| 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: #4d2f2f; |
|
| 61 |
+@menu-bg: #e0ebcb; |
|
| 62 |
+@menu-margin: -1px 0 0; |
|
| 63 |
+@menu-border: rgba(9,130,28,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: #82a63b; |
|
| 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: #13630c; |
|
| 74 |
+@menuitem-separator-bottom: #ffffff; |
|
| 75 |
+@menuitem-bg-active: #a0cca7; |
|
| 76 |
+@menuitem-text-active: #333333; |
|
| 77 |
+@menuitem-preview-border-active: #aaaaaa; |
|
| 78 |
+@menubar-menubtn-text: #333333; |
|
| 79 |
+ |
|
| 80 |
+// Panel |
|
| 81 |
+@panel-border: #9e9e9e; |
|
| 82 |
+@panel-bg: #c0d29d; |
|
| 83 |
+@panel-bg-hlight: #c0d29d; |
|
| 84 |
+ |
|
| 85 |
+// Tabs |
|
| 86 |
+@tab-border: #c5c5c5; |
|
| 87 |
+@tab-bg: #e3e3e3; |
|
| 88 |
+@tab-bg-hover: #fdfdfd; |
|
| 89 |
+@tab-bg-active: #fdfdfd; |
|
| 90 |
+@tabs-bg: #ffffff; |
|
| 91 |
+ |
|
| 92 |
+// Tooltip |
|
| 93 |
+@tooltip-bg: #000; |
|
| 94 |
+@tooltip-text: white; |
|
| 95 |
+@tooltip-font-size: 11px; |
|
| 96 |
+ |
|
| 97 |
+// Notification |
|
| 98 |
+@notification-font-size: 14px; |
|
| 99 |
+@notification-bg: #f0f0f0; |
|
| 100 |
+@notification-border: #cccccc; |
|
| 101 |
+@notification-text: #333333; |
|
| 102 |
+@notification-success-bg: #dff0d8; |
|
| 103 |
+@notification-success-border: #d6e9c6; |
|
| 104 |
+@notification-success-text: #3c763d; |
|
| 105 |
+@notification-info-bg: #d9edf7; |
|
| 106 |
+@notification-info-border: #779ecb; |
|
| 107 |
+@notification-info-text: #31708f; |
|
| 108 |
+@notification-warning-bg: #fcf8e3; |
|
| 109 |
+@notification-warning-border: #faebcc; |
|
| 110 |
+@notification-warning-text: #8a6d3b; |
|
| 111 |
+@notification-error-bg: #f2dede; |
|
| 112 |
+@notification-error-border: #ebccd1; |
|
| 113 |
+@notification-error-text: #a94442; |
|
| 114 |
+ |
|
| 115 |
+// Window |
|
| 116 |
+@window-border: #c4c4c4; |
|
| 117 |
+@window-head-border: @window-border; |
|
| 118 |
+@window-head-close: mix(@text, @window-bg, 60%); |
|
| 119 |
+@window-head-close-hover: mix(@text, @window-bg, 40%); |
|
| 120 |
+@window-foot-border: @window-border; |
|
| 121 |
+@window-foot-bg: @window-bg; |
|
| 122 |
+@window-fullscreen-bg: #FFF; |
|
| 123 |
+@window-modalblock-bg: #000; |
|
| 124 |
+@window-modalblock-opacity: 0.3; |
|
| 125 |
+@window-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); |
|
| 126 |
+@window-bg: #ffffff; |
|
| 127 |
+@window-title-font-size: 20px; |
|
| 128 |
+ |
|
| 129 |
+// Popover |
|
| 130 |
+@popover-bg: @window-bg; |
|
| 131 |
+@popover-arrow-width: 10px; |
|
| 132 |
+@popover-arrow: @window-bg; |
|
| 133 |
+@popover-arrow-outer-width: @popover-arrow-width + 1; |
|
| 134 |
+@popover-arrow-outer: rgba(0, 0, 0, 0.25); |
|
| 135 |
+ |
|
| 136 |
+// Floatpanel |
|
| 137 |
+@floatpanel-box-shadow: 0 5px 10px rgba(0, 0, 0, .2); |
|
| 138 |
+ |
|
| 139 |
+// Checkbox |
|
| 140 |
+@checkbox-bg: @btn-bg; |
|
| 141 |
+@checkbox-bg-hlight: @btn-bg-hlight; |
|
| 142 |
+@checkbox-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05); |
|
| 143 |
+@checkbox-border: #c5c5c5; |
|
| 144 |
+@checkbox-border-focus: #459e3d; |
|
| 145 |
+ |
|
| 146 |
+// Path |
|
| 147 |
+@path-text: @text; |
|
| 148 |
+@path-bg-focus: #666; |
|
| 149 |
+@path-text-focus: #fff; |
|
| 150 |
+ |
|
| 151 |
+// Textbox |
|
| 152 |
+@textbox-text-placeholder: #aaa; |
|
| 153 |
+@textbox-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); |
|
| 154 |
+@textbox-bg: #ffffff; |
|
| 155 |
+@textbox-border: #c5c5c5; |
|
| 156 |
+@textbox-border-focus: #59a5e1; |
|
| 157 |
+ |
|
| 158 |
+// Selectbox |
|
| 159 |
+@selectbox-bg: @textbox-bg; |
|
| 160 |
+@selectbox-border: @textbox-border; |
|
| 161 |
+ |
|
| 162 |
+// Throbber |
|
| 163 |
+@throbber-bg: #fff url('img/loader.gif') no-repeat center center;
|
|
| 164 |
+ |
|
| 165 |
+// Combobox |
|
| 166 |
+@combobox-border: @textbox-border; |
|
| 167 |
+ |
|
| 168 |
+// Colorpicker |
|
| 169 |
+@colorpicker-border: @textbox-border; |
|
| 170 |
+@colorpicker-hue-bg: #fff; |
|
| 171 |
+@colorpicker-hue-border: #333; |
|
| 172 |
+ |
|
| 173 |
+// Grid |
|
| 174 |
+@grid-bg-active: @menuitem-bg-active; |
|
| 175 |
+@grid-border-active: #a1a1a1; |
|
| 176 |
+@grid-border: #d6d6d6; |
|
| 177 |
+ |
|
| 178 |
+// Misc |
|
| 179 |
+@colorbtn-backcolor-bg: #bbbbbb; |
|
| 180 |
+@iframe-border: @panel-border; |
|
| 181 |
+ |
|
| 182 |
+// Slider |
|
| 183 |
+@slider-border: #aaaaaa; |
|
| 184 |
+@slider-bg: #eeeeee; |
|
| 185 |
+@slider-handle-border: #bbbbbb; |
|
| 186 |
+@slider-handle-bg: #dddddd; |
|
| 187 |
+ |
|
| 188 |
+// Progress |
|
| 189 |
+@progress-border: #cccccc; |
|
| 190 |
+@progress-bar-bg: #dfdfdf; |
|
| 191 |
+@progress-bar-bg-hlight: #cccccc; |
|
| 192 |
+@progress-text: #333333; |
|
| 193 |
+@progress-text-shadow: #ffffff; |
|
| 194 |
+ |
|
| 195 |
+// Flow layout |
|
| 196 |
+@flow-layout-spacing: 2px; |