Something went wrong. Try again.
Pop-up dictionary browser extension for language learning. Successor to Yomichan. (PERSONAL FORK)
Something went wrong. Try again.
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165/* * Copyright (C) 2023-2025 Yomitan Authors * Copyright (C) 2020-2022 Yomichan Authors * * This program is free software: you can redistribute it and/or modify * it under the terms 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/>. */
:root { --font-size-no-units: 14; --font-size: calc(1px * var(--font-size-no-units));
--line-height-no-units: 20; --line-height: calc(var(--line-height-no-units) / var(--font-size-no-units));
--animation-duration: 0s;
--example-text-color: #333333; --background-color: rgba(0, 0, 0, 0);}:root[data-loaded=true] { --animation-duration: 0.25s;}
:root[data-theme=dark] { --example-text-color: #d4d4d4; --background-color: rgba(0, 0, 0, 0);}
html { background-color: var(--background-color);}html.dark { background-color: var(--background-color);}html,body { margin: 0; padding: 0; border: 0; overflow: hidden; width: 100%; height: 100%; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: var(--font-size); line-height: var(--line-height);}
.content { display: flex; min-width: 100%; min-height: 100%; box-sizing: border-box; padding: 1em; flex-flow: column nowrap; align-items: center; justify-content: center;}.content-body { max-width: 100%; width: 400px;}.top-options { max-width: 100%; display: flex; flex-flow: row nowrap; align-items: center;}.top-options-left { flex: 1 1 auto;}.top-options-right { flex: 0 0 auto;}
.example-text-container { position: relative;}.example-text { display: block; width: 100%; font-size: 24px; line-height: 1.25em; height: 1.25em; box-sizing: border-box; border: 1px solid rgba(221, 221, 221, 0); margin: 0; padding: 0; outline: none; color: var(--example-text-color); background-color: transparent; white-space: pre; transition: background-color var(--animation-duration) linear 0s, border-color var(--animation-duration) linear 0s;}.example-text:hover,.example-text-input { border-color: #dddddd;}.example-text[hidden] { display: none;}.example-text-input { position: absolute; left: 0; top: 0; right: 0; bottom: 0;}.example-text-input:not([hidden])+.example-text { visibility: hidden;}
.popup-placeholder { display: flex; width: 100%; height: 250px; padding-top: 10px; border: 1px solid rgba(0, 0, 0, 0); flex-flow: column nowrap; justify-content: center;}.placeholder-info { flex: 0 1 auto; visibility: hidden; opacity: 0; transition: opacity var(--animation-duration) linear 0s, visibility 0s linear var(--animation-duration);}.placeholder-info.placeholder-info-visible { color: var(--example-text-color); visibility: visible; opacity: 1; transition: opacity var(--animation-duration) linear 0s, visibility 0s linear 0s;}
.theme-button { display: inline-block; margin-left: 0.5em; text-decoration: none; cursor: pointer; white-space: nowrap; line-height: 0;}.theme-button>input { vertical-align: middle; margin: 0 0.25em 0 0; padding: 0;}.theme-button>span { vertical-align: middle;}.theme-button:hover>span { text-decoration: underline;}