michaelh/zephyr
1
0
Fork 0
Code Releases Activity

doc: Make search engine configurable

Browse source 
Add UI to select preferred search engine when Google Programmable Search is
enabled. The user's preference is saved using local storage.

This also makes the search input field of type "search" for better UX (in
particular on mobile).

Signed-off-by: Benjamin Cabé <benjamin@zephyrproject.org>
This commit is contained in:
Benjamin Cabé 2023-11-07 11:32:08 +01:00 • committed by Anas Nashif
commit 7e253ff937
5 changed files with 214 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

67
doc/_static/css/custom.css vendored
View file

@ -552,7 +552,10 @@ kbd, .kbd,
background-color: var(--navbar-background-color-active);
}
.wy-side-nav-search input[type="text"] {
.wy-side-nav-search input[type=search] {
width: 100%;
border-radius: 50px;
padding: 6px 12px;
background-color: var(--input-background-color);
color: var(--body-color);
/* Avoid reflowing when toggling the focus state */
@ -563,11 +566,11 @@ kbd, .kbd,
font-size: 14px;
}
.wy-side-nav-search input[type="text"]:focus {
.wy-side-nav-search input[type="search"]:focus {
border: 2px solid var(--input-focus-border-color);
}
.wy-side-nav-search input[type="text"]::placeholder {
.wy-side-nav-search input[type="search"]::placeholder {
color: var(--body-color);
opacity: 0.55;
}
@ -889,3 +892,61 @@ dark-mode-toggle::part(toggleLabel){
font-size: 3rem;
color: white;
}
/* Custom search box, including search engine selection */
.search-container {
position: relative;
}
#search-se-settings-icon {
position: absolute;
color: var(--body-color);
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
opacity: 0.8;
}
#search-se-menu {
display: none;
position: absolute;
font-size: 11px;
background-color: var(--input-background-color);
color: var(--body-color);
right: 0px;
top: 36px;
border: solid 1px var(--body-color);
border-radius: 10px;
z-index: 1000;
}
#search-se-menu ul {
list-style: none;
margin: 0;
padding: 2px;
}
#search-se-menu ul li {
padding: 8px 12px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1em;
}
#search-se-menu [role="menuitemradio"]:focus {
background-color: var(--navbar-current-background-color-hover);
color: var(--navbar-level-1-color);
border-radius: 10px;
}
#search-se-menu ul li .fa-check {
display: none;
}
#search-se-menu ul li.selected .fa-check {
display: inline;
}