diff options
Diffstat (limited to 'ext/css/display.css')
| -rw-r--r-- | ext/css/display.css | 1798 |
1 files changed, 1798 insertions, 0 deletions
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 <https://www.gnu.org/licenses/>. + */ + +/* 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; +} |