/* * 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; --text-color-light: #777777; --text-color-very-light: #999999; --kanji-text-color: var(--text-color); --kanji-popular-text-color: var(--accent-color); --kanji-rare-text-color: var(--text-color-very-light); --kanji-furigana-text-color: inherit; --reason-text-color: var(--text-color-light); --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; --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; --text-color-light: #888888; --text-color-very-light: #666666; --kanji-text-color: var(--text-color); --kanji-popular-text-color: var(--accent-color); --kanji-rare-text-color: var(--text-color-very-light); --kanji-furigana-text-color: inherit; --reason-text-color: var(--text-color-light); --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; --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('/mixed/ttf/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); } .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; } .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 { display: block; width: 100%; height: 100%; mask-repeat: no-repeat; mask-position: center center; mask-mode: alpha; mask-size: var(--sidebar-button-icon-size) var(--sidebar-button-icon-size); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-mode: alpha; -webkit-mask-size: var(--sidebar-button-icon-size) var(--sidebar-button-icon-size); 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); } .sidebar-button-icon[data-icon=cross] { mask-image: url(/mixed/img/cross.svg); -webkit-mask-image: url(/mixed/img/cross.svg); } .sidebar-button-icon[data-icon=left-chevron] { mask-image: url(/mixed/img/left-chevron.svg); -webkit-mask-image: url(/mixed/img/left-chevron.svg); } .sidebar-button-icon[data-icon=right-chevron] { mask-image: url(/mixed/img/right-chevron.svg); -webkit-mask-image: url(/mixed/img/right-chevron.svg); } .sidebar-button-icon[data-icon=kebab-menu] { mask-image: url(/mixed/img/kebab-menu.svg); -webkit-mask-image: url(/mixed/img/kebab-menu.svg); } .sidebar-button-icon[data-icon=profile] { mask-image: url(/mixed/img/profile.svg); -webkit-mask-image: url(/mixed/img/profile.svg); } /* 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; 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('/mixed/img/view-note.svg'); } button.action-button[data-icon=add-term-kanji]::before { background-image: url('/mixed/img/add-term-kanji.svg'); } button.action-button[data-icon=add-term-kana]::before { background-image: url('/mixed/img/add-term-kana.svg'); } button.action-button[data-icon=play-audio]::before { background-image: url('/mixed/img/play-audio.svg'); } button.action-button[data-icon=source-term]::before { background-image: url('/mixed/img/source-term.svg'); } .entry[data-type=term][data-expression-multi=true] .actions>button.action-button.action-play-audio { display: none; } /* 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(/mixed/img/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(/mixed/img/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('/mixed/img/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-light); } .term-definition-disambiguation-list { color: var(--text-color-light); } .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-light); } .frequency-disambiguation { color: var(--text-color-light); } .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-light); } :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-light); } .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-light); } .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-light); } .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: ']'; } /* 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-light); } /* 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: center; 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.5em 0.75em; transition: opacity var(--animation-duration) ease-out; } .footer-notification[hidden] { display: flex; opacity: 0; transition: opacity var(--animation-duration) ease-in; } .footer-notification-body { flex: 1 1 auto; padding-right: 0.5em; } 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; } /* 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-light); } :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-light); } :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; }