diff options
Diffstat (limited to 'ext/css/structured-content.css')
| -rw-r--r-- | ext/css/structured-content.css | 211 |
1 files changed, 211 insertions, 0 deletions
diff --git a/ext/css/structured-content.css b/ext/css/structured-content.css new file mode 100644 index 00000000..4dd164a5 --- /dev/null +++ b/ext/css/structured-content.css @@ -0,0 +1,211 @@ +/* + * Copyright (C) 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/>. + */ + +/* Glossary images */ +.gloss-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; +} +.gloss-image-link[data-background=true]>.gloss-image-container { + background-color: var(--gloss-image-background-color); +} +.gloss-image-link { + cursor: inherit; + color: inherit; + display: inline-block; + position: relative; + line-height: 1; +} +.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 { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: var(--text-color); + + --image: none; + --icon-size: contain; + --icon-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-aspect-ratio-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; +} + + +/* Structured content glossary styles */ +.gloss-sc-table-container { + display: block; +} +.gloss-sc-table { + table-layout: auto; + border-collapse: collapse; + border-spacing: 0; +} +.gloss-sc-tbody { + background-color: transparent; +} +.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: calc(1em / var(--font-size-no-units)) solid var(--text-color-light2); + padding: 0.25em; + vertical-align: top; +} |