/* * 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/>. */ /* * 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: 14px; line-height: 1.42857143; /* 14px => 20px */ } body { margin: 0; border: 0; padding: 0; overflow-y: scroll; /* always show scroll bar */ } ol, ul { margin-top: 0; margin-bottom: 0.72em; } #spinner { position: fixed; z-index: 1; right: 0.36em; bottom: 0.36em; } #spinner>img { width: 2.28571428em; /* 14px => 32px */ height: 2.28571428em; /* 14px => 32px */ } h2 { font-size: 1.25em; font-weight: normal; margin: 0.25em 0 0; border-bottom-width: 0.05714285714285714em; /* 14px * 1.25em => 1px */ border-bottom-style: solid; } /* * Navigation */ .navigation-header { top: 0; left: 0; width: 100%; height: 2.1em; box-sizing: border-box; padding: 0.25em 0.5em; border-bottom-width: 0.07142857em; /* 14px => 1px */ border-bottom-style: solid; z-index: 10; } :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; } .navigation-header-actions { display: flex; } .navigation-header:not([data-has-previous=true]) .navigation-header-actions .action-previous>img, .navigation-header:not([data-has-next=true]) .navigation-header-actions .action-next>img { opacity: 0.25; -webkit-filter: grayscale(100%); filter: grayscale(100%); } .action-next>img { transform: scaleX(-1); } /* * Search page */ .icon-checkbox { display: none; } .icon-checkbox+label { cursor: pointer; font-size: 1.6em; padding: 0.1em; user-select: none; } #query-parser-content { margin-top: 0.5em; font-size: 2em; } #query-parser-content[data-term-spacing=true] .query-parser-term { margin-right: 0.2em; } :root[data-yomichan-page=search][data-search-mode=popup] .search-input { display: none; } /* * Entries */ .entry { padding-top: 0.72em; padding-bottom: 0.72em; } :root[data-yomichan-page=float] .entry { padding-left: 0.72em; padding-right: 0.72em; } .actions .disabled { pointer-events: none; cursor: default; } .actions .disabled img { -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity: 0.25; } .actions .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; } .icon-image { width: 1.14285714em; /* 14px => 16px */ height: 1.14285714em; /* 14px => 16px */ display: block; } .term-expression .kanji-link { border-bottom-width: 0.03571428em; /* 28px => 1px */ border-bottom-style: dashed; text-decoration: none; } .entry:not(.entry-current) .current { display: none; } .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; } .tag-inner { display: block; } .tag-list>.tag:not(:last-child) { margin-right: 0.375em; } :root:not([data-enable-search-tags=true]) .tag[data-category=search] { display: none; } .entry-header2, .entry-header3 { display: inline; } .term-frequency-separator::before { content: ":"; } .entry+.entry { border-top-width: 0.07142857em; /* 14px => 1px */ border-top-style: solid; } .entry[data-type=term][data-expression-multi=true] .actions>.action-play-audio { display: none; } .term-reasons { display: inline-block; } .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-block; } .term-expression { display: inline-block; } .term-expression-text { display: inline-block; font-size: 2em; } .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):after { font-size: 2em; content: "\3001"; } .entry[data-expression-multi=true] .term-expression-list>.term-expression:last-of-type:after { font-size: 2em; content: "\3000"; visibility: hidden; } .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: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; } .term-definition-list { margin: 0; padding: 0; list-style-type: none; } .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-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: ", "; } .debug-info { display: none; } :root[data-debug=true] .debug-info { display: block; } :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; } .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; } /* * Pitch accent styles */ .entry[data-pitch-accent-count='0'] .term-pitch-accent-container { display: none; } .term-pitch-accent-container { border-bottom-width: 0.05714285714285714em; /* 14px * 1.25em => 1px */ border-bottom-style: solid; padding-bottom: 0.25em; margin-bottom: 0.25em; } .term-pitch-accent-group-list { margin: 0; padding: 0; list-style-type: none; } .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; } .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; } .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"], :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; } .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[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=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: #000000; stroke-width: 5; } .term-pitch-accent-graph-line-tail { stroke-dasharray: 5 5; } #term-pitch-accent-graph-dot { fill: #000000; stroke: #000000; stroke-width: 5; } #term-pitch-accent-graph-dot-downstep { fill: none; stroke: #000000; stroke-width: 5; } #term-pitch-accent-graph-dot-downstep>circle:last-of-type { fill: #000000; } #term-pitch-accent-graph-triangle { fill: none; stroke: #000000; stroke-width: 5; } /* * 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-width: 0.07142857em; /* 14px => 1px */ border-top-style: solid; 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; } .kanji-glossary-list:not([data-count="0"]):not([data-count="1"]) { padding-left: 1.4em; list-style-type: decimal; }