]>
Commit | Line | Data |
---|---|---|
81bea17a | 1 | // General |
81bea17a | 2 | |
1354d172 AD |
3 | @primary-color: #cfe5fa; // Base color for entire theme |
4 | @secondary-color: #efefef; // Base color for bar-backgrounds | |
5 | @text-color: #000; // Text color for enabled widgets | |
6 | @disabled-color: #d3d3d3; // Base for disabled backgrounds and borders | |
7 | @error-color: #d46464; | |
81bea17a | 8 | |
1354d172 | 9 | @container-background-color:#fff; // Backgrounds for various content areas such as TitlePane, ContentPane and Inputs |
81bea17a | 10 | |
1354d172 AD |
11 | @minor-selected-color: spin(saturate(darken(@primary-color, 6), 19), 0); // Color for various arrows and buttons |
12 | @base-border-color: spin(desaturate(darken(@primary-color, 29), 44), -1); // Augmented and used directly by variables to create border colors for various widgets | |
13 | @unfocused-clickable-color: spin(saturate(lighten(@primary-color, 5), 10), 0); // Background color for enabled buttons, text inputs | |
14 | @border-color: spin(desaturate(darken(@primary-color, 15), 67), 8); // Border color for (enabled, unhovered) TextBox, Slider, Accordion, BorderContainer, TabContainer | |
15 | @minor-border-color: @disabled-color; // Color of borders inside widgets: horizontal line in Calendar between weeks, around color swatches in ColorPalette, above Dialog action bar | |
16 | @popup-border-color: @base-border-color; // Border for Dialog, Menu, Tooltip. Must also update tooltip.png (the arrow image file) to match | |
81bea17a | 17 | |
81bea17a | 18 | |
1354d172 AD |
19 | @disabled-border-color: @disabled-color; // Border color for disabled/readonly Button, TextBox etc. widgets |
20 | @disabled-background-color: @secondary-color; // Disabled button, textbox, etc. | |
21 | @disabled-text-color: darken(@secondary-color, 43); // Text color for disabled/readonly widgets | |
81bea17a | 22 | |
1354d172 AD |
23 | @unselected-background-color: @secondary-color; // Background color for unselected/unopened tab button, accordion pane, TitlePane, Menu items |
24 | @unselected-text-color: darken(@secondary-color, 65); // Text color for unselected/unopened tab button, accordion pane, TitlePane, Menu items | |
81bea17a | 25 | |
1354d172 AD |
26 | @hovered-border-color: @base-border-color; // Hover of textbox, tab label, BorderContainer splitter, Calendar, etc. |
27 | @hovered-background-color: @minor-selected-color; // Background color for hover of Button, MenuBar, Accordion pane, Calendar... anything that has a (non-white) color to start with and gets darker on hover | |
28 | @hovered-text-color: @text-color; // Used for title of select Accordion pane, label of select tab, hovered Menu item, etc. | |
29 | ||
30 | @pressed-border-color: @base-border-color; // During click on Calendar day, Slider up/down buttons, tab button, etc. | |
31 | @pressed-background-color: spin(saturate(darken(@primary-color, 16), 12), 0); // Background color while clicking on Accordion/TitlePane title bar, tab button, Calendar day, Toolbar button, Tree row. | |
32 | ||
33 | @selected-border-color: @base-border-color; // Selected AccordionPane, tab of nested TabContainer (but plain TabContainer is special) | |
34 | @selected-background-color: @primary-color; // Selected Accordion pane, nested tab label, Tree row | |
35 | @selected-text-color: @text-color; // title of selected Accordion pane, label of selected tab, hovered Menu item, etc. | |
36 | ||
37 | @bar-background-color: @secondary-color; // MenuBar, Toolbar, action bar at bottom of dialog | |
38 | @pane-background-color: @container-background-color; // Background color of Accordion panes, Dialogs, etc. | |
39 | @popup-background-color: @container-background-color; // Background for Dialog. TODO: currently use for ColorPalette, maybe should change. | |
81bea17a AD |
40 | |
41 | ||
42 | ||
43 | // Buttons | |
1354d172 AD |
44 | @button-border-color: @base-border-color; // Border for (stand-alone) buttons in normal, hovered, or active state |
45 | @button-background-color: @unfocused-clickable-color; // Background color for (unhovered) buttons | |
46 | @button-hovered-background-color: @minor-selected-color; // Background color for hovered buttons | |
47 | @button-pressed-background-color: @minor-selected-color; // Background color for active buttons | |
48 | @button-border-radius: 4px; // Rounded corner radius for buttons (except in toolbar) | |
81bea17a AD |
49 | |
50 | // Input widgets | |
1354d172 AD |
51 | @focused-border-color: @base-border-color; // Focused textbox, editor, select, etc. |
52 | @error-border-color: @error-color; // Border for textbox in error state | |
53 | @error-focused-border-color: darken(@error-color, 5); // Border of textbox in error state, and focused | |
54 | @erroricon-background-color: @error-color; // Background color for exclamation point validation icon (for TextBox in error state) | |
55 | @textbox-background-color: @container-background-color; // Default background color of TextBox based widgets | |
56 | @textbox-hovered-background-color: @unfocused-clickable-color; // Background color when hovering a unfocused TextBox, Select, Editor, or other input widget | |
81bea17a AD |
57 | @textbox-focused-background-color: @textbox-background-color; |
58 | @textbox-error-background-color: @textbox-background-color; | |
59 | @textbox-disabled-background-color: @disabled-background-color; | |
60 | ||
1354d172 | 61 | @textbox-padding: 2px; // Padding for Textbox, Textarea, etc. |
81bea17a AD |
62 | |
63 | // CheckBox, RadioButton | |
1354d172 | 64 | @focus-outline-color: darken(@secondary-color, 65); // Color for artificial focus outline around labels of checkboxes |
81bea17a AD |
65 | |
66 | // TabContainer | |
1354d172 AD |
67 | @nestedtab-hovered-background-color: @unfocused-clickable-color; |
68 | @nestedtab-hovered-border-color: @primary-color; | |
81bea17a | 69 | @nestedtab-selected-border-color: @selected-border-color; |
1354d172 AD |
70 | @nestedtab-selected-background-color: @minor-selected-color; |
71 | @tab-disabled-background-color: @disabled-color; // For disabled tabs of a TabContainer (not officially supported) | |
81bea17a AD |
72 | |
73 | // Arrow buttons (stand alone, or inside ComboBox / ComboButton / Spinner / etc. | |
1354d172 AD |
74 | @arrowbutton-background-color: @secondary-color; |
75 | @arrowbutton-hovered-background-color: @minor-selected-color; // Color of arrow when hovering ComboBox. But hovering Spinner doesn't change arrow color (TODO) | |
76 | @arrowbutton-pressed-background-color: @minor-selected-color; | |
77 | @arrowbutton-inner-border-color: @container-background-color; // Typically the arrows have an inner white border (a.k.a. padding) and then an outer black-ish border | |
81bea17a AD |
78 | |
79 | // Slider | |
80 | // Note: any changes here require corresponding changes in form/images/sliderThumbs.png | |
1354d172 AD |
81 | @slider-fullbar-background-color: @primary-color; // Background color for part of slider bar before (to the left or below) the handle |
82 | @slider-remainingbar-background-color: @container-background-color; // Background color for part of slider bar after (to the right or above) the handle | |
83 | @slider-hovered-fullbar-background-color: @minor-selected-color; // Background color for part of bar of hovered slider before (to the left or below) the handle | |
84 | @slider-hovered-remainingbar-background-color: @container-background-color; // Background color for part of bar of hovered slider after (to the right or above) the handle | |
85 | @slider-hoveredButton-background-color: @container-background-color; // Background color of slider increment/decrement buttons when mouse is over slider but not over the buttons | |
86 | @slider-focused-fullbar-background-color: @minor-selected-color; // Background color for part of bar of focused slider before (to the left or below) the handle | |
87 | @slider-focused-remainingbar-background-color: @container-background-color; // Background color for part of bar of focused slider after (to the right or above) the handle | |
88 | @slider-button-hovered-background-color: @primary-color; // Background color of slider increment/decrement buttons when mouse is over the buttons | |
89 | @slider-button-pressed-background-color: @minor-selected-color; // Background color of slider increment/decrement buttons while button is depressed | |
81bea17a AD |
90 | |
91 | // Select, ComboBox | |
1354d172 AD |
92 | @select-dropdownitem-background-color: @container-background-color; // Background color for items in the drop down list of a ComboBox/Select |
93 | @select-dropdownitem-hovered-background-color: @pressed-background-color; // Background color for the hovered item in the drop down list of a ComboBox/Select | |
94 | @select-matchedtext-background-color: @minor-selected-color; // Background color of text in ComboBox drop down that matches typed in phrase | |
81bea17a AD |
95 | |
96 | // Menus | |
97 | @menu-background-color: @popup-background-color; | |
98 | ||
99 | // Calendar | |
1354d172 AD |
100 | @calendar-background-color: @primary-color; |
101 | @calendar-currentmonth-background-color: @container-background-color; // Background color for days of the current month | |
102 | @calendar-adjacentmonth-background-color: @unfocused-clickable-color; // Background color used for days from previous or next month | |
103 | @calendar-adjacentmonth-text-color: @base-border-color; // Text color used for days from previous or next month | |
104 | @calendar-date-pressed-border-color: @container-background-color; // For some reason pressing a day of the month (as opposed to hovering it) makes the border go away, is this intentional? | |
81bea17a AD |
105 | @calendar-date-pressed-background-color: @pressed-background-color; |
106 | @calendar-date-selected-border-color: @selected-border-color; | |
1354d172 AD |
107 | @calendar-date-selected-background-color: @minor-selected-color; |
108 | @calendar-button-hovered-background-color: @unfocused-clickable-color; // for hover or next/previous year, and month drop down (TODO: border and background are built in to calendarArrows.png, can't control from here) | |
109 | @calendar-button-hovered-border-color: @container-background-color; // for hover or next/previous year, and month drop down | |
110 | @calendar-button-pressed-background-color: @pressed-background-color; | |
81bea17a AD |
111 | @calendar-button-pressed-border-color: @pressed-border-color; |
112 | ||
113 | ||
114 | // ProgressBar | |
1354d172 AD |
115 | @progressbar-border-color: @popup-border-color; // Border color of progress bar |
116 | @progressbar-full-background-color:@minor-selected-color; // Background color for part of progress bar indicating amount completed | |
117 | @progressbar-empty-background-color: @container-background-color; // Background color for part of progress bar indicating amount remaining | |
118 | @progressbar-text-color: @text-color; // Color of progress bar text (ex: "35%"). Must contrast with both empty and full background colors. | |
81bea17a AD |
119 | |
120 | // TimePicker | |
1354d172 AD |
121 | @timepicker-minorvalue-background-color: @secondary-color; // For 3:15, 3:30, 3:45 but not 3:00 or 4:00 |
122 | @timepicker-minorvalue-text-color: darken(@secondary-color, 43); | |
123 | @timepicker-majorvalue-background-color: @unfocused-clickable-color; // For 3:00, 4:00, 5:00, etc. | |
124 | @timepicker-value-hovered-background-color: @pressed-background-color; | |
81bea17a | 125 | @timepicker-value-hovered-text-color: @hovered-text-color; |
1354d172 | 126 | @timepicker-arrow-hovered-background-color: @minor-selected-color; |
81bea17a AD |
127 | |
128 | // ColorPalette | |
1354d172 | 129 | @colorpalette-background-color: @container-background-color; |
81bea17a AD |
130 | @swatch-border-color: @minor-border-color; |
131 | @swatch-hovered-border-color: #000; | |
132 | @swatch-selected-border-color: #000; | |
133 | ||
134 | // Dialog | |
1354d172 AD |
135 | @dialog-underlay-color: @container-background-color; // the thing that grays out the screen when a dialog is shown |
136 | @dialog-titlebar-border-color: @container-background-color; // Inner border around the title sectionof a Dialog, inside the main border of the Dialog and the border between title and content | |
137 | @dialog-titlebar-background-color: @minor-selected-color; | |
81bea17a AD |
138 | |
139 | // BorderContainer | |
1354d172 AD |
140 | @splitter-hovered-background-color: @primary-color; // Color of splitter when user hovers it, before mouse down |
141 | @splitter-dragged-background-color: @minor-selected-color; // Color of splitter while it's being dragged | |
81bea17a AD |
142 | |
143 | // Toolbar | |
1354d172 AD |
144 | @toolbar-button-checked-background-color: @container-background-color; // a toggled-on button in the toolbar |
145 | @toolbar-combobutton-hovered-unhoveredsection-background-color: spin(saturate(lighten(@primary-color, 8), 19), -29); // when user hovers a ComboButton in a Toolbar, the other half of the button turns this color | |
81bea17a AD |
146 | @toolbar-button-border-radius: 2px; // Rounded corner radius for buttons for buttons in toolbar |
147 | ||
148 | // DnD | |
1354d172 | 149 | @dnd-avatar-background-color: @container-background-color; // Background color of little Dialog-type box indicating dragged items |
81bea17a AD |
150 | @dnd-avatar-header-background-color: #f58383; // Title bar for dragged items |
151 | @dnd-avatar-candrop-header-background-color: #97e68d;// Title bar for dragged items when they can be dropped | |
1354d172 | 152 | @dnd-dropseparator-color: @base-border-color; // Color of line indicating that user is about to drop between items A & B |
81bea17a AD |
153 | |
154 | // Document level | |
1354d172 | 155 | @document-text-color: #131313; // Text color for document itself (text outside of widgets) |
81bea17a | 156 | @document-shadedsection-background-color: @bar-background-color;// background color used for <pre>, <code>, and table header rows |
1354d172 AD |
157 | @document-border-color: @disabled-color; // Border for <pre>, <code>, tables, etc. |
158 | ||
159 | // Images | |
160 | @image-arrow-sprite: "images/spriteArrows.png"; | |
161 | @image-calendar-container: "images/calendarContainerImages.png"; | |
162 | @image-calendar-arrows: "images/calendarArrows.png"; | |
163 | @image-calendar-arrows-ie6: "images/calendarArrows8bit.png"; | |
164 | @image-checkmark: "images/checkmarkNoBorder.png"; | |
165 | @image-checkmark-ie6: "images/checkmarkNoBorder.gif"; | |
166 | @image-common-highlight: "images/commonHighlight.png"; | |
167 | @image-dialog-close: "images/dialogCloseIcon.png"; | |
168 | @image-dialog-close-ie6: "images/dialogCloseIcon8bit.png"; | |
169 | @image-dnd: "images/dnd.png"; | |
170 | @image-editor-icons-enabled: "../../icons/images/editorIconsEnabled.png"; | |
171 | @image-form-button: "form/images/button.png"; | |
172 | @image-form-button-arrows: "form/images/buttonArrows.png"; | |
173 | @image-form-checkbox-and-radios: "form/images/checkboxRadioButtonStates.png"; | |
174 | @image-form-checkbox-and-radios-ie6: "form/images/checkboxAndRadioButtons_IE6.png"; | |
175 | @image-form-common-arrows: "form/images/commonFormArrows.png"; | |
176 | @image-form-error: "form/images/error.png"; | |
177 | @image-form-highlight: "form/images/formHighlight.png"; | |
178 | @image-form-slider-horizontal: "form/images/sliderHorizontal.png"; | |
179 | @image-form-slider-thumbs: "form/images/sliderThumbs.png"; | |
180 | @image-form-slider-vertical: "form/images/sliderVertical.png"; | |
181 | @image-form-textbox-background: "form/images/textBox_back.png"; | |
182 | @image-layout-accordion: "layout/images/accordion.png"; | |
183 | @image-layout-splitter-horizontal-hover: "layout/images/splitterHorizontalHover.png"; | |
184 | @image-layout-splitter-vertical-hover: "layout/images/splitterVerticalHover.png"; | |
185 | @image-layout-tab-bottom: "layout/images/tabBottom.png"; | |
186 | @image-layout-tab-close: "layout/images/tabClose.png"; | |
187 | @image-layout-tab-left: "layout/images/tabLeft.png"; | |
188 | @image-layout-tab-nested: "layout/images/tabNested.png"; | |
189 | @image-layout-tab-right: "layout/images/tabRight.png"; | |
190 | @image-layout-tab-top: "layout/images/tabTop.png"; | |
191 | @image-loading-animation: "images/loadingAnimation.gif"; | |
192 | @image-menu-highlight: "images/menuHighlight.png"; | |
193 | @image-progressbar-empty: "images/progressBarEmpty.png"; | |
194 | @image-progressbar-full: "images/progressBarFull.png"; | |
195 | @image-progressbar-anim: "images/progressBarAnim.gif"; | |
196 | @image-titlebar: "images/titlebar.png"; | |
197 | @image-tooltip: "images/tooltip.png"; | |
198 | @image-tooltip-ie6: "images/tooltip8bit.png"; | |
199 | @image-tooltip-gradient: "images/tooltipGradient.png"; | |
200 | @image-tree-expand: "images/treeExpandImages.png"; | |
201 | @image-tree-expand-ie6: "images/treeExpandImages8bit.png"; | |
81bea17a AD |
202 | |
203 | // Mixins | |
204 | ||
205 | .border-radius (@radius) { | |
206 | -moz-border-radius: @radius; | |
207 | border-radius: @radius; | |
208 | } | |
209 | ||
210 | .box-shadow (@value) { | |
211 | -webkit-box-shadow: @value; | |
212 | -moz-box-shadow: @value; | |
213 | box-shadow: @value; | |
214 | } | |
215 | ||
216 | .transition-property (@value) { | |
217 | -webkit-transition-property: @value; | |
218 | -moz-transition-property: @value; | |
219 | transition-property: @value; | |
220 | } | |
221 | ||
222 | .transition-property (@value1, @value2) { | |
223 | -webkit-transition-property: @value1, @value2; | |
224 | -moz-transition-property: @value1, @value2; | |
225 | transition-property: @value1, @value2; | |
226 | } | |
227 | ||
228 | .transition-duration (@value) { | |
229 | -webkit-transition-duration: @value; | |
230 | -moz-transition-duration: @value; | |
231 | transition-duration: @value; | |
232 | } | |
233 | ||
234 | .transition-duration (@value1, @value2) { | |
235 | -webkit-transition-duration: @value1, @value2; | |
236 | -moz-transition-duration: @value1, @value2; | |
237 | transition-duration: @value1, @value2; | |
238 | } | |
239 | ||
240 | .transition-timing-function (@value) { | |
241 | -webkit-transition-timing-function: @value; | |
242 | -moz-transition-timing-function: @value; | |
243 | transition-timing-function: @value; | |
244 | } |