alex/yomichan
1
Fork 0
Code Releases Activity

Search CSS updates (#1979)

Browse Source 
* Update styles

* Limit the height of the query parser
This commit is contained in:
toasted-nutbread 2021-10-09 14:32:56 -04:00 committed by GitHub
parent e3986196e1
commit 0e4b769390
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 45 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ext/css/display.css
View File

@ -568,7 +568,13 @@ button.sidebar-button.sidebar-button-highlight {
/* Search page */ /* Search page */
.search-header {
display: flex;
flex-flow: column nowrap;
max-height: 100vh;
}
#query-parser-container { #query-parser-container {
overflow-y: auto;
padding-left: var(--entry-horizontal-padding); padding-left: var(--entry-horizontal-padding);
padding-right: var(--entry-horizontal-padding); padding-right: var(--entry-horizontal-padding);
padding-bottom: 0.25em; padding-bottom: 0.25em;

16
ext/css/search.css
View File

@ -87,7 +87,7 @@ h1 {
white-space: pre-wrap; white-space: pre-wrap;
z-index: 1; z-index: 1;
} }
#search-button { .search-button {
flex: 0 0 auto; flex: 0 0 auto;
position: relative; position: relative;
width: 2.5em; width: 2.5em;
@ -100,22 +100,22 @@ h1 {
transition: background-color var(--animation-duration) ease-in-out; transition: background-color var(--animation-duration) ease-in-out;
border-radius: 0; border-radius: 0;
} }
#search-button:hover, .search-button:hover,
#search-button:focus { .search-button:focus {
background-color: var(--input-background-color-dark); background-color: var(--input-background-color-dark);
} }
#search-button:focus:not(:focus-visible):not(:hover) { .search-button:focus:not(:focus-visible):not(:hover) {
background-color: var(--input-background-color); background-color: var(--input-background-color);
} }
#search-button:focus-visible { .search-button:focus-visible {
background-color: var(--input-background-color-dark); background-color: var(--input-background-color-dark);
} }
#search-button:active, .search-button:active,
#search-button:active:focus { .search-button:active:focus {
background-color: var(--input-background-color-darker); background-color: var(--input-background-color-darker);
} }
#search-button>.icon { .search-button>.icon {
display: block; display: block;
position: absolute; position: absolute;
left: 0; left: 0;

10
ext/popup.html
View File

@ -27,11 +27,13 @@
<span tabindex="-1" id="content-scroll-focus"></span> <span tabindex="-1" id="content-scroll-focus"></span>
<div class="scan-disable" id="query-parser-container" hidden> <div class="search-header">
<div class="search-option" id="query-parser-mode-container" hidden> <div class="scan-disable scrollbar" id="query-parser-container" hidden>
<select id="query-parser-mode-select"></select> <div class="search-option" id="query-parser-mode-container" hidden>
<select id="query-parser-mode-select"></select>
</div>
<div id="query-parser-content" lang="ja"></div>
</div> </div>
<div id="query-parser-content" lang="ja"></div>
</div> </div>
<div id="dictionary-entries"></div> <div id="dictionary-entries"></div>

48
ext/search.html
View File

@ -28,33 +28,35 @@
<span tabindex="-1" id="content-scroll-focus"></span> <span tabindex="-1" id="content-scroll-focus"></span>
<div id="intro"> <div class="search-header">
<h1>Yomichan Search</h1> <div id="intro">
</div> <h1>Yomichan Search</h1>
</div>
<div class="scan-disable"> <div class="scan-disable">
<div class="search-options"> <div class="search-options">
<label class="search-option"> <label class="search-option">
<label class="toggle"><input type="checkbox" id="wanakana-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label> <label class="toggle"><input type="checkbox" id="wanakana-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
<span class="search-option-label">Automatic kana conversion</span> <span class="search-option-label">Automatic kana conversion</span>
</label> </label>
<label class="search-option" id="search-option-clipboard-monitor-container"> <label class="search-option" id="search-option-clipboard-monitor-container">
<label class="toggle"><input type="checkbox" id="clipboard-monitor-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label> <label class="toggle"><input type="checkbox" id="clipboard-monitor-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
<span class="search-option-label">Clipboard monitor</span> <span class="search-option-label">Clipboard monitor</span>
</label> </label>
<div class="search-option" id="query-parser-mode-container" hidden> <div class="search-option" id="query-parser-mode-container" hidden>
<span class="search-option-pre-label">Parser:</span> <span class="search-option-pre-label">Parser:</span>
<select id="query-parser-mode-select"></select> <select id="query-parser-mode-select"></select>
</div>
</div>
<div class="search-textbox-container">
<textarea id="search-textbox" class="scrollbar" placeholder="Input a term, expression, sentence, or block of text" autocomplete="off" lang="ja" autofocus></textarea>
<button id="search-button" class="search-button"><span class="icon" data-icon="magnifying-glass"></span></button>
</div> </div>
</div> </div>
<div class="search-textbox-container">
<textarea id="search-textbox" placeholder="Input a term, expression, sentence, or block of text" autocomplete="off" lang="ja" autofocus></textarea>
<button id="search-button"><span class="icon" data-icon="magnifying-glass"></span></button>
</div>
</div>
<div class="scan-disable" id="query-parser-container" hidden> <div class="scan-disable scrollbar" id="query-parser-container" hidden>
<div id="query-parser-content" lang="ja"></div> <div id="query-parser-content" lang="ja"></div>
</div>
</div> </div>
<div id="dictionary-entries"></div> <div id="dictionary-entries"></div>