summaryrefslogtreecommitdiff
path: root/web
diff options
context:
space:
mode:
authorPeter Stone <thepeterstone@gmail.com>2026-01-22 13:20:16 -1000
committerPeter Stone <thepeterstone@gmail.com>2026-01-22 13:20:16 -1000
commit9dd0bc581b25bb7356d091d3a5560dc0af46c2d9 (patch)
tree5da8e5b403a856e5981a36b09ed9320e6c399683 /web
parentd7f3f89bbe5cf2b903192e257a5506b485641a95 (diff)
translucent theme
Diffstat (limited to 'web')
-rw-r--r--web/static/css/input.css41
-rw-r--r--web/templates/index.html18
2 files changed, 33 insertions, 26 deletions
diff --git a/web/static/css/input.css b/web/static/css/input.css
index f2bbca8..4daceb0 100644
--- a/web/static/css/input.css
+++ b/web/static/css/input.css
@@ -1,53 +1,57 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
-/* Custom base styles */
+/* Custom base styles - Dark translucent theme */
@layer base {
body {
- @apply antialiased text-gray-900 bg-gradient-to-br from-indigo-100 via-purple-100 to-pink-100 min-h-screen;
+ @apply antialiased text-white bg-gray-900 min-h-screen;
font-family: 'Inter', system-ui, sans-serif;
+ text-shadow: 0 0 8px black, 0 0 8px black;
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
- @apply text-gray-900 tracking-tight;
+ @apply text-white font-light tracking-wide;
}
+
+ a { @apply text-white/90 hover:text-white; }
}
/* Custom components */
@layer components {
- /* Glass Card */
+ /* Dark Glass Card */
.card {
- @apply bg-white/70 backdrop-blur-lg border border-white/50 shadow-xl rounded-2xl p-6 transition-all duration-200;
+ @apply bg-black/60 backdrop-blur-sm rounded-lg p-4 transition-all duration-200;
+ box-shadow: 0 0 12px black;
}
.card-hover {
- @apply hover:shadow-2xl hover:-translate-y-0.5 hover:bg-white/80;
+ @apply hover:bg-black/70;
}
/* Navigation Pills */
.tab-button {
- @apply px-2 sm:px-4 py-2 rounded-lg text-xs sm:text-sm font-medium text-gray-600 transition-all duration-200;
+ @apply px-2 sm:px-4 py-2 rounded-lg text-xs sm:text-sm font-light text-white/70 tracking-wide transition-all duration-200;
}
.tab-button:hover {
- @apply bg-white/50 text-gray-900;
+ @apply bg-white/10 text-white;
}
.tab-button-active {
- @apply bg-white shadow-sm text-indigo-700;
+ @apply bg-white/20 text-white;
}
- /* Existing Component Updates */
+ /* Section Header */
.section-header {
- @apply text-2xl font-bold text-gray-900 mb-6;
+ @apply text-xl font-light text-white tracking-wide mb-4;
}
.badge {
- @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+ @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-black/40;
}
.board-card {
@@ -55,17 +59,16 @@
}
.trello-card-item {
- @apply bg-white/60 border border-white/40 rounded-lg p-4
- hover:shadow-md hover:bg-white/80 transition-all;
+ @apply bg-black/40 rounded-lg p-4 hover:bg-black/50 transition-all;
}
.task-item {
- @apply flex items-start gap-3 p-4 rounded-lg
- hover:bg-white/40 transition-colors;
+ @apply bg-black/60 rounded-lg transition-colors;
+ box-shadow: 0 0 12px black;
}
- .note-card {
- @apply card card-hover border-l-4 border-l-obsidian;
+ .task-item:hover {
+ @apply bg-black/70;
}
.line-clamp-3 {
diff --git a/web/templates/index.html b/web/templates/index.html
index 6732ffd..da27e74 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -6,28 +6,32 @@
<title>Personal Dashboard</title>
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
<link rel="stylesheet" href="/static/css/output.css">
+ <style>
+ .text-shadow { text-shadow: 0 0 8px black, 0 0 8px black; }
+ .text-shadow-sm { text-shadow: 0 0 4px black; }
+ </style>
</head>
-<body class="min-h-screen bg-gray-800" style="background-image: url('{{.BackgroundURL}}'); background-size: cover; background-position: center; background-attachment: fixed;" hx-headers='{"X-CSRF-Token": "{{.CSRFToken}}"}'>
- <div class="content-max-width py-3 sm:py-6 bg-white/80 backdrop-blur-sm rounded-lg my-4 sm:my-6 shadow-lg">
+<body class="min-h-screen bg-gray-900 text-white" style="background-image: url('{{.BackgroundURL}}'); background-size: cover; background-position: center; background-attachment: fixed;" hx-headers='{"X-CSRF-Token": "{{.CSRFToken}}"}'>
+ <div class="content-max-width py-3 sm:py-6">
<!-- Minimal Header -->
- <header class="flex mb-4 sm:mb-6 justify-between items-center no-print">
+ <header class="flex mb-4 sm:mb-6 justify-between items-center no-print text-shadow-sm">
<button onclick="refreshData()"
- class="text-gray-400 hover:text-primary-600 transition-colors p-1"
+ class="text-white/70 hover:text-white transition-colors p-1"
title="Refresh">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
</svg>
</button>
- <span class="text-xs text-gray-400" id="last-updated">{{.LastUpdated.Format "3:04 PM"}}</span>
+ <span class="text-sm text-white/70 tracking-wider font-light" id="last-updated">{{.LastUpdated.Format "3:04 PM"}}</span>
<form method="POST" action="/logout">
<input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
- <button type="submit" class="text-gray-400 hover:text-gray-600 transition-colors text-xs">Logout</button>
+ <button type="submit" class="text-white/70 hover:text-white transition-colors text-xs tracking-wide">Logout</button>
</form>
</header>
<!-- Tab Navigation -->
<div class="mb-4 sm:mb-6 no-print">
- <nav class="flex space-x-1 bg-white/30 backdrop-blur-md rounded-xl p-1">
+ <nav class="flex space-x-1 bg-black/50 backdrop-blur-sm rounded-xl p-1 text-shadow-sm">
<button
class="tab-button {{if eq .ActiveTab "tasks"}}tab-button-active{{end}}"
hx-get="/tabs/tasks"
generated by cgit v1.2.3 (git 2.39.1) at 2026-03-28 07:24:40 +0000