From 64379c89010024e06cc5e25703d3901b111f6462 Mon Sep 17 00:00:00 2001 From: daniel-c-harvey Date: Fri, 19 Jun 2026 16:48:46 -0400 Subject: [PATCH 1/2] feat: move footer privacy note behind PRIVACY overlay button --- .../Layout/DeepDrftFooter.razor | 30 ++++++- .../Layout/DeepDrftFooter.razor.css | 20 +++-- .../wwwroot/styles/deepdrft-styles.css | 79 +++++++++++++++++++ 3 files changed, 122 insertions(+), 7 deletions(-) diff --git a/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor b/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor index 321f46a..a55bce5 100644 --- a/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor +++ b/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor @@ -4,8 +4,34 @@
© 2026 Deep DRFT
-

We keep a random tag in your browser so we can count how many people a track reaches — not who they are. No account, no name, nothing personal, nothing shared with anyone else. Clear your browser data and the tag’s gone.

- \ No newline at end of file + + + +
+
+ Privacy + +
+

We keep a random tag in your browser so we can count how many people a track reaches — not who they are. No account, no name, nothing personal, nothing shared with anyone else. Clear your browser data and the tag’s gone.

+
+ + +@code { + private bool _privacyOpen; + + private void OpenPrivacy() => _privacyOpen = true; + private void ClosePrivacy() => _privacyOpen = false; +} \ No newline at end of file diff --git a/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor.css b/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor.css index fb1a191..80ceb89 100644 --- a/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor.css +++ b/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor.css @@ -57,16 +57,26 @@ color: var(--deepdrft-muted); } -.deepdrft-footer-privacy { +/* PRIVACY trigger — visually matches the footer links (same font, size, casing, colour). + Reset all button chrome so it reads as a link, not a button element. */ +.deepdrft-footer-privacy-btn { font-family: var(--deepdrft-font-mono); - font-size: 0.55rem; - letter-spacing: 0.08em; + font-size: 0.62rem; + letter-spacing: 0.18em; + text-transform: uppercase; color: var(--deepdrft-muted); - opacity: 0.7; + text-decoration: none; + transition: color 0.2s; + background: none; + border: none; + padding: 0; margin: 0; - line-height: 1.6; + cursor: pointer; + line-height: inherit; } +.deepdrft-footer-privacy-btn:hover { color: var(--deepdrft-navy); } + @media (max-width: 440px) { .deepdrft-footer { padding: 1.5rem; diff --git a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css index 2e35c18..ae867ff 100644 --- a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css +++ b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css @@ -917,3 +917,82 @@ body:has(.deepdrft-queue-overlay) { max-height: 184px; overflow-y: auto; } + +/* ============================================================================= + 17. PRIVACY OVERLAY + Screen-centered modal following the same MudOverlay idiom as the visualizer + controls and queue overlays. MudOverlay portals to body — CSS isolation cannot + reach portaled content, so chrome lives here in the global sheet. + ============================================================================= */ + +/* Raise above the sticky header (100), player dock (1200), and minimized FAB (1300). */ +.deepdrft-privacy-overlay { + z-index: 1400 !important; +} + +/* Mild tint: doubled selector (0,2,0) outranks MudBlazor's .mud-overlay-dark (0,1,0). */ +.deepdrft-privacy-overlay .mud-overlay-scrim.mud-overlay-dark { + background-color: rgba(var(--deepdrft-scrim-rgb), var(--deepdrft-modal-scrim-alpha)); +} + +.deepdrft-privacy-overlay .mud-overlay-content { + max-height: 90vh; + overflow: visible; +} + +/* Lock body scroll while the overlay is open. */ +body:has(.deepdrft-privacy-overlay) { + overflow: hidden; +} + +/* Panel: compact width, navy-panel ground, thin light border — matches queue/visualizer chrome. */ +.deepdrft-privacy-modal { + display: flex; + flex-direction: column; + width: min(90vw, 480px); + background: var(--deepdrft-panel-ground); + border: 1px solid var(--deepdrft-border-light); + border-radius: 0; + backdrop-filter: blur(8px); + overflow: hidden; +} + +.deepdrft-privacy-modal-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.85rem 0.85rem 0.85rem 1rem; + border-bottom: 1px solid var(--deepdrft-border-light); +} + +/* Mono uppercase eyebrow — matches queue modal title. */ +.deepdrft-privacy-modal-title { + font-family: var(--deepdrft-font-mono); + font-size: 0.72rem; + letter-spacing: 0.2em; + text-transform: uppercase; + color: var(--deepdrft-white); + opacity: 0.85; +} + +/* Tuck the close icon flush with the panel edge; keep it subtle. */ +.deepdrft-privacy-modal-close { + opacity: 0.6; + color: var(--deepdrft-white) !important; +} + +.deepdrft-privacy-modal-close:hover { + opacity: 1; +} + +/* Privacy copy: same mono treatment as the former inline paragraph, but readable on dark ground. */ +.deepdrft-privacy-modal-body { + font-family: var(--deepdrft-font-mono); + font-size: 0.72rem; + letter-spacing: 0.06em; + line-height: 1.7; + color: var(--deepdrft-white); + opacity: 0.8; + margin: 0; + padding: 1rem 1rem 1.25rem; +} From 280dbbcbc9987e251745fa37d15c4689c82805a8 Mon Sep 17 00:00:00 2001 From: daniel-c-harvey Date: Fri, 19 Jun 2026 16:59:01 -0400 Subject: [PATCH 2/2] style: DRY footer btn CSS, add trailing newline, drop wrong section ordinal --- .../Layout/DeepDrftFooter.razor | 2 +- .../Layout/DeepDrftFooter.razor.css | 20 +++++++------------ .../wwwroot/styles/deepdrft-styles.css | 2 +- 3 files changed, 9 insertions(+), 15 deletions(-) diff --git a/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor b/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor index a55bce5..4fa1783 100644 --- a/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor +++ b/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor @@ -34,4 +34,4 @@ private void OpenPrivacy() => _privacyOpen = true; private void ClosePrivacy() => _privacyOpen = false; -} \ No newline at end of file +} diff --git a/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor.css b/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor.css index 80ceb89..f874ca9 100644 --- a/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor.css +++ b/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor.css @@ -38,7 +38,8 @@ padding: 0; } -.deepdrft-footer-links a { +.deepdrft-footer-links a, +.deepdrft-footer-links button { font-family: var(--deepdrft-font-mono); font-size: 0.62rem; letter-spacing: 0.18em; @@ -48,7 +49,8 @@ transition: color 0.2s; } -.deepdrft-footer-links a:hover { color: var(--deepdrft-navy); } +.deepdrft-footer-links a:hover, +.deepdrft-footer-links button:hover { color: var(--deepdrft-navy); } .deepdrft-footer-copy { font-family: var(--deepdrft-font-mono); @@ -57,26 +59,18 @@ color: var(--deepdrft-muted); } -/* PRIVACY trigger — visually matches the footer links (same font, size, casing, colour). - Reset all button chrome so it reads as a link, not a button element. */ +/* PRIVACY trigger — reset button chrome so it reads as a link, not a button element. + Typography/colour shared with footer links via the grouped selector above. */ .deepdrft-footer-privacy-btn { - font-family: var(--deepdrft-font-mono); - font-size: 0.62rem; - letter-spacing: 0.18em; - text-transform: uppercase; - color: var(--deepdrft-muted); - text-decoration: none; - transition: color 0.2s; background: none; border: none; padding: 0; margin: 0; cursor: pointer; line-height: inherit; + font-family: inherit; } -.deepdrft-footer-privacy-btn:hover { color: var(--deepdrft-navy); } - @media (max-width: 440px) { .deepdrft-footer { padding: 1.5rem; diff --git a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css index ae867ff..e4e21d1 100644 --- a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css +++ b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css @@ -919,7 +919,7 @@ body:has(.deepdrft-queue-overlay) { } /* ============================================================================= - 17. PRIVACY OVERLAY + PRIVACY OVERLAY Screen-centered modal following the same MudOverlay idiom as the visualizer controls and queue overlays. MudOverlay portals to body — CSS isolation cannot reach portaled content, so chrome lives here in the global sheet.