diff options
Diffstat (limited to 'src/static/css')
-rw-r--r-- | src/static/css/site.css | 114 |
1 files changed, 82 insertions, 32 deletions
diff --git a/src/static/css/site.css b/src/static/css/site.css index c8fe9cde..c7267b2f 100644 --- a/src/static/css/site.css +++ b/src/static/css/site.css @@ -463,16 +463,15 @@ summary .group-name { } .wiki-search-sidebar-box { - padding: 2px; - position: sticky; - top: 5px; + padding: 1px 0 0 0; + z-index: 999; + max-height: calc(100vh - 20px); + + display: flex; + flex-direction: column; background-color: #000000c0; - box-shadow: - 0 3px 4px #00000080, - 0 -2px 8px #000000c0, - 0 -6px 3px #000000f0; -webkit-backdrop-filter: brightness(1.2) blur(4px); @@ -481,22 +480,51 @@ summary .group-name { brightness(1.2) blur(4px); } +.wiki-search-sidebar-box.showing-results { + position: sticky; + top: 5px; + + box-shadow: + 0 4px 16px -8px var(--primary-color), + 0 10px 6px var(--bg-black-color), + 0 6px 4px #00000040; +} + +.wiki-search-sidebar-box.showing-results ~ .sidebar:not(:hover) { + opacity: 0.6; + filter: brightness(0.5); +} + .wiki-search-input { - width: 100%; + width: calc(100% - 4px); + padding: 2px 4px; + margin: 2px 2px 3px 2px; + box-sizing: border-box; + background: transparent; border: 1px solid var(--dim-color); border-radius: 3px; - padding: 2px 4px; color: inherit; } -.wiki-search-results-container hr { +.wiki-search-sidebar-box hr { border-color: var(--primary-color); border-style: none none dotted none; } +.wiki-search-sidebar-box hr:nth-of-type(1) { + margin-top: 3px; + margin-bottom: 6px; +} + +.wiki-search-sidebar-box hr:nth-of-type(2) { + margin-top: 6px; + margin-bottom: 0; +} + .wiki-search-results-container { - margin-bottom: 5px; + margin-bottom: 0; + padding: 2px; } .wiki-search-no-results { @@ -523,7 +551,7 @@ summary .group-name { left: 0; right: 0; - border: 2px solid var(--primary-color); + border: 1.5px solid var(--primary-color); border-radius: 4px; display: none; } @@ -560,6 +588,7 @@ summary .group-name { height: 1.8em; margin-right: 6px; border-radius: 2px; + aspect-ratio: 1 / 1; } .wiki-search-result-image-placeholder { @@ -570,8 +599,29 @@ summary .group-name { display: none; } +.wiki-search-end-search-line { + text-align: center; + margin-top: 6px; + margin-bottom: 2px; +} + +.wiki-search-end-search-line a { + display: inline-block; + font-style: oblique; + opacity: 0.9; + padding: 3px 6px 4px 6px; + border-radius: 4px; + border: 1.5px solid transparent; +} + +.wiki-search-end-search-line a:hover { + opacity: 1; + background: var(--light-ghost-color); + border-color: var(--deep-color); +} + .wiki-search-input:focus { - border: 1px solid var(--primary-color); + border-color: var(--primary-color); } .wiki-search-input::placeholder { @@ -2206,40 +2256,40 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r /* Sticky sidebar */ -.sidebar-column.sidebar.sticky-column, -.sidebar-column.sidebar.sticky-last, -.sidebar-multiple.sticky-last > .sidebar:last-child, -.sidebar-multiple.sticky-column { - position: sticky; - top: 10px; -} - -.sidebar-multiple.sticky-last { +.sidebar-column:not(.sticky-column) { align-self: stretch; } -.sidebar-multiple.sticky-column { +.sidebar-column.sticky-column { + position: sticky; + top: 10px; align-self: flex-start; + max-height: calc(100vh - 20px); + display: flex; + flex-direction: column; } -.sidebar-column.sidebar.sticky-column { - max-height: calc(100vh - 20px); - align-self: start; - padding-bottom: 0; - box-sizing: border-box; - flex-basis: 275px; - padding-top: 0; +.sidebar-multiple.sticky-column .sidebar:last-child { + flex-shrink: 1; + overflow-y: scroll; + scrollbar-width: thin; + scrollbar-color: var(--dark-color); +} + +.wiki-search-sidebar-box .wiki-search-results-container { overflow-y: scroll; scrollbar-width: thin; scrollbar-color: var(--dark-color); } -.sidebar-column.sidebar.sticky-column::-webkit-scrollbar { +.sidebar-column.sticky-column .sidebar:last-child::-webkit-scrollbar, +.wiki-search-sidebar-box .wiki-search-results-container::-webkit-scrollbar { background: var(--dark-color); width: 12px; } -.sidebar-column.sidebar.sticky-column::-webkit-scrollbar-thumb { +.sidebar-column.sticky-column .sidebar:last-child::-webkit-scrollbar-thumb, +.wiki-search-sidebar-box .wiki-search-results-container::-webkit-scrollbar-thumb { transition: background 0.2s; background: rgba(255, 255, 255, 0.2); border: 3px solid transparent; |