From fa638e08a5bcfa16e1ca626dc636249208d38987 Mon Sep 17 00:00:00 2001 From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com> Date: Sat, 27 Sep 2025 22:11:25 -0400 Subject: [PATCH] Align scrollbar styling across modals --- .../iframe_forms/iframe-application-form.html | 9 ++- .../iframe_forms/iframe-bug-fix-form.html | 9 ++- .../iframe-content-appeals-form.html | 9 ++- .../iframe_forms/iframe-feedback-form.html | 9 ++- .../iframe_forms/iframe-request-form.html | 9 ++- css/style.css | 64 ++++++++----------- 6 files changed, 58 insertions(+), 51 deletions(-) diff --git a/components/iframe_forms/iframe-application-form.html b/components/iframe_forms/iframe-application-form.html index b580c2e2..cfe91fa9 100644 --- a/components/iframe_forms/iframe-application-form.html +++ b/components/iframe_forms/iframe-application-form.html @@ -112,16 +112,19 @@ height: 8px; } ::-webkit-scrollbar-track { - background: transparent; + background: rgba(255, 255, 255, 0.1); } ::-webkit-scrollbar-thumb { - background-color: #3b82f6; + background-color: rgba(255, 255, 255, 0.3); border-radius: 4px; } + ::-webkit-scrollbar-thumb:hover { + background-color: rgba(255, 255, 255, 0.4); + } /* Custom Scrollbar styling for Firefox */ * { scrollbar-width: thin; - scrollbar-color: #3b82f6 transparent; + scrollbar-color: rgba(255, 255, 255, 0.3) transparent; } diff --git a/components/iframe_forms/iframe-bug-fix-form.html b/components/iframe_forms/iframe-bug-fix-form.html index f8a186bf..017d7b84 100644 --- a/components/iframe_forms/iframe-bug-fix-form.html +++ b/components/iframe_forms/iframe-bug-fix-form.html @@ -112,16 +112,19 @@ height: 8px; } ::-webkit-scrollbar-track { - background: transparent; + background: rgba(255, 255, 255, 0.1); } ::-webkit-scrollbar-thumb { - background-color: #3b82f6; + background-color: rgba(255, 255, 255, 0.3); border-radius: 4px; } + ::-webkit-scrollbar-thumb:hover { + background-color: rgba(255, 255, 255, 0.4); + } /* Custom Scrollbar styling for Firefox */ * { scrollbar-width: thin; - scrollbar-color: #3b82f6 transparent; + scrollbar-color: rgba(255, 255, 255, 0.3) transparent; } diff --git a/components/iframe_forms/iframe-content-appeals-form.html b/components/iframe_forms/iframe-content-appeals-form.html index 5ae9e782..c7f94194 100644 --- a/components/iframe_forms/iframe-content-appeals-form.html +++ b/components/iframe_forms/iframe-content-appeals-form.html @@ -105,16 +105,19 @@ height: 8px; } ::-webkit-scrollbar-track { - background: transparent; + background: rgba(255, 255, 255, 0.1); } ::-webkit-scrollbar-thumb { - background-color: #3b82f6; + background-color: rgba(255, 255, 255, 0.3); border-radius: 4px; } + ::-webkit-scrollbar-thumb:hover { + background-color: rgba(255, 255, 255, 0.4); + } /* Custom Scrollbar styling for Firefox */ * { scrollbar-width: thin; - scrollbar-color: #3b82f6 transparent; + scrollbar-color: rgba(255, 255, 255, 0.3) transparent; } diff --git a/components/iframe_forms/iframe-feedback-form.html b/components/iframe_forms/iframe-feedback-form.html index ad787fc8..8bc564c9 100644 --- a/components/iframe_forms/iframe-feedback-form.html +++ b/components/iframe_forms/iframe-feedback-form.html @@ -119,16 +119,19 @@ height: 8px; } ::-webkit-scrollbar-track { - background: transparent; + background: rgba(255, 255, 255, 0.1); } ::-webkit-scrollbar-thumb { - background-color: #3b82f6; + background-color: rgba(255, 255, 255, 0.3); border-radius: 4px; } + ::-webkit-scrollbar-thumb:hover { + background-color: rgba(255, 255, 255, 0.4); + } /* Custom Scrollbar styling for Firefox */ * { scrollbar-width: thin; - scrollbar-color: #3b82f6 transparent; + scrollbar-color: rgba(255, 255, 255, 0.3) transparent; } diff --git a/components/iframe_forms/iframe-request-form.html b/components/iframe_forms/iframe-request-form.html index a706157f..23ce8ff4 100644 --- a/components/iframe_forms/iframe-request-form.html +++ b/components/iframe_forms/iframe-request-form.html @@ -112,15 +112,18 @@ height: 8px; } ::-webkit-scrollbar-track { - background: transparent; + background: rgba(255, 255, 255, 0.1); } ::-webkit-scrollbar-thumb { - background-color: #3b82f6; + background-color: rgba(255, 255, 255, 0.3); border-radius: 4px; } + ::-webkit-scrollbar-thumb:hover { + background-color: rgba(255, 255, 255, 0.4); + } * { scrollbar-width: thin; - scrollbar-color: #3b82f6 transparent; + scrollbar-color: rgba(255, 255, 255, 0.3) transparent; } diff --git a/css/style.css b/css/style.css index cde5e9ea..0c967619 100644 --- a/css/style.css +++ b/css/style.css @@ -10,6 +10,34 @@ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1); --modal-motion-duration: 160ms; + --scrollbar-width: 8px; + --scrollbar-track: rgba(255, 255, 255, 0.1); + --scrollbar-thumb: rgba(255, 255, 255, 0.3); + --scrollbar-thumb-hover: rgba(255, 255, 255, 0.4); +} + +/* Global scrollbar styling */ +* { + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) transparent; +} + +*::-webkit-scrollbar { + width: var(--scrollbar-width); + height: var(--scrollbar-width); +} + +*::-webkit-scrollbar-track { + background: var(--scrollbar-track); +} + +*::-webkit-scrollbar-thumb { + background: var(--scrollbar-thumb); + border-radius: 4px; +} + +*::-webkit-scrollbar-thumb:hover { + background: var(--scrollbar-thumb-hover); } /* Core Styles */ @@ -312,24 +340,6 @@ header img { } } -/* Custom Scrollbar */ -.video-info::-webkit-scrollbar { - width: 8px; -} - -.video-info::-webkit-scrollbar-track { - background: rgba(255, 255, 255, 0.1); -} - -.video-info::-webkit-scrollbar-thumb { - background: rgba(255, 255, 255, 0.3); - border-radius: 4px; -} - -.video-info::-webkit-scrollbar-thumb:hover { - background: rgba(255, 255, 255, 0.4); -} - /* Progress Bars */ .progress-bar { width: 100%; @@ -468,24 +478,6 @@ footer a:hover { overflow-y: auto; } -/* Disclaimer Modal Scrollbar */ -#disclaimerModal .modal-scroll::-webkit-scrollbar { - width: 8px; -} - -#disclaimerModal .modal-scroll::-webkit-scrollbar-track { - background: rgba(255, 255, 255, 0.1); -} - -#disclaimerModal .modal-scroll::-webkit-scrollbar-thumb { - background: rgba(255, 255, 255, 0.3); - border-radius: 4px; -} - -#disclaimerModal .modal-scroll::-webkit-scrollbar-thumb:hover { - background: rgba(255, 255, 255, 0.4); -} - /* Disclaimer Modal Button Container */ #disclaimerModal .button-container { padding: 1rem 1.5rem;