Redesign Gitea-like

templates/base.html

@@ -5,42 +5,135 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{% block title %}PBT – Öffi-Erfahrungen{% endblock %}</title>
   <style>
-    :root { color-scheme: light dark; }
+    :root {
+      --bg: #0d1117;
+      --panel: #161b22;
+      --panel-border: #30363d;
+      --field-bg: #0d1117;
+      --field-border: #30363d;
+      --field-border-focus: #4a9eff;
+      --text: #e6edf3;
+      --text-muted: #8b949e;
+      --accent: #4a9eff;
+      --accent-hover: #3d8ce6;
+      --danger: #f85149;
+      --success: #3fb950;
+    }
+    * { box-sizing: border-box; }
     body {
-      font-family: system-ui, -apple-system, sans-serif;
-      max-width: 700px;
-      margin: 2rem auto;
-      padding: 0 1rem;
+      font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      max-width: 720px;
+      margin: 0 auto;
+      padding: 2rem 1rem;
       line-height: 1.5;
     }
-    header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
+    a { color: var(--accent); text-decoration: none; }
+    a:hover { text-decoration: underline; }
+
+    header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 2rem;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+    }
     header h1 { font-size: 1.3rem; margin: 0; }
-    nav a { margin-left: 1rem; }
-    .flash { padding: 0.6rem 1rem; border-radius: 6px; margin-bottom: 1rem; }
-    .flash.error { background: #fbdada; color: #7a1c1c; }
-    .flash.success { background: #d8f5d8; color: #1c5e1c; }
-    form { display: flex; flex-direction: column; gap: 0.8rem; max-width: 420px; }
-    label { font-weight: 600; font-size: 0.9rem; }
+    nav a { margin-left: 1rem; color: var(--text-muted); }
+    nav a:hover { color: var(--accent); }
+
+    .flash { padding: 0.7rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.9rem; }
+    .flash.error { background: rgba(248, 81, 73, 0.15); color: #ffa198; border: 1px solid rgba(248, 81, 73, 0.4); }
+    .flash.success { background: rgba(63, 185, 80, 0.15); color: #56d364; border: 1px solid rgba(63, 185, 80, 0.4); }
+
+    .card {
+      background: var(--panel);
+      border: 1px solid var(--panel-border);
+      border-radius: 10px;
+      padding: 1.5rem;
+      max-width: 420px;
+      margin: 0 auto;
+    }
+    .card h2 { text-align: center; margin-top: 0; font-size: 1.15rem; font-weight: 600; }
+
+    form { display: flex; flex-direction: column; gap: 1rem; }
+    label {
+      font-weight: 600;
+      font-size: 0.85rem;
+      color: var(--text);
+      margin-bottom: 0.35rem;
+      display: block;
+    }
+    label .required { color: var(--danger); margin-left: 2px; }
+    .label-row { display: flex; justify-content: space-between; align-items: baseline; }
+    .label-row a { font-size: 0.8rem; }
+
     input, select, textarea {
-      padding: 0.5rem;
-      font-size: 1rem;
-      border: 1px solid #999;
+      width: 100%;
+      padding: 0.6rem 0.7rem;
+      font-size: 0.95rem;
+      background: var(--field-bg);
+      border: 1px solid var(--field-border);
       border-radius: 6px;
+      color: var(--text);
+      font-family: inherit;
     }
-    button {
-      padding: 0.6rem 1rem;
-      font-size: 1rem;
-      border: none;
+    input:focus, select:focus, textarea:focus {
+      outline: none;
+      border-color: var(--field-border-focus);
+      box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.15);
+    }
+    input::placeholder { color: var(--text-muted); }
+
+    .field { display: flex; flex-direction: column; }
+
+    button, .btn {
+      padding: 0.65rem 1rem;
+      font-size: 0.95rem;
+      font-weight: 600;
+      border: 1px solid transparent;
       border-radius: 6px;
-      background: #1a5fb4;
-      color: white;
+      background: var(--accent);
+      color: #fff;
       cursor: pointer;
-      width: fit-content;
+      width: 100%;
     }
-    button.secondary { background: #999; }
+    button:hover, .btn:hover { background: var(--accent-hover); }
+    button.secondary {
+      background: transparent;
+      border: 1px solid var(--panel-border);
+      color: var(--text);
+    }
+    button.secondary:hover { background: rgba(255,255,255,0.04); }
+
+    .divider {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      color: var(--text-muted);
+      font-size: 0.85rem;
+      margin: 0.25rem 0;
+    }
+    .divider::before, .divider::after {
+      content: "";
+      flex: 1;
+      height: 1px;
+      background: var(--panel-border);
+    }
+
+    .card-footer {
+      text-align: center;
+      font-size: 0.9rem;
+      color: var(--text-muted);
+      margin-top: 1rem;
+    }
+
     table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
-    th, td { text-align: left; padding: 0.5rem; border-bottom: 1px solid #ddd; }
-    .stars { color: #d4a017; }
+    th, td { text-align: left; padding: 0.6rem 0.4rem; border-bottom: 1px solid var(--panel-border); font-size: 0.9rem; }
+    th { color: var(--text-muted); font-weight: 600; }
+    .stars { color: #e3b341; white-space: nowrap; }
   </style>
 </head>
 <body>