website: snapshot

website/index.html

@@ -574,10 +574,6 @@
           color: var(--color);
           font-style: normal;
         }
-
-        [data-screenshot="true"] &:has(input:not(:checked)) {
-          display: none;
-        }
       }
 
       main {
@@ -603,8 +599,7 @@
           right: 0;
           left: 0;
           text-transform: uppercase;
-          margin: var(--main-padding);
-          margin-bottom: var(--main-padding);
+          margin: var(--main-padding) 0;
           z-index: 100;
           pointer-events: none;
           justify-content: center;
@@ -616,13 +611,18 @@
           }
 
           > fieldset {
-            width: 100%;
             display: flex;
             gap: 1.25rem;
+            overflow-x: auto;
+            scrollbar-width: thin;
+            min-width: 0;
+            margin: -0.5rem 0;
+            padding: 0.5rem var(--main-padding);
+            pointer-events: auto;
 
             > label,
             > button {
-              pointer-events: auto;
+              flex-shrink: 0;
             }
 
             > button {
@@ -1018,19 +1018,6 @@
         margin-top: 2rem;
         margin-bottom: 1rem;
 
-        button#screenshot {
-          width: 100%;
-          text-align: left;
-          padding-left: 1rem;
-          height: 100%;
-          font-size: var(--font-size-sm);
-          line-height: var(--line-height-sm);
-
-          [data-screenshot="true"] & {
-            display: none;
-          }
-        }
-
         > legend {
           gap: 1.5rem;
 
@@ -1039,10 +1026,6 @@
           }
 
           > div {
-            [data-screenshot="true"] &:has(input:not(:checked)) {
-              display: none;
-            }
-
             flex: 0;
             height: 100%;
             display: flex;
@@ -1083,11 +1066,6 @@
               padding-right: 0.375rem;
               margin-left: -0.375rem;
               margin-right: -0.375rem;
-
-              [data-screenshot="true"] & {
-                width: 0;
-                opacity: 0;
-              }
             }
           }
         }
@@ -1129,6 +1107,16 @@
 
             gap: 0;
           }
+
+          button.capture {
+            position: absolute;
+            top: 0.5rem;
+            right: 0.5rem;
+            z-index: 10;
+            font-size: var(--font-size-xs);
+            line-height: var(--line-height-xs);
+            color: var(--off-color);
+          }
         }
 
         > .panes {
@@ -1206,17 +1194,6 @@
           flex: 1;
         }
 
-        #interval {
-          > span {
-            display: none;
-
-            [data-screenshot="true"] & {
-              color: var(--gray);
-              display: inline-block;
-            }
-          }
-        }
-
         > .chart > legend,
         > fieldset {
           z-index: 20;
@@ -1534,8 +1511,12 @@
       );
 
       let storedTheme;
-      try { storedTheme = localStorage.getItem("theme"); } catch (_) {}
-      const isDark = storedTheme ? storedTheme === "dark" : preferredColorSchemeMatchMedia.matches;
+      try {
+        storedTheme = localStorage.getItem("theme");
+      } catch (_) {}
+      const isDark = storedTheme
+        ? storedTheme === "dark"
+        : preferredColorSchemeMatchMedia.matches;
       document.documentElement.style.colorScheme = isDark ? "dark" : "light";
 
       const themeColor = window.document.createElement("meta");
@@ -1801,6 +1782,8 @@
       </search>
 
       <footer>
+        <div class="shadow-left"></div>
+        <div class="shadow-right"></div>
         <fieldset id="frame-selectors">
           <label
             id="aside-selector-label"
@@ -1814,7 +1797,7 @@
               id="aside-selector"
               value="aside"
             />
-            Home
+            View
           </label>
 
           <label id="nav-selector-label" for="nav-selector" title="Nav">