From cdb04a39b9a21505072f5f33ac5501141159b813 Mon Sep 17 00:00:00 2001 From: Bartal Laearsson Date: Mon, 24 Aug 2026 15:06:30 +0100 Subject: [PATCH] fix css --- static/css/shared.css | 19 +++++- static/css/supporter.css | 131 ++++++++++----------------------------- templates/index.html | 14 ++--- templates/supporter.html | 131 ++++++++++++++++++++------------------- templates/user.html | 15 +++-- 5 files changed, 134 insertions(+), 176 deletions(-) diff --git a/static/css/shared.css b/static/css/shared.css index 3b33bab..3bf0a91 100644 --- a/static/css/shared.css +++ b/static/css/shared.css @@ -99,7 +99,7 @@ nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 20; display: grid; - grid-template-columns: 1fr auto 1fr; + grid-template-columns: auto 1fr auto; /* Left: Auto, Center: Grow, Right: Auto */ align-items: center; gap: 1rem; padding: 1.25rem 2.5rem; @@ -148,6 +148,23 @@ nav { } .nav-brand:hover { color: var(--accent); border-bottom: none; } +.nav-timer { + grid-column: 3; + justify-self: end; + display: inline-flex; + align-items: center; + justify-content: center; + color: var(--danger-text); + border: 1px solid var(--danger); + border-radius: 2px; + padding: 0.3rem 0.7rem; + font-size: 0.72rem; + font-weight: 500; + letter-spacing: 0.08em; + background: var(--danger-soft); + white-space: nowrap; +} + .brand-sep { font-weight: 300; color: var(--ink-dim); diff --git a/static/css/supporter.css b/static/css/supporter.css index 6f8993f..52ee31c 100644 --- a/static/css/supporter.css +++ b/static/css/supporter.css @@ -7,109 +7,46 @@ html, body { } body { + display: flex; + flex-direction: column; overflow: hidden; } +/* ---- Mobile Menu Button (Hidden on Desktop) ---- */ +.mobile-menu-btn { + display: none; + position: fixed; + bottom: 4rem; + left: 1.5rem; + z-index: 30; + background: var(--accent); + color: var(--bg); + border: none; + border-radius: 2px; + padding: 0.5rem 1rem; + font-size: 0.72rem; + font-weight: 500; + letter-spacing: 0.1em; + text-transform: uppercase; + cursor: pointer; + box-shadow: 0 4px 12px rgba(0,0,0,0.15); +} + /* ---- Layout ---- */ .layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); - grid-template-rows: 52px minmax(0, 1fr); + grid-template-rows: minmax(0, 1fr); width: 100%; - height: calc(var(--app-height, 100dvh) - 40px); + flex: 1; + min-height: 0; overflow: hidden; } -/* ---- Topbar ---- */ -.topbar { - grid-column: 1 / -1; - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0 1.5rem; - border-bottom: 1px solid var(--border); - background: var(--nav-bg); - backdrop-filter: blur(12px) saturate(120%); - -webkit-backdrop-filter: blur(12px) saturate(120%); - min-width: 0; - transition: background 0.3s ease; -} - -.menu-button { - display: none; - background: transparent; - color: var(--ink); - border: 1px solid var(--border); - border-radius: 2px; - padding: 0.4rem 0.65rem; - font-size: 0.72rem; - font-weight: 500; - letter-spacing: 0.1em; - text-transform: uppercase; - cursor: pointer; - transition: border-color 0.2s, color 0.2s; -} -.menu-button:hover { border-color: var(--ink-muted); } - -.topbar-brand { - display: inline-flex; - align-items: baseline; - gap: 0.35rem; - white-space: nowrap; - font-weight: 700; - font-size: 1rem; - letter-spacing: -0.02em; - color: var(--ink); - text-decoration: none; -} -.topbar-brand:hover { color: var(--accent); border-bottom: none; } - -[data-theme="macchiato"] .topbar-brand { - color: #cad3f5; - text-shadow: 0 0 8px rgba(138, 173, 244, 0.25); -} - -.topbar-brand .brand-sep { - font-weight: 300; - color: var(--ink-dim); -} -.topbar-brand .brand-sub { - font-weight: 400; - font-size: 0.72rem; - letter-spacing: 0.18em; - text-transform: uppercase; - color: var(--ink-muted); -} - -.topbar-timer { - display: inline-flex; - align-items: center; - justify-content: center; - margin-left: auto; - font-size: 0.72rem; - font-weight: 500; - letter-spacing: 0.08em; - color: var(--danger-text); - background: var(--danger-soft); - padding: 0.3rem 0.7rem; - border-radius: 2px; - border: 1px solid var(--danger); - white-space: nowrap; -} - -.drawer-backdrop { - display: none; - position: fixed; - inset: 0; - background: rgba(0, 0, 0, 0.45); - z-index: 40; - backdrop-filter: blur(2px); -} - /* ---- Sidebar ---- */ .sidebar { grid-column: 1; - grid-row: 2; + grid-row: 1; border-right: 1px solid var(--border); background: var(--bg-panel); backdrop-filter: blur(14px); @@ -119,6 +56,7 @@ body { overflow: hidden; min-width: 0; transition: background 0.3s ease; + padding-top: 65px; } .sidebar-header { @@ -232,7 +170,7 @@ body { /* ---- Main panel ---- */ .main-panel { grid-column: 2; - grid-row: 2; + grid-row: 1; display: flex; flex-direction: column; align-items: center; @@ -266,6 +204,7 @@ body { border-bottom: 1px solid var(--border); min-height: 50px; flex-shrink: 0; + background: var(--bg); /* Match page bg to eliminate white strip */ } .active-copy { @@ -451,11 +390,11 @@ body { @media (max-width: 820px) { .layout { grid-template-columns: minmax(0, 1fr); - grid-template-rows: 52px minmax(0, 1fr); } - .topbar { padding: 0 0.75rem; } - .menu-button { display: inline-flex; } + .mobile-menu-btn { + display: inline-flex; + } .drawer-backdrop.visible { display: block; } @@ -476,7 +415,6 @@ body { .main-panel { grid-column: 1; - grid-row: 2; padding: 0.65rem; align-items: stretch; justify-content: stretch; @@ -495,10 +433,9 @@ body { } @media (max-width: 460px) { - .topbar-brand .brand-sub { display: none; } - .topbar-brand .brand-sep { display: none; } + .nav-brand .brand-sub { display: none; } + .nav-brand .brand-sep { display: none; } .main-panel { padding: 0.45rem; } - .main-header { min-height: 46px; } #supporter-messages { padding: 0.75rem; } .theme-toggle { width: 20px; height: 20px; bottom: 1rem; right: 0.75rem; } } diff --git a/templates/index.html b/templates/index.html index 50335d1..def797e 100644 --- a/templates/index.html +++ b/templates/index.html @@ -22,16 +22,16 @@ - +
- Reset in --:--

User to Support Chat

Rust-based real-time chat with separate user and supporter views. Conversations, messages, and rate limits reset every 20 minutes.

diff --git a/templates/supporter.html b/templates/supporter.html index 8b81c45..33bf84b 100644 --- a/templates/supporter.html +++ b/templates/supporter.html @@ -22,76 +22,81 @@ -
-
- - + +
+ Reset in --:-- + + +
+ + +
+
+
+
+ Select a conversation + +
+
+ +
+
+

No conversation selected

+

Open the chat list and choose a conversation.

+
+
+ +
+ + + +
+ +
+ + +
+
+
+
- + + -
-
-
-
- Select a conversation - -
-
+
+ © FLÓ.FO | ØLL RÆTTINDI TILSKILAÐ + + + + + + + + + +
-
-
-

No conversation selected

-

Open the chat list and choose a conversation.

-
-
+ -
- - - -
- -
- - -
-
-
-
- -
- © FLÓ.FO | ØLL RÆTTINDI TILSKILAÐ - - - - - - - - - -
- - - - - + + diff --git a/templates/user.html b/templates/user.html index bf8a721..a637ad0 100644 --- a/templates/user.html +++ b/templates/user.html @@ -22,14 +22,13 @@ - - - Reset in --:-- +