/*! */ /* --- main text #333 ---- main background #f3f8fc --- navbar text #666 --- popover and modalview background #fff --- item borders #333 --- actionsheet and modalview button and footer tabstrip background #40464b --- actionsheet borders #7b7b7c --- actionsheet and button #fff --- primary button and counter background #009de0 --- selected state background #007cc0 --- list background #fafafa --- list hover background and modal view title #f0f0f0 --- list selected background #e6f2f9 --- list selected #fff --- list group title background #f7f7f7 --- list group title #004990 --- switch #979797 --- button group background #fff --- button (group) hover background #eaeaea --- button (group) selected background #007cc0 --- button (group) selected #fff --- button selected border #005483 --- footer tabstrip hover background #4c5358 */ @fiori-background: #f3f8fc; @fiori-text: #333; /*switch, popover, modalview*/ @fiori-secondary-background: #fff; @fiori-overlay-background: rgba(64,70,75,.6); /*navbar*/ @fiori-secondary-text: #666; /*buttons*/ @fiori-button-border: #bfbfbf; @fiori-button-background: #f2f2f2; @fiori-button-primary-background: #009de0; @fiori-button-selected-background: #007cc0; @fiori-button-selected-border: #005483; @fiori-button-hover-background: #eaeaea; /*actionsheet, popover and modalview buttons*/ @fiori-inverse-background: #40464b; @fiori-inverse-hover-background: #4c5358; @fiori-inverse-text: #fff; /*also listview and button selected text*/ @fiori-inverse-border: #7b7b7c; @switch-color: @fiori-inverse-text; @fiori-shadow: rgba(0,0,0,.2); /*listview*/ @fiori-list-background: #fafafa; @fiori-list-hover-background: #f0f0f0; /*also modalview title*/ @fiori-list-selected-background: #e6f2f9; @fiori-list-group-background: #f7f7f7; @fiori-list-group-text: #004990; @fiori-list-border: #ddd; .km-fiori { background-color: @fiori-background; } .km-fiori/*, .km-fiori .k-toolbar, .km-fiori .km-detail, .km-fiori .km-content*/ { color: @fiori-text; } .km-fiori .km-navbar { color: @fiori-secondary-text; } /* ActionSheet, Footer */ .km-fiori .km-footer, .km-fiori .km-actionsheet > li > a { background: @fiori-inverse-background; color: @fiori-inverse-text; } .km-fiori .km-footer .km-tabstrip .km-button:hover, .km-fiori .km-actionsheet > li > a:active, .km-fiori .km-actionsheet > li > a:hover, .km-fiori .km-actionsheet > li > .km-state-active { background: @fiori-inverse-hover-background; } .km-fiori .km-footer .km-tabstrip .km-button, .km-fiori .km-actionsheet > li > a { border-color: @fiori-inverse-border; } .km-fiori .km-actionsheet > .km-actionsheet-cancel > a { background: @fiori-button-primary-background; } /* Button */ .km-fiori .km-button { background: @fiori-button-background; border-color: @fiori-button-border; } .km-fiori .km-button:hover { background: @fiori-button-hover-background; } .km-fiori .km-button.km-state-active { background: @fiori-button-selected-background; } /* Badges and Details */ .km-fiori .km-detail, .km-fiori .k-toolbar { border-color: @fiori-button-border; } /* Switch */ .km-fiori .km-switch-wrapper { background-color: @switch-color; } .km-modalview, .km-fiori .km-switch-background/*, .km-fiori .k-slider-selection*/ { background: @fiori-secondary-background; } .km-fiori .km-switch-handle { background: @switch-color; border-color: @switch-color; } .km-fiori .km-switch-container, .km-fiori .km-switch-wrapper { border-color: @switch-color; } /* Slider */ /* ListView */ .km-fiori .km-list > li { background: @fiori-list-background; border-color: @fiori-button-border; } .km-fiori .km-list > li:hover, .km-navbar .km-view-title { background-color: @fiori-list-hover-background; } .km-fiori .km-listinset > li:first-child, .km-fiori .km-listgroupinset .km-list > li:first-child { border-color: @fiori-button-border; } .km-fiori .km-listinset > li:last-child, .km-fiori .km-listgroupinset .km-list > li:last-child { border-color: @fiori-button-border; } .km-fiori .km-listview-link:after { color: lighten(@fiori-text, 30); border-color: currentcolor; } .km-fiori .km-group-title { background: #f7f7f7; border-color: @fiori-list-border transparent #a4bdd4; color: @fiori-list-group-text; } .km-fiori .km-listview .km-state-active > .km-listview-link { color: @fiori-text; } .km-fiori .km-filter-wrap:before, .km-fiori .km-filter-reset .km-clear { color: @fiori-text; } .km-fiori .km-filter-wrap > input { color: @fiori-text; border-color: @fiori-button-border; } .km-fiori .km-filter-wrap > input:focus { border-color: #000; } /* ScrollView */ .km-fiori .km-pages li { background: @fiori-button-border; } /* Forms */ .km-fiori .km-list input[type=password], .km-fiori .km-list input[type=search], .km-fiori .km-list input[type=number], .km-fiori .km-list input[type=tel], .km-fiori .km-list input[type=url], .km-fiori .km-list input[type=email], .km-fiori .km-list input[type=month], .km-fiori .km-list input[type=color], .km-fiori .km-list input[type=week], .km-fiori .km-list input[type=date], .km-fiori .km-list input[type=time], .km-fiori .km-list input[type=datetime], .km-fiori .km-list input[type=datetime-local], .km-fiori .km-list input[type=text]:not(.k-input), .km-fiori .km-list select:not([multiple]), .km-fiori .km-list .k-dropdown-wrap, .km-fiori .km-list textarea, .km-fiori .km-list .k-dropdown-wrap .k-input { color: @fiori-text; } .km-fiori .km-list select:not([multiple]) option { color: #333; } /* Checkboxes and Radios */ .km-fiori .km-listview-label input[type=radio], .km-fiori .km-listview-label input[type=checkbox] { border-color: #979797; background: #fff; } .km-fiori .km-listview-label input[type=checkbox]:checked:after { color: #007cc0; } /* Shim */ .km-fiori .km-shim, .km-phone .km-fiori .km-actionsheet-wrapper { background: rgba(0,0,0,.4); } /* PopUp */ .km-fiori .km-popup { background: @fiori-overlay-background; } .km-fiori .km-actionsheet-wrapper, .km-fiori .km-popup .k-list-container { background: @fiori-overlay-background; border-top-color: @fiori-shadow; } .km-fiori .km-popup.km-pane, .km-tablet .km-fiori .km-actionsheet-wrapper { background-color: @fiori-inverse-background; } .km-fiori .km-popup-arrow:after { border-color: @fiori-inverse-background transparent; } .km-fiori .km-left .km-popup-arrow:after, .km-fiori .km-right .km-popup-arrow:after { border-color: transparent @fiori-inverse-background; } /* Loader & Pull-to-refresh */ .km-fiori .km-loader { background: rgba(0,0,0,.05); } .km-fiori .km-loader h1 { color: @fiori-text; } /* Active States */ .km-fiori .km-detail:active, .km-fiori .km-state-active .km-detail, .km-fiori .km-state-active[style*=background] { .box-shadow(inset 0 0 0 1000px rgba(0,0,0,.2)); } /* Active States */ .km-fiori .km-badge, .km-fiori .km-rowinsert, .km-fiori .km-rowdelete, .km-fiori .km-state-active, .km-fiori .km-switch-label-on, .km-fiori .km-switch-label-off, .km-fiori .km-tabstrip .km-button, .km-fiori .km-popup .k-item, .km-fiori .km-actionsheet > li > a, .km-fiori .km-tabstrip .km-state-active, .km-fiori .k-slider .k-draghandle, .km-fiori .k-slider .k-draghandle:hover, .km-fiori .km-scroller-pull .km-icon, .km-fiori .km-popup.km-pane .km-navbar, .km-fiori .km-popup.km-pane .k-toolbar, .km-fiori .km-popup.km-pane .km-tabstrip, .km-fiori .km-popup .k-state-hover, .km-fiori .km-popup .k-state-focused, .km-fiori .km-popup .k-state-selected, .km-fiori li.km-state-active .km-listview-link, .km-fiori li.km-state-active .km-listview-label, .km-fiori .km-state-active .km-listview-link:after { color: @fiori-inverse-text; } .km-fiori .km-loader > *:not(h1), .km-fiori .km-filter-wrap > input, .km-fiori .km-switch-handle.km-state-active, .km-root .km-fiori .km-scroller-refresh span:not(.km-template) { background: @fiori-button-selected-background; } .km-fiori .km-switch-handle, .km-fiori .k-slider-selection, .km-fiori .km-switch-background { color: @fiori-button-selected-background; } .km-fiori .km-rowinsert, .km-fiori .km-state-active, .km-fiori .km-scroller-pull, .km-fiori .km-loader:before, .km-fiori .k-slider-selection, .km-fiori .km-touch-scrollbar, .km-fiori .km-pages .km-current-page, .km-fiori .k-slider .k-draghandle, .km-fiori .k-slider .k-draghandle:hover, .km-fiori .km-tabstrip .km-state-active, .km-fiori .km-scroller-refresh.km-load-more, .km-fiori .km-popup .k-state-selected, .km-fiori li.km-state-active .km-listview-link, .km-fiori li.km-state-active .km-listview-label, .km-fiori .km-listview-label input[type=radio]:checked, .km-fiori .km-listview-label input[type=checkbox]:checked { background: @fiori-button-selected-background; } .km-fiori .km-filter-wrap > input:focus { border-color: @fiori-button-selected-background; } .km-fiori .km-badge, .km-fiori .km-rowdelete { background: @fiori-button-primary-background; }