// Import the correct set of variables - dark by default but applications can decide by overwriting // the variable to be 'light' @import 'moonstone-variables-@{moon-theme}.less'; // default value @moon-theme: 'dark'; // App // --------------------------------------- @moon-app-keepout: 18px; @moon-neutral-bg-color: @moon-light-gray; @moon-neutral-text-color: @moon-dark-gray; @moon-neutral-child-text-color: @moon-dark-gray; @moon-neutral-scroller-icon: url(../images/LightTheme_Icons/scroller_icon.png); @moon-neutral-border-color: @moon-dark-gray; @moon-neutral-icon-color: @moon-dark-gray; @moon-neutral-button-text-color: @moon-dark-gray; @moon-neutral-button-bg-color: @moon-white; @moon-neutral-button-disabled-text-color: @moon-dark-gray; @moon-neutral-button-disabled-bg-color: @moon-white; @moon-neutral-thumb-bg-color: rgba(50, 50, 50, 0.8); // Icon Font // --------------------------------------- @moon-icon-plus: "\0002B"; @moon-icon-minus: "\0002D"; @moon-icon-arrowhookleft: "\021A9"; @moon-icon-arrowhookright: "\021AA"; @moon-icon-ellipsis: "\022EF"; @moon-icon-check: "\02713"; @moon-icon-circle: "\0EFFDB"; @moon-icon-stop: "\0EFFDC"; @moon-icon-play: "\0EFFDD"; @moon-icon-pause: "\0EFFDE"; @moon-icon-forward: "\0EFFDF"; @moon-icon-backward: "\0EFFE0"; @moon-icon-skipforward: "\0EFFE1"; @moon-icon-skipbackward: "\0EFFE2"; @moon-icon-pauseforward: "\0EFFE3"; @moon-icon-pausebackward: "\0EFFE4"; @moon-icon-pausejumpforward: "\0EFFE5"; @moon-icon-pausejumpbackward: "\0EFFE6"; @moon-icon-jumpforward: "\0EFFE7"; @moon-icon-jumpbackward: "\0EFFE8"; @moon-icon-denselist: "\0EFFE9"; @moon-icon-bulletlist: "\0EFFEA"; @moon-icon-list: "\0EFFEB"; @moon-icon-drawer: "\0EFFEC"; @moon-icon-arrowlargedown: "\0EFFED"; @moon-icon-arrowlargeup: "\0EFFEE"; @moon-icon-arrowlargeleft: "\0EFFEF"; @moon-icon-arrowlargeright: "\0EFFF0"; @moon-icon-arrowsmallup: "\0EFFF1"; @moon-icon-arrowsmalldown: "\0EFFF2"; @moon-icon-arrowsmallleft: "\0EFFF3"; @moon-icon-arrowsmallright: "\0EFFF4"; @moon-icon-closex: "\0EFFF5"; @moon-icon-search: "\0EFFF6"; @moon-icon-rollforward: "\0EFFF7"; @moon-icon-rollbackward: "\0EFFF8"; @moon-icon-exitfullscreen: "\0EFFF9"; @moon-icon-fullscreen: "\0EFFFA"; @moon-icon-arrowextend: "\0F0021"; @moon-icon-arrowshrink: "\0F0022"; @moon-icon-flag: "\0F0023"; @moon-icon-funnel: "\0F0024"; @moon-icon-trash: "\0F0025"; @moon-icon-star: "\0F0028"; @moon-icon-hollowstar: "\0F0029"; @moon-icon-halfstar: "\0F002A"; @moon-icon-gear: "\0F002B"; @moon-icon-plug: "\0F002C"; @moon-icon-lock: "\0F002D"; // Font Sizes // --------------------------------------- @moon-superscript-text-size: 24px; @moon-large-text-size: 48px; @moon-pre-text-size: 24px; @moon-header-font-size: 120px; @moon-super-header-font-size: 33px; @moon-sub-header-font-size: 30px; @moon-sub-header-below-font-size: 27px; @moon-small-header-font-size: 60px; @moon-small-header-sub-header-font-size: @moon-sub-header-below-font-size; @moon-body-font-size: 33px; @moon-item-font-size: 33px; @moon-popup-header-font-size: 72px; @moon-popup-sub-header-font-size: 27px; @moon-popup-content-font-size: 30px; @moon-expandable-value-font-size: 27px; @moon-expandable-client-item-font-size: 27px; @moon-divider-font-size: 24px; @moon-button-large-font-size: 36px; @moon-button-small-font-size: 27px; @moon-clock-minute-font-size: 60px; @moon-clock-text-font-size: 54px; @moon-clock-meridiem-font-size: 24px; @moon-clock-top-font-size: 66px; @moon-clock-bottom-font-size: 27px; @moon-calendar-day-small-font-size: 24px; @moon-non-latin-superscript-text-size: 24px; @moon-non-latin-large-text-size: 48px; @moon-non-latin-pre-text-size: 24px; @moon-non-latin-popup-header-font-size: 66px; @moon-non-latin-sub-header-font-size: 33px; @moon-non-latin-super-header-font-size: 33px; @moon-non-latin-body-font-size: 27px; @moon-non-latin-divider-font-size: 27px; @moon-non-latin-button-large-font-size: 36px; @moon-non-latin-button-small-font-size: 27px; @moon-non-latin-header-font-size: 102px; @moon-non-latin-expandable-client-item-font-size: 27px; // Other Font Properties // --------------------------------------- @moon-font-family: "MuseoSans 700"; @moon-font-family-light: "MuseoSans 300"; @moon-font-family-small: "MuseoSans 500"; @moon-font-family-bold: "MuseoSans 900"; @moon-alt-font-family: "Moonstone Miso"; @moon-non-latin-font-family: "Moonstone LG Display"; @moon-non-latin-font-family-light: "Moonstone LG Display Light"; @moon-non-latin-font-family-bold: "Moonstone LG Display Bold"; @moon-header-font-family: @moon-alt-font-family; @moon-header-font-weight: normal; @moon-header-letter-spacing: normal; @moon-header-font-style: normal; @moon-header-line-height: 1.3em; @moon-medium-header-line-height: 1.3em; @moon-small-header-line-height: 1.3em; @moon-non-latin-header-text-line-height: 1.5em; @moon-non-latin-medium-header-line-height: 1.5em; @moon-non-latin-small-header-line-height: 1.5em; @moon-popup-header-font-family: @moon-header-font-family; @moon-popup-header-font-weight: normal; @moon-popup-header-letter-spacing: normal; @moon-popup-header-font-style: normal; @moon-popup-header-line-height: normal; @moon-sub-header-font-family: @moon-font-family; @moon-sub-header-font-weight: normal; @moon-sub-header-letter-spacing: 0; @moon-sub-header-font-style: normal; @moon-sub-header-line-height: 2em; @moon-sub-header-below-font-family: @moon-font-family-light; @moon-super-header-font-family: @moon-alt-font-family; @moon-super-header-font-weight: normal; @moon-super-header-letter-spacing: normal; @moon-super-header-font-style: normal; @moon-super-header-line-height: normal; @moon-body-font-family: @moon-font-family-light; @moon-body-font-weight: normal; @moon-body-letter-spacing: 0; @moon-body-font-style: normal; // Body text line heights must be speified in px, since moon.ExpandableText requires precise line measurement @moon-body-line-height: @moon-body-font-size + 6; @moon-non-latin-body-line-height: 1.7em; @moon-divider-font-family: "MuseoSans 700 Italic"; @moon-divider-font-weight: normal; @moon-divider-font-style: normal; @moon-divider-letter-spacing: 0; @moon-expandable-value-font-family: @moon-font-family-light; @moon-expandable-value-font-weight: normal; @moon-expandable-value-font-style: normal; @moon-button-font-family: "Moonstone Miso Bold"; @moon-button-font-weight: normal; @moon-button-font-style: normal; @moon-button-letter-spacing: normal; @moon-icon-font-family: "Moonstone Icons"; @moon-icon-font-size: 72px; @accordion-sub-menu-line-height: 1.7em; @moon-invalid-text-color: @moon-red; // Popup // --------------------------------------- @moon-popup-padding: 39px; // Drawer // --------------------------------------- @moon-drawers-activator-bar-height: 24px; @moon-drawer-nub-width: 60px; @moon-drawer-nub-height: 36px; // Images // --------------------------------------- @moon-checkbox-icon-height: 36px; @moon-checkbox-icon-width: 24px; @moon-checkbox-width: 36px; @moon-formcheckbox-image-width: 48px; @moon-formcheckbox-image-height: 48px; @moon-close-image-height: 36px; @moon-close-image-width: 36px; // Icon Sizes // --------------------------------------- @moon-icon-size: 48px; @moon-icon-small-size: 36px; @moon-icon-button-size: 84px; @moon-icon-button-small-size: 60px; @moon-icon-sprite-size: (@moon-icon-button-size - (@moon-button-border-width * 2)); @moon-icon-sprite-small-size: (@moon-icon-button-small-size - (@moon-button-border-width * 2)); @moon-icon-tap-area-offset: -(@moon-button-border-width + (@moon-button-small-tap-area-height - @moon-button-small-height) / 2); @moon-icon-margin: 12px; // Spotlight // --------------------------------------- @moon-spotlight-outset: 12px; // Button // --------------------------------------- @moon-button-height: 84px; @moon-button-small-height: 60px; @moon-button-border-width: 6px; @moon-button-border-radius: 9999px; @moon-button-small-tap-area-height: 78px; @moon-button-large-text-size: 30px; @moon-button-small-text-size: 24px; @moon-button-large-min-width: 180px; @moon-button-small-min-width: 132px; @moon-button-h-padding: 27px; @moon-button-small-h-padding: 18px; @moon-button-pressed-scale: 0.05; // Header // --------------------------------------- @moon-header-height-large: 360px; @moon-header-height-medium: 240px; @moon-header-height-small: 120px; @moon-header-indent-width: 18px; @moon-header-title-subtitle-gap: 36px; @moon-header-border-top-width: 3px; @moon-header-border-bottom-width: 6px; @moon-input-header-icon: url(../images/input-header-icon.png); // Input // --------------------------------------- @moon-input-border-width: 6px; @moon-input-height:60px; // Pickers // --------------------------------------- @moon-picker-button-width: 60px; @moon-picker-min-width: 60px; @moon-picker-min-padding: 6px; // Expandable Pickers // --------------------------------------- @moon-expandable-caret-icon-font-size: 48px; @moon-expandable-client-item-line-height: 45px; // Expandable Text // --------------------------------------- @moon-expandable-text-button-padding: 42px; // Progress Bar // --------------------------------------- @moon-progress-bar-height: 12px; // Slider Knob // --------------------------------------- @moon-slider-knob-width:@moon-button-small-height; @moon-slider-knob-height:@moon-button-small-height; @moon-slider-knob-spotlight-width: 90px; @moon-slider-knob-spotlight-height: 90px; // Items // --------------------------------------- @moon-item-height: 60px; @moon-item-vertical-padding: 3px; @moon-item-line-height: @moon-item-height - (@moon-item-vertical-padding * 2); @moon-item-indent: 36px; // Divider @moon-divider-border-width: 3px; // Breadcrumb // --------------------------------------- @moon-breadcrumb-width: 96px; @moon-breadcrumb-text-size: 36px; // Selectable Item // --------------------------------------- @moon-selectable-item-indicator-width: 18px; @moon-selectable-item-indicator-height: 18px; @moon-radio-item-gap: 12px; @moon-radio-item-indicator-border: 3px; // Spinner // --------------------------------------- @moon-spinner-size: 72px; @moon-spinner-image: url(../images/spinner.gif); @moon-spinner-image-width: 60px; @moon-spinner-image-height: 60px; @moon-spinner-time: 1.25s; // Length of the spinner animation @moon-spinner-ball-height: 15%; // Height of the ball container @moon-spinner-ball-width: @moon-spinner-ball-height; // Height of the ball container @moon-spinner-ball-disatance: 20%; // Distance of the ball from the center @moon-spinner-ball-angle: 13deg; // Ball impact angle (should be set so there is no ball overlap) // ToggleSwitch // --------------------------------------- @moon-toggleswitch-height: 30px; @moon-toggleswitch-width: 60px; @moon-toggleswitch-margin: @moon-toggleswitch-width + @moon-spotlight-outset; // ToggleButton // --------------------------------------- @moon-toggle-button-switch-border-width: 3px; @moon-toggle-button-switch-width: 15px; @moon-toggle-button-text-switch-gutter: 18px; // Tooltip // --------------------------------------- @moon-tooltip-height: 68px; @moon-tooltip-label-height: 30px; // IntegerPicker // --------------------------------------- @moon-integer-picker-radius: 48px; @moon-integer-picker-height: 96px; @moon-integer-picker-overlay-height: 30px; @moon-integer-picker-shadow-width: 6px; @moon-integer-picker-caret-font-size: 72px; // Grid Dimensions // --------------------------------------- @moon-grid-gutter-width: 18px; @moon-grid-gutter-height: 0px; @moon-grid-column-width: 60px; @moon-grid-row-height: 42px; // ObjectActionDecorator // --------------------------------------- @moon-objaction-decorator-display: table-cell; // Video Player // --------------------------------------- @moon-video-player-icon-text-gutter-width: 12px; @moon-video-player-info-description-text-size: 36px; @moon-video-player-info-text-size: 15px; @moon-video-player-side-padding: 72px; @moon-video-player-transport-slider-knob-size: 48px; @moon-video-player-transport-slider-height: 84px; @moon-video-player-transport-slider-tap-area: 81px; @moon-icon-playpause-font-size: 216px; @moon-icon-main-control-font-size: 192px; @moon-icon-arrowextendshrink-font-size: 108px; @moon-video-feedback-icon-width: 36px; @moon-video-feedback-icon-font-size: 120px; @moon-video-feedback-icon-line-height: 30px; @moon-video-feedback-icon-pausejumpbackward-width: 36px; @moon-video-feedback-icon-pausejumpforward-width: 36px; @moon-video-feedback-icon-play-width: 24px; @moon-video-feedback-icon-pause-width: 24px; @moon-video-feedback-icon-font-play-size: 72px; @moon-video-feedback-icon-font-pause-size: 72px; @moon-video-icon-exitfullscreen-font-size: 96px; @moon-video-icon-exitfullscreen-line-height: 84px; // Caret // --------------------------------------- @moon-caret-black-large-up-icon: url(../images/caret-black-large-up-icon.png); @moon-caret-black-large-down-icon: url(../images/caret-black-large-down-icon.png); @moon-caret-black-small-up-icon: url(../images/caret-black-small-up-icon.png); @moon-caret-black-small-down-icon: url(../images/caret-black-small-down-icon.png); @moon-caret-black-small-up-image: url(../images/caret-black-small-up-image.png); @moon-caret-black-small-down-image: url(../images/caret-black-small-down-image.png); @moon-caret-white-small-down-image: url(../images/caret-white-small-down-image.png); // ContextualPopupButton // --------------------------------------- @moon-contextual-arrow: url(../images/contextual-arrow.png); @moon-contextual-arrow-spotlight: url(../images/contextual-arrow-spotlight.png); @moon-contextual-arrow-rtl: url(../images/contextual-arrow-rtl.png); @moon-contextual-arrow-spotlight-rtl: url(../images/contextual-arrow-spotlight-rtl.png); @moon-contextual-arrow-padding: 48px; @moon-contextual-arrow-font-size: 60px; // ContextualPopupButton // --------------------------------------- @moon-contextual-popup-border-radius: 15px; @moon-contextual-popup-padding: 18px; @moon-contextual-popup-gutter: 36px; @moon-contextual-popup-nub-height: 18px; // Panel // ---------------------------------------- @moon-panel-breadcrumb-height: 360px; @moon-panel-breadcrumb-inner-width: 210px; // Panels // ---------------------------------------- @moon-panels-handle-width: 132px; @moon-panel-handle-icon-font-size: 144px; // Progress Button // ---------------------------------------- @moon-progress-button-bar-border-radius: @moon-button-border-radius; @moon-progress-button-border-width: @moon-button-border-width;