@default-blue-button-color: white; @default-blue-button-background-color: #366edf; @default-blue-button-background-image: -webkit-gradient(linear, left top, left bottom, from(#7a9de9), to(#2362dd), color-stop(0.5, #366edf), color-stop(0.5, #215fdc)); @default-blue-button-background-image-gecko: -moz-linear-gradient(top, #7a9de9 0%, #366edf 50%, #215fdc 50%, #2362dd 100%); @mbl-color-blue-45: -webkit-gradient(linear, left top, right bottom, from(#7a9de9), to(#2362dd), color-stop(0.5, #366edf), color-stop(0.5, #215fdc)); @mbl-color-default-45: -webkit-gradient(linear, left top, right bottom, from(#f7fbf7), to(#cecfd6), color-stop(0.5, #ced3ce)); @mbl-color-default-sel-45: -webkit-gradient(linear, left top, right bottom, from(#088eef), to(#0851ad), color-stop(0.5, #0869c6)); @mbl-color-blue-45-gecko: -moz-linear-gradient(top left, #7a9de9 0%, #366edf 50%, #215fdc 50%, #2362dd 100%); @mbl-color-default-45-gecko: -moz-linear-gradient(top left, #f7fbf7 0%, #ced3ce 50%, #cecfd6 100%); @mbl-color-default-sel-45-gecko: -moz-linear-gradient(top left, #088eef 0%, #0869c6 50%, #0851ad 100%); @default-button-color: black; @default-button-background-color: #ced3ce; @default-button-background-image: -webkit-gradient(linear, left top, left bottom, from(#f7fbf7), to(#cecfd6), color-stop(0.5, #ced3ce)); @default-button-background-image-gecko: -moz-linear-gradient(top, #f7fbf7 0%, #ced3ce 50%, #cecfd6 100%); @default-button-border-radius: 6px; @default-button-selected-color: white; @default-button-selected-background-color: #0869c6; @default-button-selected-background-image: -webkit-gradient(linear, left top, left bottom, from(#088eef), to(#0851ad), color-stop(0.5, #0869c6)); @default-button-selected-background-image-gecko: -moz-linear-gradient(top, #088eef 0%, #0869c6 50%, #0851ad 100%); @default-selected-color: white; @default-selected-background-color: #0869c6; @default-selected-background-image: -webkit-gradient(linear, left top, left bottom, from(#088eef), to(#0851ad), color-stop(0.5, #0869c6)); @default-selected-background-image-gecko: -moz-linear-gradient(top, #088eef 0%, #0869c6 50%, #0851ad 100%); @heading-background-color: #424142; @heading-background-image: -webkit-gradient(linear, left top, left bottom, from(#4a4d52), to(#292c31)); @heading-background-image-gecko: -moz-linear-gradient(top, #4a4d52 0%, #292c31 100%); @heading-border-top-color: #63696b; @heading-border-bottom-color: #292c31; .default-button-border-styles () { border-color: #9cacc0; border-radius: @default-button-border-radius; } .mblToolBarButtonBodyInLeftArrow-styles () { border-left-width: 0; } .mblToolBarButtonBodyInRightArrow-styles () { border-right-width: 0; } // background styles of form controls @mbl-button-background-image: @default-button-background-image; @mbl-button-selected-background-image: @default-button-selected-background-image; @mbl-blue-button-background-image: @default-blue-button-background-image; @mbl-blue-button-selected-background-image: @default-button-selected-background-image; @mbl-red-button-background-image: -webkit-gradient(linear, left top, left bottom, from(#fa9d58), to(#ee4115), color-stop(0.5, #ff4d25), color-stop(0.5, #ed4d15)); @mbl-red-button-selected-background-image: @default-button-selected-background-image; @mbl-button-checked-background-image: @default-button-background-image; // background styles of form controls (for gecko) @mbl-button-background-image-gecko: @default-button-background-image-gecko; @mbl-button-selected-background-image-gecko: @default-button-selected-background-image-gecko; @mbl-blue-button-background-image-gecko: @default-blue-button-background-image-gecko; @mbl-blue-button-selected-background-image-gecko: @default-button-selected-background-image-gecko; @mbl-red-button-background-image-gecko: -moz-linear-gradient(top, #fa9d58 0%, #ff4d25 50%, #ed4d15 50%, #ee4115 100%); @mbl-red-button-selected-background-image-gecko: @default-button-selected-background-image-gecko; @mbl-button-checked-background-image-gecko: @default-button-background-image-gecko; // common.less .mobile-body-styles () { background-color: #dedfde; font-family: Helvetica; font-size: 18px; } .mblView-styles () { color: black; } .mblColorBlue-styles () { color: @default-blue-button-color; background-color: @default-blue-button-background-color; background-image: @default-blue-button-background-image; } .mblColorDefault-styles () { color: @default-button-color; background-color: @default-button-background-color; background-image: @default-button-background-image; } .mblColorDefaultSel-styles () { color: @default-button-selected-color; background-color: @default-button-selected-background-color; background-image: @default-button-selected-background-image; } // Heading.less .mblHeading-styles () { background-image: @heading-background-image; border-top: 1px solid @heading-border-top-color; border-bottom: 1px solid @heading-border-bottom-color; color: white; } // ToolBarButton.less @mbl-tool-bar-button-body-border-radius: 5px; // .mblToolBarButton-styles () { } .mblToolBarButtonArrow-styles () { -webkit-transform: scale(0.7, 1.0) rotate(45deg); border: 1px solid #9cacc0; } .mblToolBarButtonArrowInHeading-styles () { } .mblToolBarButtonHasLeftArrowInHeading-styles () { } .mblToolBarButtonHasLeftArrowInHeading-compat-gecko () { } .mblToolBarButtonHasRightArrowInHeading-styles () { } .mblToolBarButtonHasRightArrowInHeading-compat-gecko () { } .mblToolBarButtonArrowInLeftArrow-styles () { left: 1px; border: 1px inset #9cacc0; } .mblToolBarButtonArrowInRightArrow-styles () { right: 0px; border: 1px inset #9cacc0; } .mblToolBarButtonBody-styles () { border: 1px outset #9cacc0; } .mblToolBarButtonBodyInHeading-styles () { border: 1px inset #9cacc0; } .mblToolBarButtonBodyInHeading-compat-gecko () { } // RoundRect.less & RoundRectList.less @mbl-round-rect-border-color: #c6c7c6; @mbl-round-rect-border-radius: 6px; @mbl-round-rect-background-color: white; @mbl-round-rect-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.35); // .mblRoundRect-styles () { color: black; } // EdgeToEdgeCategory.less .mblEdgeToEdgeCategory-styles () { height: 29px; border-top: 1px solid #313439; border-bottom: 1px solid #adaaad; background-color: white; color: #7b7d84; line-height: 29px; } // RoundRectCategory.less .mblRoundRectCategory-styles () { color: black; text-shadow: rgba(255, 255, 255, 1) 0 1px 0; } // EdgeToEdgeList.less .mblEdgeToEdgeList-styles () { background-color: white; } .mblEdgeToEdgeList-LastListItem-styles () { border-bottom-width: 0; } // ListItem.less @mbl-list-item-height: 59px; // .mblListItem-styles () { border-bottom: 1px solid #dedfde; font-size: 18px; color: black; } .mblListItemSelected-styles () { color: @default-selected-color; background-image: @default-selected-background-image; } .mblListItemLabelSelected-styles () { background-color: #0869c6; } .mblListItemChecked-styles () { } .mblListItemRightText-styles () { color: black; margin-top: 19px; } .mblListItemSubText-styles () { font-size: 14px; color: #7b7d48; } // Switch.less @mbl-switch-bg-left-background-color: #088eef; @mbl-switch-bg-left-background-image: -webkit-gradient(linear, left top, left bottom, from(#088eef), to(#0851ad), color-stop(0.5, #0869c6)); @mbl-switch-bg-right-background-color: #f7f3f7; @mbl-switch-bg-right-background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f3f7), to(#cec5d6), color-stop(0.5, #ced3ce)); @mbl-switch-knob-background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#999999), color-stop(0.5, #bbbbbb)); // @mbl-switch-bg-left-background-image-gecko: -moz-linear-gradient(top, #088eef 0%, #0869c6 50%, #0851ad 100%); @mbl-switch-bg-right-background-image-gecko: -moz-linear-gradient(top, #f7f3f7 0%, #ced3ce 50%, #cec5d6 100%); @mbl-switch-knob-background-image-gecko: -moz-linear-gradient(top, #fafafa 0%, #bbbbbb 50%, #999999 100%); @mbl-switch-square-border-radius: 6px; // .mblSwitchBg-styles () { border: rgba(176,176,176,0.5) 1px inset; } .mblSwitchKnob-styles () { border: rgba(156,172,192,0.5) 1px outset; } // Button.less .mblButton-styles () { .default-button-border-styles; color: black; font-size: 16px; } .mblButtonSelected-styles () { color: white; } .mblButton-mblBlueButton-styles () { color: white; } .mblButton-mblRedButton-styles () { color: white; } // CheckBox.less .mblCheckBox-styles () { border-color: #9cacc0; border-radius: 3px; } .mblCheckBoxChecked-after-styles () { border-color: #0851ad; } .mblCheckBoxChecked-mblCheckBoxSelected-after-styles () { border-color: white; } // ComboBox.less @mbl-combo-box-popup-box-shadow: none; // .dijitPopup-styles () { border-radius: 12px; } .mblComboBoxMenu-styles () { border-radius: 12px; background-color: black; } .mblComboBoxMenuItem-styles () { border-color: black; color: white; } .mblComboBoxMenuItemSelected-styles () { background-image: @default-selected-background-image; color: white; } // IconContainer.less .mblIconItemSub-styles () { background-color: white; color: black; } .mblIconArea-styles () { margin-top: 5px; margin-bottom: 5px; width: 88px; } .mblIconItemDeleteIcon-styles () { top: -4px; left: 2px; } // RadioButton.less .mblRadioButton-styles () { border-color: #9cacc0; } .mblRadioButtonChecked-after-styles () { border-color: #0851ad; } .mblRadioButtonChecked-Selected-after-styles () { border-color: white; } // Slider.less @mbl-slider-bar-border-radius: @default-button-border-radius; @mbl-slider-knob-border-radius: @default-button-border-radius; // .mblSlider-styles () { border-color: #b0b0b0; } .mblSliderHandle-styles () { border-color: #9d9d9d; } // TabBar.less .mblTabBar-styles () { text-shadow: none; } // barType="tabBar" .mblTabBarTabBar-styles () { background-image: -webkit-gradient(linear, left top, left bottom, from(#181818), to(#100c10)); } .mblTabBarTabBar-compat () { background-color: #212421; } .mblTabBarTabBarButton-styles () { } .mblTabBarTabBarButtonIconArea-styles () { } .mblTabBarTabBarButtonLabel-styles () { color: #979797; } .mblTabBarTabBarButtonSelected-styles () { background-color: #404040; background-image: -webkit-gradient(linear, left top, left bottom, from(#484848), to(#242424), color-stop(0.5, #353535)); } .mblTabBarTabBarButtonLabelSelected-styles () { color: white; } // barType="segmentedControl" @mbl-tab-bar-segmented-control-border-radius: @default-button-border-radius; // .mblTabBarSegmentedControl-styles () { } .mblTabBarSegmentedControlButton-styles () { border-style: solid; border-color: #7b7d84 #182018 black #393c39; color: @default-button-color; background-image: @default-button-background-image; } .mblTabBarSegmentedControlButton-compat-gecko () { } .mblTabBarSegmentedControlButtonSelected-styles () { color: @default-button-selected-color; background-image: @default-button-selected-background-image; } // barType="standardTab" .mblTabBarStandardTab-styles () { } .mblTabBarStandardTabButton-styles () { color: @default-button-color; background-color: @default-button-background-color; /* TODO: to compat */ background-image: @default-button-background-image; } .mblTabBarStandardTabButtonIconArea-styles () { } .mblTabBarStandardTabButtonLabel-styles () { } .mblTabBarStandardTabButtonSelected-styles () { color: @default-button-selected-color; background-color: @default-button-selected-background-color; background-image: @default-button-selected-background-image; } .mblTabBarStandardTabButtonLabelSelected-styles () { } // barType="tallTab" .mblTabBarTallTab-styles () { background-image: -webkit-gradient(linear, left top, left bottom, from(#2d2d2d), to(#000000)); } .mblTabBarTallTabButton-styles () { background-color: #212421; background-image: none; } .mblTabBarTallTabButton-FirstChild-styles () { } .mblTabBarTallTabButton-LastChild-styles () { } .mblTabBarTallTabButtonIconArea-styles () { } .mblTabBarTallTabButtonLabel-styles () { } .mblTabBarTallTabButtonSelected-styles () { background-color: #636363; background-image: none; } .mblTabBarTallTabButtonLabelSelected-styles () { } // TextArea.less .mblTextArea-styles () { .default-button-border-styles; } // TextBox.less .mblTextBox-styles () { .default-button-border-styles; } // ToggleButton.less .mblToggleButton-styles () { .default-button-border-styles; font-size: 16px; color: black; } .mblToggleButtonSelected-styles () { color: white; } .mblToggleButtonChecked-styles () { color: black; } .mblToggleButtonChecked-after-styles () { border-color: #0851ad; } .mblToggleButtonCheckedSelected-styles () { color: white; } .mblToggleButtonCheckedSelected-after-styles () { border-color: white; } // Overlay.less .mblOverlay-styles () { background-color: #000000; background-image: none; } .mblOverlay-compat () { } .mblOverlay-compat-gecko () { } // Tooltip.less @mbl-tooltip-border-radius: 6px; // .mblTooltip-styles () { border-color: #adaaad; border-radius: @mbl-tooltip-border-radius; background-color: #424142; background-image: -webkit-gradient(linear, left top, left bottom, from(#4a4d52), to(#292c31)); } .mblTooltipBubble-styles () { background-color: #000000; background-image: none; color: #ffffff; } .mblTooltipInnerArrow-Bubble-Above-styles () { border-bottom-color: #000000; } .mblTooltipInnerArrow-Bubble-Below-styles () { border-top-color: #000000; } .mblTooltipInnerArrow-Bubble-After-styles () { border-left-color: #000000; } .mblTooltipInnerArrow-Bubble-Before-styles () { border-right-color: #000000; } .mblTooltipArrow-Before-styles () { border-left-width: 0; border-right-color: #adaaad; } .mblTooltipArrow-After-styles () { border-right-width: 0; border-left-color: #adaaad; } .mblTooltipArrow-Above-styles () { border-top-width: 0; border-bottom-color: #adaaad; } .mblTooltipArrow-Below-styles () { border-bottom-width: 0; border-top-color: #adaaad; } .mblTooltipInnerArrow-Before-styles () { border-left-width: 0; border-right-color: #4a4d52; } .mblTooltipInnerArrow-After-styles () { border-right-width: 0; border-left-color: #4a4d52; } .mblTooltipInnerArrow-Above-styles () { border-top-width: 0; border-bottom-color: #4a4d52; } .mblTooltipInnerArrow-Below-styles () { border-bottom-width: 0; border-top-color: #292c31; } .mblTooltip-Heading-styles () { border-top: 1px solid transparent; border-bottom: 1px solid transparent; background-color: transparent; background-image: none; } .mblTooltip-Heading-compat () { } .mblTooltip-Heading-ToolbarButton-styles () { } .mblTooltip-Heading-ToolbarButton-compat () { } // Accordion.less .mblAccordion-styles () { border-color: #9cacc0; } .mblAccordionTitle-styles () { border-top: 1px outset #9cacc0; background-color: white; } .mblAccordionTitle-compat () { } .mblAccordionTitle-compat-gecko () { } .mblAccordionTitleSelected-styles () { border-bottom: 1px outset #9cacc0; background-image: @default-selected-background-image; color: white; } .mblAccordionTitleSelected-compat () { background-color: #0869c6; } .mblAccordionTitleSelected-compat-gecko () { background-image: @default-selected-background-image-gecko; } .mblAccordionTitleAnchor-styles () { color: #000000; } .mblAccordionTitleAnchorSelected-styles () { color: white; } // SimpleDialog.less @mbl-simple-dialog-border-radius: 6px; // .mblSimpleDialog-styles () { padding: 8px; width: 262px; } .mblSimpleDialogDecoration-styles () { background-color: #000000; border: none; color: white; } .mblSimpleDialogDecoration-compat () { } .mblSimpleDialogDecoration-compat-gecko () { } .mblSimpleDialogTitle-styles () { margin: 7px 0 14px; width: 262px; } .mblSimpleDialogText-styles () { margin: 7px 0 14px; width: 262px; } // IconMenu.less @mbl-icon-menu-border-radius: 6px; @mbl-icon-menu-item-border-radius: 0; // .mblIconMenu-styles () { padding: 8px; background-color: #000000; border: none; } .mblIconMenu-compat () { } .mblIconMenu-compat-gecko () { } .mblIconMenuItem-styles () { border-left: 1px solid #000000; border-bottom: 1px solid #000000; } .mblIconMenuItemAnchor-styles () { font-size: 16px; color: white; } .mblIconMenuItemSel-styles () { background-image: -webkit-gradient(linear, left top, left bottom, from(#088eef), to(#0851ad), color-stop(0.5, #0869c6)); color: white; } .mblIconMenuItemSel-compat () { background-color: #0869c6; } .mblIconMenuItemSel-compat-gecko () { background-image: -moz-linear-gradient(top, #088eef 0%, #0869c6 50%, #0851ad 100%); } // dijit.Calendar .dijitCalendar-styles () { border: none 0 transparent; background-color: white; } .dijitCalendar-thead-styles () { background-image: -webkit-gradient(linear, left top, left bottom, from(#63696b), to(#182021)); } .dijitCalendar-thead-compat () { background-image: url(compat/calendar-month-bg.png); } .dijitCalendar-thead-compat-gecko () { background-image: -moz-linear-gradient(top, #63696b 0%, #182021 100%); } .dijitCalendarMonthLabel-styles () { color: white; font-size: 18px; } .dijitCalendarMonthMenu-styles () { border: 1px solid black; border-radius: 6px; background-color: white; } .dijitCalendarMonthMenu-compat-ff3 () { -moz-border-radius: 6px; } .dijitCalendarMonthMenu-Label-styles () { color: black; } .dijitCalendarDecrease-styles () { border-right-color: white; } .dijitCalendarIncrease-styles () { border-left-color: white; } .dijitCalendarDayLabelTemplate-styles () { background-color: #6b7173; font-size: 14px; color: white; } .dijitCalendarDateTemplate-styles () { border-right: 1px solid lightGrey; background-color: white; color: black; } .dijitCalendarDateTemplate-LastChild-styles () { border-right: none; } .dijitCalendarDateLabel-DateTemplate-styles () { border: none; } .dijitCalendarDateLabel-PrevMonth-styles () { background-color: #cecbce; color: #adaeb5; } .dijitCalendarDateLabel-Hovered-styles () { color: grey; } .dijitCalendarDateLabel-Selected-styles () { background-image: @default-selected-background-image; color: white; text-shadow: rgba(0,0,0,0.4) 0 1px 0; } .dijitCalendarDateLabel-Selected-compat () { background-image: url(compat/calendar-datelabel-sel-bg.png); } .dijitCalendarDateLabel-Selected-compat-gecko () { background-image: @default-selected-background-image-gecko; } .dijitCalendarDateLabel-Active-styles () { background-image: @default-selected-background-image; } .dijitCalendarDateLabel-Active-compat () { background-image: url(compat/calendar-datelabel-sel-bg.png); } .dijitCalendarDateLabel-Active-compat-gecko () { background-image: @default-selected-background-image-gecko; } .dijitCalendarYearLabel-styles () { padding: 0; background-image: -webkit-gradient(linear, left top, left bottom, from(#63696b), to(#182021)); } .dijitCalendarYearLabel-compat () { background-image: url(compat/calendar-year-bg.png); } .dijitCalendarYearLabel-compat-gecko () { background-image: -moz-linear-gradient(top, #63696b 0%, #182021 100%); } .dijitCalendarSelectedYear-styles () { color: white; font-size: 16px; } .dijitCalendarNextYear-styles () { padding: 1px 6px 3px 6px; color: white; font-size: 12px; } // SearchBox.less @mbl-searchbox-cancel-button-color: white; @mbl-searchbox-cancel-button-bg-color: black; .mblSearchBox-Cancel-Button-styles () { border-radius: 1em; } @mbl-searchbox-results-decoration-color: black; // ProgressBar.less .mblProgressBar-styles () { height: 22px; background-color: white; padding: 1px; } .mblProgressBarProgress-styles () { background-color: #298eff; height: 22px; } .mblProgressBarComplete-styles () { } .mblProgressBarNotStarted-styles () { } .mblProgressBarMsg-styles () { top: 2px; font-size: 18px; } .mblProgressBar-compat () { } .mblProgressBarProgress-compat () { } .mblProgressBar-compat-gecko () { } .mblProgressBarProgress-compat-gecko () { } // ValuePicker.less @mbl-value-picker-slot-button-background-image: -webkit-gradient(linear, left top, left bottom, from(#f7fbf7), to(#cecfd6), color-stop(0.5, #ced3ce)); @mbl-value-picker-slot-button-background-image-gecko: -moz-linear-gradient(top, #f7fbf7 0%, #ced3ce 50%, #cecfd6 100%); @mbl-value-picker-slot-button-radius: 3px; @mbl-value-picker-slot-input-area-backbground-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #fafafa), color-stop(0.2, #fafafa), color-stop(0.5, #ffffff), color-stop(0.9, #ffffff)); @mbl-value-picker-slot-input-area-backbground-image-geco: -moz-linear-gradient(top, #fafafa 10%, #fafafa 20%, #ffffff 50%, #ffffff 90%); .mblValuePickerSlot-style () { margin: 0 5px; } .mblValuePickerSlot-input-style () { font: 24px/44px Helvetica, sans-serif; }