diff options
| author | muqiuhan <[email protected]> | 2023-02-28 09:58:51 +0000 |
|---|---|---|
| committer | muqiuhan <[email protected]> | 2023-02-28 09:58:51 +0000 |
| commit | 7e2f3fca091c08771486df0b870ce187f869d363 (patch) | |
| tree | 025e1b18a0d94c940a85eb631a7f48951efbc18d /css/partials/search.css | |
| parent | 2605fd54aa163fcfc97fc265a300b1b54bf38543 (diff) | |
| download | blog-7e2f3fca091c08771486df0b870ce187f869d363.tar.gz | |
deploy: b780169745c17f9fc971299e923e5ca5669b5a22
Diffstat (limited to 'css/partials/search.css')
| -rw-r--r-- | css/partials/search.css | 81 |
1 files changed, 81 insertions, 0 deletions
diff --git a/css/partials/search.css b/css/partials/search.css new file mode 100644 index 00000000..506f0cc4 --- /dev/null +++ b/css/partials/search.css @@ -0,0 +1,81 @@ +.search-popup { + visibility: hidden; +} +.search-activate { + visibility: visible; +} +.search-popup-overlay { + position: fixed; + left: 0; + top: 0; + height: 100%; + width: 100%; + background: $color-overlay; +} +.search-popup-window { + position: absolute; + top: 50%; + left: 50%; + background: $color-background; + transform: translate(-50%, -50%); + width: 640px; + height: 60%; + border: $line-secondary solid $color-text-primary; + overflow: hidden; + display: flex; + flex-direction: column; +} +.search-result-container { + flex-grow: 1; + overflow: scroll; + padding: $margin-m-1 $margin-m-1; +} +.search-result-container .search-result-message { + color: $color-text-secondary; +} +.search-result-container .search-result-title { + color: $color-text-primary; +} +.search-result-container li { + padding-bottom: $margin-m-1; + padding-top: $margin-m-2; +} +.search-result-container .search-result { + color: $color-text-primary; + margin-top: $margin-m-0; + margin-bottom: $margin-m-0; +} +.search-result-container mark { + color: $color-text-primary; + background-color: $color-search-marker; +} +.search-header { + display: flex; + flex-direction: row; + align-items: center; + padding: $margin-m-1 $margin-m-1; + border-bottom: $line-secondary solid $color-text-primary; +} +.search-header .search-input-container { + flex-grow: 1; +} +.search-header .search-input-container .search-input { + width: 100%; + color: $color-text-primary; + background-color: $color-background; +} +.search-header .search-input-container .search-input::placeholder { + color: $color-text-secondary; +} +.search-header .search-close-btn { + flex-grow: 0; + margin-left: $margin-m-1; + margin: auto; + cursor: pointer; +} +@media (max-width: 688px) { + .search-popup-window { + width: 100%; + height: 100%; + } +} |