chore: 集成 MeiliSearch 样式

Co-Authored-By: MadLongTom <[email protected]>
Co-Authored-By: Frost Autumn <[email protected]>

Author: 3 people

src/BootstrapBlazor/wwwroot/scss/root.scss

@@ -76,6 +76,49 @@ a, a:hover, a:focus {
     --bs-popover-body-padding-y: 0.5rem;
 }
 
+.bb-g-search {
+    --bb-global-search-input-margin-left: .5rem;
+    --bb-global-search-border-color: rgba(255,255,255,.5);
+    --bb-global-search-color: rgba(255,255,255,.5);
+    --bb-global-search-border-hover-color: rgba(255,255,255);
+    --bb-global-search-padding: 0.25rem 0.75rem;
+    --bb-global-search-width: 168px;
+    display: flex;
+    align-items: center;
+    color: var(--bb-global-search-color);
+    border: var(--bs-border-width) solid var(--bb-global-search-border-color);
+    border-radius: var(--bs-border-radius);
+    padding: var(--bb-global-search-padding);
+    width: var(--bb-global-search-width);
+    transition: border-color .3s linear;
+
+    &:hover {
+        border: var(--bs-border-width) solid var(--bb-global-search-border-hover-color);
+    }
+
+    > input {
+        width: 100%;
+        background-color: transparent;
+        border: none;
+        line-height: 1.5;
+        padding: 0;
+        margin-left: var(--bb-global-search-input-margin-left);
+        cursor: pointer;
+
+        &::placeholder {
+            color: var(--bb-global-search-border-color);
+        }
+    }
+
+    > i {
+        cursor: pointer;
+    }
+}
+
+.search-dialog-mask {
+    display: none;
+}
+
 ::view-transition-old(root) {
     animation: none;
 }