/* * Copyright (C) 2023 Yomitan Authors * Copyright (C) 2021-2022 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/>. */ /* Glossary images */ .gloss-image-container { display: inline-block; white-space: nowrap; max-width: 100%; max-height: 100vh; position: relative; vertical-align: top; line-height: 0; font-size: calc(1em / var(--font-size-no-units)); overflow: hidden; } .gloss-image-link[data-background=true]>.gloss-image-container { background-color: var(--gloss-image-background-color); } .gloss-image-link { cursor: inherit; color: var(--accent-color); display: inline-block; position: relative; line-height: 1; max-width: 100%; } .gloss-image-link:hover { color: var(--accent-color-dark); } .gloss-image-link[href]:hover { cursor: pointer; } .gloss-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); } .gloss-image-link[data-has-image=true][data-image-load-state=load-error] .gloss-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; } .gloss-image-background { --image: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--text-color); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-mode: alpha; -webkit-mask-size: contain; -webkit-mask-image: var(--image); mask-repeat: no-repeat; mask-position: center center; mask-mode: alpha; mask-size: contain; mask-image: var(--image); } .gloss-image { display: inline-block; vertical-align: top; object-fit: contain; border: none; outline: none; } .gloss-image-link[data-has-aspect-ratio=true] .gloss-image { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .gloss-image:not([src]) { display: none; } .gloss-image-link[data-image-rendering=pixelated] .gloss-image, .gloss-image-link[data-image-rendering=pixelated] .gloss-image-background { image-rendering: auto; image-rendering: -moz-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: pixelated; image-rendering: crisp-edges; } .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image, .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image-background { image-rendering: auto; image-rendering: -moz-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } :root[data-browser=firefox] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image, :root[data-browser=firefox] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image-background, :root[data-browser=firefox-mobile] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image, :root[data-browser=firefox-mobile] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image-background { image-rendering: auto; } .gloss-image-link[data-has-aspect-ratio=true] .gloss-image-sizer { display: inline-block; width: 0; vertical-align: top; font-size: 0; } .gloss-image-link-text { display: none; line-height: var(--line-height); } .gloss-image-link-text::before { content: '['; } .gloss-image-link-text::after { content: ']'; } .gloss-image-description { display: block; white-space: pre-line; } .gloss-image-link[data-appearance=monochrome] .gloss-image { visibility: hidden; } .gloss-image-link:not([data-appearance=monochrome]) .gloss-image-background { display: none; } .gloss-image-link[data-size-units=em] .gloss-image-container { font-size: 1em; } .gloss-image-link[data-vertical-align=baseline] { vertical-align: baseline; } .gloss-image-link[data-vertical-align=sub] { vertical-align: sub; } .gloss-image-link[data-vertical-align=super] { vertical-align: super; } .gloss-image-link[data-vertical-align=text-top] { vertical-align: top; } .gloss-image-link[data-vertical-align=text-bottom] { vertical-align: bottom; } .gloss-image-link[data-vertical-align=middle] { vertical-align: middle; } .gloss-image-link[data-vertical-align=top] { vertical-align: top; } .gloss-image-link[data-vertical-align=bottom] { vertical-align: bottom; } .gloss-image-link[data-collapsed=true], :root[data-glossary-layout-mode=compact] .gloss-image-link[data-collapsible=true] { vertical-align: baseline; } .gloss-image-link[data-collapsed=true] .gloss-image-container, :root[data-glossary-layout-mode=compact] .gloss-image-link[data-collapsible=true] .gloss-image-container { display: none; position: absolute; left: 0; top: 100%; z-index: 1; } .entry:nth-last-of-type(1):not(:nth-of-type(1)) .gloss-image-link[data-collapsed=true] .gloss-image-container, :root[data-glossary-layout-mode=compact] .entry:nth-last-of-type(1):not(:nth-of-type(1)) .gloss-image-link[data-collapsible=true] .gloss-image-container { bottom: 100%; top: auto; } .gloss-image-link[data-collapsed=true]:hover .gloss-image-container, .gloss-image-link[data-collapsed=true]:focus .gloss-image-container, :root[data-glossary-layout-mode=compact] .gloss-image-link[data-collapsible=true]:hover .gloss-image-container, :root[data-glossary-layout-mode=compact] .gloss-image-link[data-collapsible=true]:focus .gloss-image-container { display: block; } .gloss-image-link[data-collapsed=true] .gloss-image-link-text, :root[data-glossary-layout-mode=compact] .gloss-image-link[data-collapsible=true] .gloss-image-link-text { display: inline; } .gloss-image-link[data-collapsed=true]~.gloss-image-description, :root[data-glossary-layout-mode=compact] .gloss-image-description { display: inline; } /* Links */ .gloss-link-text { vertical-align: middle; } .gloss-link-external-icon { display: inline-block; vertical-align: middle; width: calc(16em / var(--font-size-no-units)); height: calc(16em / var(--font-size-no-units)); margin-left: 0.25em; background-color: var(--link-color); position: relative; } /* Structured content glossary styles */ .gloss-sc-table-container { display: block; } .gloss-sc-table { table-layout: auto; border-collapse: collapse; } .gloss-sc-thead, .gloss-sc-tfoot, .gloss-sc-th { font-weight: bold; background-color: var(--background-color-dark1); } .gloss-sc-th, .gloss-sc-td { border-width: calc(1em / var(--font-size-no-units)); border-style: solid; border-color: var(--text-color-light2); padding: 0.25em; vertical-align: top; } .gloss-sc-ol, .gloss-sc-ul { padding-left: var(--list-padding2); } :root[data-glossary-layout-mode=compact] .gloss-sc-ul[data-sc-content=glossary] { display: inline; list-style: none; padding-left: 0; } :root[data-glossary-layout-mode=compact] .gloss-sc-ul[data-sc-content=glossary] .gloss-sc-li { display: inline; } :root[data-glossary-layout-mode=compact] .gloss-sc-ul[data-sc-content=glossary] .gloss-sc-li:not(:first-child)::before { white-space: pre-wrap; content: var(--compact-list-separator); display: inline; color: var(--text-color-light3); }