diff options
Diffstat (limited to 'ext/css/settings2.css')
| -rw-r--r-- | ext/css/settings2.css | 2105 |
1 files changed, 0 insertions, 2105 deletions
diff --git a/ext/css/settings2.css b/ext/css/settings2.css deleted file mode 100644 index 4a8879fc..00000000 --- a/ext/css/settings2.css +++ /dev/null @@ -1,2105 +0,0 @@ -/* - * Copyright (C) 2020-2021 Yomichan Authors - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see <https://www.gnu.org/licenses/>. - */ - -/* Variables */ -:root { - --padding: 10px; - --padding-negative: calc(var(--padding) * -1); - --main-content-size: 700px; - --main-content-padding: 10px; - --sidebar-size: 200px; - --preview-sidebar-expanded-width: 400px; - --shadow-vertical: 0 1px 4px 0 var(--shadow-color), 0 2px 2px 0 var(--shadow-color); - --shadow-vertical-top: 0 -1px 4px 0 var(--shadow-color), 0 -2px 2px 0 var(--shadow-color); - --shadow-left: -1px 0 4px 0 var(--shadow-color), -2px 0 2px 0 var(--shadow-color); - --shadow-right: 1px 0 4px 0 var(--shadow-color), 2px 0 2px 0 var(--shadow-color); - --settings-group-horizontal-margin: 0; - --settings-group-inner-vertical-margin: 0.75em; - --settings-group-inner-vertical-padding: 0.85em; - --settings-group-inner-horizontal-padding: 1.5em; - --settings-group-inner-horizontal-padding-half: calc(var(--settings-group-inner-horizontal-padding) * 0.5); - --settings-group-inner-horizontal-padding-half-wrappable: var(--settings-group-inner-horizontal-padding-half); - --settings-group-inner-horizontal-padding-fourth: calc(var(--settings-group-inner-horizontal-padding) * 0.25); - --settings-group-border-radius: 0.3em; - --settings-group-right-max-height: 40px; - --settings-group-wrap: nowrap; - --show-preview-label-height: 40px; - - --font-size-no-units: 14; - --font-size: calc(1px * var(--font-size-no-units)); - --font-size-small: 12px; - --line-height-default: calc(20 / var(--font-size-no-units)); - --outline-item-height: 40px; - --outline-item-icon-size: 32px; - --input-short-width: calc(var(--input-width-large) / 2 - var(--padding) / 2); - --input-short-height: 24px; - --fab-button-size: 56px; - --fab-button-padding: 16px; - --modal-width: 600px; - --modal-height: 400px; - --modal-width-small: 400px; - --modal-height-small: 200px; - --modal-transition-offset: -64px; - --badge-size: 16px; - - --link-color: var(--accent-color); - --link-color-hover: var(--accent-color-dark); - --separator-color1: #cccccc; - --separator-color2: #eeeeee; - --outline-item-background-color: rgba(13, 13, 13, 0); - --outline-item-background-color-hover: rgba(13, 13, 13, 0.15); - --warning-color: #96751c; - --warning-color-light: #edc75e; - --dim-background-color: rgba(0, 0, 0, 0.5); - --content-dimmer-color: rgba(0, 0, 0, 0.1); - - --modal-padding-horizontal: 1em; - --modal-padding-vertical: 0.625em; - --modal-padding-vertical-half: calc(var(--modal-padding-vertical) * 0.5); - --modal-button-spacing: 0.625em; -} -:root:not([data-loaded=true]) { - --animation-duration: 0s; -} -:root[data-theme=dark] { - --separator-color1: #333333; - --separator-color2: #222222; -} - - -@media (max-width: 700px) { - :root { - --settings-group-horizontal-margin: calc(var(--main-content-padding) * -1); - --settings-group-inner-horizontal-padding: var(--main-content-padding); - --settings-group-border-radius: 0; - } -} - -@media (max-width: 400px) { - :root { - --settings-group-horizontal-margin: calc(var(--main-content-padding) * -1); - --settings-group-inner-horizontal-padding: var(--main-content-padding); - --settings-group-inner-horizontal-padding-half-wrappable: var(--settings-group-inner-horizontal-padding); - --settings-group-wrap: wrap; - } -} - - -/* Common styles */ -:root { - height: 100%; -} -body { - background-color: var(--background-color); - margin: 0; - padding: 0; - border: none; - font-size: var(--font-size); - font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; - color: var(--text-color); - line-height: var(--line-height-default); - height: 100%; - overflow: hidden; -} -p { - margin: 0; -} -ol, -ul { - margin: 0; - padding: 0 0 0 1.5em; -} -p+p, -p+ol, -p+ul, -ol+p, -ol+ol, -ol+ul, -ul+p, -ul+ol, -ul+ul, -li { - margin: 0.425em 0; -} -a { - color: var(--link-color); - text-decoration: none; - cursor: pointer; -} -a:hover { - color: var(--link-color-hover); - text-decoration: underline; -} -code { - font-family: 'Courier New', Courier, monospace; - background-color: var(--input-background-color); -} -label { - cursor: pointer; -} -pre { - white-space: pre-wrap; - margin: 0; -} - - -/* Text styles */ -.light { - color: var(--text-color-light2); -} -.warning-text { - color: var(--warning-color); -} -.danger-text { - color: var(--danger-color); -} - - -/* Headings */ -h1 { - font-size: 2em; - line-height: 1.5em; - margin: 0; - padding: 0.25em 0 0; - font-weight: normal; - box-sizing: border-box; - border-bottom: var(--thin-border-size) solid var(--separator-color1); -} -h2 { - font-size: 1.125em; - font-weight: normal; - line-height: 1.5; - padding: 0.9em 0; - margin: 0.85em 0 0; -} -h3 { - font-size: 1em; - font-weight: bold; - line-height: 1.5; - margin: 1.5em 0 0.85em; -} -.heading-container { - display: flex; - flex-flow: row nowrap; - width: 100%; - align-items: baseline; -} -.heading-container a { - color: inherit; - transition: background-color var(--animation-duration) ease-in-out; -} -.heading-container a:hover { - color: var(--link-color-hover); - text-decoration: none; -} -.heading-container-icon { - flex: 0 0 auto; - align-self: center; - margin: 0.85em 0.75em 0 0; -} -.heading-container-icon>.icon { - display: block; - background-color: var(--button-icon-color); - width: var(--outline-item-icon-size); - height: var(--outline-item-icon-size); -} -.heading-container-left { - flex: 1 1 auto; -} -.heading-container-right { - flex: 0 0 auto; -} -.heading-sub-text { - font-size: calc(1em / 1.125); - color: var(--text-color-light2); -} -a.heading-link-light { - color: var(--text-color-light2); -} -.heading-description, -.heading-description.more { - padding: 0; - margin: 0 0 1.0125em; -} - - -/* Content layout */ -.content-outer { - display: flex; - flex-flow: column nowrap; - width: 100%; - height: 100%; -} -.content { - flex: 1 0 auto; - width: 100%; - height: 100%; - display: flex; - overflow-x: auto; - overflow-y: scroll; - position: relative; - align-items: stretch; - justify-content: center; -} -.content-left { - flex: 1 1 0; - position: sticky; - top: 0; - z-index: 5; -} -.content-center { - flex: 1 1 auto; - width: var(--main-content-size); - padding: 0 var(--main-content-padding); - max-width: var(--main-content-size); - box-sizing: border-box; -} -.content-right { - flex: 1 1 0; - position: sticky; - top: 0; - z-index: 2; -} -#content-scroll-focus { - opacity: 0; - margin: 0; - padding: 0; - outline: none; - background-color: transparent; - display: inline; - width: 0; - height: 0; - line-height: 0; - user-select: none; -} -#content-scroll-focus::-moz-focus-inner { - border: 0; -} -.content-dimmer { - display: block; - visibility: hidden; - position: fixed; - left: 0; - top: 0; - bottom: 0; - right: 0; - z-index: 3; - opacity: 0; - background-color: var(--content-dimmer-color); - pointer-events: none; - transition: opacity var(--animation-duration) ease-in-out, visibility var(--animation-duration) ease-in-out; -} - - -/* More details toggle */ -.more-toggle { - cursor: pointer; -} -.more-toggle.more-only[data-expanded=true], -.more-toggle.no-more-only:not([data-expanded=true]) { - display: none; -} -.more { - margin-top: 0.85em; -} - - -/* Footer */ -.footer-padding { - height: 4.5em; -} - - -/* Left sidebar */ -.sidebar { - position: absolute; - left: 0; - top: 0; - bottom: 0; - width: var(--sidebar-size); - max-width: 100%; - background-color: var(--background-color); - transition: max-width var(--animation-duration) ease-in; -} -.sidebar:hover { - max-width: var(--sidebar-size); - transition: - max-width var(--animation-duration) ease-out 0.5s, - box-shadow var(--animation-duration) ease-out; -} -.sidebar-inner { - width: 100%; - height: 100%; - display: flex; - justify-content: space-between; - flex-flow: column nowrap; - overflow-x: hidden; - overflow-y: auto; - overscroll-behavior: contain; - transition: box-shadow var(--animation-duration) ease-out; -} -.sidebar-top { - position: sticky; - top: 0; - height: 2em; - z-index: 1; -} -.sidebar-top-link { - display: block; - background-color: var(--background-color); - height: 100%; - line-height: 2em; - padding: 0 1.5em; - opacity: 1; - visibility: visible; - transition: opacity var(--animation-duration2) ease-in-out, visibility var(--animation-duration2); -} -.sidebar-top-link[hidden] { - display: block; - opacity: 0; - visibility: hidden; -} -.sidebar-top-link:not(:hover) { - color: var(--text-color); -} -.sidebar-top-icon { - display: inline-block; - background-repeat: no-repeat; - background-size: 12px 12px; - width: 12px; - height: 12px; - background-image: url(/images/up-arrow.svg); - margin-right: calc(var(--padding) * 0.5); -} -.sidebar-body { - padding: 2em 0; -} -.sidebar-bottom { - padding-bottom: 2em; -} -.outline-item { - display: flex; - align-items: center; - width: 100%; - height: var(--outline-item-height); - line-height: var(--outline-item-height); - padding: 0 1.5em; - cursor: pointer; - background-color: var(--outline-item-background-color); - transition: background-color var(--animation-duration) ease-in-out; -} -.outline-item, -.outline-item:hover { - text-decoration: none; - color: var(--text-color); -} -.outline-item:hover { - background-color: var(--outline-item-background-color-hover); -} -.outline-item-left { - display: inline-block; - width: var(--outline-item-icon-size); - height: var(--outline-item-icon-size); - min-width: var(--outline-item-icon-size); - min-height: var(--outline-item-icon-size); - position: relative; -} -.outline-item-left-warning-badge { - position: absolute; - right: calc(var(--outline-item-icon-size) * -0.125); - top: calc(var(--outline-item-icon-size) * -0.125); -} -.outline-item-left-warning-badge:not([hidden]) { - display: block; -} -.outline-item-label { - white-space: nowrap; - padding-left: var(--padding); -} -.outline-item-icon { - display: block; - background-color: var(--button-icon-color); - width: 100%; - height: 100%; -} - - -/* Preview sidebar */ -.preview-sidebar { - display: flex; - flex-flow: column nowrap; - align-content: center; - justify-content: center; - position: absolute; - right: 0; - top: 0; - bottom: 0; - width: 100%; - min-width: 100%; - max-width: 100%; - transition: - width var(--animation-duration) ease-in-out, - max-width var(--animation-duration) ease-in-out, - box-shadow var(--animation-duration) ease-in-out; -} -.preview-sidebar-inner { - width: 100%; - height: 100%; - display: flex; - flex-flow: column nowrap; - align-content: center; - justify-content: center; - overflow: hidden; - background-color: var(--background-color); -} -.preview-sidebar-setting { - text-align: center; - flex: 0 0 auto; -} -.preview-frame-container { - position: relative; - align-self: stretch; - flex: 1 1 auto; - visibility: visible; -} -.preview-frame { - border: none; - margin: 0; - padding: 0; - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - user-select: none; -} - - -/* Settings styles */ -.settings-group { - margin: 0 var(--settings-group-horizontal-margin); - padding: 0; - box-sizing: border-box; - background-color: var(--background-color-light); - box-shadow: var(--shadow-vertical); - border-radius: var(--settings-group-border-radius); - overflow-x: hidden; -} -.settings-group.settings-group-top-margin { - margin-top: 1.0125em; -} -.settings-item:not([hidden]) { - display: block; -} -.settings-item-outer { - display: block; - width: 100%; -} -.settings-item-inner { - margin-top: var(--settings-group-inner-vertical-margin); - display: flex; - flex-flow: row nowrap; - justify-content: space-between; - align-content: stretch; - width: 100%; -} -.settings-item-inner.settings-item-inner-wrappable { - flex-wrap: var(--settings-group-wrap); -} -.settings-item-left { - margin-top: calc(var(--settings-group-inner-vertical-margin) * -1); - padding: var(--settings-group-inner-vertical-padding) var(--settings-group-inner-horizontal-padding-half) var(--settings-group-inner-vertical-padding) var(--settings-group-inner-horizontal-padding); - flex: 1 1 auto; - align-self: center; - position: relative; -} -.settings-item-left:last-child { - padding-right: var(--settings-group-inner-horizontal-padding); -} -.settings-item-right { - margin-top: calc(var(--settings-group-inner-vertical-margin) * -1); - padding: var(--settings-group-inner-vertical-padding) var(--settings-group-inner-horizontal-padding) var(--settings-group-inner-vertical-padding) var(--settings-group-inner-horizontal-padding-half); - flex: 0 1 auto; - align-self: stretch; - max-height: var(--settings-group-right-max-height); - display: flex; - flex-flow: row nowrap; - align-items: center; - align-content: center; - justify-content: flex-end; -} -.settings-item-inner.settings-item-inner-wrappable>.settings-item-left { - padding-right: var(--settings-group-inner-horizontal-padding-half-wrappable); -} -.settings-item-inner.settings-item-inner-wrappable>.settings-item-right { - padding-left: var(--settings-group-inner-horizontal-padding-half-wrappable); -} -.settings-item-center { - padding: var(--settings-group-inner-vertical-padding) var(--settings-group-inner-horizontal-padding) var(--settings-group-inner-vertical-padding) var(--settings-group-inner-horizontal-padding); - flex: 0 1 100%; - align-self: flex-start; - text-align: center; -} -.settings-item+.settings-item { - border-top: var(--thin-border-size) solid var(--separator-color2); -} -.settings-item-description { - color: var(--text-color-light2); -} -.settings-item-right.open-panel-button-container { - padding: 0.25em 1em 0.25em 0.75em; - max-height: calc(var(--settings-group-right-max-height) + var(--settings-group-inner-vertical-padding) * 2); -} -.settings-item-children { - padding: 0em var(--settings-group-inner-horizontal-padding-half) var(--settings-group-inner-vertical-padding) var(--settings-group-inner-horizontal-padding); - margin-top: 0; -} -.settings-item-children.settings-item-children-group { - padding: 0 0 0 calc(var(--settings-group-inner-horizontal-padding) + var(--settings-group-inner-horizontal-padding)); -} -.settings-item-children.settings-item-children-group .settings-item { - border-top: var(--thin-border-size) solid var(--separator-color2); -} -.settings-item-children.settings-item-children-group .settings-item-left { - padding-left: 0; -} -.settings-item-children.settings-item-children-group .settings-item-inner.settings-item-inner-wrappable>.settings-item-left:not(:last-child) { - padding-right: calc(var(--settings-group-inner-horizontal-padding-half-wrappable) * 2); -} -.settings-item-children.settings-item-children-group .settings-item-inner.settings-item-inner-wrappable>.settings-item-right { - padding-left: 0; -} -.settings-item-children.settings-item-children-group .settings-item-children { - padding-left: 0; -} -:root:not([data-advanced=true]) .advanced-only { - display: none; -} -.settings-item.settings-item-button, -a.settings-item.settings-item-button { - cursor: pointer; - color: var(--text-color); - text-decoration: none; - background-color: transparent; - transition: background-color var(--animation-duration) ease-in-out; -} -.settings-item.settings-item-button>.settings-item-inner, -.settings-item.settings-item-button>.settings-item-inner>.settings-item-left, -.settings-item.settings-item-button>.settings-item-inner>.settings-item-right { - margin-top: 0; -} -.settings-item.settings-item-button:hover, -.settings-item.settings-item-button:active { - background-color: var(--background-color); -} -.settings-item.settings-item-button .icon-button>.icon-button-inner>.icon { - transition: background-color var(--animation-duration) ease-in-out; -} -.settings-item.settings-item-button:hover .icon-button>.icon-button-inner>.icon, -.settings-item.settings-item-button:active .icon-button>.icon-button-inner>.icon { - background-color: var(--accent-color); -} -.settings-item-invalid-indicator { - display: none; - position: absolute; - left: 0; - top: 0; - bottom: 0; - width: 0.5em; - background-color: var(--danger-color); -} -.settings-item[data-invalid=true] .settings-item-invalid-indicator { - display: block; -} - - -/* Settings item groups */ -.settings-item-group { - margin-right: var(--padding-negative); - display: flex; - flex-flow: row nowrap; - align-items: center; - align-content: center; - justify-content: flex-end; -} -.settings-item-group.settings-item-group-wrap { - flex-wrap: wrap; -} -.settings-item-group-item { - flex: 0 1 auto; - padding-right: var(--padding); -} -.settings-item-group-item-label { - font-size: var(--font-size-small); - line-height: 1; -} -input[type=text].short-width, -input[type=number].short-width, -select.short-width { - width: var(--input-short-width); -} -input[type=text].short-height, -input[type=number].short-height, -select.short-height { - height: var(--input-short-height); - margin-top: calc(var(--settings-group-right-max-height) - var(--input-short-height) - var(--font-size-small)); - line-height: var(--input-short-height); -} -.settings-item-button-group-container { - max-height: none; - width: 100%; -} -.settings-item-button-group { - display: flex; - width: 100%; - flex-flow: row wrap; - max-height: none; - justify-content: flex-start; - margin-top: var(--padding-negative); - margin-right: var(--padding-negative); -} -.settings-item-button-group-item { - flex: 0 1 auto; - padding-top: var(--padding); - padding-right: var(--padding); -} - - -/* Modal */ -.modal { - position: fixed; - left: 0; - top: 0; - bottom: 0; - right: 0; - display: flex; - flex-flow: row nowrap; - justify-content: center; - align-items: center; - overscroll-behavior: contain; - background-color: var(--dim-background-color); - outline: none; - z-index: 100; - opacity: 1; - visibility: visible; - transition: - opacity var(--animation-duration2) ease-out, - visibility 0s linear; -} -.modal[hidden] { - opacity: 0; - visibility: hidden; - transition: - opacity var(--animation-duration2) ease-in, - visibility 0s linear var(--animation-duration2); -} -.modal[hidden]:not(.hidden-animating) { - display: none; -} -.modal-content { - max-width: 100%; - max-height: 100%; - width: var(--modal-width); - height: var(--modal-height); - background-color: var(--background-color-light); - flex: 0 1 auto; - border-radius: 0.5em; - transform: translate(0, 0); - transition: - transform var(--animation-duration2) ease-out, - width var(--animation-duration2) ease-in-out, - height var(--animation-duration2) ease-in-out, - border-radius var(--animation-duration2) ease-in-out; - box-shadow: var(--shadow-vertical); - display: flex; - flex-flow: column nowrap; - overflow: hidden; -} -.modal[hidden] .modal-content { - pointer-events: none; -} -.modal-content.modal-content-small { - width: var(--modal-width-small); - min-height: var(--modal-height-small); - height: auto; - max-height: 100%; -} -.modal-content.modal-content-full { - width: var(--main-content-size); - height: 100%; - transform: translate(0, 0); - border-radius: 0; -} -.modal[hidden] .modal-content { - transform: translate(0, var(--modal-transition-offset)); - transition: - transform 0s linear var(--animation-duration2), - width var(--animation-duration2) ease-in-out, - height var(--animation-duration2) ease-in-out, - border-radius var(--animation-duration2) ease-in-out; -} -.modal-header { - flex: 0 0 auto; - padding: var(--modal-padding-vertical) var(--modal-padding-horizontal) var(--modal-padding-vertical-half); - display: flex; - width: 100%; - align-items: center; - box-sizing: border-box; -} -.modal-title { - font-size: 1.125em; - flex: 1 1 auto; -} -.modal-footer { - flex: 0 0 auto; - padding: var(--modal-padding-vertical-half) var(--modal-padding-horizontal) var(--modal-padding-vertical); - margin-right: calc(var(--modal-button-spacing) * -1); - margin-top: calc(var(--modal-button-spacing) * -1); - display: flex; - flex-flow: row wrap; - align-items: flex-end; - justify-items: flex-end; - justify-content: flex-end; -} -.modal-footer>* { - margin-right: var(--modal-button-spacing); - margin-top: var(--modal-button-spacing); -} -.modal-body { - flex: 1 1 auto; - overflow: auto; - padding: var(--modal-padding-vertical-half) var(--modal-padding-horizontal); -} -.modal-body-addon { - flex: 0 0 auto; - padding: var(--modal-padding-vertical-half) var(--modal-padding-horizontal); -} -.modal-body>.settings-item, -.modal-settings-group>.settings-item { - margin-left: calc(var(--modal-padding-horizontal) * -1); -} -.modal-body .settings-item { - margin-right: calc(var(--modal-padding-horizontal) * -1); -} -.modal-body .settings-item+.settings-item { - border-top: none; -} -.modal-body .settings-item-left { - padding-left: var(--modal-padding-horizontal); - padding-top: var(--settings-group-inner-horizontal-padding-fourth); - padding-bottom: var(--settings-group-inner-horizontal-padding-fourth); -} -.modal-body .settings-item-right { - padding-right: var(--modal-padding-horizontal); - padding-top: var(--settings-group-inner-horizontal-padding-fourth); - padding-bottom: var(--settings-group-inner-horizontal-padding-fourth); -} -.modal-body .settings-item-children { - padding-left: var(--modal-padding-horizontal); - padding-right: var(--modal-padding-horizontal); - padding-bottom: var(--settings-group-inner-horizontal-padding-fourth); -} - -.modal.modal-left { - display: flex; - flex-flow: row nowrap; - width: 100%; - height: 100%; - background-color: transparent; - pointer-events: none; -} -.modal.modal-left::after { - content: ''; - display: block; - overflow-y: scroll; - overflow-x: hidden; - visibility: hidden; -} -.modal-content-container1 { - flex: 1 1 auto; - width: 100%; - height: 100%; - display: grid; - grid-template-columns: 1fr minmax(auto, var(--main-content-size)) 1fr; - grid-template-rows: auto; - align-items: stretch; -} -.modal-content-container2 { - grid-area: 1/1/2/3; - background-color: var(--dim-background-color); - pointer-events: auto; - width: 100%; - height: 100%; - display: flex; - flex-flow: row nowrap; - justify-content: center; - align-items: center; -} -.modal-content-container1-fade { - display: block; - position: relative; - grid-area: 1/3/2/4; -} -.modal-content-container1-fade::after { - content: ''; - display: block; - position: absolute; - left: 0; - top: 0; - bottom: 0; - width: 64px; - background: transparent linear-gradient(to right, var(--dim-background-color), transparent) repeat-y; -} - -.modal-header-button-container { - margin-top: calc(-1 * var(--modal-padding-vertical-half)); - margin-bottom: calc(-1 * var(--modal-padding-vertical-half)); -} -.modal-header-button-group { - display: block; - position: relative; - width: var(--icon-button-size); - height: var(--icon-button-size); -} -.modal-header-button { - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; -} -button.icon-button.modal-header-button>.icon-button-inner>.icon { - background-color: var(--button-icon-color-light); - transition: background-color var(--animation-duration) ease-in-out; -} -button.icon-button.modal-header-button:hover>.icon-button-inner>.icon, -button.icon-button.modal-header-button:active>.icon-button-inner>.icon { - background-color: var(--button-icon-color); -} -.modal-header-button[data-modal-action=expand], -.modal-header-button[data-modal-action=collapse] { - visibility: visible; - opacity: 1; - z-index: 1; - transition: - opacity var(--animation-duration2) ease-in-out 0s, - visibility 0s ease-in-out 0s; -} -.modal-content.modal-content-full .modal-header-button[data-modal-action=expand], -.modal-content:not(.modal-content-full) .modal-header-button[data-modal-action=collapse] { - visibility: hidden; - opacity: 0; - pointer-events: none; - z-index: 0; - transition: - opacity var(--animation-duration2) ease-in-out 0s, - visibility 0s ease-in-out var(--animation-duration2); -} - -.modal-separator-line { - border-bottom: var(--thin-border-size) solid var(--separator-color1); - margin: 0 calc(var(--modal-padding-horizontal) * -1); -} -.modal-separator-line-light { - border-bottom: var(--thin-border-size) solid var(--separator-color2); - margin: 0 calc(var(--modal-padding-horizontal) * -1); -} - - -/* Status footer */ -.status-footer-container { - position: fixed; - left: 0; - top: 0; - right: 0; - bottom: 0; - display: flex; - flex-flow: row nowrap; - justify-content: flex-end; - align-items: stretch; - pointer-events: none; - z-index: 2; -} -.status-footer-container2 { - display: flex; - flex-flow: column nowrap; - justify-content: flex-end; - align-items: center; - width: 100%; - height: 100%; - box-sizing: border-box; -} -.status-footer-container::after { - /* Used to add scrollbar width to get better alignment with the main content container */ - content: ''; - display: block; - flex: 0 0 auto; - overflow-y: scroll; - visibility: hidden; -} -.status-footer { - max-width: var(--main-content-size); - max-height: 100%; - width: 100%; - pointer-events: auto; - overflow: auto; - flex: 0 1 auto; - padding: 0.375em 0; - box-sizing: border-box; - box-shadow: var(--shadow-vertical-top); - background-color: var(--background-color-light); - border-radius: var(--settings-group-border-radius) var(--settings-group-border-radius) 0 0; - transform: none; - opacity: 1; - transition: - transform var(--animation-duration) ease-out, - opacity var(--animation-duration) ease-out; -} -.status-footer-container[hidden] .status-footer { - transform: translate(0, 100%); - opacity: 0; - transition: - transform var(--animation-duration) ease-in, - opacity var(--animation-duration) ease-in; -} -.status-footer-container[hidden]:not(.hidden-animating) { - display: none; -} -.status-footer-header { - display: flex; - width: 100%; - flex-flow: row nowrap; - align-items: center; - padding: 0.375em 0.75em; - box-sizing: border-box; -} -.status-footer-header-label { - font-weight: bold; - flex: 1 1 auto; -} -.status-footer-item { - padding: 0.375em 0.75em; -} - - -/* Floating action button container */ -.fab-container { - display: flex; - visibility: hidden; - align-items: stretch; - position: fixed; - left: 0; - bottom: 0; - top: 0; - right: 0; - pointer-events: none; - z-index: 10; -} -.fab-container::after { - content: ''; - display: block; - overflow-y: scroll; - overflow-x: hidden; - visibility: hidden; -} -.fab-container-left { - flex: 1 1 0; -} -.fab-container-center { - flex: 1 1 auto; - width: var(--main-content-size); - padding: 0 var(--main-content-padding); - max-width: var(--main-content-size); - box-sizing: border-box; - display: flex; - justify-content: flex-end; -} -.fab-container-right { - flex: 1 1 0; - position: relative; -} -.fab-container-right-inner1 { - position: absolute; - right: 0; - top: 0; - bottom: 0; - width: 100%; - min-width: 100%; - max-width: 100%; - transition: - width var(--animation-duration) ease-in-out, - max-width var(--animation-duration) ease-in-out; -} -.fab-container-right-inner2 { - display: flex; - flex-flow: column nowrap; - position: absolute; - right: 100%; - bottom: 0; - padding: 0 var(--fab-button-padding) 0 0; -} -.fab-container-item { - padding-bottom: var(--fab-button-padding); -} -button.fab-button { - display: block; - padding: 0; - margin: 0; - pointer-events: all; -} -button.fab-button>.icon-button-inner { - width: var(--fab-button-size); - height: var(--fab-button-size); -} -button.fab-button, -button.fab-button:hover, -button.fab-button:focus, -button.fab-button:active { - background-color: transparent; - box-shadow: none; -} -.fab-button-background { - position: absolute; - display: block; - content: ''; - left: 0; - top: 0; - right: 0; - bottom: 0; - border-radius: 50%; - background-color: var(--accent-color); - box-shadow: var(--shadow-vertical); -} -button.fab-button>.icon-button-inner>.icon { - background-color: #ffffff; -} -.fab-container-item.fab-container-item-popup-preview { - display: none; -} - - -/* Progress */ -.progress-labels { - display: flex; - flex-flow: row nowrap; - width: 100%; -} -.progress-info { - flex: 1 0 auto; -} -.progress-status { - text-align: right; - flex: 1 0 auto; - white-space: nowrap; -} -.progress-bar-track { - width: 100%; - height: 4px; - background-color: var(--input-background-color); -} -.progress-bar { - width: 0; - height: 100%; - background-color: var(--accent-color); -} -.progress-bar.danger { - background-color: var(--danger-color); -} - - -/* Conditional styles */ -body.sidebar-visible .content-dimmer { - visibility: visible; - opacity: 1; -} -body.sidebar-visible .sidebar, -body.sidebar-visible .sidebar:hover { - max-width: var(--sidebar-size); - transition: max-width var(--animation-duration) ease-out; -} -body.sidebar-visible .sidebar-inner { - box-shadow: var(--shadow-right); -} -body.sidebar-visible .fab-container { - visibility: visible; -} -body.sidebar-visible .content-left { - z-index: 4; -} - -body.preview-sidebar-visible .content-dimmer { - visibility: visible; - opacity: 1; -} -body.preview-sidebar-visible .preview-sidebar { - width: 70vw; - max-width: var(--preview-sidebar-expanded-width); - box-shadow: var(--shadow-left); -} -body.preview-sidebar-visible .content-right { - z-index: 5; -} -body.preview-sidebar-visible .fab-container-right-inner1 { - width: 70vw; - max-width: var(--preview-sidebar-expanded-width); -} -body.preview-sidebar-visible .fab-container { - visibility: visible; -} -body.sidebar-visible .fab-container-item.fab-container-item-popup-preview, -body.preview-sidebar-visible .fab-container-item.fab-container-item-popup-preview { - display: block; -} - - -/* Specialized settings styles */ -#audio-source-list>div+div { - margin-top: 0.375em; -} -#audio-source-list .generic-list-index-prefix { - width: 2em; - text-align: center; -} -#audio-source-list-empty { - display: none; -} -#audio-source-list:empty+#audio-source-list-empty { - display: block; -} - -.dictionary-info { - display: flex; - flex-flow: row nowrap; - align-items: center; -} -.dictionary-info-label { - margin-left: 1em; -} - -.dictionary-title { - color: inherit; - transition: color var(--animation-duration) ease-in-out; -} -.dictionary-item[data-enabled=false] .dictionary-title { - color: var(--text-color-light2); -} - -.dictionary-list { - display: flex; - flex-flow: column nowrap; - width: 100%; -} -.dictionary-list>.settings-item, -.dictionary-list>.settings-item+.settings-item { - margin-left: calc(var(--modal-padding-horizontal) * -1); - margin-right: calc(var(--modal-padding-horizontal) * -1); - border-top: var(--thin-border-size) solid var(--separator-color2); -} -.dictionary-details-table { - display: table; - width: 100%; -} -.dictionary-details-entry { - display: table-row; -} -.dictionary-details-entry+.dictionary-details-entry>* { - padding-top: 0.25em; -} -.dictionary-details-entry-label { - display: table-cell; - font-weight: bold; - white-space: nowrap; - padding-right: 0.5em; -} -.dictionary-details-entry-info { - display: table-cell; - white-space: pre-line; -} -.dictionary-counts { - width: 100%; - box-sizing: border-box; - font-size: inherit; - max-height: 10em; - line-height: 1.25; - font-family: 'Courier New', Courier, monospace; - white-space: pre; - overflow: auto; -} - -.profile-add-button-container { - display: flex; - flex-flow: row nowrap; - justify-content: flex-end; -} -.profile-entry-header { - display: flex; - flex-flow: row nowrap; - align-items: center; -} -.profile-entry-header-text { - font-size: var(--font-size-small); - line-height: 1; - text-align: left; -} -.profile-entry { - width: 100%; - display: flex; - flex-flow: row nowrap; - align-items: center; - margin-bottom: 0.25em; -} -.profile-entry-cell:nth-child(1) { - flex: 0 0 auto; - min-width: 2em; - text-align: center; -} -.profile-entry-cell:nth-child(2) { - flex: 0 0 auto; - text-align: center; - width: 3.5em; -} -.profile-entry-cell:nth-child(3) { - flex: 1 1 auto; -} -.profile-entry-cell:nth-child(4) { - flex: 0 0 auto; - min-width: 4em; - text-align: center; - align-self: stretch; -} -.profile-entry-cell:nth-child(5) { - flex: 0 0 auto; - width: 2.75em; - text-align: right; -} -input[type=text].profile-entry-name-input { - width: 100%; -} -.profile-entry-condition-count-link { - display: flex; - flex-flow: row nowrap; - width: 100%; - height: 100%; - align-items: center; - justify-content: center; -} - -.profile-condition-groups { - margin-left: calc(var(--modal-padding-horizontal) * -1); - margin-right: calc(var(--modal-padding-horizontal) * -1); - padding-left: var(--modal-padding-horizontal); - padding-right: var(--modal-padding-horizontal); - border-top: var(--thin-border-size) solid var(--separator-color2); -} -.profile-condition-group-list-info { - display: flex; - flex-flow: row nowrap; - width: 100%; - align-items: center; - margin-top: 0.5em; -} -.profile-condition-group-list-info-space { - flex: 1 1 auto; -} -.profile-condition-groups-empty-info { - flex: 1 1 auto; -} -.profile-condition-groups:not(:empty)+.profile-condition-group-list-info>.profile-condition-groups-empty-info { - display: none; -} -.profile-condition-group { - margin-top: 0.5em; - margin-bottom: 0.5em; -} -.profile-condition-list-info { - width: 100%; - display: flex; - align-items: center; - margin-bottom: 1em; -} -.profile-condition-list-info-space { - flex: 1 1 auto; -} -.profile-condition-group-separator-label { - width: 2.5em; - text-align: center; - margin-right: 0.25em; -} -.profile-condition-group:last-child>.profile-condition-list-info>.profile-condition-group-separator-label { - display: none; -} - -.profile-condition { - display: flex; - width: 100%; - flex-flow: row nowrap; - align-items: flex-start; - margin-bottom: 0.25em; -} -.profile-condition-inner { - display: flex; - width: 100%; - flex-flow: row wrap; - align-items: center; - margin-top: -0.25em; - margin-left: -0.25em; -} -.profile-condition-inner>* { - margin-left: 0.25em; - margin-top: 0.25em; -} -.profile-condition-prefix { - width: 2.5em; - text-align: center; - flex: 0 0 auto; - height: var(--input-height); - display: flex; - align-items: center; - justify-content: center; - margin-right: 0.25em; -} -.profile-condition-prefix::after { - content: 'if'; -} -.profile-condition:nth-child(n+2)>.profile-condition-prefix::after { - content: 'and'; -} -select.profile-condition-type, -select.profile-condition-operator { - width: auto; - padding-left: 1em; - padding-right: 1em; - flex: 1 0 auto; -} -.profile-condition-input-container { - flex: 1000000 1 auto; - display: flex; - flex-flow: row nowrap; - align-items: center; -} -.profile-condition-input { - width: 100%; - flex: 1 1 auto; -} -.profile-condition-menu-button-container { - margin-left: 0.25em; -} - -.anki-card-fields { - display: grid; - grid-template-columns: auto 1fr; - grid-template-rows: auto; - align-items: center; - width: 100%; - margin-top: 0.5em; -} -.anki-card-field-name-header { - font-weight: bold; - margin-right: 1em; -} -.anki-card-field-input-header { - font-weight: bold; -} -.anki-card-field-name-container { - display: flex; - flex-flow: row nowrap; - align-self: stretch; - align-items: center; - margin-top: 0.25em; - margin-right: 0.25em; - padding: 0 0.25em; -} -.anki-card-field-name-container[data-invalid=true], -.anki-card-field-name-container[data-order-matches=false][data-index='0'] { - background-color: var(--danger-color-lightest); - border-radius: var(--input-border-radius); -} -.anki-card-field-name { - flex: 1 1 auto; -} -.anki-card-field-value-container { - display: flex; - flex-flow: row nowrap; - width: 100%; - align-items: stretch; - margin-top: 0.25em; -} -input.anki-card-field-value { - flex: 1 1 auto; - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} -button.anki-card-field-value-menu-button { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - border: none; - height: var(--input-height); - line-height: var(--input-height); - background-color: var(--input-background-color); - box-sizing: border-box; - padding: 0 0.5em; -} -#anki-error-message-details { - margin-top: 0.25em; - font-family: 'Courier New', Courier, monospace; - white-space: pre; - overflow-x: auto; -} - -.anki-field-marker-info-table { - width: 100%; - border-collapse: collapse; - border-spacing: 0; -} -.anki-field-marker-info-table tr.anki-field-marker-info-table-heading { - font-weight: bold; - background-color: var(--input-background-color); -} -.anki-field-marker-info-table td { - vertical-align: top; - border: 1px solid var(--separator-color1); - margin: 0; - padding: 0.25em; -} -.anki-field-marker-info-table td:nth-child(n+2) { - border-left: none; -} -.anki-field-marker-info-table td:nth-last-child(n+2) { - border-right: none; -} -code.anki-field-marker { - white-space: nowrap; - font-size: 0.85em; - font-weight: bold; -} - -.anki-card-templates-layout { - display: flex; - flex-flow: column nowrap; -} -.anki-card-templates-info { - flex: 0 1 auto; -} -.anki-card-templates-test-input-container { - display: flex; - flex-flow: row nowrap; - width: 100%; - align-items: stretch; -} -.anki-card-templates-test-container { - flex: 0 1 auto; -} -.anki-card-templates-test-table { - display: grid; - grid-template-columns: auto 1fr auto; - grid-template-rows: auto; - align-items: center; - width: 100%; - box-sizing: border-box; - column-gap: 0.85em; -} -.anki-card-templates-test-table-header { - font-size: var(--font-size-small); -} -#anki-card-templates-textarea { - flex: 1 1 auto; - width: 100%; - max-width: 100%; - box-sizing: border-box; - resize: none; - min-height: calc(var(--textarea-line-height) * 5 + var(--textarea-padding) * 2); -} -#anki-card-templates-render-result, -#anki-card-templates-compile-result { - flex: 0 0 auto; - width: 100%; - max-width: 100%; - min-height: calc(var(--textarea-line-height) + var(--textarea-padding) * 2); - box-sizing: border-box; - padding: var(--textarea-padding); - font-family: 'Courier New', Courier, monospace; - background-color: var(--input-background-color); - border: none; - border-radius: var(--input-border-radius); - line-height: var(--textarea-line-height); - overflow: auto; - white-space: pre; -} - -.custom-popup-css-container { - display: flex; - flex-flow: column nowrap; -} -.custom-popup-css-header { - font-size: var(--font-size-small); -} -#custom-popup-css, -#custom-popup-outer-css { - flex: 1 1 auto; - width: 100%; - max-width: 100%; - box-sizing: border-box; - resize: none; - min-height: calc(var(--textarea-line-height) * 5 + var(--textarea-padding) * 2); -} - -.scan-input-list { - margin: 0 calc(var(--modal-padding-horizontal) * -1); -} -.scan-input-list:not(:empty)+.scan-input-list-empty-info { - display: none; -} -.scan-input { - margin: 0.5em 0; -} -.scan-input+.scan-input { - border-top: var(--thin-border-size) solid var(--separator-color2); -} -.scan-input-grid { - display: grid; - grid-template-columns: auto auto 1fr auto; - grid-template-rows: auto; - width: 100%; - column-gap: 0.25em; - row-gap: 0.25em; - margin: 0.5em 0; - padding: 0 var(--modal-padding-horizontal); - box-sizing: border-box; -} -.scan-input-suffix-cell { - grid-area: 1/4/2/5; -} -.scan-input-index-cell { - grid-area: 1/1/2/2; - align-self: center; - width: 2em; - text-align: center; -} -.scan-input-prefix-cell { - align-self: center; - padding-right: 0.5em; - display: flex; - flex-flow: row nowrap; - align-items: center; - white-space: nowrap; -} -.scan-input-content-cell { - display: flex; - flex-flow: row nowrap; - width: 100%; - align-items: stretch; -} -.scan-input-prefix-cell[data-property=include] { - grid-area: 1/2/2/3; -} -.scan-input-prefix-cell[data-property=exclude] { - grid-area: 2/2/3/3; -} -.scan-input-prefix-cell[data-property=types] { - grid-area: 3/2/4/3; -} -.scan-input-prefix-cell[data-property=search-options] { - grid-area: 4/2/5/3; -} -.scan-input-prefix-cell[data-property=touch-pen-options] { - grid-area: 5/2/6/3; -} -.scan-input-content-cell[data-property=include] { - grid-area: 1/3/2/4; -} -.scan-input-content-cell[data-property=exclude] { - grid-area: 2/3/3/4; -} -.scan-input-content-cell[data-property=types] { - grid-area: 3/3/4/4; - display: flex; - flex-flow: row wrap; - align-items: center; -} -.scan-input-content-cell[data-property=search-options] { - grid-area: 4/3/5/4; - display: flex; - flex-flow: row wrap; - align-items: center; -} -.scan-input-content-cell[data-property=touch-pen-options] { - grid-area: 5/3/6/4; - display: flex; - flex-flow: column nowrap; - align-items: flex-start; -} -.scan-input-options-cell { - padding: 0.25em 0; - align-self: start; -} -.scan-input:not([data-show-advanced=true]) .scan-input-advanced-only { - display: none; -} -.scan-input-checkbox-item { - display: flex; - flex-flow: row nowrap; - align-items: center; - margin-right: 0.75em; - cursor: pointer; -} -.scan-input-checkbox-item>span { - padding-left: 0.375em; -} -.scan-input-option-heading { - font-weight: bold; -} -.scan-input-option-group { - display: flex; - flex-flow: column nowrap; - padding-left: 1.5em; - align-items: flex-start; -} - -#pitch-accents-preview-frame { - border: none; - margin: 0; - padding: 0; - width: 100%; - height: calc(0.425em * 4 + 1em * var(--line-height-default) * 3); -} - -#translation-text-replacement-list-empty { - display: none; -} -#translation-text-replacement-list:empty+#translation-text-replacement-list-empty { - display: block; -} -.translation-text-replacement-entry { - display: grid; - grid-template-columns: auto auto 1fr auto; - grid-template-rows: auto; - grid-template-areas: - 'index pattern-label pattern button' - '. replacement-label replacement button' - '. test-label test .'; - column-gap: 0.25em; - row-gap: 0.25em; - align-items: stretch; - justify-items: stretch; -} -.translation-text-replacement-entry+.translation-text-replacement-entry { - margin-top: 0.5em; -} -.translation-text-replacement-index { - grid-area: index; - align-self: center; - justify-self: start; - padding-right: 0.5em; -} -.translation-text-replacement-pattern-label { - grid-area: pattern-label; - align-self: center; - justify-self: start; - padding-right: 0.5em; -} -.translation-text-replacement-replacement-label { - grid-area: replacement-label; - align-self: center; - justify-self: start; - padding-right: 0.5em; -} -.translation-text-replacement-pattern-container { - grid-area: pattern; - align-self: stretch; - justify-self: stretch; - display: flex; - flex-flow: row nowrap; - align-items: stretch; -} -.translation-text-replacement-replacement-container { - grid-area: replacement; - align-self: stretch; - justify-self: stretch; - display: flex; - flex-flow: row nowrap; - align-items: stretch; -} -input.translation-text-replacement-pattern, -input.translation-text-replacement-replacement { - flex: 1 1 auto; - width: auto; -} -.translation-text-replacement-checkbox-container { - white-space: nowrap; - display: flex; - flex-flow: row nowrap; - align-items: center; - padding-left: 0.5em; -} -.translation-text-replacement-checkbox-label { - padding-left: 0.5em; -} -.translation-text-replacement-button { - grid-area: button; - align-self: center; - justify-self: start; -} -.translation-text-replacement-test-label { - grid-area: test-label; - align-self: center; - justify-self: start; - padding-right: 0.5em; -} -.translation-text-replacement-test-container { - grid-area: test; - align-self: stretch; - justify-self: stretch; - display: flex; - flex-flow: row nowrap; - align-items: stretch; -} -input.translation-text-replacement-test-input, -input.translation-text-replacement-test-output { - flex: 1 1 auto; - width: auto; -} -.translation-text-replacement-test-label-inner { - grid-area: button; - align-self: center; - justify-self: start; - flex: 0 0 auto; - padding: 0 0.5em; - white-space: nowrap; -} -.translation-text-replacement-entry:not([data-test-visible=true]) .translation-text-replacement-test-node { - display: none; -} - -.sentence-termination-character-list-table { - width: 100%; - table-layout: fixed; - border-spacing: 0.25em; - margin-top: 0.5em; - min-width: 400px; -} -.sentence-termination-character-list-table thead td { - white-space: nowrap; - font-size: var(--font-size-small); - line-height: 1; - text-align: left; - vertical-align: bottom; - font-weight: normal; -} -.sentence-termination-character-list-table td { - vertical-align: middle; - padding: 0; -} -.sentence-termination-character-list-table td:nth-child(1) { - width: 2em; -} -.sentence-termination-character-list-table td:nth-child(2) { - width: 4em; -} -.sentence-termination-character-list-table td:nth-child(3) { - width: 25%; -} -.sentence-termination-character-list-table td:nth-child(4) { - width: 18.5%; -} -.sentence-termination-character-list-table td:nth-child(5) { - width: 18.5%; -} -.sentence-termination-character-list-table td:nth-child(6) { - width: 40%; -} -.sentence-termination-character-list-table td:nth-child(7) { - width: 3em; -} -select.sentence-termination-character-type, -input.sentence-termination-character-input1, -input.sentence-termination-character-input2 { - width: 100%; -} -.sentence-termination-character-input2-alt { - text-align: center; -} -.sentence-termination-character-entry:not([data-type=quote]) .sentence-termination-character-input2 { - display: none; -} -.sentence-termination-character-entry[data-type=quote] .sentence-termination-character-input2-alt { - display: none; -} -.sentence-termination-character-include-list { - display: flex; - flex-flow: row nowrap; -} -.sentence-termination-character-include { - display: flex; - flex-flow: row nowrap; - white-space: nowrap; - align-items: center; -} -.sentence-termination-character-include>:first-child { - margin-right: 0.375em; -} -.sentence-termination-character-include+.sentence-termination-character-include { - margin-left: 1em; -} -#sentence-termination-character-list-empty { - flex: 0 1 auto; - margin-top: 0.5em; -} - -.hotkey-list { - margin: 0 calc(var(--modal-padding-horizontal) * -1); -} -.hotkey-list-item { - margin: 0.5em 0; -} -.hotkey-list-item+.hotkey-list-item { - border-top: var(--thin-border-size) solid var(--separator-color2); -} -.hotkey-list-item-grid { - display: grid; - grid-template-columns: auto auto 1fr auto; - grid-template-rows: auto; - grid-template-areas: - 'index input-label input button' - '. action-label action .'; - width: 100%; - column-gap: 0.25em; - row-gap: 0.25em; - margin: 0.5em 0; - padding: 0 var(--modal-padding-horizontal); - box-sizing: border-box; -} -.hotkey-list-item-index-cell { - grid-area: index; - align-self: center; - text-align: center; - width: 2em; -} -.hotkey-list-item-button-cell { - grid-area: button; - align-self: center; -} -.hotkey-list-item-input-label-cell { - grid-area: input-label; - align-self: center; -} -.hotkey-list-item-input-cell { - grid-area: input; - display: flex; - flex-flow: row nowrap; - width: 100%; - align-items: stretch; - align-self: center; -} -.hotkey-list-item-input { - flex: 1 1 auto; -} -.hotkey-list-item-action-label-cell { - grid-area: action-label; - align-self: center; -} -.hotkey-list-item-action-cell { - grid-area: action; - align-self: center; - display: flex; - flex-flow: row nowrap; - width: 100%; - align-items: center; -} -.hotkey-list-item-action { - flex: 1 1 auto; -} -.hotkey-list-item-enabled-label { - align-self: center; - margin-left: 1em; -} -.hotkey-list-item-flex-row { - display: flex; - flex-flow: row nowrap; - align-items: center; -} -.hotkey-list-item-flex-row-label { - margin: 0 0.5em 0 1em; -} -.hotkey-scope-checkbox-container { - flex-flow: row nowrap; - align-items: center; - cursor: pointer; -} -.hotkey-scope-checkbox-container:not([hidden]) { - display: flex; -} -.hotkey-scope-checkbox-container:not(:last-child) { - margin-right: 0.75em; -} -.hotkey-scope-checkbox-container>span { - padding-left: 0.375em; -} - -.inline-icon { - position: relative; - width: calc(1em * (16 / var(--font-size-no-units))); - height: calc(1em * (16 / var(--font-size-no-units))); - top: calc(1em * (3 / var(--font-size-no-units))); -} - -.warning-badge { - position: relative; - width: var(--badge-size); - height: var(--badge-size); - margin: 0; - padding: 0; - background-color: var(--warning-color-light); - border-radius: 50%; - box-shadow: var(--shadow-vertical); -} -.warning-badge:not([hidden]) { - display: block; -} -.warning-badge>.icon { - display: block; - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; - background-color: var(--warning-color); -} - - -/* Generic layouts */ -.margin-above { - margin-top: 0.85em; -} -.margin-left { - margin-left: 0.85em; -} - -.horizontal-flex { - display: flex; - flex-flow: row wrap; - margin-left: -0.375em; - align-items: center; - align-content: flex-start; - justify-content: flex-start; -} -.horizontal-flex>* { - margin-left: 0.375em; -} -.horizontal-flex-fill { - flex-grow: 1; -} - -.generic-list { - counter-reset: generic-list-index; -} -.generic-list-index-prefix::after { - counter-increment: generic-list-index; - content: counter(generic-list-index); -} - -.flex-row-nowrap { - display: flex; - flex-flow: row nowrap; - align-items: center; - width: 100%; -} -.flex-row-nowrap.right { - justify-content: flex-end; -} -.flex-row-wrap { - display: flex; - flex-flow: row wrap; - align-items: center; -} -.flex-margin-left { - margin-left: 0.5em; -} - -.flex-column-nowrap { - display: flex; - flex-flow: column nowrap; - align-items: flex-start; - width: 100%; -} -.flex-column-nowrap-spaced>* { - margin-top: 0.25em; -} - -.flex-label { - display: flex; - flex-flow: row nowrap; - align-items: center; -} -.flex-label>span { - margin-left: 0.375em; -} -.flex-label.no-wrap>span { - white-space: nowrap; -} - -.no-wrap { - white-space: nowrap; -} - - -/* Environment-specific display */ -:root[data-browser=edge] [data-show-for-browser]:not([data-show-for-browser~=edge]), -:root[data-browser=edge-legacy] [data-show-for-browser]:not([data-show-for-browser~=edge-legacy]), -:root[data-browser=chrome] [data-show-for-browser]:not([data-show-for-browser~=chrome]), -:root[data-browser=firefox] [data-show-for-browser]:not([data-show-for-browser~=firefox]), -:root[data-browser=firefox-mobile] [data-show-for-browser]:not([data-show-for-browser~=firefox-mobile]), -:root[data-browser=edge] [data-hide-for-browser~=edge], -:root[data-browser=edge-legacy] [data-hide-for-browser~=edge-legacy], -:root[data-browser=chrome] [data-hide-for-browser~=chrome], -:root[data-browser=firefox] [data-hide-for-browser~=firefox], -:root[data-browser=firefox-mobile] [data-hide-for-browser~=firefox-mobile] { - display: none; -} - -:root[data-os=mac] [data-show-for-os]:not([data-show-for-os~=mac]), -:root[data-os=win] [data-show-for-os]:not([data-show-for-os~=win]), -:root[data-os=android] [data-show-for-os]:not([data-show-for-os~=android]), -:root[data-os=cros] [data-show-for-os]:not([data-show-for-os~=cros]), -:root[data-os=linux] [data-show-for-os]:not([data-show-for-os~=linux]), -:root[data-os=openbsd] [data-show-for-os]:not([data-show-for-os~=openbsd]), -:root[data-os=mac] [data-hide-for-os~=mac], -:root[data-os=win] [data-hide-for-os~=win], -:root[data-os=android] [data-hide-for-os~=android], -:root[data-os=cros] [data-hide-for-os~=cros], -:root[data-os=linux] [data-hide-for-os~=linux], -:root[data-os=openbsd] [data-hide-for-os~=openbsd] { - display: none; -} - -:root[data-manifest-version='2'] [data-show-for-manifest-version]:not([data-show-for-manifest-version~='2']), -:root[data-manifest-version='3'] [data-show-for-manifest-version]:not([data-show-for-manifest-version~='3']), -:root[data-manifest-version='2'] [data-hide-for-manifest-version~='2'], -:root[data-manifest-version='3'] [data-hide-for-manifest-version~='3'] { - display: none; -} - -/* Media-specific styles */ -@media (max-width: 800px), (hover: none) and (max-width: 1100px) { - .fab-container { - visibility: visible; - } -} -@media (max-width: 700px) { - .sidebar-inner { - box-shadow: var(--shadow-right); - } -} |