UI improvements

Author: PavlosIsaris

CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to `laravel-cookie-guard` will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## v4.1.3 - Button hover text color & Modal placement
+
+- Fixed the issue with the button hover text color in the cookies consent modal.
+- Fixed the issue with the placement of the cookies consent modal in Safari.
+
 ## v4.1.2 - Fixed Back Scrolling & Button focus
 
 - Fixed the issue with the back scrolling of the page when the cookies consent modal is open.

public/_variables.css

@@ -26,6 +26,7 @@
   --scify-cookies-btn-border-width: 2px;
   --scify-cookies-btn-border-radius: 2px;
   --scify-cookies-btn-text-color: var(--scify-cookies-primary-color);
+  --scify-cookies-btn-hover-text-color: #e7f1ff;
   --scify-cookies-btn-border-color: var(--scify-cookies-primary-color);
   --scify-cookies-btn-hover-border-color: var(--scify-cookies-primary-hover-color);
   --scify-cookies-btn-padding: 8px;

public/styles.css

@@ -26,6 +26,7 @@
   --scify-cookies-btn-border-width: 2px;
   --scify-cookies-btn-border-radius: 2px;
   --scify-cookies-btn-text-color: var(--scify-cookies-primary-color);
+  --scify-cookies-btn-hover-text-color: #e7f1ff;
   --scify-cookies-btn-border-color: var(--scify-cookies-primary-color);
   --scify-cookies-btn-hover-border-color: var(--scify-cookies-primary-hover-color);
   --scify-cookies-btn-padding: 8px;

resources/styles/_variables.css

@@ -140,6 +140,7 @@
         box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15), 0 10px 25px rgba(0, 0, 0, 0.15);
         cursor: pointer;
         border-color: var(--scify-cookies-btn-hover-border-color);
+        color: var(--scify-cookies-btn-hover-text-color);
       }
 
       &:focus {
@@ -280,6 +281,11 @@ body:has(dialog.scify-cookies-consent-banner[open]) {
 }
 
 dialog.scify-cookies-consent-banner {
-  /* (i.e. remove overflow: hidden from original stylesheet) */
-  overflow: auto !important;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin: 0; // Remove any default margin
+  overflow: auto !important; // Ensure content is scrollable if needed
+  max-height: 90vh; // Prevent overflow on smaller screens
 }

resources/styles/styles.scss

@@ -10,7 +10,7 @@
         <dialog
             class="scify-cookies-consent-banner cookies-policy-wrapper
             {{ config('cookies_consent.use_separate_page') ? 'separate-page-mode' : '' }}
-            {{ config('cookies_consent.use_floating_modal') ? 'custom-dialog' : '' }}"
+            {{ config('cookies_consent.use_floating_modal') ? 'custom-dialog' : 'modal-base-dialog' }}"
             aria-labelledby="cookie-consent-title" aria-describedby="cookie-consent-description"
         >
             <div class="scify-cookies-container">