/*************************************************************************** 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: rgba(0, 0, 0, 1); color: rgba(204, 204, 204, 1); } .ui-page { background: rgba(0, 0, 0, 1); } .ui-page .ui-header { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; 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: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } .ui-page .ui-header .ui-title { color: rgba(77, 207, 255, 1); margin: 0.875rem 4rem 1.5625rem; padding-left: 0; padding-right: 0; font-size: 30px; -webkit-mask-image: none; 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: rgba(77, 207, 255, 1); } .ui-page .ui-header .ui-subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(77, 207, 255, 1); 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; -webkit-mask-image: none; mask-image: none; } .ui-page .ui-header.ui-has-more .ui-more { position: fixed; top: 50%; right: 0; width: 50px; height: 140px; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); border: 0 none; padding: 0; } .ui-page .ui-header.ui-has-more .ui-more.ui-icon-overflow { -webkit-mask-image: none; mask-image: none; -webkit-mask-position: initial; mask-position: initial; background-color: transparent; overflow: visible; } .ui-page .ui-header.ui-has-more .ui-more.ui-icon-overflow[disabled="disabled"] { -webkit-mask-position: initial; 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; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); 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); -ms-transform: scale(1); transform: scale(1); top: 50%; left: 50%; margin-top: -6.25rem; margin-left: -6.25rem; -webkit-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; -webkit-transition: -webkit-transform ease-out 300ms; transition: -webkit-transform ease-out 300ms; transition: transform ease-out 300ms; transition: transform ease-out 300ms, -webkit-transform ease-out 300ms; -webkit-transform: scale(1.1); -ms-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: rgba(250, 250, 250, 1); border-radius: 50%; top: 50%; right: 0.375rem; -webkit-transform: translate(0, -50%); -ms-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: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; min-height: 6.25rem; } .ui-page .ui-footer.ui-bottom-button .ui-btn { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 2.3125rem; position: relative; font-size: 1.75rem; font-weight: bold; color: rgba(250, 250, 250, 1); 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: rgba(0, 53, 74, 0.9); -webkit-transition: opacity 200ms; transition: opacity 200ms; opacity: 0; z-index: -1; } .ui-page .ui-footer.ui-bottom-button .ui-btn.ui-btn-active { color: rgba(250, 250, 250, 1); 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 { -webkit-animation: btn-footer-opacity-press linear 565ms; 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 { -webkit-animation: btn-footer-opacity-press linear 565ms; 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: rgba(250, 250, 250, 0.35); 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: rgba(204, 204, 204, 1); } /*************************************************************************** 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: rgba(250, 250, 250, 0.3); -webkit-mask-image: url('images/Controller_icon/On_Off/tw_btn_control_bg_holo_dark.png'); 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; 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; transition: background-color 300ms linear; background-color: rgba(250, 250, 250, 0.3); } .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: rgba(250, 250, 250, 0.4); } .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: rgba(250, 250, 250, 0.2); } .ui-toggleswitch .ui-switch-activation, .ui-toggleswitch .ui-switch-button { width: 100%; height: 100%; -webkit-mask-image: none; background-color: transparent; -webkit-transform: none; -ms-transform: none; transform: none; } .ui-toggleswitch .ui-switch-activation::before, .ui-toggleswitch .ui-switch-button::before { -webkit-mask-image: url('images/Controller_icon/On_Off/tw_btn_control_on_holo_dark.png'); mask-image: url('images/Controller_icon/On_Off/tw_btn_control_on_holo_dark.png'); -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: transform 100ms 0ms linear; -webkit-transition: -webkit-transform 100ms 0ms linear; transition: -webkit-transform 100ms 0ms linear; transition: transform 100ms 0ms linear; transition: transform 100ms 0ms linear, -webkit-transform 100ms 0ms linear; background-color: rgba(77, 207, 255, 1); -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; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .ui-toggleswitch .ui-switch-activation::after, .ui-toggleswitch .ui-switch-button::after { content: ""; width: 100%; height: 100%; -webkit-mask-image: url('images/Controller_icon/On_Off/tw_btn_control_off_holo_dark.png'); mask-image: url('images/Controller_icon/On_Off/tw_btn_control_off_holo_dark.png'); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: transform 200ms 100ms linear; -webkit-transition: -webkit-transform 200ms 100ms linear; transition: -webkit-transform 200ms 100ms linear; transition: transform 200ms 100ms linear; transition: transform 200ms 100ms linear, -webkit-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; -webkit-animation-fill-mode: both; animation-fill-mode: both; background-color: rgba(250, 250, 250, 0.5); position: absolute; left: 0; } .ui-toggleswitch .ui-switch-input:checked { background-color: rgba(77, 207, 255, 1); } .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; -webkit-transform: none; -ms-transform: none; transform: none; } .ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-activation::before, .ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-button::before { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-mask-position: 0; -moz-mask-position: 0; -ms-mask-position: 0; -o-mask-position: 0; mask-position: 0; background-color: rgba(77, 207, 255, 1); -webkit-transition: transform 200ms 100ms linear; -webkit-transition: -webkit-transform 200ms 100ms linear; transition: -webkit-transform 200ms 100ms linear; transition: transform 200ms 100ms linear; transition: transform 200ms 100ms linear, -webkit-transform 200ms 100ms linear; } .ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-activation::after, .ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-button::after { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: transform 100ms 0ms linear; -webkit-transition: -webkit-transform 100ms 0ms linear; transition: -webkit-transform 100ms 0ms linear; transition: transform 100ms 0ms linear; transition: transform 100ms 0ms linear, -webkit-transform 100ms 0ms linear; } .ui-toggleswitch .ui-switch-input:checked:active { background-color: rgba(54, 145, 179, 1); } .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: rgba(54, 145, 179, 1); } .ui-toggleswitch .ui-switch-input:checked:disabled { background-color: rgba(77, 207, 255, 0.3); } .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: rgba(77, 207, 255, 0.3); } /*************************************************************************** Popup ***************************************************************************/ @-webkit-keyframes toastCheck { 0% { -webkit-mask-position: 0rem 0rem; mask-position: 0rem 0rem; } 6% { -webkit-mask-position: -5.125rem 0rem; mask-position: -5.125rem 0rem; } 11% { -webkit-mask-position: -10.25rem 0rem; mask-position: -10.25rem 0rem; } 17% { -webkit-mask-position: -15.375rem 0rem; mask-position: -15.375rem 0rem; } 22% { -webkit-mask-position: 0rem -5.125rem; mask-position: 0rem -5.125rem; } 28% { -webkit-mask-position: -5.125rem -5.125rem; mask-position: -5.125rem -5.125rem; } 33% { -webkit-mask-position: -10.25rem -5.125rem; mask-position: -10.25rem -5.125rem; } 39% { -webkit-mask-position: -15.375rem -5.125rem; mask-position: -15.375rem -5.125rem; } 44% { -webkit-mask-position: 0rem -10.25rem; mask-position: 0rem -10.25rem; } 50% { -webkit-mask-position: -5.125rem -10.25rem; mask-position: -5.125rem -10.25rem; } 56% { -webkit-mask-position: -10.25rem -10.25rem; mask-position: -10.25rem -10.25rem; } 61% { -webkit-mask-position: -15.375rem -10.25rem; mask-position: -15.375rem -10.25rem; } 67% { -webkit-mask-position: 0rem -15.375rem; mask-position: 0rem -15.375rem; } 72% { -webkit-mask-position: -5.125rem -15.375rem; mask-position: -5.125rem -15.375rem; } 78% { -webkit-mask-position: -10.25rem -15.375rem; mask-position: -10.25rem -15.375rem; } 83% { -webkit-mask-position: -15.375rem -15.375rem; mask-position: -15.375rem -15.375rem; } 89% { -webkit-mask-position: 0rem -20.5rem; mask-position: 0rem -20.5rem; } 94% { -webkit-mask-position: -5.125rem -20.5rem; mask-position: -5.125rem -20.5rem; } 100% { -webkit-mask-position: -10.25rem -20.5rem; mask-position: -10.25rem -20.5rem; } } @keyframes toastCheck { 0% { -webkit-mask-position: 0rem 0rem; mask-position: 0rem 0rem; } 6% { -webkit-mask-position: -5.125rem 0rem; mask-position: -5.125rem 0rem; } 11% { -webkit-mask-position: -10.25rem 0rem; mask-position: -10.25rem 0rem; } 17% { -webkit-mask-position: -15.375rem 0rem; mask-position: -15.375rem 0rem; } 22% { -webkit-mask-position: 0rem -5.125rem; mask-position: 0rem -5.125rem; } 28% { -webkit-mask-position: -5.125rem -5.125rem; mask-position: -5.125rem -5.125rem; } 33% { -webkit-mask-position: -10.25rem -5.125rem; mask-position: -10.25rem -5.125rem; } 39% { -webkit-mask-position: -15.375rem -5.125rem; mask-position: -15.375rem -5.125rem; } 44% { -webkit-mask-position: 0rem -10.25rem; mask-position: 0rem -10.25rem; } 50% { -webkit-mask-position: -5.125rem -10.25rem; mask-position: -5.125rem -10.25rem; } 56% { -webkit-mask-position: -10.25rem -10.25rem; mask-position: -10.25rem -10.25rem; } 61% { -webkit-mask-position: -15.375rem -10.25rem; mask-position: -15.375rem -10.25rem; } 67% { -webkit-mask-position: 0rem -15.375rem; mask-position: 0rem -15.375rem; } 72% { -webkit-mask-position: -5.125rem -15.375rem; mask-position: -5.125rem -15.375rem; } 78% { -webkit-mask-position: -10.25rem -15.375rem; mask-position: -10.25rem -15.375rem; } 83% { -webkit-mask-position: -15.375rem -15.375rem; mask-position: -15.375rem -15.375rem; } 89% { -webkit-mask-position: 0rem -20.5rem; mask-position: 0rem -20.5rem; } 94% { -webkit-mask-position: -5.125rem -20.5rem; mask-position: -5.125rem -20.5rem; } 100% { -webkit-mask-position: -10.25rem -20.5rem; mask-position: -10.25rem -20.5rem; } } .ui-popup { width: 100%; height: 100%; overflow: hidden; border: 0; border-radius: 50%; background-color: rgba(0, 0, 0, 1); /*********************** 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: rgba(77, 207, 255, 1); 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: rgba(204, 204, 204, 1); 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: rgba(250, 250, 250, 1); 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: rgba(0, 53, 74, 0.9); -webkit-transition: opacity 200ms; transition: opacity 200ms; opacity: 0; z-index: -1; } .ui-popup .ui-popup-footer.ui-side-button .ui-btn::before { left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .ui-popup .ui-popup-footer.ui-side-button .ui-btn.ui-btn-active { color: rgba(250, 250, 250, 1); 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 { -webkit-animation: btn-footer-opacity-press linear 565ms; 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 { -webkit-animation: btn-footer-opacity-press linear 565ms; 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: rgba(250, 250, 250, 0.35); 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: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; min-height: 6.25rem; } .ui-popup .ui-popup-footer.ui-bottom-button .ui-btn { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; line-height: 2.3125rem; position: relative; font-size: 1.75rem; font-weight: bold; color: rgba(250, 250, 250, 1); 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: rgba(0, 53, 74, 0.9); -webkit-transition: opacity 200ms; transition: opacity 200ms; opacity: 0; z-index: -1; } .ui-popup .ui-popup-footer.ui-bottom-button .ui-btn.ui-btn-active { color: rgba(250, 250, 250, 1); 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 { -webkit-animation: btn-footer-opacity-press linear 565ms; 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 { -webkit-animation: btn-footer-opacity-press linear 565ms; 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: rgba(250, 250, 250, 0.35); 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: rgba(0, 0, 0, 0.95); } .ui-popup-more-options .ui-selector .ui-selector-indicator-text { color: rgba(250, 250, 250, 1); } .ui-popup-more-options .ui-selector .ui-selector-indicator-subtext { color: rgba(77, 207, 255, 1); } .ui-popup-more-options .ui-selector .ui-layer .ui-item { background-color: rgba(250, 250, 250, 1); } .ui-popup-more-options .ui-selector .ui-layer .ui-item:active { background-color: rgba(191, 191, 191, 1); } .ui-popup-more-options .ui-selector .ui-layer .ui-item.ui-item-active:active { background-color: rgba(250, 250, 250, 1); } .ui-popup-more-options .ui-selector .ui-layer .ui-item::before { background-color: rgba(8, 8, 8, 1); } .ui-popup-more-options .ui-selector .ui-layer .ui-item::before:active { background-color: rgba(22, 165, 217, 1); } .ui-popup-more-options .ui-selector .ui-layer .ui-item.ui-item-active::before { background-color: rgba(22, 165, 217, 1); } .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: rgba(77, 207, 255, 0); -webkit-mask-image: url(images/Popup/b_popup_edge_inner_glow.png); mask-image: url(images/Popup/b_popup_edge_inner_glow.png); -webkit-mask-size: 100% 100%; 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: rgba(0, 0, 0, 1); background-image: none; border: none; margin: 0; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; 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: -webkit-box; display: -webkit-flex; display: -ms-flexbox; 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: rgba(250, 250, 250, 1); 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 { -webkit-mask-image: url("images/Popup/toast_check.png"); mask-image: url("images/Popup/toast_check.png"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-animation-name: toastCheck; animation-name: toastCheck; -webkit-animation-duration: 300ms; animation-duration: 300ms; -webkit-animation-delay: 300ms; animation-delay: 300ms; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-timing-function: step-start; animation-timing-function: step-start; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; background-color: rgba(230, 230, 230, 1); } .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: rgba(48, 48, 48, 0.95); border: solid 0.0625rem rgba(38, 38, 38, 0.95); 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: rgba(255, 255, 255, 1); font-size: 1.5rem; line-height: 2rem; } .ui-popup.ui-popup-toast.ui-popup-toast-small .ui-popup-toast-icon { -webkit-transform: translateX(-50%) scale(0.6097561); -ms-transform: translateX(-50%) scale(0.6097561); transform: translateX(-50%) scale(0.6097561); margin: -1rem 0; background-color: rgba(250, 250, 250, 1); } .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: -webkit-linear-gradient(bottom, transparent, #245B85, transparent) 1; border-image: linear-gradient(0deg, transparent, #245B85, transparent) 1; color: rgba(250, 250, 250, 1); text-align: center; line-height: 2.9375rem; box-sizing: content-box; -webkit-transition-property: max-height; transition-property: max-height; -webkit-transition-duration: 1ms; 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: rgba(199, 199, 199, 1); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 0; } .ui-listview li.ui-listview-divider::before, .ui-listview li.ui-li-group-index::before { content: ""; height: 100%; width: auto; -webkit-mask-image: url("images/List/tw_list_sub_line_left.png"); 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: rgba(255, 255, 255, 0.2); -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .ui-listview li.ui-listview-divider::after, .ui-listview li.ui-li-group-index::after { content: ""; height: 100%; width: auto; -webkit-mask-image: url("images/List/tw_list_sub_line_right.png"); 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: rgba(255, 255, 255, 0.2); -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; 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: rgba(250, 250, 250, 1); } .ui-listview li > a:first-child:last-child, .ui-listview li button:first-child:last-child { padding: 0; margin: 0; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; 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: rgba(255, 255, 255, 0.2); color: rgba(199, 199, 199, 1); padding: 0; } .ui-listview li.ui-li-has-action-icon .ui-action-text::after { background-color: rgba(204, 204, 204, 1); } .ui-listview li.ui-li-has-action-icon .ui-action-delete { background-color: rgba(250, 250, 250, 1); } .ui-listview li.ui-li-has-action-icon .ui-action-setting { background-color: rgba(250, 250, 250, 1); } .ui-listview li.ui-li-has-action-icon .ui-action-add { background-color: rgba(250, 250, 250, 1); } .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: rgba(250, 250, 250, 1); } .ui-listview:not(.ui-arc-listview-carousel-item).ui-li-active { background-color: transparent; color: rgba(250, 250, 250, 1); } .ui-listview:not(.ui-arc-listview-carousel-item).ui-li-active::before { content: ""; position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-mask-image: url("images/List/b_list_focus_bg.png"); mask-image: url("images/List/b_list_focus_bg.png"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; background-color: rgba(250, 250, 250, 0.65); pointer-events: none; } .ui-listview.ui-snap-listview li, .ui-listview.ui-arc-listview-carousel-item li { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .ui-listview.ui-snap-listview li a, .ui-listview.ui-arc-listview-carousel-item li a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; 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 { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; 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 { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; 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 * { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-flex-shrink: 1; -ms-flex-negative: 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 { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 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; -webkit-box-flex: 0; -webkit-flex: none; -ms-flex: none; 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 { -webkit-animation: btn-circle-opacity-press linear 567ms; 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 { -webkit-transform: none; -ms-transform: none; 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: rgba(179, 179, 179, 1); font-size: 1.5rem; display: block; -webkit-transition-property: opacity, line-height; transition-property: opacity, line-height; -webkit-transition-timing-function: ease-in-out, ease-in-out; transition-timing-function: ease-in-out, ease-in-out; -webkit-transition-duration: 100ms, 200ms; 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: rgba(250, 250, 250, 1); } .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: rgba(250, 250, 250, 0.65); } .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: rgba(250, 250, 250, 1); } .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%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-mask-image: url("images/List/b_list_focus_bg.png"); -webkit-mask-size: 100% 100%; background-color: rgba(250, 250, 250, 0.5); 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: rgba(250, 250, 250, 1); 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%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-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: rgba(250, 250, 250, 0.4); } .ui-listview:not(.ui-arc-listview):not(.ui-arc-listview-carousel-item):not(.ui-snap-listview) li.ui-li-text { white-space: normal; color: rgba(204, 204, 204, 1); 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: rgba(204, 204, 204, 0.4); } .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: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; 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: rgba(179, 179, 179, 1); 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: -webkit-calc(49.5%); top: calc(49.5%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); 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) { -webkit-mask-image: none; mask-image: none; background: -webkit-radial-gradient(transparent, transparent 59%, rgba(255, 255, 255, 0.7) 63%, rgba(255, 255, 255, 0.7) 68%, transparent 72%), url("images/Controller_icon/Check/ref_btn_check_holo_dark.png") no-repeat; background: radial-gradient(transparent, transparent 59%, rgba(255, 255, 255, 0.7) 63%, rgba(255, 255, 255, 0.7) 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: ""; -webkit-mask-image: none; mask-image: none; background: -webkit-radial-gradient(transparent, transparent 59%, rgba(77, 207, 255, 1) 63%, rgba(77, 207, 255, 1) 68%, transparent 72%); background: radial-gradient(transparent, transparent 59%, rgba(77, 207, 255, 1) 63%, rgba(77, 207, 255, 1) 68%, transparent 72%); height: 100%; width: 100%; opacity: 0; position: absolute; -webkit-transition: all 300ms ease-in; transition: all 300ms ease-in; } input[type="checkbox"]:not(.ui-switch-input)::after { -webkit-mask-image: url('images/Controller_icon/Check/tw_btn_check_holo_dark.png'); mask-image: url('images/Controller_icon/Check/tw_btn_check_holo_dark.png'); -webkit-mask-repeat: repeat; mask-repeat: repeat; -webkit-mask-position: center bottom; mask-position: center bottom; height: 0; -webkit-transition-property: height; transition-property: height; -webkit-transition-duration: 500ms; transition-duration: 500ms; bottom: 0; -webkit-mask-size: 100%; mask-size: 100%; } input[type="checkbox"]:not(.ui-switch-input):checked::before { -webkit-animation: checkon 300ms ease-out; animation: checkon 300ms ease-out; -webkit-transition: none; transition: none; -webkit-mask-image: none; mask-image: none; background: -webkit-radial-gradient(transparent, transparent 59%, rgba(77, 207, 255, 1) 63%, rgba(77, 207, 255, 1) 68%, transparent 72%); background: radial-gradient(transparent, transparent 59%, rgba(77, 207, 255, 1) 63%, rgba(77, 207, 255, 1) 68%, transparent 72%); opacity: 1; } input[type="checkbox"]:not(.ui-switch-input):checked::after { background-color: rgba(77, 207, 255, 1); height: 100%; } input[type="checkbox"]:not(.ui-switch-input):active { background: -webkit-radial-gradient(transparent, transparent 59%, rgba(255, 255, 255, 0.7) 63%, rgba(255, 255, 255, 0.7) 68%, transparent 72%), url("images/Controller_icon/Check/ref_btn_check_holo_dark.png") no-repeat; background: radial-gradient(transparent, transparent 59%, rgba(255, 255, 255, 0.7) 63%, rgba(255, 255, 255, 0.7) 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 { -webkit-mask-image: none; mask-image: none; background: -webkit-radial-gradient(transparent, transparent 59%, rgba(77, 207, 255, 1) 63%, rgba(77, 207, 255, 1) 68%, transparent 72%); background: radial-gradient(transparent, transparent 59%, rgba(77, 207, 255, 1) 63%, rgba(77, 207, 255, 1) 68%, transparent 72%); } input[type="checkbox"]:not(.ui-switch-input):active:checked::after { background-color: rgba(77, 207, 255, 1); height: 100%; } input[type="checkbox"]:not(.ui-switch-input):disabled { background: -webkit-radial-gradient(transparent, transparent 59%, rgba(250, 250, 250, 0.2) 63%, rgba(250, 250, 250, 0.2) 68%, transparent 72%), url("images/Controller_icon/Check/ref_btn_check_holo_dark.png") no-repeat; background: radial-gradient(transparent, transparent 59%, rgba(250, 250, 250, 0.2) 63%, rgba(250, 250, 250, 0.2) 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 { -webkit-mask-image: none; mask-image: none; background: -webkit-radial-gradient(transparent, transparent 59%, rgba(77, 207, 255, 0.3) 63%, rgba(77, 207, 255, 0.3) 68%, transparent 72%); background: radial-gradient(transparent, transparent 59%, rgba(77, 207, 255, 0.3) 63%, rgba(77, 207, 255, 0.3) 68%, transparent 72%); } input[type="checkbox"]:not(.ui-switch-input):disabled:checked::after { background-color: rgba(77, 207, 255, 0.3); height: 100%; } @-webkit-keyframes checkon { from { opacity: .5; } 100% { opacity: 1; } } @keyframes checkon { from { opacity: .5; } 100% { opacity: 1; } } input[type="radio"] { background: -webkit-radial-gradient(transparent, transparent 59%, rgba(255, 255, 255, 0.7) 63%, rgba(255, 255, 255, 0.7) 68%, transparent 72%, transparent); background: radial-gradient(transparent, transparent 59%, rgba(255, 255, 255, 0.7) 63%, rgba(255, 255, 255, 0.7) 68%, transparent 72%, transparent); -webkit-mask-image: none; mask-image: none; } input[type="radio"]::after { content: ""; -webkit-mask-image: url('images/Controller_icon/Radio/tw_btn_radio_holo_dark.png'); mask-image: url('images/Controller_icon/Radio/tw_btn_radio_holo_dark.png'); background-color: rgba(255, 255, 255, 0.2); } input[type="radio"]::before { content: ""; background-color: rgba(77, 207, 255, 1); -webkit-mask-image: url('images/Controller_icon/Radio/tw_btn_radio_holo_dark.png'); mask-image: url('images/Controller_icon/Radio/tw_btn_radio_holo_dark.png'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; width: 100%; height: 100%; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; position: absolute; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: -webkit-transform 300ms; transition: -webkit-transform 300ms; transition: transform 300ms; transition: transform 300ms, -webkit-transform 300ms; } input[type="radio"]:checked { background: -webkit-radial-gradient(transparent, transparent 59%, rgba(77, 207, 255, 1) 63%, rgba(77, 207, 255, 1) 68%, transparent 72%, transparent); background: radial-gradient(transparent, transparent 59%, rgba(77, 207, 255, 1) 63%, rgba(77, 207, 255, 1) 68%, transparent 72%, transparent); } input[type="radio"]:checked::before { background-color: rgba(77, 207, 255, 1); -webkit-mask-image: url('images/Controller_icon/Radio/tw_btn_radio_holo_dark.png'); mask-image: url('images/Controller_icon/Radio/tw_btn_radio_holo_dark.png'); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); z-index: 1; } input[type="radio"]:active { background: -webkit-radial-gradient(transparent, transparent 59%, rgba(255, 255, 255, 0.4) 63%, rgba(255, 255, 255, 0.4) 68%, transparent 72%, transparent); background: radial-gradient(transparent, transparent 59%, rgba(255, 255, 255, 0.4) 63%, rgba(255, 255, 255, 0.4) 68%, transparent 72%, transparent); -webkit-mask-image: none; mask-image: none; } input[type="radio"]:active::after { -webkit-mask-image: url('images/Controller_icon/Radio/tw_btn_radio_holo_dark.png'); mask-image: url('images/Controller_icon/Radio/tw_btn_radio_holo_dark.png'); background-color: rgba(250, 250, 250, 0.15); } input[type="radio"]:active:checked { background: -webkit-radial-gradient(transparent, transparent 59%, rgba(54, 145, 179, 1) 63%, rgba(54, 145, 179, 1) 68%, transparent 72%, transparent); background: radial-gradient(transparent, transparent 59%, rgba(54, 145, 179, 1) 63%, rgba(54, 145, 179, 1) 68%, transparent 72%, transparent); } input[type="radio"]:active:checked::before { -webkit-mask-image: url('images/Controller_icon/Radio/tw_btn_radio_holo_dark.png'); mask-image: url('images/Controller_icon/Radio/tw_btn_radio_holo_dark.png'); background-color: rgba(54, 145, 179, 1); } input[type="radio"]:active:checked::after { content: none; } input[type="radio"]:disabled { background: -webkit-radial-gradient(transparent, transparent 59%, rgba(250, 250, 250, 0.2) 63%, rgba(250, 250, 250, 0.2) 68%, transparent 72%, transparent); background: radial-gradient(transparent, transparent 59%, rgba(250, 250, 250, 0.2) 63%, rgba(250, 250, 250, 0.2) 68%, transparent 72%, transparent); -webkit-mask-image: none; mask-image: none; } input[type="radio"]:disabled::before { -webkit-transition: none; transition: none; } input[type="radio"]:disabled::after { background-color: rgba(250, 250, 250, 0.1); } input[type="radio"]:disabled:checked { background: -webkit-radial-gradient(transparent, transparent 59%, rgba(77, 207, 255, 0.3) 63%, rgba(77, 207, 255, 0.3) 68%, transparent 72%, transparent); background: radial-gradient(transparent, transparent 59%, rgba(77, 207, 255, 0.3) 63%, rgba(77, 207, 255, 0.3) 68%, transparent 72%, transparent); } input[type="radio"]:disabled:checked::before { background-color: rgba(77, 207, 255, 0.3); -webkit-transition: none; transition: none; } input[type="radio"]:disabled:checked::after { content: none; } /*************************************************************************** button ***************************************************************************/ .ui-btn { color: rgba(250, 250, 250, 1); background-color: transparent; height: auto; } .ui-btn.ui-btn-icon-only::before { -webkit-mask-size: 3.125rem 3.125rem; mask-size: 3.125rem 3.125rem; width: 3.125rem; height: 3.125rem; } .ui-default { color: rgba(250, 250, 250, 1); background-color: transparent; } .ui-color-red { color: rgba(250, 250, 250, 1); 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: rgba(250, 250, 250, 1); background-color: W012; } .ui-color-orange { color: rgba(250, 250, 250, 1); 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: rgba(250, 250, 250, 1); background-color: W013; } .ui-color-green { color: rgba(250, 250, 250, 1); 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: rgba(250, 250, 250, 1); background-color: W014; } .ui-color-blue { color: rgba(250, 250, 250, 1); background-color: rgba(1, 59, 74, 1); } a.ui-color-blue:active:hover, .ui-color-blue:enabled:active:hover { background-color: rgba(1, 59, 74, 1); } .ui-color-blue:enabled:focus { background-color: rgba(1, 59, 74, 1); } a.ui-color-blue.ui-state-disabled, .ui-color-blue:disabled { color: rgba(250, 250, 250, 1); background-color: rgba(1, 59, 74, 1); } .ui-grid-col-1 > .ui-btn { border-left: solid 1px rgba(0, 0, 0, 1); } .ui-grid-col-2 > .ui-btn { border-left: solid 1px rgba(0, 0, 0, 1); } .ui-grid-col-3 > .ui-btn { border-left: solid 1px rgba(0, 0, 0, 1); } /*************************************************************************** circle progress bar ***************************************************************************/ .ui-progressbar .ui-progressbar-value .ui-progressbar-value-left { border: 0.5rem solid rgba(77, 207, 255, 1); } .ui-progressbar .ui-progressbar-value .ui-progressbar-value-right { border: 0.5rem solid rgba(77, 207, 255, 1); } .ui-progressbar .ui-progressbar-bg { border: 0.5rem solid rgba(0, 67, 115, 1); } .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 rgba(77, 207, 255, 1); } .ui-progressbar.ui-progressbar-small .ui-progressbar-bg { border: 0.25rem solid rgba(0, 67, 115, 1); } .ui-progressbar-end-point { position: absolute; z-index: 1000; width: 20px; height: 20px; background: #37a1ed; border-radius: 50%; left: 180px; top: 180px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transform-origin: center center; -ms-transform-origin: center center; 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%; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: .25s; transition-duration: .25s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .ui-progressbar-end-point-active { display: block; } .ui-progressbar-end-point-pressed::after { content: ""; -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); } /*************************************************************************** circular index scroll bar ***************************************************************************/ .ui-circularindexscrollbar .ui-circularindexscrollbar-indicator { background-color: rgba(69, 68, 68, 0.9); } .ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-text { color: rgba(77, 207, 255, 1); } .ui-indexscrollbar { display: none; } /*************************************************************************** drawer ***************************************************************************/ .ui-drawer { background-color: rgba(0, 0, 0, 0.85); border-radius: 50%; } .ui-drawer-overlay { background-color: rgba(0, 0, 0, 0.85); } /*************************************************************************** progress ***************************************************************************/ @-webkit-keyframes indeterminate { 0% { -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate1_holo_dark.png); -webkit-mask-repeat: no-repeat; background-color: rgba(77, 207, 255, 1); } 25% { -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate2_holo_dark.png); -webkit-mask-repeat: no-repeat; background-color: rgba(77, 207, 255, 1); } 50% { -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate3_holo_dark.png); -webkit-mask-repeat: no-repeat; background-color: rgba(77, 207, 255, 1); } 75% { -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate4_holo_dark.png); -webkit-mask-repeat: no-repeat; background-color: rgba(77, 207, 255, 1); } 100% { -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate5_holo_dark.png); -webkit-mask-repeat: no-repeat; background-color: rgba(77, 207, 255, 1); } } progress { color: rgba(204, 204, 204, 1); } progress::-webkit-progress-bar { background-color: rgba(0, 67, 115, 1); } progress::-webkit-progress-value { background-color: rgba(77, 207, 255, 1); } progress.ui-progress-indeterminate::-webkit-progress-bar { background-color: rgba(77, 207, 255, 1); } /*********************** Processing ***********************/ @-webkit-keyframes fullprocess { 0% { -webkit-mask-position: 0vw 0vw; mask-position: 0vw 0vw; } 2% { -webkit-mask-position: -100vw 0vw; mask-position: -100vw 0vw; } 3% { -webkit-mask-position: -200vw 0vw; mask-position: -200vw 0vw; } 5% { -webkit-mask-position: -300vw 0vw; mask-position: -300vw 0vw; } 7% { -webkit-mask-position: -400vw 0vw; mask-position: -400vw 0vw; } 8% { -webkit-mask-position: -500vw 0vw; mask-position: -500vw 0vw; } 10% { -webkit-mask-position: -600vw 0vw; mask-position: -600vw 0vw; } 12% { -webkit-mask-position: 0vw -100vw; mask-position: 0vw -100vw; } 14% { -webkit-mask-position: -100vw -100vw; mask-position: -100vw -100vw; } 15% { -webkit-mask-position: -200vw -100vw; mask-position: -200vw -100vw; } 17% { -webkit-mask-position: -300vw -100vw; mask-position: -300vw -100vw; } 19% { -webkit-mask-position: -400vw -100vw; mask-position: -400vw -100vw; } 20% { -webkit-mask-position: -500vw -100vw; mask-position: -500vw -100vw; } 22% { -webkit-mask-position: -600vw -100vw; mask-position: -600vw -100vw; } 24% { -webkit-mask-position: 0vw -200vw; mask-position: 0vw -200vw; } 25% { -webkit-mask-position: -100vw -200vw; mask-position: -100vw -200vw; } 27% { -webkit-mask-position: -200vw -200vw; mask-position: -200vw -200vw; } 29% { -webkit-mask-position: -300vw -200vw; mask-position: -300vw -200vw; } 31% { -webkit-mask-position: -400vw -200vw; mask-position: -400vw -200vw; } 32% { -webkit-mask-position: -500vw -200vw; mask-position: -500vw -200vw; } 34% { -webkit-mask-position: -600vw -200vw; mask-position: -600vw -200vw; } 36% { -webkit-mask-position: 0vw -300vw; mask-position: 0vw -300vw; } 37% { -webkit-mask-position: -100vw -300vw; mask-position: -100vw -300vw; } 39% { -webkit-mask-position: -200vw -300vw; mask-position: -200vw -300vw; } 41% { -webkit-mask-position: -300vw -300vw; mask-position: -300vw -300vw; } 42% { -webkit-mask-position: -400vw -300vw; mask-position: -400vw -300vw; } 44% { -webkit-mask-position: -500vw -300vw; mask-position: -500vw -300vw; } 46% { -webkit-mask-position: -600vw -300vw; mask-position: -600vw -300vw; } 47% { -webkit-mask-position: 0vw -400vw; mask-position: 0vw -400vw; } 49% { -webkit-mask-position: -100vw -400vw; mask-position: -100vw -400vw; } 51% { -webkit-mask-position: -200vw -400vw; mask-position: -200vw -400vw; } 53% { -webkit-mask-position: -300vw -400vw; mask-position: -300vw -400vw; } 54% { -webkit-mask-position: -400vw -400vw; mask-position: -400vw -400vw; } 56% { -webkit-mask-position: -500vw -400vw; mask-position: -500vw -400vw; } 58% { -webkit-mask-position: -600vw -400vw; mask-position: -600vw -400vw; } 59% { -webkit-mask-position: 0vw -500vw; mask-position: 0vw -500vw; } 61% { -webkit-mask-position: -100vw -500vw; mask-position: -100vw -500vw; } 63% { -webkit-mask-position: -200vw -500vw; mask-position: -200vw -500vw; } 64% { -webkit-mask-position: -300vw -500vw; mask-position: -300vw -500vw; } 66% { -webkit-mask-position: -400vw -500vw; mask-position: -400vw -500vw; } 68% { -webkit-mask-position: -500vw -500vw; mask-position: -500vw -500vw; } 69% { -webkit-mask-position: -600vw -500vw; mask-position: -600vw -500vw; } 71% { -webkit-mask-position: 0vw -600vw; mask-position: 0vw -600vw; } 73% { -webkit-mask-position: -100vw -600vw; mask-position: -100vw -600vw; } 75% { -webkit-mask-position: -200vw -600vw; mask-position: -200vw -600vw; } 76% { -webkit-mask-position: -300vw -600vw; mask-position: -300vw -600vw; } 78% { -webkit-mask-position: -400vw -600vw; mask-position: -400vw -600vw; } 80% { -webkit-mask-position: -500vw -600vw; mask-position: -500vw -600vw; } 81% { -webkit-mask-position: -600vw -600vw; mask-position: -600vw -600vw; } 83% { -webkit-mask-position: 0vw -700vw; mask-position: 0vw -700vw; } 85% { -webkit-mask-position: -100vw -700vw; mask-position: -100vw -700vw; } 86% { -webkit-mask-position: -200vw -700vw; mask-position: -200vw -700vw; } 88% { -webkit-mask-position: -300vw -700vw; mask-position: -300vw -700vw; } 90% { -webkit-mask-position: -400vw -700vw; mask-position: -400vw -700vw; } 92% { -webkit-mask-position: -500vw -700vw; mask-position: -500vw -700vw; } 93% { -webkit-mask-position: -600vw -700vw; mask-position: -600vw -700vw; } 95% { -webkit-mask-position: 0vw -800vw; mask-position: 0vw -800vw; } 97% { -webkit-mask-position: -100vw -800vw; mask-position: -100vw -800vw; } 98% { -webkit-mask-position: -200vw -800vw; mask-position: -200vw -800vw; } 100% { -webkit-mask-position: -300vw -800vw; mask-position: -300vw -800vw; } } @keyframes fullprocess { 0% { -webkit-mask-position: 0vw 0vw; mask-position: 0vw 0vw; } 2% { -webkit-mask-position: -100vw 0vw; mask-position: -100vw 0vw; } 3% { -webkit-mask-position: -200vw 0vw; mask-position: -200vw 0vw; } 5% { -webkit-mask-position: -300vw 0vw; mask-position: -300vw 0vw; } 7% { -webkit-mask-position: -400vw 0vw; mask-position: -400vw 0vw; } 8% { -webkit-mask-position: -500vw 0vw; mask-position: -500vw 0vw; } 10% { -webkit-mask-position: -600vw 0vw; mask-position: -600vw 0vw; } 12% { -webkit-mask-position: 0vw -100vw; mask-position: 0vw -100vw; } 14% { -webkit-mask-position: -100vw -100vw; mask-position: -100vw -100vw; } 15% { -webkit-mask-position: -200vw -100vw; mask-position: -200vw -100vw; } 17% { -webkit-mask-position: -300vw -100vw; mask-position: -300vw -100vw; } 19% { -webkit-mask-position: -400vw -100vw; mask-position: -400vw -100vw; } 20% { -webkit-mask-position: -500vw -100vw; mask-position: -500vw -100vw; } 22% { -webkit-mask-position: -600vw -100vw; mask-position: -600vw -100vw; } 24% { -webkit-mask-position: 0vw -200vw; mask-position: 0vw -200vw; } 25% { -webkit-mask-position: -100vw -200vw; mask-position: -100vw -200vw; } 27% { -webkit-mask-position: -200vw -200vw; mask-position: -200vw -200vw; } 29% { -webkit-mask-position: -300vw -200vw; mask-position: -300vw -200vw; } 31% { -webkit-mask-position: -400vw -200vw; mask-position: -400vw -200vw; } 32% { -webkit-mask-position: -500vw -200vw; mask-position: -500vw -200vw; } 34% { -webkit-mask-position: -600vw -200vw; mask-position: -600vw -200vw; } 36% { -webkit-mask-position: 0vw -300vw; mask-position: 0vw -300vw; } 37% { -webkit-mask-position: -100vw -300vw; mask-position: -100vw -300vw; } 39% { -webkit-mask-position: -200vw -300vw; mask-position: -200vw -300vw; } 41% { -webkit-mask-position: -300vw -300vw; mask-position: -300vw -300vw; } 42% { -webkit-mask-position: -400vw -300vw; mask-position: -400vw -300vw; } 44% { -webkit-mask-position: -500vw -300vw; mask-position: -500vw -300vw; } 46% { -webkit-mask-position: -600vw -300vw; mask-position: -600vw -300vw; } 47% { -webkit-mask-position: 0vw -400vw; mask-position: 0vw -400vw; } 49% { -webkit-mask-position: -100vw -400vw; mask-position: -100vw -400vw; } 51% { -webkit-mask-position: -200vw -400vw; mask-position: -200vw -400vw; } 53% { -webkit-mask-position: -300vw -400vw; mask-position: -300vw -400vw; } 54% { -webkit-mask-position: -400vw -400vw; mask-position: -400vw -400vw; } 56% { -webkit-mask-position: -500vw -400vw; mask-position: -500vw -400vw; } 58% { -webkit-mask-position: -600vw -400vw; mask-position: -600vw -400vw; } 59% { -webkit-mask-position: 0vw -500vw; mask-position: 0vw -500vw; } 61% { -webkit-mask-position: -100vw -500vw; mask-position: -100vw -500vw; } 63% { -webkit-mask-position: -200vw -500vw; mask-position: -200vw -500vw; } 64% { -webkit-mask-position: -300vw -500vw; mask-position: -300vw -500vw; } 66% { -webkit-mask-position: -400vw -500vw; mask-position: -400vw -500vw; } 68% { -webkit-mask-position: -500vw -500vw; mask-position: -500vw -500vw; } 69% { -webkit-mask-position: -600vw -500vw; mask-position: -600vw -500vw; } 71% { -webkit-mask-position: 0vw -600vw; mask-position: 0vw -600vw; } 73% { -webkit-mask-position: -100vw -600vw; mask-position: -100vw -600vw; } 75% { -webkit-mask-position: -200vw -600vw; mask-position: -200vw -600vw; } 76% { -webkit-mask-position: -300vw -600vw; mask-position: -300vw -600vw; } 78% { -webkit-mask-position: -400vw -600vw; mask-position: -400vw -600vw; } 80% { -webkit-mask-position: -500vw -600vw; mask-position: -500vw -600vw; } 81% { -webkit-mask-position: -600vw -600vw; mask-position: -600vw -600vw; } 83% { -webkit-mask-position: 0vw -700vw; mask-position: 0vw -700vw; } 85% { -webkit-mask-position: -100vw -700vw; mask-position: -100vw -700vw; } 86% { -webkit-mask-position: -200vw -700vw; mask-position: -200vw -700vw; } 88% { -webkit-mask-position: -300vw -700vw; mask-position: -300vw -700vw; } 90% { -webkit-mask-position: -400vw -700vw; mask-position: -400vw -700vw; } 92% { -webkit-mask-position: -500vw -700vw; mask-position: -500vw -700vw; } 93% { -webkit-mask-position: -600vw -700vw; mask-position: -600vw -700vw; } 95% { -webkit-mask-position: 0vw -800vw; mask-position: 0vw -800vw; } 97% { -webkit-mask-position: -100vw -800vw; mask-position: -100vw -800vw; } 98% { -webkit-mask-position: -200vw -800vw; mask-position: -200vw -800vw; } 100% { -webkit-mask-position: -300vw -800vw; mask-position: -300vw -800vw; } } .ui-page-active .ui-processing { opacity: 1; } .ui-processing { opacity: 0; background-color: rgba(77, 207, 255, 1); -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .ui-processing.ui-processing-alternate { background-color: rgba(250, 250, 250, 1); } .ui-processing.ui-processing-on-center { position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .ui-processing.ui-processing-full-size { -webkit-mask-image: url("images/Processing/processingfull.png"); mask-image: url("images/Processing/processingfull.png"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: step-start; animation-timing-function: step-start; -webkit-animation-name: fullprocess; 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%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .ui-scrollbar-bouncing-effect { -webkit-animation-duration: .7s; animation-duration: .7s; -webkit-animation-timing-function: ease; animation-timing-function: ease; background-color: rgba(77, 207, 255, 0.2); } .ui-scrollbar-bouncing-effect::before { -webkit-animation-duration: .7s; animation-duration: .7s; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; background-color: rgba(77, 207, 255, 0); } .ui-scrollbar-bouncing-effect.ui-top, .ui-scrollbar-bouncing-effect.ui-bottom { width: 100%; height: 5.5rem; left: 0; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .ui-scrollbar-bouncing-effect.ui-top::before, .ui-scrollbar-bouncing-effect.ui-bottom::before { width: 100%; height: 5.5rem; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .ui-scrollbar-bouncing-effect.ui-left, .ui-scrollbar-bouncing-effect.ui-right { width: 5.5rem; height: 100%; top: 0; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .ui-scrollbar-bouncing-effect.ui-left::before, .ui-scrollbar-bouncing-effect.ui-right::before { width: 5.5rem; height: 100%; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .ui-scrollbar-bouncing-effect.ui-top { top: 0; -webkit-mask-image: url("images/Scroller/bouncing_circle_top_glow.png"); mask-image: url("images/Scroller/bouncing_circle_top_glow.png"); } .ui-scrollbar-bouncing-effect.ui-top::before { -webkit-mask-image: url("images/Scroller/bouncing_circle_top_edge.png"); mask-image: url("images/Scroller/bouncing_circle_top_edge.png"); } .ui-scrollbar-bouncing-effect.ui-bottom { bottom: 0; -webkit-mask-image: url("images/Scroller/bouncing_circle_bottom_glow.png"); mask-image: url("images/Scroller/bouncing_circle_bottom_glow.png"); } .ui-scrollbar-bouncing-effect.ui-bottom::before { -webkit-mask-image: url("images/Scroller/bouncing_circle_bottom_edge.png"); mask-image: url("images/Scroller/bouncing_circle_bottom_edge.png"); } .ui-scrollbar-bouncing-effect.ui-left { left: 0; -webkit-mask-image: url("images/Scroller/bouncing_circle_left_glow.png"); mask-image: url("images/Scroller/bouncing_circle_left_glow.png"); } .ui-scrollbar-bouncing-effect.ui-left::before { -webkit-mask-image: url("images/Scroller/bouncing_circle_left_edge.png"); mask-image: url("images/Scroller/bouncing_circle_left_edge.png"); } .ui-scrollbar-bouncing-effect.ui-right { right: 0; -webkit-mask-image: url("images/Scroller/bouncing_circle_right_glow.png"); mask-image: url("images/Scroller/bouncing_circle_right_glow.png"); } .ui-scrollbar-bouncing-effect.ui-right::before { -webkit-mask-image: url("images/Scroller/bouncing_circle_right_edge.png"); mask-image: url("images/Scroller/bouncing_circle_right_edge.png"); } @-webkit-keyframes -ui-bouncing-show-additional { 0% { opacity: 0; } 42% { opacity: 0; } 100% { opacity: .7; } } @keyframes -ui-bouncing-show-additional { 0% { opacity: 0; } 42% { opacity: 0; } 100% { opacity: .7; } } @-webkit-keyframes ui-bouncing-show-top { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 42% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes ui-bouncing-show-top { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 42% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes ui-bouncing-show-left { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 42% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes ui-bouncing-show-left { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 42% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes ui-bouncing-show-right { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 42% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes ui-bouncing-show-right { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 42% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes ui-bouncing-show-bottom { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 42% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes ui-bouncing-show-bottom { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 42% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes -ui-bouncing-hide-additional { 0% { opacity: .7; } 42% { opacity: 0; } 100% { opacity: 0; } } @keyframes -ui-bouncing-hide-additional { 0% { opacity: .7; } 42% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes ui-bouncing-hide-left { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 42% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes ui-bouncing-hide-left { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 42% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @-webkit-keyframes ui-bouncing-hide-right { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 42% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes ui-bouncing-hide-right { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 42% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @-webkit-keyframes ui-bouncing-hide-bottom { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 42% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes ui-bouncing-hide-bottom { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 42% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @-webkit-keyframes ui-bouncing-hide-top { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 42% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes ui-bouncing-hide-top { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 42% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .ui-scrollbar-bouncing-effect.ui-show { display: block; } .ui-scrollbar-bouncing-effect.ui-show.ui-left { -webkit-animation-name: ui-bouncing-show-left; animation-name: ui-bouncing-show-left; } .ui-scrollbar-bouncing-effect.ui-show.ui-right { -webkit-animation-name: ui-bouncing-show-right; animation-name: ui-bouncing-show-right; } .ui-scrollbar-bouncing-effect.ui-show.ui-bottom { -webkit-animation-name: ui-bouncing-show-bottom; animation-name: ui-bouncing-show-bottom; } .ui-scrollbar-bouncing-effect.ui-show.ui-top { -webkit-animation-name: ui-bouncing-show-top; animation-name: ui-bouncing-show-top; } .ui-scrollbar-bouncing-effect.ui-show::before { -webkit-animation-name: -ui-bouncing-show-additional; animation-name: -ui-bouncing-show-additional; } .ui-scrollbar-bouncing-effect.ui-hide { -webkit-animation-duration: .3s; animation-duration: .3s; display: block; } .ui-scrollbar-bouncing-effect.ui-hide.ui-left { -webkit-animation-name: ui-bouncing-hide-left; animation-name: ui-bouncing-hide-left; } .ui-scrollbar-bouncing-effect.ui-hide.ui-right { -webkit-animation-name: ui-bouncing-hide-right; animation-name: ui-bouncing-hide-right; } .ui-scrollbar-bouncing-effect.ui-hide.ui-bottom { -webkit-animation-name: ui-bouncing-hide-bottom; animation-name: ui-bouncing-hide-bottom; } .ui-scrollbar-bouncing-effect.ui-hide.ui-top { -webkit-animation-name: ui-bouncing-hide-top; animation-name: ui-bouncing-hide-top; } .ui-scrollbar-bouncing-effect.ui-hide::before { -webkit-animation-duration: .3s; animation-duration: .3s; -webkit-animation-name: -ui-bouncing-hide-additional; animation-name: -ui-bouncing-hide-additional; } .is-circle-test { width: 1px; } .ui-selector { background-color: rgba(0, 0, 0, 1); } .ui-selector .ui-item { background-color: rgba(250, 250, 250, 1); } .ui-selector .ui-item:active { background-color: rgba(191, 191, 191, 1); } .ui-selector .ui-item.ui-item-active:active { background-color: rgba(250, 250, 250, 1); } .ui-selector .ui-layer.ui-layer-prev, .ui-selector .ui-layer.ui-layer-next { background-color: rgba(250, 250, 250, 1); } .ui-selector .ui-layer.ui-layer-prev:active, .ui-selector .ui-layer.ui-layer-next:active { background-color: rgba(250, 250, 250, 0.4); } .ui-selector .ui-selector-indicator { font-size: 1.875rem; } .ui-selector .ui-selector-indicator .ui-selector-indicator-text { color: rgba(250, 250, 250, 1); } .ui-selector .ui-selector-indicator .ui-selector-indicator-subtext { color: rgba(77, 207, 255, 1); } .ui-selector .ui-selector-indicator:active + .ui-selector-indicator-arrow::before { background-color: rgba(77, 207, 255, 0.4); } .ui-selector .ui-selector-indicator-active + .ui-selector-indicator-arrow::before { background-color: rgba(77, 207, 255, 0.4); } .ui-selector .ui-selector-indicator-arrow::before { background-color: rgba(77, 207, 255, 1); } .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 rgba(250, 250, 250, 0.5); 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; } @-webkit-keyframes dragItem { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(1.21428571); transform: scale(1.21428571); opacity: 0.7; } } @keyframes dragItem { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(1.21428571); 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; -webkit-transform: scale(1.21428571); -ms-transform: scale(1.21428571); transform: scale(1.21428571); pointer-events: none; margin: -1.75rem; -webkit-animation: 333ms dragItem; animation: 333ms dragItem; } .ui-selector.ui-selector-edit-mode .ui-item.ui-item-moved-end { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(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: rgba(250, 250, 250, 0.5); } .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: rgba(184, 46, 46, 0.5); } .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: rgba(250, 250, 250, 1); -webkit-mask-image: url("images/Selector/b_rotary_selector_edit_mode_ic_delete_bg.png"); 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: rgba(0, 0, 0, 0.35); -webkit-mask-image: url("images/Selector/b_rotary_selector_edit_mode_ic_delete_bg_ef.png"); 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: rgba(184, 46, 46, 1); -webkit-mask-image: url("images/Selector/b_rotary_selector_edit_mode_ic_delete.png"); 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; -webkit-transform-origin: top right; -ms-transform-origin: top right; 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 { -webkit-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1); } .ui-selector.ui-selector-edit-mode .ui-item-removable .ui-item-icon-remove-left { -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; left: -0.1875rem; } .ui-selector.ui-selector-edit-mode .ui-item-removable.ui-item-removed.ui-item { opacity: 0; -webkit-transition: opacity 200ms; transition: opacity 200ms; } .ui-selector.ui-selector-edit-mode .ui-item-plus { background-color: rgba(250, 250, 250, 1); -webkit-mask-image: url("images/Selector/b_rotary_selector_edit_mode_ic_add.png"); mask-image: url("images/Selector/b_rotary_selector_edit_mode_ic_add.png"); -webkit-mask-size: 100%; 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: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; 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: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .ui-slider-container .ui-slider-titles .ui-slider-title { color: rgba(250, 250, 250, 1); font-size: 1.875rem; line-height: 1.875rem; margin-top: 0.4375rem; } .ui-slider-container .ui-slider-titles .ui-slider-subtitle { color: rgba(77, 207, 255, 1); font-size: 1.8125rem; line-height: 1.875rem; } .ui-slider-container .ui-slider-buttons { height: 4rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: 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: rgba(250, 250, 250, 1); 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: rgba(77, 225, 255, 1); } a.ui-hyperlink:active, a.ui-hyperlink:hover { color: rgba(77, 225, 255, 0.5); } .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; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); 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; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .ui-arc-listview-selection { opacity: 0; position: absolute; -webkit-transition: opacity 250ms; transition: opacity 250ms; pointer-events: none; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-mask-image: url("images/List/b_list_focus_bg.png"); mask-image: url("images/List/b_list_focus_bg.png"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; top: 50%; width: 22.5rem; height: 7.5rem; left: 0; right: 0; border-radius: 4.5rem; background-color: rgba(250, 250, 250, 0.5); } .ui-arc-listview-selection-show { opacity: 1; } .ui-arc-listview li, .ui-arc-listview-carousel li { -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; 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; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; 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: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; height: 6.875rem; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; 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 { -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .ui-number-picker-container input[type="number"] { display: none; } .ui-number-picker-container .ui-number-picker-label { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; font-size: 1.5rem; line-height: 1.5625rem; color: rgba(250, 250, 250, 1); display: block; width: 5rem; opacity: 1; -webkit-transition-duration: 300ms, 300ms; transition-duration: 300ms, 300ms; -webkit-transition-property: opacity, top; transition-property: opacity, top; -webkit-transition-timing-function: linear; 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 { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; font-size: 3.125rem; line-height: 5.3125rem; margin-top: -0.375rem; color: rgba(250, 250, 250, 1); 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: rgba(102, 102, 102, 1); } .ui-number-picker-container .ui-number-picker-number-pressed { color: rgba(54, 145, 179, 1); } .ui-number-picker-container .ui-number-picker-number-blink { -webkit-animation: ui-number-picker-number-blink 1s infinite; 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%; -webkit-transform: translate(-50%); -ms-transform: translate(-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 { -webkit-animation: changeColor 1s infinite; animation: changeColor 1s infinite; color: rgba(77, 207, 255, 1); } .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: rgba(77, 207, 255, 1); } .ui-time-picker .ui-time-picker-container-ampm-pressed div span { color: rgba(54, 145, 179, 1); } .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; -webkit-transition-duration: 300ms, 300ms; transition-duration: 300ms, 300ms; -webkit-transition-property: opacity, top; transition-property: opacity, top; -webkit-transition-timing-function: linear; 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 { -webkit-transition: none; transition: none; } .ui-time-picker .ui-circleindicator .ui-animated.ui-time-picker-disable-animation { -webkit-transition: none; 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; } @-webkit-keyframes changeColor { 0% { color: rgba(77, 207, 255, 1); } 49% { color: rgba(77, 207, 255, 1); } 51% { color: rgba(250, 250, 250, 1); } 100% { color: rgba(250, 250, 250, 1); } } @keyframes changeColor { 0% { color: rgba(77, 207, 255, 1); } 49% { color: rgba(77, 207, 255, 1); } 51% { color: rgba(250, 250, 250, 1); } 100% { color: rgba(250, 250, 250, 1); } } @-webkit-keyframes showPM { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 100% { -webkit-transform: translateY(-65px); transform: translateY(-65px); } } @keyframes showPM { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 100% { -webkit-transform: translateY(-65px); transform: translateY(-65px); } } @-webkit-keyframes hidePM { 0% { -webkit-transform: translateY(-65px); transform: translateY(-65px); } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } } @keyframes hidePM { 0% { -webkit-transform: translateY(-65px); transform: translateY(-65px); } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } } .ui-time-picker-hide-pm { -webkit-animation: hidePM 300ms ease-out 0ms; animation: hidePM 300ms ease-out 0ms; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .ui-time-picker-show-pm { -webkit-animation: showPM 300ms ease-out 0ms; animation: showPM 300ms ease-out 0ms; -webkit-animation-fill-mode: forwards; 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; -webkit-transition-duration: 300ms, 300ms; transition-duration: 300ms, 300ms; -webkit-transition-property: opacity, top; transition-property: opacity, top; -webkit-transition-timing-function: linear; 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 { -webkit-animation: changeColor 1s infinite; animation: changeColor 1s infinite; color: rgba(77, 207, 255, 1); } .ui-date-picker .ui-date-picker-container-month { float: left; height: inherit; margin-left: 1.5rem; width: 6rem; position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; 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: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; 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: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; 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: rgba(250, 250, 250, 0.8); } .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: rgba(77, 207, 255, 1); } 49% { color: rgba(77, 207, 255, 1); } 51% { color: rgba(250, 250, 250, 1); } 100% { color: rgba(250, 250, 250, 1); } } input[type=text], input[type=password], input[type=search], input[type=email] { -webkit-mask-image: url("images/TextInput/b_list_edit_field_bg.png"); mask-image: url("images/TextInput/b_list_edit_field_bg.png"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; width: 18rem; height: 3.875rem; padding: 0.8125rem 1rem; color: rgba(250, 250, 250, 1); font-size: 1.75rem; background-color: rgba(250, 250, 250, 0.15); border: none; outline: none; } input[type=text]:disabled, input[type=password]:disabled, input[type=search]:disabled, input[type=email]:disabled { color: rgba(250, 250, 250, 0.3); } 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: rgba(77, 225, 255, 1); -webkit-text-fill-color: rgba(179, 179, 179, 1); 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: rgba(250, 250, 250, 0.15); } .ui-textinput-pane { width: 100%; height: 100%; position: fixed; display: none; background: rgba(0, 0, 0, 1); 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: rgba(0, 0, 0, 1); } @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%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } }