diff --git a/src/css/style.css b/src/css/style.css index 1ef5b5e..234eea5 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -88,7 +88,6 @@ header img { } /* Modal Player */ -/* Base Modal Styles */ #playerModal { position: fixed; inset: 0; @@ -304,3 +303,91 @@ footer a { footer a:hover { text-decoration: underline; } + +/* Disclaimer Modal Styles */ +#disclaimerModal { + position: fixed; + inset: 0; + background-color: rgb(0 0 0 / 0.9); + z-index: 50; + display: flex; + flex-direction: column; + overflow-y: auto; + overscroll-behavior: contain; +} + +#disclaimerModal .modal-content { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + background-color: var(--color-bg); +} + +#disclaimerModal .modal-scroll { + padding: 1.5rem; + flex: 1; + 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; + background-color: #1a2234; + border-top: 1px solid rgba(255, 255, 255, 0.1); +} + +/* Responsive Adjustments for Disclaimer Modal */ +@media (min-width: 768px) { + #disclaimerModal { + padding: 2rem; + align-items: center; + justify-content: center; + } + + #disclaimerModal .modal-content { + width: 100%; + height: auto; + max-width: 42rem; + max-height: 90vh; + border-radius: 0.5rem; + overflow: hidden; + margin: auto; + } + + #disclaimerModal .modal-scroll { + max-height: calc( + 90vh - 5rem + ); /* Account for button container and padding */ + } +} + +/* Mobile-specific styles for Disclaimer Modal */ +@media (max-width: 767px) { + #disclaimerModal { + padding: 0; + } + + #disclaimerModal .modal-content { + min-height: 100vh; + border-radius: 0; + } +} diff --git a/src/index.html b/src/index.html index 0868b4c..81710a0 100644 --- a/src/index.html +++ b/src/index.html @@ -298,15 +298,9 @@ -
-
- -
+ +
- -
- -
+ +
+