/* * Copyright (c) 2015 Samsung Electronics Co., Ltd * * Licensed under the Flora License, Version 1.1 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://floralicense.org/license/ * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*************************************************************************** Body ***************************************************************************/ /*************************************************************************** Action Bar ***************************************************************************/ /**************************************************************************** Circle Progress Bar ****************************************************************************/ /**************************************************************************** Progress Bar ****************************************************************************/ /**************************************************************************** Processing ****************************************************************************/ /**************************************************************************** Toggle Switch ****************************************************************************/ /*************************************************************************** Buttons ***************************************************************************/ /*************************************************************************** Popup ***************************************************************************/ /*************************************************************************** Option Popup ***************************************************************************/ /*************************************************************************** index scrollbar (vertical) ***************************************************************************/ /*************************************************************************** circular index scrollbar ***************************************************************************/ /*************************************************************************** Listview ***************************************************************************/ /**************************************************************************** Listview with Marquee ****************************************************************************/ /*************************************************************************** Scroller ***************************************************************************/ /*************************************************************************** Swipe list ***************************************************************************/ /*************************************************************************** Checkbox/Radio ***************************************************************************/ /*************************************************************************** Page Indicator ***************************************************************************/ /*************************************************************************** More options ***************************************************************************/ /*************************************************************************** View Switcher ***************************************************************************/ /*************************************************************************** Slider ***************************************************************************/ /*************************************************************************** Selector ***************************************************************************/ /*************************************************************************** Empty state ***************************************************************************/ /*************************************************************************** Grid ***************************************************************************/ /************************ Listview *************************/ /************************************************************************/ /* 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) */ /***********************************************************************/ /**********************************************************************/ /* Button(FIXED) */ /**********************************************************************/ /**********************************************************************/ /* Popup(FIXED) */ /**********************************************************************/ /**********************************************************************/ /* ToggleSwitch(FIXED) */ /**********************************************************************/ /*********************************************************************/ /* Progress(FIXED) */ /*********************************************************************/ * { outline: none; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } audio, canvas, video { display: inline-block; zoom: 1; } audio:not([controls]) { display: none; height: 0; } [hidden] { display: none; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -o-text-size-adjust: 100%; text-size-adjust: 100%; } html, button, input, select, textarea { font-family: Tizen, Samsung Sans, Helvetica; } body { margin: 0; } h1 { font-size: 2em; margin: .67em 0; } h2 { font-size: 1.5em; margin: .83em 0; } h3 { font-size: 1.17em; margin: 1em 0; } h4 { font-size: 1em; margin: 1.33em 0; } h5 { font-size: .83em; margin: 1.67em 0; } h6 { font-size: .75em; margin: 2.33em 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } dfn { font-style: italic; } mark { background: #ff0; color: #000; } p, pre { margin: 1em 0; } code, kbd, pre, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } q:before, q:after { content: ''; content: none; } small { font-size: 75%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } dl, menu, ol, ul { margin: 1em 0; } dd { margin: 0 0 0 40px; } menu, ol, ul { padding: 0 0 0 40px; } nav ul, nav ol { list-style: none; list-style-image: none; } img { border: 0; -ms-interpolation-mode: bicubic; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } form { margin: 0; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: .35em .625em .75em; } legend { border: 0; padding: 0; white-space: normal; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; } button, input { line-height: normal; } button[disabled], input[disabled] { cursor: default; } input[type="time"], input[type="date"] { color: #000000; } input[type="search"] { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } table { border-collapse: collapse; border-spacing: 0; } .tau-info-theme { position: absolute; top: -999px; left: -999px; } .screen-hidden { visibility: hidden; position: absolute; top: -10000em; left: -10000em; } button, input { outline: none; cursor: pointer; } * { box-sizing: border-box; } a { text-decoration: none; color: rgba(250, 250, 250, 1); } ul, li { margin: 0; padding: 0; list-style-type: none; } img { margin: 0; padding: 0; } html { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } body { height: 100%; font-size: 2.125rem; font-family: Tizen, Samsung Sans, Helvetica; background: rgba(36, 27, 19, 1); color: rgba(250, 250, 250, 1); } tau-page { display: block; } .ui-page { width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; display: none; background: rgba(36, 27, 19, 1); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .ui-page.ui-page-active { display: block; 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-page.ui-page-build { 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; visibility: hidden; } .ui-page tau-scrollview { display: block; } .ui-page .ui-content { width: 100%; height: auto; overflow: auto; -webkit-overflow-scrolling: touch; -moz-overflow-scrolling: touch; -o-overflow-scrolling: touch; -ms-overflow-scrolling: touch; overflow-scrolling: touch; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .ui-page .ui-content.ui-content-padding { padding-left: 0.75rem; padding-right: 0.75rem; } .ui-page .ui-content.ui-content-fixed-middle { position: fixed; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } .ui-page .ui-header { position: relative; width: 100%; line-height: 60px; background-color: rgba(51, 40, 30, 1); } .ui-page .ui-header .ui-subtitle { height: 30px; font-weight: normal; line-height: 30px; padding-left: 16px; padding-right: 16px; color: rgba(255, 145, 0, 1); font-size: 24px; margin: -0.625rem 0 0.3125rem 0; } .ui-page .ui-header .ui-title { color: rgba(255, 145, 0, 1); font-size: 32px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; padding-left: 16px; padding-right: 16px; -webkit-mask-image: -webkit-linear-gradient(left, #000000 80%, rgba(0, 0, 0, 0) 95%); mask-image: linear-gradient(left, #000000 80%, rgba(0, 0, 0, 0) 95%); } .ui-page .ui-header .ui-title.ui-icon { padding-left: 60px; background-position: 16px 14px; background-size: 34px 34px; background-repeat: no-repeat; } .ui-page .ui-header.ui-has-more .ui-title { padding-right: 78px; -webkit-mask-image: -webkit-linear-gradient(left, #000000 70%, rgba(0, 0, 0, 0) 75%); mask-image: linear-gradient(left, #000000 70%, rgba(0, 0, 0, 0) 75%); } .ui-page .ui-header button.ui-more, .ui-page .ui-header input.ui-more { border: 0 none; padding: 0; } .ui-page .ui-header .ui-more-disable { cursor: default; background-color: transparent; } .ui-page .ui-header .ui-more { display: block; position: absolute; top: 0; right: 0; width: 68px; height: 100%; overflow: hidden; text-indent: -1000em; background-position: center center; background-color: transparent; cursor: pointer; } .ui-page .ui-header .ui-more:active { background-color: rgba(110, 88, 67, 1); } .ui-page .ui-header .ui-more.ui-icon-detail { background-color: rgba(255, 145, 0, 1); -webkit-mask-image: url("images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png"); mask-image: url("images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png"); -webkit-mask-size: 3.25rem 3.75rem; -moz-mask-size: 3.25rem 3.75rem; -ms-mask-size: 3.25rem 3.75rem; -o-mask-size: 3.25rem 3.75rem; mask-size: 3.25rem 3.75rem; -webkit-mask-position: center; -moz-mask-position: center; -ms-mask-position: center; -o-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; -moz-mask-repeat: no-repeat; -ms-mask-repeat: no-repeat; -o-mask-repeat: no-repeat; mask-repeat: no-repeat; } .ui-page .ui-header .ui-more.ui-icon-detail[disabled="disabled"] { cursor: default; background-color: transparent; background-color: rgba(255, 145, 0, 0.2); -webkit-mask-image: url("images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png"); mask-image: url("images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png"); -webkit-mask-size: 3.25rem 3.75rem; -moz-mask-size: 3.25rem 3.75rem; -ms-mask-size: 3.25rem 3.75rem; -o-mask-size: 3.25rem 3.75rem; mask-size: 3.25rem 3.75rem; -webkit-mask-position: center; -moz-mask-position: center; -ms-mask-position: center; -o-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; -moz-mask-repeat: no-repeat; -ms-mask-repeat: no-repeat; -o-mask-repeat: no-repeat; mask-repeat: no-repeat; } .ui-page .ui-header .ui-more.ui-icon-overflow { background-color: rgba(255, 145, 0, 1); -webkit-mask-image: url("images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png"); mask-image: url("images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png"); -webkit-mask-size: 3.25rem 3.75rem; -moz-mask-size: 3.25rem 3.75rem; -ms-mask-size: 3.25rem 3.75rem; -o-mask-size: 3.25rem 3.75rem; mask-size: 3.25rem 3.75rem; -webkit-mask-position: center; -moz-mask-position: center; -ms-mask-position: center; -o-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; -moz-mask-repeat: no-repeat; -ms-mask-repeat: no-repeat; -o-mask-repeat: no-repeat; mask-repeat: no-repeat; } .ui-page .ui-header .ui-more.ui-icon-overflow[disabled="disabled"] { cursor: default; background-color: transparent; background-color: rgba(255, 145, 0, 0.2); -webkit-mask-image: url("images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png"); mask-image: url("images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png"); -webkit-mask-size: 3.25rem 3.75rem; -moz-mask-size: 3.25rem 3.75rem; -ms-mask-size: 3.25rem 3.75rem; -o-mask-size: 3.25rem 3.75rem; mask-size: 3.25rem 3.75rem; -webkit-mask-position: center; -moz-mask-position: center; -ms-mask-position: center; -o-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; -moz-mask-repeat: no-repeat; -ms-mask-repeat: no-repeat; -o-mask-repeat: no-repeat; mask-repeat: no-repeat; } .ui-page .ui-header .ui-more.ui-icon-selectall { background-color: rgba(255, 145, 0, 1); -webkit-mask-image: url("images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png"); mask-image: url("images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png"); -webkit-mask-size: 3.25rem 3.75rem; -moz-mask-size: 3.25rem 3.75rem; -ms-mask-size: 3.25rem 3.75rem; -o-mask-size: 3.25rem 3.75rem; mask-size: 3.25rem 3.75rem; -webkit-mask-position: center; -moz-mask-position: center; -ms-mask-position: center; -o-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; -moz-mask-repeat: no-repeat; -ms-mask-repeat: no-repeat; -o-mask-repeat: no-repeat; mask-repeat: no-repeat; } .ui-page .ui-header .ui-more.ui-icon-selectall[disabled="disabled"] { cursor: default; background-color: transparent; background-color: rgba(255, 145, 0, 0.2); -webkit-mask-image: url("images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png"); mask-image: url("images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png"); -webkit-mask-size: 3.25rem 3.75rem; -moz-mask-size: 3.25rem 3.75rem; -ms-mask-size: 3.25rem 3.75rem; -o-mask-size: 3.25rem 3.75rem; mask-size: 3.25rem 3.75rem; -webkit-mask-position: center; -moz-mask-position: center; -ms-mask-position: center; -o-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; -moz-mask-repeat: no-repeat; -ms-mask-repeat: no-repeat; -o-mask-repeat: no-repeat; mask-repeat: no-repeat; } .ui-page .ui-footer { width: 100%; position: absolute; bottom: 0; left: 0; } .ui-page.ui-scroll-on .ui-scroller { width: 100%; height: auto; overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; -moz-overflow-scrolling: touch; -o-overflow-scrolling: touch; -ms-overflow-scrolling: touch; overflow-scrolling: touch; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .ui-page.ui-scroll-on .ui-content { height: auto; -webkit-box-flex: 0; -webkit-flex: none; -ms-flex: none; flex: none; } .ui-page.ui-scroll-on .ui-footer { position: relative; } .ui-grid-col > * { float: left; } .ui-page .ui-grid-col-1 > * { float: left; } .ui-page .ui-grid-col-1 > * { width: 100%; } .ui-page .ui-grid-col-2 > * { float: left; } .ui-page .ui-grid-col-2 > * { width: 50%; } .ui-page .ui-grid-col-3 > * { float: left; } .ui-page .ui-grid-col-3 > * { width: 33.33333333%; } .ui-grid-row > * { display: block; } @-webkit-keyframes indeterminate { 0% { -webkit-mask-image: url('images/Progress/tw_progressbar_indeterminate1_holo_dark.png'); mask-image: url('images/Progress/tw_progressbar_indeterminate1_holo_dark.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; background-color: rgba(153, 87, 0, 1); } 25% { -webkit-mask-image: url('images/Progress/tw_progressbar_indeterminate2_holo_dark.png'); mask-image: url('images/Progress/tw_progressbar_indeterminate2_holo_dark.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; background-color: rgba(153, 87, 0, 1); } 50% { -webkit-mask-image: url('images/Progress/tw_progressbar_indeterminate3_holo_dark.png'); mask-image: url('images/Progress/tw_progressbar_indeterminate3_holo_dark.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; background-color: rgba(153, 87, 0, 1); } 75% { -webkit-mask-image: url('images/Progress/tw_progressbar_indeterminate4_holo_dark.png'); mask-image: url('images/Progress/tw_progressbar_indeterminate4_holo_dark.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; background-color: rgba(153, 87, 0, 1); } 100% { -webkit-mask-image: url('images/Progress/tw_progressbar_indeterminate5_holo_dark.png'); mask-image: url('images/Progress/tw_progressbar_indeterminate5_holo_dark.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; background-color: rgba(153, 87, 0, 1); } } @keyframes indeterminate { 0% { -webkit-mask-image: url('images/Progress/tw_progressbar_indeterminate1_holo_dark.png'); mask-image: url('images/Progress/tw_progressbar_indeterminate1_holo_dark.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; background-color: rgba(153, 87, 0, 1); } 25% { -webkit-mask-image: url('images/Progress/tw_progressbar_indeterminate2_holo_dark.png'); mask-image: url('images/Progress/tw_progressbar_indeterminate2_holo_dark.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; background-color: rgba(153, 87, 0, 1); } 50% { -webkit-mask-image: url('images/Progress/tw_progressbar_indeterminate3_holo_dark.png'); mask-image: url('images/Progress/tw_progressbar_indeterminate3_holo_dark.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; background-color: rgba(153, 87, 0, 1); } 75% { -webkit-mask-image: url('images/Progress/tw_progressbar_indeterminate4_holo_dark.png'); mask-image: url('images/Progress/tw_progressbar_indeterminate4_holo_dark.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; background-color: rgba(153, 87, 0, 1); } 100% { -webkit-mask-image: url('images/Progress/tw_progressbar_indeterminate5_holo_dark.png'); mask-image: url('images/Progress/tw_progressbar_indeterminate5_holo_dark.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; background-color: rgba(153, 87, 0, 1); } } progress { position: relative; padding-left: 1rem; padding-right: 1rem; margin-top: 0.875rem; margin-bottom: 0.875rem; width: 100%; height: 0.375rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; } progress::-webkit-progress-bar { position: relative; background-color: rgba(71, 71, 71, 1); border-radius: 0.125rem; overflow: hidden; } progress::-webkit-progress-value { background-color: rgba(255, 145, 0, 1); height: 0.375rem; border-radius: 0.125rem; overflow: hidden; } progress.ui-progress-indeterminate::-webkit-progress-bar { background-color: rgba(255, 145, 0, 1); } progress.ui-progress-indeterminate::-webkit-progress-value { background-size: 100% 100%; -webkit-animation: indeterminate 150ms infinite; animation: indeterminate 150ms infinite; } .ui-progress-proportion { display: block; float: left; font-size: 20px; padding-left: 1rem; padding-right: 1rem; margin-top: -0.625rem; color: rgba(250, 250, 250, 1); } .ui-progress-ratio { display: block; float: right; font-size: 20px; padding-left: 1rem; padding-right: 1rem; margin-top: -0.625rem; color: rgba(250, 250, 250, 1); } .ui-circle-progress { display: none; } .ui-progressbar { position: relative; display: inline-block; pointer-events: none; } .ui-progressbar.ui-progressbar-full { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } /* * toggle switch */ .ui-switch { width: 100%; color: rgba(250, 250, 250, 1); } .ui-switch-inneroffset, .ui-switch-handler { display: none; } .ui-switch-text { margin-top: 30px; margin-bottom: 40px; padding: 0 30px; font-size: 34px; text-align: center; } .ui-switch-sub-text { margin-top: 48px; font-size: 26px; text-align: center; color: T161; } .ui-toggleswitch { position: relative; display: inline-block; width: 103.5px; height: 55px; overflow: hidden; } .ui-toggleswitch.ui-toggleswitch-large { width: 207px; height: 110px; } .ui-toggleswitch .ui-switch-input { position: absolute; width: 100%; height: 100%; -webkit-appearance: none; display: block; } .ui-toggleswitch .ui-switch-input::before { content: ""; position: absolute; width: 100%; height: 100%; -webkit-mask-image: url('images/Controller_icon/toggle_changeable.png'); mask-image: url('images/Controller_icon/toggle_changeable.png'); -webkit-mask-size: 100% 400%; -moz-mask-size: 100% 400%; -ms-mask-size: 100% 400%; -o-mask-size: 100% 400%; mask-size: 100% 400%; -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-position: 0 0; -moz-mask-position: 0 0; -ms-mask-position: 0 0; -o-mask-position: 0 0; mask-position: 0 0; background-color: rgba(107, 106, 106, 1); z-index: 0; } .ui-toggleswitch .ui-switch-input:active::before { background-color: rgba(107, 106, 106, 1); } .ui-toggleswitch .ui-switch-input:active ~ .ui-switch-activation, .ui-toggleswitch .ui-switch-input:active ~ .ui-switch-button { background-color: rgba(184, 184, 184, 1); } .ui-toggleswitch .ui-switch-input:active ~ .ui-switch-activation::before, .ui-toggleswitch .ui-switch-input:active ~ .ui-switch-button::before { background-color: rgba(107, 106, 106, 1); } .ui-toggleswitch .ui-switch-activation, .ui-toggleswitch .ui-switch-button { width: 100%; height: 100%; -webkit-mask-image: url('images/Controller_icon/toggle_changeable.png'); mask-image: url('images/Controller_icon/toggle_changeable.png'); -webkit-mask-size: 100% 400%; -moz-mask-size: 100% 400%; -ms-mask-size: 100% 400%; -o-mask-size: 100% 400%; mask-size: 100% 400%; -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-position: 0 33.3%; -moz-mask-position: 0 33.3%; -ms-mask-position: 0 33.3%; -o-mask-position: 0 33.3%; mask-position: 0 33.3%; background-color: rgba(250, 250, 250, 1); position: absolute; top: 0; left: 0; pointer-events: none; z-index: 1; } .ui-toggleswitch .ui-switch-activation::before, .ui-toggleswitch .ui-switch-button::before { content: ""; position: absolute; width: 100%; height: 100%; -webkit-mask-image: url('images/Controller_icon/toggle_changeable.png'); mask-image: url('images/Controller_icon/toggle_changeable.png'); -webkit-mask-size: 100% 400%; -moz-mask-size: 100% 400%; -ms-mask-size: 100% 400%; -o-mask-size: 100% 400%; mask-size: 100% 400%; -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-position: 0 66.7%; -moz-mask-position: 0 66.7%; -ms-mask-position: 0 66.7%; -o-mask-position: 0 66.7%; mask-position: 0 66.7%; background-color: rgba(138, 138, 138, 1); top: 0; left: 0; } .ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-activation, .ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-button { width: 100%; height: 100%; background-color: rgba(250, 250, 250, 1); -webkit-mask-position: 0 33%; -moz-mask-position: 0 33%; -ms-mask-position: 0 33%; -o-mask-position: 0 33%; mask-position: 0 33%; -webkit-transform: translate3d(36.23%, 0, 0); -ms-transform: translate3d(36.23%, 0, 0); transform: translate3d(36.23%, 0, 0); } .ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-activation::before, .ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-button::before { -webkit-mask-position: 0 100%; -moz-mask-position: 0 100%; -ms-mask-position: 0 100%; -o-mask-position: 0 100%; mask-position: 0 100%; background-color: rgba(118, 196, 16, 1); } .ui-toggleswitch .ui-switch-input:checked::before { background-color: rgba(118, 196, 16, 1); } .ui-toggleswitch .ui-switch-input:checked:active::before { background-color: rgba(78, 107, 41, 1); } .ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-activation, .ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-button { background-color: rgba(184, 184, 184, 1); } .ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-activation::before, .ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-button::before { background-color: rgba(78, 107, 41, 1); } /*********************** Processing ***********************/ /** * @count_of_cols - how many sprites in one row * @xsize - size of transition on x axis to next sprite * @ysize - size of transition on y axis to next row of sprites * @count - counter variable for while loop, loop is ending when count = 0; * @totalCount - count for 100% of animation */ @-webkit-keyframes smallprocess { 0% { -webkit-mask-position: 0rem 0rem; mask-position: 0rem 0rem; } 2% { -webkit-mask-position: -4.75rem 0rem; mask-position: -4.75rem 0rem; } 3% { -webkit-mask-position: -9.5rem 0rem; mask-position: -9.5rem 0rem; } 5% { -webkit-mask-position: -14.25rem 0rem; mask-position: -14.25rem 0rem; } 7% { -webkit-mask-position: -19rem 0rem; mask-position: -19rem 0rem; } 8% { -webkit-mask-position: -23.75rem 0rem; mask-position: -23.75rem 0rem; } 10% { -webkit-mask-position: -28.5rem 0rem; mask-position: -28.5rem 0rem; } 12% { -webkit-mask-position: 0rem -4.75rem; mask-position: 0rem -4.75rem; } 14% { -webkit-mask-position: -4.75rem -4.75rem; mask-position: -4.75rem -4.75rem; } 15% { -webkit-mask-position: -9.5rem -4.75rem; mask-position: -9.5rem -4.75rem; } 17% { -webkit-mask-position: -14.25rem -4.75rem; mask-position: -14.25rem -4.75rem; } 19% { -webkit-mask-position: -19rem -4.75rem; mask-position: -19rem -4.75rem; } 20% { -webkit-mask-position: -23.75rem -4.75rem; mask-position: -23.75rem -4.75rem; } 22% { -webkit-mask-position: -28.5rem -4.75rem; mask-position: -28.5rem -4.75rem; } 24% { -webkit-mask-position: 0rem -9.5rem; mask-position: 0rem -9.5rem; } 25% { -webkit-mask-position: -4.75rem -9.5rem; mask-position: -4.75rem -9.5rem; } 27% { -webkit-mask-position: -9.5rem -9.5rem; mask-position: -9.5rem -9.5rem; } 29% { -webkit-mask-position: -14.25rem -9.5rem; mask-position: -14.25rem -9.5rem; } 31% { -webkit-mask-position: -19rem -9.5rem; mask-position: -19rem -9.5rem; } 32% { -webkit-mask-position: -23.75rem -9.5rem; mask-position: -23.75rem -9.5rem; } 34% { -webkit-mask-position: -28.5rem -9.5rem; mask-position: -28.5rem -9.5rem; } 36% { -webkit-mask-position: 0rem -14.25rem; mask-position: 0rem -14.25rem; } 37% { -webkit-mask-position: -4.75rem -14.25rem; mask-position: -4.75rem -14.25rem; } 39% { -webkit-mask-position: -9.5rem -14.25rem; mask-position: -9.5rem -14.25rem; } 41% { -webkit-mask-position: -14.25rem -14.25rem; mask-position: -14.25rem -14.25rem; } 42% { -webkit-mask-position: -19rem -14.25rem; mask-position: -19rem -14.25rem; } 44% { -webkit-mask-position: -23.75rem -14.25rem; mask-position: -23.75rem -14.25rem; } 46% { -webkit-mask-position: -28.5rem -14.25rem; mask-position: -28.5rem -14.25rem; } 47% { -webkit-mask-position: 0rem -19rem; mask-position: 0rem -19rem; } 49% { -webkit-mask-position: -4.75rem -19rem; mask-position: -4.75rem -19rem; } 51% { -webkit-mask-position: -9.5rem -19rem; mask-position: -9.5rem -19rem; } 53% { -webkit-mask-position: -14.25rem -19rem; mask-position: -14.25rem -19rem; } 54% { -webkit-mask-position: -19rem -19rem; mask-position: -19rem -19rem; } 56% { -webkit-mask-position: -23.75rem -19rem; mask-position: -23.75rem -19rem; } 58% { -webkit-mask-position: -28.5rem -19rem; mask-position: -28.5rem -19rem; } 59% { -webkit-mask-position: 0rem -23.75rem; mask-position: 0rem -23.75rem; } 61% { -webkit-mask-position: -4.75rem -23.75rem; mask-position: -4.75rem -23.75rem; } 63% { -webkit-mask-position: -9.5rem -23.75rem; mask-position: -9.5rem -23.75rem; } 64% { -webkit-mask-position: -14.25rem -23.75rem; mask-position: -14.25rem -23.75rem; } 66% { -webkit-mask-position: -19rem -23.75rem; mask-position: -19rem -23.75rem; } 68% { -webkit-mask-position: -23.75rem -23.75rem; mask-position: -23.75rem -23.75rem; } 69% { -webkit-mask-position: -28.5rem -23.75rem; mask-position: -28.5rem -23.75rem; } 71% { -webkit-mask-position: 0rem -28.5rem; mask-position: 0rem -28.5rem; } 73% { -webkit-mask-position: -4.75rem -28.5rem; mask-position: -4.75rem -28.5rem; } 75% { -webkit-mask-position: -9.5rem -28.5rem; mask-position: -9.5rem -28.5rem; } 76% { -webkit-mask-position: -14.25rem -28.5rem; mask-position: -14.25rem -28.5rem; } 78% { -webkit-mask-position: -19rem -28.5rem; mask-position: -19rem -28.5rem; } 80% { -webkit-mask-position: -23.75rem -28.5rem; mask-position: -23.75rem -28.5rem; } 81% { -webkit-mask-position: -28.5rem -28.5rem; mask-position: -28.5rem -28.5rem; } 83% { -webkit-mask-position: 0rem -33.25rem; mask-position: 0rem -33.25rem; } 85% { -webkit-mask-position: -4.75rem -33.25rem; mask-position: -4.75rem -33.25rem; } 86% { -webkit-mask-position: -9.5rem -33.25rem; mask-position: -9.5rem -33.25rem; } 88% { -webkit-mask-position: -14.25rem -33.25rem; mask-position: -14.25rem -33.25rem; } 90% { -webkit-mask-position: -19rem -33.25rem; mask-position: -19rem -33.25rem; } 92% { -webkit-mask-position: -23.75rem -33.25rem; mask-position: -23.75rem -33.25rem; } 93% { -webkit-mask-position: -28.5rem -33.25rem; mask-position: -28.5rem -33.25rem; } 95% { -webkit-mask-position: 0rem -38rem; mask-position: 0rem -38rem; } 97% { -webkit-mask-position: -4.75rem -38rem; mask-position: -4.75rem -38rem; } 98% { -webkit-mask-position: -9.5rem -38rem; mask-position: -9.5rem -38rem; } 100% { -webkit-mask-position: -14.25rem -38rem; mask-position: -14.25rem -38rem; } } @keyframes smallprocess { 0% { -webkit-mask-position: 0rem 0rem; mask-position: 0rem 0rem; } 2% { -webkit-mask-position: -4.75rem 0rem; mask-position: -4.75rem 0rem; } 3% { -webkit-mask-position: -9.5rem 0rem; mask-position: -9.5rem 0rem; } 5% { -webkit-mask-position: -14.25rem 0rem; mask-position: -14.25rem 0rem; } 7% { -webkit-mask-position: -19rem 0rem; mask-position: -19rem 0rem; } 8% { -webkit-mask-position: -23.75rem 0rem; mask-position: -23.75rem 0rem; } 10% { -webkit-mask-position: -28.5rem 0rem; mask-position: -28.5rem 0rem; } 12% { -webkit-mask-position: 0rem -4.75rem; mask-position: 0rem -4.75rem; } 14% { -webkit-mask-position: -4.75rem -4.75rem; mask-position: -4.75rem -4.75rem; } 15% { -webkit-mask-position: -9.5rem -4.75rem; mask-position: -9.5rem -4.75rem; } 17% { -webkit-mask-position: -14.25rem -4.75rem; mask-position: -14.25rem -4.75rem; } 19% { -webkit-mask-position: -19rem -4.75rem; mask-position: -19rem -4.75rem; } 20% { -webkit-mask-position: -23.75rem -4.75rem; mask-position: -23.75rem -4.75rem; } 22% { -webkit-mask-position: -28.5rem -4.75rem; mask-position: -28.5rem -4.75rem; } 24% { -webkit-mask-position: 0rem -9.5rem; mask-position: 0rem -9.5rem; } 25% { -webkit-mask-position: -4.75rem -9.5rem; mask-position: -4.75rem -9.5rem; } 27% { -webkit-mask-position: -9.5rem -9.5rem; mask-position: -9.5rem -9.5rem; } 29% { -webkit-mask-position: -14.25rem -9.5rem; mask-position: -14.25rem -9.5rem; } 31% { -webkit-mask-position: -19rem -9.5rem; mask-position: -19rem -9.5rem; } 32% { -webkit-mask-position: -23.75rem -9.5rem; mask-position: -23.75rem -9.5rem; } 34% { -webkit-mask-position: -28.5rem -9.5rem; mask-position: -28.5rem -9.5rem; } 36% { -webkit-mask-position: 0rem -14.25rem; mask-position: 0rem -14.25rem; } 37% { -webkit-mask-position: -4.75rem -14.25rem; mask-position: -4.75rem -14.25rem; } 39% { -webkit-mask-position: -9.5rem -14.25rem; mask-position: -9.5rem -14.25rem; } 41% { -webkit-mask-position: -14.25rem -14.25rem; mask-position: -14.25rem -14.25rem; } 42% { -webkit-mask-position: -19rem -14.25rem; mask-position: -19rem -14.25rem; } 44% { -webkit-mask-position: -23.75rem -14.25rem; mask-position: -23.75rem -14.25rem; } 46% { -webkit-mask-position: -28.5rem -14.25rem; mask-position: -28.5rem -14.25rem; } 47% { -webkit-mask-position: 0rem -19rem; mask-position: 0rem -19rem; } 49% { -webkit-mask-position: -4.75rem -19rem; mask-position: -4.75rem -19rem; } 51% { -webkit-mask-position: -9.5rem -19rem; mask-position: -9.5rem -19rem; } 53% { -webkit-mask-position: -14.25rem -19rem; mask-position: -14.25rem -19rem; } 54% { -webkit-mask-position: -19rem -19rem; mask-position: -19rem -19rem; } 56% { -webkit-mask-position: -23.75rem -19rem; mask-position: -23.75rem -19rem; } 58% { -webkit-mask-position: -28.5rem -19rem; mask-position: -28.5rem -19rem; } 59% { -webkit-mask-position: 0rem -23.75rem; mask-position: 0rem -23.75rem; } 61% { -webkit-mask-position: -4.75rem -23.75rem; mask-position: -4.75rem -23.75rem; } 63% { -webkit-mask-position: -9.5rem -23.75rem; mask-position: -9.5rem -23.75rem; } 64% { -webkit-mask-position: -14.25rem -23.75rem; mask-position: -14.25rem -23.75rem; } 66% { -webkit-mask-position: -19rem -23.75rem; mask-position: -19rem -23.75rem; } 68% { -webkit-mask-position: -23.75rem -23.75rem; mask-position: -23.75rem -23.75rem; } 69% { -webkit-mask-position: -28.5rem -23.75rem; mask-position: -28.5rem -23.75rem; } 71% { -webkit-mask-position: 0rem -28.5rem; mask-position: 0rem -28.5rem; } 73% { -webkit-mask-position: -4.75rem -28.5rem; mask-position: -4.75rem -28.5rem; } 75% { -webkit-mask-position: -9.5rem -28.5rem; mask-position: -9.5rem -28.5rem; } 76% { -webkit-mask-position: -14.25rem -28.5rem; mask-position: -14.25rem -28.5rem; } 78% { -webkit-mask-position: -19rem -28.5rem; mask-position: -19rem -28.5rem; } 80% { -webkit-mask-position: -23.75rem -28.5rem; mask-position: -23.75rem -28.5rem; } 81% { -webkit-mask-position: -28.5rem -28.5rem; mask-position: -28.5rem -28.5rem; } 83% { -webkit-mask-position: 0rem -33.25rem; mask-position: 0rem -33.25rem; } 85% { -webkit-mask-position: -4.75rem -33.25rem; mask-position: -4.75rem -33.25rem; } 86% { -webkit-mask-position: -9.5rem -33.25rem; mask-position: -9.5rem -33.25rem; } 88% { -webkit-mask-position: -14.25rem -33.25rem; mask-position: -14.25rem -33.25rem; } 90% { -webkit-mask-position: -19rem -33.25rem; mask-position: -19rem -33.25rem; } 92% { -webkit-mask-position: -23.75rem -33.25rem; mask-position: -23.75rem -33.25rem; } 93% { -webkit-mask-position: -28.5rem -33.25rem; mask-position: -28.5rem -33.25rem; } 95% { -webkit-mask-position: 0rem -38rem; mask-position: 0rem -38rem; } 97% { -webkit-mask-position: -4.75rem -38rem; mask-position: -4.75rem -38rem; } 98% { -webkit-mask-position: -9.5rem -38rem; mask-position: -9.5rem -38rem; } 100% { -webkit-mask-position: -14.25rem -38rem; mask-position: -14.25rem -38rem; } } @-webkit-keyframes fullprocess { 0% { -webkit-mask-position: 0 0rem; mask-position: 0 0rem; } 25% { -webkit-mask-position: 0 -0.375rem; mask-position: 0 -0.375rem; } 50% { -webkit-mask-position: 0 -0.75rem; mask-position: 0 -0.75rem; } 75% { -webkit-mask-position: 0 -1.125rem; mask-position: 0 -1.125rem; } 100% { -webkit-mask-position: 0 -1.5rem; mask-position: 0 -1.5rem; } } @keyframes fullprocess { 0% { -webkit-mask-position: 0 0rem; mask-position: 0 0rem; } 25% { -webkit-mask-position: 0 -0.375rem; mask-position: 0 -0.375rem; } 50% { -webkit-mask-position: 0 -0.75rem; mask-position: 0 -0.75rem; } 75% { -webkit-mask-position: 0 -1.125rem; mask-position: 0 -1.125rem; } 100% { -webkit-mask-position: 0 -1.5rem; mask-position: 0 -1.5rem; } } .ui-processing { background-color: rgba(153, 87, 0, 1); -webkit-mask-image: url("images/Processing/processingsmall.png"); mask-image: url("images/Processing/processingsmall.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: smallprocess; animation-name: smallprocess; width: 4.75rem; height: 4.75rem; margin: 0 auto; } .ui-processing.ui-processing-full-size { -webkit-mask-image: url("images/Processing/processing_bar.png"); mask-image: url("images/Processing/processing_bar.png"); -webkit-animation-name: fullprocess; animation-name: fullprocess; width: 100%; height: 0.375rem; margin-top: 0.375rem; margin-bottom: 0.375rem; max-width: 19.75rem; } .ui-processing.ui-hidden { display: none; } .ui-processing-text { margin: 0 auto; text-align: center; width: 10.5rem; font-size: 1.5rem; color: rgba(250, 250, 250, 1); } .ui-btn { display: block; position: relative; padding-right: 10px; padding-left: 10px; margin: 0; font-size: 2rem; line-height: 5.3125rem; height: 5.3125rem; text-align: center; white-space: nowrap; cursor: pointer; vertical-align: middle; text-overflow: ellipsis; overflow: hidden; border: 0 none; color: rgba(250, 250, 250, 1); background-color: rgba(74, 64, 55, 1); } a.ui-btn:active:hover, .ui-btn:enabled:active:hover { background-color: rgba(110, 88, 67, 1); } .ui-btn:enabled:focus { background-color: rgba(74, 64, 55, 1); } a.ui-btn.ui-state-disabled, .ui-btn:disabled { color: rgba(250, 250, 250, 0.2); background-color: rgba(13, 12, 11, 1); cursor: default; } .ui-btn.ui-multiline { padding-top: 10px; padding-bottom: 10px; } .ui-btn.ui-inline { display: inline-block; } .ui-btn.ui-btn-icon { background-position: center center; height: 5.5rem; width: 5.5rem; text-indent: -1000em; overflow: hidden; background-repeat: no-repeat; background-size: 5.5rem 5.5rem; } .ui-btn.ui-btn-icon::before { content: ""; -webkit-mask-size: 5.5rem 5.5rem; mask-size: 5.5rem 5.5rem; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 0 0; mask-position: 0 0; width: 5.5rem; height: 5.5rem; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); position: absolute; -webkit-mask-image: none; mask-image: none; background-position: center center; background-repeat: no-repeat; } .ui-btn.ui-btn-icon-only { text-indent: -624.9375rem; } .ui-btn.ui-btn-icon-only::before { content: ""; position: absolute; -webkit-mask-size: 3.75rem 3.75rem; mask-size: 3.75rem 3.75rem; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; width: 3.75rem; height: 3.75rem; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); background-color: rgba(250, 250, 250, 1); -webkit-transition: background 150ms; transition: background 150ms; } .ui-btn.ui-btn-icon-only:active::before { background-color: rgba(250, 250, 250, 1); } .ui-btn.ui-btn-icon-only:disabled::before { background-color: rgba(250, 250, 250, 0.4); } .ui-btn.ui-btn-nobg.ui-btn-icon, .ui-btn.ui-btn-no-bg.ui-btn-icon { background-color: transparent; height: 33vh; } .ui-btn.ui-btn-nobg.ui-btn-icon::before, .ui-btn.ui-btn-no-bg.ui-btn-icon::before { content: ''; position: absolute; background-color: white; border-radius: 50%; width: 30vw; height: 30vh; opacity: 0; left: 50%; top: 50%; } .ui-btn.ui-btn-nobg.ui-btn-icon:enabled:active:hover, .ui-btn.ui-btn-no-bg.ui-btn-icon:enabled:active:hover, .ui-btn.ui-btn-nobg.ui-btn-icon:enabled:focus, .ui-btn.ui-btn-no-bg.ui-btn-icon:enabled:focus { background-color: transparent; } .ui-btn.ui-btn-nobg.ui-btn-icon.ui-btn-active::before, .ui-btn.ui-btn-no-bg.ui-btn-icon.ui-btn-active::before { -webkit-transform: translate(-50%, -50%) scale(1.1); -ms-transform: translate(-50%, -50%) scale(1.1); transform: translate(-50%, -50%) scale(1.1); -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 1), linear; animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 1), linear; -webkit-animation-duration: 300ms, 733ms; animation-duration: 300ms, 733ms; -webkit-animation-name: touch-text-btn-scale, touch-text-btn-opacity; animation-name: touch-text-btn-scale, touch-text-btn-opacity; } .ui-btn.ui-btn-text { height: 3.3125rem; line-height: 2.6875rem; padding: 0.3125rem; margin: auto; max-width: 16.125rem; min-width: 4.125rem; } .ui-btn.ui-btn-text:enabled:active:hover, .ui-btn.ui-btn-text:enabled:focus { background-color: transparent; } .ui-btn.ui-btn-text.ui-btn-active { -webkit-animation: btn-circle-opacity-press cubic-bezier(0.25, 0.46, 0.45, 1) 300ms; animation: btn-circle-opacity-press cubic-bezier(0.25, 0.46, 0.45, 1) 300ms; } .ui-btn.ui-btn-nobg.ui-btn-icon, .ui-btn.ui-btn-no-bg.ui-btn-icon { width: 4.75rem; height: 4.75rem; overflow: visible; background-color: transparent; } .ui-btn.ui-btn-nobg.ui-btn-icon::after, .ui-btn.ui-btn-no-bg.ui-btn-icon::after { position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); content: ''; background-color: rgba(250, 250, 250, 1); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: cover; mask-size: cover; } .ui-btn.ui-btn-nobg.ui-btn-icon::after:enabled:active:hover, .ui-btn.ui-btn-no-bg.ui-btn-icon::after:enabled:active:hover { background-color: rgba(250, 250, 250, 1); } .ui-btn.ui-btn-nobg.ui-btn-icon::after:enabled:focus, .ui-btn.ui-btn-no-bg.ui-btn-icon::after:enabled:focus { background-color: rgba(250, 250, 250, 1); } .ui-btn.ui-btn-nobg.ui-btn-icon::after:disabled, .ui-btn.ui-btn-no-bg.ui-btn-icon::after:disabled { background-color: rgba(250, 250, 250, 0.4); cursor: default; } .ui-btn.ui-btn-nobg.ui-btn-icon::before, .ui-btn.ui-btn-no-bg.ui-btn-icon::before { height: 141%; width: 141%; } .ui-btn.ui-btn-nobg.ui-btn-icon:enabled:active:hover, .ui-btn.ui-btn-no-bg.ui-btn-icon:enabled:active:hover { background-color: transparent; } .ui-btn.ui-btn-nobg.ui-btn-icon:enabled:focus, .ui-btn.ui-btn-no-bg.ui-btn-icon:enabled:focus { background-color: transparent; } .ui-btn.ui-btn-nobg.ui-btn-icon:disabled, .ui-btn.ui-btn-no-bg.ui-btn-icon:disabled { background-color: transparent; cursor: default; } .ui-btn.ui-btn-middle { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @-webkit-keyframes touch-text-btn-scale { 0% { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } 100% { -webkit-transform: translate(-50%, -50%) scale(1.1); transform: translate(-50%, -50%) scale(1.1); } } @keyframes touch-text-btn-scale { 0% { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } 100% { -webkit-transform: translate(-50%, -50%) scale(1.1); transform: translate(-50%, -50%) scale(1.1); } } @-webkit-keyframes touch-text-btn-opacity { 0% { opacity: .13; } 72% { opacity: .13; } 100% { opacity: 0; } } @keyframes touch-text-btn-opacity { 0% { opacity: .13; } 72% { opacity: .13; } 100% { opacity: 0; } } @-webkit-keyframes btn-circle-opacity-press { 0% { opacity: 1; } 3% { opacity: .4; } 65% { opacity: .4; } 100% { opacity: 1; } } @keyframes btn-circle-opacity-press { 0% { opacity: 1; } 3% { opacity: .4; } 65% { opacity: .4; } 100% { opacity: 1; } } @-webkit-keyframes btn-footer-opacity-press { 0% { opacity: 0; } 3% { opacity: 1; } 65% { opacity: 1; } 100% { opacity: 0; } } @keyframes btn-footer-opacity-press { 0% { opacity: 0; } 3% { opacity: 1; } 65% { opacity: 1; } 100% { opacity: 0; } } .ui-default { color: rgba(250, 250, 250, 1); background-color: rgba(74, 64, 55, 1); } a.ui-default:active:hover, .ui-default:enabled:active:hover { background-color: rgba(110, 88, 67, 1); } .ui-default:enabled:focus { background-color: rgba(74, 64, 55, 1); } a.ui-default.ui-state-disabled, .ui-default:disabled { color: rgba(250, 250, 250, 0.2); background-color: rgba(13, 12, 11, 1); cursor: default; } .ui-color-red { color: rgba(250, 250, 250, 1); background-color: rgba(207, 36, 2, 1); } a.ui-color-red:active:hover, .ui-color-red:enabled:active:hover { background-color: rgba(222, 102, 78, 1); } .ui-color-red:enabled:focus { background-color: rgba(207, 36, 2, 1); } a.ui-color-red.ui-state-disabled, .ui-color-red:disabled { color: rgba(250, 250, 250, 0.2); background-color: rgba(69, 11, 1, 1); cursor: default; } .ui-color-orange { color: rgba(250, 250, 250, 1); background-color: rgba(237, 134, 0, 1); } a.ui-color-orange:active:hover, .ui-color-orange:enabled:active:hover { background-color: rgba(242, 171, 78, 0.4); } .ui-color-orange:enabled:focus { background-color: rgba(237, 134, 0, 1); } a.ui-color-orange.ui-state-disabled, .ui-color-orange:disabled { color: rgba(250, 250, 250, 0.2); background-color: rgba(69, 39, 5, 1); cursor: default; } .ui-color-green { color: rgba(250, 250, 250, 1); background-color: rgba(97, 163, 16, 1); } a.ui-color-green:active:hover, .ui-color-green:enabled:active:hover { background-color: rgba(146, 191, 90, 1); } .ui-color-green:enabled:focus { background-color: rgba(97, 163, 16, 1); } a.ui-color-green.ui-state-disabled, .ui-color-green:disabled { color: rgba(250, 250, 250, 0.2); background-color: rgba(50, 54, 48, 1); cursor: default; } .ui-btn:focus, .ui-btn:active { outline: none; } a.ui-btn { text-decoration: none; box-sizing: border-box; } button.ui-btn, input.ui-btn { box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; } button.ui-btn.ui-inline, input.ui-btn.ui-inline { display: inline-block; width: auto; } .ui-grid-col-1 > .ui-btn { border-left: solid 1px rgba(36, 27, 19, 1); } .ui-grid-col-1 > .ui-btn:first-child { border-left: 0 none; } .ui-grid-col-2 > .ui-btn { border-left: solid 1px rgba(36, 27, 19, 1); } .ui-grid-col-2 > .ui-btn:first-child { border-left: 0 none; } .ui-grid-col-3 > .ui-btn { border-left: solid 1px rgba(36, 27, 19, 1); } .ui-grid-col-3 > .ui-btn:first-child { border-left: 0 none; } .ui-grid-row > .ui-btn { margin-top: 1px; } .ui-grid-row > .ui-btn:first-child { margin-top: 0; } .ui-popup { box-sizing: border-box; position: fixed; left: 0; width: 100%; margin: 0; background-color: rgba(31, 24, 19, 1); border: 3px solid rgba(255, 145, 0, 1); display: none; z-index: 1100; } .ui-popup:not(.ui-ctxpopup) { bottom: 0; } .ui-popup .ui-popup-header { width: 100%; min-height: 68px; font-size: 30px; text-align: left; background-color: rgba(43, 37, 31, 1); color: rgba(242, 159, 51, 1); padding-top: 14px; padding-right: 13px; padding-bottom: 14px; padding-left: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ui-popup .ui-popup-content { width: 100%; min-height: 14rem; font-size: 2.125rem; text-align: left; color: rgba(250, 250, 250, 1); background-color: rgba(31, 24, 19, 1); padding: 10px 16px 9px 16px; overflow: auto; -webkit-overflow-scrolling: touch; -moz-overflow-scrolling: touch; -o-overflow-scrolling: touch; -ms-overflow-scrolling: touch; overflow-scrolling: touch; } .ui-popup .ui-popup-content .ui-listview, .ui-popup .ui-popup-content .ui-inline-listview { margin: -0.5625rem -1rem -0.5625rem -1rem; } .ui-popup .ui-popup-content .ui-listview li, .ui-popup .ui-popup-content .ui-inline-listview li { font-size: 2.125rem; } .ui-popup .ui-popup-footer { width: 100%; height: 83px; } .ui-popup .ui-popup-footer .ui-btn { padding-top: 27px; padding-bottom: 28px; font-size: 30px; } .ui-popup .ui-popup-footer .ui-btn.ui-btn-icon-only { position: relative; text-indent: -624.9375rem; } .ui-popup .ui-popup-footer .ui-btn.ui-btn-icon-only::before { content: ""; position: absolute; -webkit-mask-size: 3.125rem 3.125rem; mask-size: 3.125rem 3.125rem; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; width: 3.125rem; height: 3.125rem; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } .ui-popup.ui-popup-active { display: block; } .ui-popup.in { display: block; } .ui-popup.ui-build { display: block; visibility: hidden; } .ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) { max-height: 100%; } .ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-wrapper { width: 100%; max-height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; -moz-overflow-scrolling: touch; -o-overflow-scrolling: touch; -ms-overflow-scrolling: touch; overflow-scrolling: touch; } .ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-content { height: auto; } .ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-header.ui-fixed { position: absolute; top: 0; left: 0; width: 100%; z-index: 2100; } .ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-footer.ui-fixed { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 2100; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .ui-popup.ui-ctxpopup { background-color: transparent; width: 100%; border: 0 none; border-radius: 0; overflow: visible; } div.ui-popup.ui-ctxpopup.ui-popup-content-size { width: auto; padding: 0 0 0 0; } div.ui-popup.ui-ctxpopup.ui-popup-content-size .ui-popup-content { width: auto; } .ui-popup.ui-ctxpopup .ui-popup-content { min-height: initial; background-color: rgba(250, 250, 250, 1); border: 1px solid rgba(122, 122, 122, 0.9); color: #333; } .ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li { color: rgba(0, 0, 0, 1); border-bottom: 1px solid rgba(204, 204, 204, 1); min-height: 90px; padding: 21px 8px 20px 16px; } .ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a { color: rgba(0, 0, 0, 1); margin: -21px -16px; padding: 21px 16px; min-height: 48px; } .ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a:active { color: rgba(250, 250, 250, 1); background-color: rgba(217, 130, 17, 1); } .ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li:last-child { border: none; } .ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon { position: relative; padding-left: 4.25rem; } .ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon a { margin-left: -4.25rem; padding-left: 4.25rem; } .ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon::before { content: ""; position: absolute; top: 50%; left: 0.375rem; width: 3.5rem; height: 3.5rem; margin-top: -1.75rem; background-color: rgba(99, 99, 99, 0.9); -webkit-mask-size: 3.5rem 3.5rem; -moz-mask-size: 3.5rem 3.5rem; -ms-mask-size: 3.5rem 3.5rem; -o-mask-size: 3.5rem 3.5rem; mask-size: 3.5rem 3.5rem; -webkit-mask-repeat: no-repeat; -moz-mask-repeat: no-repeat; -ms-mask-repeat: no-repeat; -o-mask-repeat: no-repeat; mask-repeat: no-repeat; } .ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon:active::before { background-color: rgba(250, 250, 250, 1); } .ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview { height: 4.3125rem; overflow: hidden; } .ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li { float: left; height: 4.1875rem; line-height: 4.1875rem; border-right: 1px solid rgba(0, 0, 0, 1); } .ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li:last-child { border: none; } .ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a { display: block; width: 100%; height: 100%; padding: 0rem 0.5rem; color: rgba(0, 0, 0, 1); } .ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a:active { color: rgba(250, 250, 250, 1); background-color: rgba(217, 130, 17, 1); } .ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext { width: 3.6875rem; height: 4.1875rem; text-indent: -1000em; overflow: hidden; position: relative; } .ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext::before { content: ""; position: absolute; top: 50%; left: 50%; width: 2.6875rem; height: 2.6875rem; margin-top: -1.34375rem; margin-left: -1.34375rem; background-color: rgba(0, 0, 0, 1); -webkit-mask-size: 2.6875rem 2.6875rem; -moz-mask-size: 2.6875rem 2.6875rem; -ms-mask-size: 2.6875rem 2.6875rem; -o-mask-size: 2.6875rem 2.6875rem; mask-size: 2.6875rem 2.6875rem; -webkit-mask-repeat: no-repeat; -moz-mask-repeat: no-repeat; -ms-mask-repeat: no-repeat; -o-mask-repeat: no-repeat; mask-repeat: no-repeat; } .ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext:active::before { background-color: rgba(250, 250, 250, 1); } .ui-popup.ui-ctxpopup .ui-arrow { width: 36px; height: 15px; overflow: hidden; position: absolute; display: none; -webkit-animation-duration: 0; animation-duration: 0; } .ui-popup.ui-ctxpopup .ui-arrow span { box-sizing: border-box; width: 20px; height: 20px; background-color: rgba(250, 250, 250, 1); border: 1px solid rgba(122, 122, 122, 0.9); position: absolute; top: 6px; left: 8px; -webkit-transform: rotate(55deg) skew(24deg); -ms-transform: rotate(55deg) skew(24deg); transform: rotate(55deg) skew(24deg); -webkit-animation-duration: 0; animation-duration: 0; } .ui-popup.ui-ctxpopup.ui-popup-arrow-b { padding: 20px 20px 0 20px; } .ui-popup.ui-ctxpopup.ui-popup-arrow-t { padding: 0 20px 20px 20px; } .ui-popup.ui-ctxpopup.ui-popup-arrow-r { padding: 20px 0 20px 20px; } .ui-popup.ui-ctxpopup.ui-popup-arrow-l { padding: 20px 20px 20px 0; } .ui-popup.ui-ctxpopup.ui-popup-arrow-b .ui-arrow { display: block; bottom: -14px; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .ui-popup.ui-ctxpopup.ui-popup-arrow-t .ui-arrow { display: block; top: -14px; } .ui-popup.ui-ctxpopup.ui-popup-arrow-r .ui-arrow { display: block; right: -25px; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .ui-popup.ui-ctxpopup.ui-popup-arrow-l .ui-arrow { display: block; left: -25px; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .ui-popup.ui-popup-toast { margin-left: 0; margin-right: 0; margin-bottom: 0; font-size: 1.5rem; border: 3px solid rgba(255, 145, 0, 1); border-radius: 0; border-left: 0; border-right: 0; position: absolute; bottom: 0; } .ui-popup.ui-popup-toast:not(.ui-popup-toast) { top: auto; height: auto; } .ui-popup.ui-popup-toast .ui-popup-content { min-height: initial; padding: 0.6875rem 2.625rem 0.75rem 2.625rem; background-color: rgba(31, 24, 19, 1); } .ui-popup.ui-popup-toast .ui-popup-toast-icon { width: 3.5rem; height: 3.5rem; position: relative; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); text-indent: -10000px; overflow: hidden; } .ui-popup.ui-popup-toast .ui-popup-toast-icon::after { content: ""; width: 100%; height: 100%; position: absolute; left: 0; -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-repeat: no-repeat; -moz-mask-repeat: no-repeat; -ms-mask-repeat: no-repeat; -o-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; -moz-mask-position: 50% 50%; -ms-mask-position: 50% 50%; -o-mask-position: 50% 50%; mask-position: 50% 50%; } .ui-popup-overlay { position: fixed; display: none; top: 0; width: 100%; height: 100%; z-index: 100; background-color: rgba(0, 0, 0, 0.7); } .ui-popup-overlay.in { display: block; } .ui-popup.slideup.in { -webkit-animation-name: popupslideinfrombottom; animation-name: popupslideinfrombottom; -webkit-animation-duration: 250ms; animation-duration: 250ms; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .ui-popup.slideup.out { -webkit-animation-name: popupslideouttobottom; animation-name: popupslideouttobottom; -webkit-animation-duration: 250ms; animation-duration: 250ms; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } @-webkit-keyframes popupslideinfrombottom { from { -webkit-transform: translateY(100%); transform: translateY(100%); } to { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes popupslideinfrombottom { from { -webkit-transform: translateY(100%); transform: translateY(100%); } to { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes popupslideouttobottom { from { -webkit-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(100%); transform: translateY(100%); } } @keyframes popupslideouttobottom { from { -webkit-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(100%); transform: translateY(100%); } } .ui-popup.pop.in { -webkit-animation-name: popuppopin; animation-name: popuppopin; -webkit-animation-duration: 350ms; animation-duration: 350ms; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .ui-popup.pop.out { -webkit-animation-name: popuppopout; animation-name: popuppopout; -webkit-animation-duration: 350ms; animation-duration: 350ms; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } @-webkit-keyframes popuppopin { from { -webkit-transform: scale3d(1.35, 1.35, 1); transform: scale3d(1.35, 1.35, 1); opacity: 0; } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; } } @keyframes popuppopin { from { -webkit-transform: scale3d(1.35, 1.35, 1); transform: scale3d(1.35, 1.35, 1); opacity: 0; } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; } } @-webkit-keyframes popuppopout { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; } to { -webkit-transform: scale3d(1.35, 1.35, 1); transform: scale3d(1.35, 1.35, 1); opacity: 0; } } @keyframes popuppopout { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; } to { -webkit-transform: scale3d(1.35, 1.35, 1); transform: scale3d(1.35, 1.35, 1); opacity: 0; } } .ui-popup.ui-popup-toast.pop.in { -webkit-animation-name: toastpopuppopin; animation-name: toastpopuppopin; -webkit-animation-duration: 250ms; animation-duration: 250ms; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .ui-popup.ui-popup-toast.pop.out { -webkit-animation-name: toastpopuppopout; animation-name: toastpopuppopout; -webkit-animation-duration: 250ms; animation-duration: 250ms; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } @-webkit-keyframes toastpopuppopin { from { -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; } to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes toastpopuppopin { from { -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; } to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @-webkit-keyframes toastpopuppopout { from { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } to { -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; } } @keyframes toastpopuppopout { from { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } to { -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; } } .ui-popup-overlay.slideup.in, .ui-popup-overlay.pop.in { -webkit-animation: fadein 250ms; animation: fadein 250ms; } .ui-popup-overlay.slideup.out, .ui-popup-overlay.pop.out { -webkit-animation: fadeout 250ms forwards; animation: fadeout 250ms forwards; } .ui-popup.ui-popup-arrow-t.slideup.in, .ui-popup.ui-popup-arrow-l.slideup.in, .ui-popup.ui-popup-arrow-r.slideup.in { -webkit-animation: ctxpopupslideinfrombottom 250ms ease-in-out; animation: ctxpopupslideinfrombottom 250ms ease-in-out; } .ui-popup.ui-popup-arrow-t.slideup.out, .ui-popup.ui-popup-arrow-l.slideup.out, .ui-popup.ui-popup-arrow-r.slideup.out { -webkit-animation: ctxpopupslideouttobottom 250ms ease-in-out; animation: ctxpopupslideouttobottom 250ms ease-in-out; } .ui-popup.ui-popup-arrow-b.slideup.in { -webkit-animation: ctxpopupslideinfromtop 250ms ease-in-out; animation: ctxpopupslideinfromtop 250ms ease-in-out; } .ui-popup.ui-popup-arrow-b.slideup.out { -webkit-animation: ctxpopupslideouttotop 250ms ease-in-out; animation: ctxpopupslideouttotop 250ms ease-in-out; } @-webkit-keyframes ctxpopupslideinfrombottom { from { -webkit-transform: translateY(20%); transform: translateY(20%); opacity: 0; } to { -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } } @keyframes ctxpopupslideinfrombottom { from { -webkit-transform: translateY(20%); transform: translateY(20%); opacity: 0; } to { -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } } @-webkit-keyframes ctxpopupslideouttobottom { from { -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } to { -webkit-transform: translateY(20%); transform: translateY(20%); opacity: 0; } } @keyframes ctxpopupslideouttobottom { from { -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } to { -webkit-transform: translateY(20%); transform: translateY(20%); opacity: 0; } } @-webkit-keyframes ctxpopupslideinfromtop { from { -webkit-transform: translateY(-20%); transform: translateY(-20%); opacity: 0; } to { -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } } @keyframes ctxpopupslideinfromtop { from { -webkit-transform: translateY(-20%); transform: translateY(-20%); opacity: 0; } to { -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } } @-webkit-keyframes ctxpopupslideouttotop { from { -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } to { -webkit-transform: translateY(-20%); transform: translateY(-20%); opacity: 0; } } @keyframes ctxpopupslideouttotop { from { -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } to { -webkit-transform: translateY(-20%); transform: translateY(-20%); opacity: 0; } } /************************ Listview *************************/ tau-virtuallistview, tau-listview { display: block; list-style-type: disc; list-style-type: none; } .ui-listview li { font-size: 2rem; line-height: 3rem; min-height: 6.25rem; padding: 0.9375rem 0.5rem 0.9375rem 1rem; border-bottom: 0.0625rem solid rgba(46, 46, 46, 1); white-space: nowrap; position: relative; color: rgba(250, 250, 250, 1); } .ui-listview li.ui-li-grid { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; padding: 0; min-height: 5.3125rem; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .ui-listview li.ui-li-grid .ui-processing { padding: 0; margin-right: 0.5rem; } .ui-listview li.ui-li-grid div:first-child { width: -webkit-calc(100% - 5.5rem); width: calc(100% - 5.5rem); text-align: left; height: 100%; margin-left: 1rem; } .ui-listview li.ui-li-grid.ui-li-grid-full .ui-btn.ui-btn-no-bg.ui-btn-icon { padding: 0; margin-right: 0.5rem; background-size: contain; background-position: center center; background-repeat: no-repeat; width: 3.5rem; height: 3.5rem; } .ui-listview li.ui-li-grid.ui-li-grid-full .ui-btn.ui-btn-no-bg.ui-btn-icon::after { background-color: transparent; } .ui-listview li.ui-li-grid.ui-li-grid-full div::after { content: ""; position: absolute; height: 3.5rem; width: 0.125rem; background-color: rgba(48, 48, 48, 1); right: 4.5rem; top: 50%; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } .ui-listview 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: 0; -ms-flex-negative: 0; flex-shrink: 0; } .ui-listview 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 li.ui-li-grid .ui-btn-description { width: 100%; margin: 0 -50%; z-index: 2; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); text-align: center; line-height: 5.3125rem; pointer-events: none; } .ui-listview li.ui-li-grid a.ui-btn, .ui-listview li.ui-li-grid tau-button.ui-btn { background-position: center center; height: 5.3125rem; overflow: hidden; background-repeat: no-repeat; background-size: 5.5rem 5.5rem; position: relative; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; border-bottom: 0.0625rem solid rgba(36, 27, 19, 1); border-right: 0.0625rem solid rgba(36, 27, 19, 1); } .ui-listview li input[type=text], .ui-listview li input[type=password] { width: 20.5rem; height: 3.875rem; padding: 0.8125rem 0 0.8125rem 0.5rem; color: rgba(255, 145, 0, 1); font-size: 2rem; background-color: rgba(245, 245, 245, 0.15); border: none; outline: none; } .ui-listview li input[type=text]:focus, .ui-listview li input[type=password]:focus { border: 0.0625rem solid rgba(245, 245, 245, 0.15); } .ui-listview li input[type=text]:focus::-webkit-input-placeholder, .ui-listview li input[type=password]:focus::-webkit-input-placeholder { color: white; } .ui-listview li > * { white-space: nowrap; text-overflow: ellipsis; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; color: rgba(250, 250, 250, 1); } .ui-listview li > a:not(.ui-btn) { display: block; width: 100%; height: auto; margin: -1.625rem -0.5rem -1.625rem -1rem; padding: 1.25rem 0.5rem 1.25rem 1rem; -o-box-sizing: content-box; -ms-box-sizing: content-box; box-sizing: content-box; text-overflow: ellipsis; overflow: hidden; } .ui-listview li.ui-listview-divider { height: 1.875rem; min-height: 1.875rem; line-height: 1.875rem; padding: 0 0.5rem 0 1rem; background-color: rgba(79, 74, 70, 1); color: rgba(245, 245, 245, 1); font-size: 1.5rem; } .ui-listview li .ui-li-sub-text { color: rgba(143, 110, 79, 1); font-size: 1.75rem; } .ui-listview li.ui-li-has-action-icon .ui-action-text { width: -webkit-calc(100% - 4.8125rem); width: calc(100% - 4.8125rem); height: 100%; } .ui-listview li.ui-li-has-action-icon .ui-action-text::after { content: ""; position: absolute; height: 3.5rem; width: 0.125rem; background-color: rgba(250, 250, 250, 1); right: 4.25rem; top: 20%; } .ui-listview li.ui-li-has-action-icon .ui-action-divider { display: none; } .ui-listview li.ui-li-has-action-icon .ui-action-delete, .ui-listview li.ui-li-has-action-icon .ui-action-setting, .ui-listview li.ui-li-has-action-icon .ui-action-add { position: absolute; height: 100%; width: 4.5rem; right: 0; top: 0; -webkit-mask-size: 3.5rem 3.5rem; mask-size: 3.5rem 3.5rem; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; padding: 0; margin: 0; } .ui-listview li.ui-li-has-action-icon .ui-action-delete { -webkit-mask-image: url('images/listview/tw_list_delete_holo_dark.png'); mask-image: url('images/listview/tw_list_delete_holo_dark.png'); background-color: rgba(250, 250, 250, 1); } .ui-listview li.ui-li-has-action-icon .ui-action-setting { -webkit-mask-image: url('images/listview/tw_list_setting_holo_dark.png'); mask-image: url('images/listview/tw_list_setting_holo_dark.png'); background-color: rgba(250, 250, 250, 1); } .ui-listview li.ui-li-has-action-icon .ui-action-add { -webkit-mask-image: url('images/listview/tw_list_add_holo_dark.png'); mask-image: url('images/listview/tw_list_add_holo_dark.png'); 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: rgba(89, 74, 59, 1); color: rgba(250, 250, 250, 1); } .ui-listview li:not(.ui-arc-listview-carousel-item) li.ui-li-active { background-color: rgba(89, 74, 59, 1); color: rgba(250, 250, 250, 1); } .ui-listview li:not(.ui-arc-listview-carousel-item) li.ui-li-active.ui-li-has-action-icon { background-color: transparent; } .ui-listview li:not(.ui-arc-listview-carousel-item) li.ui-li-active.ui-li-has-action-icon .ui-action-text:active { background-color: rgba(89, 74, 59, 1); color: rgba(250, 250, 250, 1); } .ui-datetime-widget { position: relative; height: 100%; } .ui-datetime { text-align: center; padding-top: 56px; } .ui-time-picker .ui-datetime { padding-top: 53px; } .ui-datetime:only-child { padding-top: 92px; } .ui-time-picker .ui-datetime:only-child { padding-top: 89px; } .ui-datetime input[type='date'], .ui-datetime input[type='datetime'], .ui-datetime input[type='time'] { display: none; } .ui-datefield { height: 52px; display: inline-block; vertical-align: top; } .ui-datefield > .ui-btn { float: left; height: 52px; padding: 0; line-height: 52px; font-size: 42px; font-weight: 600; border-radius: 2px; background-color: rgba(255, 255, 255, 0.15); } .ui-datefield .ui-datefield-separator { display: block; height: 100%; float: left; width: 18px; background: transparent url('images/Datetimepicker/tw_timepicker_num_dot.png'); } .ui-datefield > .ui-btn:enabled:focus { background-color: rgba(255, 255, 255, 0.15); } .ui-datefield > .ui-btn:disabled { color: #404040; } .ui-datafield > .ui-btn.ui-selected, .ui-datefield > .ui-btn:enabled:active, .ui-datefield > .ui-btn.ui-state-active:enabled, .ui-datefield > .ui-btn.ui-selected:enabled { background-color: #ff9000; color: #000; } /* -- for datepicker -- */ .ui-date-picker .ui-datefield > .ui-btn:first-child { margin-right: 2px; } .ui-date-picker .ui-datefield > .ui-btn:last-child { margin-left: 2px; } .ui-date-picker .ui-datefield-year { width: 114px; } .ui-date-picker .ui-datefield-month { width: 102px; } .ui-date-picker .ui-datefield-day { width: 68px; } /* -- end (for datepicker) -- */ /* -- for timepicker -- */ .ui-time-picker .ui-datefield-hour { width: 74px; } .ui-time-picker .ui-datefield-min { width: 74px; } .ui-time-picker .ui-datefield-period { width: 84px; margin-left: 10px; } .ui-time-picker .ui-datefield { height: 58px; } .ui-time-picker .ui-datefield > .ui-btn { height: 58px; line-height: 58px; font-size: 50px; } .ui-time-picker .ui-datefield > .ui-btn.ui-datefield-period { font-size: 48px; } /* -- (end) for timepicker -- */ .ui-datetime-wheel { height: 68px; margin: 0 10px; margin-top: 30px; } .ui-time-picker .ui-datetime-wheel { margin-top: 27px; } .ui-datetime-wheel .ui-btn { width: 68px; height: 68px; float: left; } .ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus { float: right; background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_plus_normal.png') center center no-repeat; } .ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:active:hover, .ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:enabled:active, .ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:enabled:active:hover { background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_plus_pressed.png') center center no-repeat; } .ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:disabled, .ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:disabled:active:hover, .ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus.ui-state-disabled, .ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus.ui-state-disabled:active:hover { background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_plus_dim.png') center center no-repeat; } .ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus { background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_minus_normal.png') center center no-repeat; } .ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:active:hover, .ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:enabled:active, .ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:enabled:active:hover { background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_minus_pressed.png') center center no-repeat; } .ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:disabled, .ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:disabled:active:hover, .ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus.ui-state-disabled, .ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus.ui-state-disabled:active:hover { background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_minus_dim.png') center center no-repeat; } .ui-datetime-wheel .ui-wheel { display: block; margin-left: 68px; margin-right: 68px; height: 68px; padding: 10px 0; box-sizing: border-box; background: url('images/Datetimepicker/tw_timepicker_wheel_01.png') center center no-repeat; } .ui-datetime-btns { position: absolute; bottom: 0; width: 100%; height: 76px; box-sizing: border-box; border-top: 2px solid #262626; } /* Button separator */ .ui-datetime-btns::before { content: ""; height: 34px; width: 1px; background-color: #262626; position: absolute; left: 160px; top: 20px; } .ui-datetime-btns .ui-btn { height: 100%; position: relative; background-color: transparent; } .ui-datetime-btns .ui-btn:enabled:active, .ui-datetime-btns .ui-btn:enabled:focus, .ui-datetime-btns .ui-btn:enabled:active:focus { background-color: transparent; } .ui-datetime-btns .ui-btn-left { width: 160px; float: left; background: url('images/Datetimepicker/tw_timepicker_left_softbtn.png') center center no-repeat; } .ui-datetime-btns .ui-btn-right { width: 159px; float: right; background: url('images/Datetimepicker/tw_timepicker_right_softbtn.png') center center no-repeat; } .ui-datetime-btns .ui-btn:disabled, .ui-datetime-btns .ui-btn.ui-state-disabled { opacity: .2; } /* ---------------- */ .ui-datetime-periods { height: 102px; margin-top: 7px; display: inline-block; } .ui-datetime-periods .ui-btn, .ui-datetime-periods .ui-datetime-periods-separator { height: 100%; float: left; padding: 0; background: transparent; } .ui-datetime-periods .ui-btn { width: 102px; font-size: 34px; line-height: 102px; } .ui-datetime-periods .ui-btn:enabled:focus { background: transparent; } .ui-datetime-periods .ui-btn:enabled:active, .ui-datetime-periods .ui-btn:enabled:active:focus, .ui-datetime-periods .ui-btn.ui-selected:enabled:active, .ui-datetime-periods .ui-btn.ui-state-active:enabled:active { color: inherit; text-decoration: none; background: url('images/Datetimepicker/tw_timepicker_time_bg.png') center center no-repeat; } .ui-datetime-periods .ui-btn.ui-selected:enabled, .ui-datetime-periods .ui-btn.ui-state-active:enabled { color: #ff9000; text-decoration: underline; } .ui-datetime-periods .ui-datetime-periods-separator { width: 24px; background: url('images/Datetimepicker/tw_timepicker_num_dot_01.png') center center no-repeat; } .ui-datetime-wheel.ui-hidden, .ui-datetime-periods.ui-hidden { display: none; } /* Transitions originally inspired by those from jQtouch, nice work, folks */ .ui-viewport-transitioning, .ui-viewport-transitioning .ui-page { width: 100%; height: 100%; overflow: hidden; box-sizing: border-box; } .ui-pre-in { z-index: 100; visibility: visible; display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-flex-direction: column; top: 0; left: 0; } .in { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-duration: 350ms; animation-duration: 350ms; } .out { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-animation-duration: 225ms; animation-duration: 225ms; } @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadeout { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } .fade.out { opacity: 0; -webkit-animation: fadeout 125ms; animation: fadeout 125ms; } .fade.in { opacity: 1; -webkit-animation: fadein 225ms; animation: fadein 225ms; } @-webkit-keyframes slideupin { from { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } to { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @keyframes slideupin { from { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } to { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes slideupout { from { -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; } to { -webkit-transform: scale3d(0.6, 0.6, 1); -ms-transform: scale3d(0.6, 0.6, 1); transform: scale3d(0.6, 0.6, 1); opacity: .3; } } @keyframes slideupout { from { -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; } to { -webkit-transform: scale3d(0.6, 0.6, 1); -ms-transform: scale3d(0.6, 0.6, 1); transform: scale3d(0.6, 0.6, 1); opacity: .3; } } @-webkit-keyframes slideupinreverse { from { -webkit-transform: scale3d(0.6, 0.6, 1); -ms-transform: scale3d(0.6, 0.6, 1); transform: scale3d(0.6, 0.6, 1); opacity: .3; } to { -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; } } @keyframes slideupinreverse { from { -webkit-transform: scale3d(0.6, 0.6, 1); -ms-transform: scale3d(0.6, 0.6, 1); transform: scale3d(0.6, 0.6, 1); opacity: .3; } to { -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; } } @-webkit-keyframes slideupoutreverse { from { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } } @keyframes slideupoutreverse { from { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } } .slideup.in:not(.ui-popup):not(.ui-popup-overlay) { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-animation: slideupin 400ms cubic-bezier(0.25, 0.46, 0.45, 1); animation: slideupin 400ms cubic-bezier(0.25, 0.46, 0.45, 1); } .slideup.out:not(.ui-popup):not(.ui-popup-overlay) { -webkit-transform: scale3d(0.6, 0.6, 1); -ms-transform: scale3d(0.6, 0.6, 1); transform: scale3d(0.6, 0.6, 1); -webkit-animation: slideupout 400ms cubic-bezier(0.25, 0.46, 0.45, 1); animation: slideupout 400ms cubic-bezier(0.25, 0.46, 0.45, 1); } .slideup.out.reverse:not(.ui-popup):not(.ui-popup-overlay) { z-index: 101; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-animation: slideupoutreverse 400ms cubic-bezier(0.25, 0.46, 0.45, 1); animation: slideupoutreverse 400ms cubic-bezier(0.25, 0.46, 0.45, 1); } .slideup.in.reverse:not(.ui-popup):not(.ui-popup-overlay) { -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -webkit-animation: slideupinreverse 400ms cubic-bezier(0.25, 0.46, 0.45, 1); animation: slideupinreverse 400ms cubic-bezier(0.25, 0.46, 0.45, 1); } @-webkit-keyframes popin { from { -webkit-transform: scale3d(0.3, 0.3, 1); transform: scale3d(0.3, 0.3, 1); opacity: 0; } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; } } @-webkit-keyframes popout { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; } to { -webkit-transform: scale3d(1.7, 1.7, 1); transform: scale3d(1.7, 1.7, 1); opacity: 0; } } @-webkit-keyframes popoutreverse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; } to { -webkit-transform: scale3d(0.3, 0.3, 1); transform: scale3d(0.3, 0.3, 1); opacity: 0; } } @-webkit-keyframes popinreverse { from { -webkit-transform: scale3d(1.7, 1.7, 1); transform: scale3d(1.7, 1.7, 1); opacity: 0; } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; } } .pop.out.reverse { z-index: 100; -webkit-animation-duration: 225ms; -webkit-animation-name: popoutreverse; -moz-animation-duration: 225ms; -moz-animation-name: popoutreverse; animation-duration: 225ms; animation-name: popoutreverse; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .pop.in.reverse { z-index: 200; -webkit-animation-duration: 225ms; -webkit-animation-name: popinreverse; -moz-animation-duration: 225ms; -moz-animation-name: popinreverse; animation-duration: 225ms; animation-name: popinreverse; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .pop.in { -webkit-animation-duration: 225ms; -webkit-animation-name: popin; -moz-animation-duration: 225ms; -moz-animation-name: popin; animation-duration: 225ms; animation-name: popin; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .pop.out { z-index: 200; -webkit-animation-duration: 225ms; -webkit-animation-name: popout; -moz-animation-duration: 225ms; -moz-animation-name: popout; animation-duration: 225ms; animation-name: popout; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .ui-indexscrollbar { display: block; position: fixed; right: 0; top: 0; width: 2.8125rem; height: 100%; padding-left: 0.125rem; background-color: rgba(33, 33, 33, 1); z-index: 10; overflow: visible; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; cursor: pointer; } .ui-indexscrollbar ul { position: absolute; width: 100%; top: 0; } .ui-indexscrollbar ul li { color: rgba(94, 94, 94, 1); display: block; width: 100%; text-align: center; font-size: 1.5rem; height: 2.25rem; } .ui-indexscrollbar ul li.ui-state-selected { background-color: rgba(43, 43, 43, 1); color: rgba(255, 145, 0, 1); } .ui-indexscrollbar ul.ui-indexscrollbar-supplementary { position: relative; height: auto; top: 0; right: -2.5rem; width: 100%; } .ui-indexscrollbar ul.ui-indexscrollbar-supplementary li { background-color: rgba(43, 43, 43, 1); color: rgba(94, 94, 94, 1); } .ui-indexscrollbar ul.ui-indexscrollbar-supplementary li.ui-state-selected { background-color: rgba(43, 43, 43, 1); color: rgba(255, 145, 0, 1); } .ui-indexscrollbar + .ui-listview li { padding-right: 2.5rem; } .ui-indexscrollbar-indicator { position: fixed; top: 0; left: 0; z-index: 9; display: none; } .ui-indexscrollbar-indicator > span { width: 8.75rem; height: 5.4375rem; position: absolute; display: block; top: 50%; left: 50%; margin-left: -5.625rem; margin-top: -2.6875rem; line-height: 5.4375rem; font-size: 4.375rem; text-align: center; background-color: rgba(89, 74, 59, 0.95); color: rgba(245, 245, 245, 1); } .ui-indexscrollbar-indicator > span > span.ui-selected { color: rgba(255, 145, 0, 1); } .ui-circularindexscrollbar { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .ui-circularindexscrollbar .ui-circularindexscrollbar-indicator { position: absolute; top: 50%; left: 50%; width: 9.875rem; height: 9.875rem; line-height: 9.875rem; border-radius: 50%; background-color: rgba(89, 74, 59, 0.95); -webkit-transition: opacity 250ms ease-out; transition: opacity 250ms ease-out; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; } .ui-circularindexscrollbar.ui-circularindexscrollbar-show { pointer-events: auto; } .ui-circularindexscrollbar.ui-circularindexscrollbar-show .ui-circularindexscrollbar-indicator { opacity: 1; } .ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; font-size: 4.375rem; color: rgba(255, 145, 0, 1); } /*************************************************************************** Scrollbar Style ***************************************************************************/ .ui-scrollbar-bar-type { position: absolute; } .ui-scrollbar-bar-type.ui-scrollbar-horizontal { left: 0; bottom: 0; width: 100%; height: 8px; } .ui-scrollbar-bar-type.ui-scrollbar-vertical { right: 0; top: 0; width: 0.5rem; height: 100%; } .ui-scrollbar-bar-type .ui-scrollbar-indicator { position: absolute; background-color: rgba(102, 102, 102, 1); } .ui-scrollbar-bar-type.ui-scrollbar-horizontal .ui-scrollbar-indicator { height: 0.25rem; } .ui-scrollbar-bar-type.ui-scrollbar-vertical .ui-scrollbar-indicator { width: 0.25rem; } /*************************************************************************** Scrollbar Bouncing Effect ***************************************************************************/ .ui-scrollbar-bouncing-effect { display: none; position: absolute; background-repeat: no-repeat; -webkit-animation-duration: 0.47s; animation-duration: 0.47s; -webkit-animation-timing-function: step-start; animation-timing-function: step-start; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; background-color: rgba(255, 145, 0, 0.4); } .ui-scrollbar-bouncing-effect::before { content: ""; position: absolute; background-color: rgba(255, 145, 0, 1); } .ui-scrollbar-bouncing-effect.ui-top, .ui-scrollbar-bouncing-effect.ui-bottom { width: 100%; height: 3.125rem; left: 0; -webkit-mask-size: 100% 3.125rem; } .ui-scrollbar-bouncing-effect.ui-top::before, .ui-scrollbar-bouncing-effect.ui-bottom::before { width: 100%; height: 0.125rem; -webkit-mask-size: 100% 0.125rem; } .ui-scrollbar-bouncing-effect.ui-left, .ui-scrollbar-bouncing-effect.ui-right { width: 3.125rem; height: 100%; top: 0; -webkit-mask-size: 3.125rem 100%; } .ui-scrollbar-bouncing-effect.ui-left::before, .ui-scrollbar-bouncing-effect.ui-right::before { width: 0.0625rem; height: 100%; -webkit-mask-size: 0.0625rem 100%; } .ui-scrollbar-bouncing-effect.ui-top { top: 0; -webkit-mask-image: url("images/Scroller/bouncing_top_glow.png"); mask-image: url("images/Scroller/bouncing_top_glow.png"); } .ui-scrollbar-bouncing-effect.ui-top::before { -webkit-mask-image: url("images/Scroller/bouncing_top_edge.png"); mask-image: url("images/Scroller/bouncing_top_edge.png"); } .ui-scrollbar-bouncing-effect.ui-bottom { bottom: 0; -webkit-mask-image: url("images/Scroller/bouncing_bottom_glow.png"); mask-image: url("images/Scroller/bouncing_bottom_glow.png"); } .ui-scrollbar-bouncing-effect.ui-bottom::before { -webkit-mask-image: url("images/Scroller/bouncing_bottom_edge.png"); mask-image: url("images/Scroller/bouncing_bottom_edge.png"); } .ui-scrollbar-bouncing-effect.ui-left { left: 0; -webkit-mask-image: url("images/Scroller/bouncing_left_glow.png"); mask-image: url("images/Scroller/bouncing_left_glow.png"); } .ui-scrollbar-bouncing-effect.ui-left::before { -webkit-mask-image: url("images/Scroller/bouncing_left_edge.png"); mask-image: url("images/Scroller/bouncing_left_edge.png"); } .ui-scrollbar-bouncing-effect.ui-right { right: 0; -webkit-mask-image: url("images/Scroller/bouncing_right_glow.png"); mask-image: url("images/Scroller/bouncing_right_glow.png"); } .ui-scrollbar-bouncing-effect.ui-right::before { -webkit-mask-image: url("images/Scroller/bouncing_right_edge.png"); mask-image: url("images/Scroller/bouncing_right_edge.png"); } @-webkit-keyframes ui-bouncing-show { 0% { opacity: 0; } 10% { opacity: .1; } 20% { opacity: .2; } 30% { opacity: .3; } 40% { opacity: .4; } 50% { opacity: .5; } 60% { opacity: .6; } 70% { opacity: .7; } 80% { opacity: .8; } 90% { opacity: .9; } 100% { opacity: 1; } } @-webkit-keyframes ui-bouncing-hide { 0% { opacity: 1; } 10% { opacity: .9; } 20% { opacity: .8; } 30% { opacity: .7; } 40% { opacity: .6; } 50% { opacity: .5; } 60% { opacity: .4; } 70% { opacity: .3; } 80% { opacity: .2; } 90% { opacity: .1; } 100% { opacity: 0; } } .ui-scrollbar-bouncing-effect.ui-show { display: block; -webkit-animation-name: ui-bouncing-show; animation-name: ui-bouncing-show; } .ui-scrollbar-bouncing-effect.ui-hide { display: block; -webkit-animation-name: ui-bouncing-hide; animation-name: ui-bouncing-hide; } .ui-swipelist { position: absolute; top: 0; } .ui-swipelist .ui-swipelist-icon { width: 20%; height: 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; } .ui-swipelist .ui-swipelist-text { top: 50%; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } .ui-swipelist-left, .ui-swipelist-right { position: absolute; display: none; } .ui-swipelist-left { background-color: rgba(98, 168, 24, 1); background-image: -webkit-linear-gradient(left, rgba(98, 168, 24, 1) 0%, rgba(36, 27, 19, 1) 0%); background-image: linear-gradient(left, rgba(98, 168, 24, 1) 0%, rgba(36, 27, 19, 1) 0%); } .ui-swipelist-right { background-color: rgba(235, 164, 23, 1); background-image: -webkit-linear-gradient(right, rgba(235, 164, 23, 1) 0%, rgba(36, 27, 19, 1) 0%); background-image: linear-gradient(right, rgba(235, 164, 23, 1) 0%, rgba(36, 27, 19, 1) 0%); } .ui-swipelist-icon, .ui-swipelist-text { position: absolute; } .ui-swipelist-left .ui-swipelist-icon { margin-left: 2%; background-color: rgba(250, 250, 250, 1); -webkit-mask-image: url('images/Swipelist/b_logs_icon_body_btn_call_nor.png'); mask-image: url('images/Swipelist/b_logs_icon_body_btn_call_nor.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; } .ui-swipelist-left .ui-swipelist-text { margin-left: 40%; } .ui-swipelist-right .ui-swipelist-icon { margin-left: 80%; background-color: rgba(250, 250, 250, 1); -webkit-mask-image: url('images/Swipelist/b_logs_icon_actionbar_btn_msg_nor.png'); mask-image: url('images/Swipelist/b_logs_icon_actionbar_btn_msg_nor.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; } .ui-swipelist-right .ui-swipelist-text { margin-left: 20%; } .ui-tab-indicator { position: relative; height: 6px; } .ui-tab-indicator .ui-tab-item { position: absolute; top: 0; left: 0; display: block; height: 6px; background-color: rgba(64, 58, 53, 1); } .ui-tab-indicator .ui-tab-item.ui-tab-active { background-color: rgba(250, 145, 7, 1); } input[type="checkbox"]:not(.ui-switch-input), input[type="radio"] { box-sizing: border-box; padding: 0; height: 56px; width: 56px; font-size: 32px; -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; } input[type="radio"] { background-color: rgba(18, 9, 0, 1); -webkit-mask-image: url('images/Controller_icon/tw_btn_radiobox_holo_dark.png'); mask-image: url('images/Controller_icon/tw_btn_radiobox_holo_dark.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% 100%; -moz-mask-size: 100% 100%; -ms-mask-size: 100% 100%; -o-mask-size: 100% 100%; mask-size: 100% 100%; } input[type="radio"]::after { content: ""; background-color: rgba(250, 250, 250, 0.3); -webkit-mask-image: url('images/Controller_icon/tw_btn_radiobox_line.png'); mask-image: url('images/Controller_icon/tw_btn_radiobox_line.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% 100%; -moz-mask-size: 100% 100%; -ms-mask-size: 100% 100%; -o-mask-size: 100% 100%; mask-size: 100% 100%; width: 100%; height: 100%; position: absolute; } input[type="radio"]:checked::before { content: ""; background-color: rgba(118, 196, 16, 1); -webkit-mask-image: url('images/Controller_icon/tw_btn_radio_holo_dark.png'); mask-image: url('images/Controller_icon/tw_btn_radio_holo_dark.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% 100%; -moz-mask-size: 100% 100%; -ms-mask-size: 100% 100%; -o-mask-size: 100% 100%; mask-size: 100% 100%; width: 100%; height: 100%; position: absolute; } input[type="radio"]:active { background-color: rgba(79, 36, 0, 0.4); -webkit-mask-image: url('images/Controller_icon/tw_btn_radiobox_holo_dark.png'); mask-image: url('images/Controller_icon/tw_btn_radiobox_holo_dark.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; } input[type="radio"]:active::after { content: ""; background-color: rgba(250, 250, 250, 0.3); -webkit-mask-image: url('images/Controller_icon/tw_btn_radiobox_line.png'); mask-image: url('images/Controller_icon/tw_btn_radiobox_line.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; width: 100%; height: 100%; position: absolute; } input[type="radio"]:active:checked::before { content: ""; background-color: rgba(250, 250, 250, 1); -webkit-mask-image: url('images/Controller_icon/tw_btn_radio_holo_dark.png'); mask-image: url('images/Controller_icon/tw_btn_radio_holo_dark.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; width: 100%; height: 100%; position: absolute; } input[type="checkbox"]:not(.ui-switch-input) { -webkit-mask-image: url('images/Controller_icon/tw_btn_checkbox_holo_dark.png'); mask-image: url('images/Controller_icon/tw_btn_checkbox_holo_dark.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% 100%; -moz-mask-size: 100% 100%; -ms-mask-size: 100% 100%; -o-mask-size: 100% 100%; mask-size: 100% 100%; background-color: rgba(18, 9, 0, 1); } input[type="checkbox"]:not(.ui-switch-input)::after { content: ""; background-color: rgba(250, 250, 250, 0.3); -webkit-mask-image: url('images/Controller_icon/tw_btn_checkbox_line_holo_dark.png'); mask-image: url('images/Controller_icon/tw_btn_checkbox_line_holo_dark.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% 100%; -moz-mask-size: 100% 100%; -ms-mask-size: 100% 100%; -o-mask-size: 100% 100%; mask-size: 100% 100%; width: 100%; height: 100%; position: absolute; } input[type="checkbox"]:not(.ui-switch-input):checked::before { content: ""; -webkit-mask-image: url('images/Controller_icon/tw_btn_check_holo_dark.png'); mask-image: url('images/Controller_icon/tw_btn_check_holo_dark.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% 100%; -moz-mask-size: 100% 100%; -ms-mask-size: 100% 100%; -o-mask-size: 100% 100%; mask-size: 100% 100%; background-color: rgba(118, 196, 16, 1); width: 100%; height: 100%; position: absolute; } input[type="checkbox"]:not(.ui-switch-input):active { background-color: rgba(79, 36, 0, 0.4); } input[type="checkbox"]:not(.ui-switch-input):active::after { content: ""; background-color: rgba(250, 250, 250, 0.3); width: 100%; height: 100%; position: absolute; } input[type="checkbox"]:not(.ui-switch-input):active:checked::before { content: ""; background-color: rgba(250, 250, 250, 1); width: 100%; height: 100%; position: absolute; } .ui-checkbox-small input[type=checkbox]:not(.ui-switch-input), .ui-checkbox-small input[type=radio] { top: 0.4375rem; margin-right: 0.4375rem; width: 2.125rem; height: 2.125rem; } .ui-marquee { position: relative; white-space: nowrap; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; height: 2.4375rem; line-height: 2.4375rem; } .ui-marquee.ui-marquee-gradient { text-overflow: clip; -webkit-mask-image: -webkit-linear-gradient(left, #ffffff 0, #ffffff 85%, transparent 100%); } .ui-marquee.ui-marquee-ellipsis .ui-marquee-content { display: block; overflow: hidden; text-overflow: ellipsis; } .ui-marquee .ui-marquee-content { left: 0; position: relative; overflow: visible; display: inline-block; } .ui-marquee-anim-running { -webkit-animation-play-state: running; } .ui-marquee-anim-stopped { -webkit-animation-play-state: paused; } .ui-marquee.ui-marquee-gradient::after { background: -webkit-linear-gradient(left, transparent 0%, rgba(36, 27, 19, 1) 100%); background: linear-gradient(left, transparent 0%, rgba(36, 27, 19, 1) 100%); } /**************************************************** Page Indicator *****************************************************/ tau-pageindicator { display: block; } .ui-page-indicator { display: block; position: absolute; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); white-space: nowrap; max-width: 100%; overflow: hidden; } .ui-page-indicator .ui-page-indicator-item { position: relative; display: inline-block; width: 0.625rem; height: 0.625rem; -webkit-mask-image: url(images/Indicator/indicator_horizontal_dot.png); mask-image: url(images/Indicator/indicator_horizontal_dot.png); background-color: rgba(250, 250, 250, 0.4); margin-right: 0.5rem; margin-top: 1.5rem; transition-property: -webkit-mask-image, mask-image; -webkit-transition-duration: 250ms; transition-duration: 250ms; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .ui-page-indicator .ui-page-indicator-item:last-child { margin-right: 0; } .ui-page-indicator .ui-page-indicator-item.ui-page-indicator-active { -webkit-mask-image: url(images/Indicator/indicator_horizontal_focus_dot.png); mask-image: url(images/Indicator/indicator_horizontal_focus_dot.png); background-color: rgba(250, 250, 250, 1); } .ui-page-indicator.ui-page-indicator-circular { top: 0; left: 0; width: 100vw; height: 100vw; -webkit-transform: none; -ms-transform: none; transform: none; pointer-events: none; } .ui-page-indicator.ui-page-indicator-circular .ui-page-indicator-item { position: absolute; top: 50%; left: 50%; margin-top: -0.3125rem; margin-left: -0.3125rem; margin-right: 0; } .ui-snap-container { -webkit-scroll-snap-type: mandatory; -webkit-scroll-snap-destination: 50% 50%; } .ui-snap-container.ui-snap-disabled { -webkit-scroll-snap-type: none; } .ui-snap-listview-item { -webkit-scroll-snap-coordinate: 50% 50%; } tau-drawer { display: block; } .ui-drawer { width: 100%; height: 100%; position: fixed; top: 0; background-color: rgba(36, 27, 19, 1); z-index: 1201; box-sizing: border-box; } .ui-drawer.ui-drawer-close { overflow: hidden; } .ui-drawer.ui-drawer-open { overflow: auto; } .ui-drawer-overlay { top: 0; position: fixed; background-color: rgba(0, 0, 0, 0.8); z-index: 1200; } tau-drawermorestyle { display: block; } tau-sectionchanger { display: block; } .ui-section-changer { height: 100%; } .ui-view-switcher { height: 100%; overflow: hidden; } .ui-view-switcher.ui-view-carousel .ui-view { display: none; position: absolute; z-index: -1000; top: 50%; background-color: #fafafa; } .ui-view-switcher.ui-view-carousel .ui-view.ui-view-carousel-active { display: inline; z-index: 100; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } .ui-view-switcher.ui-view-carousel .ui-view.ui-view-carousel-active .ui-view-carousel-dim { opacity: 0; } .ui-view-switcher.ui-view-carousel .ui-view.ui-view-carousel-left { display: inline; left: 0; } .ui-view-switcher.ui-view-carousel .ui-view.ui-view-carousel-right { display: inline; right: 0; } .ui-view-switcher.ui-view-carousel .ui-view .ui-view-carousel-dim { position: absolute; top: 0; width: 100%; height: 100%; opacity: .6; background-color: #000000; } .ui-slider { position: relative; box-sizing: border-box; background-color: rgba(71, 71, 71, 1); } .ui-slider .ui-slider-value { background-color: rgba(255, 145, 0, 1); } .ui-slider .ui-slider-handler { width: 2.25rem; height: 2.25rem; background-color: #fafafa; border-radius: 50%; position: absolute; text-indent: 9999px; -webkit-transition: -webkit-transform 300ms ease-out; transition: -webkit-transform 300ms ease-out; transition: transform 300ms ease-out; transition: transform 300ms ease-out, -webkit-transform 300ms ease-out; } .ui-slider.ui-slider-horizontal { height: 6px; margin: 20px 22px; } .ui-slider.ui-slider-horizontal .ui-slider-value { height: 6px; } .ui-slider.ui-slider-horizontal .ui-slider-handler { top: 50%; margin-left: -20px; border: 3px solid rgba(255, 145, 0, 1); -webkit-transform: translate(0, -50%) scale(0.6); -ms-transform: translate(0, -50%) scale(0.6); transform: translate(0, -50%) scale(0.6); } .ui-slider.ui-slider-horizontal .ui-slider-handler.ui-slider-handler-active { -webkit-transform: translate(0, -50%) scale(1); -ms-transform: translate(0, -50%) scale(1); transform: translate(0, -50%) scale(1); } .ui-slider-title { text-align: center; color: rgba(255, 145, 0, 1); font-size: 28px; } .ui-slider-subtitle { text-align: center; color: rgba(255, 145, 0, 1); font-size: 28px; } .ui-selector { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: B0511D; } .ui-selector .ui-layer { position: absolute; display: none; width: 4.25rem; height: 4.25rem; border-radius: 50%; } .ui-selector .ui-layer.ui-layer-active { display: block; width: 100%; height: 100%; z-index: 3; } .ui-selector .ui-layer.ui-layer-active .ui-item { visibility: visible; -webkit-transition: transform 300ms ease-out; -webkit-transition: -webkit-transform 300ms ease-out; transition: -webkit-transform 300ms ease-out; transition: transform 300ms ease-out; transition: transform 300ms ease-out, -webkit-transform 300ms ease-out; } .ui-selector .ui-layer.ui-layer-hide .ui-item { visibility: visible; -webkit-transition: transform 100ms ease-out; -webkit-transition: -webkit-transform 100ms ease-out; transition: -webkit-transform 100ms ease-out; transition: transform 100ms ease-out; transition: transform 100ms ease-out, -webkit-transform 100ms ease-out; } .ui-selector .ui-layer.ui-layer-prev { display: block; width: 3rem; height: 3rem; left: 50%; margin-left: 0.375rem; margin-top: 0.75rem; z-index: 5; -webkit-mask-image: url("images/Common/b_more_option_btn_previous_page.png"); mask-image: url("images/Common/b_more_option_btn_previous_page.png"); } .ui-selector .ui-layer.ui-layer-next { display: block; width: 3rem; height: 3rem; right: 50%; margin-right: 0.375rem; margin-top: 0.75rem; z-index: 5; -webkit-mask-image: url("images/Common/b_more_option_btn_next_page.png"); mask-image: url("images/Common/b_more_option_btn_next_page.png"); } .ui-selector .ui-item { background-color: B0554; position: absolute; visibility: hidden; width: 4.25rem; height: 4.25rem; top: 50%; left: 50%; border-radius: 50%; margin: -2.125rem; z-index: 100; } .ui-selector .ui-item:active { background-color: B0554P; } .ui-selector .ui-item::before { -webkit-transition: background-color 200ms ease-out; transition: background-color 200ms ease-out; } .ui-selector .ui-selector-indicator { 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; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: absolute; z-index: 4; width: 10.25rem; height: 10.25rem; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .ui-selector .ui-selector-indicator::before { content: ""; position: absolute; width: 90%; height: 90%; left: 50%; top: 50%; border-radius: 50%; background-color: transparent; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; } .ui-selector .ui-selector-indicator.ui-selector-indicator-active::before { z-index: -1; background-color: white; -webkit-transform: translate(-50%, -50%) scale(1.1); -ms-transform: translate(-50%, -50%) scale(1.1); transform: translate(-50%, -50%) scale(1.1); -webkit-animation-duration: 300ms, 733ms; animation-duration: 300ms, 733ms; -webkit-animation-name: touch-text-btn-scale, touch-text-btn-opacity; animation-name: touch-text-btn-scale, touch-text-btn-opacity; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 1), linear; animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 1), linear; } .ui-selector .ui-selector-indicator .ui-selector-indicator-text { font-size: 1.875rem; pointer-events: none; width: 10.25rem; line-height: 2.5rem; max-height: 5rem; text-align: center; overflow: hidden; } .ui-selector .ui-selector-indicator .ui-selector-indicator-icon-active { background-repeat: no-repeat; background-position: 50% 50%; width: 8.75rem; height: 8.75rem; overflow: hidden; } .ui-selector .ui-selector-indicator .ui-selector-indicator-icon-active-with-text { margin-top: -0.25rem; width: 5.875rem; height: 5.875rem; } .ui-selector .ui-selector-indicator .ui-selector-indicator-icon-active + .ui-selector-indicator-text:not(:empty) { margin-top: 0.3125rem; width: 8.625rem; } .ui-selector .ui-selector-indicator .ui-selector-indicator-subtext { font-size: 1.8125rem; pointer-events: none; width: 8.625rem; line-height: 2.4375rem; max-height: 2.4375rem; text-align: center; overflow: hidden; } .ui-selector .ui-selector-indicator.ui-selector-indicator-with-subtext .ui-selector-indicator-text { width: 9.375rem; } .ui-selector .ui-selector-indicator.ui-selector-indicator-with-subtext .ui-selector-indicator-subtext { color: T117; width: 9.375rem; } .ui-selector .ui-selector-indicator-arrow { position: absolute; width: 13.125rem; height: 13.125rem; top: 50%; left: 50%; margin: -6.5625rem; text-align: center; line-height: 13.125rem; font-size: 1.75rem; z-index: 0; } .ui-selector .ui-selector-indicator-arrow::before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; -webkit-mask-image: url('images/Common/b_rotary_selector_center_pointer.png'); mask-image: url('images/Common/b_rotary_selector_center_pointer.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-mask-repeat: no-repeat; -moz-mask-repeat: no-repeat; -ms-mask-repeat: no-repeat; -o-mask-repeat: no-repeat; mask-repeat: no-repeat; background-color: B0116; } .ui-selector.ui-selector-edit-mode .ui-layer .ui-item-removable:active { background-color: B0554; } .scrolling-scrollbar { position: absolute; pointer-events: none; -webkit-transition: opacity 2.5s; transition: opacity 2.5s; opacity: 0; } .scrolling-scrollbar .scrolling-scrollthumb { stroke: #009de4; background-color: #009de4; position: absolute; } .scrolling-scrollbar.scrolling-direction-y { right: 0; width: 10px; } .scrolling-scrollbar.scrolling-direction-y .scrolling-scrollthumb { width: 10px; min-height: 20px; top: 0; left: 50%; margin-left: -5px; } .scrolling-scrollbar.scrolling-direction-x { bottom: 0; height: 10px; } .scrolling-scrollbar.scrolling-direction-x .scrolling-scrollthumb { height: 10px; min-width: 20px; left: 0; top: 50%; margin-top: -5px; } .scrolling-scrollbar:not(.scrolling-circular) { background-color: rgba(255, 255, 255, 0.2); } .scrolling-scrollbar.scrolling-circular { width: 100%; height: 100%; top: 0; left: 0; } .scrolling-scrollbar.scrolling-circular .ui-polar { position: absolute; top: 0; left: 0; height: 100%; width: 100%; pointer-events: none; } .scrolling-scrollbar.scrolling-circular .ui-polar .scrolling-path { stroke: rgba(255, 255, 255, 0.2); } .scrolling-scrollbar.scrolling-circular .ui-polar .ui-animated { -webkit-transition: all .5s; transition: all .5s; } .scrolling-scrollbar.fade-in { opacity: 1; -webkit-transition: opacity .5s; transition: opacity .5s; } .ui-page.ui-empty-state { background-color: B0911; color: rgba(250, 250, 250, 1); } .ui-page.ui-empty-state header.ui-header { height: 6.75rem; } .ui-page.ui-empty-state:after { content: ""; position: absolute; width: 100%; height: 100%; -webkit-mask-image: url("images/Common/tw_no_item_bg.png"); mask-image: url("images/Common/tw_no_item_bg.png"); background-color: rgba(255, 255, 255, 0.1); } .ui-page.ui-empty-state .ui-title { color: rgba(255, 145, 0, 1); font-size: 1.875rem; line-height: 2.4375rem; } .ui-page.ui-empty-state .ui-content { overflow: hidden; color: rgba(250, 250, 250, 1); font-size: 1.75rem; line-height: 2.3125rem; padding-left: 3.75rem; padding-right: 3.75rem; margin: 0 auto; } .ui-page.ui-empty-state .ui-content .ui-icon { width: 6.125rem; height: 6.125rem; } .ui-page.ui-empty-state .ui-content .ui-empty-state-label { 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; height: 4.625rem; margin-top: 0.5rem; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; overflow: hidden; } .ui-page.ui-empty-state.ui-empty-state-add-item header.ui-header { height: 7.8125rem; margin-top: 0; } .ui-page.ui-empty-state.ui-empty-state-add-item header.ui-header .ui-title { padding-top: 3.1875rem; } .ui-page.ui-empty-state.ui-empty-state-add-item .ui-content .ui-icon { width: 8.125rem; height: 6.875rem; } .ui-page.ui-empty-state.ui-empty-state-add-item .ui-content .ui-empty-state-label { height: 2.3125rem; margin-top: 1.75rem; } .ui-page.ui-empty-state.ui-empty-state-add-item .ui-content .ui-empty-state-label.ui-label-2-lines { margin-top: 0.125rem; height: 4.625rem; } .ui-grid { padding: 0; position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; overflow: hidden; background-color: rgba(36, 27, 19, 1); } .ui-grid.ui-hidden { display: none; } .ui-grid li { transition-property: border-radius, -webkit-mask-size, mask-size; -webkit-transition-duration: 450ms; transition-duration: 450ms; -webkit-transition-timing-function: linear; transition-timing-function: linear; position: absolute; overflow: hidden; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .ui-grid li a { position: relative; } .ui-grid li a:active:hover:before { content: ""; width: 100%; height: 100%; position: absolute; background-color: rgba(38, 38, 38, 0.4); } .ui-grid.ui-grid-horizontal { height: 22.5rem; } .ui-grid.ui-grid-horizontal li { -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; } .ui-grid.ui-grid-horizontal.ui-grid-rectangle li { -webkit-mask-size: 22.5rem auto; mask-size: 22.5rem auto; -webkit-mask-image: url('images/Grid/tw_basic_grid_horizontal.png'); mask-image: url('images/Grid/tw_basic_grid_horizontal.png'); } .ui-grid.ui-grid-vertical { width: 22.5rem; } .ui-grid.ui-grid-vertical li { -webkit-transform-origin: center top; -ms-transform-origin: center top; transform-origin: center top; } .ui-grid.ui-grid-vertical.ui-grid-rectangle li { -webkit-mask-size: auto 22.5rem; mask-size: auto 22.5rem; -webkit-mask-image: url('images/Grid/tw_basic_grid_vertical.png'); mask-image: url('images/Grid/tw_basic_grid_vertical.png'); } .ui-grid.ui-grid-circle li { border-radius: 100%; } .ui-grid.ui-grid-rectangle li { border-radius: 1.125rem; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .ui-grid.ui-grid-3x3 { height: 22.5rem; } .ui-grid.ui-grid-3x3.ui-children-positioned li.ui-positioned { position: absolute; left: 0; top: 0; margin: 0 !important; } .ui-grid.ui-grid-3x3 li { width: 22.5rem; height: 22.5rem; position: absolute; display: inline-block; } .ui-grid.ui-grid-3x3 li.ui-selected { -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; } .ui-grid.ui-grid-3x3 li a { display: inline-block; } .ui-grid.ui-grid-3x3 .thumb { width: 100%; height: 100%; position: relative; } .ui-grid.ui-grid-image { padding: 0; } .ui-grid.ui-grid-image li { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; width: 22.5rem; height: 22.5rem; overflow: hidden; } .ui-grid.ui-grid-image li a { display: inline-block; } .ui-grid.ui-grid-image .thumb { width: 22.5rem; height: 22.5rem; position: relative; } .ui-grid.ui-grid-thumbnail { background-color: W143; } .ui-grid.ui-grid-thumbnail.ui-grid-rectangle.ui-grid-horizontal li { -webkit-mask-size: 14rem auto; mask-size: 14rem auto; } .ui-grid.ui-grid-thumbnail.ui-grid-rectangle.ui-grid-vertical li { -webkit-mask-size: auto 14rem; mask-size: auto 14rem; } .ui-grid-container { position: relative; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-scroll-snap-type: mandatory; -ms-scroll-snap-type: mandatory; scroll-snap-type: mandatory; -webkit-scroll-snap-destination: 50% 50%; -ms-scroll-snap-destination: 50% 50%; scroll-snap-destination: 50% 50%; } .ui-grid-container .ui-image-section { width: 22.5rem; height: 22.5rem; } .ui-grid-container .snap-point { width: 0.0625rem; height: 0.0625rem; position: absolute; -webkit-scroll-snap-coordinate: 50% 50%; -ms-scroll-snap-coordinate: 50% 50%; scroll-snap-coordinate: 50% 50%; visibility: hidden; } .ui-grid-container.ui-grid-horizontal { overflow-x: scroll; overflow-y: hidden; width: 100%; height: 22.5rem; } .ui-grid-container.ui-grid-horizontal .snap-point { top: 50%; } .ui-grid-container.ui-grid-vertical { overflow-x: hidden; overflow-y: scroll; width: 22.5rem; height: 100%; } .ui-grid-container.ui-grid-vertical .snap-point { left: 50%; } .ui-circleindicator { position: fixed; z-index: 0; } .ui-circleindicator svg { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; } .ui-circleindicator svg:nth-child(2) circle { -webkit-transition: stroke-dashoffset 0.5s linear; transition: stroke-dashoffset 0.5s linear; } .ui-circleindicator svg .ui-big { z-index: 4; } .ui-circleindicator svg .ui-pointer { z-index: 5; } /*implementation of animation added by polar*/ .ui-animated { -webkit-transition: 1s linear; transition: 1s linear; } .ui-hyperlink { text-decoration: underline; } .ui-spin { position: relative; display: inline-block; height: 3.75rem; background-color: transparent; overflow: hidden; font-size: 1.375rem; padding: 0; box-sizing: content-box; width: 5rem; } .ui-spin-item { background-color: transparent; position: absolute; left: 0; top: 0; width: 100%; height: 1.875rem; 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; color: #4dcfff; } .ui-spin-item-selected { font-size: 1.875rem; height: 1.875rem; color: #ffffff; } .ui-spin-enabling { height: 100%; } .ui-spin-enabling .ui-spin-item { -webkit-transition: 300ms opacity linear; transition: 300ms opacity linear; } .tau-info-theme:after { content: "default"; }