From d555a8a84f2b4786a1c5460a1eaab70404ee77bc Mon Sep 17 00:00:00 2001 From: mkelvers Date: Thu, 9 Apr 2026 12:34:43 +0200 Subject: [PATCH] ui: implement clean dark theme without borders --- internal/shared/ui/icons/icons.templ | 9 +++ internal/templates/layout.templ | 11 +++- static/css/style.css | 82 +++++++++++++++++----------- 3 files changed, 68 insertions(+), 34 deletions(-) create mode 100644 internal/shared/ui/icons/icons.templ diff --git a/internal/shared/ui/icons/icons.templ b/internal/shared/ui/icons/icons.templ new file mode 100644 index 0000000..8223f84 --- /dev/null +++ b/internal/shared/ui/icons/icons.templ @@ -0,0 +1,9 @@ +package icons + +templ LogoIcon(class string) { + + + + + +} diff --git a/internal/templates/layout.templ b/internal/templates/layout.templ index 367aa5d..77fd357 100644 --- a/internal/templates/layout.templ +++ b/internal/templates/layout.templ @@ -1,12 +1,15 @@ package templates +import "mal/internal/shared/ui/icons" + templ Layout(title string) { - { title } + mal + @@ -14,7 +17,9 @@ templ Layout(title string) {
- +
Catalog Discover @@ -24,7 +29,7 @@ templ Layout(title string) {
-
+
diff --git a/static/css/style.css b/static/css/style.css index 031f11e..8a19584 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1,13 +1,13 @@ :root { - --bg: #1a1a1a; - --surface: #262626; - --surface-hover: #303030; - --border: #404040; - --text: #e8e8e8; - --text-muted: #999999; - --link: #4a9eff; - --link-hover: #6bb3ff; - --link-active: #9966ff; + --bg: #0d0d0f; + --surface: #101011; + --surface-hover: #161618; + --border: #222224; + --text: #ffffff; + --text-muted: #88888a; + --link: #ffffff; + --link-hover: #dddddd; + --link-active: #aaaaaa; /* fluid typography scale */ --text-xs: clamp(0.625rem, 0.55rem + 0.25vw, 0.75rem); @@ -66,7 +66,7 @@ body { header { padding: var(--space-md) var(--space-lg); background: var(--surface); - border-bottom: 1px solid var(--border); + border-bottom: none; position: sticky; top: 0; z-index: 100; @@ -87,30 +87,37 @@ header { } .logo { - font-size: var(--text-lg); - font-weight: 700; + display: flex; + align-items: center; + justify-content: center; color: var(--text); + transition: color 0.2s ease; } .logo:hover { - color: var(--text); + color: var(--link-hover); +} + +.logo-svg { + width: 48px; + height: 48px; } .nav { display: flex; gap: var(--space-lg); - border-left: 1px solid var(--border); - padding-left: var(--space-lg); } .nav a { font-size: var(--text-md); - color: var(--link); + color: var(--text-muted); text-decoration: none; + transition: color 0.2s ease; } .nav a:hover { - text-decoration: underline; + color: #ffffff; + text-decoration: none; } .header-search-wrapper { @@ -134,12 +141,11 @@ header { .search-input:focus { outline: none; - border-color: var(--link); + border-color: var(--text-muted); } .search-input:focus+.search-dropdown { - border-color: var(--link); - border-top-color: var(--link); + /* No borders on active states either */ } .search-input::placeholder { @@ -153,9 +159,8 @@ header { left: 0; right: 0; background: var(--surface); - border: 1px solid var(--border); - border-top: 1px solid var(--border); - margin-top: -1px; + border: none; + margin-top: 0; max-height: clamp(300px, 50vh, 600px); overflow-y: auto; z-index: 1000; @@ -278,13 +283,31 @@ a:visited { .catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--thumb-width), 1fr)); - gap: var(--space-lg); + gap: var(--space-2xl) var(--space-lg); } .catalog-item { display: flex; flex-direction: column; gap: var(--space-xs); + text-decoration: none; +} + +.catalog-item a { + display: flex; + flex-direction: column; + gap: var(--space-xs); + text-decoration: none; + color: inherit; +} + +.catalog-item a:hover { + text-decoration: none; +} + +.catalog-item:hover .catalog-title, +.catalog-item a:hover .catalog-title { + color: var(--link-hover); } .catalog-thumb { @@ -319,6 +342,8 @@ a:visited { -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; + text-decoration: none; + transition: color 0.2s; } /* Loading */ @@ -1041,7 +1066,7 @@ a.htmx-request { } .catalog-grid { - gap: var(--space-md); + gap: var(--space-xl) var(--space-md); } .anime-hero { @@ -1122,7 +1147,6 @@ a.htmx-request { cursor: pointer; font-size: var(--text-base); padding: var(--space-sm) var(--space-md); - border-radius: 4px 4px 0 0; transition: all 0.15s; } @@ -1146,13 +1170,12 @@ a.htmx-request { .schedule-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 12vw + 80px, 200px), 1fr)); - gap: var(--space-lg); + gap: var(--space-2xl) var(--space-lg); } .schedule-card { background: var(--surface); border: 1px solid var(--border); - border-radius: 4px; overflow: hidden; transition: border-color 0.15s, transform 0.15s; text-decoration: none; @@ -1211,7 +1234,6 @@ a.htmx-request { .schedule-card-meta span { background: var(--surface-hover); padding: 2px 6px; - border-radius: 3px; } .schedule-time { @@ -1273,7 +1295,6 @@ a.htmx-request { .notification-card { background: var(--surface); border: 1px solid var(--border); - border-radius: 4px; overflow: hidden; transition: border-color 0.15s, transform 0.15s; display: flex; @@ -1339,7 +1360,6 @@ a.htmx-request { .notification-meta span { background: var(--surface-hover); padding: 2px 6px; - border-radius: 3px; } .notification-broadcast {