Moved some styling to _base.scss

Signed-off-by: George Araujo <george.gcac@gmail.com>
alshedivat · May 21, 2024 · b49c276 · b49c276
1 parent ac13a3e
commit b49c276
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 6 deletions.
diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -1110,3 +1110,15 @@ swiper-container {
     border-bottom: 2px solid var(--global-text-color);
   }
 }
+
+// Ninja Keys
+// for more options, check https://github.com/ssleptsov/ninja-keys?tab=readme-ov-file#css-variables
+ninja-keys {
+  --ninja-accent-color: var(--global-theme-color);
+  --ninja-icon-size: 0px;
+  --ninja-modal-background: var(--global-bg-color);
+}
+
+ninja-keys::part(ninja-input-wrapper) {
+  background: var(--global-bg-color);
+}
diff --git a/assets/js/search/base-styles.min.js b/assets/js/search/base-styles.min.js
@@ -14,7 +14,7 @@ import{css}from"./lit/index.min.js";export const baseStyles=css`
     --ninja-top: 20%;
 
     --ninja-key-border-radius: 0.25em;
-    --ninja-accent-color: var(--global-theme-color);
+    --ninja-accent-color: rgb(110, 94, 210);
     --ninja-secondary-background-color: rgb(239, 241, 244);
     --ninja-secondary-text-color: rgb(107, 111, 118);
 
@@ -45,7 +45,7 @@ import{css}from"./lit/index.min.js";export const baseStyles=css`
     --ninja-text-color: #7d7d7d;
 
     --ninja-modal-background: rgba(17, 17, 17, 0.85);
-    --ninja-accent-color: var(--global-theme-color);
+    --ninja-accent-color: rgb(110, 94, 210);
     --ninja-secondary-background-color: rgba(51, 51, 51, 0.44);
     --ninja-secondary-text-color: #888;
 

diff --git a/assets/js/search/ninja-action.min.js b/assets/js/search/ninja-action.min.js
@@ -44,11 +44,9 @@ var __decorate=this&&this.__decorate||function(t,e,i,n){var o,a=arguments.length
       color: var(--ninja-selected-text-color);
     }
     .ninja-icon {
-      // width: 20px;
-      max-width: 20px;
+      width: 20px;
       font-size: var(--ninja-icon-size);
       color: var(--ninja-icon-color);
-      fill: var(--ninja-icon-color); // for svg icons
       margin-right: 0.5625rem;
       position: relative;
       line-height: 0;

diff --git a/assets/js/search/ninja-header.min.js b/assets/js/search/ninja-header.min.js
@@ -73,6 +73,6 @@ var __decorate=this&&this.__decorate||function(e,t,r,a){var n,o=arguments.length
     .search-wrapper {
       display: flex;
       border-bottom: var(--ninja-separate-border);
-      background: var(--global-bg-color);
+      background: #000000;
     }
   `,__decorate([property()],NinjaHeader.prototype,"placeholder",void 0),__decorate([property({type:Boolean})],NinjaHeader.prototype,"hideBreadcrumbs",void 0),__decorate([property()],NinjaHeader.prototype,"breadcrumbHome",void 0),__decorate([property({type:Array})],NinjaHeader.prototype,"breadcrumbs",void 0),NinjaHeader=__decorate([customElement("ninja-header")],NinjaHeader);export{NinjaHeader};