summaryrefslogtreecommitdiff
path: root/ext/css/search.css
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-02-12 21:03:30 -0500
committerGitHub <noreply@github.com>2021-02-12 21:03:30 -0500
commit4f13de283572b2c57e7462f1030c12fe8335882e (patch)
tree15d49f2eef5e0c440ada6aa07a9f62da75c13313 /ext/css/search.css
parent8454f52378b9410393262122c6920606e187e18f (diff)
Move css files (#1374)
* Move bg/css/ to css/ * Move mixed/css/ to css/
Diffstat (limited to 'ext/css/search.css')
-rw-r--r--ext/css/search.css162
1 files changed, 162 insertions, 0 deletions
diff --git a/ext/css/search.css b/ext/css/search.css
new file mode 100644
index 00000000..eb537ba4
--- /dev/null
+++ b/ext/css/search.css
@@ -0,0 +1,162 @@
+/*
+ * Copyright (C) 2020-2021 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));
+ --main-content-size: calc(700em / 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:active {
+ 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-icon-color);
+ --icon-size: 16px 16px;
+}
+
+/* Search options */
+.search-options {
+ display: flex;
+ flex-flow: row wrap;
+ margin: 0.5em -1em;
+ 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;
+}
+