Style searchbar in navbar

pradoslaw · Dec 9, 2024 · 6572e13 · 6572e13
1 parent 87f092f
commit 6572e13
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/resources/feature/lookAndFeel/lookAndFeel.scss b/resources/feature/lookAndFeel/lookAndFeel.scss
@@ -27,6 +27,8 @@ $forum-aside-radius:            8px;
 $scroll-top-color:              (light: style.$green-700, dark: style.$green-500);
 $scroll-top-background:         (light: style.$green-050, dark: style.$green-900);
 
+$navbar-search-bar-color:       (light: style.$white, dark: style.$navy-500);
+
 .look-and-feel-modern {
   @include theme.var(--body-background, $body-background);
   @include theme.var(--post-background, $post-background);
@@ -53,6 +55,7 @@ $scroll-top-background:         (light: style.$green-050, dark: style.$green-900
   @include theme.var(--tabber-active-border-color, style.$green-500);
   @include theme.var(--user-online-color, style.$green-500);
   @include theme.var(--notification-count-alert-color, style.$red-500);
+  @include theme.var(--navbar-search-bar-color, $navbar-search-bar-color);
 }
 
 .look-and-feel-legacy {
@@ -76,12 +79,12 @@ $scroll-top-background:         (light: style.$green-050, dark: style.$green-900
   --var-navbar-user-avatar-padding: 0.25rem;
   @include theme.var(--post-content-link-color, (light: #5e7813, dark: #789b17));
   @include theme.var(--post-user-posts-counter-color, (light: #5e7813, dark: #789b17));
-
   @include theme.var(--scroll-top-color, (light: #80a41a, dark: #80a41a));
   @include theme.var(--scroll-top-background, (light: #f3f7e6, dark: #141414));
   @include theme.var(--tabber-active-border-color, #d7661c);
   @include theme.var(--user-online-color, #80a41a);
   @include theme.var(--notification-count-alert-color, #ff4a00);
+  @include theme.var(--navbar-search-bar-color, (light: white, dark: #2a2a2a));
 }
 
 body {
@@ -234,3 +237,14 @@ body {
 .neon-notification-alert-count {
   background: var(--notification-count-alert-color) !important; // overrides .navbar .badge
 }
+
+.look-and-feel-modern .navbar {
+  border-bottom: none;
+}
+
+.neon-navbar-search-bar {
+  background-color: var(--navbar-search-bar-color) !important;
+  input {
+    background-color: var(--navbar-search-bar-color) !important;
+  }
+}
diff --git a/resources/js/components/searchbar/searchbar.vue b/resources/js/components/searchbar/searchbar.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-click-away="blurInput" :class="{'nav-search-mobile': isMobile}" class="nav-search">
-    <div :class="{'active': isActive}" class="search-bar ms-md-4 me-md-4">
+    <div :class="{'active': isActive}" class="search-bar ms-md-4 me-md-4 neon-navbar-search-bar">
       <span class="ms-2 me-2">
         <vue-icon name="autocompleteSearch"/>
       </span>