diff options
| -rw-r--r-- | ext/css/display.css | 196 | ||||
| -rw-r--r-- | ext/css/structured-content.css | 211 | ||||
| -rw-r--r-- | ext/popup.html | 1 | ||||
| -rw-r--r-- | ext/search.html | 1 |
4 files changed, 213 insertions, 196 deletions
diff --git a/ext/css/display.css b/ext/css/display.css index e1efb223..b23ae5e5 100644 --- a/ext/css/display.css +++ b/ext/css/display.css @@ -1556,202 +1556,6 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con } -/* 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; -} - - /* Kanji */ .kanji-glyph-container { display: block; 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; +} diff --git a/ext/popup.html b/ext/popup.html index 9f71ebe1..3018f8bf 100644 --- a/ext/popup.html +++ b/ext/popup.html @@ -13,6 +13,7 @@ <link rel="icon" type="image/png" href="/images/icon128.png" sizes="128x128"> <link rel="stylesheet" type="text/css" href="/css/material.css"> <link rel="stylesheet" type="text/css" href="/css/display.css"> + <link rel="stylesheet" type="text/css" href="/css/structured-content.css"> </head> <body> diff --git a/ext/search.html b/ext/search.html index ec0a964c..2e25620e 100644 --- a/ext/search.html +++ b/ext/search.html @@ -13,6 +13,7 @@ <link rel="icon" type="image/png" href="/images/icon128.png" sizes="128x128"> <link rel="stylesheet" type="text/css" href="/css/material.css"> <link rel="stylesheet" type="text/css" href="/css/display.css"> + <link rel="stylesheet" type="text/css" href="/css/structured-content.css"> <link rel="stylesheet" type="text/css" href="/css/search.css"> </head> <body> |