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;

4
ext/popup.html
View File

@ -27,12 +27,14 @@
<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="scan-disable scrollbar" id="query-parser-container" hidden>
<div class="search-option" id="query-parser-mode-container" hidden> <div class="search-option" id="query-parser-mode-container" hidden>
<select id="query-parser-mode-select"></select> <select id="query-parser-mode-select"></select>
</div> </div>
<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>

8
ext/search.html
View File

@ -28,6 +28,7 @@
<span tabindex="-1" id="content-scroll-focus"></span> <span tabindex="-1" id="content-scroll-focus"></span>
<div class="search-header">
<div id="intro"> <div id="intro">
<h1>Yomichan Search</h1> <h1>Yomichan Search</h1>
</div> </div>
@ -48,14 +49,15 @@
</div> </div>
</div> </div>
<div class="search-textbox-container"> <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> <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"><span class="icon" data-icon="magnifying-glass"></span></button> <button id="search-button" class="search-button"><span class="icon" data-icon="magnifying-glass"></span></button>
</div> </div>
</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>