website_next: snapshot

website_next/chart/controls/style.css

@@ -0,0 +1,95 @@
+figure[data-chart="series"] {
+  > footer {
+    > div {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.125rem 0.5rem;
+    }
+
+    fieldset {
+      display: flex;
+      gap: 0.25rem;
+      margin: 0;
+      padding: 0;
+      border: 0;
+      text-transform: uppercase;
+
+      legend {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+      }
+
+      label {
+        position: relative;
+        display: block;
+        cursor: pointer;
+      }
+
+      input {
+        position: absolute;
+        inset: 0;
+        margin: 0;
+        opacity: 0;
+        cursor: pointer;
+      }
+
+      span {
+        display: block;
+      }
+
+      label:has(:checked) span {
+        color: var(--black);
+        background: var(--gray);
+      }
+    }
+
+    button[data-chart="fullscreen"] {
+      border: 0;
+      background: none;
+      font: inherit;
+      line-height: inherit;
+      text-transform: uppercase;
+      cursor: pointer;
+
+      &[aria-pressed="true"] {
+        color: var(--black);
+        background: var(--green);
+      }
+    }
+
+    :is(label > span, button[data-chart="fullscreen"]) {
+      padding: 0.25rem;
+      border-radius: 0.25rem;
+      color: var(--gray);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      :is(label:hover span, button[data-chart="fullscreen"]:hover) {
+        color: var(--black);
+        background: var(--white);
+      }
+    }
+
+    :is(label:active span, button[data-chart="fullscreen"]:active) {
+      color: var(--black);
+      background: var(--orange);
+    }
+
+    :is(label[data-press] span, button[data-chart="fullscreen"][data-press]) {
+      color: var(--black);
+      background: var(--white);
+    }
+
+    :is(
+        label:has(:focus-visible) span,
+        button[data-chart="fullscreen"]:focus-visible
+      ) {
+      outline: 1px solid var(--orange);
+      outline-offset: 0.125rem;
+    }
+  }
+}