/* * Copyright (C) 2016-2020 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))); --spinner-size-no-units: 32; --action-button-size-no-units: 16; --entry-padding: 0.72em; /* Colors */ --background-color: #ffffff; --glossary-image-background-color: #eeeeee; --dark-text-color: #000000; --default-text-color: #333333; --light-text-color: #777777; --very-light-text-color: #999999; --popuplar-kanji-text-color: #0275d8; --light-border-color: #eeeeee; --medium-border-color: #dddddd; --dark-border-color: #777777; --pitch-accent-annotation-color: #000000; --tag-text-color: #ffffff; --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; } :root[data-yomichan-theme=dark] { /* Colors */ --background-color: #1e1e1e; --glossary-image-background-color: #2f2f2f; --dark-text-color: #d8d8d8; --default-text-color: #d4d4d4; --light-text-color: #888888; --very-light-text-color: #666666; --popuplar-kanji-text-color: #0275d8; --light-border-color: #2f2f2f; --medium-border-color: #3f3f3f; --dark-border-color: #888888; --pitch-accent-annotation-color: #ffffff; --tag-text-color: #e1e1e1; --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; } /* Fonts */ @font-face { font-family: kanji-stroke-orders; src: url('/mixed/ttf/kanji-stroke-orders.ttf'); } /* General */ :root[data-yomichan-page=float]:not([data-yomichan-theme]), :root[data-yomichan-page=float]:not([data-yomichan-theme]) body { background-color: transparent; } :root { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: var(--font-size); line-height: var(--line-height); } body { margin: 0; border: 0; padding: 0; overflow-y: scroll; /* always show scroll bar */ background-color: var(--background-color); color: var(--default-text-color); font-size: inherit; } ol, ul { margin-top: 0; margin-bottom: var(--entry-padding); } #spinner { position: fixed; z-index: 1; right: 0.36em; bottom: 0.36em; } #spinner>img { width: calc(1em * (var(--spinner-size-no-units) / var(--font-size-no-units))); height: calc(1em * (var(--spinner-size-no-units) / var(--font-size-no-units))); } 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); } a { color: var(--popuplar-kanji-text-color); text-decoration: underline; cursor: pointer; } /* Navigation */ .navigation-header { top: 0; left: 0; width: 100%; height: 2.1em; box-sizing: border-box; padding: 0.25em 0.5em; border-bottom: var(--thin-border-size) solid var(--light-border-color); background-color: var(--background-color); z-index: 10; } .navigation-header-actions { display: flex; } .navigation-header:not([data-has-previous=true]) .navigation-header-actions .action-button.action-previous::before, .navigation-header:not([data-has-next=true]) .navigation-header-actions .action-button.action-next::before { opacity: 0.25; -webkit-filter: grayscale(100%); filter: grayscale(100%); } .action-button.action-next::before { transform: scaleX(-1); } :root[data-yomichan-page=search] .navigation-header { position: sticky; } :root[data-yomichan-page=float] .navigation-header { position: fixed; } :root[data-yomichan-page=float] .navigation-header:not([hidden])~.navigation-header-spacer { height: 2.1em; } /* Search page */ #query-parser-content { margin-top: 0.5em; font-size: var(--query-parser-font-size); white-space: pre-wrap; } #query-parser-content:not(:empty) { padding-bottom: 0.25em; border-bottom: var(--expression-thin-border-size) solid var(--light-border-color); } #query-parser-content[data-term-spacing=true] .query-parser-term { margin-right: 0.2em; } :root[data-yomichan-page=float] #query-parser-container { padding-left: var(--entry-padding); padding-right: var(--entry-padding); } /* Action buttons */ .action-button.disabled { pointer-events: none; cursor: default; } .action-button.disabled::before { -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity: 0.25; } .action-button.pending { visibility: hidden; } .actions { display: flex; float: right; margin: -0.25em; } .actions::after { clear: both; content: ''; display: block; } .action-button { display: inline-block; border: 0; margin: 0; padding: 0.3em; background: transparent; font-size: inherit; } button.action-button { cursor: pointer; } .action-button[data-icon]::before { content: ""; width: calc(1em * (var(--action-button-size-no-units) / var(--font-size-no-units))); height: calc(1em * (var(--action-button-size-no-units) / var(--font-size-no-units))); display: block; background-color: transparent; background-repeat: no-repeat; background-size: contain; } .action-button[data-icon=entry-current]::before { background-image: url("/mixed/img/entry-current.svg"); } .action-button[data-icon=view-note]::before { background-image: url("/mixed/img/view-note.svg"); } .action-button[data-icon=add-term-kanji]::before { background-image: url("/mixed/img/add-term-kanji.svg"); } .action-button[data-icon=add-term-kana]::before { background-image: url("/mixed/img/add-term-kana.svg"); } .action-button[data-icon=play-audio]::before { background-image: url("/mixed/img/play-audio.svg"); } .action-button[data-icon=source-term]::before { background-image: url("/mixed/img/source-term.svg"); } .entry[data-type=term][data-expression-multi=true] .actions>.action-play-audio { display: none; } /* Tags */ .tag { display: inline-block; padding: 0.2em 0.6em 0.3em; font-size: 75%; font-weight: 700; 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); } .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-list>.tag { margin-right: 0.375em; } :root:not([data-enable-search-tags=true]) .tag[data-category=search] { display: none; } :root[data-compact-tags=true] .tag[data-redundant=true] { display: none; } /* Entries */ .entry { padding-top: var(--entry-padding); padding-bottom: var(--entry-padding); } :root[data-yomichan-page=float] .entry { padding-left: var(--entry-padding); padding-right: var(--entry-padding); } .term-expression .kanji-link { border-bottom: var(--expression-thin-border-size) dashed var(--dark-border-color); color: var(--default-text-color); text-decoration: none; cursor: pointer; } .term-expression[data-frequency=popular]>.term-expression-text, .term-expression[data-frequency=popular]>.term-expression-text .kanji-link { color: var(--popuplar-kanji-text-color); } .term-expression[data-frequency=rare]>.term-expression-text, .term-expression[data-frequency=rare]>.term-expression-text .kanji-link { color: var(--very-light-text-color); } .entry:not(.entry-current) .action-current-indicator { display: none; } .entry-header2, .entry-header3 { display: inline; } .term-frequency-separator::before { content: ":"; } .entry+.entry { border-top: var(--thin-border-size) solid var(--light-border-color); } .term-reasons { display: inline-block; color: var(--light-text-color); } .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; } .term-expression-text { display: inline-block; font-size: var(--expression-font-size); } .term-expression-details { display: inline; } .term-expression-details>.tags { display: inline; } .term-expression-details>.frequencies { display: none; } .term-expression-list>.term-expression:not(:last-of-type)>.term-expression-text::after { content: "\3001"; } /* Merged term styles */ .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; } .entry[data-expression-multi=true] .term-expression-list .term-expression-details>.frequencies { display: block; position: absolute; left: 0; bottom: -1.9em; white-space: nowrap; } /* Definitions */ .term-definition-list { margin: 0; padding: 0; list-style-type: none; color: var(--light-text-color); } .term-definition-list:not([data-count="0"]):not([data-count="1"]) { padding-left: 1.4em; list-style-type: decimal; } .term-glossary-list { margin: 0; padding: 0; list-style-type: none; } .term-glossary-list:not([data-count="0"]):not([data-count="1"]) { padding-left: 1.4em; list-style-type: circle; } .term-glossary { color: var(--dark-text-color); } .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; } .term-special-tags>.frequencies { display: inline; } .term-entry-body[data-section-count="0"] .term-entry-body-section-header, .term-entry-body[data-section-count="1"] .term-entry-body-section-header { display: none; } /* Conditional styles */ :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-compact-glossaries=true] .term-definition-tag-list, :root[data-compact-glossaries=true] .term-definition-disambiguation-list:not([data-count="0"]) { display: inline; } :root[data-compact-glossaries=true] .term-glossary-list { display: inline; list-style: none; padding-left: 0; } :root[data-compact-glossaries=true] .term-glossary-list>li { display: inline; } :root[data-compact-glossaries=true] .term-glossary-list>li:not(:first-child)::before { white-space: pre-wrap; content: " | "; display: inline; } /* Pitch accent styles */ .entry[data-pitch-accent-count='0'] .term-pitch-accent-container { display: none; } .term-pitch-accent-container { border-bottom: var(--thin-border-size) solid var(--light-border-color); padding-bottom: 0.25em; margin-bottom: 0.25em; } .term-pitch-accent-group-list { margin: 0; padding: 0; list-style-type: none; color: var(--light-text-color); } .term-pitch-accent-group-list:not([data-count="0"]):not([data-count="1"]) { padding-left: 1.4em; list-style-type: decimal; } .term-pitch-accent-list { margin: 0; padding: 0; list-style-type: none; display: inline; } .term-pitch-accent-list:not([data-count="0"]):not([data-count="1"]) { padding-left: 1.4em; list-style-type: circle; display: block; } .term-pitch-accent { display: inline; line-height: 1.5em; color: var(--dark-text-color); } .term-pitch-accent-list:not([data-count="0"]):not([data-count="1"])>.term-pitch-accent { display: list-item; } .term-pitch-accent-group-tag-list { margin-right: 0.375em; } .term-pitch-accent-disambiguation-list { padding-right: 0.25em; color: var(--light-text-color); } .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-special-tags>.pitches { display: inline; } .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; } :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; } /* 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(--light-text-color); } .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: "]"; } :root[data-compact-glossaries=true] .term-glossary-image-container { display: none; position: absolute; left: 0; top: 100%; z-index: 1; } :root[data-compact-glossaries=true] .entry:nth-last-of-type(1):not(:nth-of-type(1)) .term-glossary-image-container { bottom: 100%; top: auto; } :root[data-compact-glossaries=true] .term-glossary-image-link { position: relative; display: inline-block; } :root[data-compact-glossaries=true] .term-glossary-image-link:hover .term-glossary-image-container, :root[data-compact-glossaries=true] .term-glossary-image-link:focus .term-glossary-image-container { display: block; } :root:not([data-compact-glossaries=true]) .term-glossary-image-link-text { display: none; } :root:not([data-compact-glossaries=true]) .term-glossary-image-description { display: block; } /* Kanji */ .kanji-glyph { font-family: kanji-stroke-orders; font-size: 8.5em; line-height: 1; padding: 0.01em; vertical-align: top; } .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; list-style-type: none; color: var(--light-text-color); } .kanji-glossary-list:not([data-count="0"]):not([data-count="1"]) { padding-left: 1.4em; list-style-type: decimal; } .kanji-glossary { color: var(--dark-text-color); }