3093 lines
87 KiB
Text
3093 lines
87 KiB
Text
/***************************************************************************
|
|
Body
|
|
***************************************************************************/
|
|
/***************************************************************************
|
|
Action Bar / Header
|
|
***************************************************************************/
|
|
/****************************************************************************
|
|
Circle Progress Bar
|
|
****************************************************************************/
|
|
/****************************************************************************
|
|
Progress Bar
|
|
****************************************************************************/
|
|
/****************************************************************************
|
|
Processing
|
|
****************************************************************************/
|
|
/***************************************************************************
|
|
Buttons
|
|
***************************************************************************/
|
|
/***************************************************************************
|
|
Popup
|
|
***************************************************************************/
|
|
/***************************************************************************
|
|
Footer
|
|
***************************************************************************/
|
|
/***************************************************************************
|
|
Toast Popup
|
|
***************************************************************************/
|
|
/***************************************************************************
|
|
Small Toast Popup
|
|
***************************************************************************/
|
|
/***************************************************************************
|
|
Option Popup
|
|
***************************************************************************/
|
|
/***************************************************************************
|
|
circular index scrollbar
|
|
***************************************************************************/
|
|
/***************************************************************************
|
|
Listview
|
|
***************************************************************************/
|
|
/****************************************************************************
|
|
Listview with Marquee
|
|
****************************************************************************/
|
|
/***************************************************************************
|
|
Multiline List
|
|
***************************************************************************/
|
|
/***************************************************************************
|
|
Checkbox/Radio
|
|
***************************************************************************/
|
|
/***************************************************************************
|
|
Page Indicator
|
|
***************************************************************************/
|
|
/****************************************************************************
|
|
Toggle Switch
|
|
****************************************************************************/
|
|
/***************************************************************************
|
|
Scroller
|
|
***************************************************************************/
|
|
/***************************************************************************
|
|
More options
|
|
***************************************************************************/
|
|
/***************************************************************************
|
|
Selector
|
|
***************************************************************************/
|
|
/***************************************************************************
|
|
Text Input
|
|
***************************************************************************/
|
|
/***************************************************************************
|
|
Slider
|
|
***************************************************************************/
|
|
/***************************************************************************
|
|
Hyper Link
|
|
***************************************************************************/
|
|
/***************************************************************************
|
|
Number Picker
|
|
***************************************************************************/
|
|
/***************************************************************************
|
|
Time Picker
|
|
***************************************************************************/
|
|
/***************************************************************************
|
|
Date Picker
|
|
***************************************************************************/
|
|
/***************************************************************************
|
|
Time/Number/Date Indicator
|
|
***************************************************************************/
|
|
/***************************************************************************
|
|
More Options
|
|
***************************************************************************/
|
|
/***************************************************************************
|
|
IconButton
|
|
***************************************************************************/
|
|
/************************************************************************/
|
|
/* fixedUIStyle.less */
|
|
/************************************************************************/
|
|
/* When system font-size is changed, winset size (ex. header, footer, button, etc,
|
|
include font) also changed. But in UX guide, some UI elements should have fixed
|
|
size regardless of system font size.
|
|
So, this less file supports fixed style for some elements.
|
|
- Layout: header, footer, button
|
|
- Popup : popup header, popup footer
|
|
- toggleswitch
|
|
- progress: text for ratio
|
|
*/
|
|
/***********************************************************************/
|
|
/* Layout(FIXED) */
|
|
/***********************************************************************/
|
|
/**********************************************************************/
|
|
/* Popup(FIXED) */
|
|
/**********************************************************************/
|
|
/**********************************************************************/
|
|
/* ToggleSwitch(FIXED) */
|
|
/**********************************************************************/
|
|
/**********************************************************************/
|
|
/* List(FIXED) */
|
|
/**********************************************************************/
|
|
/************************
|
|
Listview
|
|
*************************/
|
|
/***************************************************************************
|
|
Common Style
|
|
|
|
***************************************************************************/
|
|
/***************************************************************************
|
|
Development Tip
|
|
If you want to implement specific css code of circle device,
|
|
you should implement specific code here.
|
|
But when you implement code, you should check duplicate value
|
|
between common/layout.less and this file.
|
|
If you have duplicate value, please change static value to variable value.
|
|
***************************************************************************/
|
|
body {
|
|
background: B015;
|
|
color: T011;
|
|
}
|
|
.ui-page {
|
|
background: B015;
|
|
}
|
|
.ui-page .ui-header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
height: 5.75rem;
|
|
line-height: 39px;
|
|
background-color: transparent;
|
|
text-align: center;
|
|
margin-top: 1.4375rem;
|
|
}
|
|
.ui-page .ui-header.ui-header-medium {
|
|
margin-top: 0.75rem;
|
|
}
|
|
.ui-page .ui-header.ui-header-medium .ui-title {
|
|
margin-bottom: 0.875rem;
|
|
}
|
|
.ui-page .ui-header.ui-header-medium .ui-subtitle {
|
|
margin-top: -0.4375rem;
|
|
}
|
|
.ui-page .ui-header.ui-header-small {
|
|
margin-top: 0.125rem;
|
|
}
|
|
.ui-page .ui-header.ui-header-small .ui-title {
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
.ui-page .ui-header.ui-header-small .ui-subtitle {
|
|
margin-top: 0.1875rem;
|
|
}
|
|
.ui-page .ui-header.ui-header-smaller {
|
|
margin-top: 0.125rem;
|
|
height: 5.0625rem;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
.ui-page .ui-header .ui-title {
|
|
color: T012;
|
|
margin: 0.875rem 4rem 1.5625rem;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
font-size: 30px;
|
|
mask-image: none;
|
|
}
|
|
.ui-page .ui-header .ui-title.ui-icon {
|
|
background: none !important;
|
|
padding-left: 1.5rem;
|
|
}
|
|
.ui-page .ui-header.ui-header-big {
|
|
height: 5.875rem;
|
|
}
|
|
.ui-page .ui-header.ui-header-big .ui-title {
|
|
font-size: 2rem;
|
|
margin-top: 1.75rem;
|
|
margin-bottom: 1.6875rem;
|
|
color: T191;
|
|
}
|
|
.ui-page .ui-header .ui-subtitle {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
color: T019;
|
|
font-size: 1.5rem;
|
|
font-weight: normal;
|
|
margin: -1.125rem 2.1875rem 0;
|
|
line-height: 2rem;
|
|
}
|
|
.ui-page .ui-header.ui-has-more .ui-title {
|
|
padding-right: 1.5rem;
|
|
mask-image: none;
|
|
}
|
|
.ui-page .ui-header.ui-has-more .ui-more {
|
|
position: fixed;
|
|
top: 50%;
|
|
right: 0;
|
|
width: 50px;
|
|
height: 140px;
|
|
transform: translate(0, -50%);
|
|
border: 0 none;
|
|
padding: 0;
|
|
}
|
|
.ui-page .ui-header.ui-has-more .ui-more.ui-icon-overflow {
|
|
mask-image: none;
|
|
mask-position: initial;
|
|
background-color: transparent;
|
|
overflow: visible;
|
|
}
|
|
.ui-page .ui-header.ui-has-more .ui-more.ui-icon-overflow[disabled="disabled"] {
|
|
mask-position: initial;
|
|
}
|
|
.ui-page .ui-header.ui-has-more .ui-more.ui-icon-overflow:active {
|
|
background-color: transparent;
|
|
}
|
|
.ui-page .ui-more {
|
|
position: fixed;
|
|
top: 50%;
|
|
right: 0;
|
|
width: 50px;
|
|
height: 140px;
|
|
transform: translate(0, -50%);
|
|
background-color: transparent;
|
|
overflow: visible;
|
|
border: 0 none;
|
|
padding: 0;
|
|
text-indent: -9999px;
|
|
}
|
|
.ui-page .ui-more::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 12.5rem;
|
|
height: 12.5rem;
|
|
background-color: rgba(255, 255, 255, 0.13);
|
|
border-radius: 50%;
|
|
opacity: 0;
|
|
-webkit-transform: scale(1);
|
|
-moz-transform: scale(1);
|
|
-ms-transform: scale(1);
|
|
-o-transform: scale(1);
|
|
transform: scale(1);
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-top: -6.25rem;
|
|
margin-left: -6.25rem;
|
|
-webkit-transition: all ease-out 200ms;
|
|
-moz-transition: all ease-out 200ms;
|
|
-o-transition: all ease-out 200ms;
|
|
-ms-transition: all ease-out 200ms;
|
|
transition: all ease-out 200ms;
|
|
pointer-events: none;
|
|
}
|
|
.ui-page .ui-more:active::before {
|
|
opacity: 1;
|
|
-webkit-transition: transform ease-out 300ms;
|
|
-moz-transition: transform ease-out 300ms;
|
|
-o-transition: transform ease-out 300ms;
|
|
-ms-transition: transform ease-out 300ms;
|
|
transition: transform ease-out 300ms;
|
|
-webkit-transform: scale(1.1);
|
|
-moz-transform: scale(1.1);
|
|
-ms-transform: scale(1.1);
|
|
-o-transform: scale(1.1);
|
|
transform: scale(1.1);
|
|
}
|
|
.ui-page .ui-more::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 1rem;
|
|
height: 2.25rem;
|
|
-webkit-mask-box-image-source: url("images/Actionbar/b_more_option.png");
|
|
background-color: B052L1;
|
|
border-radius: 50%;
|
|
top: 50%;
|
|
right: 0.375rem;
|
|
-webkit-transform: translate(0, -50%);
|
|
-moz-transform: translate(0, -50%);
|
|
-ms-transform: translate(0, -50%);
|
|
-o-transform: translate(0, -50%);
|
|
transform: translate(0, -50%);
|
|
}
|
|
.ui-page .ui-content {
|
|
text-align: center;
|
|
font-size: 32px;
|
|
line-height: 2.625rem;
|
|
}
|
|
.ui-page .ui-content.ui-content-padding {
|
|
font-stretch: ultra-condensed;
|
|
padding-left: 2.0625rem;
|
|
padding-right: 2.0625rem;
|
|
}
|
|
.ui-page .ui-footer.ui-bottom-button {
|
|
position: fixed !important;
|
|
bottom: 0.375rem;
|
|
z-index: 1000;
|
|
max-height: 6.25rem;
|
|
display: flex;
|
|
-webkit-flex-direction: column;
|
|
-moz-flex-direction: column;
|
|
-ms-flex-direction: column;
|
|
-o-flex-direction: column;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 6.25rem;
|
|
}
|
|
.ui-page .ui-footer.ui-bottom-button .ui-btn {
|
|
display: flex;
|
|
-webkit-flex-direction: column;
|
|
-moz-flex-direction: column;
|
|
-ms-flex-direction: column;
|
|
-o-flex-direction: column;
|
|
flex-direction: column;
|
|
-webkit-justify-content: center;
|
|
-moz-justify-content: center;
|
|
-ms-justify-content: center;
|
|
-o-justify-content: center;
|
|
justify-content: center;
|
|
-webkit-align-items: center;
|
|
-moz-align-items: center;
|
|
-ms-align-items: center;
|
|
-o-align-items: center;
|
|
align-items: center;
|
|
line-height: 2.3125rem;
|
|
position: relative;
|
|
font-size: 1.75rem;
|
|
font-weight: bold;
|
|
color: T041;
|
|
padding: 0.5rem 1.125rem 0 1.4375rem 0;
|
|
margin: 0.5rem 0;
|
|
height: 4.5rem;
|
|
width: 13.125rem;
|
|
background-color: #000000;
|
|
border: 0.1875rem solid #009af9;
|
|
border-radius: 3.75rem;
|
|
}
|
|
.ui-page .ui-footer.ui-bottom-button .ui-btn::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
background-color: B065L4P;
|
|
-webkit-transition: opacity 200ms;
|
|
-moz-transition: opacity 200ms;
|
|
-o-transition: opacity 200ms;
|
|
-ms-transition: opacity 200ms;
|
|
transition: opacity 200ms;
|
|
opacity: 0;
|
|
z-index: -1;
|
|
}
|
|
.ui-page .ui-footer.ui-bottom-button .ui-btn.ui-btn-active {
|
|
color: T041P;
|
|
background-color: #002f4d;
|
|
height: 4.5rem;
|
|
width: 13.125rem;
|
|
border-radius: 4.0625rem;
|
|
font-size: 1.875rem;
|
|
}
|
|
.ui-page .ui-footer.ui-bottom-button .ui-btn.ui-btn-active::after {
|
|
animation: btn-footer-opacity-press linear 565ms;
|
|
}
|
|
.ui-page .ui-footer.ui-bottom-button .ui-btn.ui-btn-inactive {
|
|
background-color: #000000;
|
|
height: 4.5rem;
|
|
width: 13.125rem;
|
|
border-radius: 4.0625rem;
|
|
font-size: 1.75rem;
|
|
}
|
|
.ui-page .ui-footer.ui-bottom-button .ui-btn.ui-btn-inactive::after {
|
|
animation: btn-footer-opacity-press linear 565ms;
|
|
}
|
|
.ui-page .ui-footer.ui-bottom-button .ui-btn.ui-state-disabled,
|
|
.ui-page .ui-footer.ui-bottom-button .ui-btn:disabled {
|
|
color: T041D;
|
|
background-color: #1a1a1a;
|
|
border-color: #005e99;
|
|
}
|
|
.ui-page .ui-footer.ui-bottom-button .ui-btn.ui-btn-icon-only {
|
|
padding: 0.875rem 0 0.875rem 0;
|
|
}
|
|
/***************************************************************************
|
|
Page Scroll
|
|
***************************************************************************/
|
|
.ui-page.ui-scroll-on {
|
|
overflow: hidden;
|
|
-webkit-overflow-scrolling: auto;
|
|
-moz-overflow-scrolling: auto;
|
|
-o-overflow-scrolling: auto;
|
|
-ms-overflow-scrolling: auto;
|
|
overflow-scrolling: auto;
|
|
}
|
|
.ui-page.ui-scroll-on .ui-content {
|
|
margin-top: 7.1875rem;
|
|
padding-bottom: 6.25rem;
|
|
padding-top: 0;
|
|
}
|
|
.ui-page.ui-scroll-on .ui-header ~ .ui-content {
|
|
margin-top: 0;
|
|
}
|
|
.ui-page.ui-scroll-on .ui-header ~ .ui-scroller > .ui-content {
|
|
margin-top: 0;
|
|
}
|
|
.ui-page.ui-scroll-on .ui-content ~ .ui-footer:not(.ui-expandable-footer) {
|
|
margin-top: -5.3125rem;
|
|
}
|
|
/*
|
|
* Common definition for theme
|
|
*/
|
|
/***************************************************************
|
|
default font size (base font from WRT)
|
|
=> small: 13px
|
|
=> normal: 17px
|
|
=> large: 20px
|
|
|
|
This is only applied to gear2.
|
|
so, we set @font_size_default as 17px on gear2 and it was changed to 16px since gear-S.
|
|
This value only used for @rem_base, not for html font-size
|
|
html font-size is set by WRT base font-size
|
|
***************************************************************/
|
|
a {
|
|
color: T011;
|
|
}
|
|
/***************************************************************************
|
|
toggle switch
|
|
***************************************************************************/
|
|
.ui-switch-text {
|
|
margin-top: 60px;
|
|
margin-bottom: 48px;
|
|
font-size: 34px;
|
|
padding: 0;
|
|
}
|
|
.ui-switch-sub-text {
|
|
margin-top: 48px;
|
|
font-size: 26px;
|
|
color: T161;
|
|
}
|
|
.ui-toggleswitch {
|
|
width: 76px;
|
|
height: 76px;
|
|
}
|
|
.ui-toggleswitch.ui-toggleswitch-large {
|
|
width: 76px;
|
|
height: 76px;
|
|
}
|
|
.ui-toggleswitch .ui-switch-input {
|
|
background-color: W014L2;
|
|
mask-image: url('images/Controller_icon/On_Off/tw_btn_control_bg_holo_dark.png');
|
|
-webkit-mask-size: 100% 100%;
|
|
-moz-mask-size: 100% 100%;
|
|
-ms-mask-size: 100% 100%;
|
|
-o-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
-webkit-transition: background-color 300ms linear;
|
|
-moz-transition: background-color 300ms linear;
|
|
-o-transition: background-color 300ms linear;
|
|
-ms-transition: background-color 300ms linear;
|
|
transition: background-color 300ms linear;
|
|
}
|
|
.ui-toggleswitch .ui-switch-input::before {
|
|
content: none;
|
|
}
|
|
.ui-toggleswitch .ui-switch-input:active {
|
|
-webkit-transition: background-color 300ms linear;
|
|
-moz-transition: background-color 300ms linear;
|
|
-o-transition: background-color 300ms linear;
|
|
-ms-transition: background-color 300ms linear;
|
|
transition: background-color 300ms linear;
|
|
background-color: W014L2P;
|
|
}
|
|
.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-activation,
|
|
.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-button {
|
|
background-color: transparent;
|
|
}
|
|
.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-activation::after,
|
|
.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-button::after {
|
|
background-color: W014L4P;
|
|
}
|
|
.ui-toggleswitch .ui-switch-input:disabled {
|
|
background-color: transparent;
|
|
}
|
|
.ui-toggleswitch .ui-switch-input:disabled ~ .ui-switch-activation,
|
|
.ui-toggleswitch .ui-switch-input:disabled ~ .ui-switch-button {
|
|
background-color: transparent;
|
|
}
|
|
.ui-toggleswitch .ui-switch-input:disabled ~ .ui-switch-activation::after,
|
|
.ui-toggleswitch .ui-switch-input:disabled ~ .ui-switch-button::after {
|
|
background-color: W014L4D;
|
|
}
|
|
.ui-toggleswitch .ui-switch-activation,
|
|
.ui-toggleswitch .ui-switch-button {
|
|
width: 100%;
|
|
height: 100%;
|
|
-webkit-mask-image: none;
|
|
background-color: transparent;
|
|
transform: none;
|
|
}
|
|
.ui-toggleswitch .ui-switch-activation::before,
|
|
.ui-toggleswitch .ui-switch-button::before {
|
|
mask-image: url('images/Controller_icon/On_Off/tw_btn_control_on_holo_dark.png');
|
|
-webkit-transform: scale(0);
|
|
-moz-transform: scale(0);
|
|
-ms-transform: scale(0);
|
|
-o-transform: scale(0);
|
|
transform: scale(0);
|
|
-webkit-transition: transform 100ms 0ms linear;
|
|
-moz-transition: transform 100ms 0ms linear;
|
|
-o-transition: transform 100ms 0ms linear;
|
|
-ms-transition: transform 100ms 0ms linear;
|
|
transition: transform 100ms 0ms linear;
|
|
background-color: W014L3;
|
|
-webkit-mask-size: 100% 100%;
|
|
-moz-mask-size: 100% 100%;
|
|
-ms-mask-size: 100% 100%;
|
|
-o-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
-webkit-mask-position: 0;
|
|
-moz-mask-position: 0;
|
|
-ms-mask-position: 0;
|
|
-o-mask-position: 0;
|
|
mask-position: 0;
|
|
animation-fill-mode: both;
|
|
}
|
|
.ui-toggleswitch .ui-switch-activation::after,
|
|
.ui-toggleswitch .ui-switch-button::after {
|
|
content: "";
|
|
width: 100%;
|
|
height: 100%;
|
|
mask-image: url('images/Controller_icon/On_Off/tw_btn_control_off_holo_dark.png');
|
|
-webkit-transform: scale(1);
|
|
-moz-transform: scale(1);
|
|
-ms-transform: scale(1);
|
|
-o-transform: scale(1);
|
|
transform: scale(1);
|
|
-webkit-transition: transform 200ms 100ms linear;
|
|
-moz-transition: transform 200ms 100ms linear;
|
|
-o-transition: transform 200ms 100ms linear;
|
|
-ms-transition: transform 200ms 100ms linear;
|
|
transition: transform 200ms 100ms linear;
|
|
-webkit-mask-size: 100% 100%;
|
|
-moz-mask-size: 100% 100%;
|
|
-ms-mask-size: 100% 100%;
|
|
-o-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
-webkit-mask-position: 0;
|
|
-moz-mask-position: 0;
|
|
-ms-mask-position: 0;
|
|
-o-mask-position: 0;
|
|
mask-position: 0;
|
|
animation-fill-mode: both;
|
|
background-color: W014L4;
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
.ui-toggleswitch .ui-switch-input:checked {
|
|
background-color: W014L1;
|
|
}
|
|
.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-activation,
|
|
.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-button {
|
|
width: 100%;
|
|
height: 100%;
|
|
-webkit-mask-image: none;
|
|
background-color: transparent;
|
|
transform: none;
|
|
}
|
|
.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-activation::before,
|
|
.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-button::before {
|
|
transform: scale(1);
|
|
-webkit-mask-position: 0;
|
|
-moz-mask-position: 0;
|
|
-ms-mask-position: 0;
|
|
-o-mask-position: 0;
|
|
mask-position: 0;
|
|
background-color: W014L3;
|
|
-webkit-transition: transform 200ms 100ms linear;
|
|
-moz-transition: transform 200ms 100ms linear;
|
|
-o-transition: transform 200ms 100ms linear;
|
|
-ms-transition: transform 200ms 100ms linear;
|
|
transition: transform 200ms 100ms linear;
|
|
}
|
|
.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-activation::after,
|
|
.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-button::after {
|
|
transform: scale(0);
|
|
-webkit-transition: transform 100ms 0ms linear;
|
|
-moz-transition: transform 100ms 0ms linear;
|
|
-o-transition: transform 100ms 0ms linear;
|
|
-ms-transition: transform 100ms 0ms linear;
|
|
transition: transform 100ms 0ms linear;
|
|
}
|
|
.ui-toggleswitch .ui-switch-input:checked:active {
|
|
background-color: W014L1P;
|
|
}
|
|
.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-activation,
|
|
.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-button {
|
|
background-color: transparent;
|
|
}
|
|
.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-activation::before,
|
|
.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-button::before {
|
|
-webkit-mask-position: 0;
|
|
-moz-mask-position: 0;
|
|
-ms-mask-position: 0;
|
|
-o-mask-position: 0;
|
|
mask-position: 0;
|
|
background-color: W014L3P;
|
|
}
|
|
.ui-toggleswitch .ui-switch-input:checked:disabled {
|
|
background-color: W014L1D;
|
|
}
|
|
.ui-toggleswitch .ui-switch-input:checked:disabled ~ .ui-switch-activation,
|
|
.ui-toggleswitch .ui-switch-input:checked:disabled ~ .ui-switch-button {
|
|
background-color: transparent;
|
|
}
|
|
.ui-toggleswitch .ui-switch-input:checked:disabled ~ .ui-switch-activation::before,
|
|
.ui-toggleswitch .ui-switch-input:checked:disabled ~ .ui-switch-button::before {
|
|
-webkit-mask-position: 0;
|
|
-moz-mask-position: 0;
|
|
-ms-mask-position: 0;
|
|
-o-mask-position: 0;
|
|
mask-position: 0;
|
|
background-color: W014L3D;
|
|
}
|
|
/***************************************************************************
|
|
Popup
|
|
***************************************************************************/
|
|
@keyframes toastCheck {
|
|
0% {
|
|
mask-position: 0rem 0rem;
|
|
}
|
|
6% {
|
|
mask-position: -5.125rem 0rem;
|
|
}
|
|
11% {
|
|
mask-position: -10.25rem 0rem;
|
|
}
|
|
17% {
|
|
mask-position: -15.375rem 0rem;
|
|
}
|
|
22% {
|
|
mask-position: 0rem -5.125rem;
|
|
}
|
|
28% {
|
|
mask-position: -5.125rem -5.125rem;
|
|
}
|
|
33% {
|
|
mask-position: -10.25rem -5.125rem;
|
|
}
|
|
39% {
|
|
mask-position: -15.375rem -5.125rem;
|
|
}
|
|
44% {
|
|
mask-position: 0rem -10.25rem;
|
|
}
|
|
50% {
|
|
mask-position: -5.125rem -10.25rem;
|
|
}
|
|
56% {
|
|
mask-position: -10.25rem -10.25rem;
|
|
}
|
|
61% {
|
|
mask-position: -15.375rem -10.25rem;
|
|
}
|
|
67% {
|
|
mask-position: 0rem -15.375rem;
|
|
}
|
|
72% {
|
|
mask-position: -5.125rem -15.375rem;
|
|
}
|
|
78% {
|
|
mask-position: -10.25rem -15.375rem;
|
|
}
|
|
83% {
|
|
mask-position: -15.375rem -15.375rem;
|
|
}
|
|
89% {
|
|
mask-position: 0rem -20.5rem;
|
|
}
|
|
94% {
|
|
mask-position: -5.125rem -20.5rem;
|
|
}
|
|
100% {
|
|
mask-position: -10.25rem -20.5rem;
|
|
}
|
|
}
|
|
.ui-popup {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
border: 0;
|
|
border-radius: 50%;
|
|
background-color: B061L1E;
|
|
/***********************
|
|
Popup Container Scroll
|
|
***********************/
|
|
/****************************************
|
|
Popup Toast
|
|
****************************************/
|
|
/***********************
|
|
Option Popup
|
|
***********************/
|
|
}
|
|
.ui-popup ::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.ui-popup .ui-popup-header {
|
|
text-align: center;
|
|
min-height: 99px;
|
|
background-color: transparent;
|
|
color: T091;
|
|
padding-top: 60px;
|
|
padding-right: 61px;
|
|
padding-bottom: 0;
|
|
padding-left: 61px;
|
|
}
|
|
.ui-popup .ui-popup-header + .ui-popup-content {
|
|
padding-top: 26px;
|
|
}
|
|
.ui-popup .ui-popup-content {
|
|
color: T092;
|
|
background-color: transparent;
|
|
font-size: 32px;
|
|
line-height: 2.625rem;
|
|
padding: 3.75rem 1.875rem 0.625rem;
|
|
text-align: center;
|
|
}
|
|
.ui-popup .ui-popup-content .ui-listview,
|
|
.ui-popup .ui-popup-content .ui-inline-listview {
|
|
margin: -1.5625rem -3.4375rem -1rem -3.4375rem;
|
|
}
|
|
.ui-popup.ui-has-side-buttons .ui-popup-content {
|
|
padding-left: 4rem;
|
|
padding-right: 4rem;
|
|
}
|
|
.ui-popup .ui-popup-footer.ui-side-button .ui-btn {
|
|
top: 33.33%;
|
|
position: fixed;
|
|
text-indent: -9999px;
|
|
padding: 0;
|
|
line-height: 2.3125rem;
|
|
font-size: 1.75rem;
|
|
font-weight: bold;
|
|
padding: 0.5rem 1.125rem 0 1.4375rem 0;
|
|
color: T041;
|
|
margin: 0.5rem 0;
|
|
height: 6.25rem;
|
|
width: 3.75rem;
|
|
background-color: #000000;
|
|
border: 0.1875rem solid #009af9;
|
|
border-radius: 3.75rem;
|
|
}
|
|
.ui-popup .ui-popup-footer.ui-side-button .ui-btn::before {
|
|
content: "";
|
|
width: 50px;
|
|
height: 50px;
|
|
position: absolute;
|
|
}
|
|
.ui-popup .ui-popup-footer.ui-side-button .ui-btn::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: B065L4P;
|
|
transition: opacity 200ms;
|
|
opacity: 0;
|
|
z-index: -1;
|
|
}
|
|
.ui-popup .ui-popup-footer.ui-side-button .ui-btn::before {
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.ui-popup .ui-popup-footer.ui-side-button .ui-btn.ui-btn-active {
|
|
color: T041P;
|
|
background-color: #002f4d;
|
|
height: 6.25rem;
|
|
width: 3.75rem;
|
|
border-radius: 4.0625rem;
|
|
font-size: 1.875rem;
|
|
}
|
|
.ui-popup .ui-popup-footer.ui-side-button .ui-btn.ui-btn-active::after {
|
|
animation: btn-footer-opacity-press linear 565ms;
|
|
}
|
|
.ui-popup .ui-popup-footer.ui-side-button .ui-btn.ui-btn-inactive {
|
|
background-color: #000000;
|
|
height: 6.25rem;
|
|
width: 3.75rem;
|
|
border-radius: 4.0625rem;
|
|
font-size: 1.75rem;
|
|
}
|
|
.ui-popup .ui-popup-footer.ui-side-button .ui-btn.ui-btn-inactive::after {
|
|
animation: btn-footer-opacity-press linear 565ms;
|
|
}
|
|
.ui-popup .ui-popup-footer.ui-side-button .ui-btn.ui-state-disabled,
|
|
.ui-popup .ui-popup-footer.ui-side-button .ui-btn:disabled {
|
|
color: T041D;
|
|
background-color: #1a1a1a;
|
|
border-color: #005e99;
|
|
}
|
|
.ui-popup .ui-popup-footer.ui-side-button .ui-btn.ui-btn-icon-only {
|
|
padding: 0.875rem 0 0.875rem 0;
|
|
}
|
|
.ui-popup .ui-popup-footer.ui-side-button .ui-btn:nth-child(1) {
|
|
left: 0.125rem;
|
|
}
|
|
.ui-popup .ui-popup-footer.ui-side-button .ui-btn:nth-child(2) {
|
|
right: 0.125rem;
|
|
}
|
|
.ui-popup .ui-popup-footer.ui-bottom-button {
|
|
position: fixed;
|
|
bottom: 0;
|
|
z-index: 1000;
|
|
max-height: 6.25rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 6.25rem;
|
|
}
|
|
.ui-popup .ui-popup-footer.ui-bottom-button .ui-btn {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
line-height: 2.3125rem;
|
|
position: relative;
|
|
font-size: 1.75rem;
|
|
font-weight: bold;
|
|
color: T041;
|
|
padding: 0.5rem 1.125rem 0 1.4375rem 0;
|
|
margin: 0.5rem 0;
|
|
height: 3.75rem;
|
|
width: 13.125rem;
|
|
background-color: #000000;
|
|
border: 0.1875rem solid #009af9;
|
|
border-radius: 3.75rem;
|
|
}
|
|
.ui-popup .ui-popup-footer.ui-bottom-button .ui-btn::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
background-color: B065L4P;
|
|
transition: opacity 200ms;
|
|
opacity: 0;
|
|
z-index: -1;
|
|
}
|
|
.ui-popup .ui-popup-footer.ui-bottom-button .ui-btn.ui-btn-active {
|
|
color: T041P;
|
|
background-color: #002f4d;
|
|
height: 3.75rem;
|
|
width: 13.125rem;
|
|
border-radius: 4.0625rem;
|
|
font-size: 1.875rem;
|
|
}
|
|
.ui-popup .ui-popup-footer.ui-bottom-button .ui-btn.ui-btn-active::after {
|
|
animation: btn-footer-opacity-press linear 565ms;
|
|
}
|
|
.ui-popup .ui-popup-footer.ui-bottom-button .ui-btn.ui-btn-inactive {
|
|
background-color: #000000;
|
|
height: 3.75rem;
|
|
width: 13.125rem;
|
|
border-radius: 4.0625rem;
|
|
font-size: 1.75rem;
|
|
}
|
|
.ui-popup .ui-popup-footer.ui-bottom-button .ui-btn.ui-btn-inactive::after {
|
|
animation: btn-footer-opacity-press linear 565ms;
|
|
}
|
|
.ui-popup .ui-popup-footer.ui-bottom-button .ui-btn.ui-state-disabled,
|
|
.ui-popup .ui-popup-footer.ui-bottom-button .ui-btn:disabled {
|
|
color: T041D;
|
|
background-color: #1a1a1a;
|
|
border-color: #005e99;
|
|
}
|
|
.ui-popup .ui-popup-footer.ui-bottom-button .ui-btn.ui-btn-icon-only {
|
|
padding: 0.875rem 0 0.875rem 0;
|
|
}
|
|
.ui-popup-more-options {
|
|
background-color: transparent;
|
|
}
|
|
.ui-popup-more-options .ui-selector {
|
|
background-color: B059;
|
|
}
|
|
.ui-popup-more-options .ui-selector .ui-selector-indicator-text {
|
|
color: T013;
|
|
}
|
|
.ui-popup-more-options .ui-selector .ui-selector-indicator-subtext {
|
|
color: T018;
|
|
}
|
|
.ui-popup-more-options .ui-selector .ui-layer .ui-item {
|
|
background-color: B0117;
|
|
}
|
|
.ui-popup-more-options .ui-selector .ui-layer .ui-item:active {
|
|
background-color: B0117P;
|
|
}
|
|
.ui-popup-more-options .ui-selector .ui-layer .ui-item.ui-item-active:active {
|
|
background-color: B0117S;
|
|
}
|
|
.ui-popup-more-options .ui-selector .ui-layer .ui-item::before {
|
|
background-color: B0118;
|
|
}
|
|
.ui-popup-more-options .ui-selector .ui-layer .ui-item::before:active {
|
|
background-color: B0118P;
|
|
}
|
|
.ui-popup-more-options .ui-selector .ui-layer .ui-item.ui-item-active::before {
|
|
background-color: B0118S;
|
|
}
|
|
.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-wrapper::after {
|
|
content: "";
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
background-color: B061L8;
|
|
mask-image: url(images/Popup/b_popup_edge_inner_glow.png);
|
|
mask-size: 100% 100%;
|
|
}
|
|
.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-content {
|
|
margin-top: 4.75rem;
|
|
margin-bottom: 4.75rem;
|
|
padding-top: 0;
|
|
}
|
|
.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-header + .ui-popup-content {
|
|
margin-top: 0;
|
|
padding-top: 8px;
|
|
}
|
|
.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-footer {
|
|
margin-top: -4.75rem;
|
|
}
|
|
.ui-popup.ui-popup-toast {
|
|
min-height: 100%;
|
|
background-color: W1712;
|
|
background-image: none;
|
|
border: none;
|
|
margin: 0;
|
|
align-items: center;
|
|
/****************************************
|
|
Popup Toast Small
|
|
****************************************/
|
|
}
|
|
.ui-popup.ui-popup-toast.ui-popup-active,
|
|
.ui-popup.ui-popup-toast.in,
|
|
.ui-popup.ui-popup-toast.ui-build {
|
|
display: flex;
|
|
}
|
|
.ui-popup.ui-popup-toast .ui-popup-wrapper {
|
|
width: 100%;
|
|
}
|
|
.ui-popup.ui-popup-toast .ui-popup-wrapper .ui-popup-content {
|
|
padding: 0 1.875rem;
|
|
height: auto;
|
|
background-color: transparent;
|
|
color: T099;
|
|
font-size: 28px;
|
|
text-align: center;
|
|
line-height: 37px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
.ui-popup.ui-popup-toast.ui-popup-toast-graphic .ui-popup-wrapper .ui-popup-content {
|
|
font-size: 32px;
|
|
line-height: 42px;
|
|
}
|
|
.ui-popup.ui-popup-toast .ui-popup-toast-icon {
|
|
width: 5.125rem;
|
|
height: 5.125rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.ui-popup.ui-popup-toast .ui-popup-toast-check-icon {
|
|
mask-image: url("images/Popup/toast_check.png");
|
|
mask-repeat: no-repeat;
|
|
animation-name: toastCheck;
|
|
animation-duration: 300ms;
|
|
animation-delay: 300ms;
|
|
animation-iteration-count: 1;
|
|
animation-timing-function: step-start;
|
|
animation-fill-mode: forwards;
|
|
background-color: B069;
|
|
}
|
|
.ui-popup.ui-popup-toast .ui-popup-toast-check-icon::after {
|
|
content: none;
|
|
}
|
|
.ui-popup.ui-popup-toast.ui-popup-toast-small {
|
|
height: 10rem;
|
|
min-height: 5.375rem;
|
|
width: 10rem;
|
|
position: fixed;
|
|
margin-bottom: 0.3125rem;
|
|
background-color: W15021;
|
|
border: solid 0.0625rem W15022;
|
|
border-radius: 50%;
|
|
}
|
|
.ui-popup.ui-popup-toast.ui-popup-toast-small .ui-popup-wrapper .ui-popup-content {
|
|
padding: 0 1.1875rem;
|
|
max-height: 6rem;
|
|
color: T0911;
|
|
font-size: 1.5rem;
|
|
line-height: 2rem;
|
|
}
|
|
.ui-popup.ui-popup-toast.ui-popup-toast-small .ui-popup-toast-icon {
|
|
transform: translateX(-50%) scale(0.6097561);
|
|
margin: -1rem 0;
|
|
background-color: W1503;
|
|
}
|
|
.ui-popup.ui-popup-toast.ui-popup-toast-small.ui-popup-toast-graphic-only {
|
|
width: 5.375rem;
|
|
height: 5.375rem;
|
|
}
|
|
.ui-popup.ui-popup-toast.ui-popup-toast-small.ui-popup-toast-graphic .ui-popup-wrapper .ui-popup-content {
|
|
padding-bottom: 0.375rem;
|
|
}
|
|
.ui-popup.ui-ctxpopup {
|
|
height: auto;
|
|
}
|
|
/***************************************************************************
|
|
listview
|
|
***************************************************************************/
|
|
.ui-page.ui-scroll-on .ui-listview:not(.ui-arc-listview-carousel-item) {
|
|
margin-top: 3.125rem;
|
|
}
|
|
.ui-page.ui-scroll-on .ui-header ~ .ui-content .ui-listview {
|
|
margin-top: 0;
|
|
}
|
|
.ui-page .ui-scroller.ui-snap-container .ui-header {
|
|
margin: 0;
|
|
height: 7.1875rem;
|
|
}
|
|
.ui-page .ui-scroller.ui-snap-container .ui-listview.ui-snap-listview {
|
|
margin-top: 0.6875rem;
|
|
}
|
|
.ui-page .ui-scroller.ui-snap-container .ui-content {
|
|
padding-bottom: 7.875rem;
|
|
}
|
|
.ui-listview.ui-arc-listview {
|
|
padding-bottom: 0;
|
|
}
|
|
.ui-listview li {
|
|
font-size: 2.25rem;
|
|
font-weight: 500;
|
|
min-height: 6.75rem;
|
|
max-height: 22.5rem;
|
|
padding: 0 1.875rem;
|
|
border: 0 none;
|
|
border-bottom: 0 solid transparent;
|
|
border-image: linear-gradient(0deg, transparent, #245B85, transparent) 1;
|
|
color: T0211;
|
|
text-align: center;
|
|
line-height: 2.9375rem;
|
|
box-sizing: content-box;
|
|
transition-property: max-height;
|
|
transition-duration: 1ms;
|
|
}
|
|
.ui-listview li.ui-listview-divider,
|
|
.ui-listview li.ui-li-group-index {
|
|
height: 2.0625rem;
|
|
min-height: 2.0625rem;
|
|
line-height: 1.9375rem;
|
|
background-color: transparent;
|
|
color: T0231;
|
|
display: flex;
|
|
padding: 0;
|
|
}
|
|
.ui-listview li.ui-listview-divider::before,
|
|
.ui-listview li.ui-li-group-index::before {
|
|
content: "";
|
|
height: 100%;
|
|
width: auto;
|
|
mask-image: url("images/List/tw_list_sub_line_left.png");
|
|
-webkit-mask-repeat: no-repeat;
|
|
-moz-mask-repeat: no-repeat;
|
|
-ms-mask-repeat: no-repeat;
|
|
-o-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 2px;
|
|
-moz-mask-size: 100% 2px;
|
|
-ms-mask-size: 100% 2px;
|
|
-o-mask-size: 100% 2px;
|
|
mask-size: 100% 2px;
|
|
-webkit-mask-position: -0.75rem 50%;
|
|
-moz-mask-position: -0.75rem 50%;
|
|
-ms-mask-position: -0.75rem 50%;
|
|
-o-mask-position: -0.75rem 50%;
|
|
mask-position: -0.75rem 50%;
|
|
background: B023;
|
|
flex: 1;
|
|
}
|
|
.ui-listview li.ui-listview-divider::after,
|
|
.ui-listview li.ui-li-group-index::after {
|
|
content: "";
|
|
height: 100%;
|
|
width: auto;
|
|
mask-image: url("images/List/tw_list_sub_line_right.png");
|
|
-webkit-mask-repeat: no-repeat;
|
|
-moz-mask-repeat: no-repeat;
|
|
-ms-mask-repeat: no-repeat;
|
|
-o-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 2px;
|
|
-moz-mask-size: 100% 2px;
|
|
-ms-mask-size: 100% 2px;
|
|
-o-mask-size: 100% 2px;
|
|
mask-size: 100% 2px;
|
|
-webkit-mask-position: 0.75rem 50%;
|
|
-moz-mask-position: 0.75rem 50%;
|
|
-ms-mask-position: 0.75rem 50%;
|
|
-o-mask-position: 0.75rem 50%;
|
|
mask-position: 0.75rem 50%;
|
|
background: B023;
|
|
flex: 1;
|
|
}
|
|
.ui-listview li.ui-li-btn {
|
|
padding: 0;
|
|
}
|
|
.ui-listview li.ui-li-btn .ui-btn {
|
|
padding: 2.625rem 2.5rem;
|
|
margin: 0;
|
|
line-height: inherit;
|
|
}
|
|
.ui-listview li.ui-li-btn.ui-grid-col-2 .ui-btn {
|
|
padding: 1.75rem 1.25rem;
|
|
}
|
|
.ui-listview li.ui-li-btn.ui-grid-col-3 .ui-btn {
|
|
padding: 1.75rem 1.875rem;
|
|
height: 100%;
|
|
text-indent: -9999px;
|
|
}
|
|
.ui-listview li > * {
|
|
color: T0211;
|
|
}
|
|
.ui-listview li > a:first-child:last-child,
|
|
.ui-listview li button:first-child:last-child {
|
|
padding: 0;
|
|
margin: 0;
|
|
justify-content: space-around;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.ui-listview li.li-has-multiline.ui-arc-listview-selected.li-has-2line-sub {
|
|
padding-top: 0.5625rem;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
.ui-listview li.li-has-multiline.ui-arc-listview-selected.li-has-3line-sub {
|
|
padding-top: 0.0625rem;
|
|
padding-bottom: 0.25rem;
|
|
}
|
|
.ui-listview li:last-child {
|
|
border: 0;
|
|
}
|
|
.ui-listview li.li-divider {
|
|
height: 2.0625rem;
|
|
min-height: 2.0625rem;
|
|
line-height: 1.9375rem;
|
|
background-color: B023;
|
|
color: T0231;
|
|
padding: 0;
|
|
}
|
|
.ui-listview li.ui-li-has-action-icon .ui-action-text::after {
|
|
background-color: T011;
|
|
}
|
|
.ui-listview li.ui-li-has-action-icon .ui-action-delete {
|
|
background-color: F022L1i;
|
|
}
|
|
.ui-listview li.ui-li-has-action-icon .ui-action-setting {
|
|
background-color: F022L1i;
|
|
}
|
|
.ui-listview li.ui-li-has-action-icon .ui-action-add {
|
|
background-color: F022L1i;
|
|
}
|
|
.ui-listview li.ui-li-has-action-icon .ui-action-delete:active,
|
|
.ui-listview li.ui-li-has-action-icon .ui-action-setting:active,
|
|
.ui-listview li.ui-li-has-action-icon .ui-action-add:active {
|
|
background-color: B041P;
|
|
color: T0211P;
|
|
}
|
|
.ui-listview:not(.ui-arc-listview-carousel-item).ui-li-active {
|
|
background-color: transparent;
|
|
color: T0211P;
|
|
}
|
|
.ui-listview:not(.ui-arc-listview-carousel-item).ui-li-active::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
mask-image: url("images/List/b_list_focus_bg.png");
|
|
mask-size: 100% 100%;
|
|
background-color: B0210P;
|
|
pointer-events: none;
|
|
}
|
|
.ui-listview.ui-snap-listview li,
|
|
.ui-listview.ui-arc-listview-carousel-item li {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
}
|
|
.ui-listview.ui-snap-listview li a,
|
|
.ui-listview.ui-arc-listview-carousel-item li a {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.ui-listview.ui-snap-listview li a > span,
|
|
.ui-listview.ui-arc-listview-carousel-item li a > span {
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
.ui-listview.ui-snap-listview li.ui-li-grid,
|
|
.ui-listview.ui-arc-listview-carousel-item li.ui-li-grid {
|
|
flex-direction: row;
|
|
}
|
|
.ui-listview.ui-snap-listview li.ui-li-grid.ui-li-grid-full,
|
|
.ui-listview.ui-arc-listview-carousel-item li.ui-li-grid.ui-li-grid-full {
|
|
justify-content: space-between;
|
|
}
|
|
.ui-listview.ui-snap-listview li.ui-li-grid.ui-li-grid-full div,
|
|
.ui-listview.ui-arc-listview-carousel-item li.ui-li-grid.ui-li-grid-full div {
|
|
text-align: inherit;
|
|
}
|
|
.ui-listview.ui-snap-listview li.ui-li-grid.ui-li-grid-full div::after,
|
|
.ui-listview.ui-arc-listview-carousel-item li.ui-li-grid.ui-li-grid-full div::after {
|
|
opacity: 0;
|
|
}
|
|
.ui-listview.ui-snap-listview li.ui-li-grid.ui-li-grid-full .ui-btn.ui-btn-no-bg.ui-btn-icon,
|
|
.ui-listview.ui-arc-listview-carousel-item li.ui-li-grid.ui-li-grid-full .ui-btn.ui-btn-no-bg.ui-btn-icon {
|
|
width: 4.75rem;
|
|
height: 4.75rem;
|
|
}
|
|
.ui-listview.ui-snap-listview li.ui-li-grid.ui-li-grid-full *,
|
|
.ui-listview.ui-arc-listview-carousel-item li.ui-li-grid.ui-li-grid-full * {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
}
|
|
.ui-listview.ui-snap-listview li.ui-li-grid.ui-li-grid-full *.ui-btn-icon,
|
|
.ui-listview.ui-arc-listview-carousel-item li.ui-li-grid.ui-li-grid-full *.ui-btn-icon {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
.ui-listview.ui-snap-listview li.ui-li-grid > *.ui-btn,
|
|
.ui-listview.ui-arc-listview-carousel-item li.ui-li-grid > *.ui-btn {
|
|
padding: 0;
|
|
margin: 0 1.125rem 0 0;
|
|
flex: none;
|
|
}
|
|
.ui-listview.ui-snap-listview li.ui-li-grid > *.ui-btn.ui-btn-no-bg.ui-btn-icon::before,
|
|
.ui-listview.ui-arc-listview-carousel-item li.ui-li-grid > *.ui-btn.ui-btn-no-bg.ui-btn-icon::before {
|
|
border-radius: 50%;
|
|
}
|
|
.ui-listview.ui-snap-listview li.ui-li-grid > *.ui-btn.ui-btn-circle,
|
|
.ui-listview.ui-arc-listview-carousel-item li.ui-li-grid > *.ui-btn.ui-btn-circle {
|
|
border-radius: 50%;
|
|
width: 5.5rem;
|
|
}
|
|
.ui-listview.ui-snap-listview li.ui-li-grid > *.ui-btn.ui-btn-circle.ui-btn-active,
|
|
.ui-listview.ui-arc-listview-carousel-item li.ui-li-grid > *.ui-btn.ui-btn-circle.ui-btn-active {
|
|
animation: btn-circle-opacity-press linear 567ms;
|
|
}
|
|
.ui-listview.ui-snap-listview li.ui-li-grid > *.ui-btn:last-child,
|
|
.ui-listview.ui-arc-listview-carousel-item li.ui-li-grid > *.ui-btn:last-child {
|
|
margin-right: 0;
|
|
}
|
|
.ui-listview.ui-snap-listview li.ui-li-grid > *.ui-btn:last-child:first-child,
|
|
.ui-listview.ui-arc-listview-carousel-item li.ui-li-grid > *.ui-btn:last-child:first-child {
|
|
margin-right: 1.25rem;
|
|
}
|
|
.ui-listview.ui-snap-listview li.ui-li-grid > *.ui-btn-description,
|
|
.ui-listview.ui-arc-listview-carousel-item li.ui-li-grid > *.ui-btn-description {
|
|
transform: none;
|
|
margin: 0;
|
|
width: auto;
|
|
}
|
|
.ui-listview.ui-snap-listview li .ui-li-sub-text,
|
|
.ui-listview.ui-arc-listview-carousel-item li .ui-li-sub-text {
|
|
color: T022;
|
|
font-size: 1.5rem;
|
|
display: block;
|
|
transition-property: opacity, line-height;
|
|
transition-timing-function: ease-in-out, ease-in-out;
|
|
transition-duration: 100ms, 200ms;
|
|
opacity: 0;
|
|
line-height: 0.01px;
|
|
}
|
|
.ui-listview.ui-snap-listview li.ui-snap-listview-selected,
|
|
.ui-listview.ui-arc-listview-carousel-item li.ui-snap-listview-selected,
|
|
.ui-listview.ui-snap-listview li.ui-arc-listview-selected,
|
|
.ui-listview.ui-arc-listview-carousel-item li.ui-arc-listview-selected {
|
|
line-height: 2.9375rem;
|
|
max-height: 45rem;
|
|
}
|
|
.ui-listview.ui-snap-listview li.ui-snap-listview-selected .ui-li-sub-text,
|
|
.ui-listview.ui-arc-listview-carousel-item li.ui-snap-listview-selected .ui-li-sub-text,
|
|
.ui-listview.ui-snap-listview li.ui-arc-listview-selected .ui-li-sub-text,
|
|
.ui-listview.ui-arc-listview-carousel-item li.ui-arc-listview-selected .ui-li-sub-text {
|
|
opacity: 1;
|
|
line-height: 2rem;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
max-width: 18.75rem;
|
|
}
|
|
.ui-listview.ui-snap-listview li.ui-snap-listview-selected .ui-li-sub-text:last-child:not(:first-child),
|
|
.ui-listview.ui-arc-listview-carousel-item li.ui-snap-listview-selected .ui-li-sub-text:last-child:not(:first-child),
|
|
.ui-listview.ui-snap-listview li.ui-arc-listview-selected .ui-li-sub-text:last-child:not(:first-child),
|
|
.ui-listview.ui-arc-listview-carousel-item li.ui-arc-listview-selected .ui-li-sub-text:last-child:not(:first-child) {
|
|
padding-top: 0.125rem;
|
|
}
|
|
.ui-listview.ui-snap-listview li.ui-snap-listview-selected.ui-li-active,
|
|
.ui-listview.ui-arc-listview-carousel-item li.ui-snap-listview-selected.ui-li-active,
|
|
.ui-listview.ui-snap-listview li.ui-arc-listview-selected.ui-li-active,
|
|
.ui-listview.ui-arc-listview-carousel-item li.ui-arc-listview-selected.ui-li-active {
|
|
color: T0211P;
|
|
}
|
|
.ui-listview.ui-snap-listview li.ui-snap-listview-selected.ui-li-active::before,
|
|
.ui-listview.ui-arc-listview-carousel-item li.ui-snap-listview-selected.ui-li-active::before,
|
|
.ui-listview.ui-snap-listview li.ui-arc-listview-selected.ui-li-active::before,
|
|
.ui-listview.ui-arc-listview-carousel-item li.ui-arc-listview-selected.ui-li-active::before {
|
|
background-color: B0210P;
|
|
}
|
|
.ui-listview.ui-snap-listview li.ui-snap-listview-selected.ui-li-active .ui-action-text:active,
|
|
.ui-listview.ui-arc-listview-carousel-item li.ui-snap-listview-selected.ui-li-active .ui-action-text:active,
|
|
.ui-listview.ui-snap-listview li.ui-arc-listview-selected.ui-li-active .ui-action-text:active,
|
|
.ui-listview.ui-arc-listview-carousel-item li.ui-arc-listview-selected.ui-li-active .ui-action-text:active {
|
|
background-color: B041P;
|
|
color: T0211P;
|
|
}
|
|
.ui-listview.ui-snap-listview li.ui-snap-listview-selected::before,
|
|
.ui-listview.ui-arc-listview-carousel-item li.ui-snap-listview-selected::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
-webkit-mask-image: url("images/List/b_list_focus_bg.png");
|
|
-webkit-mask-size: 100% 100%;
|
|
background-color: B0210;
|
|
border-radius: 20vw;
|
|
pointer-events: none;
|
|
}
|
|
.ui-listview.ui-snap-listview li li,
|
|
.ui-listview.ui-arc-listview-carousel-item li li {
|
|
border: none;
|
|
}
|
|
.ui-listview.ui-snap-listview li li.ui-li-active::before,
|
|
.ui-listview.ui-arc-listview-carousel-item li li.ui-li-active::before {
|
|
background-color: transparent;
|
|
}
|
|
.ui-listview.ui-arc-listview-carousel-item-separator {
|
|
height: auto;
|
|
}
|
|
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li {
|
|
padding: 1.5625rem 1.875rem 1.625rem;
|
|
min-height: auto;
|
|
color: T0261;
|
|
overflow: hidden;
|
|
line-height: 3rem;
|
|
}
|
|
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li::before {
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
content: "";
|
|
width: 100%;
|
|
height: 0.0625rem;
|
|
background-color: white;
|
|
-webkit-mask-box-image: url("images/List/tw_list_divider.png") 0 128 0 128 repeat repeat;
|
|
}
|
|
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li:active,
|
|
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li:active a,
|
|
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li.ui-li-active,
|
|
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li.ui-li-active a {
|
|
color: T0261P;
|
|
}
|
|
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li.ui-li-text {
|
|
white-space: normal;
|
|
color: T0263;
|
|
padding-top: 0.5625rem;
|
|
padding-bottom: 0.625rem;
|
|
font-size: 1.9375rem;
|
|
line-height: 2.3125rem;
|
|
}
|
|
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li.ui-li-text:active {
|
|
color: T0263P;
|
|
}
|
|
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li.ui-li-has-multiline {
|
|
padding-top: 0.5625rem;
|
|
padding-bottom: 0.625rem;
|
|
}
|
|
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li.ui-li-has-multiline,
|
|
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li.ui-li-has-multiline a {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li.ui-li-has-multiline .ui-li-sub-text,
|
|
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li.ui-li-has-multiline a .ui-li-sub-text {
|
|
color: T0262;
|
|
font-size: 1.5rem;
|
|
line-height: 2rem;
|
|
}
|
|
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li.ui-li-has-multiline.ui-li-active .ui-li-sub-text,
|
|
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li.ui-li-has-multiline.ui-li-active a .ui-li-sub-text {
|
|
color: T9262P;
|
|
}
|
|
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li.ui-li-has-thumb-left {
|
|
padding-left: 6.25rem;
|
|
}
|
|
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li.ui-li-has-thumb-right {
|
|
padding-right: 6.25rem;
|
|
}
|
|
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li.ui-li-has-thumb-left img,
|
|
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li.ui-li-has-thumb-right img {
|
|
background-color: unset;
|
|
position: absolute;
|
|
top: calc(49.5%);
|
|
transform: translateY(-50%);
|
|
}
|
|
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li.ui-li-has-thumb-left img.ui-li-thumb-left,
|
|
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li.ui-li-has-thumb-right img.ui-li-thumb-left {
|
|
left: 1rem;
|
|
}
|
|
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li.ui-li-has-thumb-left img.ui-li-thumb-right,
|
|
.ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li.ui-li-has-thumb-right img.ui-li-thumb-right {
|
|
right: 1rem;
|
|
}
|
|
input[type="checkbox"]:not(.ui-switch-input),
|
|
input[type="radio"] {
|
|
height: 76px;
|
|
width: 76px;
|
|
}
|
|
input[type="checkbox"]:not(.ui-switch-input) {
|
|
mask-image: none;
|
|
background: radial-gradient(transparent, transparent 59%, W012L2 63%, W012L2 68%, transparent 72%), url("images/Controller_icon/Check/ref_btn_check_holo_dark.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
input[type="checkbox"]:not(.ui-switch-input)::before {
|
|
content: "";
|
|
mask-image: none;
|
|
background: radial-gradient(transparent, transparent 59%, W012L1 63%, W012L1 68%, transparent 72%);
|
|
height: 100%;
|
|
width: 100%;
|
|
opacity: 0;
|
|
position: absolute;
|
|
transition: all 300ms ease-in;
|
|
}
|
|
input[type="checkbox"]:not(.ui-switch-input)::after {
|
|
mask-image: url('images/Controller_icon/Check/tw_btn_check_holo_dark.png');
|
|
mask-repeat: repeat;
|
|
mask-position: center bottom;
|
|
height: 0;
|
|
transition-property: height;
|
|
transition-duration: 500ms;
|
|
bottom: 0;
|
|
mask-size: 100%;
|
|
}
|
|
input[type="checkbox"]:not(.ui-switch-input):checked::before {
|
|
animation: checkon 300ms ease-out;
|
|
transition: none;
|
|
mask-image: none;
|
|
background: radial-gradient(transparent, transparent 59%, W012L1 63%, W012L1 68%, transparent 72%);
|
|
opacity: 1;
|
|
}
|
|
input[type="checkbox"]:not(.ui-switch-input):checked::after {
|
|
background-color: W012L3;
|
|
height: 100%;
|
|
}
|
|
input[type="checkbox"]:not(.ui-switch-input):active {
|
|
background: radial-gradient(transparent, transparent 59%, W012L2 63%, W012L2 68%, transparent 72%), url("images/Controller_icon/Check/ref_btn_check_holo_dark.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
input[type="checkbox"]:not(.ui-switch-input):active::after {
|
|
height: 0;
|
|
}
|
|
input[type="checkbox"]:not(.ui-switch-input):active:checked::before {
|
|
mask-image: none;
|
|
background: radial-gradient(transparent, transparent 59%, W012L1 63%, W012L1 68%, transparent 72%);
|
|
}
|
|
input[type="checkbox"]:not(.ui-switch-input):active:checked::after {
|
|
background-color: W012L3;
|
|
height: 100%;
|
|
}
|
|
input[type="checkbox"]:not(.ui-switch-input):disabled {
|
|
background: radial-gradient(transparent, transparent 59%, W012L2D 63%, W012L2D 68%, transparent 72%), url("images/Controller_icon/Check/ref_btn_check_holo_dark.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
input[type="checkbox"]:not(.ui-switch-input):disabled:checked::before {
|
|
mask-image: none;
|
|
background: radial-gradient(transparent, transparent 59%, W012L1D 63%, W012L1D 68%, transparent 72%);
|
|
}
|
|
input[type="checkbox"]:not(.ui-switch-input):disabled:checked::after {
|
|
background-color: W012L3D;
|
|
height: 100%;
|
|
}
|
|
@keyframes checkon {
|
|
from {
|
|
opacity: .5;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
input[type="radio"] {
|
|
background: radial-gradient(transparent, transparent 59%, W013L2 63%, W013L2 68%, transparent 72%, transparent);
|
|
mask-image: none;
|
|
}
|
|
input[type="radio"]::after {
|
|
content: "";
|
|
mask-image: url('images/Controller_icon/Radio/tw_btn_radio_holo_dark.png');
|
|
background-color: W013L4;
|
|
}
|
|
input[type="radio"]::before {
|
|
content: "";
|
|
background-color: W013L3;
|
|
mask-image: url('images/Controller_icon/Radio/tw_btn_radio_holo_dark.png');
|
|
mask-repeat: no-repeat;
|
|
width: 100%;
|
|
height: 100%;
|
|
mask-size: 100% 100%;
|
|
position: absolute;
|
|
transform: scale(0);
|
|
transition: transform 300ms;
|
|
}
|
|
input[type="radio"]:checked {
|
|
background: radial-gradient(transparent, transparent 59%, W013L1 63%, W013L1 68%, transparent 72%, transparent);
|
|
}
|
|
input[type="radio"]:checked::before {
|
|
background-color: W013L3;
|
|
mask-image: url('images/Controller_icon/Radio/tw_btn_radio_holo_dark.png');
|
|
transform: scale(1);
|
|
z-index: 1;
|
|
}
|
|
input[type="radio"]:active {
|
|
background: radial-gradient(transparent, transparent 59%, W013L2P 63%, W013L2P 68%, transparent 72%, transparent);
|
|
mask-image: none;
|
|
}
|
|
input[type="radio"]:active::after {
|
|
mask-image: url('images/Controller_icon/Radio/tw_btn_radio_holo_dark.png');
|
|
background-color: W013L4P;
|
|
}
|
|
input[type="radio"]:active:checked {
|
|
background: radial-gradient(transparent, transparent 59%, W013L1P 63%, W013L1P 68%, transparent 72%, transparent);
|
|
}
|
|
input[type="radio"]:active:checked::before {
|
|
mask-image: url('images/Controller_icon/Radio/tw_btn_radio_holo_dark.png');
|
|
background-color: W013L3P;
|
|
}
|
|
input[type="radio"]:active:checked::after {
|
|
content: none;
|
|
}
|
|
input[type="radio"]:disabled {
|
|
background: radial-gradient(transparent, transparent 59%, W013L2D 63%, W013L2D 68%, transparent 72%, transparent);
|
|
mask-image: none;
|
|
}
|
|
input[type="radio"]:disabled::before {
|
|
transition: none;
|
|
}
|
|
input[type="radio"]:disabled::after {
|
|
background-color: W013L4D;
|
|
}
|
|
input[type="radio"]:disabled:checked {
|
|
background: radial-gradient(transparent, transparent 59%, W013L1D 63%, W013L1D 68%, transparent 72%, transparent);
|
|
}
|
|
input[type="radio"]:disabled:checked::before {
|
|
background-color: W013L3D;
|
|
transition: none;
|
|
}
|
|
input[type="radio"]:disabled:checked::after {
|
|
content: none;
|
|
}
|
|
/***************************************************************************
|
|
button
|
|
***************************************************************************/
|
|
.ui-btn {
|
|
color: T042;
|
|
background-color: transparent;
|
|
height: auto;
|
|
}
|
|
.ui-btn.ui-btn-icon-only::before {
|
|
mask-size: 3.125rem 3.125rem;
|
|
width: 3.125rem;
|
|
height: 3.125rem;
|
|
}
|
|
.ui-default {
|
|
color: T042;
|
|
background-color: transparent;
|
|
}
|
|
.ui-color-red {
|
|
color: T041;
|
|
background-color: W012;
|
|
}
|
|
a.ui-color-red:active:hover,
|
|
.ui-color-red:enabled:active:hover {
|
|
background-color: W012;
|
|
}
|
|
.ui-color-red:enabled:focus {
|
|
background-color: W012;
|
|
}
|
|
a.ui-color-red.ui-state-disabled,
|
|
.ui-color-red:disabled {
|
|
color: T041;
|
|
background-color: W012;
|
|
}
|
|
.ui-color-orange {
|
|
color: T041;
|
|
background-color: W013;
|
|
}
|
|
a.ui-color-orange:active:hover,
|
|
.ui-color-orange:enabled:active:hover {
|
|
background-color: W013;
|
|
}
|
|
.ui-color-orange:enabled:focus {
|
|
background-color: W013;
|
|
}
|
|
a.ui-color-orange.ui-state-disabled,
|
|
.ui-color-orange:disabled {
|
|
color: T041;
|
|
background-color: W013;
|
|
}
|
|
.ui-color-green {
|
|
color: T041;
|
|
background-color: W014;
|
|
}
|
|
a.ui-color-green:active:hover,
|
|
.ui-color-green:enabled:active:hover {
|
|
background-color: W014;
|
|
}
|
|
.ui-color-green:enabled:focus {
|
|
background-color: W014;
|
|
}
|
|
a.ui-color-green.ui-state-disabled,
|
|
.ui-color-green:disabled {
|
|
color: T041;
|
|
background-color: W014;
|
|
}
|
|
.ui-color-blue {
|
|
color: T041;
|
|
background-color: W011;
|
|
}
|
|
a.ui-color-blue:active:hover,
|
|
.ui-color-blue:enabled:active:hover {
|
|
background-color: W011;
|
|
}
|
|
.ui-color-blue:enabled:focus {
|
|
background-color: W011;
|
|
}
|
|
a.ui-color-blue.ui-state-disabled,
|
|
.ui-color-blue:disabled {
|
|
color: T041;
|
|
background-color: W011;
|
|
}
|
|
.ui-grid-col-1 > .ui-btn {
|
|
border-left: solid 1px B011;
|
|
}
|
|
.ui-grid-col-2 > .ui-btn {
|
|
border-left: solid 1px B011;
|
|
}
|
|
.ui-grid-col-3 > .ui-btn {
|
|
border-left: solid 1px B011;
|
|
}
|
|
/***************************************************************************
|
|
circle progress bar
|
|
***************************************************************************/
|
|
.ui-progressbar .ui-progressbar-value .ui-progressbar-value-left {
|
|
border: 0.5rem solid B065L2;
|
|
}
|
|
.ui-progressbar .ui-progressbar-value .ui-progressbar-value-right {
|
|
border: 0.5rem solid B065L2;
|
|
}
|
|
.ui-progressbar .ui-progressbar-bg {
|
|
border: 0.5rem solid B065L3;
|
|
}
|
|
.ui-progressbar.ui-progressbar-small .ui-progressbar-value .ui-progressbar-value-left,
|
|
.ui-progressbar.ui-progressbar-small .ui-progressbar-value .ui-progressbar-value-right {
|
|
border: 0.25rem solid B065L2;
|
|
}
|
|
.ui-progressbar.ui-progressbar-small .ui-progressbar-bg {
|
|
border: 0.25rem solid B065L3;
|
|
}
|
|
.ui-progressbar-end-point {
|
|
position: absolute;
|
|
z-index: 1000;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: #37a1ed;
|
|
border-radius: 50%;
|
|
left: 180px;
|
|
top: 180px;
|
|
transform: translate(-50%, -50%);
|
|
transform-origin: center center;
|
|
display: none;
|
|
}
|
|
.ui-progressbar-end-point::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(55, 161, 237, 0.5);
|
|
left: 0;
|
|
right: 0;
|
|
border-radius: 50%;
|
|
transform: scale(1);
|
|
transition-property: transform;
|
|
transition-duration: .25s;
|
|
transition-timing-function: ease-out;
|
|
}
|
|
.ui-progressbar-end-point-active {
|
|
display: block;
|
|
}
|
|
.ui-progressbar-end-point-pressed::after {
|
|
content: "";
|
|
transform: scale(2);
|
|
}
|
|
/***************************************************************************
|
|
circular index scroll bar
|
|
***************************************************************************/
|
|
.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator {
|
|
background-color: B0731;
|
|
}
|
|
.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-text {
|
|
color: T0312P;
|
|
}
|
|
.ui-indexscrollbar {
|
|
display: none;
|
|
}
|
|
/***************************************************************************
|
|
drawer
|
|
***************************************************************************/
|
|
.ui-drawer {
|
|
background-color: B0511D;
|
|
border-radius: 50%;
|
|
}
|
|
.ui-drawer-overlay {
|
|
background-color: B0511D;
|
|
}
|
|
/***************************************************************************
|
|
progress
|
|
***************************************************************************/
|
|
@-webkit-keyframes indeterminate {
|
|
0% {
|
|
-webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate1_holo_dark.png);
|
|
-webkit-mask-repeat: no-repeat;
|
|
background-color: B065L6;
|
|
}
|
|
25% {
|
|
-webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate2_holo_dark.png);
|
|
-webkit-mask-repeat: no-repeat;
|
|
background-color: B065L6;
|
|
}
|
|
50% {
|
|
-webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate3_holo_dark.png);
|
|
-webkit-mask-repeat: no-repeat;
|
|
background-color: B065L6;
|
|
}
|
|
75% {
|
|
-webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate4_holo_dark.png);
|
|
-webkit-mask-repeat: no-repeat;
|
|
background-color: B065L6;
|
|
}
|
|
100% {
|
|
-webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate5_holo_dark.png);
|
|
-webkit-mask-repeat: no-repeat;
|
|
background-color: B065L6;
|
|
}
|
|
}
|
|
progress {
|
|
color: T011;
|
|
}
|
|
progress::-webkit-progress-bar {
|
|
background-color: B065L3;
|
|
}
|
|
progress::-webkit-progress-value {
|
|
background-color: B065L2;
|
|
}
|
|
progress.ui-progress-indeterminate::-webkit-progress-bar {
|
|
background-color: B065L2;
|
|
}
|
|
/***********************
|
|
Processing
|
|
***********************/
|
|
@keyframes fullprocess {
|
|
0% {
|
|
mask-position: 0vw 0vw;
|
|
}
|
|
2% {
|
|
mask-position: -100vw 0vw;
|
|
}
|
|
3% {
|
|
mask-position: -200vw 0vw;
|
|
}
|
|
5% {
|
|
mask-position: -300vw 0vw;
|
|
}
|
|
7% {
|
|
mask-position: -400vw 0vw;
|
|
}
|
|
8% {
|
|
mask-position: -500vw 0vw;
|
|
}
|
|
10% {
|
|
mask-position: -600vw 0vw;
|
|
}
|
|
12% {
|
|
mask-position: 0vw -100vw;
|
|
}
|
|
14% {
|
|
mask-position: -100vw -100vw;
|
|
}
|
|
15% {
|
|
mask-position: -200vw -100vw;
|
|
}
|
|
17% {
|
|
mask-position: -300vw -100vw;
|
|
}
|
|
19% {
|
|
mask-position: -400vw -100vw;
|
|
}
|
|
20% {
|
|
mask-position: -500vw -100vw;
|
|
}
|
|
22% {
|
|
mask-position: -600vw -100vw;
|
|
}
|
|
24% {
|
|
mask-position: 0vw -200vw;
|
|
}
|
|
25% {
|
|
mask-position: -100vw -200vw;
|
|
}
|
|
27% {
|
|
mask-position: -200vw -200vw;
|
|
}
|
|
29% {
|
|
mask-position: -300vw -200vw;
|
|
}
|
|
31% {
|
|
mask-position: -400vw -200vw;
|
|
}
|
|
32% {
|
|
mask-position: -500vw -200vw;
|
|
}
|
|
34% {
|
|
mask-position: -600vw -200vw;
|
|
}
|
|
36% {
|
|
mask-position: 0vw -300vw;
|
|
}
|
|
37% {
|
|
mask-position: -100vw -300vw;
|
|
}
|
|
39% {
|
|
mask-position: -200vw -300vw;
|
|
}
|
|
41% {
|
|
mask-position: -300vw -300vw;
|
|
}
|
|
42% {
|
|
mask-position: -400vw -300vw;
|
|
}
|
|
44% {
|
|
mask-position: -500vw -300vw;
|
|
}
|
|
46% {
|
|
mask-position: -600vw -300vw;
|
|
}
|
|
47% {
|
|
mask-position: 0vw -400vw;
|
|
}
|
|
49% {
|
|
mask-position: -100vw -400vw;
|
|
}
|
|
51% {
|
|
mask-position: -200vw -400vw;
|
|
}
|
|
53% {
|
|
mask-position: -300vw -400vw;
|
|
}
|
|
54% {
|
|
mask-position: -400vw -400vw;
|
|
}
|
|
56% {
|
|
mask-position: -500vw -400vw;
|
|
}
|
|
58% {
|
|
mask-position: -600vw -400vw;
|
|
}
|
|
59% {
|
|
mask-position: 0vw -500vw;
|
|
}
|
|
61% {
|
|
mask-position: -100vw -500vw;
|
|
}
|
|
63% {
|
|
mask-position: -200vw -500vw;
|
|
}
|
|
64% {
|
|
mask-position: -300vw -500vw;
|
|
}
|
|
66% {
|
|
mask-position: -400vw -500vw;
|
|
}
|
|
68% {
|
|
mask-position: -500vw -500vw;
|
|
}
|
|
69% {
|
|
mask-position: -600vw -500vw;
|
|
}
|
|
71% {
|
|
mask-position: 0vw -600vw;
|
|
}
|
|
73% {
|
|
mask-position: -100vw -600vw;
|
|
}
|
|
75% {
|
|
mask-position: -200vw -600vw;
|
|
}
|
|
76% {
|
|
mask-position: -300vw -600vw;
|
|
}
|
|
78% {
|
|
mask-position: -400vw -600vw;
|
|
}
|
|
80% {
|
|
mask-position: -500vw -600vw;
|
|
}
|
|
81% {
|
|
mask-position: -600vw -600vw;
|
|
}
|
|
83% {
|
|
mask-position: 0vw -700vw;
|
|
}
|
|
85% {
|
|
mask-position: -100vw -700vw;
|
|
}
|
|
86% {
|
|
mask-position: -200vw -700vw;
|
|
}
|
|
88% {
|
|
mask-position: -300vw -700vw;
|
|
}
|
|
90% {
|
|
mask-position: -400vw -700vw;
|
|
}
|
|
92% {
|
|
mask-position: -500vw -700vw;
|
|
}
|
|
93% {
|
|
mask-position: -600vw -700vw;
|
|
}
|
|
95% {
|
|
mask-position: 0vw -800vw;
|
|
}
|
|
97% {
|
|
mask-position: -100vw -800vw;
|
|
}
|
|
98% {
|
|
mask-position: -200vw -800vw;
|
|
}
|
|
100% {
|
|
mask-position: -300vw -800vw;
|
|
}
|
|
}
|
|
.ui-page-active .ui-processing {
|
|
opacity: 1;
|
|
}
|
|
.ui-processing {
|
|
opacity: 0;
|
|
background-color: B065L6;
|
|
transition: opacity 0.2s linear;
|
|
}
|
|
.ui-processing.ui-processing-alternate {
|
|
background-color: B082;
|
|
}
|
|
.ui-processing.ui-processing-on-center {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.ui-processing.ui-processing-full-size {
|
|
mask-image: url("images/Processing/processingfull.png");
|
|
mask-repeat: no-repeat;
|
|
animation-duration: 1s;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: step-start;
|
|
animation-name: fullprocess;
|
|
pointer-events: none;
|
|
position: fixed;
|
|
width: 100vw;
|
|
height: 100vw;
|
|
top: 0;
|
|
left: 0;
|
|
margin: 0;
|
|
}
|
|
/** widget interactions **/
|
|
.ui-listview li .ui-processing {
|
|
position: absolute;
|
|
right: 2rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.ui-scrollbar-bouncing-effect {
|
|
animation-duration: .7s;
|
|
animation-timing-function: ease;
|
|
background-color: B018E;
|
|
}
|
|
.ui-scrollbar-bouncing-effect::before {
|
|
animation-duration: .7s;
|
|
animation-timing-function: ease;
|
|
animation-fill-mode: forwards;
|
|
background-color: B019;
|
|
}
|
|
.ui-scrollbar-bouncing-effect.ui-top,
|
|
.ui-scrollbar-bouncing-effect.ui-bottom {
|
|
width: 100%;
|
|
height: 5.5rem;
|
|
left: 0;
|
|
mask-size: 100% 100%;
|
|
}
|
|
.ui-scrollbar-bouncing-effect.ui-top::before,
|
|
.ui-scrollbar-bouncing-effect.ui-bottom::before {
|
|
width: 100%;
|
|
height: 5.5rem;
|
|
mask-size: 100% 100%;
|
|
}
|
|
.ui-scrollbar-bouncing-effect.ui-left,
|
|
.ui-scrollbar-bouncing-effect.ui-right {
|
|
width: 5.5rem;
|
|
height: 100%;
|
|
top: 0;
|
|
mask-size: 100% 100%;
|
|
}
|
|
.ui-scrollbar-bouncing-effect.ui-left::before,
|
|
.ui-scrollbar-bouncing-effect.ui-right::before {
|
|
width: 5.5rem;
|
|
height: 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
.ui-scrollbar-bouncing-effect.ui-top {
|
|
top: 0;
|
|
mask-image: url("images/Scroller/bouncing_circle_top_glow.png");
|
|
}
|
|
.ui-scrollbar-bouncing-effect.ui-top::before {
|
|
mask-image: url("images/Scroller/bouncing_circle_top_edge.png");
|
|
}
|
|
.ui-scrollbar-bouncing-effect.ui-bottom {
|
|
bottom: 0;
|
|
mask-image: url("images/Scroller/bouncing_circle_bottom_glow.png");
|
|
}
|
|
.ui-scrollbar-bouncing-effect.ui-bottom::before {
|
|
mask-image: url("images/Scroller/bouncing_circle_bottom_edge.png");
|
|
}
|
|
.ui-scrollbar-bouncing-effect.ui-left {
|
|
left: 0;
|
|
mask-image: url("images/Scroller/bouncing_circle_left_glow.png");
|
|
}
|
|
.ui-scrollbar-bouncing-effect.ui-left::before {
|
|
mask-image: url("images/Scroller/bouncing_circle_left_edge.png");
|
|
}
|
|
.ui-scrollbar-bouncing-effect.ui-right {
|
|
right: 0;
|
|
mask-image: url("images/Scroller/bouncing_circle_right_glow.png");
|
|
}
|
|
.ui-scrollbar-bouncing-effect.ui-right::before {
|
|
mask-image: url("images/Scroller/bouncing_circle_right_edge.png");
|
|
}
|
|
@keyframes -ui-bouncing-show-additional {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
42% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: .7;
|
|
}
|
|
}
|
|
@keyframes ui-bouncing-show-top {
|
|
0% {
|
|
transform: translate3d(0, -100%, 0);
|
|
}
|
|
42% {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
100% {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
@keyframes ui-bouncing-show-left {
|
|
0% {
|
|
transform: translate3d(-100%, 0, 0);
|
|
}
|
|
42% {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
100% {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
@keyframes ui-bouncing-show-right {
|
|
0% {
|
|
transform: translate3d(100%, 0, 0);
|
|
}
|
|
42% {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
100% {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
@keyframes ui-bouncing-show-bottom {
|
|
0% {
|
|
transform: translate3d(0, 100%, 0);
|
|
}
|
|
42% {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
100% {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
@keyframes -ui-bouncing-hide-additional {
|
|
0% {
|
|
opacity: .7;
|
|
}
|
|
42% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes ui-bouncing-hide-left {
|
|
0% {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
42% {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
100% {
|
|
transform: translate3d(-100%, 0, 0);
|
|
}
|
|
}
|
|
@keyframes ui-bouncing-hide-right {
|
|
0% {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
42% {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
100% {
|
|
transform: translate3d(100%, 0, 0);
|
|
}
|
|
}
|
|
@keyframes ui-bouncing-hide-bottom {
|
|
0% {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
42% {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
100% {
|
|
transform: translate3d(0, 100%, 0);
|
|
}
|
|
}
|
|
@keyframes ui-bouncing-hide-top {
|
|
0% {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
42% {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
100% {
|
|
transform: translate3d(0, -100%, 0);
|
|
}
|
|
}
|
|
.ui-scrollbar-bouncing-effect.ui-show {
|
|
display: block;
|
|
}
|
|
.ui-scrollbar-bouncing-effect.ui-show.ui-left {
|
|
animation-name: ui-bouncing-show-left;
|
|
}
|
|
.ui-scrollbar-bouncing-effect.ui-show.ui-right {
|
|
animation-name: ui-bouncing-show-right;
|
|
}
|
|
.ui-scrollbar-bouncing-effect.ui-show.ui-bottom {
|
|
animation-name: ui-bouncing-show-bottom;
|
|
}
|
|
.ui-scrollbar-bouncing-effect.ui-show.ui-top {
|
|
animation-name: ui-bouncing-show-top;
|
|
}
|
|
.ui-scrollbar-bouncing-effect.ui-show::before {
|
|
animation-name: -ui-bouncing-show-additional;
|
|
}
|
|
.ui-scrollbar-bouncing-effect.ui-hide {
|
|
animation-duration: .3s;
|
|
display: block;
|
|
}
|
|
.ui-scrollbar-bouncing-effect.ui-hide.ui-left {
|
|
animation-name: ui-bouncing-hide-left;
|
|
}
|
|
.ui-scrollbar-bouncing-effect.ui-hide.ui-right {
|
|
animation-name: ui-bouncing-hide-right;
|
|
}
|
|
.ui-scrollbar-bouncing-effect.ui-hide.ui-bottom {
|
|
animation-name: ui-bouncing-hide-bottom;
|
|
}
|
|
.ui-scrollbar-bouncing-effect.ui-hide.ui-top {
|
|
animation-name: ui-bouncing-hide-top;
|
|
}
|
|
.ui-scrollbar-bouncing-effect.ui-hide::before {
|
|
animation-duration: .3s;
|
|
animation-name: -ui-bouncing-hide-additional;
|
|
}
|
|
.is-circle-test {
|
|
width: 1px;
|
|
}
|
|
.ui-selector {
|
|
background-color: B01153;
|
|
}
|
|
.ui-selector .ui-item {
|
|
background-color: B0554;
|
|
}
|
|
.ui-selector .ui-item:active {
|
|
background-color: B0554P;
|
|
}
|
|
.ui-selector .ui-item.ui-item-active:active {
|
|
background-color: B0554;
|
|
}
|
|
.ui-selector .ui-layer.ui-layer-prev,
|
|
.ui-selector .ui-layer.ui-layer-next {
|
|
background-color: B058;
|
|
}
|
|
.ui-selector .ui-layer.ui-layer-prev:active,
|
|
.ui-selector .ui-layer.ui-layer-next:active {
|
|
background-color: B058P;
|
|
}
|
|
.ui-selector .ui-selector-indicator {
|
|
font-size: 1.875rem;
|
|
}
|
|
.ui-selector .ui-selector-indicator .ui-selector-indicator-text {
|
|
color: T117;
|
|
}
|
|
.ui-selector .ui-selector-indicator .ui-selector-indicator-subtext {
|
|
color: T118;
|
|
}
|
|
.ui-selector .ui-selector-indicator:active + .ui-selector-indicator-arrow::before {
|
|
background-color: B0116P;
|
|
}
|
|
.ui-selector .ui-selector-indicator-active + .ui-selector-indicator-arrow::before {
|
|
background-color: B0116P;
|
|
}
|
|
.ui-selector .ui-selector-indicator-arrow::before {
|
|
background-color: B0116;
|
|
}
|
|
.ui-selector.ui-selector-edit-mode.ui-selector-reorder .ui-item .ui-item-icon-remove-left,
|
|
.ui-selector.ui-selector-edit-mode.ui-selector-reorder .ui-item .ui-item-icon-remove-right {
|
|
display: none;
|
|
}
|
|
.ui-selector.ui-selector-edit-mode.ui-selector-reorder .ui-item.ui-item-plus {
|
|
pointer-events: none;
|
|
}
|
|
.ui-selector.ui-selector-edit-mode.ui-selector-reorder .ui-selector-indicator,
|
|
.ui-selector.ui-selector-edit-mode.ui-selector-reorder .ui-selector-indicator-arrow {
|
|
pointer-events: none;
|
|
}
|
|
.ui-selector.ui-selector-edit-mode.ui-selector-reorder .ui-layer:not(.ui-layer-active):not(.ui-layer-next):not(.ui-layer-prev) {
|
|
pointer-events: none;
|
|
}
|
|
.ui-selector.ui-selector-edit-mode .ui-selector-indicator > :not(.ui-selector-indicator-text) {
|
|
display: none;
|
|
}
|
|
.ui-selector.ui-selector-edit-mode .ui-selector-indicator-arrow::before {
|
|
background: none;
|
|
}
|
|
.ui-selector.ui-selector-edit-mode .ui-selector-indicator:active + .ui-selector-indicator-arrow::before {
|
|
background: none;
|
|
}
|
|
.ui-selector.ui-selector-edit-mode .ui-item.ui-item-placeholder,
|
|
.ui-selector.ui-selector-edit-mode .ui-item.ui-item-removable.ui-item-placeholder {
|
|
box-sizing: border-box;
|
|
border: 0.0625rem solid B1681;
|
|
background: none;
|
|
}
|
|
.ui-selector.ui-selector-edit-mode .ui-item.ui-item-placeholder .ui-item-icon-remove-left,
|
|
.ui-selector.ui-selector-edit-mode .ui-item.ui-item-removable.ui-item-placeholder .ui-item-icon-remove-left,
|
|
.ui-selector.ui-selector-edit-mode .ui-item.ui-item-placeholder .ui-item-icon-remove-right,
|
|
.ui-selector.ui-selector-edit-mode .ui-item.ui-item-removable.ui-item-placeholder .ui-item-icon-remove-right {
|
|
display: none;
|
|
}
|
|
.ui-selector.ui-selector-edit-mode .ui-item.ui-item-placeholder::before,
|
|
.ui-selector.ui-selector-edit-mode .ui-item.ui-item-removable.ui-item-placeholder::before,
|
|
.ui-selector.ui-selector-edit-mode .ui-item.ui-item-placeholder::after,
|
|
.ui-selector.ui-selector-edit-mode .ui-item.ui-item-removable.ui-item-placeholder::after {
|
|
display: none;
|
|
}
|
|
@keyframes dragItem {
|
|
0% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: scale(1.21428571);
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
.ui-selector.ui-selector-edit-mode .ui-item.ui-item-moved {
|
|
position: fixed;
|
|
width: 3.5rem;
|
|
height: 3.5rem;
|
|
z-index: 101;
|
|
visibility: visible;
|
|
opacity: 0.7;
|
|
transform: scale(1.21428571);
|
|
pointer-events: none;
|
|
margin: -1.75rem;
|
|
animation: 333ms dragItem;
|
|
}
|
|
.ui-selector.ui-selector-edit-mode .ui-item.ui-item-moved-end {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
.ui-selector.ui-selector-edit-mode .ui-item.ui-item-moved .ui-item-icon-remove-left,
|
|
.ui-selector.ui-selector-edit-mode .ui-item.ui-item-moved .ui-item-icon-remove-right {
|
|
display: none;
|
|
}
|
|
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-left,
|
|
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-right {
|
|
position: absolute;
|
|
width: 1.875rem;
|
|
height: 1.875rem;
|
|
top: -0.125rem;
|
|
}
|
|
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-left:active .ui-item-icon-remove-bg,
|
|
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-right:active .ui-item-icon-remove-bg {
|
|
background-color: B1672P;
|
|
}
|
|
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-left:active::after,
|
|
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-right:active::after {
|
|
background-color: B1671P;
|
|
}
|
|
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-left .ui-item-icon-remove-bg,
|
|
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-right .ui-item-icon-remove-bg {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: B1672;
|
|
mask-image: url("images/Selector/b_rotary_selector_edit_mode_ic_delete_bg.png");
|
|
}
|
|
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-left::before,
|
|
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-right::before,
|
|
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-left::after,
|
|
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-right::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-left::before,
|
|
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-right::before {
|
|
background-color: B1673;
|
|
mask-image: url("images/Selector/b_rotary_selector_edit_mode_ic_delete_bg_ef.png");
|
|
}
|
|
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-left::after,
|
|
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-right::after {
|
|
background-color: B1671;
|
|
mask-image: url("images/Selector/b_rotary_selector_edit_mode_ic_delete.png");
|
|
}
|
|
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-right {
|
|
right: -0.1875rem;
|
|
transform-origin: top right;
|
|
}
|
|
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-right .ui-item-icon-remove-bg,
|
|
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-right::before,
|
|
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-right::after {
|
|
transform: scaleX(-1);
|
|
}
|
|
.ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-left {
|
|
transform-origin: top left;
|
|
left: -0.1875rem;
|
|
}
|
|
.ui-selector.ui-selector-edit-mode .ui-item-removable.ui-item-removed.ui-item {
|
|
opacity: 0;
|
|
transition: opacity 200ms;
|
|
}
|
|
.ui-selector.ui-selector-edit-mode .ui-item-plus {
|
|
background-color: B0554;
|
|
mask-image: url("images/Selector/b_rotary_selector_edit_mode_ic_add.png");
|
|
mask-size: 100%;
|
|
}
|
|
/* ------------------------- Selector List for bezelless watches ------------------------- */
|
|
.ui-bezelless-selector .ui-more {
|
|
z-index: 1;
|
|
}
|
|
.ui-bezelless-selector .ui-listview li img {
|
|
width: 3.125rem;
|
|
height: 3.125rem;
|
|
}
|
|
.ui-bezelless-selector .thumb-container {
|
|
display: inline-block;
|
|
width: 3.125rem;
|
|
height: 3.125rem;
|
|
position: absolute;
|
|
left: 2.5rem;
|
|
background: white;
|
|
border-radius: 6.25rem;
|
|
}
|
|
.ui-bezelless-selector .ui-arc-listview-carousel.ui-arc-listview-5 li.ui-arc-listview-selected {
|
|
line-height: 3.125rem;
|
|
}
|
|
.ui-slider-container {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
}
|
|
.ui-slider-container .ui-slider-icon {
|
|
width: 9.375rem;
|
|
height: 9.375rem;
|
|
margin: 0 auto;
|
|
}
|
|
.ui-slider-container .ui-slider-titles {
|
|
height: 4.625rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
}
|
|
.ui-slider-container .ui-slider-titles .ui-slider-title {
|
|
color: T117;
|
|
font-size: 1.875rem;
|
|
line-height: 1.875rem;
|
|
margin-top: 0.4375rem;
|
|
}
|
|
.ui-slider-container .ui-slider-titles .ui-slider-subtitle {
|
|
color: T118;
|
|
font-size: 1.8125rem;
|
|
line-height: 1.875rem;
|
|
}
|
|
.ui-slider-container .ui-slider-buttons {
|
|
height: 4rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
}
|
|
.ui-slider-container .ui-slider-buttons .ui-slider-minus {
|
|
width: 2.75rem;
|
|
height: 100%;
|
|
background: url('images/Slider/b_slider_icon_minus.png') no-repeat center center;
|
|
z-index: 1;
|
|
}
|
|
.ui-slider-container .ui-slider-buttons .ui-slider-number {
|
|
height: 100%;
|
|
color: T014;
|
|
font-size: 2.5rem;
|
|
width: 4.125rem;
|
|
margin: 0 -1.25rem;
|
|
line-height: 3.25rem;
|
|
margin-top: 0.3125rem;
|
|
}
|
|
.ui-slider-container .ui-slider-buttons .ui-slider-plus {
|
|
background: url('images/Slider/b_slider_icon_plus.png') no-repeat center center;
|
|
width: 2.75rem;
|
|
height: 100%;
|
|
z-index: 1;
|
|
}
|
|
a.ui-hyperlink {
|
|
color: T1611;
|
|
}
|
|
a.ui-hyperlink:active,
|
|
a.ui-hyperlink:hover {
|
|
color: T1611P;
|
|
}
|
|
.ui-arc-listview {
|
|
width: 22.5rem;
|
|
display: block;
|
|
overflow: hidden;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.ui-arc-listview-carousel {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.ui-arc-listview-carousel-item {
|
|
width: 22.5rem;
|
|
position: absolute;
|
|
height: 6.75rem;
|
|
}
|
|
.ui-arc-listview-carousel-item li {
|
|
top: 3.375rem;
|
|
transform: translateY(-50%);
|
|
}
|
|
.ui-arc-listview-5 .ui-arc-listview-carousel-item {
|
|
height: 4.375rem;
|
|
}
|
|
.ui-arc-listview-5 .ui-arc-listview-carousel-item li {
|
|
top: 2.1875rem;
|
|
transform: translateY(-50%);
|
|
}
|
|
.ui-arc-listview-selection {
|
|
opacity: 0;
|
|
position: absolute;
|
|
transition: opacity 250ms;
|
|
pointer-events: none;
|
|
transform: translateY(-50%);
|
|
mask-image: url("images/List/b_list_focus_bg.png");
|
|
mask-size: 100% 100%;
|
|
top: 50%;
|
|
width: 22.5rem;
|
|
height: 7.5rem;
|
|
left: 0;
|
|
right: 0;
|
|
border-radius: 4.5rem;
|
|
background-color: B0210;
|
|
}
|
|
.ui-arc-listview-selection-show {
|
|
opacity: 1;
|
|
}
|
|
.ui-arc-listview li,
|
|
.ui-arc-listview-carousel li {
|
|
justify-content: space-around;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.ui-arc-listview li:not(.ui-li-group-index):not(.ui-listview-divider),
|
|
.ui-arc-listview-carousel li:not(.ui-li-group-index):not(.ui-listview-divider) {
|
|
min-height: 6.75rem;
|
|
vertical-align: middle;
|
|
}
|
|
.ui-arc-listview li.ui-li-group-index,
|
|
.ui-arc-listview-carousel li.ui-li-group-index,
|
|
.ui-arc-listview li.ui-listview-divider,
|
|
.ui-arc-listview-carousel li.ui-listview-divider {
|
|
margin-top: 0;
|
|
border: 0;
|
|
flex-direction: row;
|
|
}
|
|
.ui-arc-listview li.ui-li-group-index ~ li:not(.ui-li-group-index):not(.ui-listview-divider),
|
|
.ui-arc-listview-carousel li.ui-li-group-index ~ li:not(.ui-li-group-index):not(.ui-listview-divider),
|
|
.ui-arc-listview li.ui-listview-divider ~ li:not(.ui-li-group-index):not(.ui-listview-divider),
|
|
.ui-arc-listview-carousel li.ui-listview-divider ~ li:not(.ui-li-group-index):not(.ui-listview-divider) {
|
|
margin-top: 0;
|
|
}
|
|
.ui-arc-listview.ui-arc-listview-5 li:not(.ui-li-group-index):not(.ui-listview-divider),
|
|
.ui-arc-listview-carousel.ui-arc-listview-5 li:not(.ui-li-group-index):not(.ui-listview-divider) {
|
|
min-height: 4.375rem;
|
|
}
|
|
.ui-arc-listview.ui-arc-listview-5 li.ui-arc-listview-selected,
|
|
.ui-arc-listview-carousel.ui-arc-listview-5 li.ui-arc-listview-selected {
|
|
line-height: 4.375rem;
|
|
}
|
|
.ui-arc-listview-carousel {
|
|
/* disable some unnecessary listview styles */
|
|
}
|
|
.ui-arc-listview-carousel .ui-listview {
|
|
padding-bottom: 0;
|
|
}
|
|
.ui-force-relative-li-children li {
|
|
position: relative !important;
|
|
}
|
|
/* Keyboard is visible, screen height is lower then half of screen */
|
|
@media (max-height: 180px) {
|
|
.ui-arc-listview-carousel li input[type=text]:focus,
|
|
.ui-arc-listview-carousel li input[type=password]:focus {
|
|
position: fixed;
|
|
height: auto;
|
|
border: none;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
top: auto;
|
|
margin-top: auto;
|
|
padding: 1.625rem 3.125rem 0.3125rem 3.125rem;
|
|
}
|
|
}
|
|
.ui-number-picker-container {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 6.875rem;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
position: relative;
|
|
top: 0.5625rem;
|
|
}
|
|
.ui-number-picker-container .ui-circleindicator {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1001;
|
|
pointer-events: none;
|
|
}
|
|
.ui-number-picker-container .ui-circleindicator .ui-animated {
|
|
transition-duration: 0.3s;
|
|
}
|
|
.ui-number-picker-container input[type="number"] {
|
|
display: none;
|
|
}
|
|
.ui-number-picker-container .ui-number-picker-label {
|
|
order: 1;
|
|
font-size: 1.5rem;
|
|
line-height: 1.5625rem;
|
|
color: T273S;
|
|
display: block;
|
|
width: 5rem;
|
|
opacity: 1;
|
|
transition-duration: 300ms, 300ms;
|
|
transition-property: opacity, top;
|
|
transition-timing-function: linear;
|
|
}
|
|
.ui-number-picker-container .ui-number-picker-label.hidden {
|
|
opacity: 0;
|
|
display: block;
|
|
pointer-events: none;
|
|
top: -0.75rem;
|
|
}
|
|
.ui-number-picker-container .ui-number-picker-number {
|
|
order: 2;
|
|
font-size: 3.125rem;
|
|
line-height: 5.3125rem;
|
|
margin-top: -0.375rem;
|
|
color: T2751;
|
|
min-width: 5rem;
|
|
display: block;
|
|
padding-top: 0.4375rem;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.ui-number-picker-container .ui-number-picker-number.ui-spin {
|
|
margin-top: 0.5rem;
|
|
height: 3.125rem;
|
|
width: auto;
|
|
}
|
|
.ui-number-picker-container .ui-number-picker-number.ui-spin.enabled {
|
|
margin-top: 0.5rem;
|
|
height: 100%;
|
|
}
|
|
.ui-number-picker-container .ui-number-picker-number.ui-spin.enabled .ui-spin-item {
|
|
color: #4dcfff;
|
|
opacity: 0.5;
|
|
}
|
|
.ui-number-picker-container .ui-number-picker-number.ui-spin.enabled .ui-spin-item-selected {
|
|
opacity: 1;
|
|
}
|
|
.ui-number-picker-container .ui-number-picker-number.ui-spin-enabling {
|
|
height: 100%;
|
|
}
|
|
.ui-number-picker-container.ui-number-picker-disabled .ui-number-picker-number {
|
|
color: T273D;
|
|
}
|
|
.ui-number-picker-container .ui-number-picker-number-pressed {
|
|
color: T275P;
|
|
}
|
|
.ui-number-picker-container .ui-number-picker-number-blink {
|
|
animation: ui-number-picker-number-blink 1s infinite;
|
|
}
|
|
.ui-number-picker-container .ui-spin {
|
|
height: 3.125rem;
|
|
line-height: normal;
|
|
margin-top: 0;
|
|
padding: 0;
|
|
width: 3.75rem;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.ui-number-picker-container .ui-spin.enabled {
|
|
height: 100%;
|
|
}
|
|
.ui-number-picker-container .hidden {
|
|
display: none;
|
|
}
|
|
.ui-number-picker-container .ui-spin-item {
|
|
font-size: 3.125rem;
|
|
height: 2.375rem;
|
|
}
|
|
.ui-number-picker-container:not(.ui-time-picker) span {
|
|
margin-left: 8.75rem;
|
|
}
|
|
.ui-number-picker-container:not(.ui-time-picker) label {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translate(-50%);
|
|
}
|
|
.ui-time-picker.ui-number-picker-container {
|
|
height: 6.875rem;
|
|
display: block;
|
|
}
|
|
.ui-time-picker .ui-time-picker-container-hours {
|
|
float: left;
|
|
height: inherit;
|
|
width: 5rem;
|
|
}
|
|
.ui-time-picker .ui-time-picker-colon-container {
|
|
float: left;
|
|
height: 5.3125rem;
|
|
width: 0.75rem;
|
|
margin-left: 0.5rem;
|
|
padding-top: 2.8125rem;
|
|
}
|
|
.ui-time-picker .ui-time-picker-colon-container span {
|
|
font-size: 2.5rem;
|
|
}
|
|
.ui-time-picker div {
|
|
font-size: 2.5rem;
|
|
}
|
|
.ui-time-picker div label {
|
|
font-size: 1rem;
|
|
}
|
|
.ui-time-picker .ui-time-picker-active-label-animation {
|
|
animation: changeColor 1s infinite;
|
|
color: T271S;
|
|
}
|
|
.ui-time-picker .ui-time-picker-container-minutes {
|
|
float: left;
|
|
height: inherit;
|
|
margin-left: 0.5rem;
|
|
width: 5rem;
|
|
}
|
|
.ui-time-picker .ui-time-picker-container-ampm {
|
|
float: left;
|
|
height: 4.0625rem;
|
|
margin-top: 2.0625rem;
|
|
margin-left: 0.5rem;
|
|
width: 6.25rem;
|
|
overflow-y: hidden;
|
|
}
|
|
.ui-time-picker .ui-time-picker-container-ampm div {
|
|
height: 8.125rem;
|
|
position: relative;
|
|
}
|
|
.ui-time-picker .ui-time-picker-container-ampm div span {
|
|
font-size: 3.125rem;
|
|
height: 4.0625rem;
|
|
line-height: 4.0625rem;
|
|
width: 6.25rem;
|
|
display: inline-block;
|
|
position: relative;
|
|
color: T2741;
|
|
}
|
|
.ui-time-picker .ui-time-picker-container-ampm-pressed div span {
|
|
color: T274P;
|
|
}
|
|
.ui-time-picker .ui-number-picker-label {
|
|
display: block;
|
|
width: 5rem;
|
|
font-size: 1.5rem;
|
|
height: 2.0625rem;
|
|
position: absolute;
|
|
opacity: 1;
|
|
top: -0.375rem;
|
|
transition-duration: 300ms, 300ms;
|
|
transition-property: opacity, top;
|
|
transition-timing-function: linear;
|
|
}
|
|
.ui-time-picker .ui-number-picker-label-hidden {
|
|
opacity: 0;
|
|
display: block;
|
|
pointer-events: none;
|
|
top: -0.75rem;
|
|
}
|
|
.ui-time-picker .ui-number-picker-number {
|
|
width: 5rem;
|
|
font-size: 4.0625rem;
|
|
display: block;
|
|
height: 5.3125rem;
|
|
margin-top: 1.25rem;
|
|
padding-top: 0;
|
|
}
|
|
.ui-time-picker .ui-number-picker-number.ui-spin {
|
|
margin-top: 2rem;
|
|
height: 4.0625rem;
|
|
width: auto;
|
|
}
|
|
.ui-time-picker .ui-number-picker-number.ui-spin.enabled {
|
|
margin-top: 0.625rem;
|
|
height: 100%;
|
|
}
|
|
.ui-time-picker .ui-number-picker-number.ui-spin.enabled .ui-spin-item {
|
|
color: #4dcfff;
|
|
opacity: 0.5;
|
|
}
|
|
.ui-time-picker .ui-number-picker-number.ui-spin.enabled .ui-spin-item-selected {
|
|
opacity: 1;
|
|
}
|
|
.ui-time-picker .ui-number-picker-number .ui-spin-item {
|
|
font-size: 4.0625rem;
|
|
height: 3.125rem;
|
|
}
|
|
.ui-time-picker-hidden {
|
|
opacity: 0;
|
|
}
|
|
.ui-time-picker .ui-polar .disable-transform.pointer {
|
|
transition: none;
|
|
}
|
|
.ui-time-picker .ui-circleindicator .ui-animated.ui-time-picker-disable-animation {
|
|
transition: none;
|
|
display: none;
|
|
}
|
|
.ui-circleindicator.ui-time-picker-background {
|
|
background-image: url("images/TimePicker/time_picker_bg.png");
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
}
|
|
.ui-time-picker-am-pm {
|
|
margin-left: 2rem;
|
|
}
|
|
.ui-time-picker-no-am-pm {
|
|
margin-left: 5.375rem;
|
|
}
|
|
@keyframes changeColor {
|
|
0% {
|
|
color: T271S;
|
|
}
|
|
49% {
|
|
color: T271S;
|
|
}
|
|
51% {
|
|
color: T271;
|
|
}
|
|
100% {
|
|
color: T271;
|
|
}
|
|
}
|
|
@keyframes showPM {
|
|
0% {
|
|
transform: translateY(0px);
|
|
}
|
|
100% {
|
|
transform: translateY(-65px);
|
|
}
|
|
}
|
|
@keyframes hidePM {
|
|
0% {
|
|
transform: translateY(-65px);
|
|
}
|
|
100% {
|
|
transform: translateY(0px);
|
|
}
|
|
}
|
|
.ui-time-picker-hide-pm {
|
|
animation: hidePM 300ms ease-out 0ms;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
.ui-time-picker-show-pm {
|
|
animation: showPM 300ms ease-out 0ms;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
.ui-colorpicker .ui-selector-indicator .ui-selector-indicator-text {
|
|
font-size: 0;
|
|
height: 6.25rem;
|
|
width: 6.25rem;
|
|
max-height: 6.25rem;
|
|
border-radius: 50%;
|
|
}
|
|
.ui-colorpicker .ui-selector-indicator-arrow:before {
|
|
background-color: white;
|
|
}
|
|
.ui-date-picker.ui-number-picker-container {
|
|
height: 6.875rem;
|
|
display: block;
|
|
}
|
|
.ui-date-picker.ui-number-picker-container input {
|
|
display: none;
|
|
}
|
|
.ui-date-picker.ui-number-picker-container span {
|
|
margin: -0.375rem 0 0 0;
|
|
text-align: center;
|
|
font-size: 3.125rem;
|
|
width: inherit;
|
|
}
|
|
.ui-date-picker.ui-number-picker-container .ui-number-picker-label {
|
|
margin: 0;
|
|
text-align: center;
|
|
height: 1.9375rem;
|
|
line-height: 1.9375rem;
|
|
font-size: 1.5rem;
|
|
width: inherit;
|
|
opacity: 1;
|
|
transition-duration: 300ms, 300ms;
|
|
transition-property: opacity, top;
|
|
transition-timing-function: linear;
|
|
}
|
|
.ui-date-picker.ui-number-picker-container .ui-number-picker-label-hidden {
|
|
opacity: 0;
|
|
display: block;
|
|
pointer-events: none;
|
|
top: -0.75rem;
|
|
}
|
|
.ui-date-picker.ui-number-picker-container .ui-spin-item {
|
|
height: 3.125rem;
|
|
}
|
|
.ui-date-picker .ui-date-picker-active-label-animation {
|
|
animation: changeColor 1s infinite;
|
|
color: T271S;
|
|
}
|
|
.ui-date-picker .ui-date-picker-container-month {
|
|
float: left;
|
|
height: inherit;
|
|
margin-left: 1.5rem;
|
|
width: 6rem;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
}
|
|
.ui-date-picker .ui-date-picker-container-month .ui-spin {
|
|
width: 6.875rem;
|
|
}
|
|
.ui-date-picker .ui-date-picker-container-day {
|
|
float: left;
|
|
height: inherit;
|
|
margin-left: 0.5rem;
|
|
width: 5rem;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
}
|
|
.ui-date-picker .ui-date-picker-container-day .ui-spin {
|
|
width: 4.0625rem;
|
|
}
|
|
.ui-date-picker .ui-date-picker-container-year {
|
|
float: left;
|
|
height: inherit;
|
|
margin-left: 0.5rem;
|
|
width: 7.5rem;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
}
|
|
.ui-date-picker .ui-date-picker-container-year .ui-spin {
|
|
width: 7.5rem;
|
|
}
|
|
.ui-date-picker .ui-date-picker-containter-dayname {
|
|
position: fixed;
|
|
width: 100%;
|
|
top: 14.4375rem;
|
|
opacity: 0.8;
|
|
font-size: 1.5rem;
|
|
line-height: 2rem;
|
|
height: 2rem;
|
|
padding: 0 2.8125rem;
|
|
color: T277;
|
|
}
|
|
.ui-date-picker-hidden {
|
|
display: none;
|
|
}
|
|
.ui-date-picker .enabled .ui-spin-item {
|
|
color: #4dcfff;
|
|
opacity: 0.5;
|
|
}
|
|
.ui-date-picker .enabled .ui-spin-item-selected {
|
|
opacity: 1.0;
|
|
}
|
|
@keyframes changeColor {
|
|
0% {
|
|
color: T271S;
|
|
}
|
|
49% {
|
|
color: T271S;
|
|
}
|
|
51% {
|
|
color: T271;
|
|
}
|
|
100% {
|
|
color: T271;
|
|
}
|
|
}
|
|
input[type=text],
|
|
input[type=password],
|
|
input[type=search],
|
|
input[type=email] {
|
|
mask-image: url("images/TextInput/b_list_edit_field_bg.png");
|
|
mask-size: 100% 100%;
|
|
width: 18rem;
|
|
height: 3.875rem;
|
|
padding: 0.8125rem 1rem;
|
|
color: T016;
|
|
font-size: 1.75rem;
|
|
background-color: B02112;
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
input[type=text]:disabled,
|
|
input[type=password]:disabled,
|
|
input[type=search]:disabled,
|
|
input[type=email]:disabled {
|
|
color: T016D;
|
|
}
|
|
input[type=text]:focus + .ui-footer,
|
|
input[type=password]:focus + .ui-footer,
|
|
input[type=search]:focus + .ui-footer,
|
|
input[type=email]:focus + .ui-footer {
|
|
display: none;
|
|
}
|
|
input[type=text]:active,
|
|
input[type=password]:active,
|
|
input[type=search]:active,
|
|
input[type=email]:active {
|
|
background-color: #5B5B5B;
|
|
}
|
|
.ui-listview input[type=text]:focus,
|
|
.ui-arc-listview-carousel input[type=text]:focus,
|
|
.ui-listview input[type=password]:focus,
|
|
.ui-arc-listview-carousel input[type=password]:focus,
|
|
.ui-listview input[type=search]:focus,
|
|
.ui-arc-listview-carousel input[type=search]:focus,
|
|
.ui-listview input[type=email]:focus,
|
|
.ui-arc-listview-carousel input[type=email]:focus {
|
|
background-color: transparent;
|
|
color: B0215;
|
|
-webkit-text-fill-color: T142;
|
|
font-size: 1.875rem;
|
|
}
|
|
.ui-listview input[type=text]:active,
|
|
.ui-arc-listview-carousel input[type=text]:active,
|
|
.ui-listview input[type=password]:active,
|
|
.ui-arc-listview-carousel input[type=password]:active,
|
|
.ui-listview input[type=search]:active,
|
|
.ui-arc-listview-carousel input[type=search]:active,
|
|
.ui-listview input[type=email]:active,
|
|
.ui-arc-listview-carousel input[type=email]:active {
|
|
background-color: B02112;
|
|
}
|
|
.ui-textinput-pane {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
display: none;
|
|
background: B015;
|
|
z-index: 1100;
|
|
}
|
|
.ui-textinput-pane input[type=text]:focus,
|
|
.ui-textinput-pane input[type=password]:focus,
|
|
.ui-textinput-pane input[type=search]:focus,
|
|
.ui-textinput-pane input[type=email]:focus {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: auto;
|
|
border: none;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
top: auto;
|
|
margin-top: auto;
|
|
padding: 1.625rem 3.125rem 0.3125rem 3.125rem;
|
|
background-color: B015;
|
|
}
|
|
@media (min-height: 180px) {
|
|
.ui-textinput-pane input[type=text]:focus,
|
|
.ui-textinput-pane input[type=password]:focus,
|
|
.ui-textinput-pane input[type=search]:focus,
|
|
.ui-textinput-pane input[type=email]:focus {
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|