918 lines
27 KiB
Plaintext
918 lines
27 KiB
Plaintext
/*!
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
*/
|
|
/* Variables */
|
|
|
|
@ios-widget-color: #fff;
|
|
@ios-content-background-color: @ios-widget-color;
|
|
@default-background-color: #7185a2;
|
|
@button-background-color: #496b9a;
|
|
@button-active-background-color: #264e8c;
|
|
|
|
@ios-list-border-color: #b1b3b8;
|
|
@ios-list-background-color: #f0f0f0;
|
|
|
|
@pull-to-refresh-color: #656565;
|
|
@pull-to-refresh-shadow: rgba(255,255,255,.5);
|
|
|
|
@tabstrip-icon-color: rgba(255,255,255,.3);
|
|
@ios-tabstrip-active-icon-color: #43c5f5;
|
|
@button-icon-gradient: to bottom, rgba(255,255,255,.7), rgba(255,255,255,.9);
|
|
@buttongroup-icon-gradient: to bottom, rgba(0,0,0,.5), rgba(0,0,0,.3);
|
|
@tabstrip-icon-gradient: to bottom, rgba(255,255,255,.4), rgba(255,255,255,0);
|
|
@tabstrip-active-icon-gradient: to bottom, rgba(255,255,255,.6) 0, rgba(255,255,255,0) 50%, rgba(255,255,255,.3) 100%;
|
|
|
|
@button-active-shadow: ~"inset 0 0 0 1px rgba(0,0,0,.3), inset 0 1px 3px rgba(0,0,0,.5), inset 0 0 0 1000px rgba(0,0,0,.2)";
|
|
@buttongroup-active-shadow: ~"0 1px 0 0 rgba(255,255,255,.4), inset 0 0 0 1000px rgba(0,0,0,.2)";
|
|
@ios-detail-shadow: ~"inset 0 0 0 .16rem #fff, 0 1px 3px rgba(0,0,0,.5)";
|
|
@ios-detail-active-shadow: ~"inset 0 0 0 .16rem #fff, 0 1px 3px rgba(0,0,0,.5), inset 0 0 0 1000px rgba(0,0,0,.2)";
|
|
@transparent-color: rgba(0,0,0,0);
|
|
|
|
@error: #f44336;
|
|
@warning: #c60f0f;
|
|
|
|
.km-ios,
|
|
.km-ios .km-listview-wrapper .km-filter-wrap
|
|
{
|
|
background: @ios-content-background-color;
|
|
}
|
|
|
|
.km-ios .k-toolbar,
|
|
.km-ios .km-navbar,
|
|
.km-ios .km-button,
|
|
.km-ios .km-tabstrip,
|
|
.km-ios .km-popup .k-item,
|
|
.km-ios .km-actionsheet > li > a
|
|
{
|
|
background-image: linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(255,255,255,0.45) 6%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.15) 50%, rgba(100,100,100,0));
|
|
border-color: #2f3740 #394d68 #375073;
|
|
background-color: @default-background-color;
|
|
}
|
|
|
|
.km-ios .km-view-title,
|
|
.km-ios .km-dialog-title
|
|
{
|
|
.box-shadow(inset 0 -1px 0 rgba(0,0,0,.3));
|
|
}
|
|
|
|
.km-ios .k-toolbar,
|
|
.km-ios .km-navbar,
|
|
.km-ios .km-button,
|
|
.km-ios .km-tabstrip,
|
|
.km-ios .km-view-title,
|
|
.km-ios .km-dialog-title,
|
|
.km-ios .km-popup .k-item,
|
|
.km-ios .km-actionsheet > li > a,
|
|
.km-ios .k-split-container > li > .km-button,
|
|
.km-ios .k-overflow-container > li > .km-button
|
|
{
|
|
color: @ios-widget-color;
|
|
text-shadow: 0 -1px rgba(0,0,0,.3);
|
|
}
|
|
|
|
.km-ios .km-button
|
|
{
|
|
border-bottom-color: rgba(255,255,255,.5);
|
|
background: transparent, @button-background-color;
|
|
background-image: linear-gradient(to bottom, rgba(255,255,255,0.35), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0));
|
|
}
|
|
|
|
.km-ios .km-button,
|
|
.km-ios .k-toolbar .km-buttongroup
|
|
{
|
|
.box-shadow(~"inset 0 0 0 1px rgba(0,0,0,.3), inset 0 1px 3px rgba(0,0,0,.5)");
|
|
}
|
|
|
|
.km-ios .km-button:active,
|
|
.km-ios .km-button.km-state-active
|
|
{
|
|
background-color: @button-active-background-color;
|
|
.box-shadow(@button-active-shadow);
|
|
}
|
|
|
|
.km-ios .km-icon,
|
|
.km-ios .km-detail .km-icon,
|
|
.km-ios li.km-state-active .km-icon,
|
|
.km-ios li.km-state-active,
|
|
.km-ios .km-switch-label-on
|
|
{
|
|
color: @ios-widget-color;
|
|
}
|
|
|
|
.km-ios .km-checkbox,
|
|
.km-ios .km-switch-wrapper
|
|
{
|
|
background-color: @ios-list-background-color;
|
|
}
|
|
|
|
.km-ios .km-switch-background,
|
|
.km-ios .k-slider-selection
|
|
{
|
|
background-color: #007EE9;
|
|
background-image: linear-gradient(to bottom, rgb(219, 219, 219), rgb(238, 238, 238) 50%);
|
|
}
|
|
|
|
.km-ios .km-switch-background:after
|
|
{
|
|
background-image: linear-gradient(to bottom, rgba(255,255,255,.14) 0, rgba(255,255,255,.4));
|
|
}
|
|
|
|
.km-ios .km-switch-container
|
|
{
|
|
.box-shadow(~"inset 0 2px 2px 0 rgba(0,0,0,.3), inset 0 -1px 1px 0 rgba(0,0,0,.2)");
|
|
background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0) 95%, rgba(0,0,0,.2));
|
|
}
|
|
|
|
.km-ios .km-checkbox
|
|
{
|
|
border-color: #e5e5e5;
|
|
}
|
|
|
|
.km-ios .km-checkbox-checked
|
|
{
|
|
border-color: #fff;
|
|
background-color: #BB0000;
|
|
background-image: linear-gradient(to bottom, rgba(241, 150, 155, 1), rgba(230, 70, 78, .5) 50%, rgba(222, 11, 21, .5) 50%, rgba(183, 0, 0, 0));
|
|
.box-shadow(0 2px 3px #333);
|
|
}
|
|
|
|
.km-ios .km-switch-handle
|
|
{
|
|
border-color: rgba(102,102,102,.8);
|
|
.box-shadow(~"inset 0 0 0 1px #fff");
|
|
background-image: linear-gradient(to bottom, rgb(255, 255, 255), rgb(215, 215, 215) 5%, rgb(255, 255, 255));
|
|
}
|
|
|
|
.km-ios .km-switch-label-off
|
|
{
|
|
color: #7f7f7f;
|
|
}
|
|
|
|
.km-ios .km-switch-container,
|
|
.km-ios .km-switch-wrapper
|
|
{
|
|
border-color: @ios-list-background-color;
|
|
}
|
|
|
|
.km-ios .km-badge,
|
|
.km-ios .km-detail
|
|
{
|
|
background-image: linear-gradient(to bottom, rgba(255,255,255,.5), rgba(255,255,255,.2) 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0));
|
|
color: #FFF;
|
|
background-color: #bc0404;
|
|
}
|
|
|
|
.km-ios .km-detail
|
|
{
|
|
background-color: #1F6DD8;
|
|
}
|
|
|
|
.km-ios .km-detail:active,
|
|
.km-ios .km-detail.km-state-active
|
|
{
|
|
-webkit-box-shadow: @ios-detail-active-shadow;
|
|
box-shadow: @ios-detail-active-shadow;
|
|
}
|
|
|
|
/* Filter box */
|
|
|
|
.km-ios .km-filter-form
|
|
{
|
|
color: @ios-list-border-color;
|
|
background-image: linear-gradient(to bottom, rgba(255,255,255,.6), rgba(255,255,255,.3));
|
|
}
|
|
|
|
.km-ios .km-filter-wrap:before,
|
|
.km-ios .km-filter-reset .km-clear
|
|
{
|
|
color: #adadad;
|
|
}
|
|
|
|
.km-ios .km-list li > .km-icon,
|
|
.km-ios .km-listview-link > .km-icon
|
|
{
|
|
color: #000;
|
|
}
|
|
|
|
.km-ios .km-button .km-icon:before,
|
|
.km-ios .km-button .km-contactadd:before,
|
|
.km-ios .km-button .km-rowdelete:before,
|
|
.km-ios .km-button .km-rowinsert:before,
|
|
.km-ios .km-button .km-detaildisclose:before
|
|
{
|
|
color: rgba(0,0,0,.3);
|
|
}
|
|
|
|
.km-ios .km-rowinsert
|
|
{
|
|
background-color: #24870D;
|
|
}
|
|
|
|
.km-ios .km-rowdelete
|
|
{
|
|
background-color: #B01B1A;
|
|
}
|
|
|
|
/* ButtonGroup */
|
|
|
|
.km-ios .km-buttongroup .km-button,
|
|
.km-tablet .km-ios .km-buttongroup .km-button
|
|
{
|
|
border-color: rgba(0,0,0,.3);
|
|
.box-shadow(0 1px 0 0 rgba(255,255,255,.4));
|
|
}
|
|
|
|
.km-ios .km-header > .km-buttongroup .km-button:not(.km-state-active),
|
|
.km-ios .km-footer > .km-buttongroup .km-button:not(.km-state-active),
|
|
.km-ios .km-content .km-buttongroup .km-button:not(.km-state-active)
|
|
{
|
|
color: #929292;
|
|
text-shadow: 0 1px rgba(255,255,255,.8);
|
|
}
|
|
|
|
.km-ios .km-header > .km-buttongroup .km-button,
|
|
.km-ios .km-footer > .km-buttongroup .km-button,
|
|
.km-ios .km-content .km-buttongroup .km-button
|
|
{
|
|
background-color: #fff;
|
|
background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.12) 50%, rgba(0,0,0,.25));
|
|
}
|
|
|
|
.km-root .km-ios .km-buttongroup .km-state-active
|
|
{
|
|
-webkit-box-shadow: @buttongroup-active-shadow;
|
|
box-shadow: @buttongroup-active-shadow;
|
|
}
|
|
|
|
.km-ios .km-header > .km-buttongroup .km-state-active,
|
|
.km-ios .km-footer > .km-buttongroup .km-state-active,
|
|
.km-ios .km-content .km-buttongroup .km-state-active
|
|
{
|
|
color: #fff;
|
|
border-color: rgba(0,0,0,.4);
|
|
background-color: #3D7EEB;
|
|
background-image: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,0) 50%, rgba(255,255,255,.05) 50%, rgba(255,255,255,.25));
|
|
.box-shadow(inset -1px 0 2px rgba(0,0,0,.3));
|
|
}
|
|
|
|
.km-ios .km-navbar,
|
|
.km-ios .k-toolbar
|
|
{
|
|
background-image: linear-gradient(to bottom, rgba(255,255,255,.65), rgba(255,255,255,0));
|
|
background-color: #506D93;
|
|
.box-shadow(inset 0 1px 0 rgba(255,255,255,.3));
|
|
}
|
|
|
|
.km-ios .km-view-title
|
|
{
|
|
.box-shadow(~"rgba(0,0,0,.3) 0px -1px 0px inset, rgba(0,0,0,.3) 0px 1px 3px");
|
|
}
|
|
|
|
/* TabStrip */
|
|
|
|
.km-ios .km-tabstrip
|
|
{
|
|
border-top-color: rgba(255,255,255,.2);
|
|
background-image: linear-gradient(to bottom, rgba(46,46,46,.8), rgba(21,21,21,.5) 50%, rgba(0,0,0,.8) 50%, rgba(0,0,0,.8));
|
|
.box-shadow(0 -1px 0 0 #000);
|
|
background-color: #1A1A1A;
|
|
text-shadow: 0 1px 1px #000;
|
|
background-image: linear-gradient(to bottom, rgba(255,255,255,.18), rgba(255,255,255,0));
|
|
}
|
|
|
|
html .km-ios .km-tabstrip .km-button
|
|
{
|
|
color: #d1d1d1;
|
|
.box-shadow(~"1px 0 0 rgba(255,255,255,.2), 2px 0 0 rgba(0,0,0,.5)");
|
|
}
|
|
|
|
html .km-ios .km-tabstrip .km-button:active,
|
|
html .km-ios .km-tabstrip .km-state-active,
|
|
html .km-ios .km-tabstrip .km-state-active:last-child,
|
|
html .km-ios .km-tabstrip .km-button:active:last-child
|
|
{
|
|
color: #FFF;
|
|
background-color: #1A1A1A;
|
|
.box-shadow(~"0 0 2px rgba(255,255,255,.4)");
|
|
background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.18), to right, rgba(0,0,0,.6), rgba(0,0,0,0) 3%, rgba(0,0,0,0) 97%, rgba(0,0,0,.6));
|
|
}
|
|
|
|
/* ListView */
|
|
|
|
.km-ios .km-listinset > li:first-child,
|
|
.km-ios .km-listgroupinset .km-list > li:first-child
|
|
{
|
|
border-color: @ios-list-border-color;
|
|
.box-shadow(~"0 1px 0 0 rgba(255,255,255,.4), inset 0 1px 0 0 rgba(200,200,200,.4), inset 0 -1px 0 rgba(0,0,0,.2)");
|
|
}
|
|
|
|
.km-ios .km-list > li
|
|
{
|
|
border-top-color: rgba(255,255,255,.1);
|
|
border-bottom-color: rgba(0,0,0,.1);
|
|
}
|
|
|
|
.km-ios .km-listinset > li,
|
|
.km-ios .km-listgroupinset .km-list > li
|
|
{
|
|
border-color: @ios-list-border-color;
|
|
.box-shadow(~"inset 0 -1px 0 rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.4)");
|
|
}
|
|
|
|
.km-ios .km-listinset > li:last-child,
|
|
.km-ios .km-listgroupinset .km-list > li:last-child
|
|
{
|
|
border-color: @ios-list-border-color;
|
|
.box-shadow(~"0 1px 0 0 rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4)");
|
|
}
|
|
|
|
.km-ios li.km-state-active .km-listview-link,
|
|
.km-ios li.km-state-active .km-listview-label
|
|
{
|
|
color: #fff;
|
|
background: #0260E8;
|
|
background-image: linear-gradient(to bottom, rgba(255,255,255,.28), rgba(255,255,255,.1) 50%, rgba(255,255,255,0));
|
|
}
|
|
|
|
.km-ios .km-listview-link:after
|
|
{
|
|
color: #7b7b7b;
|
|
}
|
|
|
|
.km-ios .km-state-active .km-listview-link:after
|
|
{
|
|
color: #fff;
|
|
}
|
|
|
|
.km-ios .km-group-title
|
|
{
|
|
color: #FFF;
|
|
text-shadow: 0 1px 1px rgba(100,100,100,.8);
|
|
border-top-color: rgba(255,255,255,.2);
|
|
border-bottom-color: rgba(0,0,0,0);
|
|
background-color: #94A3AE;
|
|
background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.3));
|
|
.box-shadow(0 -1px 0 #86929A);
|
|
}
|
|
|
|
.km-ios .km-listgroupinset .km-group-title
|
|
{
|
|
color: #4C566C;
|
|
text-shadow: 0 1px 1px rgba(255,255,255,.8);
|
|
}
|
|
|
|
.km-ios .km-list > li
|
|
{
|
|
background: @ios-list-background-color;
|
|
}
|
|
|
|
.km-ios,
|
|
.km-ios .km-content
|
|
{
|
|
background: @ios-list-background-color;
|
|
color: #000;
|
|
}
|
|
|
|
.km-ios .km-insetcontent
|
|
{
|
|
background: #c4ccd5 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAABCAYAAAASC7TOAAAAGklEQVR4Xm3DMREAAACCQKPYvySeO8MHML0BOrEVLMJmdzAAAAAASUVORK5CYII=");
|
|
}
|
|
|
|
/* Icons */
|
|
|
|
.km-ios .km-button .km-icon,
|
|
.km-ios .k-toolbar .km-button .km-icon,
|
|
.km-ios .km-button.km-state-active .km-icon
|
|
{
|
|
background-image: linear-gradient(@button-icon-gradient);
|
|
}
|
|
|
|
.km-ios .km-buttongroup .km-icon
|
|
{
|
|
background-image: linear-gradient(@buttongroup-icon-gradient);
|
|
}
|
|
|
|
.km-ios .km-tabstrip .km-icon
|
|
{
|
|
background-image: linear-gradient(@tabstrip-icon-gradient);
|
|
color: #666666;
|
|
}
|
|
|
|
.km-ios .km-tabstrip .km-state-active .km-icon
|
|
{
|
|
background-image: linear-gradient(@tabstrip-active-icon-gradient);
|
|
color: #00B0FF;
|
|
}
|
|
|
|
/* Pull to refresh */
|
|
|
|
.km-root .km-ios .km-load-more,
|
|
.km-ios .km-scroller-pull
|
|
{
|
|
color: @pull-to-refresh-color;
|
|
text-shadow: 0 1px 1px @pull-to-refresh-shadow;
|
|
}
|
|
|
|
.km-ios .km-load-more .km-icon,
|
|
.km-ios .km-scroller-pull .km-icon
|
|
{
|
|
color: @pull-to-refresh-color;
|
|
text-shadow: 0 1px 1px @pull-to-refresh-shadow;
|
|
}
|
|
|
|
.k-webkit .km-ios .km-load-more .km-icon:after,
|
|
.k-safari .km-ios .km-load-more .km-icon:after,
|
|
.k-webkit .km-ios .km-scroller-pull .km-icon:after,
|
|
.k-safari .km-ios .km-scroller-pull .km-icon:after
|
|
{
|
|
background: @pull-to-refresh-shadow;
|
|
text-shadow: 0 1px 1px @pull-to-refresh-color;
|
|
}
|
|
|
|
/* ScrollView */
|
|
|
|
.km-ios .km-pages li
|
|
{
|
|
background: rgba(0,0,0,.1);
|
|
border-color: rgba(0,0,0,.3);
|
|
border-radius: 1em;
|
|
.box-shadow(0 1px 1px rgba(255,255,255,.5));
|
|
}
|
|
|
|
.km-ios .km-pages .km-current-page
|
|
{
|
|
background: rgba(0,0,0,.3);
|
|
}
|
|
|
|
/* Slider */
|
|
|
|
.km-ios .k-slider .k-draghandle,
|
|
.km-ios .k-slider .k-draghandle:hover
|
|
{
|
|
background-color: #fff;
|
|
background-image: linear-gradient(to bottom, #ccc, #fff);
|
|
.box-shadow(~"inset 0 0 0 1px #f9f9f9, 1px 1px 3px rgba(0,0,0,.3)");
|
|
}
|
|
|
|
.km-ios .k-slider-selection
|
|
{
|
|
background-image: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0) 15%, rgba(0,0,0,0) 90%, rgba(0,0,0,.4), to bottom, rgb(42,93,178), rgb(109,169,247));
|
|
}
|
|
|
|
.km-ios .k-slider-track
|
|
{
|
|
background-image: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 90%, rgba(0,0,0,.4), to bottom, rgb(219,219,219), rgb(255,255,255));
|
|
}
|
|
|
|
/* Dialog */
|
|
|
|
.km-ios .km-dialog
|
|
{
|
|
background: rgba(10,25,65,.8);
|
|
border-color: rgba(255,255,255,.8);
|
|
.box-shadow(3px 3px 5px #111);
|
|
}
|
|
|
|
.km-ios .km-dialog-title
|
|
{
|
|
background-image: linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0) 60%);
|
|
text-shadow: 0 -1px #333;
|
|
}
|
|
|
|
.km-ios .km-dialog:before
|
|
{
|
|
background: ~"url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22><defs><clipPath id=%22clip%22><rect x=%220%22 y=%220%22 width=%22100%%22 height=%22100%%22 rx=%2210%22 ry=%2210%22/></clipPath></defs><ellipse fill=%22white%22 cx=%2250%%22 cy=%220%22 rx=%2280%%22 ry=%2260%%22 clip-path=%22url(%23clip)%22/></svg>')";
|
|
}
|
|
|
|
.km-ios .km-dialog-content
|
|
{
|
|
color: #fff;
|
|
text-shadow: 0 -1px #333;
|
|
}
|
|
|
|
/* Loader */
|
|
|
|
.km-ios .km-loader
|
|
{
|
|
background-color: rgba(0,0,0,.1);
|
|
}
|
|
|
|
.km-ios .km-loader h1,
|
|
.km-ios .km-scroller-refresh .km-template
|
|
{
|
|
color: #222;
|
|
text-shadow: 0 1px 0 rgba(255,255,255,.8);
|
|
}
|
|
|
|
.km-ios .km-scroller-pull .km-template
|
|
{
|
|
color: @pull-to-refresh-color;
|
|
}
|
|
|
|
/* Forms */
|
|
|
|
.km-ios .km-list input[type=password],
|
|
.km-ios .km-list input[type=search],
|
|
.km-ios .km-list input[type=number],
|
|
.km-ios .km-list input[type=tel],
|
|
.km-ios .km-list input[type=url],
|
|
.km-ios .km-list input[type=email],
|
|
.km-ios .km-list input[type=month],
|
|
.km-ios .km-list input[type=color],
|
|
.km-ios .km-list input[type=week],
|
|
.km-ios .km-list input[type=date],
|
|
.km-ios .km-list input[type=time],
|
|
.km-ios .km-list input[type=datetime],
|
|
.km-ios .km-list input[type=datetime-local],
|
|
.km-ios .km-list input[type=text]:not(.k-input),
|
|
.km-ios .km-list select:not([multiple]),
|
|
.km-ios .km-list .k-dropdown-wrap,
|
|
.km-ios .km-list textarea
|
|
{
|
|
color: #385487;
|
|
}
|
|
|
|
.km-ios .km-list .k-dropdown-wrap .k-input
|
|
{
|
|
color: #385487;
|
|
}
|
|
|
|
.km-ios .km-list select:not([multiple]) option
|
|
{
|
|
color: #333;
|
|
}
|
|
|
|
.km-ios .km-content .km-list .km-state-active input[type=password],
|
|
.km-ios .km-content .km-list .km-state-active input[type=search],
|
|
.km-ios .km-content .km-list .km-state-active input[type=number],
|
|
.km-ios .km-content .km-list .km-state-active input[type=tel],
|
|
.km-ios .km-content .km-list .km-state-active input[type=url],
|
|
.km-ios .km-content .km-list .km-state-active input[type=email],
|
|
.km-ios .km-content .km-list .km-state-active input[type=month],
|
|
.km-ios .km-content .km-list .km-state-active input[type=color],
|
|
.km-ios .km-content .km-list .km-state-active input[type=week],
|
|
.km-ios .km-content .km-list .km-state-active input[type=date],
|
|
.km-ios .km-content .km-list .km-state-active input[type=time],
|
|
.km-ios .km-content .km-list .km-state-active input[type=datetime],
|
|
.km-ios .km-content .km-list .km-state-active input[type=datetime-local],
|
|
.km-ios .km-content .km-list .km-state-active input[type=text]:not(.k-input),
|
|
.km-ios .km-content .km-list .km-state-active select:not([multiple]),
|
|
.km-ios .km-content .km-list .km-state-active textarea
|
|
{
|
|
color: #fff;
|
|
}
|
|
|
|
/* PopUp + ActionSheet */
|
|
|
|
.km-ios .km-actionsheet > li > a
|
|
{
|
|
color: #000;
|
|
}
|
|
|
|
.km-ios .km-popup .k-item,
|
|
.km-ios .km-actionsheet > li > a,
|
|
.km-ios .k-split-container.km-actionsheet > li > .km-button,
|
|
.km-ios .k-overflow-container.km-actionsheet > li > .km-button
|
|
{
|
|
color: #000;
|
|
.box-shadow(~"inset 0 1px 1px rgba(255,255,255,.5), 0 1px 1px rgba(255,255,255,.3)");
|
|
border-color: rgba(40,40,40,.9);
|
|
background: #fff;
|
|
background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.2) 50%, rgba(0,0,0,.25) 85%, rgba(0,0,0,.15));
|
|
}
|
|
|
|
.km-root .km-ios .km-popup .k-item
|
|
{
|
|
border-color: rgba(0,0,0,.8);
|
|
}
|
|
|
|
.km-ios .km-actionsheet > li > a:active,
|
|
.km-ios .km-actionsheet-wrapper .km-actionsheet > li > .km-state-active,
|
|
.km-ios .km-actionsheet > li > a:hover,
|
|
.km-ios li.km-actionsheet-cancel > a
|
|
{
|
|
color: #fff;
|
|
}
|
|
|
|
.km-ios .km-popup .k-state-hover,
|
|
.km-ios .km-popup .k-state-focused,
|
|
.km-ios .km-popup .k-state-selected,
|
|
.km-ios .km-actionsheet > li > a:active,
|
|
.km-ios .km-actionsheet-wrapper .km-actionsheet > li > .km-state-active,
|
|
.km-ios .km-actionsheet > li > a:hover,
|
|
.km-ios li.km-actionsheet-cancel > a
|
|
{
|
|
color: #fff;
|
|
background: #1537c6;
|
|
background-image: linear-gradient(to bottom, rgba(255,255,255,.45), rgba(255,255,255,.1) 60%, rgba(255,255,255,0) 80%, rgba(255,255,255,.15));
|
|
text-shadow: 0 1px rgba(0,0,0,.3);
|
|
}
|
|
|
|
.km-ios li.km-actionsheet-cancel > a
|
|
{
|
|
background-color: #2b3038;
|
|
background-image: linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0) 60%, rgba(255,255,255,0) 85%, rgba(255,255,255,.08));
|
|
}
|
|
|
|
.km-ios .km-popup
|
|
{
|
|
background: rgba(0,0,0,.6);
|
|
}
|
|
|
|
.km-ios .km-actionsheet-wrapper,
|
|
.km-ios .k-split-wrapper .km-actionsheet-wrapper,
|
|
.km-ios .k-overflow-wrapper .km-actionsheet-wrapper,
|
|
.km-ios .km-popup .k-list-container
|
|
{
|
|
color: #fff;
|
|
border-top: 1px solid rgba(255,255,255,.5);
|
|
background: rgba(23,37,64,.6);
|
|
background-image: linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(255,255,255,0.2) 10%, rgba(255,255,255,0));
|
|
}
|
|
|
|
.km-phone .km-ios .km-actionsheet-wrapper,
|
|
.km-phone .km-ios .km-popup .k-list-container
|
|
{
|
|
.box-shadow(~"0 -1px 2px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.5)");
|
|
}
|
|
|
|
.km-root .km-ios .k-split-container.km-actionsheet,
|
|
.km-root .km-ios .k-overflow-container.km-actionsheet
|
|
{
|
|
.box-shadow(none);
|
|
}
|
|
|
|
.km-ios .km-shim
|
|
{
|
|
background: rgba(23,23,46,.5);
|
|
}
|
|
|
|
/* Checkboxes and Radios */
|
|
|
|
.km-ios .km-listview-label input[type=radio]:checked,
|
|
.km-ios .km-listview-label input[type=checkbox]:checked
|
|
{
|
|
font-size: 1.2em;
|
|
color: #3E4E65;
|
|
}
|
|
|
|
.km-ios .km-state-active input[type=radio]:checked,
|
|
.km-ios .km-state-active input[type=checkbox]:checked
|
|
{
|
|
color: #fff;
|
|
}
|
|
|
|
/* Tablet Styles */
|
|
|
|
.km-tablet .km-ios .km-view-title,
|
|
.km-tablet .km-ios .km-modalview .km-view-title
|
|
{
|
|
color: #848B92;
|
|
text-shadow: 0 1px rgba(255,255,255,.8);
|
|
}
|
|
|
|
.km-tablet .km-ios .k-toolbar .km-buttongroup .km-button,
|
|
.km-tablet .km-ios *:not(.km-tabstrip):not(.km-buttongroup) > .km-button
|
|
{
|
|
background-color: #6A727D;
|
|
}
|
|
|
|
.km-ios .k-toolbar .km-buttongroup .km-button,
|
|
.km-ios *:not(.km-tabstrip):not(.km-buttongroup) > .km-button,
|
|
.km-tablet .km-ios *:not(.km-tabstrip):not(.km-buttongroup) > .km-button
|
|
{
|
|
background-image: linear-gradient(to bottom, rgba(255,255,255,.5), rgba(255,255,255,0));
|
|
}
|
|
|
|
.km-ios .k-toolbar .km-buttongroup .km-button,
|
|
.km-ios *:not(.km-tabstrip):not(.km-buttongroup) > .km-button
|
|
{
|
|
background-color: #44648f;
|
|
}
|
|
|
|
.km-tablet .km-ios .km-navbar,
|
|
.km-tablet .km-ios .k-toolbar,
|
|
.km-tablet .km-ios .km-modalview .km-header
|
|
{
|
|
background: #A8ACB9;
|
|
background-image: linear-gradient(to bottom, rgba(255,255,255,.9), rgba(255,255,255,0));
|
|
}
|
|
|
|
.km-tablet .km-ios .km-content
|
|
{
|
|
background: #D7D9DF none;
|
|
}
|
|
|
|
/* SplitView */
|
|
|
|
.km-ios .km-splitview
|
|
{
|
|
background: #000;
|
|
}
|
|
|
|
.km-ios .km-splitview > .km-split-content > .km-pane
|
|
{
|
|
border-right-color: #000;
|
|
background: #fff;
|
|
}
|
|
|
|
.km-ios .km-splitview > .km-collapsible-pane {
|
|
.box-shadow(3px 3px 5px rgba(0, 0, 0, 0.3));
|
|
}
|
|
|
|
.km-ios .km-split-vertical > .km-split-content > .km-pane
|
|
{
|
|
border-bottom-color: #000;
|
|
}
|
|
|
|
/* PopOver */
|
|
|
|
.km-ios .km-popup.km-pane,
|
|
.km-ios .k-split-wrapper .km-actionsheet-wrapper,
|
|
.km-ios .k-overflow-wrapper .km-actionsheet-wrapper,
|
|
.km-tablet .km-ios .km-actionsheet-wrapper
|
|
{
|
|
.box-shadow(~"0 0 15px rgba(0,0,0,.5), 0 0 2px rgba(0,0,0,.5)");
|
|
}
|
|
|
|
.km-ios .km-modalview .km-header,
|
|
.km-ios .km-popup.km-pane .km-header
|
|
{
|
|
background-image: linear-gradient(to bottom, rgba(255,255,255,0.35), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0));
|
|
}
|
|
|
|
.km-ios .km-popup.km-pane,
|
|
.km-ios .k-split-wrapper .km-actionsheet-wrapper,
|
|
.km-ios .k-overflow-wrapper .km-actionsheet-wrapper,
|
|
.km-tablet .km-ios .km-actionsheet-wrapper,
|
|
.km-ios .km-popup.km-pane .km-navbar .km-button
|
|
{
|
|
background-color: rgba(10,18,38,.9);
|
|
}
|
|
|
|
.km-ios .km-popup-arrow:after,
|
|
.km-ios .km-popup-arrow:before
|
|
{
|
|
border-color: rgba(0,0,0,.5) transparent;
|
|
}
|
|
|
|
.km-ios .km-popup-arrow:after
|
|
{
|
|
border-color: rgba(24,31,49,.9) transparent;
|
|
}
|
|
|
|
.km-ios .km-left .km-popup-arrow:after,
|
|
.km-ios .km-right .km-popup-arrow:after
|
|
{
|
|
border-color: transparent rgba(24,31,49,.9);
|
|
}
|
|
|
|
.km-ios .km-down .km-popup-arrow:after
|
|
{
|
|
border-color: rgba(106,111,124,.9) transparent;
|
|
}
|
|
|
|
/* ModalView */
|
|
|
|
.km-ios .km-modalview
|
|
{
|
|
background-color: @default-background-color;
|
|
.box-shadow(~"0 0 15px rgba(0,0,0,.5), 0 0 2px rgba(0,0,0,.5)");
|
|
}
|
|
|
|
/* Collapsible */
|
|
|
|
.km-ios .km-collapsible-header,
|
|
.km-ios .km-collapsible-content
|
|
{
|
|
border-color: transparent;
|
|
.box-shadow(~"0 1px 0 0 rgba(255,255,255,.4), inset 0 1px 0 0 rgba(200,200,200,.4), inset 0 -1px 0 rgba(0,0,0,.2)");
|
|
background: #f7f7f7;
|
|
}
|
|
|
|
.km-ios .km-collapsible-header .km-icon
|
|
{
|
|
color: #7f7f7f;
|
|
}
|
|
|
|
/* Nova theme features */
|
|
.km-ios label.km-required:after {
|
|
color: @error;
|
|
}
|
|
|
|
.km-ios .km-label-above {
|
|
color: #7b7b7b;
|
|
}
|
|
|
|
.km-ios .km-list fieldset .km-inline-field {
|
|
border-color: @ios-list-border-color;
|
|
}
|
|
|
|
.km-ios .km-list fieldset legend {
|
|
color: #FFF;
|
|
border-top-color: #86929A;
|
|
border-bottom-color: rgba(0,0,0,0);
|
|
background-color: #94A3AE;
|
|
background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.3));
|
|
.box-shadow(inset 0 1px 0 rgba(255, 255, 255, 0.2));
|
|
}
|
|
|
|
.km-ios .km-legend-button {
|
|
text-shadow: 0 1px 1px rgba(100,100,100,.8);
|
|
}
|
|
|
|
.km-ios {
|
|
.km-list {
|
|
fieldset,
|
|
.km-icon-label,
|
|
.km-label-above {
|
|
input[type=password],
|
|
input[type=search],
|
|
input[type=number],
|
|
input[type=tel],
|
|
input[type=url],
|
|
input[type=email],
|
|
input[type=month],
|
|
input[type=color],
|
|
input[type=week],
|
|
input[type=date],
|
|
input[type=time],
|
|
input[type=datetime],
|
|
input[type=datetime-local],
|
|
input[type=text]:not(.k-input),
|
|
select:not([multiple]),
|
|
.k-dropdown-wrap,
|
|
textarea {
|
|
color: darken(@ios-widget-color, 99%);
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.km-ios .km-full-width-slider .k-slider-track {
|
|
border-color: @ios-list-border-color;
|
|
border-top-color: darken(@ios-list-border-color, 10%);
|
|
background: linear-gradient(to bottom, rgba(0,0,0,.3) 0%,rgb(255,255,255) 100%);
|
|
}
|
|
|
|
.km-ios .k-slider-horizontal .k-slider-selection {
|
|
background: linear-gradient(to bottom, darken(@button-background-color, 20%) 0%,lighten(@button-background-color, 20%) 100%);
|
|
}
|
|
|
|
.km-ios .k-slider.km-full-width-slider .k-draghandle,
|
|
.km-ios .k-slider.km-full-width-slider .k-draghandle:hover {
|
|
border-color: @ios-list-border-color;
|
|
box-shadow: none;
|
|
background-image: linear-gradient(to bottom, #ccc, #fff);
|
|
}
|
|
|
|
.km-ios .km-checkbox-label:before,
|
|
.km-ios .km-checkbox-label:after {
|
|
color: #3E4E65;
|
|
//border-color: @flat-active-background;
|
|
}
|
|
|
|
.km-ios .km-radio-label:before {
|
|
border-color: @ios-list-border-color;
|
|
background-color: @ios-widget-color;
|
|
}
|
|
|
|
.km-ios .km-radio-label:after {
|
|
background-color: #44648f;
|
|
background-image: linear-gradient(to bottom, rgba(255,255,255,.9), rgba(255,255,255,0));
|
|
border-color: @button-active-background-color;
|
|
}
|
|
|
|
/* Validation */
|
|
.km-ios .km-list > li label.km-invalid,
|
|
.km-ios .km-list fieldset .km-legend-button.km-invalid,
|
|
.km-ios .km-list > li label.km-invalid.km-required:after {
|
|
color: @warning;
|
|
}
|
|
|
|
.km-ios .km-invalid-msg {
|
|
color: @ios-widget-color;
|
|
background: @warning;
|
|
} |