diff --git a/src/style.css b/src/style.css index b9cf6297..df238843 100644 --- a/src/style.css +++ b/src/style.css @@ -54,7 +54,7 @@ html[data-theme='dark'] { --docsearch-modal-shadow: inset 1px 1px 0 0 rgb(44, 46, 64), 0 3px 8px 0 rgb(0, 3, 9); --docsearch-searchbox-background: rgb(9, 10, 17); - --docsearch-searchbox-focus-background: black; + --docsearch-searchbox-focus-background: #000; --docsearch-hit-color: var(--ifm-color-emphasis-500); --docsearch-hit-shadow: none; --docsearch-hit-background: rgb(9, 10, 17); @@ -77,7 +77,7 @@ html[data-theme='dark'] { .DocSearch-SearchButton { align-items: center; background: var(--docsearch-searchbox-background); - border: none; + border: 0; border-radius: 40px; color: var(--docsearch-text-color); color: var(--docsearch-muted-color); @@ -162,7 +162,7 @@ html[data-theme='dark'] { .DocSearch-Link { appearance: none; background: none; - border: none; + border: 0; color: var(--docsearch-highlight-color); cursor: pointer; font: inherit; @@ -202,7 +202,7 @@ html[data-theme='dark'] { .DocSearch-Input { appearance: none; background: transparent; - border: none; + border: 0; color: var(--docsearch-text-color); flex: 1; font: inherit; @@ -231,7 +231,6 @@ html[data-theme='dark'] { padding: 0; } -.DocSearch-Container--Stalled .DocSearch-LoadingIndicator, .DocSearch-MagnifierLabel, .DocSearch-Reset { align-items: center; @@ -240,17 +239,27 @@ html[data-theme='dark'] { justify-content: center; } -.DocSearch-Container--Stalled .DocSearch-MagnifierLabel, +.DocSearch-Container--Stalled .DocSearch-MagnifierLabel { + display: none; +} + .DocSearch-LoadingIndicator { display: none; } +.DocSearch-Container--Stalled .DocSearch-LoadingIndicator { + align-items: center; + color: var(--docsearch-highlight-color); + display: flex; + justify-content: center; +} + @media screen and (prefers-reduced-motion: reduce) { .DocSearch-Reset { animation: none; appearance: none; background: none; - border: none; + border: 0; border-radius: 50%; color: var(--docsearch-icon-color); cursor: pointer; @@ -263,10 +272,11 @@ html[data-theme='dark'] { animation: fade-in 0.1s ease-in forwards; appearance: none; background: none; - border: none; + border: 0; border-radius: 50%; color: var(--docsearch-icon-color); cursor: pointer; + padding: 2px; right: 0; stroke-width: var(--docsearch-icon-stroke-width); } @@ -279,14 +289,6 @@ html[data-theme='dark'] { outline: none; } -.DocSearch-Reset { - border: none; - border-radius: 50%; - color: inherit; - cursor: pointer; - padding: 2px; -} - .DocSearch-Reset:hover { color: var(--docsearch-highlight-color); } @@ -336,68 +338,6 @@ html[data-theme='dark'] { padding: 0; } -/* Modal Footer */ - -.DocSearch-Footer { - align-items: center; - background: var(--docsearch-footer-background); - border-radius: 0 0 8px 8px; - box-shadow: var(--docsearch-footer-shadow); - display: flex; - flex-direction: row-reverse; - flex-shrink: 0; - height: var(--docsearch-footer-height); - justify-content: space-between; - padding: 0 var(--docsearch-spacing); - position: relative; - user-select: none; - width: 100%; - z-index: 300; -} - -.DocSearch-Commands { - display: flex; - list-style: none; - margin: 0; - padding: 0; -} - -.DocSearch-Commands li:not(:last-of-type) { - margin-right: 0.8em; -} - -.DocSearch-Commands { - color: var(--docsearch-muted-color); - display: flex; -} - -.DocSearch-Commands li { - align-items: center; - display: flex; -} - -.DocSearch-Commands-Key { - align-items: center; - background: var(--docsearch-key-gradient); - border-radius: 2px; - box-shadow: var(--docsearch-key-shadow); - display: flex; - height: 18px; - justify-content: center; - margin-right: 0.4em; - padding-bottom: 2px; - width: 20px; -} - -.DocSearch-Logo a { - display: flex; -} - -.DocSearch-Logo svg { - color: var(--docsearch-logo-color); - margin-left: 8px; -} - .DocSearch-Label { color: var(--docsearch-muted-color); font-size: 0.75em; @@ -415,6 +355,15 @@ html[data-theme='dark'] { font-size: 1.2em; } +.DocSearch-Logo a { + display: flex; +} + +.DocSearch-Logo svg { + color: var(--docsearch-logo-color); + margin-left: 8px; +} + /* Hit */ .DocSearch-Hits:last-of-type { @@ -509,16 +458,6 @@ html[data-theme='dark'] { background-color: var(--docsearch-highlight-color); } -.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-title, -.DocSearch-Hit[aria-selected='true'] mark, -.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-text, -.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-path, -.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-icon, -.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-action, -.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-Tree { - color: var(--docsearch-hit-active-color) !important; -} - .DocSearch-Hit[aria-selected='true'] mark { text-decoration: underline; } @@ -532,21 +471,19 @@ html[data-theme='dark'] { padding: 0 var(--docsearch-spacing) 0 0; } -.DocSearch-Hit-icon, -.DocSearch-Hit-action { - color: var(--docsearch-muted-color); - stroke-width: var(--docsearch-icon-stroke-width); -} - .DocSearch-Hit-icon { + color: var(--docsearch-muted-color); height: 20px; + stroke-width: var(--docsearch-icon-stroke-width); width: 20px; } .DocSearch-Hit-action { align-items: center; + color: var(--docsearch-muted-color); display: flex; height: 22px; + stroke-width: var(--docsearch-icon-stroke-width); width: 22px; } @@ -563,17 +500,17 @@ html[data-theme='dark'] { .DocSearch-Hit-action-button { appearance: none; background: none; - border: none; + border: 0; border-radius: 50%; color: inherit; cursor: pointer; padding: 2px; } -svg.DocSearch-Hit-Select-Icon { +.DocSearch-Hit-Select-Icon { display: none; } -.DocSearch-Hit[aria-selected='true'] svg.DocSearch-Hit-Select-Icon { +.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-Select-Icon { display: block; } @@ -593,62 +530,6 @@ svg.DocSearch-Hit-Select-Icon { } } -@media screen and (prefers-reduced-motion: reduce) { - .DocSearch-Hit-action-button:hover, - .DocSearch-Hit-action-button:focus { - background: rgba(0, 0, 0, 0.2); - transition: none; - } -} - -@media screen and (prefers-reduced-motion: reduce) { - .DocSearch-Hit-action-button:hover, - .DocSearch-Hit-action-button:focus { - background: rgba(0, 0, 0, 0.2); - transition: none; - } -} - -@media screen and (prefers-reduced-motion: reduce) { - .DocSearch-Hit-action-button:hover, - .DocSearch-Hit-action-button:focus { - background: rgba(0, 0, 0, 0.2); - transition: none; - } -} - -@media screen and (prefers-reduced-motion: reduce) { - .DocSearch-Hit-action-button:hover, - .DocSearch-Hit-action-button:focus { - background: rgba(0, 0, 0, 0.2); - transition: none; - } -} - -@media screen and (prefers-reduced-motion: reduce) { - .DocSearch-Hit-action-button:hover, - .DocSearch-Hit-action-button:focus { - background: rgba(0, 0, 0, 0.2); - transition: none; - } -} - -@media screen and (prefers-reduced-motion: reduce) { - .DocSearch-Hit-action-button:hover, - .DocSearch-Hit-action-button:focus { - background: rgba(0, 0, 0, 0.2); - transition: none; - } -} - -@media screen and (prefers-reduced-motion: reduce) { - .DocSearch-Hit-action-button:hover, - .DocSearch-Hit-action-button:focus { - background: rgba(0, 0, 0, 0.2); - transition: none; - } -} - @media screen and (prefers-reduced-motion: reduce) { .DocSearch-Hit-action-button:hover, .DocSearch-Hit-action-button:focus { @@ -692,6 +573,24 @@ svg.DocSearch-Hit-Select-Icon { font-size: 0.75em; } +.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-title, +.DocSearch-Hit[aria-selected='true'] mark, +.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-text, +.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-path, +.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-icon, +.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-action, +.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-Tree { + color: var(--docsearch-hit-active-color) !important; +} + +@media screen and (prefers-reduced-motion: reduce) { + .DocSearch-Hit-action-button:hover, + .DocSearch-Hit-action-button:focus { + background: rgba(0, 0, 0, 0.2); + transition: none; + } +} + /* No Results - Start Screen - Error Screen */ .DocSearch-NoResults, @@ -728,7 +627,7 @@ svg.DocSearch-Hit-Select-Icon { .DocSearch-Prefill { appearance: none; background: none; - border: none; + border: 0; border-radius: 1em; color: var(--docsearch-highlight-color); cursor: pointer; @@ -744,6 +643,55 @@ svg.DocSearch-Hit-Select-Icon { text-decoration: underline; } +/* Modal Footer */ + +.DocSearch-Footer { + align-items: center; + background: var(--docsearch-footer-background); + border-radius: 0 0 8px 8px; + box-shadow: var(--docsearch-footer-shadow); + display: flex; + flex-direction: row-reverse; + flex-shrink: 0; + height: var(--docsearch-footer-height); + justify-content: space-between; + padding: 0 var(--docsearch-spacing); + position: relative; + user-select: none; + width: 100%; + z-index: 300; +} + +.DocSearch-Commands { + color: var(--docsearch-muted-color); + display: flex; + list-style: none; + margin: 0; + padding: 0; +} + +.DocSearch-Commands li { + align-items: center; + display: flex; +} + +.DocSearch-Commands li:not(:last-of-type) { + margin-right: 0.8em; +} + +.DocSearch-Commands-Key { + align-items: center; + background: var(--docsearch-key-gradient); + border-radius: 2px; + box-shadow: var(--docsearch-key-shadow); + display: flex; + height: 18px; + justify-content: center; + margin-right: 0.4em; + padding-bottom: 2px; + width: 20px; +} + /* Responsive */ @media (max-width: 750px) { :root {