body, html { background: var(--bg_bottom_standard); color: var(--text_primary); font-family: "Color Emoji", system-ui, "PingFang SC", PingFangSC-Regular, "Microsoft YaHei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", Arial, Helvetica, sans-serif, "Apple Braille", "Color Emoji Fix"; min-height: 100vh; scroll-behavior: smooth; width: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; --z_index_popover: 999; --nt_mix_tokens: nt_brand_standard_2_overlay_hover_brand_2_mix,nt_brand_standard_2_overlay_pressed_brand_2_mix,nt_feedback_error_2_overlay_hover_brand_2_mix,nt_feedback_error_2_overlay_pressed_brand_2_mix,nt_icon_white_2_overlay_hover_2_mix,nt_icon_white_2_overlay_pressed_2_mix,nt_bubble_host_2_overlay_pressed_brand_2_mix,nt_bg_white_2_overlay_pressed_brand_2_mix,nt_bg_white_2_overlay_hover_2_mix,nt_bg_white_2_overlay_pressed_2_mix,nt_fg_white_2_overlay_hover_2_mix,nt_fg_white_2_overlay_pressed_2_mix,nt_icon_red_2_overlay_hover_2_mix,nt_icon_red_2_overlay_pressed_2_mix,nt_fg_grey_standard_2_overlay_hover_2_mix,nt_fg_grey_standard_2_overlay_pressed_2_mix,nt_bubble_guest_2_overlay_pressed_2_mix,nt_icon_primary_2_20_2_alpha,nt_bg_grey_standard_2_95_2_alpha,nt_tag_red_2_20_2_alpha,nt_tag_red_2_25_2_alpha,nt_tag_blue_2_20_2_alpha,nt_tag_blue_2_25_2_alpha,nt_tag_blue_2_10_2_alpha,nt_tag_purple_2_20_2_alpha,nt_brand_standard_2_20_2_alpha,nt_tag_sage_green_2_20_2_alpha,nt_feedback_error_2_20_2_alpha,nt_text_white_2_60_2_alpha,nt_bg_white_2_70_2_alpha,nt_bg_white_2_90_2_alpha,nt_bg_white_2_97_2_alpha,nt_bg_white_2_40_2_alpha,nt_bg_white_2_30_2_alpha,nt_text_white_2_80_2_alpha,nt_brand_standard_2_50_2_alpha,nt_bg_nav_secondary_2_60_2_alpha,nt_bg_nav_2_60_2_alpha,nt_feedback_error_2_10_2_alpha,nt_brand_standard_2_10_2_alpha,nt_on_brand_primary_2_40_2_alpha,nt_text_primary_2_72_2_alpha,nt_text_white_2_72_2_alpha; } a, address, article, aside, b, blockquote, body, div, em, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, html, i, iframe, img, label, legend, li, main, nav, ol, p, s, section, span, table, tbody, td, tfoot, th, thead, tr, ul { box-sizing: border-box; font-size: 100%; font-style: inherit; font-weight: inherit; border: 0px; margin: 0px; padding: 0px; } #app { position: relative; display: block; padding: 20px; min-height: 100vh; background: transparent; } .fake-bar { position: fixed; display: none; top: 0; left: 0; } /* ======== Input ======== */ .q-input { align-items: center; border-radius: 4px; box-sizing: border-box; color: var(--text_secondary); display: inline-flex; position: relative; width: 100%; border: 1px solid transparent; } .q-input input, .q-input textarea { appearance: none; background-color: transparent; box-sizing: border-box; color: var(--text_primary); flex-grow: 1; flex-shrink: 1; flex-basis: 0%; font-size: 14px; height: fit-content; outline-color: initial; outline-style: none; outline-width: initial; resize: none; width: 100%; border: none; } /* ======== Switch ======== */ .q-switch { background-color: var(--fill_standard_primary); border-radius: 14px; box-sizing: border-box; display: inline-flex; position: relative; transition-behavior: normal; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.38, 0, 0.24, 1); transition-delay: 0s; transition-property: all; width: 28px; padding: 3px; } .q-switch__handle { border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 4px; box-sizing: border-box; display: inline-block; height: 10px; position: relative; transition-behavior: normal; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.38, 0, 0.24, 1); transition-delay: 0s; transition-property: all; width: 10px; z-index: 2; background: var(--icon_white); } .q-switch:not(.is-disabled):hover { background: var(--fill_standard_secondary); } .q-switch:not(.is-disabled):active { background: var(--nt_bg_white_2_overlay_pressed_brand_2_mix); } .q-switch:not(.is-disabled):active .q-switch__handle { width: 12px; } .q-switch.is-active { background-color: var(--brand_standard); } .q-switch.is-active .q-switch__handle { transform: translateX(12px); } .q-switch.is-active:not(.is-disabled):hover { background: var(--nt_brand_standard_2_overlay_hover_brand_2_mix); } .q-switch.is-active:not(.is-disabled):active { background: var(--nt_brand_standard_2_overlay_pressed_brand_2_mix); } .q-switch.is-active:not(.is-disabled):active .q-switch__handle { transform: translateX(10px); } /* ======== Button ======== */ .q-button { align-items: center; background-color: var(--brand_standard); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; display: inline-flex; font-size: 14px; justify-content: center; line-height: 18px; outline-color: initial; outline-style: none; outline-width: initial; position: relative; vertical-align: text-bottom; border: 1px solid var(--fg_grey_standard); padding: 5px 11px; } .q-button--small { font-size: 12px; line-height: 14px; min-width: 62px; padding: 4px 7px; } .q-button--primary { background-color: var(--brand_standard); border-color: var(--brand_standard); color: var(--on_brand_primary); } .q-button--secondary { background-color: transparent; border-color: var(--fg_grey_standard); color: var(--text_primary); } .q-button:not([disabled]):hover { background-color: var(--overlay_hover); } .q-button:not([disabled]):active { background-color: var(--overlay_pressed); } .q-button--primary:hover { background-color: var(--nt_brand_standard_2_overlay_hover_brand_2_mix); border-color: var(--nt_brand_standard_2_overlay_hover_brand_2_mix); } .q-button--primary:active { background-color: var(--nt_brand_standard_2_overlay_pressed_brand_2_mix); border-color: var(--nt_brand_standard_2_overlay_pressed_brand_2_mix); } .q-button[disabled] { opacity: 0.3; cursor: not-allowed; } .q-button--secondary[disabled] { background-color: transparent; }