Something went wrong. Try again.
Pop-up dictionary browser extension for language learning. Successor to Yomichan. (PERSONAL FORK)
Something went wrong. Try again.
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260/* * Copyright (C) 2023-2025 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); 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); display: none;}.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-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 { /* Workaround for coloring monochrome gloss images due to issues with masking using a canvas without loading extra media */ /* drop-shadow with 0.01px blur is at minimum required for Firefox to render the shadow when used on a canvas */ --shadow-settings: 0 0 0.01px var(--text-color); filter: grayscale(1) opacity(0.5) drop-shadow(var(--shadow-settings)) drop-shadow(var(--shadow-settings)) saturate(1000%) brightness(1000%);}
.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,:root[data-glossary-layout-mode^=compact] .definition-item:nth-last-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: baseline;}.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);}.gloss-sc-details { padding-left: var(--list-padding1);}.gloss-sc-summary { list-style-position: outside;}