Add overlay color

rapidez · Jan 9, 2025 · a559bd8 · a559bd8
1 parent 62b4b9a
commit a559bd8
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 2 deletions.
diff --git a/resources/views/components/slideover/index.blade.php b/resources/views/components/slideover/index.blade.php
@@ -30,7 +30,7 @@
         <input @checked($open) id="{{ $id }}" class="peer hidden" v-on:change="toggleScroll($event.target.checked)" type="checkbox">
         <label
             for="{{ $closeId }}"
-            class="pointer-events-none fixed inset-0 z-slideover-overlay cursor-pointer bg-black/40 opacity-0 transition peer-checked:pointer-events-auto peer-checked:opacity-100"
+            class="pointer-events-none fixed inset-0 z-slideover-overlay cursor-pointer bg-overlay opacity-0 transition peer-checked:pointer-events-auto peer-checked:opacity-100"
         ></label>
     @else
         <input @checked($open) id="{{ $id }}" class="peer hidden" type="checkbox">

diff --git a/resources/views/layouts/partials/header/autocomplete.blade.php b/resources/views/layouts/partials/header/autocomplete.blade.php
@@ -22,7 +22,7 @@ class="relative w-full"
 >
     <x-rapidez::reactive-base slot-scope="autocompleteScope">
         <div
-            class="z-header-autocomplete-overlay pointer-events-none fixed inset-0 cursor-pointer bg-black/40 opacity-0 transition duration-500"
+            class="z-header-autocomplete-overlay pointer-events-none fixed inset-0 cursor-pointer bg-overlay opacity-0 transition duration-500"
             :class="autocompleteScope.overlay ? 'pointer-events-auto opacity-100 prevent-scroll' : 'opacity-0 pointer-events-none '"
         ></div>
         <x-rapidez::autocomplete.magnifying-glass v-bind:class="{ 'bg-primary text-white': autocompleteScope.overlay }" />

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -58,6 +58,7 @@ export default {
                     DEFAULT: color('--background', colors.slate[100]),
                     muted: color('--background-muted', colors.slate[50]),
                 },
+                overlay: color('--overlay', 'rgba(0, 0, 0, 0.4)'),
             },
             zIndex: {
                 'header': '100',