diff options
author | toasted-nutbread <toasted-nutbread@users.noreply.github.com> | 2021-02-12 21:03:30 -0500 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-02-12 21:03:30 -0500 |
commit | 4f13de283572b2c57e7462f1030c12fe8335882e (patch) | |
tree | 15d49f2eef5e0c440ada6aa07a9f62da75c13313 /ext/bg | |
parent | 8454f52378b9410393262122c6920606e187e18f (diff) |
Move css files (#1374)
* Move bg/css/ to css/
* Move mixed/css/ to css/
Diffstat (limited to 'ext/bg')
-rw-r--r-- | ext/bg/context.html | 2 | ||||
-rw-r--r-- | ext/bg/css/context.css | 420 | ||||
-rw-r--r-- | ext/bg/css/pitch-accents-preview.css | 57 | ||||
-rw-r--r-- | ext/bg/css/popup-preview.css | 149 | ||||
-rw-r--r-- | ext/bg/css/settings.css | 442 | ||||
-rw-r--r-- | ext/bg/css/settings2.css | 2104 | ||||
-rw-r--r-- | ext/bg/info.html | 4 | ||||
-rw-r--r-- | ext/bg/legal.html | 4 | ||||
-rw-r--r-- | ext/bg/permissions.html | 4 | ||||
-rw-r--r-- | ext/bg/pitch-accents-preview.html | 4 | ||||
-rw-r--r-- | ext/bg/popup-preview.html | 4 | ||||
-rw-r--r-- | ext/bg/search.html | 6 | ||||
-rw-r--r-- | ext/bg/settings.html | 2 | ||||
-rw-r--r-- | ext/bg/settings2.html | 4 | ||||
-rw-r--r-- | ext/bg/welcome.html | 4 |
15 files changed, 19 insertions, 3191 deletions
diff --git a/ext/bg/context.html b/ext/bg/context.html index 4e28b7b0..1b0072a6 100644 --- a/ext/bg/context.html +++ b/ext/bg/context.html @@ -11,7 +11,7 @@ <link rel="icon" type="image/png" href="/images/icon48.png" sizes="48x48"> <link rel="icon" type="image/png" href="/images/icon64.png" sizes="64x64"> <link rel="icon" type="image/png" href="/images/icon128.png" sizes="128x128"> - <link rel="stylesheet" type="text/css" href="/bg/css/context.css"> + <link rel="stylesheet" type="text/css" href="/css/context.css"> </head> <body> diff --git a/ext/bg/css/context.css b/ext/bg/css/context.css deleted file mode 100644 index a77511ad..00000000 --- a/ext/bg/css/context.css +++ /dev/null @@ -1,420 +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/>. - */ - -:root { - --badge-size: 16px; - - --warning-color: #96751c; - --warning-color-light: #edc75e; -} - -body { - padding: 10px; - margin: 0; - font-family: 'Segoe UI', Tahoma, sans-serif; - font-size: 14px; -} - -h3 { - margin: 10px 0; - font-family: inherit; - font-weight: 500; - line-height: 1.1; - font-size: 24px; - color: inherit; -} -label { - font-weight: normal; -} - -#mini { - display: flex; - flex-flow: column nowrap; - align-items: center; -} -#full { - display: none; -} -:root[data-mode=full] #mini { - display: none; -} -:root[data-mode=full] #full { - display: initial; -} - - -/* Icons */ -.icon { - --icon-image: none; - --icon-size: contain; - - -webkit-mask-repeat: no-repeat; - -webkit-mask-position: center center; - -webkit-mask-mode: alpha; - -webkit-mask-size: var(--icon-size); - -webkit-mask-image: var(--icon-image); - mask-repeat: no-repeat; - mask-position: center center; - mask-mode: alpha; - mask-size: var(--icon-size); - mask-image: var(--icon-image); -} -.icon[data-icon=profile] { --icon-image: url(/images/profile.svg); } -.icon[data-icon=cog] { --icon-image: url(/images/cog.svg); } -.icon[data-icon=key] { --icon-image: url(/images/key.svg); } -.icon[data-icon=magnifying-glass] { --icon-image: url(/images/magnifying-glass.svg); } -.icon[data-icon=exclamation-point-short] { --icon-image: url(/images/exclamation-point-short.svg); } -.icon[data-icon=question-mark-circle] { --icon-image: url(/images/question-mark-circle.svg); } - - -/* Page-specific styles */ -.link-group { - flex-flow: row nowrap; - align-items: center; - line-height: 1.5em; - margin: 0 -10px; - padding: 0.5em 10px; - cursor: pointer; - color: #333; - text-decoration: none; - background-color: transparent; - transition: background-color 0.125s linear 0s; - max-width: none; -} -.link-group:not([hidden]) { - display: flex; -} -.link-group:hover, -.link-group:active { - color: #333; - text-decoration: none; -} -.link-group:hover>.link-group-label, -.link-group:active>.link-group-label { - text-decoration: underline; -} -.link-group:hover { - background-color: rgba(0, 0, 0, 0.05); -} -.link-group:active { - background-color: rgba(0, 0, 0, 0.1); -} -.link-group-icon { - width: 16px; - height: 16px; - text-align: center; - vertical-align: middle; - display: inline-block; - margin-right: 0.25em; -} -.link-group-icon>input { - margin: 0; - padding: 0; -} -.link-group-icon[data-icon=chevron]::after { - content: ''; - display: block; - width: 100%; - height: 100%; - background-image: url(/images/right-chevron.svg); - background-repeat: no-repeat; - background-position: center center; - background-size: contain; -} -.link-group-label { - vertical-align: middle; -} -.link-group-badge { - margin-left: 0.5em; -} - -/* Toggle */ -.toggle>input[type=checkbox] { - display: none; -} -.toggle>input[type=checkbox]:not(:checked)~.toggle-group { - transform: translateX(-50%); -} -.toggle { - box-sizing: border-box; - width: 60px; - height: 34px; - position: relative; - overflow: hidden; - border: 1px solid #245580; - border-radius: 4px; - display: inline-block; - padding: 6px 12px; -} -.toggle-group { - position: absolute; - width: 200%; - left: 0; - top: 0; - bottom: 0; - user-select: none; -} -body[data-loaded=true] .toggle-group { - transition: transform 0.35s; -} - -.toggle-on, -.toggle-off, -.toggle-handle { - display: block; - padding: 6px 12px; - font-size: 14px; - font-weight: normal; - line-height: calc(20 / 14); - text-align: center; - white-space: nowrap; - cursor: pointer; -} -.toggle-on, -.toggle-off { - position: absolute; - top: 0; - bottom: 0; - margin: 0; - border: 0; -} - -.toggle-on { - padding-right: 24px; - left: 0; - right: 50%; - color: #ffffff; - background-color: #337ab7; - border-color: #2e6da4; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 3px 5px rgba(0, 0, 0, 0); - background-image: linear-gradient(#337ab7, #265a88); - background-repeat: repeat-x; -} -.toggle-on:focus, -.toggle-on:hover { - background-color: #265a88; - background-image: linear-gradient(#2d65a0, #265a88 50%); -} -.toggle-on:active { - background-color: #204d74; - background-image: none; - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); -} - -.toggle-off { - padding-left: 24px; - left: 50%; - right: 0; -} - -.toggle-handle { - position: relative; - margin: 0 auto; - padding-top: 0; - padding-bottom: 0; - height: 100%; - width: 0; - border-style: solid; - border-width: 0 1px; - border-radius: 4px; - border-color: #cccccc; -} - -.toggle-off, -.toggle-handle { - color: #333333; - text-shadow: 0 1px 0 #ffffff; - background-color: #ffffff; - background-image: linear-gradient(#ffffff, #e0e0e0); - background-repeat: repeat-x; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); -} -.toggle-off:focus, -.toggle-off:hover, -.toggle-handle:focus, -.toggle-handle:hover { - background-color: #e6e6e6; - background-image: linear-gradient(#e0e0e0, #e6e6e6 50%); - border-color: #adadad; -} -.toggle-off:active, -.toggle-handle:active { - background-color: #d4d4d4; - background-image: none; - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - border-color: #8c8c8c; -} - - -/* Navigation buttons and icons */ -.nav-button-container { - display: flex; - justify-content: center; - margin-top: 10px; - white-space: nowrap; -} -.nav-button { - background-image: linear-gradient(#f8f8f8, #e0e0e0); - border: 1px solid #cccccc; - margin: 0; - padding: 2px 3px; - cursor: pointer; - position: relative; -} -.nav-button+.nav-button { - margin-left: -1px; -} -.nav-button:hover { - z-index: 1; - border-color: #aaaaaa; - background-image: linear-gradient(#e8e8e8, #d0d0d0); - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15); -} -.nav-button:active { - z-index: 1; - border-color: #808080; - background-image: linear-gradient(#c8c8c8, #e0e0e0); - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15); -} -.nav-button:focus { - outline: none; -} -.nav-button>.icon { - --icon-size: 16px 16px; - display: block; - width: 16px; - height: 16px; - box-sizing: content-box; - background-color: #333333; -} -.nav-button:first-child, -.nav-button:first-child[hidden]+.nav-button { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; -} -.nav-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; -} - -.action-select-profile { - position: relative; -} -.profile-select-container { - position: absolute; - left: -1px; - top: -1px; - right: -1px; - bottom: -1px; -} -select.profile-select { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - box-sizing: border-box; - border: 0; - margin: 0; - padding: 0.375em; - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; - opacity: 0; - outline: none; - cursor: pointer; - font-size: 14px; -} -.profile-select optgroup { - color: #666666; - font-weight: normal; - font-style: normal; - background-color: #f2f2f2; -} -.profile-select option { - color: #333333; - font-weight: normal; - font-style: normal; - background-color: initial; -} - -.nav-button-warning-badge { - pointer-events: none; - width: 12px; - height: 6px; - position: absolute; - right: calc(50% - 6px); - top: -8px; - z-index: 1; -} -.nav-button-warning-badge-inner, -.nav-button-warning-badge-outer { - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; - background-color: #edc75e; - - --icon-image: url(/images/material-down-arrow.svg); - --icon-size: contain; - - -webkit-mask-repeat: no-repeat; - -webkit-mask-position: center center; - -webkit-mask-mode: alpha; - -webkit-mask-size: var(--icon-size); - -webkit-mask-image: var(--icon-image); - mask-repeat: no-repeat; - mask-position: center center; - mask-mode: alpha; - mask-size: var(--icon-size); - mask-image: var(--icon-image); -} -.nav-button-warning-badge-inner { - margin: 1px 2px; -} -.nav-button-warning-badge-outer { - animation: nav-button-warning-badge-animation ease-in-out 2s alternate infinite; -} -@keyframes nav-button-warning-badge-animation { - 0% { opacity: 1; background-color: #edc75e; } - 100% { opacity: 1; background-color: #333333; } -} - -.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); -} diff --git a/ext/bg/css/pitch-accents-preview.css b/ext/bg/css/pitch-accents-preview.css deleted file mode 100644 index cda9977e..00000000 --- a/ext/bg/css/pitch-accents-preview.css +++ /dev/null @@ -1,57 +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/>. - */ - -html { - background-color: transparent; - color: #333333; -} -html, -body { - margin: 0; - padding: 0; - border: 0; - overflow: hidden; - width: 100%; - height: 100%; - font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-size: 14px; - line-height: calc(20 / 14); -} -ul { - margin: 0; - padding: 0 0 0 1.5em; -} -li { - margin: 0.425em 0; -} - -.content { - display: flex; - min-width: 100%; - min-height: 100%; - box-sizing: border-box; - padding: 0; - flex-flow: column nowrap; - align-items: center; - justify-content: center; -} -.content-body { - max-width: 100%; - width: 700px; - flex: 0 0 auto; - height: auto; -} diff --git a/ext/bg/css/popup-preview.css b/ext/bg/css/popup-preview.css deleted file mode 100644 index 2faccc3f..00000000 --- a/ext/bg/css/popup-preview.css +++ /dev/null @@ -1,149 +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/>. - */ - -:root { - --animation-duration: 0s; -} -:root[data-loaded=true] { - --animation-duration: 0.25s; -} - -html { - transition: background-color var(--animation-duration) linear 0s, color var(--animation-duration) linear 0s; - background-color: rgba(255, 255, 255, 0); - color: #333333; -} -html.dark { - color: #d4d4d4; - background-color: #1e1e1e; -} -html, -body { - margin: 0; - padding: 0; - border: 0; - overflow: hidden; - width: 100%; - height: 100%; - font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-size: 14px; -} - -.content { - display: flex; - min-width: 100%; - min-height: 100%; - box-sizing: border-box; - padding: 1em; - flex-flow: column nowrap; - align-items: center; - justify-content: center; -} -.content-body { - max-width: 100%; - width: 400px; -} -.top-options { - max-width: 100%; - display: flex; - flex-flow: row nowrap; - align-items: center; -} -.top-options-left { - flex: 1 1 auto; -} -.top-options-right { - flex: 0 0 auto; -} - -.example-text-container { - position: relative; -} -.example-text { - display: block; - width: 100%; - font-size: 24px; - line-height: 1.25em; - height: 1.25em; - box-sizing: border-box; - border: 1px solid rgba(221, 221, 221, 0); - margin: 0; - padding: 0; - outline: none; - color: inherit; - background-color: transparent; - white-space: pre; - transition: background-color var(--animation-duration) linear 0s, border-color var(--animation-duration) linear 0s; -} -.example-text:hover, -.example-text-input { - border-color: #dddddd; -} -.example-text[hidden] { - display: none; -} -.example-text-input { - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; -} -.example-text-input:not([hidden])+.example-text { - visibility: hidden; -} - -.popup-placeholder { - display: flex; - width: 100%; - height: 250px; - padding-top: 10px; - border: 1px solid rgba(0, 0, 0, 0); - flex-flow: column nowrap; - justify-content: center; -} -.placeholder-info { - flex: 0 1 auto; - visibility: hidden; - opacity: 0; - transition: opacity var(--animation-duration) linear 0s, visibility 0s linear var(--animation-duration); -} -.placeholder-info.placeholder-info-visible { - visibility: visible; - opacity: 1; - transition: opacity var(--animation-duration) linear 0s, visibility 0s linear 0s; -} - -.theme-button { - display: inline-block; - margin-left: 0.5em; - text-decoration: none; - cursor: pointer; - white-space: nowrap; - line-height: 0; -} -.theme-button>input { - vertical-align: middle; - margin: 0 0.25em 0 0; - padding: 0; -} -.theme-button>span { - vertical-align: middle; -} -.theme-button:hover>span { - text-decoration: underline; -} diff --git a/ext/bg/css/settings.css b/ext/bg/css/settings.css deleted file mode 100644 index 707de85a..00000000 --- a/ext/bg/css/settings.css +++ /dev/null @@ -1,442 +0,0 @@ -/* - * Copyright (C) 2019-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/>. - */ - - -.help-block[hidden] { - display: none; -} - -html:root:not([data-options-anki-enable=true]) #anki-general, -html:root:not([data-options-general-debug-info=true]) .debug, -html:root:not([data-options-general-show-advanced=true]) .options-advanced, -html:root[data-options-general-show-advanced=true] .options-non-advanced, -html:root:not([data-options-general-result-output-mode=merge]) #dictionary-main-group { - display: none; -} - -.tab-content { - border-bottom: 1px #ddd solid; - border-left: 1px #ddd solid; - border-right: 1px #ddd solid; - padding: 10px; -} - -.bottom-links { - padding-bottom: 1em; -} - -.label-light { - font-weight: normal; -} - -.form-control[data-invalid=true] { - border-color: #f00000; -} - -.mouse-button { - padding-left: 10px; - padding-right: 10px; -} -.mouse-button[hidden] { - display: none; -} -.mouse-button-icon { - width: 20px; - height: 20px; - display: block; - background: url(/images/mouse.svg) no-repeat center center; - background-size: 20px 20px; -} - -.condition { - display: flex; - -flex-wrap: wrap; -} -.profile-condition-input-container { - flex: 1 1 auto; -} -.profile-condition-line-break { - flex: 1 0 100%; - display: none; -} -.condition>.input-group-btn { - width: auto; -} -.condition>.profile-condition-prefix::after { - content: 'IF'; -} -.condition:nth-child(n+2)>.profile-condition-prefix::after { - content: 'AND'; -} - -.profile-condition-prefix { - flex: 0 0 auto; -} -.profile-condition-prefix, -.profile-condition-group-separator-label { - width: 60px; - text-align: center; -} -.profile-condition-group-separator-label { - padding: 6px 12px; - font-weight: bold; - display: inline-block; -} -.profile-condition-type, -.profile-condition-operator { - width: auto; - text-align: center; - text-align-last: center; -} - -.profile-condition-list>.condition>*:first-child, -.audio-source-list>.audio-source>*:first-child { - border-bottom-left-radius: 0; -} -.profile-condition-list>.condition:nth-child(n+2)>*:first-child, -.audio-source-list>.audio-source:nth-child(n+2)>*:first-child { - border-top-left-radius: 0; -} -.profile-condition-list>.condition:nth-child(n+2)>div:last-child>button, -.audio-source-list>.audio-source:nth-child(n+2)>*:last-child>button { - border-top-right-radius: 0; -} -.profile-condition-list>.condition:nth-last-child(n+2)>div:last-child>button, -.audio-source-list>.audio-source:nth-last-child(n+2)>*:last-child>button { - border-bottom-right-radius: 0; -} -.profile-condition-group-options>.profile-condition-add-button, -.audio-source-options>.audio-source-add { - border-top-left-radius: 0; - border-top-right-radius: 0; -} - -.profile-condition-groups>.profile-condition-group:last-child>.profile-condition-group-separator-label { - display: none; -} - -.scan-input-list { - counter-reset: scan-input-id; -} -.scan-input-grid { - display: grid; - grid-template-columns: auto auto 1fr auto; - grid-template-rows: auto; - width: 100%; - margin-bottom: 8px; -} -.scan-input-index { - height: 100%; - width: 40px; - font-size: 14px; - color: #555; - background-color: #eee; - border: 1px solid #ccc; - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - display: flex; - justify-content: center; - align-items: center; -} -.scan-input-index::after { - display: block; - counter-increment: scan-input-id; - content: counter(scan-input-id); -} -.scan-input-prefix { - padding: 6px 12px; - font-size: 14px; - color: #555; - text-align: center; - background-color: #eee; - border: 1px solid #ccc; - width: 100%; - height: 100%; -} -.scan-input-input-cell { - width: 100%; -} -.scan-input-content-cell .form-control, -.scan-input-content-cell button { - border-radius: 0; -} -.scan-input-prefix-cell[data-property=include] { - grid-area: 1/2/1/2; -} -.scan-input-prefix-cell[data-property=exclude] { - grid-area: 2/2/2/2; -} -.scan-input-prefix-cell[data-property=types] { - grid-area: 3/2/3/2; -} -.scan-input-prefix-cell[data-property=options] { - grid-area: 4/2/4/2; -} -.scan-input-content-cell[data-property=include] { - grid-area: 1/3/1/3; -} -.scan-input-content-cell[data-property=exclude] { - grid-area: 2/3/2/3; -} -.scan-input-content-cell[data-property=types] { - grid-area: 3/3/3/3; -} -.scan-input-content-cell[data-property=options] { - grid-area: 4/3/4/3; -} -.scan-input-suffix-cell { - grid-area: 1/4/1/4; -} -.scan-input-index-cell { - grid-area: 1/1/5/1; -} -.scan-input-suffix-cell>button { - height: 100%; -} -.scan-input-input-cell-inner { - display: flex; -} -.scan-input-input-cell-inner button { - padding-left: 10px; - padding-right: 10px; -} -.scan-input-input-cell-inner button>span { - width: 20px; -} -.scan-input-suffix-cell>button { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} -.scan-input-input-cell-inner>.scan-input-type-list-container { - height: auto; - min-height: 34px; - border-bottom-right-radius: 4px; - padding-top: 5px; - padding-bottom: 5px; -} -.scan-input-toggle { - font-weight: normal; - margin: 0; -} -.scan-input-toggle>input[type=checkbox] { - margin: 0 0.375em 0 0; - padding: 0; - vertical-align: middle; -} -.scan-input-toggle>span { - vertical-align: middle; -} -.scan-input-type-list { - display: flex; - flex-flow: row wrap; - margin-left: -1em; -} -.scan-input-type { - margin-left: 1em; - white-space: nowrap; -} -.scan-input:not([data-show-advanced=true]) .scan-input-prefix-cell[data-property=options], -.scan-input:not([data-show-advanced=true]) .scan-input-content-cell[data-property=options] { - display: none; -} -.scan-input[data-show-advanced=true] .scan-input-content-cell[data-property=types] .scan-input-input-cell-inner>.scan-input-type-list-container { - border-bottom-right-radius: 0; -} - -.generic-input-list { - counter-reset: generic-input-id; -} -.generic-input-list .generic-input-prefix { - flex: 0 0 auto; - width: 39px; - text-align: center; -} -.generic-input-list .generic-input-prefix::after { - counter-increment: generic-input-id; - content: counter(generic-input-id); -} - -#custom-popup-css, -#custom-popup-outer-css, -#anki-card-templates-textarea { - width: 100%; - min-height: 34px; - line-height: 18px; - resize: vertical; - font-family: 'Courier New', Courier, monospace; - white-space: pre; - height: 240px; - border-bottom-left-radius: 0; -} -#anki-card-templates-reset-button { - border-top-left-radius: 0; - border-top-right-radius: 0; -} - -.btn-inner-middle { - vertical-align: middle; -} -.storage-button-inner { - pointer-events: none; -} -input[type=checkbox].storage-button-checkbox { - margin: 0 0.375em 0 0; - padding: 0; -} - -#settings-popup-preview-frame { - background-color: transparent; - border: none; - margin: 0; - padding: 0; - width: 100%; - height: 320px; -} - -.dictionary-delete-table { - display: table; - width: 100%; -} -.dictionary-delete-table>*:first-child { - display: table-cell; - vertical-align: middle; - padding-right: 1em; -} -.dictionary-delete-table>*:nth-child(n+2) { - display: table-cell; - width: 100%; - vertical-align: middle; -} -.dictionary-delete-table .progress { - margin: 0; -} -.dictionary-delete-table>*[hidden] { - display: none; -} - -#anki-error-message-details-toggle { - display: inline-block; - margin-left: 0.5em; - cursor: pointer; - font-weight: bold; -} - -#anki-error-message-details { - margin-top: 0.25em; - font-family: 'Courier New', Courier, monospace; - white-space: pre; - overflow-x: auto; -} - -[data-show-for-browser], -[data-show-for-operating-system] { - display: none; -} - -html:root[data-browser=edge] [data-show-for-browser~=edge], -html:root[data-browser=edge-legacy] [data-show-for-browser~=edge-legacy], -html:root[data-browser=chrome] [data-show-for-browser~=chrome], -html:root[data-browser=firefox] [data-show-for-browser~=firefox], -html:root[data-browser=firefox-mobile] [data-show-for-browser~=firefox-mobile], -html:root[data-operating-system=mac] [data-show-for-operating-system~=mac], -html:root[data-operating-system=win] [data-show-for-operating-system~=win], -html:root[data-operating-system=android] [data-show-for-operating-system~=android], -html:root[data-operating-system=cros] [data-show-for-operating-system~=cros], -html:root[data-operating-system=linux] [data-show-for-operating-system~=linux], -html:root[data-operating-system=openbsd] [data-show-for-operating-system~=openbsd] { - display: initial; -} - -html:root[data-browser=edge] [data-hide-for-browser~=edge], -html:root[data-browser=edge-legacy] [data-hide-for-browser~=edge-legacy], -html:root[data-browser=chrome] [data-hide-for-browser~=chrome], -html:root[data-browser=firefox] [data-hide-for-browser~=firefox], -html:root[data-browser=firefox-mobile] [data-hide-for-browser~=firefox-mobile], -html:root[data-operating-system=mac] [data-hide-for-operating-system~=mac], -html:root[data-operating-system=win] [data-hide-for-operating-system~=win], -html:root[data-operating-system=android] [data-hide-for-operating-system~=android], -html:root[data-operating-system=cros] [data-hide-for-operating-system~=cros], -html:root[data-operating-system=linux] [data-hide-for-operating-system~=linux], -html:root[data-operating-system=openbsd] [data-hide-for-operating-system~=openbsd] { - display: none; -} - -#dictionary-list { - display: flex; - flex-flow: column; -} - -.dictionary-details-container { - margin: 0.5em 0; -} - -.dictionary-details-toggle-link { - cursor: pointer; -} - -.dictionary-details { - margin-left: 1em; -} - -.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; -} - - -@media screen and (max-width: 740px) { - .col-xs-6 { - float: none; - width: 100%; - } - .col-xs-6+.col-xs-6 { - margin-top: 15px; - } -} - -@media screen and (max-width: 600px) { - .condition { - flex-wrap: wrap; - } - .profile-condition-input-container { - order: 2; - } - .profile-condition-line-break { - display: block; - order: 1; - } -} diff --git a/ext/bg/css/settings2.css b/ext/bg/css/settings2.css deleted file mode 100644 index 4f487d74..00000000 --- a/ext/bg/css/settings2.css +++ /dev/null @@ -1,2104 +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%; -} - - -/* 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); - } -} diff --git a/ext/bg/info.html b/ext/bg/info.html index 5e8b6e38..920f94a0 100644 --- a/ext/bg/info.html +++ b/ext/bg/info.html @@ -11,8 +11,8 @@ <link rel="icon" type="image/png" href="/images/icon48.png" sizes="48x48"> <link rel="icon" type="image/png" href="/images/icon64.png" sizes="64x64"> <link rel="icon" type="image/png" href="/images/icon128.png" sizes="128x128"> - <link rel="stylesheet" type="text/css" href="/mixed/css/material.css"> - <link rel="stylesheet" type="text/css" href="/bg/css/settings2.css"> + <link rel="stylesheet" type="text/css" href="/css/material.css"> + <link rel="stylesheet" type="text/css" href="/css/settings2.css"> </head> <body> diff --git a/ext/bg/legal.html b/ext/bg/legal.html index a8aca897..b8c1f1c5 100644 --- a/ext/bg/legal.html +++ b/ext/bg/legal.html @@ -11,8 +11,8 @@ <link rel="icon" type="image/png" href="/images/icon48.png" sizes="48x48"> <link rel="icon" type="image/png" href="/images/icon64.png" sizes="64x64"> <link rel="icon" type="image/png" href="/images/icon128.png" sizes="128x128"> - <link rel="stylesheet" type="text/css" href="/mixed/css/material.css"> - <link rel="stylesheet" type="text/css" href="/bg/css/settings2.css"> + <link rel="stylesheet" type="text/css" href="/css/material.css"> + <link rel="stylesheet" type="text/css" href="/css/settings2.css"> </head> <body> diff --git a/ext/bg/permissions.html b/ext/bg/permissions.html index fb900018..2ea9f2a1 100644 --- a/ext/bg/permissions.html +++ b/ext/bg/permissions.html @@ -11,8 +11,8 @@ <link rel="icon" type="image/png" href="/images/icon48.png" sizes="48x48"> <link rel="icon" type="image/png" href="/images/icon64.png" sizes="64x64"> <link rel="icon" type="image/png" href="/images/icon128.png" sizes="128x128"> - <link rel="stylesheet" type="text/css" href="/mixed/css/material.css"> - <link rel="stylesheet" type="text/css" href="/bg/css/settings2.css"> + <link rel="stylesheet" type="text/css" href="/css/material.css"> + <link rel="stylesheet" type="text/css" href="/css/settings2.css"> </head> <body> diff --git a/ext/bg/pitch-accents-preview.html b/ext/bg/pitch-accents-preview.html index 1232b353..b2885c92 100644 --- a/ext/bg/pitch-accents-preview.html +++ b/ext/bg/pitch-accents-preview.html @@ -11,8 +11,8 @@ <link rel="icon" type="image/png" href="/images/icon48.png" sizes="48x48"> <link rel="icon" type="image/png" href="/images/icon64.png" sizes="64x64"> <link rel="icon" type="image/png" href="/images/icon128.png" sizes="128x128"> - <link rel="stylesheet" type="text/css" href="/mixed/css/display.css"> - <link rel="stylesheet" type="text/css" href="/bg/css/pitch-accents-preview.css"> + <link rel="stylesheet" type="text/css" href="/css/display.css"> + <link rel="stylesheet" type="text/css" href="/css/pitch-accents-preview.css"> </head> <body> diff --git a/ext/bg/popup-preview.html b/ext/bg/popup-preview.html index ae10f611..5a8da859 100644 --- a/ext/bg/popup-preview.html +++ b/ext/bg/popup-preview.html @@ -11,8 +11,8 @@ <link rel="icon" type="image/png" href="/images/icon48.png" sizes="48x48"> <link rel="icon" type="image/png" href="/images/icon64.png" sizes="64x64"> <link rel="icon" type="image/png" href="/images/icon128.png" sizes="128x128"> - <link rel="stylesheet" type="text/css" href="/bg/css/popup-preview.css"> - <link rel="stylesheet" type="text/css" href="/mixed/css/popup-outer.css" id="popup-outer-css"> + <link rel="stylesheet" type="text/css" href="/css/popup-preview.css"> + <link rel="stylesheet" type="text/css" href="/css/popup-outer.css" id="popup-outer-css"> </head> <body> diff --git a/ext/bg/search.html b/ext/bg/search.html index 152b38e2..a949beff 100644 --- a/ext/bg/search.html +++ b/ext/bg/search.html @@ -11,9 +11,9 @@ <link rel="icon" type="image/png" href="/images/icon48.png" sizes="48x48"> <link rel="icon" type="image/png" href="/images/icon64.png" sizes="64x64"> <link rel="icon" type="image/png" href="/images/icon128.png" sizes="128x128"> - <link rel="stylesheet" type="text/css" href="/mixed/css/material.css"> - <link rel="stylesheet" type="text/css" href="/mixed/css/display.css"> - <link rel="stylesheet" type="text/css" href="/mixed/css/search.css"> + <link rel="stylesheet" type="text/css" href="/css/material.css"> + <link rel="stylesheet" type="text/css" href="/css/display.css"> + <link rel="stylesheet" type="text/css" href="/css/search.css"> </head> <body> diff --git a/ext/bg/settings.html b/ext/bg/settings.html index e4512e34..3e3f1961 100644 --- a/ext/bg/settings.html +++ b/ext/bg/settings.html @@ -13,7 +13,7 @@ <link rel="icon" type="image/png" href="/images/icon128.png" sizes="128x128"> <link rel="stylesheet" type="text/css" href="/mixed/lib/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="/mixed/lib/bootstrap/css/bootstrap-theme.min.css"> - <link rel="stylesheet" type="text/css" href="/bg/css/settings.css"> + <link rel="stylesheet" type="text/css" href="/css/settings.css"> </head> <body> <div class="container"> diff --git a/ext/bg/settings2.html b/ext/bg/settings2.html index b612e2b6..d0ba0b3c 100644 --- a/ext/bg/settings2.html +++ b/ext/bg/settings2.html @@ -11,8 +11,8 @@ <link rel="icon" type="image/png" href="/images/icon48.png" sizes="48x48"> <link rel="icon" type="image/png" href="/images/icon64.png" sizes="64x64"> <link rel="icon" type="image/png" href="/images/icon128.png" sizes="128x128"> - <link rel="stylesheet" type="text/css" href="/mixed/css/material.css"> - <link rel="stylesheet" type="text/css" href="/bg/css/settings2.css"> + <link rel="stylesheet" type="text/css" href="/css/material.css"> + <link rel="stylesheet" type="text/css" href="/css/settings2.css"> </head> <body> diff --git a/ext/bg/welcome.html b/ext/bg/welcome.html index c4b475d4..53c386fd 100644 --- a/ext/bg/welcome.html +++ b/ext/bg/welcome.html @@ -11,8 +11,8 @@ <link rel="icon" type="image/png" href="/images/icon48.png" sizes="48x48"> <link rel="icon" type="image/png" href="/images/icon64.png" sizes="64x64"> <link rel="icon" type="image/png" href="/images/icon128.png" sizes="128x128"> - <link rel="stylesheet" type="text/css" href="/mixed/css/material.css"> - <link rel="stylesheet" type="text/css" href="/bg/css/settings2.css"> + <link rel="stylesheet" type="text/css" href="/css/material.css"> + <link rel="stylesheet" type="text/css" href="/css/settings2.css"> </head> <body> |