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 @@ - - + + 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 @@ - - + + diff --git a/ext/css/context.css b/ext/css/context.css new file mode 100644 index 00000000..a77511ad --- /dev/null +++ b/ext/css/context.css @@ -0,0 +1,420 @@ +/* + * 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 . + */ + +: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/css/display.css b/ext/css/display.css new file mode 100644 index 00000000..bd381c6d --- /dev/null +++ b/ext/css/display.css @@ -0,0 +1,1798 @@ +/* + * Copyright (C) 2016-2021 Yomichan Authors + * + * This program is free software: you can redistribute it and/or modify + * it under the entrys 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 . + */ + +/* Variables */ +:root { + /* Layout */ + --font-size-no-units: 14; + --font-size: calc(1px * var(--font-size-no-units)); + --query-parser-font-size-no-units: 2; + --query-parser-font-size: calc(1em * var(--query-parser-font-size-no-units)); + --expression-font-size-no-units: 2; + --expression-font-size: calc(1em * var(--expression-font-size-no-units)); + --h2-font-size-no-units: 1.25; + --h2-font-size: calc(1em * var(--h2-font-size-no-units)); + + --line-height-no-units: 20; + --line-height: calc(var(--line-height-no-units) / var(--font-size-no-units)); + + --thin-border-size: calc(1em / var(--font-size-no-units)); + --expression-thin-border-size: calc(1em / (var(--expression-font-size-no-units) * var(--font-size-no-units))); + + --action-button-size-no-units: 16; + --action-button-size: calc(1em * (var(--action-button-size-no-units) / var(--font-size-no-units))); + --action-button-padding: 0.3em; + + --list-margin: 0.72em; + --main-content-size: 100%; + --main-content-vertical-padding: 0em; + --main-content-horizontal-padding: 0em; + --entry-horizontal-padding: 0.72em; + --entry-vertical-padding: 0.72em; + + --sidebar-width-no-units: 40; + --sidebar-width: calc(1em * (var(--sidebar-width-no-units) / var(--font-size-no-units))); + --sidebar-button-height-no-units: 30; + --sidebar-button-height: calc(1em * (var(--sidebar-button-height-no-units) / var(--font-size-no-units))); + --sidebar-button-icon-size-no-units: 16; + --sidebar-button-icon-size: calc(1em * (var(--sidebar-button-icon-size-no-units) / var(--font-size-no-units))); + + --progress-bar-height-no-units: 4; + --progress-bar-height: calc(1em * (var(--progress-bar-height-no-units) / var(--font-size-no-units))); + --progress-bar-active-transition-duration: 0.125s; + --progress-bar-active-transition-start-delay: 0.0625s; + --progress-bar-animation-duration: 2s; + + --entry-current-indicator-width-no-units: 4; + --entry-current-indicator-width: calc(1em * var(--entry-current-indicator-width-no-units) / var(--font-size-no-units)); + --entry-current-indicator-transition-duration: 0.125s; + + --expression-space-size: 0.5em; + + --tag-font-size-no-units: calc(11 / 14); + --tag-font-size: calc(1em * var(--tag-font-size-no-units)); + --tag-border-size-no-units: 0; + --tag-border-size: calc(1em * (var(--tag-border-size-no-units) / (var(--font-size-no-units) * var(--tag-font-size-no-units)))); + --tag-border-style: none; + --tag-font-weight: bold; + + --compact-list-separator: ' | '; + --list-padding1: 1.4em; + --list-padding2: var(--list-padding1); + + --entry-current-indicator-triangle-size-no-units: 6; + --entry-current-indicator-triangle-size: calc(1em * (var(--entry-current-indicator-triangle-size-no-units) / var(--font-size-no-units))); + + --overlay-panel-translate-distance: 4em; + + --animation-duration: 0.125s; + --animation-duration2: calc(2 * var(--animation-duration)); + + /* Colors */ + --background-color: #ffffff; + --glossary-image-background-color: #eeeeee; + --link-color: var(--accent-color); + + --text-color: #000000; + --kanji-text-color: var(--text-color); + --kanji-popular-text-color: var(--accent-color); + --kanji-rare-text-color: var(--text-color-light4); + --kanji-furigana-text-color: inherit; + --reason-text-color: var(--text-color-light3); + + --light-border-color: #eeeeee; + --medium-border-color: #dddddd; + --dark-border-color: #777777; + --kanji-border-color: var(--dark-border-color); + + --pitch-accent-annotation-color: #000000; + + --tag-text-color: #ffffff; + --tag-border-color: transparent; + --tag-default-background-color: #8a8a91; + --tag-name-background-color: #5cb85c; + --tag-expression-background-color: #f0ad4e; + --tag-popular-background-color: #0275d8; + --tag-frequent-background-color: #5bc0de; + --tag-archaism-background-color: #d9534f; + --tag-dictionary-background-color: #aa66cc; + --tag-frequency-background-color: #5cb85c; + --tag-part-of-speech-background-color: #565656; + --tag-search-background-color: #8a8a91; + --tag-pitch-accent-dictionary-background-color: #6640be; + + --sidebar-background-color: #f8f9fa; + + --sidebar-button-background-color: transparent; + --sidebar-button-background-color-hover: #cccccc; + --sidebar-button-background-color-active: #aaaaaa; + --sidebar-button-danger-background-color: transparent; + --sidebar-button-danger-background-color-hover: #dd2222; + --sidebar-button-danger-background-color-active: #bb2222; + --sidebar-button-icon-color: #333333; + --sidebar-button-disabled-icon-color: #888888; + --sidebar-button-danger-icon-color: #ffffff; + + --scrollbar-thumb-color: #c1c1c1; + --scrollbar-track-color: #f1f1f1; + --scrollbar-inverse-thumb-color: #444444; + --scrollbar-inverse-track-color: #2f2f2f; + + --progress-bar-track-color: #cccccc; + --progress-bar-indicator-color: var(--accent-color); + --entry-current-indicator-color: var(--accent-color); + + --notification-text-color: #ffffff; + --notification-background-color: #333333; + --notification-shadow-color: rgba(0, 0, 0, 0.5); + + --action-button-active-color: var(--scrollbar-thumb-color); +} +:root[data-theme=dark] { + /* Colors */ + --background-color: #1e1e1e; + --glossary-image-background-color: #2f2f2f; + --link-color: var(--accent-color); + + --text-color: #d4d4d4; + --kanji-text-color: var(--text-color); + --kanji-popular-text-color: var(--accent-color); + --kanji-rare-text-color: var(--text-color-light4); + --kanji-furigana-text-color: inherit; + --reason-text-color: var(--text-color-light3); + + --light-border-color: #2f2f2f; + --medium-border-color: #3f3f3f; + --dark-border-color: #888888; + --kanji-border-color: var(--dark-border-color); + + --pitch-accent-annotation-color: #ffffff; + + --tag-text-color: #f1f1f1; + --tag-border-color: transparent; + --tag-default-background-color: #69696e; + --tag-name-background-color: #489148; + --tag-expression-background-color: #b07f39; + --tag-popular-background-color: #025caa; + --tag-frequent-background-color: #4490a7; + --tag-archaism-background-color: #b04340; + --tag-dictionary-background-color: #9057ad; + --tag-frequency-background-color: #489148; + --tag-part-of-speech-background-color: #565656; + --tag-search-background-color: #69696e; + --tag-pitch-accent-dictionary-background-color: #6640be; + + --sidebar-background-color: #282828; + + --sidebar-button-background-color: transparent; + --sidebar-button-background-color-hover: #3a3a3a; + --sidebar-button-background-color-active: #5a5a5a; + --sidebar-button-danger-background-color: transparent; + --sidebar-button-danger-background-color-hover: #dd2222; + --sidebar-button-danger-background-color-active: #bb2222; + --sidebar-button-icon-color: #cccccc; + --sidebar-button-disabled-icon-color: #777777; + --sidebar-button-danger-icon-color: #ffffff; + + --scrollbar-thumb-color: #444444; + --scrollbar-track-color: #2f2f2f; + --scrollbar-inverse-thumb-color: #c1c1c1; + --scrollbar-inverse-track-color: #f1f1f1; + + --progress-bar-track-color: #3a3a3a; + --progress-bar-indicator-color: var(--accent-color); + --entry-current-indicator-color: var(--accent-color); + + --notification-text-color: #2f2f2f; + --notification-background-color: #e1e1e1; + --notification-shadow-color: rgba(255, 255, 255, 0.25); + + --action-button-active-color: var(--scrollbar-thumb-color); +} + + +/* Fonts */ +@font-face { + font-family: kanji-stroke-orders; + src: url('/data/fonts/kanji-stroke-orders.ttf'); +} + + +/* General */ +:root[data-page-type=popup]:not([data-theme]), +:root[data-page-type=popup]:not([data-theme]) body { + background-color: transparent; +} +:root { + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-size: var(--font-size); + line-height: var(--line-height); + height: 100%; +} +body { + margin: 0; + border: 0; + padding: 0; + height: 100%; + overflow: hidden; + background-color: var(--background-color); + color: var(--text-color); + font-size: inherit; +} +ol, ul { + margin-top: 0; + margin-bottom: var(--list-padding); +} +h2 { + font-size: var(--h2-font-size); + font-weight: normal; + margin: 0.25em 0 0; + border-bottom: calc(1em / (var(--font-size-no-units) * var(--h2-font-size-no-units))) solid var(--light-border-color); +} +h3 { + font-size: 1em; + font-weight: bold; + margin: 0.25em 0 0.375em; + padding: 0; +} +h5 { + font-size: calc(12em / 14); + margin: 0; + padding: 0; + font-weight: normal; +} +a { + color: var(--link-color); + text-decoration: underline; + cursor: pointer; +} + + +/* Selection */ +#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; +} + + +/* Scrollbars */ +:root:not([data-theme=default]) .scrollbar { + scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color); +} +:root:not([data-theme=default]) .scrollbar::-webkit-scrollbar { + width: auto; +} +:root:not([data-theme=default]) .scrollbar::-webkit-scrollbar-button { + height: 0; +} +:root:not([data-theme=default]) .scrollbar::-webkit-scrollbar-thumb { + background-color: var(--scrollbar-thumb-color); +} +:root:not([data-theme=default]) .scrollbar::-webkit-scrollbar-track { + background-color: var(--scrollbar-thumb-color); +} +:root:not([data-theme=default]) .scrollbar::-webkit-scrollbar-track-piece { + background-color: var(--scrollbar-track-color); +} +:root:not([data-theme=default]) .scrollbar::-webkit-scrollbar-corner { + background-color: var(--scrollbar-track-color); +} +:root .scrollbar-inverse { + scrollbar-color: var(--scrollbar-inverse-humb-color) var(--scrollbar-inverse-track-color); +} +:root .scrollbar-inverse::-webkit-scrollbar { + width: auto; +} +:root .scrollbar-inverse::-webkit-scrollbar-button { + height: 0; +} +:root .scrollbar-inverse::-webkit-scrollbar-thumb { + background-color: var(--scrollbar-inverse-thumb-color); +} +:root .scrollbar-inverse::-webkit-scrollbar-track { + background-color: var(--scrollbar-inverse-thumb-color); +} +:root .scrollbar-inverse::-webkit-scrollbar-track-piece { + background-color: var(--scrollbar-inverse-track-color); +} +:root .scrollbar-inverse::-webkit-scrollbar-corner { + background-color: var(--scrollbar-inverse-track-color); +} +.scrollbar-spacer { + display: inline-block; + overflow-x: hidden; + overflow-y: scroll; + visibility: hidden; + flex: 0 1 auto; +} + + +/* Main layout */ +.content { + flex: 1 1 auto; + position: relative; +} +.content-scroll { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + display: flex; + flex-flow: column nowrap; + overflow-x: hidden; + overflow-y: scroll; + align-items: stretch; + justify-content: flex-start; +} +.content-body { + flex: 1 1 auto; + position: relative; +} +.content-body-inner { + width: var(--main-content-size); + max-width: 100%; + box-sizing: border-box; + margin: 0 auto; + padding: var(--main-content-vertical-padding) var(--main-content-horizontal-padding); +} +.content-footer-container1 { + display: flex; + flex-flow: row nowrap; + position: absolute; + left: 0; + right: 0; + bottom: 0; + max-height: 100%; + pointer-events: none; + z-index: 5; +} +.content-footer-container2 { + display: flex; + flex-flow: row nowrap; + justify-content: center; + flex: 1 1 auto; + max-width: 100%; +} +.content-footer { + width: var(--main-content-size); + max-width: 100%; +} + + +/* Sidebar layout */ +.content-outer { + width: 100%; + height: 100%; + display: flex; + flex-flow: row nowrap; + overflow: hidden; + align-items: stretch; + align-content: stretch; + justify-content: center; +} +.content-sidebar { + flex: 0 0 auto; + height: 100%; + overflow-x: hidden; + overflow-y: auto; + background-color: var(--sidebar-background-color); + z-index: 10; + position: relative; + display: none; +} +:root[data-has-navigation-previous=true] .content-sidebar, +:root[data-has-navigation-next=true] .content-sidebar, +:root[data-popup-action-bar-visibility=always] .content-sidebar, +:root[data-profile-panel-visible=true] .content-sidebar { + display: block; +} +.content-sidebar-inner { + display: flex; + flex-flow: column nowrap; + width: var(--sidebar-width); + height: 100%; +} +.content-sidebar-top-pre { + flex: 0 0 auto; + display: flex; + flex-flow: column nowrap; +} +.content-sidebar-top { + flex: 1 1 auto; + display: flex; + flex-flow: column nowrap; +} +.content-sidebar-bottom { + position: sticky; + bottom: 0; + background-color: var(--sidebar-background-color); + display: flex; + flex-flow: column nowrap; +} +:root[data-popup-action-bar-location=top] .content-outer, +:root[data-popup-action-bar-location=bottom] .content-outer { + flex-flow: column nowrap; +} +:root[data-popup-action-bar-location=top] .content-sidebar, +:root[data-popup-action-bar-location=bottom] .content-sidebar { + height: auto; + width: 100%; +} +:root[data-popup-action-bar-location=left] .content-sidebar, +:root[data-popup-action-bar-location=top] .content-sidebar { + order: -1; +} +:root[data-popup-action-bar-location=top] .content-sidebar-inner, +:root[data-popup-action-bar-location=bottom] .content-sidebar-inner { + flex-flow: row nowrap; + width: auto; + height: var(--sidebar-button-height); +} +:root[data-popup-action-bar-location=top] .content-sidebar-top-pre, +:root[data-popup-action-bar-location=bottom] .content-sidebar-top-pre { + flex-flow: row nowrap; + order: 1; +} +:root[data-popup-action-bar-location=top] .content-sidebar-top, +:root[data-popup-action-bar-location=bottom] .content-sidebar-top { + flex-flow: row nowrap; +} +:root[data-popup-action-bar-location=top] .content-sidebar-bottom, +:root[data-popup-action-bar-location=bottom] .content-sidebar-bottom { + flex-flow: row nowrap; +} + + +/* Sidebar buttons */ +button.sidebar-button { + width: 100%; + height: var(--sidebar-button-height); + background-color: var(--sidebar-button-background-color); + margin: 0; + padding: 0; + border: 0; + cursor: pointer; + display: block; + transition: background-color 0.125s ease-in-out; + outline: none; + font-size: inherit; + border-radius: 0; + box-shadow: none; +} +:root[data-popup-action-bar-location=top] button.sidebar-button, +:root[data-popup-action-bar-location=bottom] button.sidebar-button { + width: var(--sidebar-width); + height: 100%; +} +button.sidebar-button:disabled { + cursor: default; +} +button.sidebar-button:hover, +button.sidebar-button:active, +button.sidebar-button:focus { + box-shadow: none; +} +button.sidebar-button:hover:not(:disabled), +button.sidebar-button:focus:not(:disabled) { + background-color: var(--sidebar-button-background-color-hover); +} +button.sidebar-button:active:not(:disabled) { + background-color: var(--sidebar-button-background-color-active); +} +button.sidebar-button.danger { + background-color: var(--sidebar-button-danger-background-color); +} +button.sidebar-button.danger:hover:not(:disabled), +button.sidebar-button.danger:focus:not(:disabled) { + background-color: var(--sidebar-button-danger-background-color-hover); +} +button.sidebar-button.danger:active:not(:disabled) { + background-color: var(--sidebar-button-danger-background-color-active); +} +.sidebar-button-icon { + --icon-size: var(--sidebar-button-icon-size) var(--sidebar-button-icon-size); + + display: block; + width: 100%; + height: 100%; + background-color: var(--sidebar-button-icon-color); + transition: background-color 0.125s ease-in-out; +} +button.sidebar-button:disabled .sidebar-button-icon { + background-color: var(--sidebar-button-disabled-icon-color); +} +button.sidebar-button.danger:hover .sidebar-button-icon, +button.sidebar-button.danger:focus .sidebar-button-icon { + background-color: var(--sidebar-button-danger-icon-color); +} +button.sidebar-button.sidebar-button-highlight>.sidebar-button-icon { + background-color: var(--accent-color); +} + + +/* Search page */ +#query-parser-container { + padding-left: var(--entry-horizontal-padding); + padding-right: var(--entry-horizontal-padding); + padding-bottom: 0.25em; + border-bottom: var(--expression-thin-border-size) solid var(--light-border-color); +} +#query-parser-content { + margin-top: 0.5em; + font-size: var(--query-parser-font-size); + white-space: pre-wrap; +} +#query-parser-content[data-term-spacing=true] .query-parser-term { + margin-right: 0.2em; +} + + +/* Action buttons */ +.actions { + display: flex; + flex-flow: row nowrap; + float: right; + margin: -0.25em; + position: relative; + z-index: 1; +} +.actions::after { + clear: both; + content: ''; + display: block; +} +button.action-button { + cursor: pointer; + display: block; + opacity: 1; + border: 0; + margin: 0; + padding: var(--action-button-padding); + background: transparent; + font-size: inherit; + box-shadow: none; + position: relative; + transition: + opacity var(--animation-duration) linear, + visibility 0s linear 0s, + filter var(--animation-duration) linear, + -webkit-filter var(--animation-duration) linear, + background-color var(--animation-duration) linear; +} +button.action-button[hidden] { + display: block; + visibility: hidden; + opacity: 0; + transition: + opacity var(--animation-duration) linear, + visibility 0s linear var(--animation-duration), + filter var(--animation-duration) linear, + -webkit-filter var(--animation-duration) linear, + background-color var(--animation-duration) linear; +} +button.action-button:disabled { + pointer-events: none; + cursor: default; + -webkit-filter: grayscale(100%); + filter: grayscale(100%); + background-color: transparent; +} +button.action-button:disabled:not([hidden]) { + opacity: 0.25; +} +button.action-button:hover, +button.action-button:focus { + background-color: transparent; + box-shadow: none; +} +button.action-button:active { + background-color: var(--action-button-active-color); + box-shadow: none; +} +button.action-button::before { + content: ''; + width: var(--action-button-size); + height: var(--action-button-size); + display: block; + background-color: transparent; + background-repeat: no-repeat; + background-size: contain; +} +button.action-button[data-icon=view-note]::before { + background-image: url('/images/view-note.svg'); +} +button.action-button[data-icon=add-term-kanji]::before { + background-image: url('/images/add-term-kanji.svg'); +} +button.action-button[data-icon=add-term-kana]::before { + background-image: url('/images/add-term-kana.svg'); +} +button.action-button[data-icon=play-audio]::before { + background-image: url('/images/play-audio.svg'); +} +button.action-button[data-icon=source-term]::before { + background-image: url('/images/source-term.svg'); +} +.entry[data-type=term][data-expression-multi=true] .actions>button.action-button.action-play-audio { + display: none; +} +.action-button-badge { + pointer-events: none; + position: absolute; + display: block; + right: 0; + top: 0; + width: calc(8em / var(--font-size-no-units)); + height: calc(8em / var(--font-size-no-units)); +} +.action-button-badge[data-icon=cross] { + background-color: var(--danger-color); +} +.action-button-badge[data-icon=plus-thick] { + background-color: var(--success-color); +} + + +/* Tags */ +.tag { + display: inline-block; + padding: 0.2em 0.6em 0.3em; + font-size: var(--tag-font-size); + font-weight: var(--tag-font-weight); + line-height: 1.25; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: 0.25em; + color: var(--tag-text-color); + background-color: var(--tag-default-background-color); + border: var(--tag-border-size) var(--tag-border-style) var(--tag-border-color); + margin-right: 0.375em; + cursor: pointer; +} +.tag[data-category=name] { + background-color: var(--tag-name-background-color); +} +.tag[data-category=expression] { + background-color: var(--tag-expression-background-color); +} +.tag[data-category=popular] { + background-color: var(--tag-popular-background-color); +} +.tag[data-category=frequent] { + background-color: var(--tag-frequent-background-color); +} +.tag[data-category=archaism] { + background-color: var(--tag-archaism-background-color); +} +.tag[data-category=dictionary] { + background-color: var(--tag-dictionary-background-color); +} +.tag[data-category=frequency] { + background-color: var(--tag-frequency-background-color); +} +.tag[data-category=partOfSpeech] { + background-color: var(--tag-part-of-speech-background-color); +} +.tag[data-category=search] { + background-color: var(--tag-search-background-color); +} +.tag[data-category=pitch-accent-dictionary] { + background-color: var(--tag-pitch-accent-dictionary-background-color); +} +.tag-inner { + display: block; +} +.tag-details-disambiguation-list::before { + content: 'Only: '; +} +.tag-details-disambiguation-list ruby>rt { + display: inline; + font-size: 1em; +} +.tag-details-disambiguation-list ruby>rt::before { + content: '('; +} +.tag-details-disambiguation-list ruby>rt::after { + content: ')'; +} +.tag-details-disambiguation-list[data-unmatched-expression-count='0'], +.tag-details-disambiguation-list:not([data-unmatched-expression-count]) { + display: none; +} +.tag-details-disambiguation:not(:last-child)::after { + content: ', '; +} + + +/* Entries */ +.entry { + padding: var(--entry-vertical-padding) var(--entry-horizontal-padding); + position: relative; +} +.kanji-link { + border-bottom: var(--expression-thin-border-size) dashed var(--kanji-border-color); + color: var(--kanji-text-color); + text-decoration: none; + cursor: pointer; +} +.term-expression-text-container { + display: inline-block; +} +.term-expression-text { + color: var(--kanji-text-color); + font-size: var(--expression-font-size); + display: inline-block; + position: relative; +} +.entry[data-expression-multi=true] .term-expression[data-frequency=popular] .term-expression-text, +.entry[data-expression-multi=true] .term-expression[data-frequency=popular] .kanji-link { + color: var(--kanji-popular-text-color); +} +.entry[data-expression-multi=true] .term-expression[data-frequency=rare] .term-expression-text, +.entry[data-expression-multi=true] .term-expression[data-frequency=rare] .kanji-link { + color: var(--kanji-rare-text-color); +} +.term-expression-text>ruby>rt { + color: var(--kanji-furigana-text-color); +} +.entry-header2, +.entry-header3 { + display: inline; +} +.entry+.entry { + border-top: var(--thin-border-size) solid var(--light-border-color); +} +.term-reasons { + display: inline-block; + color: var(--reason-text-color); +} +.term-reasons:empty { + display: none; +} +.term-reasons>.term-reason+.term-reason-separator+.term-reason::before { + content: ' \00AB '; /* The two spaces is not a typo */ + white-space: pre-wrap; + display: inline; +} +.term-expression-list { + display: inline; +} +.term-expression { + display: inline-block; +} +.term-expression-details { + display: inline; +} +.term-expression-details>.tags { + display: none; +} +.term-expression-details>.frequencies { + display: none; +} +.term-expression-list>.term-expression:not(:last-of-type)>.term-expression-text-container>.term-expression-text::after { + content: '\3001'; +} +.term-details { + display: inline; +} +.term-tags { + display: inline; +} +.entry[data-expression-multi=true] .term-details { + display: block; +} + + +/* Entry indicator */ +.entry-current-indicator { + display: block; + position: absolute; + left: calc(-1 * var(--main-content-horizontal-padding)); + top: 0; + bottom: 0; + width: 0; + background-color: var(--entry-current-indicator-color); + visibility: hidden; + transition: + width var(--entry-current-indicator-transition-duration) linear, + visibility 0s linear var(--entry-current-indicator-transition-duration); +} +.entry.entry-current .entry-current-indicator { + width: var(--entry-current-indicator-width); + visibility: visible; + transition: + width var(--entry-current-indicator-transition-duration) linear, + visibility 0s linear 0s; +} +:root[data-popup-current-indicator-mode=bar-right] .entry-current-indicator, +:root[data-popup-current-indicator-mode=dot-right] .entry-current-indicator { + left: auto; + right: 0; +} +.entry-current-indicator-inner { + display: none; + pointer-events: auto; + width: 100%; + height: 0; + top: 0; + background-color: var(--entry-current-indicator-color); + transition: none; +} +.entry.entry-current .entry-current-indicator-inner { + height: var(--entry-current-indicator-width); + transition: height var(--entry-current-indicator-transition-duration) linear; +} +:root[data-popup-current-indicator-mode=dot-left] .entry-current-indicator, +:root[data-popup-current-indicator-mode=dot-right] .entry-current-indicator { + background-color: transparent; +} +:root[data-popup-current-indicator-mode=dot-left] .entry-current-indicator-inner, +:root[data-popup-current-indicator-mode=dot-right] .entry-current-indicator-inner { + display: block; + position: sticky; + transition: height var(--entry-current-indicator-transition-duration) linear; +} +:root[data-popup-current-indicator-mode=none] .entry-current-indicator, +:root[data-popup-current-indicator-mode=asterisk] .entry-current-indicator, +:root[data-popup-current-indicator-mode=triangle] .entry-current-indicator { + display: none; + transition: none; +} + + +/* Triangle entry indicator */ +.term-expression-current-indicator { + pointer-events: none; + position: absolute; + left: calc(-1 * var(--main-content-horizontal-padding)); + top: 0; + bottom: 0; + opacity: 0; + visibility: hidden; + transition: + opacity var(--entry-current-indicator-transition-duration) linear, + visibility 0s linear var(--entry-current-indicator-transition-duration); +} +.term-expression-text .term-expression-current-indicator { + font-size: calc(1em / var(--expression-font-size-no-units)); +} +.entry.entry-current .term-expression-current-indicator { + opacity: 1; + visibility: visible; + transition: + opacity var(--entry-current-indicator-transition-duration) linear, + visibility 0s linear 0s; +} +.term-expression-current-indicator::after { + content: ''; + display: block; + position: absolute; + width: var(--entry-current-indicator-triangle-size); + height: calc(2 * var(--entry-current-indicator-triangle-size)); + left: calc(-1 * var(--entry-horizontal-padding)); + top: calc(50% - var(--entry-current-indicator-triangle-size)); + background-color: var(--entry-current-indicator-color); + mask-repeat: no-repeat; + mask-position: center center; + mask-mode: alpha; + mask-size: contain; + mask-image: url(/images/material-right-arrow.svg); + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center center; + -webkit-mask-mode: alpha; + -webkit-mask-size: contain; + -webkit-mask-image: url(/images/material-right-arrow.svg); +} +.term-expression:not(:first-of-type) .term-expression-current-indicator, +:root:not([data-popup-current-indicator-mode=triangle]) .term-expression-current-indicator { + display: none; + transition: none; +} + + +/* Old entry indicator */ +.entry-current-indicator-icon { + display: block; + padding: var(--action-button-padding); +} +.entry-current-indicator-icon[hidden], +.entry:not(.entry-current) .entry-current-indicator-icon, +:root:not([data-popup-current-indicator-mode=asterisk]) .entry-current-indicator-icon { + display: none; +} +.entry-current-indicator-icon::before { + content: ''; + width: var(--action-button-size); + height: var(--action-button-size); + display: block; + background-color: transparent; + background-repeat: no-repeat; + background-size: contain; + background-image: url('/images/entry-current.svg'); +} + + +/* Merged term styles */ +.entry[data-expression-multi=true] .term-expression-list, +.entry:not([data-expression-multi=true]) .term-expression-text-container { + margin-right: var(--expression-space-size); +} +.entry[data-expression-multi=true] .term-expression-list .term-expression-details { + display: inline-block; + position: relative; + width: 0; + height: 0; + visibility: hidden; + z-index: 1; +} +.entry[data-expression-multi=true] .term-expression-list>.term-expression:not(:last-of-type) .term-expression-details { + left: calc(-1 * var(--expression-font-size)); +} +.entry[data-expression-multi=true] .term-expression:hover .term-expression-details { + visibility: visible; +} +.entry[data-expression-multi=true] .term-expression-list .term-expression-details>.action-play-audio { + position: absolute; + left: 0; + bottom: 0.5em; +} +.entry:not([data-expression-multi=true]) .term-expression-list .term-expression-details>.action-play-audio { + display: none; +} +.entry[data-expression-multi=true] .term-expression-list .term-expression-details>.tags { + display: block; + position: absolute; + left: 0; + bottom: -0.5em; + white-space: nowrap; +} + + +/* Definitions */ +.term-definition-list { + margin: 0; + padding: 0 0 0 var(--list-padding1); + list-style-type: decimal; +} +.term-definition-list[data-count='0'], +.term-definition-list[data-count='1'] { + padding-left: 0; + list-style-type: none; +} +.term-glossary-list { + margin: 0; + padding: 0 0 0 var(--list-padding2); + list-style-type: circle; +} +.term-glossary-list[data-count='0'], +.term-glossary-list[data-count='1'] { + padding-left: 0; + list-style-type: none; +} +.term-definition-item::marker, +.term-glossary-item::marker { + color: var(--text-color-light3); +} +.term-glossary { + white-space: pre-line; +} +.term-definition-disambiguation-list { + color: var(--text-color-light3); +} +.term-definition-disambiguation-list[data-count='0'] { + display: none; +} +.term-definition-disambiguation-list::before { + content: '('; +} +.term-definition-disambiguation-list::after { + content: ' only) '; +} +.term-definition-disambiguation+.term-definition-disambiguation::before { + content: ', '; +} +.term-glossary-separator, +.term-reason-separator { + display: inline; + font-size: 0; + opacity: 0; + white-space: pre-wrap; +} +.entry-body { + margin-top: -0.5em; +} +.entry-body-section { + margin-top: 0.5em; +} +.entry[data-definition-count='0'] .entry-body-section[data-section-type=definitions], +.entry[data-frequency-count='0'] .entry-body-section[data-section-type=frequencies], +.entry[data-pitch-accent-count='0'] .entry-body-section[data-section-type=pitch-accents] { + display: none; +} +.entry[data-pitch-accent-count='0'][data-frequency-count='0'] .entry-body-section[data-section-type=definitions]>h5 { + display: none; +} + + +/* Frequencies */ +.frequency-group-list { + margin: 0; + padding: 0 0 0 var(--list-padding1); + list-style-type: decimal; +} +.frequency-group-list[data-count='0'], +.frequency-group-list[data-count='1'] { + padding-left: 0; + list-style-type: none; +} +.frequency-list { + margin: 0; + padding: 0 0 0 var(--list-padding2); + list-style-type: circle; +} +.frequency-list[data-count='0'], +.frequency-list[data-count='1'] { + padding-left: 0; + list-style-type: none; +} +.frequency-group-item::marker, +.frequency-item::marker { + color: var(--text-color-light3); +} +.frequency-disambiguation { + color: var(--text-color-light3); +} +.frequency-separator::before { + content: ''; +} +.frequency-disambiguation-separator::before { + content: ':'; +} +.frequency-disambiguation::before { + content: '('; +} +.frequency-disambiguation::after { + content: ' only) '; +} +.frequency-disambiguation-reading { + display: inline; + font-size: 1em; +} +.entry[data-unique-expression-count='1'] .frequency-item[data-has-reading=false] .frequency-disambiguation, +.entry[data-unique-reading-count='1'][data-unique-expression-count='1'] .frequency-disambiguation, +.frequency-item[data-reading-is-same=true] .frequency-disambiguation-separator, +.frequency-item[data-reading-is-same=true] .frequency-disambiguation-reading, +.frequency-item[data-has-reading=false] .frequency-disambiguation-separator, +.frequency-item[data-has-reading=false] .frequency-disambiguation-reading, +.entry[data-unique-expression-count='1'] .frequency-disambiguation-separator, +.entry[data-unique-expression-count='1'] .frequency-disambiguation-expression, +.entry[data-unique-reading-count='1'] .frequency-disambiguation-separator, +.entry[data-unique-reading-count='1'] .frequency-disambiguation-reading { + display: none; +} +:root[data-glossary-layout-mode=compact] .frequency-group-list, +:root[data-glossary-layout-mode=compact] .frequency-list, +.frequency-list[data-count='1'] { + display: inline; + list-style: none; + padding-left: 0; +} +:root[data-glossary-layout-mode=compact] .frequency-group-item { + display: inline-block; + margin-right: 1em; +} +:root[data-glossary-layout-mode=compact] .entry-body-section[data-section-type=frequencies] { + margin-right: -1em; +} +:root[data-glossary-layout-mode=compact] .frequency-item, +.frequency-list[data-count='1'] .frequency-item { + display: inline-block; +} +:root[data-glossary-layout-mode=compact] .frequency-item:not(:first-child)::before, +.frequency-list[data-count='1'] .frequency-item:not(:first-child)::before { + white-space: pre-wrap; + content: var(--compact-list-separator); + display: inline; + color: var(--text-color-light3); +} +:root[data-glossary-layout-mode=compact] .frequency-tag-list, +.frequency-group-item[data-count='1'] .frequency-tag-list { + display: inline; +} + + +/* Pitch accent styles */ +.term-pitch-accent-group-list { + margin: 0; + padding: 0 0 0 var(--list-padding1); + list-style-type: decimal; +} +.term-pitch-accent-group-list[data-count='0'], +.term-pitch-accent-group-list[data-count='1'] { + padding-left: 0; + list-style-type: none; +} +.term-pitch-accent-list { + margin: 0; + padding: 0 0 0 var(--list-padding2); + list-style-type: circle; + display: block; +} +.term-pitch-accent-list[data-count='0'], +.term-pitch-accent-list[data-count='1'] { + padding-left: 0; + list-style-type: none; + display: inline; +} +.term-pitch-accent-group::marker, +.term-pitch-accent::marker { + color: var(--text-color-light3); +} +.term-pitch-accent { + display: list-item; + line-height: 1.5; +} +.term-pitch-accent-list[data-count='0'] .term-pitch-accent, +.term-pitch-accent-list[data-count='1'] .term-pitch-accent { + display: inline; +} +.term-pitch-accent-group-tag-list { + margin-right: 0.375em; +} +.term-pitch-accent-disambiguation-list { + padding-right: 0.25em; + color: var(--text-color-light3); +} +.term-pitch-accent-disambiguation-list::before { + content: '('; +} +.term-pitch-accent-disambiguation-list::after { + content: ' only)'; +} +.term-pitch-accent-disambiguation+.term-pitch-accent-disambiguation::before { + content: ', '; +} +.term-pitch-accent-disambiguation-list[data-count='0'] { + display: none; +} +.term-pitch-accent-tag-list:not([data-count='0']) { + margin-right: 0.375em; +} +.term-pitch-accent-character { + display: inline-block; + position: relative; +} +.term-pitch-accent-character::before { + border-color: var(--pitch-accent-annotation-color); +} +.term-pitch-accent-character[data-pitch='high']::before { + content: ''; + display: block; + user-select: none; + pointer-events: none; + position: absolute; + top: 0.1em; + left: 0; + right: 0; + height: 0; + border-top-width: 0.1em; + border-top-style: solid; +} +.term-pitch-accent-character[data-pitch='high'][data-pitch-next='low']::before { + right: -0.1em; + height: 0.4em; + border-right-width: 0.1em; + border-right-style: solid; +} +.term-pitch-accent-character[data-pitch='high'][data-pitch-next='low'] { + padding-right: 0.1em; + margin-right: 0.1em; +} +.term-pitch-accent-position::before { + content: ' ['; +} +.term-pitch-accent-position::after { + content: ']'; +} +.term-pitch-accent-details { + display: inline-block; + height: 0; + padding: 0 0.25em; + vertical-align: middle; +} + + +/* Pitch accent graph styles */ +.term-pitch-accent-graph { + display: block; + height: 1.5em; + transform: translateY(-0.875em); +} +.term-pitch-accent-graph-line, +.term-pitch-accent-graph-line-tail { + fill: none; + stroke: var(--pitch-accent-annotation-color); + stroke-width: 5; +} +.term-pitch-accent-graph-line-tail { + stroke-dasharray: 5 5; +} +#term-pitch-accent-graph-dot { + fill: var(--pitch-accent-annotation-color); + stroke: var(--pitch-accent-annotation-color); + stroke-width: 5; +} +#term-pitch-accent-graph-dot-downstep { + fill: none; + stroke: var(--pitch-accent-annotation-color); + stroke-width: 5; +} +#term-pitch-accent-graph-dot-downstep>circle:last-of-type { + fill: var(--pitch-accent-annotation-color); +} +#term-pitch-accent-graph-triangle { + fill: none; + stroke: var(--pitch-accent-annotation-color); + stroke-width: 5; +} + + +/* Glossary images */ +.term-glossary-image-container { + display: inline-block; + white-space: nowrap; + max-width: 100%; + position: relative; + vertical-align: top; + line-height: 0; + font-size: calc(1em / var(--font-size-no-units)); + overflow: hidden; + background-color: var(--glossary-image-background-color); +} +.term-glossary-image-link { + cursor: inherit; + color: inherit; +} +.term-glossary-image-link[href]:hover { + cursor: pointer; +} +.term-glossary-image-container-overlay { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + font-size: calc(1em * var(--font-size-no-units)); + line-height: var(--line-height); + display: table; + table-layout: fixed; + white-space: normal; + color: var(--text-color-light3); +} +.term-glossary-item[data-has-image=true][data-image-load-state=load-error] .term-glossary-image-container-overlay::after { + content: 'Image failed to load'; + display: table-cell; + width: 100%; + height: 100%; + vertical-align: middle; + text-align: center; + padding: 0.25em; +} +.term-glossary-image { + display: inline-block; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + vertical-align: top; + object-fit: contain; + border: none; + outline: none; +} +.term-glossary-image:not([src]) { + display: none; +} +.term-glossary-image[data-pixelated=true] { + image-rendering: auto; + image-rendering: -moz-crisp-edges; + image-rendering: -webkit-optimize-contrast; + image-rendering: pixelated; + image-rendering: crisp-edges; +} +.term-glossary-image-aspect-ratio-sizer { + content: ''; + display: inline-block; + width: 0; + vertical-align: top; + font-size: 0; +} +.term-glossary-image-link-text::before { + content: '['; +} +.term-glossary-image-link-text::after { + content: ']'; +} +.term-glossary-image-description { + white-space: pre-line; +} + + +/* Kanji */ +.kanji-glyph-container { + display: block; + position: relative; +} +.kanji-glyph { + font-family: kanji-stroke-orders, sans-serif; + font-size: 8.5em; + line-height: 1; + padding: 0.01em; + vertical-align: top; + position: relative; + z-index: -1; +} +.kanji-glyph-data { + margin-top: 0.75em; + border-spacing: 0; + border-collapse: collapse; +} +.kanji-glyph-data>tbody>tr>* { + border-top: var(--thin-border-size) solid var(--medium-border-color); + text-align: left; + vertical-align: top; + padding: 0.36em; + margin: 0; +} +.kanji-info-table { + width: 100%; +} +.kanji-info-table>tbody>tr>th, +.kanji-info-table>tbody>tr>td { + text-align: left; + vertical-align: top; + padding: 0; + margin: 0; +} +.kanji-info-table>tbody>tr>td { + text-align: right; +} +.kanji-glyph-data dl { + margin-top: 0; + margin-bottom: 1.4em; +} +.kanji-glyph-data dd { + margin-left: 0; +} +.kanji-glossary-list { + margin: 0; + padding: 0 0 0 var(--list-padding1); + list-style-type: decimal; +} +.kanji-glossary-list[data-count='0'], +.kanji-glossary-list[data-count='1'] { + padding-left: 0; + list-style-type: none; +} +.kanji-glossary-item::marker { + color: var(--text-color-light3); +} +.kanji-glossary { + white-space: pre-line; +} + + +/* Progress bar */ +@keyframes progress-bar-indeterminant1a { + 0% { left: 0; } + 25% { left: 0; } + 75% { left: 100%; } + 100% { left: 100%; } +} +@keyframes progress-bar-indeterminant1b { + 0% { right: 100%; } + 50% { right: 0; } + 100% { right: 0; } +} +@keyframes progress-bar-indeterminant2a { + 0% { left: 0; } + 25% { left: 0; } + 100% { left: 100%; } +} +@keyframes progress-bar-indeterminant2b { + 0% { right: 100%; } + 75% { right: 0; } + 100% { right: 0; } +} +.progress-bar-indeterminant { + display: block; + width: 100%; + height: 0; + background-color: var(--progress-bar-indicator-color); + position: relative; + transition: + height var(--progress-bar-active-transition-duration) linear var(--progress-bar-active-transition-duration), + background-color var(--progress-bar-active-transition-duration) linear; +} +.progress-bar-indeterminant[data-active=true] { + height: var(--progress-bar-height); + background-color: var(--progress-bar-track-color); + transition: + height var(--progress-bar-active-transition-duration) linear var(--progress-bar-active-transition-start-delay), + background-color 0s linear; +} +.progress-bar-indeterminant[hidden]:not([data-active=true]) { + display: none; +} +.progress-bar-indeterminant::before, +.progress-bar-indeterminant::after { + content: ''; + display: block; + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 100%; + background-color: var(--progress-bar-indicator-color); + animation: none; +} +.progress-bar-indeterminant:not([hidden])::before { + animation: + progress-bar-indeterminant1a var(--progress-bar-animation-duration) infinite ease-in-out var(--progress-bar-active-transition-start-delay), + progress-bar-indeterminant1b var(--progress-bar-animation-duration) infinite ease-in-out var(--progress-bar-active-transition-start-delay); +} +.progress-bar-indeterminant:not([hidden])::after { + animation: + progress-bar-indeterminant2a var(--progress-bar-animation-duration) infinite ease-in-out calc(var(--progress-bar-active-transition-start-delay) + 0.375 * var(--progress-bar-animation-duration)), + progress-bar-indeterminant2b var(--progress-bar-animation-duration) infinite ease-in-out calc(var(--progress-bar-active-transition-start-delay) + 0.375 * var(--progress-bar-animation-duration)); +} +.top-progress-bar-container { + position: sticky; + top: 0; + height: 0; + pointer-events: none; + z-index: 10; +} + + +/* Frame resizer */ +.frame-resizer-container { + position: fixed; + bottom: 0; + right: 0; + z-index: 100; + background: transparent; + pointer-events: none; + user-select: none; +} +.frame-resizer-sizer1 { + padding-top: 100%; + line-height: 0; +} +.frame-resizer-sizer2 { + display: inline-block; + overflow-x: hidden; + overflow-y: scroll; + vertical-align: bottom; +} +.frame-resizer-sizer2.frame-resizer-sizer2-with-min-size { + min-width: 1em; +} +.frame-resizer-svg { + display: block; + position: absolute; + bottom: 0; + right: 0; + width: 75%; + height: 75%; +} +.frame-resizer-handle { + fill: var(--text-color); + opacity: 0.125; + cursor: se-resize; + pointer-events: auto; + transition: + fill var(--animation-duration) linear, + opacity var(--animation-duration) linear; +} +.frame-resizer-handle:hover, +:root[data-is-resizing=true] .frame-resizer-handle { + fill: var(--accent-color); + opacity: 1; +} + + +/* Footer notifications */ +.footer-notification { + display: flex; + flex-flow: row nowrap; + align-items: flex-start; + pointer-events: auto; + border-radius: 0.25em; + background-color: var(--notification-background-color); + box-shadow: 0 0.125em 0.25em 0 var(--notification-shadow-color); + color: var(--notification-text-color); + margin: 0.5em; + padding: 0; + transition: opacity var(--animation-duration) ease-out; + position: relative; + overflow: auto; + max-height: calc(0.5em * 2 + var(--line-height) * 4 * 1em); +} +.footer-notification[hidden] { + display: flex; + opacity: 0; + transition: opacity var(--animation-duration) ease-in; +} +.footer-notification-body { + flex: 1 1 auto; + padding: 0.5em 0.75em; +} +.footer-notification-close-button-container { + align-self: stretch; + display: flex; + flex-flow: column nowrap; + align-items: center; + justify-content: center; + padding: 0.25em 0.75em 0.25em 0; + position: sticky; + top: 0; + right: 0; +} +button.footer-notification-close-button, +button.footer-notification-close-button:focus, +button.footer-notification-close-button:hover, +button.footer-notification-close-button:active { + flex: 0 0 auto; + background-color: transparent; + margin: -0.25em; + padding: 0.5em; + border: none; + outline: none; + cursor: pointer; + font-size: inherit; + box-shadow: none; +} +.footer-notification-close-button-icon { + display: block; + width: calc(16em / var(--font-size-no-units)); + height: calc(16em / var(--font-size-no-units)); + background-color: var(--notification-text-color); +} + + +/* Overlays */ +.overlay-panel-container { + pointer-events: none; + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + z-index: 6; +} +.overlay-panel { + pointer-events: auto; + background-color: var(--background-color); + display: block; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: var(--main-content-size); + max-width: 100%; + box-sizing: border-box; + margin: 0 auto; + padding: var(--main-content-vertical-padding) var(--main-content-horizontal-padding); + overflow-y: scroll; + transform: none; + opacity: 1; + visibility: visible; + transition: + opacity var(--animation-duration2) ease-out, + visibility 0s linear, + transform var(--animation-duration2) ease-out; +} +.overlay-panel[hidden] { + transform: translate(var(--overlay-panel-translate-distance), 0); + opacity: 0; + visibility: hidden; + transition: + opacity var(--animation-duration2) ease-in, + visibility 0s linear var(--animation-duration2), + transform var(--animation-duration2) ease-in; +} +.overlay-panel[hidden]:not(.hidden-animating) { + display: none; +} +:root[data-popup-action-bar-location=left] .overlay-panel[hidden] { + transform: translate(calc(-1 * var(--overlay-panel-translate-distance)), 0); +} +:root[data-popup-action-bar-location=top] .overlay-panel[hidden] { + transform: translate(0, calc(-1 * var(--overlay-panel-translate-distance))); +} +:root[data-popup-action-bar-location=bottom] .overlay-panel[hidden] { + transform: translate(0, var(--overlay-panel-translate-distance)); +} +.overlay-panel-inner { + padding: var(--entry-vertical-padding) var(--entry-horizontal-padding); +} + + +/* Profile panel */ +.profile-list { + display: flex; + flex-flow: column nowrap; + align-items: stretch; +} +.profile-list-item { + display: flex; + flex-flow: row nowrap; + align-items: center; + cursor: pointer; +} +.profile-list-item-selection { + flex: 0 0 auto; + text-align: center; + padding: 0.25em 0.5em 0.25em 0; +} +.profile-list-item-name { + flex: 1 1 auto; + padding: 0.25em 0; +} + + +/* Audio menu */ +.audio-button-popup-menu[data-show-icons=false] .popup-menu-item-icon { + display: none; +} +.popup-menu-item-icon[data-icon=checkmark] { + background-color: var(--success-color); +} +.popup-menu-item-icon[data-icon=cross] { + background-color: var(--danger-color); +} +.popup-menu-item[data-source-in-options=false][data-valid=null] { + color: var(--text-color-light1); +} + + +/* Anki errors */ +.anki-note-error-list { + margin: 0; + padding-left: 1.5em; + list-style: disc; +} + + +/* Conditional styles */ +:root:not([data-enable-search-tags=true]) .tag[data-category=search] { + display: none; +} +:root[data-compact-tags=true] .tag[data-redundant=true] { + display: none; +} + +:root:not([data-debug=true]) .debug-info { + display: none; +} +:root[data-anki-enabled=false] .action-view-note, +:root[data-anki-enabled=false] .action-add-note { + display: none; +} +:root[data-audio-enabled=false] .action-play-audio { + display: none; +} +:root[data-glossary-layout-mode=compact] .term-definition-tag-list, +:root[data-glossary-layout-mode=compact] .term-definition-disambiguation-list:not([data-count='0']) { + display: inline; +} +:root[data-glossary-layout-mode=compact] .term-glossary-list { + display: inline; + list-style: none; + padding-left: 0; +} +:root[data-glossary-layout-mode=compact] .term-glossary-item { + display: inline; +} +:root[data-glossary-layout-mode=compact] .term-glossary-item:not(:first-child)::before { + white-space: pre-wrap; + content: var(--compact-list-separator); + display: inline; + color: var(--text-color-light3); +} + +:root[data-glossary-layout-mode=compact] .entry-body-section>h5 { + display: none; +} +:root[data-glossary-layout-mode=compact] .entry-body { + margin-top: 0; +} +:root[data-glossary-layout-mode=compact] .entry-body-section { + margin-top: 0; +} +:root[data-show-pitch-accent-downstep-notation=true] .term-pitch-accent-disambiguation-list[data-expression-count='0'], +:root[data-show-pitch-accent-downstep-notation=true] .term-pitch-accent-disambiguation[data-type=reading] { + display: none; +} +:root[data-show-pitch-accent-downstep-notation=false] .term-pitch-accent-characters { + display: none; +} +:root[data-show-pitch-accent-position-notation=false] .term-pitch-accent-position { + display: none; +} +:root[data-show-pitch-accent-graph=false] .term-pitch-accent-details { + display: none; +} + +:root[data-glossary-layout-mode=compact][data-show-pitch-accent-graph=false] .term-pitch-accent-list:not([data-has-tags=true]) { + display: inline; + list-style: none; + padding-left: 0; +} +:root[data-glossary-layout-mode=compact][data-show-pitch-accent-graph=false] .term-pitch-accent-list:not([data-has-tags=true]) .term-pitch-accent { + display: inline; +} +:root[data-glossary-layout-mode=compact][data-show-pitch-accent-graph=false] .term-pitch-accent-list:not([data-has-tags=true]) .term-pitch-accent:not(:first-child)::before { + white-space: pre-wrap; + content: var(--compact-list-separator); + display: inline; + color: var(--text-color-light3); +} + +:root[data-glossary-layout-mode=compact] .term-glossary-image-container { + display: none; + position: absolute; + left: 0; + top: 100%; + z-index: 1; +} +:root[data-glossary-layout-mode=compact] .entry:nth-last-of-type(1):not(:nth-of-type(1)) .term-glossary-image-container { + bottom: 100%; + top: auto; +} +:root[data-glossary-layout-mode=compact] .term-glossary-image-link { + position: relative; + display: inline-block; +} +:root[data-glossary-layout-mode=compact] .term-glossary-image-link:hover .term-glossary-image-container, +:root[data-glossary-layout-mode=compact] .term-glossary-image-link:focus .term-glossary-image-container { + display: block; +} +:root:not([data-glossary-layout-mode=compact]) .term-glossary-image-link-text { + display: none; +} +:root:not([data-glossary-layout-mode=compact]) .term-glossary-image-description { + display: block; +} + +:root[data-popup-display-mode=full-width] .frame-resizer-container { + display: none; +} diff --git a/ext/css/material.css b/ext/css/material.css new file mode 100644 index 00000000..1177baa1 --- /dev/null +++ b/ext/css/material.css @@ -0,0 +1,996 @@ +/* + * 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 . + */ + +/* Variables */ +:root { + --font-size-no-units: 14; + --font-size: calc(1px * var(--font-size-no-units)); + + --font-size-small-no-units: 12; + --font-size-small: calc(1em * var(--font-size-small-no-units) / var(--font-size-no-units)); + + --animation-duration: 0.125s; + --animation-duration2: calc(var(--animation-duration) * 2); + + --checkbox-size: calc(16em / var(--font-size-no-units)); + --icon-button-size: calc(36em / var(--font-size-no-units)); + --radio-size: calc(20em / var(--font-size-no-units)); + --toggle-size: calc(16em / var(--font-size-no-units)); + + --input-font-size-no-units: 1; + --input-font-size: calc(1em * var(--input-font-size-no-units)); + --input-spacing: calc(10em / var(--font-size-no-units)); + --input-width: calc(100em / (var(--font-size-no-units) * var(--input-font-size-no-units)) - var(--input-spacing) / 2); + --input-width-large: calc(200em / (var(--font-size-no-units) * var(--input-font-size-no-units))); + --input-height: calc(32em / (var(--font-size-no-units) * var(--input-font-size-no-units))); + --input-border-radius: 0.25em; + --textarea-line-height: 1.25em; + --textarea-padding: 0.5em; + + --material-arrow-dimension1: calc(5em / var(--font-size-no-units)); + --material-arrow-dimension2: calc(10em / var(--font-size-no-units)); + + --button-shadow-params: 0 0.0625em 0.125em 0; + + --thin-border-size: calc(1em / var(--font-size-no-units)); + + --menu-border-radius: 0.3em; + --menu-shadow: 0 1px 3px 1px var(--shadow-color), 0 2px 4px 3px var(--shadow-color); + + --text-color: #222222; + --text-color-light1: #555555; + --text-color-light2: #666666; + --text-color-light3: #777777; + --text-color-light4: #888888; + --background-color: #f8f9fa; + --background-color-light: #ffffff; + + --shadow-color: rgba(0, 0, 0, 0.185); + --shadow-color-off: rgba(0, 0, 0, 0); + --shadow-color-light: rgba(0, 0, 0, 0.085); + + --accent-color: #1a73e8; + --accent-color-light: #4a91ed; + --accent-color-lighter: #8db9f4; + --accent-color-lightest: #a7c9f6; + --accent-color-dark: #1060c0; + --accent-color-transparent0: rgba(28, 116, 233, 0); + --accent-color-transparent5: rgba(28, 116, 233, 0.05); + --accent-color-transparent25: rgba(28, 116, 233, 0.25); + + --danger-color: #c83c28; + --danger-color-light: #dd6755; + --danger-color-lighter: #e68d7f; + --danger-color-lightest: #eeb3aa; + --danger-color-transparent0: rgba(200, 60, 40, 0); + --danger-color-transparent5: rgba(200, 60, 40, 0.05); + --danger-color-transparent25: rgba(200, 60, 40, 0.25); + + --success-color: #51ab30; + + --disabled-color: #aaaaaa; + --disabled-color-light: #dddddd; + --disabled-color-lighter: #eeeeee; + + --input-background-color: #f2f2f2; + --input-background-color-dark: #dddddd; + --input-background-color-darker: #cccccc; + --input-outline-color: var(--text-color); + + --button-text-color: #ffffff; + --button-border-color: #cccccc; + --button-icon-color: #333333; + --button-icon-color-light: #666666; + + --checkbox-checked-color: var(--accent-color); + --checkbox-unchecked-color: #666666; + --checkbox-check-color: var(--background-color-light); + --checkbox-disabled-color: var(--disabled-color); + + --toggle-track-color: #cccccc; + --toggle-knob-color: var(--background-color-light); + + --selectable-indicator-color: rgba(160, 160, 160, 0.25); + + --menu-item-hover-color: #bbbbbb; + --menu-item-active-color: #aaaaaa; +} +:root[data-theme=dark] { + --text-color: #d4d4d4; + --text-color-light1: #aaaaaa; + --text-color-light2: #999999; + --text-color-light3: #888888; + --text-color-light4: #777777; + --background-color: #1e1e1e; + --background-color-light: #0a0a0a; + + --shadow-color: rgba(255, 255, 255, 0.185); + --shadow-color-off: rgba(255, 255, 255, 0); + --shadow-color-light: rgba(255, 255, 255, 0.085); + + --accent-color: #4a91ed; + --accent-color-light: #1a73e8; + --accent-color-lighter: #135dbe; + --accent-color-lightest: #0e4690; + --accent-color-transparent0: rgb(78, 172, 253, 0); + --accent-color-transparent5: rgb(78, 172, 253, 0.05); + --accent-color-transparent25: rgb(78, 172, 253, 0.25); + + --danger-color: #dd6755; + --danger-color-light: #c83c28; + --danger-color-lighter: #9e301f; + --danger-color-lightest: #732317; + --danger-color-transparent0: rgba(221, 103, 85, 0); + --danger-color-transparent5: rgba(221, 103, 85, 0.05); + --danger-color-transparent25: rgba(221, 103, 85, 0.25); + + --success-color: #75cf54; + + --disabled-color: #444444; + --disabled-color-light: #585858; + --disabled-color-lighter: #777777; + + --input-background-color: #2f2f2f; + --input-background-color-dark: #383838; + --input-background-color-darker: #484848; + --input-outline-color: var(--text-color); + + --button-text-color: #000000; + --button-border-color: #333333; + --button-icon-color: #cccccc; + --button-icon-color-light: #999999; + + --checkbox-unchecked-color: #999999; + + --toggle-track-color: #cccccc; + --toggle-knob-color: #ffffff; + + --selectable-indicator-color: rgba(100, 100, 100, 0.25); + + --menu-item-hover-color: #333333; + --menu-item-active-color: #444444; +} + + +/* 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=none] { --icon-image: linear-gradient(transparent, transparent); } +.icon[data-icon=profile] { --icon-image: url(/images/profile.svg); } +.icon[data-icon=cog] { --icon-image: url(/images/cog.svg); } +.icon[data-icon=palette] { --icon-image: url(/images/palette.svg); } +.icon[data-icon=popup] { --icon-image: url(/images/popup.svg); } +.icon[data-icon=speaker] { --icon-image: url(/images/speaker.svg); } +.icon[data-icon=scanning] { --icon-image: url(/images/scanning.svg); } +.icon[data-icon=text-parsing] { --icon-image: url(/images/text-parsing.svg); } +.icon[data-icon=translation] { --icon-image: url(/images/translation.svg); } +.icon[data-icon=book] { --icon-image: url(/images/book.svg); } +.icon[data-icon=note-card] { --icon-image: url(/images/note-card.svg); } +.icon[data-icon=keyboard] { --icon-image: url(/images/keyboard.svg); } +.icon[data-icon=backup] { --icon-image: url(/images/backup.svg); } +.icon[data-icon=lock] { --icon-image: url(/images/lock.svg); } +.icon[data-icon=question-mark] { --icon-image: url(/images/question-mark.svg); } +.icon[data-icon=popup-size] { --icon-image: url(/images/popup-size.svg); } +.icon[data-icon=hamburger-menu] { --icon-image: url(/images/hamburger-menu.svg); } +.icon[data-icon=kebab-menu] { --icon-image: url(/images/kebab-menu.svg); } +.icon[data-icon=mouse] { --icon-image: url(/images/mouse.svg); } +.icon[data-icon=exclamation-point-short] { --icon-image: url(/images/exclamation-point-short.svg); } +.icon[data-icon=magnifying-glass] { --icon-image: url(/images/magnifying-glass.svg); } +.icon[data-icon=collapse] { --icon-image: url(/images/collapse.svg); } +.icon[data-icon=expand] { --icon-image: url(/images/expand.svg); } +.icon[data-icon=window] { --icon-image: url(/images/window.svg); } +.icon[data-icon=cross] { --icon-image: url(/images/cross.svg); } +.icon[data-icon=checkmark] { --icon-image: url(/images/checkmark.svg); } +.icon[data-icon=sentence-parsing] { --icon-image: url(/images/sentence-parsing.svg); } +.icon[data-icon=question-mark] { --icon-image: url(/images/question-mark.svg); } +.icon[data-icon=question-mark-circle] { --icon-image: url(/images/question-mark-circle.svg); } +.icon[data-icon=question-mark-thick] { --icon-image: url(/images/question-mark-thick.svg); } +.icon[data-icon=left-chevron] { --icon-image: url(/images/left-chevron.svg); } +.icon[data-icon=right-chevron] { --icon-image: url(/images/right-chevron.svg); } +.icon[data-icon=plus-thick] { --icon-image: url(/images/plus-thick.svg); } +.icon[data-icon=clipboard] { --icon-image: url(/images/clipboard.svg); } +.icon[data-icon=key] { --icon-image: url(/images/key.svg); } +.icon[data-icon=material-down-arrow] { + --icon-image: url(/images/material-down-arrow.svg); + --icon-size: var(--material-arrow-dimension2) var(--material-arrow-dimension1); +} +.icon[data-icon=material-right-arrow] { + --icon-image: url(/images/material-right-arrow.svg); + --icon-size: var(--material-arrow-dimension1) var(--material-arrow-dimension2); +} + + +/* Checkbox */ +label.checkbox { + cursor: default; +} +.checkbox { + font-size: var(--checkbox-size); + display: inline-block; +} +.checkbox>input[type=checkbox] { + opacity: 0; + width: 0; + height: 0; + display: block; + margin: 0; + padding: 0; + border: none; + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; +} +.checkbox-body { + display: block; + cursor: pointer; + width: 1em; + height: 1em; + position: relative; +} +.checkbox>input[type=checkbox]:disabled+.checkbox-body { + cursor: default; +} +.checkbox-fill, +.checkbox-border, +.checkbox-check { + display: block; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + mask-repeat: no-repeat; + mask-position: center center; + mask-mode: alpha; + mask-size: contain; + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center center; + -webkit-mask-mode: alpha; + -webkit-mask-size: contain; + transition: opacity var(--animation-duration) linear, background-color var(--animation-duration) linear; +} +.checkbox-fill { + mask-image: url(/images/checkbox-fill.svg); + -webkit-mask-image: url(/images/checkbox-fill.svg); + background-color: var(--checkbox-unchecked-color); + opacity: 0; +} +.checkbox-border { + mask-image: url(/images/checkbox-border.svg); + -webkit-mask-image: url(/images/checkbox-border.svg); + background-color: var(--checkbox-unchecked-color); + opacity: 1; +} +.checkbox-check { + mask-image: url(/images/checkbox-check.svg); + -webkit-mask-image: url(/images/checkbox-check.svg); + background-color: var(--checkbox-check-color); + opacity: 0; +} +.checkbox>input[type=checkbox]:checked+.checkbox-body>.checkbox-fill { + background-color: var(--checkbox-checked-color); + opacity: 1; +} +.checkbox>input[type=checkbox]:checked+.checkbox-body>.checkbox-border { + background-color: var(--checkbox-checked-color); + opacity: 1; +} +.checkbox>input[type=checkbox]:checked+.checkbox-body>.checkbox-check { + background-color: var(--checkbox-check-color); + opacity: 1; +} +.checkbox>input[type=checkbox]:disabled+.checkbox-body>.checkbox-fill { + opacity: 0; +} +.checkbox>input[type=checkbox]:disabled+.checkbox-body>.checkbox-border { + background-color: var(--checkbox-disabled-color); + opacity: 1; +} +.checkbox>input[type=checkbox]:disabled+.checkbox-body>.checkbox-check { + background-color: var(--checkbox-disabled-color); +} + + +/* Toggle switch */ +label.toggle { + cursor: default; +} +.toggle { + font-size: var(--toggle-size); + display: inline-block; +} +.toggle>input[type=checkbox] { + opacity: 0; + width: 0; + height: 0; + display: block; + margin: 0; + padding: 0; + border: none; + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; +} +.toggle-body { + display: block; + cursor: pointer; + width: 2em; + height: 1em; + position: relative; +} +.toggle-track { + display: block; + position: absolute; + left: 0.125em; + right: 0.125em; + top: 0.125em; + bottom: 0.125em; + background-color: var(--toggle-track-color); + border-radius: 0.4375em; + transition: background-color var(--animation-duration) ease-in-out; +} +.toggle-knob { + display: block; + position: absolute; + left: 0; + top: 0; + width: 1em; + height: 1em; + background-color: var(--toggle-knob-color); + border-radius: 0.5em; + box-shadow: + 0 0.0625em 0.25em 0 var(--shadow-color), + 0 0.125em 0.125em 0 var(--shadow-color); + transition: + transform var(--animation-duration) ease-in-out, + background-color var(--animation-duration) ease-in-out; +} +.toggle-body>.toggle-knob::after { + position: absolute; + display: block; + content: ''; + left: -0.75em; + top: -0.75em; + right: -0.75em; + bottom: -0.75em; + border-radius: 2.5em; + background-color: var(--selectable-indicator-color); + pointer-events: none; + transform: scale(0); + opacity: 0; + visibility: hidden; + transition: + transform 0s ease-in-out var(--animation-duration2), + background-color var(--animation-duration2) ease-in-out, + opacity var(--animation-duration2) ease-in-out, + visibility 0s ease-in-out var(--animation-duration2); +} +.toggle>input[type=checkbox]:focus:not(:disabled)+.toggle-body>.toggle-knob::after, +.toggle:active>input[type=checkbox]:not(:disabled)+.toggle-body>.toggle-knob::after { + transform: scale(1); + opacity: 1; + visibility: visible; + transition: + transform var(--animation-duration2) ease-in-out, + background-color var(--animation-duration2) ease-in-out, + opacity var(--animation-duration2) ease-in-out, + visibility var(--animation-duration2) ease-in-out; +} +.toggle>input[type=checkbox]:focus+.toggle-body>.toggle-knob::after { + opacity: 0.5; +} +.toggle:active>input[type=checkbox]:focus+.toggle-body>.toggle-knob::after { + opacity: 1; +} +.toggle>input[type=checkbox]:checked+.toggle-body>.toggle-knob { + transform: translateX(1em); +} +.toggle>input[type=checkbox]:checked:not(:disabled)+.toggle-body>.toggle-track { + background-color: var(--accent-color-lighter); +} +.toggle>input[type=checkbox]:checked:not(:disabled)+.toggle-body>.toggle-knob { + background-color: var(--accent-color); +} +.toggle>input[type=checkbox]:focus:checked:not(:disabled)+.toggle-body>.toggle-knob::after, +.toggle:active>input[type=checkbox]:checked:not(:disabled)+.toggle-body>.toggle-knob::after { + background-color: var(--accent-color-transparent25); +} +.toggle>input[type=checkbox]:disabled+.toggle-body { + cursor: default; +} +.toggle>input[type=checkbox]:disabled+.toggle-body>.toggle-track { + background-color: var(--disabled-color-light); +} +.toggle>input[type=checkbox]:disabled+.toggle-body>.toggle-knob { + background-color: var(--disabled-color-lighter); +} + + +/* Radio button */ +label.radio { + cursor: default; +} +.radio { + display: inline-block; + vertical-align: middle; +} +.radio>input[type=radio] { + opacity: 0; + width: 0; + height: 0; + display: block; + margin: 0; + padding: 0; + border: none; + cursor: default; + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; +} +.radio>input[type=radio]:not(:disabled)+.radio-body { + cursor: pointer; +} +.radio-body { + display: block; + position: relative; + width: var(--radio-size); + height: var(--radio-size); +} +.radio-border, +.radio-dot { + display: block; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + background-color: var(--accent-color); + mask-repeat: no-repeat; + mask-position: center center; + mask-mode: alpha; + mask-size: var(--radio-size) var(--radio-size); + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center center; + -webkit-mask-mode: alpha; + -webkit-mask-size: var(--radio-size) var(--radio-size); +} +.radio-border { + mask-image: url(/images/radio-button.svg); + -webkit-mask-image: url(/images/radio-button.svg); +} +.radio-dot { + mask-image: url(/images/radio-button-dot.svg); + -webkit-mask-image: url(/images/radio-button-dot.svg); + opacity: 1; + transform: none; + transition: + transform var(--animation-duration2) ease-in-out, + opacity var(--animation-duration2) ease-in-out, + visibility var(--animation-duration2) ease-in-out; +} +.radio>input[type=radio]:disabled+.radio-body>.radio-border, +.radio>input[type=radio]:disabled+.radio-body>.radio-dot { + background-color: var(--disabled-color); +} +.radio>input[type=radio]:not(:checked)+.radio-body>.radio-dot { + opacity: 0; + transform: scale(0); + transition: + transform 0s ease-in-out var(--animation-duration2), + opacity var(--animation-duration2) ease-in-out, + visibility 0s ease-in-out var(--animation-duration2); +} +.radio-body::after { + position: absolute; + display: block; + content: ''; + left: -0.75em; + top: -0.75em; + right: -0.75em; + bottom: -0.75em; + border-radius: 2.5em; + background-color: var(--selectable-indicator-color); + pointer-events: none; + transform: scale(0); + opacity: 0; + visibility: hidden; + transition: + transform 0s ease-in-out var(--animation-duration2), + background-color var(--animation-duration2) ease-in-out, + opacity var(--animation-duration2) ease-in-out, + visibility 0s ease-in-out var(--animation-duration2); +} +.radio>input[type=radio]:focus:not(:disabled)+.radio-body::after, +.radio:active>input[type=radio]:not(:disabled)+.radio-body::after { + transform: scale(1); + opacity: 1; + visibility: visible; + transition: + transform var(--animation-duration2) ease-in-out, + background-color var(--animation-duration2) ease-in-out, + opacity var(--animation-duration2) ease-in-out, + visibility var(--animation-duration2) ease-in-out; +} +.radio>input[type=radio]:focus+.radio-body::after { + opacity: 0.5; +} +.radio:active>input[type=radio]:focus+.radio-body::after { + opacity: 1; +} +.radio-label { + cursor: pointer; + white-space: nowrap; +} +.radio-label>.radio { + vertical-align: middle; +} +.radio-label>.radio-label-text { + display: inline-block; + margin-left: 0.5em; + vertical-align: middle; + white-space: normal; +} + + +/* Material design select */ +select { + width: var(--input-width-large); + height: var(--input-height); + line-height: var(--input-height); + border: 0; + border-radius: var(--input-border-radius); + box-sizing: border-box; + padding: 0 0.5em; + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; + background-image: url(/images/material-down-arrow.svg); + background-repeat: no-repeat; + background-position: right calc(10em / var(--font-size-no-units)) center; + background-color: var(--input-background-color); + background-size: var(--material-arrow-dimension2) var(--material-arrow-dimension1); + cursor: pointer; + color: var(--text-color); + font-size: var(--input-font-size); +} +select::-ms-expand { + display: none; +} + + +/* Material design inputs */ +input[type=text], +input[type=number] { + width: var(--input-width); + height: var(--input-height); + line-height: var(--input-height); + color: var(--text-color); + font-size: var(--input-font-size); + background-color: var(--input-background-color); + border: none; + border-radius: var(--input-border-radius); + box-sizing: border-box; + padding: 0 0.5em; + appearance: textfield; + -moz-appearance: textfield; + -webkit-appearance: textfield; +} +input[type=number]::-webkit-inner-spin-button, +input[type=number]::-webkit-outer-spin-button { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; + margin: 0; +} +input[type=text] { + width: var(--input-width-large); +} +textarea { + box-sizing: border-box; + padding: var(--textarea-padding); + font-family: 'Courier New', Courier, monospace; + color: var(--text-color); + font-size: var(--input-font-size); + background-color: var(--input-background-color); + border-radius: var(--input-border-radius); + line-height: var(--textarea-line-height); + border: var(--thin-border-size) solid var(--input-background-color); +} +select:invalid, +textarea:invalid, +input[type=text]:invalid, +input[type=number]:invalid, +select[data-invalid=true], +textarea[data-invalid=true], +input[type=text][data-invalid=true], +input[type=number][data-invalid=true] { + border: var(--thin-border-size) solid var(--danger-color); +} +select, +textarea, +input[type=text], +input[type=number] { + box-shadow: none; + transition: box-shadow calc(var(--animation-duration) / 2) linear; +} +select:focus, +textarea:focus, +input[type=text]:focus, +input[type=number]:focus { + box-shadow: 0 0 0 calc(2em / var(--font-size-no-units)) var(--input-outline-color); + outline: none; +} +select:invalid:focus, +textarea:invalid:focus, +input[type=text]:invalid:focus, +input[type=number]:invalid:focus, +select[data-invalid=true]:focus, +textarea[data-invalid=true]:focus, +input[type=text][data-invalid=true]:focus, +input[type=number][data-invalid=true]:focus { + box-shadow: 0 0 0 calc(2em / var(--font-size-no-units)) var(--danger-color); + outline: none; +} +input[type=text].input-with-suffix-button, +input[type=number].input-with-suffix-button { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right-style: none; + z-index: 1; +} +input[type=text].code, +input[type=number].code { + font-family: 'Courier New', Courier, monospace; +} + + +/* Material design button */ +button { + border: var(--thin-border-size) solid transparent; + border-radius: 0.3em; + padding: 0.5em 1em; + font-weight: bold; + font-size: inherit; + font-family: inherit; + cursor: pointer; + background-color: transparent; + box-shadow: var(--button-shadow-params) var(--shadow-color-off); + transition: background-color var(--animation-duration) ease-in, box-shadow var(--animation-duration) ease-in, border-color var(--animation-duration) ease-in; + -webkit-tap-highlight-color: transparent; +} +button:focus { + outline: none; +} +button:hover { + transition: background-color var(--animation-duration) ease-out, box-shadow var(--animation-duration) ease-out, border-color var(--animation-duration) ease-out; +} +button:hover:not(:disabled) { + box-shadow: var(--button-shadow-params) var(--shadow-color-light); +} +button:active:not(:disabled) { + box-shadow: var(--button-shadow-params) var(--shadow-color); +} + +/* Standard button */ +button:not(:disabled) { + color: var(--button-text-color); + border-color: var(--accent-color); + background-color: var(--accent-color); +} +button:hover:not(:disabled) { + background-color: var(--accent-color-light); + border-color: var(--accent-color-light); +} +button:focus:not(:disabled) { + background-color: var(--accent-color-light); +} +button:active:not(:disabled) { + border-color: var(--accent-color-lighter); + background-color: var(--accent-color-lighter); +} + +/* Standard danger button */ +button.danger:not(:disabled) { + color: var(--button-text-color); + border-color: var(--danger-color); + background-color: var(--danger-color); +} +button.danger:hover:not(:disabled) { + background-color: var(--danger-color-light); + border-color: var(--danger-color-light); +} +button.danger:focus:not(:disabled) { + background-color: var(--danger-color-light); +} +button.danger:active:not(:disabled) { + border-color: var(--danger-color-lighter); + background-color: var(--danger-color-lighter); +} + +/* Low emphasis button */ +button.low-emphasis:not(:disabled) { + color: var(--accent-color); + border-color: var(--button-border-color); + background-color: var(--accent-color-transparent0); +} +button.low-emphasis:hover:not(:disabled) { + background-color: var(--accent-color-transparent5); + border-color: var(--accent-color-light); +} +button.low-emphasis:focus:not(:disabled) { + border-color: var(--accent-color); +} +button.low-emphasis:active:not(:disabled) { + border-color: var(--accent-color); + background-color: var(--accent-color-transparent25); +} + +/* Low emphasis danger button */ +button.low-emphasis.danger:not(:disabled) { + color: var(--danger-color); + border-color: var(--button-border-color); + background-color: var(--danger-color-transparent0); +} +button.low-emphasis.danger:hover:not(:disabled) { + border-color: var(--danger-color-light); + background-color: var(--danger-color-transparent5); +} +button.low-emphasis.danger:focus:not(:disabled) { + border-color: var(--danger-color); +} +button.low-emphasis.danger:active:not(:disabled) { + border-color: var(--danger-color); + background-color: var(--danger-color-transparent25); +} + +/* Disabled buttons */ +button:disabled { + color: var(--button-text-color); + border-color: var(--disabled-color); + background-color: var(--disabled-color); + cursor: default; +} +button.low-emphasis:disabled { + color: var(--disabled-color); + border-color: var(--disabled-color); + background-color: transparent; +} + +/* Input suffix button */ +button.input-suffix-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; + border-color: transparent; + transition: + background-color var(--animation-duration) ease-in, + box-shadow var(--animation-duration) ease-in; +} +button.input-suffix-button.input-suffix-icon-button { + width: 2.125em; + position: relative; +} +button.input-suffix-button.input-suffix-icon-button:hover, +button.input-suffix-button.input-suffix-icon-button:focus { + background-color: var(--input-background-color-dark); +} +button.input-suffix-button.input-suffix-icon-button:active { + background-color: var(--input-background-color-darker); +} +button.input-suffix-button.input-suffix-icon-button>.icon { + display: block; + width: 100%; + height: 100%; + background-color: var(--button-icon-color); +} +input[type=text]:invalid+button.input-suffix-button, +input[type=number]:invalid+button.input-suffix-button, +input[type=text][data-invalid=true]+button.input-suffix-button, +input[type=number][data-invalid=true]+button.input-suffix-button { + border: var(--thin-border-size) solid var(--danger-color); + border-left-style: none; +} + + +/* Material design icon button */ +button.icon-button { + vertical-align: middle; + border: none; + margin: 0; + padding: 0; + box-sizing: content-box; + font-size: inherit; + cursor: pointer; + background-color: transparent; +} +button.icon-button:not([hidden]) { + display: inline-block; +} +button.icon-button>.icon-button-inner { + display: block; + width: var(--icon-button-size); + height: var(--icon-button-size); + position: relative; +} +button.icon-button:focus { + outline: none; +} +button.icon-button, +button.icon-button:hover, +button.icon-button:focus, +button.icon-button:active { + background-color: transparent; + box-shadow: none; +} +.icon-button>.icon-button-inner::after { + position: absolute; + display: block; + content: ''; + left: 0; + top: 0; + right: 0; + bottom: 0; + border-radius: 50%; + background-color: var(--selectable-indicator-color); + pointer-events: none; + transform: scale(0); + opacity: 0; + visibility: hidden; + transition: + transform 0s ease-in-out var(--animation-duration2), + background-color var(--animation-duration2) ease-in-out, + opacity var(--animation-duration2) ease-in-out, + visibility 0s ease-in-out var(--animation-duration2); +} +.icon-button:focus>.icon-button-inner::after { + transform: scale(1); + opacity: 1; + visibility: visible; + transition: + transform var(--animation-duration2) ease-in-out, + background-color var(--animation-duration2) ease-in-out, + opacity var(--animation-duration2) ease-in-out, + visibility var(--animation-duration2) ease-in-out; +} +.icon-button>.icon-button-inner>.icon { + display: block; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + background-color: var(--button-icon-color); + --icon-size: calc(16em / var(--font-size-no-units)) calc(16em / var(--font-size-no-units)); +} +.icon-button>.icon-button-inner>.icon.icon-button-icon-light { + background-color: var(--button-icon-color-light); +} +.icon-button>.icon-button-inner>.icon[data-icon=material-right-arrow] { --icon-size: var(--material-arrow-dimension1) var(--material-arrow-dimension2); } +.icon-button>.icon-button-inner>.icon[data-icon=material-down-arrow] { --icon-size: var(--material-arrow-dimension2) var(--material-arrow-dimension1); } + +.input-height-icon-button-container { + height: var(--input-height); + box-sizing: border-box; +} +.input-height-icon-button-container>.icon-button { + position: relative; + top: calc((var(--input-height) - var(--icon-button-size)) * 0.5); +} + + +/* Popup menu */ +#popup-menus { + position: absolute; +} +.popup-menu-container { + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + z-index: 101; + outline: none; + overflow: hidden; +} +.popup-menu { + position: absolute; + left: 0; + top: 0; + max-width: 100%; + max-height: 100%; + box-sizing: border-box; + box-shadow: var(--menu-shadow); + border-radius: var(--menu-border-radius); + background-color: var(--background-color-light); + padding: 0.5em 0; + min-width: 8em; + overflow: auto; +} +.popup-menu-body { + display: flex; + flex-flow: column nowrap; + align-items: stretch; + white-space: nowrap; +} +button.popup-menu-item { + padding: 0.625em 1.5em; + border-radius: 0; + background-color: transparent; + color: var(--text-color); + border: none; + width: 100%; + text-align: left; + font-size: 1em; + font-weight: normal; + font-family: inherit; + align-items: center; +} +button.popup-menu-item:not([hidden]) { + display: flex; +} +button.popup-menu-item:hover:not(:disabled), +button.popup-menu-item:focus:not(:disabled) { + background-color: var(--menu-item-hover-color); + box-shadow: none; +} +button.popup-menu-item:active:not(:disabled) { + background-color: var(--menu-item-active-color); + box-shadow: none; +} +button.popup-menu-item:disabled { + color: var(--text-color-light2); +} +.popup-menu-item-icon { + width: calc(16em / 14); + height: calc(16em / 14); + background-color: var(--text-color); + margin-right: 0.5em; + flex: 0 0 auto; +} +.popup-menu-item-icon:not([hidden]) { + display: block; +} +:root[data-page-type=popup] .popup-menu.popup-menu-auto-size, +.popup-menu.popup-menu-small { + border-radius: calc(var(--menu-border-radius) * 0.75); + padding: 0.25em 0; + min-width: 6em; +} +:root[data-page-type=popup] .popup-menu.popup-menu-auto-size button.popup-menu-item, +.popup-menu.popup-menu-small button.popup-menu-item { + padding: 0.5em 0.75em; + font-size: var(--font-size-small); +} diff --git a/ext/css/pitch-accents-preview.css b/ext/css/pitch-accents-preview.css new file mode 100644 index 00000000..cda9977e --- /dev/null +++ b/ext/css/pitch-accents-preview.css @@ -0,0 +1,57 @@ +/* + * 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 . + */ + +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/css/popup-outer.css b/ext/css/popup-outer.css new file mode 100644 index 00000000..626d0c32 --- /dev/null +++ b/ext/css/popup-outer.css @@ -0,0 +1,47 @@ +/* + * Copyright (C) 2016-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 . + */ + +iframe.yomichan-popup { + all: initial; + font-size: 1px; + background-color: #ffffff; + border: 1em solid #999999; + box-shadow: 0 0 10em rgba(0, 0, 0, 0.5); + position: fixed; + resize: none; + visibility: hidden; + z-index: 2147483647; + box-sizing: border-box; +} +iframe.yomichan-popup[data-theme=dark] { + background-color: #1e1e1e; + border-color: #666666; +} +iframe.yomichan-popup[data-outer-theme=dark], +iframe.yomichan-popup[data-outer-theme=auto][data-site-color=dark] { + box-shadow: 0 0 10em rgba(255, 255, 255, 0.5); +} +iframe.yomichan-popup[data-popup-display-mode=full-width] { + border-left: none; + border-right: none; +} +iframe.yomichan-popup[data-popup-display-mode=full-width][data-below=true] { + border-bottom: none; +} +iframe.yomichan-popup[data-popup-display-mode=full-width]:not([data-below=true]) { + border-top: none; +} diff --git a/ext/css/popup-preview.css b/ext/css/popup-preview.css new file mode 100644 index 00000000..2faccc3f --- /dev/null +++ b/ext/css/popup-preview.css @@ -0,0 +1,149 @@ +/* + * 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 . + */ + +: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/css/search.css b/ext/css/search.css new file mode 100644 index 00000000..eb537ba4 --- /dev/null +++ b/ext/css/search.css @@ -0,0 +1,162 @@ +/* + * 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 . + */ + +/* Variables */ +:root { + --main-content-horizontal-padding: 0.72em; + --entry-horizontal-padding: 0; + + --padding: calc(10em / var(--font-size-no-units)); + --main-content-size: calc(700em / var(--font-size-no-units)); + + --background-color: #ffffff; + --separator-color1: #cccccc; +} +:root:not([data-loaded=true]) { + --animation-duration: 0s; +} +:root[data-theme=dark] { + --separator-color1: #333333; +} + +/* Common styles */ +:root { + height: 100%; +} +body { + background-color: var(--background-color); + margin: 0; + padding: 0; + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + color: var(--text-color); + height: 100%; + overflow: hidden; +} +h1 { + font-size: 2em; + line-height: 1.5em; + margin: 0; + padding: 0.25em 0 0; + font-weight: normal; + box-sizing: border-box; + border-bottom: calc(1em / (var(--font-size-no-units) * 2)) solid var(--separator-color1); +} + +/* Search bar */ +.search-textbox-container { + display: flex; + flex-flow: row nowrap; + width: 100%; + align-items: stretch; + margin: 0; + padding: 0; + border: 0; +} +#search-textbox { + color: var(--text-color); + flex: 1 1 auto; + box-sizing: border-box; + padding: var(--textarea-padding); + background-color: var(--input-background-color); + border-radius: 0; + line-height: var(--textarea-line-height); + border: 0; + outline: none; + width: 100%; + height: calc(var(--textarea-line-height) + var(--textarea-padding) * 2); + min-height: calc(var(--textarea-line-height) + var(--textarea-padding) * 2); + max-height: calc(var(--textarea-line-height) * 10 + var(--textarea-padding) * 2); + resize: vertical; + font-size: var(--font-size); + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + white-space: pre-wrap; + z-index: 1; +} +#search-button { + flex: 0 0 auto; + position: relative; + width: 2.5em; + background-color: var(--input-background-color); + border: 0; + padding: 0; + margin: 0; + cursor: pointer; + outline: none; + transition: background-color var(--animation-duration) ease-in-out; + border-radius: 0; +} +#search-button:hover, +#search-button:focus { + background-color: var(--input-background-color-dark); +} +#search-button:active { + background-color: var(--input-background-color-darker); +} + +#search-button>.icon { + display: block; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + background-color: var(--button-icon-color); + --icon-size: 16px 16px; +} + +/* Search options */ +.search-options { + display: flex; + flex-flow: row wrap; + margin: 0.5em -1em; + align-items: center; +} +.search-option { + flex: 0 1 auto; + margin: 0.5em 1em; + align-items: center; + cursor: pointer; +} +.search-option:not([hidden]) { + display: flex; +} +.search-option-label { + padding-left: 0.5em; +} +.search-option-pre-label { + padding-right: 0.5em; +} +#query-parser-mode-container { + flex: 1 1 auto; +} +#query-parser-mode-container:not([hidden]) { + display: flex; +} +#query-parser-mode-select { + flex: 1 1 auto; + max-width: 220px; + min-width: 100px; +} + +/* Search styles */ +#intro { + overflow: hidden; +} +#intro>p { + margin: 0; +} + diff --git a/ext/css/settings.css b/ext/css/settings.css new file mode 100644 index 00000000..707de85a --- /dev/null +++ b/ext/css/settings.css @@ -0,0 +1,442 @@ +/* + * 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 . + */ + + +.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/css/settings2.css b/ext/css/settings2.css new file mode 100644 index 00000000..4f487d74 --- /dev/null +++ b/ext/css/settings2.css @@ -0,0 +1,2104 @@ +/* + * 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 . + */ + +/* 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/fg/float.html b/ext/fg/float.html index 18bf3f5b..0203043a 100644 --- a/ext/fg/float.html +++ b/ext/fg/float.html @@ -11,8 +11,8 @@ - - + + diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js index 47330090..5e15a654 100644 --- a/ext/fg/js/popup.js +++ b/ext/fg/js/popup.js @@ -342,7 +342,7 @@ class Popup extends EventDispatcher { useWebExtensionApi = false; parentNode = this._shadow; } - await dynamicLoader.loadStyle('yomichan-popup-outer-stylesheet', fileType, '/mixed/css/popup-outer.css', useWebExtensionApi, parentNode); + await dynamicLoader.loadStyle('yomichan-popup-outer-stylesheet', fileType, '/css/popup-outer.css', useWebExtensionApi, parentNode); } _observeFullscreen(observe) { diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css deleted file mode 100644 index bd381c6d..00000000 --- a/ext/mixed/css/display.css +++ /dev/null @@ -1,1798 +0,0 @@ -/* - * Copyright (C) 2016-2021 Yomichan Authors - * - * This program is free software: you can redistribute it and/or modify - * it under the entrys 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 . - */ - -/* Variables */ -:root { - /* Layout */ - --font-size-no-units: 14; - --font-size: calc(1px * var(--font-size-no-units)); - --query-parser-font-size-no-units: 2; - --query-parser-font-size: calc(1em * var(--query-parser-font-size-no-units)); - --expression-font-size-no-units: 2; - --expression-font-size: calc(1em * var(--expression-font-size-no-units)); - --h2-font-size-no-units: 1.25; - --h2-font-size: calc(1em * var(--h2-font-size-no-units)); - - --line-height-no-units: 20; - --line-height: calc(var(--line-height-no-units) / var(--font-size-no-units)); - - --thin-border-size: calc(1em / var(--font-size-no-units)); - --expression-thin-border-size: calc(1em / (var(--expression-font-size-no-units) * var(--font-size-no-units))); - - --action-button-size-no-units: 16; - --action-button-size: calc(1em * (var(--action-button-size-no-units) / var(--font-size-no-units))); - --action-button-padding: 0.3em; - - --list-margin: 0.72em; - --main-content-size: 100%; - --main-content-vertical-padding: 0em; - --main-content-horizontal-padding: 0em; - --entry-horizontal-padding: 0.72em; - --entry-vertical-padding: 0.72em; - - --sidebar-width-no-units: 40; - --sidebar-width: calc(1em * (var(--sidebar-width-no-units) / var(--font-size-no-units))); - --sidebar-button-height-no-units: 30; - --sidebar-button-height: calc(1em * (var(--sidebar-button-height-no-units) / var(--font-size-no-units))); - --sidebar-button-icon-size-no-units: 16; - --sidebar-button-icon-size: calc(1em * (var(--sidebar-button-icon-size-no-units) / var(--font-size-no-units))); - - --progress-bar-height-no-units: 4; - --progress-bar-height: calc(1em * (var(--progress-bar-height-no-units) / var(--font-size-no-units))); - --progress-bar-active-transition-duration: 0.125s; - --progress-bar-active-transition-start-delay: 0.0625s; - --progress-bar-animation-duration: 2s; - - --entry-current-indicator-width-no-units: 4; - --entry-current-indicator-width: calc(1em * var(--entry-current-indicator-width-no-units) / var(--font-size-no-units)); - --entry-current-indicator-transition-duration: 0.125s; - - --expression-space-size: 0.5em; - - --tag-font-size-no-units: calc(11 / 14); - --tag-font-size: calc(1em * var(--tag-font-size-no-units)); - --tag-border-size-no-units: 0; - --tag-border-size: calc(1em * (var(--tag-border-size-no-units) / (var(--font-size-no-units) * var(--tag-font-size-no-units)))); - --tag-border-style: none; - --tag-font-weight: bold; - - --compact-list-separator: ' | '; - --list-padding1: 1.4em; - --list-padding2: var(--list-padding1); - - --entry-current-indicator-triangle-size-no-units: 6; - --entry-current-indicator-triangle-size: calc(1em * (var(--entry-current-indicator-triangle-size-no-units) / var(--font-size-no-units))); - - --overlay-panel-translate-distance: 4em; - - --animation-duration: 0.125s; - --animation-duration2: calc(2 * var(--animation-duration)); - - /* Colors */ - --background-color: #ffffff; - --glossary-image-background-color: #eeeeee; - --link-color: var(--accent-color); - - --text-color: #000000; - --kanji-text-color: var(--text-color); - --kanji-popular-text-color: var(--accent-color); - --kanji-rare-text-color: var(--text-color-light4); - --kanji-furigana-text-color: inherit; - --reason-text-color: var(--text-color-light3); - - --light-border-color: #eeeeee; - --medium-border-color: #dddddd; - --dark-border-color: #777777; - --kanji-border-color: var(--dark-border-color); - - --pitch-accent-annotation-color: #000000; - - --tag-text-color: #ffffff; - --tag-border-color: transparent; - --tag-default-background-color: #8a8a91; - --tag-name-background-color: #5cb85c; - --tag-expression-background-color: #f0ad4e; - --tag-popular-background-color: #0275d8; - --tag-frequent-background-color: #5bc0de; - --tag-archaism-background-color: #d9534f; - --tag-dictionary-background-color: #aa66cc; - --tag-frequency-background-color: #5cb85c; - --tag-part-of-speech-background-color: #565656; - --tag-search-background-color: #8a8a91; - --tag-pitch-accent-dictionary-background-color: #6640be; - - --sidebar-background-color: #f8f9fa; - - --sidebar-button-background-color: transparent; - --sidebar-button-background-color-hover: #cccccc; - --sidebar-button-background-color-active: #aaaaaa; - --sidebar-button-danger-background-color: transparent; - --sidebar-button-danger-background-color-hover: #dd2222; - --sidebar-button-danger-background-color-active: #bb2222; - --sidebar-button-icon-color: #333333; - --sidebar-button-disabled-icon-color: #888888; - --sidebar-button-danger-icon-color: #ffffff; - - --scrollbar-thumb-color: #c1c1c1; - --scrollbar-track-color: #f1f1f1; - --scrollbar-inverse-thumb-color: #444444; - --scrollbar-inverse-track-color: #2f2f2f; - - --progress-bar-track-color: #cccccc; - --progress-bar-indicator-color: var(--accent-color); - --entry-current-indicator-color: var(--accent-color); - - --notification-text-color: #ffffff; - --notification-background-color: #333333; - --notification-shadow-color: rgba(0, 0, 0, 0.5); - - --action-button-active-color: var(--scrollbar-thumb-color); -} -:root[data-theme=dark] { - /* Colors */ - --background-color: #1e1e1e; - --glossary-image-background-color: #2f2f2f; - --link-color: var(--accent-color); - - --text-color: #d4d4d4; - --kanji-text-color: var(--text-color); - --kanji-popular-text-color: var(--accent-color); - --kanji-rare-text-color: var(--text-color-light4); - --kanji-furigana-text-color: inherit; - --reason-text-color: var(--text-color-light3); - - --light-border-color: #2f2f2f; - --medium-border-color: #3f3f3f; - --dark-border-color: #888888; - --kanji-border-color: var(--dark-border-color); - - --pitch-accent-annotation-color: #ffffff; - - --tag-text-color: #f1f1f1; - --tag-border-color: transparent; - --tag-default-background-color: #69696e; - --tag-name-background-color: #489148; - --tag-expression-background-color: #b07f39; - --tag-popular-background-color: #025caa; - --tag-frequent-background-color: #4490a7; - --tag-archaism-background-color: #b04340; - --tag-dictionary-background-color: #9057ad; - --tag-frequency-background-color: #489148; - --tag-part-of-speech-background-color: #565656; - --tag-search-background-color: #69696e; - --tag-pitch-accent-dictionary-background-color: #6640be; - - --sidebar-background-color: #282828; - - --sidebar-button-background-color: transparent; - --sidebar-button-background-color-hover: #3a3a3a; - --sidebar-button-background-color-active: #5a5a5a; - --sidebar-button-danger-background-color: transparent; - --sidebar-button-danger-background-color-hover: #dd2222; - --sidebar-button-danger-background-color-active: #bb2222; - --sidebar-button-icon-color: #cccccc; - --sidebar-button-disabled-icon-color: #777777; - --sidebar-button-danger-icon-color: #ffffff; - - --scrollbar-thumb-color: #444444; - --scrollbar-track-color: #2f2f2f; - --scrollbar-inverse-thumb-color: #c1c1c1; - --scrollbar-inverse-track-color: #f1f1f1; - - --progress-bar-track-color: #3a3a3a; - --progress-bar-indicator-color: var(--accent-color); - --entry-current-indicator-color: var(--accent-color); - - --notification-text-color: #2f2f2f; - --notification-background-color: #e1e1e1; - --notification-shadow-color: rgba(255, 255, 255, 0.25); - - --action-button-active-color: var(--scrollbar-thumb-color); -} - - -/* Fonts */ -@font-face { - font-family: kanji-stroke-orders; - src: url('/data/fonts/kanji-stroke-orders.ttf'); -} - - -/* General */ -:root[data-page-type=popup]:not([data-theme]), -:root[data-page-type=popup]:not([data-theme]) body { - background-color: transparent; -} -:root { - font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-size: var(--font-size); - line-height: var(--line-height); - height: 100%; -} -body { - margin: 0; - border: 0; - padding: 0; - height: 100%; - overflow: hidden; - background-color: var(--background-color); - color: var(--text-color); - font-size: inherit; -} -ol, ul { - margin-top: 0; - margin-bottom: var(--list-padding); -} -h2 { - font-size: var(--h2-font-size); - font-weight: normal; - margin: 0.25em 0 0; - border-bottom: calc(1em / (var(--font-size-no-units) * var(--h2-font-size-no-units))) solid var(--light-border-color); -} -h3 { - font-size: 1em; - font-weight: bold; - margin: 0.25em 0 0.375em; - padding: 0; -} -h5 { - font-size: calc(12em / 14); - margin: 0; - padding: 0; - font-weight: normal; -} -a { - color: var(--link-color); - text-decoration: underline; - cursor: pointer; -} - - -/* Selection */ -#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; -} - - -/* Scrollbars */ -:root:not([data-theme=default]) .scrollbar { - scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color); -} -:root:not([data-theme=default]) .scrollbar::-webkit-scrollbar { - width: auto; -} -:root:not([data-theme=default]) .scrollbar::-webkit-scrollbar-button { - height: 0; -} -:root:not([data-theme=default]) .scrollbar::-webkit-scrollbar-thumb { - background-color: var(--scrollbar-thumb-color); -} -:root:not([data-theme=default]) .scrollbar::-webkit-scrollbar-track { - background-color: var(--scrollbar-thumb-color); -} -:root:not([data-theme=default]) .scrollbar::-webkit-scrollbar-track-piece { - background-color: var(--scrollbar-track-color); -} -:root:not([data-theme=default]) .scrollbar::-webkit-scrollbar-corner { - background-color: var(--scrollbar-track-color); -} -:root .scrollbar-inverse { - scrollbar-color: var(--scrollbar-inverse-humb-color) var(--scrollbar-inverse-track-color); -} -:root .scrollbar-inverse::-webkit-scrollbar { - width: auto; -} -:root .scrollbar-inverse::-webkit-scrollbar-button { - height: 0; -} -:root .scrollbar-inverse::-webkit-scrollbar-thumb { - background-color: var(--scrollbar-inverse-thumb-color); -} -:root .scrollbar-inverse::-webkit-scrollbar-track { - background-color: var(--scrollbar-inverse-thumb-color); -} -:root .scrollbar-inverse::-webkit-scrollbar-track-piece { - background-color: var(--scrollbar-inverse-track-color); -} -:root .scrollbar-inverse::-webkit-scrollbar-corner { - background-color: var(--scrollbar-inverse-track-color); -} -.scrollbar-spacer { - display: inline-block; - overflow-x: hidden; - overflow-y: scroll; - visibility: hidden; - flex: 0 1 auto; -} - - -/* Main layout */ -.content { - flex: 1 1 auto; - position: relative; -} -.content-scroll { - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; - display: flex; - flex-flow: column nowrap; - overflow-x: hidden; - overflow-y: scroll; - align-items: stretch; - justify-content: flex-start; -} -.content-body { - flex: 1 1 auto; - position: relative; -} -.content-body-inner { - width: var(--main-content-size); - max-width: 100%; - box-sizing: border-box; - margin: 0 auto; - padding: var(--main-content-vertical-padding) var(--main-content-horizontal-padding); -} -.content-footer-container1 { - display: flex; - flex-flow: row nowrap; - position: absolute; - left: 0; - right: 0; - bottom: 0; - max-height: 100%; - pointer-events: none; - z-index: 5; -} -.content-footer-container2 { - display: flex; - flex-flow: row nowrap; - justify-content: center; - flex: 1 1 auto; - max-width: 100%; -} -.content-footer { - width: var(--main-content-size); - max-width: 100%; -} - - -/* Sidebar layout */ -.content-outer { - width: 100%; - height: 100%; - display: flex; - flex-flow: row nowrap; - overflow: hidden; - align-items: stretch; - align-content: stretch; - justify-content: center; -} -.content-sidebar { - flex: 0 0 auto; - height: 100%; - overflow-x: hidden; - overflow-y: auto; - background-color: var(--sidebar-background-color); - z-index: 10; - position: relative; - display: none; -} -:root[data-has-navigation-previous=true] .content-sidebar, -:root[data-has-navigation-next=true] .content-sidebar, -:root[data-popup-action-bar-visibility=always] .content-sidebar, -:root[data-profile-panel-visible=true] .content-sidebar { - display: block; -} -.content-sidebar-inner { - display: flex; - flex-flow: column nowrap; - width: var(--sidebar-width); - height: 100%; -} -.content-sidebar-top-pre { - flex: 0 0 auto; - display: flex; - flex-flow: column nowrap; -} -.content-sidebar-top { - flex: 1 1 auto; - display: flex; - flex-flow: column nowrap; -} -.content-sidebar-bottom { - position: sticky; - bottom: 0; - background-color: var(--sidebar-background-color); - display: flex; - flex-flow: column nowrap; -} -:root[data-popup-action-bar-location=top] .content-outer, -:root[data-popup-action-bar-location=bottom] .content-outer { - flex-flow: column nowrap; -} -:root[data-popup-action-bar-location=top] .content-sidebar, -:root[data-popup-action-bar-location=bottom] .content-sidebar { - height: auto; - width: 100%; -} -:root[data-popup-action-bar-location=left] .content-sidebar, -:root[data-popup-action-bar-location=top] .content-sidebar { - order: -1; -} -:root[data-popup-action-bar-location=top] .content-sidebar-inner, -:root[data-popup-action-bar-location=bottom] .content-sidebar-inner { - flex-flow: row nowrap; - width: auto; - height: var(--sidebar-button-height); -} -:root[data-popup-action-bar-location=top] .content-sidebar-top-pre, -:root[data-popup-action-bar-location=bottom] .content-sidebar-top-pre { - flex-flow: row nowrap; - order: 1; -} -:root[data-popup-action-bar-location=top] .content-sidebar-top, -:root[data-popup-action-bar-location=bottom] .content-sidebar-top { - flex-flow: row nowrap; -} -:root[data-popup-action-bar-location=top] .content-sidebar-bottom, -:root[data-popup-action-bar-location=bottom] .content-sidebar-bottom { - flex-flow: row nowrap; -} - - -/* Sidebar buttons */ -button.sidebar-button { - width: 100%; - height: var(--sidebar-button-height); - background-color: var(--sidebar-button-background-color); - margin: 0; - padding: 0; - border: 0; - cursor: pointer; - display: block; - transition: background-color 0.125s ease-in-out; - outline: none; - font-size: inherit; - border-radius: 0; - box-shadow: none; -} -:root[data-popup-action-bar-location=top] button.sidebar-button, -:root[data-popup-action-bar-location=bottom] button.sidebar-button { - width: var(--sidebar-width); - height: 100%; -} -button.sidebar-button:disabled { - cursor: default; -} -button.sidebar-button:hover, -button.sidebar-button:active, -button.sidebar-button:focus { - box-shadow: none; -} -button.sidebar-button:hover:not(:disabled), -button.sidebar-button:focus:not(:disabled) { - background-color: var(--sidebar-button-background-color-hover); -} -button.sidebar-button:active:not(:disabled) { - background-color: var(--sidebar-button-background-color-active); -} -button.sidebar-button.danger { - background-color: var(--sidebar-button-danger-background-color); -} -button.sidebar-button.danger:hover:not(:disabled), -button.sidebar-button.danger:focus:not(:disabled) { - background-color: var(--sidebar-button-danger-background-color-hover); -} -button.sidebar-button.danger:active:not(:disabled) { - background-color: var(--sidebar-button-danger-background-color-active); -} -.sidebar-button-icon { - --icon-size: var(--sidebar-button-icon-size) var(--sidebar-button-icon-size); - - display: block; - width: 100%; - height: 100%; - background-color: var(--sidebar-button-icon-color); - transition: background-color 0.125s ease-in-out; -} -button.sidebar-button:disabled .sidebar-button-icon { - background-color: var(--sidebar-button-disabled-icon-color); -} -button.sidebar-button.danger:hover .sidebar-button-icon, -button.sidebar-button.danger:focus .sidebar-button-icon { - background-color: var(--sidebar-button-danger-icon-color); -} -button.sidebar-button.sidebar-button-highlight>.sidebar-button-icon { - background-color: var(--accent-color); -} - - -/* Search page */ -#query-parser-container { - padding-left: var(--entry-horizontal-padding); - padding-right: var(--entry-horizontal-padding); - padding-bottom: 0.25em; - border-bottom: var(--expression-thin-border-size) solid var(--light-border-color); -} -#query-parser-content { - margin-top: 0.5em; - font-size: var(--query-parser-font-size); - white-space: pre-wrap; -} -#query-parser-content[data-term-spacing=true] .query-parser-term { - margin-right: 0.2em; -} - - -/* Action buttons */ -.actions { - display: flex; - flex-flow: row nowrap; - float: right; - margin: -0.25em; - position: relative; - z-index: 1; -} -.actions::after { - clear: both; - content: ''; - display: block; -} -button.action-button { - cursor: pointer; - display: block; - opacity: 1; - border: 0; - margin: 0; - padding: var(--action-button-padding); - background: transparent; - font-size: inherit; - box-shadow: none; - position: relative; - transition: - opacity var(--animation-duration) linear, - visibility 0s linear 0s, - filter var(--animation-duration) linear, - -webkit-filter var(--animation-duration) linear, - background-color var(--animation-duration) linear; -} -button.action-button[hidden] { - display: block; - visibility: hidden; - opacity: 0; - transition: - opacity var(--animation-duration) linear, - visibility 0s linear var(--animation-duration), - filter var(--animation-duration) linear, - -webkit-filter var(--animation-duration) linear, - background-color var(--animation-duration) linear; -} -button.action-button:disabled { - pointer-events: none; - cursor: default; - -webkit-filter: grayscale(100%); - filter: grayscale(100%); - background-color: transparent; -} -button.action-button:disabled:not([hidden]) { - opacity: 0.25; -} -button.action-button:hover, -button.action-button:focus { - background-color: transparent; - box-shadow: none; -} -button.action-button:active { - background-color: var(--action-button-active-color); - box-shadow: none; -} -button.action-button::before { - content: ''; - width: var(--action-button-size); - height: var(--action-button-size); - display: block; - background-color: transparent; - background-repeat: no-repeat; - background-size: contain; -} -button.action-button[data-icon=view-note]::before { - background-image: url('/images/view-note.svg'); -} -button.action-button[data-icon=add-term-kanji]::before { - background-image: url('/images/add-term-kanji.svg'); -} -button.action-button[data-icon=add-term-kana]::before { - background-image: url('/images/add-term-kana.svg'); -} -button.action-button[data-icon=play-audio]::before { - background-image: url('/images/play-audio.svg'); -} -button.action-button[data-icon=source-term]::before { - background-image: url('/images/source-term.svg'); -} -.entry[data-type=term][data-expression-multi=true] .actions>button.action-button.action-play-audio { - display: none; -} -.action-button-badge { - pointer-events: none; - position: absolute; - display: block; - right: 0; - top: 0; - width: calc(8em / var(--font-size-no-units)); - height: calc(8em / var(--font-size-no-units)); -} -.action-button-badge[data-icon=cross] { - background-color: var(--danger-color); -} -.action-button-badge[data-icon=plus-thick] { - background-color: var(--success-color); -} - - -/* Tags */ -.tag { - display: inline-block; - padding: 0.2em 0.6em 0.3em; - font-size: var(--tag-font-size); - font-weight: var(--tag-font-weight); - line-height: 1.25; - text-align: center; - white-space: nowrap; - vertical-align: baseline; - border-radius: 0.25em; - color: var(--tag-text-color); - background-color: var(--tag-default-background-color); - border: var(--tag-border-size) var(--tag-border-style) var(--tag-border-color); - margin-right: 0.375em; - cursor: pointer; -} -.tag[data-category=name] { - background-color: var(--tag-name-background-color); -} -.tag[data-category=expression] { - background-color: var(--tag-expression-background-color); -} -.tag[data-category=popular] { - background-color: var(--tag-popular-background-color); -} -.tag[data-category=frequent] { - background-color: var(--tag-frequent-background-color); -} -.tag[data-category=archaism] { - background-color: var(--tag-archaism-background-color); -} -.tag[data-category=dictionary] { - background-color: var(--tag-dictionary-background-color); -} -.tag[data-category=frequency] { - background-color: var(--tag-frequency-background-color); -} -.tag[data-category=partOfSpeech] { - background-color: var(--tag-part-of-speech-background-color); -} -.tag[data-category=search] { - background-color: var(--tag-search-background-color); -} -.tag[data-category=pitch-accent-dictionary] { - background-color: var(--tag-pitch-accent-dictionary-background-color); -} -.tag-inner { - display: block; -} -.tag-details-disambiguation-list::before { - content: 'Only: '; -} -.tag-details-disambiguation-list ruby>rt { - display: inline; - font-size: 1em; -} -.tag-details-disambiguation-list ruby>rt::before { - content: '('; -} -.tag-details-disambiguation-list ruby>rt::after { - content: ')'; -} -.tag-details-disambiguation-list[data-unmatched-expression-count='0'], -.tag-details-disambiguation-list:not([data-unmatched-expression-count]) { - display: none; -} -.tag-details-disambiguation:not(:last-child)::after { - content: ', '; -} - - -/* Entries */ -.entry { - padding: var(--entry-vertical-padding) var(--entry-horizontal-padding); - position: relative; -} -.kanji-link { - border-bottom: var(--expression-thin-border-size) dashed var(--kanji-border-color); - color: var(--kanji-text-color); - text-decoration: none; - cursor: pointer; -} -.term-expression-text-container { - display: inline-block; -} -.term-expression-text { - color: var(--kanji-text-color); - font-size: var(--expression-font-size); - display: inline-block; - position: relative; -} -.entry[data-expression-multi=true] .term-expression[data-frequency=popular] .term-expression-text, -.entry[data-expression-multi=true] .term-expression[data-frequency=popular] .kanji-link { - color: var(--kanji-popular-text-color); -} -.entry[data-expression-multi=true] .term-expression[data-frequency=rare] .term-expression-text, -.entry[data-expression-multi=true] .term-expression[data-frequency=rare] .kanji-link { - color: var(--kanji-rare-text-color); -} -.term-expression-text>ruby>rt { - color: var(--kanji-furigana-text-color); -} -.entry-header2, -.entry-header3 { - display: inline; -} -.entry+.entry { - border-top: var(--thin-border-size) solid var(--light-border-color); -} -.term-reasons { - display: inline-block; - color: var(--reason-text-color); -} -.term-reasons:empty { - display: none; -} -.term-reasons>.term-reason+.term-reason-separator+.term-reason::before { - content: ' \00AB '; /* The two spaces is not a typo */ - white-space: pre-wrap; - display: inline; -} -.term-expression-list { - display: inline; -} -.term-expression { - display: inline-block; -} -.term-expression-details { - display: inline; -} -.term-expression-details>.tags { - display: none; -} -.term-expression-details>.frequencies { - display: none; -} -.term-expression-list>.term-expression:not(:last-of-type)>.term-expression-text-container>.term-expression-text::after { - content: '\3001'; -} -.term-details { - display: inline; -} -.term-tags { - display: inline; -} -.entry[data-expression-multi=true] .term-details { - display: block; -} - - -/* Entry indicator */ -.entry-current-indicator { - display: block; - position: absolute; - left: calc(-1 * var(--main-content-horizontal-padding)); - top: 0; - bottom: 0; - width: 0; - background-color: var(--entry-current-indicator-color); - visibility: hidden; - transition: - width var(--entry-current-indicator-transition-duration) linear, - visibility 0s linear var(--entry-current-indicator-transition-duration); -} -.entry.entry-current .entry-current-indicator { - width: var(--entry-current-indicator-width); - visibility: visible; - transition: - width var(--entry-current-indicator-transition-duration) linear, - visibility 0s linear 0s; -} -:root[data-popup-current-indicator-mode=bar-right] .entry-current-indicator, -:root[data-popup-current-indicator-mode=dot-right] .entry-current-indicator { - left: auto; - right: 0; -} -.entry-current-indicator-inner { - display: none; - pointer-events: auto; - width: 100%; - height: 0; - top: 0; - background-color: var(--entry-current-indicator-color); - transition: none; -} -.entry.entry-current .entry-current-indicator-inner { - height: var(--entry-current-indicator-width); - transition: height var(--entry-current-indicator-transition-duration) linear; -} -:root[data-popup-current-indicator-mode=dot-left] .entry-current-indicator, -:root[data-popup-current-indicator-mode=dot-right] .entry-current-indicator { - background-color: transparent; -} -:root[data-popup-current-indicator-mode=dot-left] .entry-current-indicator-inner, -:root[data-popup-current-indicator-mode=dot-right] .entry-current-indicator-inner { - display: block; - position: sticky; - transition: height var(--entry-current-indicator-transition-duration) linear; -} -:root[data-popup-current-indicator-mode=none] .entry-current-indicator, -:root[data-popup-current-indicator-mode=asterisk] .entry-current-indicator, -:root[data-popup-current-indicator-mode=triangle] .entry-current-indicator { - display: none; - transition: none; -} - - -/* Triangle entry indicator */ -.term-expression-current-indicator { - pointer-events: none; - position: absolute; - left: calc(-1 * var(--main-content-horizontal-padding)); - top: 0; - bottom: 0; - opacity: 0; - visibility: hidden; - transition: - opacity var(--entry-current-indicator-transition-duration) linear, - visibility 0s linear var(--entry-current-indicator-transition-duration); -} -.term-expression-text .term-expression-current-indicator { - font-size: calc(1em / var(--expression-font-size-no-units)); -} -.entry.entry-current .term-expression-current-indicator { - opacity: 1; - visibility: visible; - transition: - opacity var(--entry-current-indicator-transition-duration) linear, - visibility 0s linear 0s; -} -.term-expression-current-indicator::after { - content: ''; - display: block; - position: absolute; - width: var(--entry-current-indicator-triangle-size); - height: calc(2 * var(--entry-current-indicator-triangle-size)); - left: calc(-1 * var(--entry-horizontal-padding)); - top: calc(50% - var(--entry-current-indicator-triangle-size)); - background-color: var(--entry-current-indicator-color); - mask-repeat: no-repeat; - mask-position: center center; - mask-mode: alpha; - mask-size: contain; - mask-image: url(/images/material-right-arrow.svg); - -webkit-mask-repeat: no-repeat; - -webkit-mask-position: center center; - -webkit-mask-mode: alpha; - -webkit-mask-size: contain; - -webkit-mask-image: url(/images/material-right-arrow.svg); -} -.term-expression:not(:first-of-type) .term-expression-current-indicator, -:root:not([data-popup-current-indicator-mode=triangle]) .term-expression-current-indicator { - display: none; - transition: none; -} - - -/* Old entry indicator */ -.entry-current-indicator-icon { - display: block; - padding: var(--action-button-padding); -} -.entry-current-indicator-icon[hidden], -.entry:not(.entry-current) .entry-current-indicator-icon, -:root:not([data-popup-current-indicator-mode=asterisk]) .entry-current-indicator-icon { - display: none; -} -.entry-current-indicator-icon::before { - content: ''; - width: var(--action-button-size); - height: var(--action-button-size); - display: block; - background-color: transparent; - background-repeat: no-repeat; - background-size: contain; - background-image: url('/images/entry-current.svg'); -} - - -/* Merged term styles */ -.entry[data-expression-multi=true] .term-expression-list, -.entry:not([data-expression-multi=true]) .term-expression-text-container { - margin-right: var(--expression-space-size); -} -.entry[data-expression-multi=true] .term-expression-list .term-expression-details { - display: inline-block; - position: relative; - width: 0; - height: 0; - visibility: hidden; - z-index: 1; -} -.entry[data-expression-multi=true] .term-expression-list>.term-expression:not(:last-of-type) .term-expression-details { - left: calc(-1 * var(--expression-font-size)); -} -.entry[data-expression-multi=true] .term-expression:hover .term-expression-details { - visibility: visible; -} -.entry[data-expression-multi=true] .term-expression-list .term-expression-details>.action-play-audio { - position: absolute; - left: 0; - bottom: 0.5em; -} -.entry:not([data-expression-multi=true]) .term-expression-list .term-expression-details>.action-play-audio { - display: none; -} -.entry[data-expression-multi=true] .term-expression-list .term-expression-details>.tags { - display: block; - position: absolute; - left: 0; - bottom: -0.5em; - white-space: nowrap; -} - - -/* Definitions */ -.term-definition-list { - margin: 0; - padding: 0 0 0 var(--list-padding1); - list-style-type: decimal; -} -.term-definition-list[data-count='0'], -.term-definition-list[data-count='1'] { - padding-left: 0; - list-style-type: none; -} -.term-glossary-list { - margin: 0; - padding: 0 0 0 var(--list-padding2); - list-style-type: circle; -} -.term-glossary-list[data-count='0'], -.term-glossary-list[data-count='1'] { - padding-left: 0; - list-style-type: none; -} -.term-definition-item::marker, -.term-glossary-item::marker { - color: var(--text-color-light3); -} -.term-glossary { - white-space: pre-line; -} -.term-definition-disambiguation-list { - color: var(--text-color-light3); -} -.term-definition-disambiguation-list[data-count='0'] { - display: none; -} -.term-definition-disambiguation-list::before { - content: '('; -} -.term-definition-disambiguation-list::after { - content: ' only) '; -} -.term-definition-disambiguation+.term-definition-disambiguation::before { - content: ', '; -} -.term-glossary-separator, -.term-reason-separator { - display: inline; - font-size: 0; - opacity: 0; - white-space: pre-wrap; -} -.entry-body { - margin-top: -0.5em; -} -.entry-body-section { - margin-top: 0.5em; -} -.entry[data-definition-count='0'] .entry-body-section[data-section-type=definitions], -.entry[data-frequency-count='0'] .entry-body-section[data-section-type=frequencies], -.entry[data-pitch-accent-count='0'] .entry-body-section[data-section-type=pitch-accents] { - display: none; -} -.entry[data-pitch-accent-count='0'][data-frequency-count='0'] .entry-body-section[data-section-type=definitions]>h5 { - display: none; -} - - -/* Frequencies */ -.frequency-group-list { - margin: 0; - padding: 0 0 0 var(--list-padding1); - list-style-type: decimal; -} -.frequency-group-list[data-count='0'], -.frequency-group-list[data-count='1'] { - padding-left: 0; - list-style-type: none; -} -.frequency-list { - margin: 0; - padding: 0 0 0 var(--list-padding2); - list-style-type: circle; -} -.frequency-list[data-count='0'], -.frequency-list[data-count='1'] { - padding-left: 0; - list-style-type: none; -} -.frequency-group-item::marker, -.frequency-item::marker { - color: var(--text-color-light3); -} -.frequency-disambiguation { - color: var(--text-color-light3); -} -.frequency-separator::before { - content: ''; -} -.frequency-disambiguation-separator::before { - content: ':'; -} -.frequency-disambiguation::before { - content: '('; -} -.frequency-disambiguation::after { - content: ' only) '; -} -.frequency-disambiguation-reading { - display: inline; - font-size: 1em; -} -.entry[data-unique-expression-count='1'] .frequency-item[data-has-reading=false] .frequency-disambiguation, -.entry[data-unique-reading-count='1'][data-unique-expression-count='1'] .frequency-disambiguation, -.frequency-item[data-reading-is-same=true] .frequency-disambiguation-separator, -.frequency-item[data-reading-is-same=true] .frequency-disambiguation-reading, -.frequency-item[data-has-reading=false] .frequency-disambiguation-separator, -.frequency-item[data-has-reading=false] .frequency-disambiguation-reading, -.entry[data-unique-expression-count='1'] .frequency-disambiguation-separator, -.entry[data-unique-expression-count='1'] .frequency-disambiguation-expression, -.entry[data-unique-reading-count='1'] .frequency-disambiguation-separator, -.entry[data-unique-reading-count='1'] .frequency-disambiguation-reading { - display: none; -} -:root[data-glossary-layout-mode=compact] .frequency-group-list, -:root[data-glossary-layout-mode=compact] .frequency-list, -.frequency-list[data-count='1'] { - display: inline; - list-style: none; - padding-left: 0; -} -:root[data-glossary-layout-mode=compact] .frequency-group-item { - display: inline-block; - margin-right: 1em; -} -:root[data-glossary-layout-mode=compact] .entry-body-section[data-section-type=frequencies] { - margin-right: -1em; -} -:root[data-glossary-layout-mode=compact] .frequency-item, -.frequency-list[data-count='1'] .frequency-item { - display: inline-block; -} -:root[data-glossary-layout-mode=compact] .frequency-item:not(:first-child)::before, -.frequency-list[data-count='1'] .frequency-item:not(:first-child)::before { - white-space: pre-wrap; - content: var(--compact-list-separator); - display: inline; - color: var(--text-color-light3); -} -:root[data-glossary-layout-mode=compact] .frequency-tag-list, -.frequency-group-item[data-count='1'] .frequency-tag-list { - display: inline; -} - - -/* Pitch accent styles */ -.term-pitch-accent-group-list { - margin: 0; - padding: 0 0 0 var(--list-padding1); - list-style-type: decimal; -} -.term-pitch-accent-group-list[data-count='0'], -.term-pitch-accent-group-list[data-count='1'] { - padding-left: 0; - list-style-type: none; -} -.term-pitch-accent-list { - margin: 0; - padding: 0 0 0 var(--list-padding2); - list-style-type: circle; - display: block; -} -.term-pitch-accent-list[data-count='0'], -.term-pitch-accent-list[data-count='1'] { - padding-left: 0; - list-style-type: none; - display: inline; -} -.term-pitch-accent-group::marker, -.term-pitch-accent::marker { - color: var(--text-color-light3); -} -.term-pitch-accent { - display: list-item; - line-height: 1.5; -} -.term-pitch-accent-list[data-count='0'] .term-pitch-accent, -.term-pitch-accent-list[data-count='1'] .term-pitch-accent { - display: inline; -} -.term-pitch-accent-group-tag-list { - margin-right: 0.375em; -} -.term-pitch-accent-disambiguation-list { - padding-right: 0.25em; - color: var(--text-color-light3); -} -.term-pitch-accent-disambiguation-list::before { - content: '('; -} -.term-pitch-accent-disambiguation-list::after { - content: ' only)'; -} -.term-pitch-accent-disambiguation+.term-pitch-accent-disambiguation::before { - content: ', '; -} -.term-pitch-accent-disambiguation-list[data-count='0'] { - display: none; -} -.term-pitch-accent-tag-list:not([data-count='0']) { - margin-right: 0.375em; -} -.term-pitch-accent-character { - display: inline-block; - position: relative; -} -.term-pitch-accent-character::before { - border-color: var(--pitch-accent-annotation-color); -} -.term-pitch-accent-character[data-pitch='high']::before { - content: ''; - display: block; - user-select: none; - pointer-events: none; - position: absolute; - top: 0.1em; - left: 0; - right: 0; - height: 0; - border-top-width: 0.1em; - border-top-style: solid; -} -.term-pitch-accent-character[data-pitch='high'][data-pitch-next='low']::before { - right: -0.1em; - height: 0.4em; - border-right-width: 0.1em; - border-right-style: solid; -} -.term-pitch-accent-character[data-pitch='high'][data-pitch-next='low'] { - padding-right: 0.1em; - margin-right: 0.1em; -} -.term-pitch-accent-position::before { - content: ' ['; -} -.term-pitch-accent-position::after { - content: ']'; -} -.term-pitch-accent-details { - display: inline-block; - height: 0; - padding: 0 0.25em; - vertical-align: middle; -} - - -/* Pitch accent graph styles */ -.term-pitch-accent-graph { - display: block; - height: 1.5em; - transform: translateY(-0.875em); -} -.term-pitch-accent-graph-line, -.term-pitch-accent-graph-line-tail { - fill: none; - stroke: var(--pitch-accent-annotation-color); - stroke-width: 5; -} -.term-pitch-accent-graph-line-tail { - stroke-dasharray: 5 5; -} -#term-pitch-accent-graph-dot { - fill: var(--pitch-accent-annotation-color); - stroke: var(--pitch-accent-annotation-color); - stroke-width: 5; -} -#term-pitch-accent-graph-dot-downstep { - fill: none; - stroke: var(--pitch-accent-annotation-color); - stroke-width: 5; -} -#term-pitch-accent-graph-dot-downstep>circle:last-of-type { - fill: var(--pitch-accent-annotation-color); -} -#term-pitch-accent-graph-triangle { - fill: none; - stroke: var(--pitch-accent-annotation-color); - stroke-width: 5; -} - - -/* Glossary images */ -.term-glossary-image-container { - display: inline-block; - white-space: nowrap; - max-width: 100%; - position: relative; - vertical-align: top; - line-height: 0; - font-size: calc(1em / var(--font-size-no-units)); - overflow: hidden; - background-color: var(--glossary-image-background-color); -} -.term-glossary-image-link { - cursor: inherit; - color: inherit; -} -.term-glossary-image-link[href]:hover { - cursor: pointer; -} -.term-glossary-image-container-overlay { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - font-size: calc(1em * var(--font-size-no-units)); - line-height: var(--line-height); - display: table; - table-layout: fixed; - white-space: normal; - color: var(--text-color-light3); -} -.term-glossary-item[data-has-image=true][data-image-load-state=load-error] .term-glossary-image-container-overlay::after { - content: 'Image failed to load'; - display: table-cell; - width: 100%; - height: 100%; - vertical-align: middle; - text-align: center; - padding: 0.25em; -} -.term-glossary-image { - display: inline-block; - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - vertical-align: top; - object-fit: contain; - border: none; - outline: none; -} -.term-glossary-image:not([src]) { - display: none; -} -.term-glossary-image[data-pixelated=true] { - image-rendering: auto; - image-rendering: -moz-crisp-edges; - image-rendering: -webkit-optimize-contrast; - image-rendering: pixelated; - image-rendering: crisp-edges; -} -.term-glossary-image-aspect-ratio-sizer { - content: ''; - display: inline-block; - width: 0; - vertical-align: top; - font-size: 0; -} -.term-glossary-image-link-text::before { - content: '['; -} -.term-glossary-image-link-text::after { - content: ']'; -} -.term-glossary-image-description { - white-space: pre-line; -} - - -/* Kanji */ -.kanji-glyph-container { - display: block; - position: relative; -} -.kanji-glyph { - font-family: kanji-stroke-orders, sans-serif; - font-size: 8.5em; - line-height: 1; - padding: 0.01em; - vertical-align: top; - position: relative; - z-index: -1; -} -.kanji-glyph-data { - margin-top: 0.75em; - border-spacing: 0; - border-collapse: collapse; -} -.kanji-glyph-data>tbody>tr>* { - border-top: var(--thin-border-size) solid var(--medium-border-color); - text-align: left; - vertical-align: top; - padding: 0.36em; - margin: 0; -} -.kanji-info-table { - width: 100%; -} -.kanji-info-table>tbody>tr>th, -.kanji-info-table>tbody>tr>td { - text-align: left; - vertical-align: top; - padding: 0; - margin: 0; -} -.kanji-info-table>tbody>tr>td { - text-align: right; -} -.kanji-glyph-data dl { - margin-top: 0; - margin-bottom: 1.4em; -} -.kanji-glyph-data dd { - margin-left: 0; -} -.kanji-glossary-list { - margin: 0; - padding: 0 0 0 var(--list-padding1); - list-style-type: decimal; -} -.kanji-glossary-list[data-count='0'], -.kanji-glossary-list[data-count='1'] { - padding-left: 0; - list-style-type: none; -} -.kanji-glossary-item::marker { - color: var(--text-color-light3); -} -.kanji-glossary { - white-space: pre-line; -} - - -/* Progress bar */ -@keyframes progress-bar-indeterminant1a { - 0% { left: 0; } - 25% { left: 0; } - 75% { left: 100%; } - 100% { left: 100%; } -} -@keyframes progress-bar-indeterminant1b { - 0% { right: 100%; } - 50% { right: 0; } - 100% { right: 0; } -} -@keyframes progress-bar-indeterminant2a { - 0% { left: 0; } - 25% { left: 0; } - 100% { left: 100%; } -} -@keyframes progress-bar-indeterminant2b { - 0% { right: 100%; } - 75% { right: 0; } - 100% { right: 0; } -} -.progress-bar-indeterminant { - display: block; - width: 100%; - height: 0; - background-color: var(--progress-bar-indicator-color); - position: relative; - transition: - height var(--progress-bar-active-transition-duration) linear var(--progress-bar-active-transition-duration), - background-color var(--progress-bar-active-transition-duration) linear; -} -.progress-bar-indeterminant[data-active=true] { - height: var(--progress-bar-height); - background-color: var(--progress-bar-track-color); - transition: - height var(--progress-bar-active-transition-duration) linear var(--progress-bar-active-transition-start-delay), - background-color 0s linear; -} -.progress-bar-indeterminant[hidden]:not([data-active=true]) { - display: none; -} -.progress-bar-indeterminant::before, -.progress-bar-indeterminant::after { - content: ''; - display: block; - position: absolute; - left: 0; - top: 0; - bottom: 0; - right: 100%; - background-color: var(--progress-bar-indicator-color); - animation: none; -} -.progress-bar-indeterminant:not([hidden])::before { - animation: - progress-bar-indeterminant1a var(--progress-bar-animation-duration) infinite ease-in-out var(--progress-bar-active-transition-start-delay), - progress-bar-indeterminant1b var(--progress-bar-animation-duration) infinite ease-in-out var(--progress-bar-active-transition-start-delay); -} -.progress-bar-indeterminant:not([hidden])::after { - animation: - progress-bar-indeterminant2a var(--progress-bar-animation-duration) infinite ease-in-out calc(var(--progress-bar-active-transition-start-delay) + 0.375 * var(--progress-bar-animation-duration)), - progress-bar-indeterminant2b var(--progress-bar-animation-duration) infinite ease-in-out calc(var(--progress-bar-active-transition-start-delay) + 0.375 * var(--progress-bar-animation-duration)); -} -.top-progress-bar-container { - position: sticky; - top: 0; - height: 0; - pointer-events: none; - z-index: 10; -} - - -/* Frame resizer */ -.frame-resizer-container { - position: fixed; - bottom: 0; - right: 0; - z-index: 100; - background: transparent; - pointer-events: none; - user-select: none; -} -.frame-resizer-sizer1 { - padding-top: 100%; - line-height: 0; -} -.frame-resizer-sizer2 { - display: inline-block; - overflow-x: hidden; - overflow-y: scroll; - vertical-align: bottom; -} -.frame-resizer-sizer2.frame-resizer-sizer2-with-min-size { - min-width: 1em; -} -.frame-resizer-svg { - display: block; - position: absolute; - bottom: 0; - right: 0; - width: 75%; - height: 75%; -} -.frame-resizer-handle { - fill: var(--text-color); - opacity: 0.125; - cursor: se-resize; - pointer-events: auto; - transition: - fill var(--animation-duration) linear, - opacity var(--animation-duration) linear; -} -.frame-resizer-handle:hover, -:root[data-is-resizing=true] .frame-resizer-handle { - fill: var(--accent-color); - opacity: 1; -} - - -/* Footer notifications */ -.footer-notification { - display: flex; - flex-flow: row nowrap; - align-items: flex-start; - pointer-events: auto; - border-radius: 0.25em; - background-color: var(--notification-background-color); - box-shadow: 0 0.125em 0.25em 0 var(--notification-shadow-color); - color: var(--notification-text-color); - margin: 0.5em; - padding: 0; - transition: opacity var(--animation-duration) ease-out; - position: relative; - overflow: auto; - max-height: calc(0.5em * 2 + var(--line-height) * 4 * 1em); -} -.footer-notification[hidden] { - display: flex; - opacity: 0; - transition: opacity var(--animation-duration) ease-in; -} -.footer-notification-body { - flex: 1 1 auto; - padding: 0.5em 0.75em; -} -.footer-notification-close-button-container { - align-self: stretch; - display: flex; - flex-flow: column nowrap; - align-items: center; - justify-content: center; - padding: 0.25em 0.75em 0.25em 0; - position: sticky; - top: 0; - right: 0; -} -button.footer-notification-close-button, -button.footer-notification-close-button:focus, -button.footer-notification-close-button:hover, -button.footer-notification-close-button:active { - flex: 0 0 auto; - background-color: transparent; - margin: -0.25em; - padding: 0.5em; - border: none; - outline: none; - cursor: pointer; - font-size: inherit; - box-shadow: none; -} -.footer-notification-close-button-icon { - display: block; - width: calc(16em / var(--font-size-no-units)); - height: calc(16em / var(--font-size-no-units)); - background-color: var(--notification-text-color); -} - - -/* Overlays */ -.overlay-panel-container { - pointer-events: none; - position: absolute; - left: 0; - top: 0; - bottom: 0; - right: 0; - z-index: 6; -} -.overlay-panel { - pointer-events: auto; - background-color: var(--background-color); - display: block; - position: absolute; - left: 0; - top: 0; - bottom: 0; - width: var(--main-content-size); - max-width: 100%; - box-sizing: border-box; - margin: 0 auto; - padding: var(--main-content-vertical-padding) var(--main-content-horizontal-padding); - overflow-y: scroll; - transform: none; - opacity: 1; - visibility: visible; - transition: - opacity var(--animation-duration2) ease-out, - visibility 0s linear, - transform var(--animation-duration2) ease-out; -} -.overlay-panel[hidden] { - transform: translate(var(--overlay-panel-translate-distance), 0); - opacity: 0; - visibility: hidden; - transition: - opacity var(--animation-duration2) ease-in, - visibility 0s linear var(--animation-duration2), - transform var(--animation-duration2) ease-in; -} -.overlay-panel[hidden]:not(.hidden-animating) { - display: none; -} -:root[data-popup-action-bar-location=left] .overlay-panel[hidden] { - transform: translate(calc(-1 * var(--overlay-panel-translate-distance)), 0); -} -:root[data-popup-action-bar-location=top] .overlay-panel[hidden] { - transform: translate(0, calc(-1 * var(--overlay-panel-translate-distance))); -} -:root[data-popup-action-bar-location=bottom] .overlay-panel[hidden] { - transform: translate(0, var(--overlay-panel-translate-distance)); -} -.overlay-panel-inner { - padding: var(--entry-vertical-padding) var(--entry-horizontal-padding); -} - - -/* Profile panel */ -.profile-list { - display: flex; - flex-flow: column nowrap; - align-items: stretch; -} -.profile-list-item { - display: flex; - flex-flow: row nowrap; - align-items: center; - cursor: pointer; -} -.profile-list-item-selection { - flex: 0 0 auto; - text-align: center; - padding: 0.25em 0.5em 0.25em 0; -} -.profile-list-item-name { - flex: 1 1 auto; - padding: 0.25em 0; -} - - -/* Audio menu */ -.audio-button-popup-menu[data-show-icons=false] .popup-menu-item-icon { - display: none; -} -.popup-menu-item-icon[data-icon=checkmark] { - background-color: var(--success-color); -} -.popup-menu-item-icon[data-icon=cross] { - background-color: var(--danger-color); -} -.popup-menu-item[data-source-in-options=false][data-valid=null] { - color: var(--text-color-light1); -} - - -/* Anki errors */ -.anki-note-error-list { - margin: 0; - padding-left: 1.5em; - list-style: disc; -} - - -/* Conditional styles */ -:root:not([data-enable-search-tags=true]) .tag[data-category=search] { - display: none; -} -:root[data-compact-tags=true] .tag[data-redundant=true] { - display: none; -} - -:root:not([data-debug=true]) .debug-info { - display: none; -} -:root[data-anki-enabled=false] .action-view-note, -:root[data-anki-enabled=false] .action-add-note { - display: none; -} -:root[data-audio-enabled=false] .action-play-audio { - display: none; -} -:root[data-glossary-layout-mode=compact] .term-definition-tag-list, -:root[data-glossary-layout-mode=compact] .term-definition-disambiguation-list:not([data-count='0']) { - display: inline; -} -:root[data-glossary-layout-mode=compact] .term-glossary-list { - display: inline; - list-style: none; - padding-left: 0; -} -:root[data-glossary-layout-mode=compact] .term-glossary-item { - display: inline; -} -:root[data-glossary-layout-mode=compact] .term-glossary-item:not(:first-child)::before { - white-space: pre-wrap; - content: var(--compact-list-separator); - display: inline; - color: var(--text-color-light3); -} - -:root[data-glossary-layout-mode=compact] .entry-body-section>h5 { - display: none; -} -:root[data-glossary-layout-mode=compact] .entry-body { - margin-top: 0; -} -:root[data-glossary-layout-mode=compact] .entry-body-section { - margin-top: 0; -} -:root[data-show-pitch-accent-downstep-notation=true] .term-pitch-accent-disambiguation-list[data-expression-count='0'], -:root[data-show-pitch-accent-downstep-notation=true] .term-pitch-accent-disambiguation[data-type=reading] { - display: none; -} -:root[data-show-pitch-accent-downstep-notation=false] .term-pitch-accent-characters { - display: none; -} -:root[data-show-pitch-accent-position-notation=false] .term-pitch-accent-position { - display: none; -} -:root[data-show-pitch-accent-graph=false] .term-pitch-accent-details { - display: none; -} - -:root[data-glossary-layout-mode=compact][data-show-pitch-accent-graph=false] .term-pitch-accent-list:not([data-has-tags=true]) { - display: inline; - list-style: none; - padding-left: 0; -} -:root[data-glossary-layout-mode=compact][data-show-pitch-accent-graph=false] .term-pitch-accent-list:not([data-has-tags=true]) .term-pitch-accent { - display: inline; -} -:root[data-glossary-layout-mode=compact][data-show-pitch-accent-graph=false] .term-pitch-accent-list:not([data-has-tags=true]) .term-pitch-accent:not(:first-child)::before { - white-space: pre-wrap; - content: var(--compact-list-separator); - display: inline; - color: var(--text-color-light3); -} - -:root[data-glossary-layout-mode=compact] .term-glossary-image-container { - display: none; - position: absolute; - left: 0; - top: 100%; - z-index: 1; -} -:root[data-glossary-layout-mode=compact] .entry:nth-last-of-type(1):not(:nth-of-type(1)) .term-glossary-image-container { - bottom: 100%; - top: auto; -} -:root[data-glossary-layout-mode=compact] .term-glossary-image-link { - position: relative; - display: inline-block; -} -:root[data-glossary-layout-mode=compact] .term-glossary-image-link:hover .term-glossary-image-container, -:root[data-glossary-layout-mode=compact] .term-glossary-image-link:focus .term-glossary-image-container { - display: block; -} -:root:not([data-glossary-layout-mode=compact]) .term-glossary-image-link-text { - display: none; -} -:root:not([data-glossary-layout-mode=compact]) .term-glossary-image-description { - display: block; -} - -:root[data-popup-display-mode=full-width] .frame-resizer-container { - display: none; -} diff --git a/ext/mixed/css/material.css b/ext/mixed/css/material.css deleted file mode 100644 index 1177baa1..00000000 --- a/ext/mixed/css/material.css +++ /dev/null @@ -1,996 +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 . - */ - -/* Variables */ -:root { - --font-size-no-units: 14; - --font-size: calc(1px * var(--font-size-no-units)); - - --font-size-small-no-units: 12; - --font-size-small: calc(1em * var(--font-size-small-no-units) / var(--font-size-no-units)); - - --animation-duration: 0.125s; - --animation-duration2: calc(var(--animation-duration) * 2); - - --checkbox-size: calc(16em / var(--font-size-no-units)); - --icon-button-size: calc(36em / var(--font-size-no-units)); - --radio-size: calc(20em / var(--font-size-no-units)); - --toggle-size: calc(16em / var(--font-size-no-units)); - - --input-font-size-no-units: 1; - --input-font-size: calc(1em * var(--input-font-size-no-units)); - --input-spacing: calc(10em / var(--font-size-no-units)); - --input-width: calc(100em / (var(--font-size-no-units) * var(--input-font-size-no-units)) - var(--input-spacing) / 2); - --input-width-large: calc(200em / (var(--font-size-no-units) * var(--input-font-size-no-units))); - --input-height: calc(32em / (var(--font-size-no-units) * var(--input-font-size-no-units))); - --input-border-radius: 0.25em; - --textarea-line-height: 1.25em; - --textarea-padding: 0.5em; - - --material-arrow-dimension1: calc(5em / var(--font-size-no-units)); - --material-arrow-dimension2: calc(10em / var(--font-size-no-units)); - - --button-shadow-params: 0 0.0625em 0.125em 0; - - --thin-border-size: calc(1em / var(--font-size-no-units)); - - --menu-border-radius: 0.3em; - --menu-shadow: 0 1px 3px 1px var(--shadow-color), 0 2px 4px 3px var(--shadow-color); - - --text-color: #222222; - --text-color-light1: #555555; - --text-color-light2: #666666; - --text-color-light3: #777777; - --text-color-light4: #888888; - --background-color: #f8f9fa; - --background-color-light: #ffffff; - - --shadow-color: rgba(0, 0, 0, 0.185); - --shadow-color-off: rgba(0, 0, 0, 0); - --shadow-color-light: rgba(0, 0, 0, 0.085); - - --accent-color: #1a73e8; - --accent-color-light: #4a91ed; - --accent-color-lighter: #8db9f4; - --accent-color-lightest: #a7c9f6; - --accent-color-dark: #1060c0; - --accent-color-transparent0: rgba(28, 116, 233, 0); - --accent-color-transparent5: rgba(28, 116, 233, 0.05); - --accent-color-transparent25: rgba(28, 116, 233, 0.25); - - --danger-color: #c83c28; - --danger-color-light: #dd6755; - --danger-color-lighter: #e68d7f; - --danger-color-lightest: #eeb3aa; - --danger-color-transparent0: rgba(200, 60, 40, 0); - --danger-color-transparent5: rgba(200, 60, 40, 0.05); - --danger-color-transparent25: rgba(200, 60, 40, 0.25); - - --success-color: #51ab30; - - --disabled-color: #aaaaaa; - --disabled-color-light: #dddddd; - --disabled-color-lighter: #eeeeee; - - --input-background-color: #f2f2f2; - --input-background-color-dark: #dddddd; - --input-background-color-darker: #cccccc; - --input-outline-color: var(--text-color); - - --button-text-color: #ffffff; - --button-border-color: #cccccc; - --button-icon-color: #333333; - --button-icon-color-light: #666666; - - --checkbox-checked-color: var(--accent-color); - --checkbox-unchecked-color: #666666; - --checkbox-check-color: var(--background-color-light); - --checkbox-disabled-color: var(--disabled-color); - - --toggle-track-color: #cccccc; - --toggle-knob-color: var(--background-color-light); - - --selectable-indicator-color: rgba(160, 160, 160, 0.25); - - --menu-item-hover-color: #bbbbbb; - --menu-item-active-color: #aaaaaa; -} -:root[data-theme=dark] { - --text-color: #d4d4d4; - --text-color-light1: #aaaaaa; - --text-color-light2: #999999; - --text-color-light3: #888888; - --text-color-light4: #777777; - --background-color: #1e1e1e; - --background-color-light: #0a0a0a; - - --shadow-color: rgba(255, 255, 255, 0.185); - --shadow-color-off: rgba(255, 255, 255, 0); - --shadow-color-light: rgba(255, 255, 255, 0.085); - - --accent-color: #4a91ed; - --accent-color-light: #1a73e8; - --accent-color-lighter: #135dbe; - --accent-color-lightest: #0e4690; - --accent-color-transparent0: rgb(78, 172, 253, 0); - --accent-color-transparent5: rgb(78, 172, 253, 0.05); - --accent-color-transparent25: rgb(78, 172, 253, 0.25); - - --danger-color: #dd6755; - --danger-color-light: #c83c28; - --danger-color-lighter: #9e301f; - --danger-color-lightest: #732317; - --danger-color-transparent0: rgba(221, 103, 85, 0); - --danger-color-transparent5: rgba(221, 103, 85, 0.05); - --danger-color-transparent25: rgba(221, 103, 85, 0.25); - - --success-color: #75cf54; - - --disabled-color: #444444; - --disabled-color-light: #585858; - --disabled-color-lighter: #777777; - - --input-background-color: #2f2f2f; - --input-background-color-dark: #383838; - --input-background-color-darker: #484848; - --input-outline-color: var(--text-color); - - --button-text-color: #000000; - --button-border-color: #333333; - --button-icon-color: #cccccc; - --button-icon-color-light: #999999; - - --checkbox-unchecked-color: #999999; - - --toggle-track-color: #cccccc; - --toggle-knob-color: #ffffff; - - --selectable-indicator-color: rgba(100, 100, 100, 0.25); - - --menu-item-hover-color: #333333; - --menu-item-active-color: #444444; -} - - -/* 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=none] { --icon-image: linear-gradient(transparent, transparent); } -.icon[data-icon=profile] { --icon-image: url(/images/profile.svg); } -.icon[data-icon=cog] { --icon-image: url(/images/cog.svg); } -.icon[data-icon=palette] { --icon-image: url(/images/palette.svg); } -.icon[data-icon=popup] { --icon-image: url(/images/popup.svg); } -.icon[data-icon=speaker] { --icon-image: url(/images/speaker.svg); } -.icon[data-icon=scanning] { --icon-image: url(/images/scanning.svg); } -.icon[data-icon=text-parsing] { --icon-image: url(/images/text-parsing.svg); } -.icon[data-icon=translation] { --icon-image: url(/images/translation.svg); } -.icon[data-icon=book] { --icon-image: url(/images/book.svg); } -.icon[data-icon=note-card] { --icon-image: url(/images/note-card.svg); } -.icon[data-icon=keyboard] { --icon-image: url(/images/keyboard.svg); } -.icon[data-icon=backup] { --icon-image: url(/images/backup.svg); } -.icon[data-icon=lock] { --icon-image: url(/images/lock.svg); } -.icon[data-icon=question-mark] { --icon-image: url(/images/question-mark.svg); } -.icon[data-icon=popup-size] { --icon-image: url(/images/popup-size.svg); } -.icon[data-icon=hamburger-menu] { --icon-image: url(/images/hamburger-menu.svg); } -.icon[data-icon=kebab-menu] { --icon-image: url(/images/kebab-menu.svg); } -.icon[data-icon=mouse] { --icon-image: url(/images/mouse.svg); } -.icon[data-icon=exclamation-point-short] { --icon-image: url(/images/exclamation-point-short.svg); } -.icon[data-icon=magnifying-glass] { --icon-image: url(/images/magnifying-glass.svg); } -.icon[data-icon=collapse] { --icon-image: url(/images/collapse.svg); } -.icon[data-icon=expand] { --icon-image: url(/images/expand.svg); } -.icon[data-icon=window] { --icon-image: url(/images/window.svg); } -.icon[data-icon=cross] { --icon-image: url(/images/cross.svg); } -.icon[data-icon=checkmark] { --icon-image: url(/images/checkmark.svg); } -.icon[data-icon=sentence-parsing] { --icon-image: url(/images/sentence-parsing.svg); } -.icon[data-icon=question-mark] { --icon-image: url(/images/question-mark.svg); } -.icon[data-icon=question-mark-circle] { --icon-image: url(/images/question-mark-circle.svg); } -.icon[data-icon=question-mark-thick] { --icon-image: url(/images/question-mark-thick.svg); } -.icon[data-icon=left-chevron] { --icon-image: url(/images/left-chevron.svg); } -.icon[data-icon=right-chevron] { --icon-image: url(/images/right-chevron.svg); } -.icon[data-icon=plus-thick] { --icon-image: url(/images/plus-thick.svg); } -.icon[data-icon=clipboard] { --icon-image: url(/images/clipboard.svg); } -.icon[data-icon=key] { --icon-image: url(/images/key.svg); } -.icon[data-icon=material-down-arrow] { - --icon-image: url(/images/material-down-arrow.svg); - --icon-size: var(--material-arrow-dimension2) var(--material-arrow-dimension1); -} -.icon[data-icon=material-right-arrow] { - --icon-image: url(/images/material-right-arrow.svg); - --icon-size: var(--material-arrow-dimension1) var(--material-arrow-dimension2); -} - - -/* Checkbox */ -label.checkbox { - cursor: default; -} -.checkbox { - font-size: var(--checkbox-size); - display: inline-block; -} -.checkbox>input[type=checkbox] { - opacity: 0; - width: 0; - height: 0; - display: block; - margin: 0; - padding: 0; - border: none; - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; -} -.checkbox-body { - display: block; - cursor: pointer; - width: 1em; - height: 1em; - position: relative; -} -.checkbox>input[type=checkbox]:disabled+.checkbox-body { - cursor: default; -} -.checkbox-fill, -.checkbox-border, -.checkbox-check { - display: block; - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; - mask-repeat: no-repeat; - mask-position: center center; - mask-mode: alpha; - mask-size: contain; - -webkit-mask-repeat: no-repeat; - -webkit-mask-position: center center; - -webkit-mask-mode: alpha; - -webkit-mask-size: contain; - transition: opacity var(--animation-duration) linear, background-color var(--animation-duration) linear; -} -.checkbox-fill { - mask-image: url(/images/checkbox-fill.svg); - -webkit-mask-image: url(/images/checkbox-fill.svg); - background-color: var(--checkbox-unchecked-color); - opacity: 0; -} -.checkbox-border { - mask-image: url(/images/checkbox-border.svg); - -webkit-mask-image: url(/images/checkbox-border.svg); - background-color: var(--checkbox-unchecked-color); - opacity: 1; -} -.checkbox-check { - mask-image: url(/images/checkbox-check.svg); - -webkit-mask-image: url(/images/checkbox-check.svg); - background-color: var(--checkbox-check-color); - opacity: 0; -} -.checkbox>input[type=checkbox]:checked+.checkbox-body>.checkbox-fill { - background-color: var(--checkbox-checked-color); - opacity: 1; -} -.checkbox>input[type=checkbox]:checked+.checkbox-body>.checkbox-border { - background-color: var(--checkbox-checked-color); - opacity: 1; -} -.checkbox>input[type=checkbox]:checked+.checkbox-body>.checkbox-check { - background-color: var(--checkbox-check-color); - opacity: 1; -} -.checkbox>input[type=checkbox]:disabled+.checkbox-body>.checkbox-fill { - opacity: 0; -} -.checkbox>input[type=checkbox]:disabled+.checkbox-body>.checkbox-border { - background-color: var(--checkbox-disabled-color); - opacity: 1; -} -.checkbox>input[type=checkbox]:disabled+.checkbox-body>.checkbox-check { - background-color: var(--checkbox-disabled-color); -} - - -/* Toggle switch */ -label.toggle { - cursor: default; -} -.toggle { - font-size: var(--toggle-size); - display: inline-block; -} -.toggle>input[type=checkbox] { - opacity: 0; - width: 0; - height: 0; - display: block; - margin: 0; - padding: 0; - border: none; - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; -} -.toggle-body { - display: block; - cursor: pointer; - width: 2em; - height: 1em; - position: relative; -} -.toggle-track { - display: block; - position: absolute; - left: 0.125em; - right: 0.125em; - top: 0.125em; - bottom: 0.125em; - background-color: var(--toggle-track-color); - border-radius: 0.4375em; - transition: background-color var(--animation-duration) ease-in-out; -} -.toggle-knob { - display: block; - position: absolute; - left: 0; - top: 0; - width: 1em; - height: 1em; - background-color: var(--toggle-knob-color); - border-radius: 0.5em; - box-shadow: - 0 0.0625em 0.25em 0 var(--shadow-color), - 0 0.125em 0.125em 0 var(--shadow-color); - transition: - transform var(--animation-duration) ease-in-out, - background-color var(--animation-duration) ease-in-out; -} -.toggle-body>.toggle-knob::after { - position: absolute; - display: block; - content: ''; - left: -0.75em; - top: -0.75em; - right: -0.75em; - bottom: -0.75em; - border-radius: 2.5em; - background-color: var(--selectable-indicator-color); - pointer-events: none; - transform: scale(0); - opacity: 0; - visibility: hidden; - transition: - transform 0s ease-in-out var(--animation-duration2), - background-color var(--animation-duration2) ease-in-out, - opacity var(--animation-duration2) ease-in-out, - visibility 0s ease-in-out var(--animation-duration2); -} -.toggle>input[type=checkbox]:focus:not(:disabled)+.toggle-body>.toggle-knob::after, -.toggle:active>input[type=checkbox]:not(:disabled)+.toggle-body>.toggle-knob::after { - transform: scale(1); - opacity: 1; - visibility: visible; - transition: - transform var(--animation-duration2) ease-in-out, - background-color var(--animation-duration2) ease-in-out, - opacity var(--animation-duration2) ease-in-out, - visibility var(--animation-duration2) ease-in-out; -} -.toggle>input[type=checkbox]:focus+.toggle-body>.toggle-knob::after { - opacity: 0.5; -} -.toggle:active>input[type=checkbox]:focus+.toggle-body>.toggle-knob::after { - opacity: 1; -} -.toggle>input[type=checkbox]:checked+.toggle-body>.toggle-knob { - transform: translateX(1em); -} -.toggle>input[type=checkbox]:checked:not(:disabled)+.toggle-body>.toggle-track { - background-color: var(--accent-color-lighter); -} -.toggle>input[type=checkbox]:checked:not(:disabled)+.toggle-body>.toggle-knob { - background-color: var(--accent-color); -} -.toggle>input[type=checkbox]:focus:checked:not(:disabled)+.toggle-body>.toggle-knob::after, -.toggle:active>input[type=checkbox]:checked:not(:disabled)+.toggle-body>.toggle-knob::after { - background-color: var(--accent-color-transparent25); -} -.toggle>input[type=checkbox]:disabled+.toggle-body { - cursor: default; -} -.toggle>input[type=checkbox]:disabled+.toggle-body>.toggle-track { - background-color: var(--disabled-color-light); -} -.toggle>input[type=checkbox]:disabled+.toggle-body>.toggle-knob { - background-color: var(--disabled-color-lighter); -} - - -/* Radio button */ -label.radio { - cursor: default; -} -.radio { - display: inline-block; - vertical-align: middle; -} -.radio>input[type=radio] { - opacity: 0; - width: 0; - height: 0; - display: block; - margin: 0; - padding: 0; - border: none; - cursor: default; - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; -} -.radio>input[type=radio]:not(:disabled)+.radio-body { - cursor: pointer; -} -.radio-body { - display: block; - position: relative; - width: var(--radio-size); - height: var(--radio-size); -} -.radio-border, -.radio-dot { - display: block; - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; - background-color: var(--accent-color); - mask-repeat: no-repeat; - mask-position: center center; - mask-mode: alpha; - mask-size: var(--radio-size) var(--radio-size); - -webkit-mask-repeat: no-repeat; - -webkit-mask-position: center center; - -webkit-mask-mode: alpha; - -webkit-mask-size: var(--radio-size) var(--radio-size); -} -.radio-border { - mask-image: url(/images/radio-button.svg); - -webkit-mask-image: url(/images/radio-button.svg); -} -.radio-dot { - mask-image: url(/images/radio-button-dot.svg); - -webkit-mask-image: url(/images/radio-button-dot.svg); - opacity: 1; - transform: none; - transition: - transform var(--animation-duration2) ease-in-out, - opacity var(--animation-duration2) ease-in-out, - visibility var(--animation-duration2) ease-in-out; -} -.radio>input[type=radio]:disabled+.radio-body>.radio-border, -.radio>input[type=radio]:disabled+.radio-body>.radio-dot { - background-color: var(--disabled-color); -} -.radio>input[type=radio]:not(:checked)+.radio-body>.radio-dot { - opacity: 0; - transform: scale(0); - transition: - transform 0s ease-in-out var(--animation-duration2), - opacity var(--animation-duration2) ease-in-out, - visibility 0s ease-in-out var(--animation-duration2); -} -.radio-body::after { - position: absolute; - display: block; - content: ''; - left: -0.75em; - top: -0.75em; - right: -0.75em; - bottom: -0.75em; - border-radius: 2.5em; - background-color: var(--selectable-indicator-color); - pointer-events: none; - transform: scale(0); - opacity: 0; - visibility: hidden; - transition: - transform 0s ease-in-out var(--animation-duration2), - background-color var(--animation-duration2) ease-in-out, - opacity var(--animation-duration2) ease-in-out, - visibility 0s ease-in-out var(--animation-duration2); -} -.radio>input[type=radio]:focus:not(:disabled)+.radio-body::after, -.radio:active>input[type=radio]:not(:disabled)+.radio-body::after { - transform: scale(1); - opacity: 1; - visibility: visible; - transition: - transform var(--animation-duration2) ease-in-out, - background-color var(--animation-duration2) ease-in-out, - opacity var(--animation-duration2) ease-in-out, - visibility var(--animation-duration2) ease-in-out; -} -.radio>input[type=radio]:focus+.radio-body::after { - opacity: 0.5; -} -.radio:active>input[type=radio]:focus+.radio-body::after { - opacity: 1; -} -.radio-label { - cursor: pointer; - white-space: nowrap; -} -.radio-label>.radio { - vertical-align: middle; -} -.radio-label>.radio-label-text { - display: inline-block; - margin-left: 0.5em; - vertical-align: middle; - white-space: normal; -} - - -/* Material design select */ -select { - width: var(--input-width-large); - height: var(--input-height); - line-height: var(--input-height); - border: 0; - border-radius: var(--input-border-radius); - box-sizing: border-box; - padding: 0 0.5em; - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; - background-image: url(/images/material-down-arrow.svg); - background-repeat: no-repeat; - background-position: right calc(10em / var(--font-size-no-units)) center; - background-color: var(--input-background-color); - background-size: var(--material-arrow-dimension2) var(--material-arrow-dimension1); - cursor: pointer; - color: var(--text-color); - font-size: var(--input-font-size); -} -select::-ms-expand { - display: none; -} - - -/* Material design inputs */ -input[type=text], -input[type=number] { - width: var(--input-width); - height: var(--input-height); - line-height: var(--input-height); - color: var(--text-color); - font-size: var(--input-font-size); - background-color: var(--input-background-color); - border: none; - border-radius: var(--input-border-radius); - box-sizing: border-box; - padding: 0 0.5em; - appearance: textfield; - -moz-appearance: textfield; - -webkit-appearance: textfield; -} -input[type=number]::-webkit-inner-spin-button, -input[type=number]::-webkit-outer-spin-button { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; - margin: 0; -} -input[type=text] { - width: var(--input-width-large); -} -textarea { - box-sizing: border-box; - padding: var(--textarea-padding); - font-family: 'Courier New', Courier, monospace; - color: var(--text-color); - font-size: var(--input-font-size); - background-color: var(--input-background-color); - border-radius: var(--input-border-radius); - line-height: var(--textarea-line-height); - border: var(--thin-border-size) solid var(--input-background-color); -} -select:invalid, -textarea:invalid, -input[type=text]:invalid, -input[type=number]:invalid, -select[data-invalid=true], -textarea[data-invalid=true], -input[type=text][data-invalid=true], -input[type=number][data-invalid=true] { - border: var(--thin-border-size) solid var(--danger-color); -} -select, -textarea, -input[type=text], -input[type=number] { - box-shadow: none; - transition: box-shadow calc(var(--animation-duration) / 2) linear; -} -select:focus, -textarea:focus, -input[type=text]:focus, -input[type=number]:focus { - box-shadow: 0 0 0 calc(2em / var(--font-size-no-units)) var(--input-outline-color); - outline: none; -} -select:invalid:focus, -textarea:invalid:focus, -input[type=text]:invalid:focus, -input[type=number]:invalid:focus, -select[data-invalid=true]:focus, -textarea[data-invalid=true]:focus, -input[type=text][data-invalid=true]:focus, -input[type=number][data-invalid=true]:focus { - box-shadow: 0 0 0 calc(2em / var(--font-size-no-units)) var(--danger-color); - outline: none; -} -input[type=text].input-with-suffix-button, -input[type=number].input-with-suffix-button { - flex: 1 1 auto; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-right-style: none; - z-index: 1; -} -input[type=text].code, -input[type=number].code { - font-family: 'Courier New', Courier, monospace; -} - - -/* Material design button */ -button { - border: var(--thin-border-size) solid transparent; - border-radius: 0.3em; - padding: 0.5em 1em; - font-weight: bold; - font-size: inherit; - font-family: inherit; - cursor: pointer; - background-color: transparent; - box-shadow: var(--button-shadow-params) var(--shadow-color-off); - transition: background-color var(--animation-duration) ease-in, box-shadow var(--animation-duration) ease-in, border-color var(--animation-duration) ease-in; - -webkit-tap-highlight-color: transparent; -} -button:focus { - outline: none; -} -button:hover { - transition: background-color var(--animation-duration) ease-out, box-shadow var(--animation-duration) ease-out, border-color var(--animation-duration) ease-out; -} -button:hover:not(:disabled) { - box-shadow: var(--button-shadow-params) var(--shadow-color-light); -} -button:active:not(:disabled) { - box-shadow: var(--button-shadow-params) var(--shadow-color); -} - -/* Standard button */ -button:not(:disabled) { - color: var(--button-text-color); - border-color: var(--accent-color); - background-color: var(--accent-color); -} -button:hover:not(:disabled) { - background-color: var(--accent-color-light); - border-color: var(--accent-color-light); -} -button:focus:not(:disabled) { - background-color: var(--accent-color-light); -} -button:active:not(:disabled) { - border-color: var(--accent-color-lighter); - background-color: var(--accent-color-lighter); -} - -/* Standard danger button */ -button.danger:not(:disabled) { - color: var(--button-text-color); - border-color: var(--danger-color); - background-color: var(--danger-color); -} -button.danger:hover:not(:disabled) { - background-color: var(--danger-color-light); - border-color: var(--danger-color-light); -} -button.danger:focus:not(:disabled) { - background-color: var(--danger-color-light); -} -button.danger:active:not(:disabled) { - border-color: var(--danger-color-lighter); - background-color: var(--danger-color-lighter); -} - -/* Low emphasis button */ -button.low-emphasis:not(:disabled) { - color: var(--accent-color); - border-color: var(--button-border-color); - background-color: var(--accent-color-transparent0); -} -button.low-emphasis:hover:not(:disabled) { - background-color: var(--accent-color-transparent5); - border-color: var(--accent-color-light); -} -button.low-emphasis:focus:not(:disabled) { - border-color: var(--accent-color); -} -button.low-emphasis:active:not(:disabled) { - border-color: var(--accent-color); - background-color: var(--accent-color-transparent25); -} - -/* Low emphasis danger button */ -button.low-emphasis.danger:not(:disabled) { - color: var(--danger-color); - border-color: var(--button-border-color); - background-color: var(--danger-color-transparent0); -} -button.low-emphasis.danger:hover:not(:disabled) { - border-color: var(--danger-color-light); - background-color: var(--danger-color-transparent5); -} -button.low-emphasis.danger:focus:not(:disabled) { - border-color: var(--danger-color); -} -button.low-emphasis.danger:active:not(:disabled) { - border-color: var(--danger-color); - background-color: var(--danger-color-transparent25); -} - -/* Disabled buttons */ -button:disabled { - color: var(--button-text-color); - border-color: var(--disabled-color); - background-color: var(--disabled-color); - cursor: default; -} -button.low-emphasis:disabled { - color: var(--disabled-color); - border-color: var(--disabled-color); - background-color: transparent; -} - -/* Input suffix button */ -button.input-suffix-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; - border-color: transparent; - transition: - background-color var(--animation-duration) ease-in, - box-shadow var(--animation-duration) ease-in; -} -button.input-suffix-button.input-suffix-icon-button { - width: 2.125em; - position: relative; -} -button.input-suffix-button.input-suffix-icon-button:hover, -button.input-suffix-button.input-suffix-icon-button:focus { - background-color: var(--input-background-color-dark); -} -button.input-suffix-button.input-suffix-icon-button:active { - background-color: var(--input-background-color-darker); -} -button.input-suffix-button.input-suffix-icon-button>.icon { - display: block; - width: 100%; - height: 100%; - background-color: var(--button-icon-color); -} -input[type=text]:invalid+button.input-suffix-button, -input[type=number]:invalid+button.input-suffix-button, -input[type=text][data-invalid=true]+button.input-suffix-button, -input[type=number][data-invalid=true]+button.input-suffix-button { - border: var(--thin-border-size) solid var(--danger-color); - border-left-style: none; -} - - -/* Material design icon button */ -button.icon-button { - vertical-align: middle; - border: none; - margin: 0; - padding: 0; - box-sizing: content-box; - font-size: inherit; - cursor: pointer; - background-color: transparent; -} -button.icon-button:not([hidden]) { - display: inline-block; -} -button.icon-button>.icon-button-inner { - display: block; - width: var(--icon-button-size); - height: var(--icon-button-size); - position: relative; -} -button.icon-button:focus { - outline: none; -} -button.icon-button, -button.icon-button:hover, -button.icon-button:focus, -button.icon-button:active { - background-color: transparent; - box-shadow: none; -} -.icon-button>.icon-button-inner::after { - position: absolute; - display: block; - content: ''; - left: 0; - top: 0; - right: 0; - bottom: 0; - border-radius: 50%; - background-color: var(--selectable-indicator-color); - pointer-events: none; - transform: scale(0); - opacity: 0; - visibility: hidden; - transition: - transform 0s ease-in-out var(--animation-duration2), - background-color var(--animation-duration2) ease-in-out, - opacity var(--animation-duration2) ease-in-out, - visibility 0s ease-in-out var(--animation-duration2); -} -.icon-button:focus>.icon-button-inner::after { - transform: scale(1); - opacity: 1; - visibility: visible; - transition: - transform var(--animation-duration2) ease-in-out, - background-color var(--animation-duration2) ease-in-out, - opacity var(--animation-duration2) ease-in-out, - visibility var(--animation-duration2) ease-in-out; -} -.icon-button>.icon-button-inner>.icon { - display: block; - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; - background-color: var(--button-icon-color); - --icon-size: calc(16em / var(--font-size-no-units)) calc(16em / var(--font-size-no-units)); -} -.icon-button>.icon-button-inner>.icon.icon-button-icon-light { - background-color: var(--button-icon-color-light); -} -.icon-button>.icon-button-inner>.icon[data-icon=material-right-arrow] { --icon-size: var(--material-arrow-dimension1) var(--material-arrow-dimension2); } -.icon-button>.icon-button-inner>.icon[data-icon=material-down-arrow] { --icon-size: var(--material-arrow-dimension2) var(--material-arrow-dimension1); } - -.input-height-icon-button-container { - height: var(--input-height); - box-sizing: border-box; -} -.input-height-icon-button-container>.icon-button { - position: relative; - top: calc((var(--input-height) - var(--icon-button-size)) * 0.5); -} - - -/* Popup menu */ -#popup-menus { - position: absolute; -} -.popup-menu-container { - position: fixed; - left: 0; - top: 0; - right: 0; - bottom: 0; - z-index: 101; - outline: none; - overflow: hidden; -} -.popup-menu { - position: absolute; - left: 0; - top: 0; - max-width: 100%; - max-height: 100%; - box-sizing: border-box; - box-shadow: var(--menu-shadow); - border-radius: var(--menu-border-radius); - background-color: var(--background-color-light); - padding: 0.5em 0; - min-width: 8em; - overflow: auto; -} -.popup-menu-body { - display: flex; - flex-flow: column nowrap; - align-items: stretch; - white-space: nowrap; -} -button.popup-menu-item { - padding: 0.625em 1.5em; - border-radius: 0; - background-color: transparent; - color: var(--text-color); - border: none; - width: 100%; - text-align: left; - font-size: 1em; - font-weight: normal; - font-family: inherit; - align-items: center; -} -button.popup-menu-item:not([hidden]) { - display: flex; -} -button.popup-menu-item:hover:not(:disabled), -button.popup-menu-item:focus:not(:disabled) { - background-color: var(--menu-item-hover-color); - box-shadow: none; -} -button.popup-menu-item:active:not(:disabled) { - background-color: var(--menu-item-active-color); - box-shadow: none; -} -button.popup-menu-item:disabled { - color: var(--text-color-light2); -} -.popup-menu-item-icon { - width: calc(16em / 14); - height: calc(16em / 14); - background-color: var(--text-color); - margin-right: 0.5em; - flex: 0 0 auto; -} -.popup-menu-item-icon:not([hidden]) { - display: block; -} -:root[data-page-type=popup] .popup-menu.popup-menu-auto-size, -.popup-menu.popup-menu-small { - border-radius: calc(var(--menu-border-radius) * 0.75); - padding: 0.25em 0; - min-width: 6em; -} -:root[data-page-type=popup] .popup-menu.popup-menu-auto-size button.popup-menu-item, -.popup-menu.popup-menu-small button.popup-menu-item { - padding: 0.5em 0.75em; - font-size: var(--font-size-small); -} diff --git a/ext/mixed/css/popup-outer.css b/ext/mixed/css/popup-outer.css deleted file mode 100644 index 626d0c32..00000000 --- a/ext/mixed/css/popup-outer.css +++ /dev/null @@ -1,47 +0,0 @@ -/* - * Copyright (C) 2016-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 . - */ - -iframe.yomichan-popup { - all: initial; - font-size: 1px; - background-color: #ffffff; - border: 1em solid #999999; - box-shadow: 0 0 10em rgba(0, 0, 0, 0.5); - position: fixed; - resize: none; - visibility: hidden; - z-index: 2147483647; - box-sizing: border-box; -} -iframe.yomichan-popup[data-theme=dark] { - background-color: #1e1e1e; - border-color: #666666; -} -iframe.yomichan-popup[data-outer-theme=dark], -iframe.yomichan-popup[data-outer-theme=auto][data-site-color=dark] { - box-shadow: 0 0 10em rgba(255, 255, 255, 0.5); -} -iframe.yomichan-popup[data-popup-display-mode=full-width] { - border-left: none; - border-right: none; -} -iframe.yomichan-popup[data-popup-display-mode=full-width][data-below=true] { - border-bottom: none; -} -iframe.yomichan-popup[data-popup-display-mode=full-width]:not([data-below=true]) { - border-top: none; -} diff --git a/ext/mixed/css/search.css b/ext/mixed/css/search.css deleted file mode 100644 index eb537ba4..00000000 --- a/ext/mixed/css/search.css +++ /dev/null @@ -1,162 +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 . - */ - -/* Variables */ -:root { - --main-content-horizontal-padding: 0.72em; - --entry-horizontal-padding: 0; - - --padding: calc(10em / var(--font-size-no-units)); - --main-content-size: calc(700em / var(--font-size-no-units)); - - --background-color: #ffffff; - --separator-color1: #cccccc; -} -:root:not([data-loaded=true]) { - --animation-duration: 0s; -} -:root[data-theme=dark] { - --separator-color1: #333333; -} - -/* Common styles */ -:root { - height: 100%; -} -body { - background-color: var(--background-color); - margin: 0; - padding: 0; - font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; - color: var(--text-color); - height: 100%; - overflow: hidden; -} -h1 { - font-size: 2em; - line-height: 1.5em; - margin: 0; - padding: 0.25em 0 0; - font-weight: normal; - box-sizing: border-box; - border-bottom: calc(1em / (var(--font-size-no-units) * 2)) solid var(--separator-color1); -} - -/* Search bar */ -.search-textbox-container { - display: flex; - flex-flow: row nowrap; - width: 100%; - align-items: stretch; - margin: 0; - padding: 0; - border: 0; -} -#search-textbox { - color: var(--text-color); - flex: 1 1 auto; - box-sizing: border-box; - padding: var(--textarea-padding); - background-color: var(--input-background-color); - border-radius: 0; - line-height: var(--textarea-line-height); - border: 0; - outline: none; - width: 100%; - height: calc(var(--textarea-line-height) + var(--textarea-padding) * 2); - min-height: calc(var(--textarea-line-height) + var(--textarea-padding) * 2); - max-height: calc(var(--textarea-line-height) * 10 + var(--textarea-padding) * 2); - resize: vertical; - font-size: var(--font-size); - font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; - white-space: pre-wrap; - z-index: 1; -} -#search-button { - flex: 0 0 auto; - position: relative; - width: 2.5em; - background-color: var(--input-background-color); - border: 0; - padding: 0; - margin: 0; - cursor: pointer; - outline: none; - transition: background-color var(--animation-duration) ease-in-out; - border-radius: 0; -} -#search-button:hover, -#search-button:focus { - background-color: var(--input-background-color-dark); -} -#search-button:active { - background-color: var(--input-background-color-darker); -} - -#search-button>.icon { - display: block; - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; - background-color: var(--button-icon-color); - --icon-size: 16px 16px; -} - -/* Search options */ -.search-options { - display: flex; - flex-flow: row wrap; - margin: 0.5em -1em; - align-items: center; -} -.search-option { - flex: 0 1 auto; - margin: 0.5em 1em; - align-items: center; - cursor: pointer; -} -.search-option:not([hidden]) { - display: flex; -} -.search-option-label { - padding-left: 0.5em; -} -.search-option-pre-label { - padding-right: 0.5em; -} -#query-parser-mode-container { - flex: 1 1 auto; -} -#query-parser-mode-container:not([hidden]) { - display: flex; -} -#query-parser-mode-select { - flex: 1 1 auto; - max-width: 220px; - min-width: 100px; -} - -/* Search styles */ -#intro { - overflow: hidden; -} -#intro>p { - margin: 0; -} - -- cgit v1.2.3