Restyle search key shortcut

This commit is contained in:
Richard Feldman 2022-10-23 13:19:46 -04:00
parent a4ed5a582d
commit c15a1dde22
No known key found for this signature in database
GPG key ID: F1F21AA5B1D9E43B
2 changed files with 15 additions and 3 deletions

View file

@ -15,7 +15,7 @@
<body>
<nav id="sidebar-nav">
<input id="module-search" aria-labelledby="search-link" type="text" placeholder="Search" />
<label for="module-search" id="search-link"><span id="search-link-text">Search</span> <span id="search-link-hint">(shortcut: S)</span></label>
<label for="module-search" id="search-link"><span id="search-link-text">Search</span> <span id="search-link-hint">(press <span id="search-shortcut-key">s</span>)</span></label>
<div class="module-links">
<!-- Module links -->
</div>

View file

@ -451,9 +451,17 @@ pre {
}
#search-link-hint {
font-style: italic;
margin-left: 1em;
opacity: 0.7;
opacity: 0.6;
}
#search-shortcut-key {
font-family: monospace;
border: 1px solid #666;
padding: 1px 3px 3px;
font-style: normal;
border-radius: 4px;
line-height: 15px;
}
@media (prefers-color-scheme: dark) {
@ -480,6 +488,10 @@ pre {
}
@media only screen and (max-device-width: 480px) and (orientation: portrait) {
#search-link-hint {
display: none;
}
.search-button {
display: block; /* This is only visible in mobile. */
}