]>
Commit | Line | Data |
---|---|---|
81bea17a AD |
1 | // General |
2 | @text-color: #000000; // Text color for enabled widgets | |
3 | ||
4 | @border-color: #b5bcc7; // Border color for (enabled, unhovered) TextBox, Slider, Accordion, BorderContainer, TabContainer | |
5 | @popup-border-color: #769dc0; // Border for Dialog, Menu, Tooltip. Must also update tooltip.png (the arrow image file) to match | |
6 | @minor-border-color: #d3d3d3; // Color of borders inside widgets: horizontal line in Calendar between weeks, around color swatches in ColorPalette, above Dialog action bar | |
7 | ||
8 | @disabled-border-color: #d3d3d3; // Border color for disabled/readonly Button, TextBox etc. widgets | |
9 | @disabled-background-color: #efefef;// Disabled button, textbox, etc. | |
10 | @disabled-text-color: #818181; // Text color for disabled/readonly widgets | |
11 | ||
12 | @unselected-background-color: #efefef;// Background color for unselected/unopened tab button, accordion pane, TitlePane, Menu items | |
13 | @unselected-text-color: #4a4a4a; // Text color for unselected/unopened tab button, accordion pane, TitlePane, Menu items | |
14 | ||
15 | @hovered-border-color: #769dc0; // Hover of textbox, tab label, BorderContainer splitter, Calendar, etc. | |
16 | @hovered-background-color: #abd6ff; // 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 | |
17 | @hovered-text-color: @text-color; // Used for title of select Accordion pane, label of select tab, hovered Menu item, etc. | |
18 | ||
19 | @pressed-border-color: #769dc0; // During click on Calendar day, Slider up/down buttons, tab button, etc. | |
20 | @pressed-background-color: #7dbefa; // Background color while clicking on Accordion/TitlePane title bar, tab button, Calendar day, Toolbar button, Tree row. | |
21 | ||
22 | @selected-border-color: #769dc0; // Selected AccordionPane, tab of nested TabContainer (but plain TabContainer is special) | |
23 | @selected-background-color: #cfe5fa;// Selected Accordion pane, nested tab label, Tree row | |
24 | @selected-text-color: @text-color; // title of selected Accordion pane, label of selected tab, hovered Menu item, etc. | |
25 | ||
26 | @bar-background-color: #efefef; // MenuBar, Toolbar, action bar at bottom of dialog | |
27 | @pane-background-color: #fff; // Background color of Accordion panes, Dialogs, etc. | |
28 | @popup-background-color: #fff; // Background for Dialog. TODO: currently use for ColorPalette, maybe should change. | |
29 | ||
30 | ||
31 | ||
32 | // Buttons | |
33 | @button-border-color: #769dc0; // Border for (stand-alone) buttons in normal, hovered, or active state | |
34 | @button-background-color: #e9f4fe; // Background color for (unhovered) buttons | |
35 | @button-hovered-background-color: #abd6ff; // Background color for hovered buttons | |
36 | @button-pressed-background-color: #abd6ff; // Background color for active buttons | |
37 | @button-border-radius: 4px; // Rounded corner radius for buttons (except in toolbar) | |
38 | ||
39 | // Input widgets | |
40 | @focused-border-color: #769dc0; // Focused textbox, editor, select, etc. | |
41 | @error-border-color: #d46464; // Border for textbox in error state | |
42 | @error-focused-border-color: #ce4f4f; // Border of textbox in error state, and focused | |
43 | @erroricon-background-color: #d46464; // Background color for exclamation point validation icon (for TextBox in error state) | |
44 | @textbox-background-color: #fff; // Default background color of TextBox based widgets | |
45 | @textbox-hovered-background-color: #e9f4fe; // Background color when hovering a unfocused TextBox, Select, Editor, or other input widget | |
46 | @textbox-focused-background-color: @textbox-background-color; | |
47 | @textbox-error-background-color: @textbox-background-color; | |
48 | @textbox-disabled-background-color: @disabled-background-color; | |
49 | ||
50 | @textbox-padding: 2px; // Padding for Textbox, Textarea, etc. | |
51 | ||
52 | // CheckBox, RadioButton | |
53 | @focus-outline-color: #4a4a4a; // Color for artificial focus outline around labels of checkboxes | |
54 | ||
55 | // TabContainer | |
56 | @nestedtab-hovered-background-color: @textbox-hovered-background-color; | |
57 | @nestedtab-hovered-border-color: #cfe5fa; | |
58 | @nestedtab-selected-border-color: @selected-border-color; | |
59 | @nestedtab-selected-background-color: #abd6ff; | |
60 | @tab-disabled-background-color: #d3d3d3; // For disabled tabs of a TabContainer (not officially supported) | |
61 | ||
62 | // Arrow buttons (stand alone, or inside ComboBox / ComboButton / Spinner / etc. | |
63 | @arrowbutton-background-color: #efefef; | |
64 | @arrowbutton-hovered-background-color: #abd6ff; // Color of arrow when hovering ComboBox. But hovering Spinner doesn't change arrow color (TODO) | |
65 | @arrowbutton-pressed-background-color: #abd6ff; | |
66 | @arrowbutton-inner-border-color: #fff; // Typically the arrows have an inner white border (a.k.a. padding) and then an outer black-ish border | |
67 | ||
68 | // Slider | |
69 | // Note: any changes here require corresponding changes in form/images/sliderThumbs.png | |
70 | @slider-fullbar-background-color: #cfe5fa; // Background color for part of slider bar before (to the left or below) the handle | |
71 | @slider-remainingbar-background-color: #fff; // Background color for part of slider bar after (to the right or above) the handle | |
72 | @slider-hovered-fullbar-background-color: #abd6ff; // Background color for part of bar of hovered slider before (to the left or below) the handle | |
73 | @slider-hovered-remainingbar-background-color: #fff;// Background color for part of bar of hovered slider after (to the right or above) the handle | |
74 | @slider-hoveredButton-background-color: #fff; // Background color of slider increment/decrement buttons when mouse is over slider but not over the buttons | |
75 | @slider-focused-fullbar-background-color: #abd6ff; // Background color for part of bar of focused slider before (to the left or below) the handle | |
76 | @slider-focused-remainingbar-background-color: #fff;// Background color for part of bar of focused slider after (to the right or above) the handle | |
77 | @slider-button-hovered-background-color: #cfe5fa; // Background color of slider increment/decrement buttons when mouse is over the buttons | |
78 | @slider-button-pressed-background-color: #abd6ff; // Background color of slider increment/decrement buttons while button is depressed | |
79 | ||
80 | // Select, ComboBox | |
81 | @select-dropdownitem-background-color: #fff; // Background color for items in the drop down list of a ComboBox/Select | |
82 | @select-dropdownitem-hovered-background-color: #7dbefa; // Background color for the hovered item in the drop down list of a ComboBox/Select | |
83 | @select-matchedtext-background-color: #abd6ff; // Background color of text in ComboBox drop down that matches typed in phrase | |
84 | ||
85 | // Menus | |
86 | @menu-background-color: @popup-background-color; | |
87 | ||
88 | // Calendar | |
89 | @calendar-background-color: #cfe5fa; | |
90 | @calendar-currentmonth-background-color: #fff; // Background color for days of the current month | |
91 | @calendar-adjacentmonth-background-color: #e9f4fe; // Background color used for days from previous or next month | |
92 | @calendar-adjacentmonth-text-color: #769dc0; // Text color used for days from previous or next month | |
93 | @calendar-date-pressed-border-color: #fff; // For some reason pressing a day of the month (as opposed to hovering it) makes the border go away, is this intentional? | |
94 | @calendar-date-pressed-background-color: @pressed-background-color; | |
95 | @calendar-date-selected-border-color: @selected-border-color; | |
96 | @calendar-date-selected-background-color: #abd6ff; | |
97 | @calendar-button-hovered-background-color: #e9f4fe; // 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) | |
98 | @calendar-button-hovered-border-color: #fff; // for hover or next/previous year, and month drop down | |
99 | @calendar-button-pressed-background-color: #cfe5fa; | |
100 | @calendar-button-pressed-border-color: @pressed-border-color; | |
101 | ||
102 | ||
103 | // ProgressBar | |
104 | @progressbar-border-color: @popup-border-color; // Border color of progress bar | |
105 | @progressbar-full-background-color:#abd6ff; // Background color for part of progress bar indicating amount completed | |
106 | @progressbar-empty-background-color: #fff; // Background color for part of progress bar indicating amount remaining | |
107 | @progressbar-text-color: @text-color; // Color of progress bar text (ex: "35%"). Must contrast with both empty and full background colors. | |
108 | ||
109 | // TimePicker | |
110 | @timepicker-minorvalue-background-color: #efefef; // For 3:15, 3:30, 3:45 but not 3:00 or 4:00 | |
111 | @timepicker-minorvalue-text-color: #818181; | |
112 | @timepicker-majorvalue-background-color: #e9f4fe; // For 3:00, 4:00, 5:00, etc. | |
113 | @timepicker-value-hovered-background-color: #7dbefa; | |
114 | @timepicker-value-hovered-text-color: @hovered-text-color; | |
115 | @timepicker-arrow-hovered-background-color: #abd6ff; | |
116 | ||
117 | // ColorPalette | |
118 | @colorpalette-background-color: #fff; | |
119 | @swatch-border-color: @minor-border-color; | |
120 | @swatch-hovered-border-color: #000; | |
121 | @swatch-selected-border-color: #000; | |
122 | ||
123 | // Dialog | |
124 | @dialog-underlay-color: #fff; // the thing that grays out the screen when a dialog is shown | |
125 | @dialog-titlebar-border-color: #fff; // Inner border around the title sectionof a Dialog, inside the main border of the Dialog and the border between title and content | |
126 | @dialog-titlebar-background-color: #abd6ff; | |
127 | ||
128 | // BorderContainer | |
129 | @splitter-hovered-background-color: #cfe5fa; // Color of splitter when user hovers it, before mouse down | |
130 | @splitter-dragged-background-color: #abd6ff; // Color of splitter while it's being dragged | |
131 | ||
132 | // Toolbar | |
133 | @toolbar-button-checked-background-color: #fff; // a toggled-on button in the toolbar | |
134 | @toolbar-combobutton-hovered-unhoveredsection-background-color: #f4ffff; // when user hovers a ComboButton in a Toolbar, the other half of the button turns this color | |
135 | @toolbar-button-border-radius: 2px; // Rounded corner radius for buttons for buttons in toolbar | |
136 | ||
137 | // DnD | |
138 | @dnd-avatar-background-color: #fff; // Background color of little Dialog-type box indicating dragged items | |
139 | @dnd-avatar-header-background-color: #f58383; // Title bar for dragged items | |
140 | @dnd-avatar-candrop-header-background-color: #97e68d;// Title bar for dragged items when they can be dropped | |
141 | @dnd-dropseparator-color: #769dc0; // Color of line indicating that user is about to drop between items A & B | |
142 | ||
143 | // Document level | |
144 | @document-text-color: #131313; // Text color for document itself (text outside of widgets) | |
145 | @document-shadedsection-background-color: @bar-background-color;// background color used for <pre>, <code>, and table header rows | |
146 | @document-border-color: #d3d3d3; // Border for <pre>, <code>, tables, etc. | |
147 | ||
148 | // Mixins | |
149 | ||
150 | .border-radius (@radius) { | |
151 | -moz-border-radius: @radius; | |
152 | border-radius: @radius; | |
153 | } | |
154 | ||
155 | .box-shadow (@value) { | |
156 | -webkit-box-shadow: @value; | |
157 | -moz-box-shadow: @value; | |
158 | box-shadow: @value; | |
159 | } | |
160 | ||
161 | .transition-property (@value) { | |
162 | -webkit-transition-property: @value; | |
163 | -moz-transition-property: @value; | |
164 | transition-property: @value; | |
165 | } | |
166 | ||
167 | .transition-property (@value1, @value2) { | |
168 | -webkit-transition-property: @value1, @value2; | |
169 | -moz-transition-property: @value1, @value2; | |
170 | transition-property: @value1, @value2; | |
171 | } | |
172 | ||
173 | .transition-duration (@value) { | |
174 | -webkit-transition-duration: @value; | |
175 | -moz-transition-duration: @value; | |
176 | transition-duration: @value; | |
177 | } | |
178 | ||
179 | .transition-duration (@value1, @value2) { | |
180 | -webkit-transition-duration: @value1, @value2; | |
181 | -moz-transition-duration: @value1, @value2; | |
182 | transition-duration: @value1, @value2; | |
183 | } | |
184 | ||
185 | .transition-timing-function (@value) { | |
186 | -webkit-transition-timing-function: @value; | |
187 | -moz-transition-timing-function: @value; | |
188 | transition-timing-function: @value; | |
189 | } |