global: snapshot

website/styles/chart.css

@@ -7,8 +7,8 @@
 
   label,
   select {
-    margin: -0.5rem;
-    padding: 0.5rem;
+    margin: -0.375rem;
+    padding: 0.375rem;
   }
 
   select {
@@ -67,7 +67,7 @@
       overflow-x: auto;
       scrollbar-width: thin;
       padding: 0 var(--main-padding);
-      padding-top: 0.278rem;
+      padding-top: 0.375rem;
       padding-bottom: 0.75rem;
       > * {
         pointer-events: auto;
@@ -210,6 +210,7 @@
       display: inline-flex;
       font-size: var(--font-size-xs);
       align-items: center;
+      text-transform: uppercase;
     }
 
     tr:not(:last-child) > td:last-child > .field {
@@ -217,7 +218,6 @@
       right: 0;
       gap: 0.375rem;
       background-color: var(--background-color);
-      text-transform: uppercase;
       padding-left: 0.625rem;
       padding-top: 0.35rem;
       padding-bottom: 0.125rem;
@@ -237,8 +237,74 @@
       }
     }
 
-    tr:last-child > td:last-child > .field {
-      bottom: 2.125rem;
+    .index-bar {
+      position: absolute;
+      bottom: 1.8rem;
+      left: calc(var(--main-padding) * -1);
+      right: 50px;
+      z-index: 20;
+      font-size: var(--font-size-xs);
+      line-height: var(--line-height-xs);
+      text-transform: uppercase;
+      pointer-events: none;
+
+      &::before,
+      &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: var(--main-padding);
+        z-index: 1;
+        pointer-events: none;
+      }
+
+      &::before {
+        left: 0;
+        background-image: linear-gradient(
+          to left,
+          transparent,
+          var(--background-color)
+        );
+      }
+
+      &::after {
+        right: 0;
+        background-image: linear-gradient(
+          to right,
+          transparent,
+          var(--background-color)
+        );
+      }
+
+      > div {
+        display: flex;
+        align-items: center;
+        overflow-x: auto;
+        scrollbar-width: thin;
+        padding: 0 var(--main-padding);
+        padding-top: 0.375rem;
+        padding-bottom: 0.375rem;
+
+        > * {
+          pointer-events: auto;
+          flex-shrink: 0;
+        }
+
+        > span {
+          padding: 0 0.75rem;
+        }
+
+        button {
+          color: var(--off-color);
+          padding: 0.375rem;
+          margin: -0.375rem 0rem;
+
+          &:hover {
+            color: var(--color);
+          }
+        }
+      }
     }
 
     button.capture {

website/styles/variables.css

@@ -1,13 +1,13 @@
 :root {
   color-scheme: light dark;
 
-  /*--white: oklch(90% 0 0);*/
-  --white: oklch(93.3% 0.006 75);
-  /*oklch(0.9333 0.0059 59.65)*/
-  --light-gray: oklch(85% 0.01 75);
-  --gray: oklch(60% 0.01 44);
-  --dark-gray: oklch(25% 0.006 90);
-  --black: oklch(16.5% 0.006 90);
+  --white: oklch(95% 0 0);
+  --dark-white: oklch(92.5% 0 0);
+  --light-gray: oklch(90% 0 0);
+  --gray: oklch(55% 0 0);
+  --dark-gray: oklch(20% 0 0);
+  --light-black: oklch(17.5% 0 0);
+  --black: oklch(15% 0 0);
   /*oklch(0.2038 0.0076 196.57)*/
   --red: oklch(0.607 0.241 26.328);
   --orange: oklch(67.64% 0.191 44.41);
@@ -31,6 +31,7 @@
   --color: light-dark(var(--black), var(--white));
   --off-color: var(--gray);
   --border-color: light-dark(var(--light-gray), var(--dark-gray));
+  --off-border-color: light-dark(var(--dark-white), var(--light-black));
 
   --font-size-xs: 0.75rem;
   --line-height-xs: calc(1 / 0.75);