/* * 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/>. */ /* Variables */ :root { --main-content-horizontal-padding: 0.72em; --entry-horizontal-padding: 0; --padding: calc(10em / var(--font-size-no-units)); --content-width-search: 700; --content-width: calc(1em * var(--content-width-search) / var(--font-size-no-units)); --background-color: #ffffff; --separator-color1: #cccccc; } :root:not([data-loaded=true]) { --animation-duration: 0s; } :root[data-theme=dark] { --separator-color1: #333333; } /* Common styles */ :root { height: 100%; } body { background-color: var(--background-color); margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: var(--text-color); height: 100%; overflow: hidden; } h1 { font-size: 2em; line-height: 1.5em; margin: 0; padding: 0.25em 0 0; font-weight: normal; box-sizing: border-box; border-bottom: calc(1em / (var(--font-size-no-units) * 2)) solid var(--separator-color1); } /* Search bar */ .search-textbox-container { display: flex; flex-flow: row nowrap; width: 100%; align-items: stretch; margin: 0; padding: 0; border: 0; } #search-textbox { color: var(--text-color); flex: 1 1 auto; box-sizing: border-box; padding: var(--textarea-padding); background-color: var(--input-background-color); border-radius: 0; line-height: var(--textarea-line-height); border: 0; outline: none; width: 100%; height: calc(var(--textarea-line-height) + var(--textarea-padding) * 2); min-height: calc(var(--textarea-line-height) + var(--textarea-padding) * 2); max-height: calc(var(--textarea-line-height) * 10 + var(--textarea-padding) * 2); resize: vertical; font-size: var(--font-size); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; white-space: pre-wrap; z-index: 1; } .search-button { flex: 0 0 auto; position: relative; width: 2.5em; background-color: var(--input-background-color); border: 0; padding: 0; margin: 0; cursor: pointer; outline: none; transition: background-color var(--animation-duration) ease-in-out; border-radius: 0; } .search-button:hover, .search-button:focus { background-color: var(--input-background-color-dark); } .search-button:focus:not(:focus-visible):not(:hover) { background-color: var(--input-background-color); } .search-button:focus-visible { background-color: var(--input-background-color-dark); } .search-button:active, .search-button:active:focus { background-color: var(--input-background-color-darker); } .search-button>.icon { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: var(--button-default-icon-color); --icon-size: 16px 16px; } /* Search options */ .search-options { display: flex; flex-flow: row wrap; margin: 0.5em calc(-1 * var(--main-content-horizontal-padding)); align-items: center; } .search-option { flex: 0 1 auto; margin: 0.5em 1em; align-items: center; cursor: pointer; } .search-option:not([hidden]) { display: flex; } .search-option-label { padding-left: 0.5em; } .search-option-pre-label { padding-right: 0.5em; } #query-parser-mode-container { flex: 1 1 auto; } #query-parser-mode-container:not([hidden]) { display: flex; } #query-parser-mode-select { flex: 1 1 auto; max-width: 220px; min-width: 100px; } /* Search styles */ #intro { overflow: hidden; } #intro>p { margin: 0; } :root[data-search-mode=action-popup] #intro, :root[data-search-mode=action-popup] #search-option-clipboard-monitor-container { display: none; } :root[data-search-mode=action-popup], :root[data-search-mode=action-popup] body { width: 640px; height: 480px; }