vggt_da

_viz/viz_template.html

@@ -180,8 +180,8 @@
       top: 16px;
       right: 16px;
       background: rgba(44, 44, 44, 0.98);
-      padding: 15px;
-      border-radius: 12px;
+      padding: 10px;
+      border-radius: 6px;
       width: 150px;
       max-height: calc(100vh - 40px);
       overflow-y: auto;
@@ -243,12 +243,12 @@
     }
     
     .settings-group {
-      margin-bottom: 16px;
+      margin-bottom: 8px;
     }
     
     .settings-group h3 {
-      margin: 0 0 8px 0;
-      font-size: 14px;
+      margin: 0 0 4px 0;
+      font-size: 7px;
       font-weight: 500;
       color: var(--text-secondary);
     }
@@ -256,26 +256,26 @@
     .slider-container {
       display: flex;
       align-items: center;
-      gap: 12px;
+      gap: 6px;
     }
     
     .slider-container label {
-      min-width: 80px;
-      font-size: 14px;
+      min-width: 40px;
+      font-size: 7px;
     }
     
     input[type="range"] {
       flex-grow: 1;
-      height: 4px;
+      height: 2px;
       -webkit-appearance: none;
       background: rgba(255, 255, 255, 0.1);
-      border-radius: 2px;
+      border-radius: 1px;
     }
     
     input[type="range"]::-webkit-slider-thumb {
       -webkit-appearance: none;
-      width: 16px;
-      height: 16px;
+      width: 8px;
+      height: 8px;
       border-radius: 50%;
       background: var(--primary);
       cursor: pointer;
@@ -284,8 +284,8 @@
     .toggle-switch {
       position: relative;
       display: inline-block;
-      width: 40px;
-      height: 20px;
+      width: 20px;
+      height: 10px;
     }
     
     .toggle-switch input {
@@ -303,16 +303,16 @@
       bottom: 0;
       background: rgba(255, 255, 255, 0.1);
       transition: .4s;
-      border-radius: 20px;
+      border-radius: 10px;
     }
     
     .toggle-slider:before {
       position: absolute;
       content: "";
-      height: 16px;
-      width: 16px;
-      left: 2px;
-      bottom: 2px;
+      height: 8px;
+      width: 8px;
+      left: 1px;
+      bottom: 1px;
       background: var(--surface);
       border: 1px solid var(--border);
       transition: .4s;
@@ -324,18 +324,18 @@
     }
     
     input:checked + .toggle-slider:before {
-      transform: translateX(20px);
+      transform: translateX(10px);
     }
     
     .checkbox-container {
       display: flex;
       align-items: center;
-      gap: 8px;
-      margin-bottom: 8px;
+      gap: 4px;
+      margin-bottom: 4px;
     }
     
     .checkbox-container label {
-      font-size: 14px;
+      font-size: 7px;
       cursor: pointer;
     }
     
@@ -438,10 +438,10 @@
     }
     
     h2 {
-      font-size: 1.2rem;
+      font-size: 0.6rem;
       font-weight: 600;
       margin-top: 0;
-      margin-bottom: var(--space-md);
+      margin-bottom: 12px;
       color: var(--primary);
       cursor: move;
       user-select: none;
@@ -450,8 +450,8 @@
     }
     
     .drag-handle {
-      font-size: 14px;
-      margin-right: 8px;
+      font-size: 7px;
+      margin-right: 4px;
       opacity: 0.6;
     }
     
@@ -470,6 +470,8 @@
       color: var(--primary);
       border: 1px solid rgba(155, 89, 182, 0.2);
       font-weight: 600;
+      font-size: 6px;
+      padding: 4px 6px;
       transition: all 0.2s;
     }
     
@@ -527,7 +529,7 @@
     
     .btn-group {
       display: flex;
-      margin-top: 16px;
+      margin-top: 8px;
     }
     
     #reset-view-btn, #reset-settings-btn {
@@ -535,6 +537,8 @@
       color: var(--primary);
       border: 1px solid rgba(155, 89, 182, 0.2);
       font-weight: 600;
+      font-size: 6px;
+      padding: 4px 6px;
       transition: all 0.2s;
     }
     
@@ -588,8 +592,8 @@
       <h2>
         <span class="drag-handle">☰</span>
         Visualization Settings
-        <button id="hide-settings-btn" class="control-btn" style="margin-left: auto; padding: 4px;" title="Hide Panel">
-          <svg class="icon" viewBox="0 0 24 24" style="width: 18px; height: 18px;">
+        <button id="hide-settings-btn" class="control-btn" style="margin-left: auto; padding: 2px;" title="Hide Panel">
+          <svg class="icon" viewBox="0 0 24 24" style="width: 9px; height: 9px;">
             <path d="M14.59 7.41L18.17 11H4v2h14.17l-3.58 3.59L16 18l6-6-6-6-1.41 1.41z"/>
           </svg>
         </button>