| 1 | // General |
|---|
| 2 | |
|---|
| 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; |
|---|
| 8 | |
|---|
| 9 | @container-background-color:#fff; // Backgrounds for various content areas such as TitlePane, ContentPane and Inputs |
|---|
| 10 | |
|---|
| 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 |
|---|
| 17 | |
|---|
| 18 | |
|---|
| 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 |
|---|
| 22 | |
|---|
| 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 |
|---|
| 25 | |
|---|
| 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. |
|---|
| 40 | |
|---|
| 41 | |
|---|
| 42 | |
|---|
| 43 | // Buttons |
|---|
| 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) |
|---|
| 49 | |
|---|
| 50 | // Input widgets |
|---|
| 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 |
|---|
| 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 | |
|---|
| 61 | @textbox-padding: 2px; // Padding for Textbox, Textarea, etc. |
|---|
| 62 | |
|---|
| 63 | // CheckBox, RadioButton |
|---|
| 64 | @focus-outline-color: darken(@secondary-color, 65); // Color for artificial focus outline around labels of checkboxes |
|---|
| 65 | |
|---|
| 66 | // TabContainer |
|---|
| 67 | @nestedtab-hovered-background-color: @unfocused-clickable-color; |
|---|
| 68 | @nestedtab-hovered-border-color: @primary-color; |
|---|
| 69 | @nestedtab-selected-border-color: @selected-border-color; |
|---|
| 70 | @nestedtab-selected-background-color: @minor-selected-color; |
|---|
| 71 | @tab-disabled-background-color: @disabled-color; // For disabled tabs of a TabContainer (not officially supported) |
|---|
| 72 | |
|---|
| 73 | // Arrow buttons (stand alone, or inside ComboBox / ComboButton / Spinner / etc. |
|---|
| 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 |
|---|
| 78 | |
|---|
| 79 | // Slider |
|---|
| 80 | // Note: any changes here require corresponding changes in form/images/sliderThumbs.png |
|---|
| 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 |
|---|
| 90 | |
|---|
| 91 | // Select, ComboBox |
|---|
| 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 |
|---|
| 95 | |
|---|
| 96 | // Menus |
|---|
| 97 | @menu-background-color: @popup-background-color; |
|---|
| 98 | |
|---|
| 99 | // Calendar |
|---|
| 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? |
|---|
| 105 | @calendar-date-pressed-background-color: @pressed-background-color; |
|---|
| 106 | @calendar-date-selected-border-color: @selected-border-color; |
|---|
| 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; |
|---|
| 111 | @calendar-button-pressed-border-color: @pressed-border-color; |
|---|
| 112 | |
|---|
| 113 | |
|---|
| 114 | // ProgressBar |
|---|
| 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. |
|---|
| 119 | |
|---|
| 120 | // TimePicker |
|---|
| 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; |
|---|
| 125 | @timepicker-value-hovered-text-color: @hovered-text-color; |
|---|
| 126 | @timepicker-arrow-hovered-background-color: @minor-selected-color; |
|---|
| 127 | |
|---|
| 128 | // ColorPalette |
|---|
| 129 | @colorpalette-background-color: @container-background-color; |
|---|
| 130 | @swatch-border-color: @minor-border-color; |
|---|
| 131 | @swatch-hovered-border-color: #000; |
|---|
| 132 | @swatch-selected-border-color: #000; |
|---|
| 133 | |
|---|
| 134 | // Dialog |
|---|
| 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; |
|---|
| 138 | |
|---|
| 139 | // BorderContainer |
|---|
| 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 |
|---|
| 142 | |
|---|
| 143 | // Toolbar |
|---|
| 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 |
|---|
| 146 | @toolbar-button-border-radius: 2px; // Rounded corner radius for buttons for buttons in toolbar |
|---|
| 147 | |
|---|
| 148 | // DnD |
|---|
| 149 | @dnd-avatar-background-color: @container-background-color; // Background color of little Dialog-type box indicating dragged items |
|---|
| 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 |
|---|
| 152 | @dnd-dropseparator-color: @base-border-color; // Color of line indicating that user is about to drop between items A & B |
|---|
| 153 | |
|---|
| 154 | // Document level |
|---|
| 155 | @document-text-color: #131313; // Text color for document itself (text outside of widgets) |
|---|
| 156 | @document-shadedsection-background-color: @bar-background-color;// background color used for <pre>, <code>, and table header rows |
|---|
| 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"; |
|---|
| 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 | } |
|---|
