Layout geändert

editor.py

@@ -921,6 +921,16 @@ button:disabled { opacity:.45; cursor:not-allowed; }
  .position { width:100%; margin-left:0; }
  button, a.button { flex:1 1 auto; }
 }
+
+#dynamic-content {
+    background: var(--color-surface-dark);
+    color: var(--color-white);
+    border: 1px solid var(--color-primary);
+    border-radius: 8px;
+    padding: 16px;
+    margin: 0 0 24px 0;
+    box-shadow: 0 2px 6px var(--color-shadow);
+}
 </style>
 </head>
 <body>

recorder.py

@@ -862,6 +862,16 @@ a.button:hover {
         margin-right: 8px;
     }
 }
+
+#dynamic-content {
+    background: var(--color-surface-dark);
+    color: var(--color-white);
+    border: 1px solid var(--color-primary);
+    border-radius: 8px;
+    padding: 16px;
+    margin: 0 0 24px 0;
+    box-shadow: 0 2px 6px var(--color-shadow);
+}
 </style>
 </head>
 

theme-light.json

@@ -0,0 +1,40 @@
+{
+  "colors": {
+    "background": "#e6e6e6",
+    "surface": "#ffffff",
+    "surface_alt": "#f5f5f5",
+    "surface_dark": "#1e495a",
+    "text": "#1f2b30",
+    "text_secondary": "#40545c",
+    "text_muted": "#687b82",
+    "text_faint": "#8a999e",
+    "border": "#b8c8ce",
+    "border_subtle": "#d1dadd",
+    "control": "#ffffff",
+    "control_hover": "#f0f4f5",
+    "primary": "#30738e",
+    "primary_hover": "#1e495a",
+    "accent": "#1e495a",
+    "success": "#2f6b5c",
+    "success_text": "#245044",
+    "warning": "#806d32",
+    "danger": "#743b3b",
+    "danger_soft": "#ead9dc",
+    "danger_soft_hover": "#e0c5ca",
+    "error": "#743b3b",
+    "error_text": "#743b3b",
+    "recording": "#9b3030",
+    "recording_border": "#6f3035",
+    "selection": "rgba(48,115,142,.20)",
+    "shadow": "rgba(30,73,90,.18)",
+    "scroll_thumb": "#9aadb4",
+    "scroll_thumb_hover": "#718e99",
+    "scroll_thumb_active": "#527887",
+    "live_surface": "#1e495a",
+    "table_header": "#d5e0e4",
+    "footer": "#687b82",
+    "white": "#ffffff",
+    "surface_modal": "#ffffff",
+    "overlay": "rgba(0,0,0,.45)"
+  }
+}