diff options
| -rw-r--r-- | ext/css/display.css | 14 | ||||
| -rw-r--r-- | ext/css/search.css | 2 | ||||
| -rw-r--r-- | ext/search.html | 78 |
3 files changed, 56 insertions, 38 deletions
diff --git a/ext/css/display.css b/ext/css/display.css index 2ae7eab0..68f7bf11 100644 --- a/ext/css/display.css +++ b/ext/css/display.css @@ -575,10 +575,24 @@ button.sidebar-button.sidebar-button-highlight { /* Search page */ +.search-header-wrapper { + background-color: var(--background-color); + width: 100%; + display: flex; + justify-content: center; +} +.sticky-header { + position: sticky; + top: 0px; + z-index: 1000; + padding-top: 10px; +} .search-header { + width: var(--content-width); display: flex; flex-flow: column nowrap; max-height: 100vh; + padding: var(--main-content-vertical-padding) var(--main-content-horizontal-padding); } #query-parser-container { overflow-y: auto; diff --git a/ext/css/search.css b/ext/css/search.css index 808a7045..fac8de60 100644 --- a/ext/css/search.css +++ b/ext/css/search.css @@ -134,7 +134,7 @@ h1 { .search-options { display: flex; flex-flow: row wrap; - margin: 0.5em 0; + margin: 0.5em 0 0 0; align-items: center; } .search-option { diff --git a/ext/search.html b/ext/search.html index 281c0c07..e15f9bb9 100644 --- a/ext/search.html +++ b/ext/search.html @@ -23,48 +23,52 @@ <div class="content-outer"> <div class="content"> <div class="content-scroll scrollbar" id="content-scroll"> - <div class="content-body" id="content-body"> - <div class="top-progress-bar-container"><div class="progress-bar-indeterminant" id="progress-indicator" hidden></div></div> - <div class="content-body-inner"> - - <span tabindex="-1" id="content-scroll-focus"></span> - - <div class="search-header"> - <div id="intro"> - <h1>Yomitan Search</h1> - </div> + <div class="top-progress-bar-container"><div class="progress-bar-indeterminant" id="progress-indicator" hidden></div></div> + <div class="search-header-wrapper"> + <div class="search-header"> + <div id="intro"> + <h1>Yomitan Search</h1> + </div> - <div class="scan-disable"> - <div class="search-options"> - <div class="search-option" id="search-option-profile-select"> - <span class="profile-select-container"><select class="profile-select" id="profile-select"> - <optgroup label="Primary Profile" id="profile-select-option-group"></optgroup> - </select></span> - </div> - <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> - <span class="search-option-label">Clipboard monitor</span> - </label> - <label class="search-option" id="search-option-wanakana"> - <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> - </label> - <div class="search-option" id="query-parser-mode-container" hidden> - <span class="search-option-pre-label">Parser:</span> - <select id="query-parser-mode-select"></select> - </div> + <div class="scan-disable"> + <div class="search-options"> + <div class="search-option" id="search-option-profile-select"> + <span class="profile-select-container"><select class="profile-select" id="profile-select"> + <optgroup label="Primary Profile" id="profile-select-option-group"></optgroup> + </select></span> </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 type="button" id="search-back-button" class="search-button" hidden><span class="icon" data-icon="left-chevron"></span></button> - <button type="button" id="search-button" class="search-button"><span class="icon" data-icon="magnifying-glass"></span></button> + <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> + <span class="search-option-label">Clipboard monitor</span> + </label> + <label class="search-option" id="search-option-wanakana"> + <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> + </label> + <div class="search-option" id="query-parser-mode-container" hidden> + <span class="search-option-pre-label">Parser:</span> + <select id="query-parser-mode-select"></select> </div> </div> - - <div class="scan-disable scrollbar" id="query-parser-container" hidden> - <div id="query-parser-content" lang="ja"></div> - </div> </div> + </div> + </div> + <div class="search-header-wrapper sticky-header"> + <div class="search-header"> + <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 type="button" id="search-back-button" class="search-button" hidden><span class="icon" data-icon="left-chevron"></span></button> + <button type="button" id="search-button" class="search-button"><span class="icon" data-icon="magnifying-glass"></span></button> + </div> + <div class="scan-disable scrollbar" id="query-parser-container" hidden> + <div id="query-parser-content" lang="ja"></div> + </div> + </div> + </div> + <div class="content-body" id="content-body"> + <div class="content-body-inner"> + + <span tabindex="-1" id="content-scroll-focus"></span> <div id="dictionary-entries"></div> |