diff options
Diffstat (limited to 'web/templates/index.html')
| -rw-r--r-- | web/templates/index.html | 24 |
1 files changed, 12 insertions, 12 deletions
diff --git a/web/templates/index.html b/web/templates/index.html index 1884a77..5cfa77f 100644 --- a/web/templates/index.html +++ b/web/templates/index.html @@ -8,25 +8,25 @@ <link rel="stylesheet" href="/static/css/output.css"> <style> :root { - --panel-bg: rgba(0, 0, 0, 0.4); - --card-bg: rgba(0, 0, 0, 0.5); - --card-bg-hover: rgba(0, 0, 0, 0.6); - --input-bg: rgba(0, 0, 0, 0.4); - --modal-bg: rgba(0, 0, 0, 0.8); - --modal-overlay: rgba(0, 0, 0, 0.7); + --panel-bg: rgba(15, 23, 42, 0.8); + --card-bg: rgba(30, 41, 59, 0.7); + --card-bg-hover: rgba(51, 65, 85, 0.8); + --input-bg: rgba(15, 23, 42, 0.9); + --modal-bg: rgba(15, 23, 42, 0.95); + --modal-overlay: rgba(2, 6, 23, 0.8); } - .text-shadow { text-shadow: 0 0 8px black, 0 0 8px black; } - .text-shadow-sm { text-shadow: 0 0 4px black; } + .text-shadow-sm { text-shadow: 0 1px 2px rgba(0,0,0,0.5); } /* CSS variable-based backgrounds */ - .bg-panel { background-color: var(--panel-bg); } - .bg-card { background-color: var(--card-bg); } - .bg-card-hover:hover { background-color: var(--card-bg-hover); } + .bg-panel { background-color: var(--panel-bg); @apply backdrop-blur-md border border-white/5; } + .bg-card { background-color: var(--card-bg); @apply backdrop-blur-sm border border-white/5; } + .bg-card-hover:hover { background-color: var(--card-bg-hover); @apply border-white/10; } .bg-input { background-color: var(--input-bg); } .bg-modal { background-color: var(--modal-bg); } .bg-modal-overlay { background-color: var(--modal-overlay); } </style> </head> -<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}}"}'> +<body class="min-h-screen bg-slate-950 text-slate-200" hx-headers='{"X-CSRF-Token": "{{.CSRFToken}}"}'> + <div class="bg-overlay" style="background-image: url('{{.BackgroundURL}}');"></div> <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 text-shadow-sm"> |