@trdrs/quickcharts 4.1.0 → 5.0.0

package/dist/quickcharts.css

@@ -12,6 +12,7 @@
 [data-qc-theme="light"] {
   --qc-canvas-background: #ffffff;
   --qc-canvas-paneBorder: #ebebeb;
+  --qc-canvas-watermark: rgba(80, 83, 94, 0.2);
   --qc-chrome-border: #ebebeb;
   --qc-chrome-borderStrong: #8c8c8c;
   --qc-chrome-caret: #707070;
@@ -40,6 +41,8 @@
   --qc-control-onPressed: #707070;
   --qc-control-outline: #2e2e2e;
   --qc-control-selectEdgeHover: #a8a8a8;
+  --qc-control-tipMark: #a8a8a8;
+  --qc-control-tipMarkHover: #707070;
   --qc-drawing-fill: rgba(41, 98, 255, 0.15);
   --qc-drawing-handle: #ffffff;
   --qc-drawing-line: #2962ff;
@@ -64,17 +67,19 @@
   --qc-overlay-separator: #ebebeb;
   --qc-overlay-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   --qc-overlay-surface: #ffffff;
+  --qc-overlay-tooltip: #3d3d3d;
+  --qc-overlay-tooltipInk: #f2f2f2;
   --qc-scale-background: #ffffff;
-  --qc-scale-border: #e0e3eb;
-  --qc-scale-crosshair: #9598a1;
-  --qc-scale-crosshairLabelBackground: #131722;
+  --qc-scale-border: rgba(46, 46, 46, 0);
+  --qc-scale-crosshair: #9c9c9c;
+  --qc-scale-crosshairLabelBackground: #0f0f0f;
   --qc-scale-crosshairLabelText: #ffffff;
-  --qc-scale-grid: rgba(0, 0, 0, 0.06);
-  --qc-scale-sessionAfterHours: rgba(245, 166, 35, 0.06);
+  --qc-scale-grid: rgba(46, 46, 46, 0.2);
+  --qc-scale-sessionAfterHours: rgba(41, 98, 255, 0.08);
   --qc-scale-sessionClosed: rgba(0, 0, 0, 0.05);
-  --qc-scale-sessionExtended: rgba(76, 152, 251, 0.06);
-  --qc-scale-sessionPreMarket: rgba(76, 152, 251, 0.06);
-  --qc-scale-text: #5b616e;
+  --qc-scale-sessionExtended: rgba(213, 0, 249, 0.08);
+  --qc-scale-sessionPreMarket: rgba(255, 152, 0, 0.08);
+  --qc-scale-text: #0f0f0f;
   --qc-series-down: #f23645;
   --qc-series-neutral: #787b86;
   --qc-series-up: #089981;
@@ -97,6 +102,7 @@
   --qc-status-sessionOpen: #22c55e;
   --qc-status-sessionPreMarket: #4c98fb;
   --qc-status-warning: #ac6600;
+  --qc-text-caption: #707070;
   --qc-text-disabled: #b8b8b8;
   --qc-text-fontFamily: -apple-system, BlinkMacSystemFont, "Trebuchet MS", Roboto, Ubuntu, sans-serif;
   --qc-text-fontSizeAxis: 13px;
@@ -116,6 +122,7 @@
 [data-qc-theme="dark"] {
   --qc-canvas-background: #0f0f0f;
   --qc-canvas-paneBorder: #2e2e2e;
+  --qc-canvas-watermark: rgba(80, 83, 94, 0.3);
   --qc-chrome-border: #2e2e2e;
   --qc-chrome-borderStrong: #707070;
   --qc-chrome-caret: #8c8c8c;
@@ -144,6 +151,8 @@
   --qc-control-onPressed: #8c8c8c;
   --qc-control-outline: #ffffff;
   --qc-control-selectEdgeHover: #808080;
+  --qc-control-tipMark: #575757;
+  --qc-control-tipMarkHover: #8c8c8c;
   --qc-drawing-fill: rgba(41, 98, 255, 0.15);
   --qc-drawing-handle: #0f0f0f;
   --qc-drawing-line: #2962ff;
@@ -168,17 +177,19 @@
   --qc-overlay-separator: #4a4a4a;
   --qc-overlay-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
   --qc-overlay-surface: #1f1f1f;
+  --qc-overlay-tooltip: #3d3d3d;
+  --qc-overlay-tooltipInk: #f2f2f2;
   --qc-scale-background: #0f0f0f;
-  --qc-scale-border: #2a2e39;
-  --qc-scale-crosshair: #758696;
-  --qc-scale-crosshairLabelBackground: #dbdbdb;
-  --qc-scale-crosshairLabelText: #0f0f0f;
-  --qc-scale-grid: rgba(255, 255, 255, 0.035);
-  --qc-scale-sessionAfterHours: rgba(245, 166, 35, 0.045);
+  --qc-scale-border: rgba(242, 242, 242, 0);
+  --qc-scale-crosshair: #9c9c9c;
+  --qc-scale-crosshairLabelBackground: #3d3d3d;
+  --qc-scale-crosshairLabelText: #ffffff;
+  --qc-scale-grid: rgba(242, 242, 242, 0.2);
+  --qc-scale-sessionAfterHours: rgba(41, 98, 255, 0.08);
   --qc-scale-sessionClosed: rgba(0, 0, 0, 0.22);
-  --qc-scale-sessionExtended: rgba(76, 152, 251, 0.05);
-  --qc-scale-sessionPreMarket: rgba(76, 152, 251, 0.05);
-  --qc-scale-text: #9aa0aa;
+  --qc-scale-sessionExtended: rgba(213, 0, 249, 0.08);
+  --qc-scale-sessionPreMarket: rgba(255, 152, 0, 0.08);
+  --qc-scale-text: #b8b8b8;
   --qc-series-down: #f23645;
   --qc-series-neutral: #787b86;
   --qc-series-up: #089981;
@@ -201,6 +212,7 @@
   --qc-status-sessionOpen: #22c55e;
   --qc-status-sessionPreMarket: #4c98fb;
   --qc-status-warning: #ff9800;
+  --qc-text-caption: #8c8c8c;
   --qc-text-disabled: #575757;
   --qc-text-fontFamily: -apple-system, BlinkMacSystemFont, "Trebuchet MS", Roboto, Ubuntu, sans-serif;
   --qc-text-fontSizeAxis: 13px;
@@ -819,9 +831,11 @@
 
 /* Legend --------------------------------------------------------------------------------------- */
 
+/* The legend stands 4px into the main pane, which the chart writes the top of as
+ * `--qcd-legend-top` once a viewer has moved it below another pane. */
 [data-qc-theme] .qc-legend {
   position: absolute;
-  top: 4px;
+  top: calc(4px + var(--qcd-legend-top, 0px));
   inset-inline-end: 64px;
   z-index: 3;
   display: flex;
@@ -858,6 +872,10 @@
   padding-inline: 4px;
   border-radius: 4px;
   pointer-events: auto;
+  /* The status line's backdrop: a plain fill of the chart's background at the setting's opacity,
+   * which the chart writes on the legend, so the bars under each part stand back. Unwritten, the
+   * legend stands on the bars. The reading and the indicator rows take the same fill. */
+  background-color: var(--qcd-legend-backdrop);
 }
 
 /* A band under the pointer reads as one solid chip over the candles: the canvas' own fill, so the
@@ -945,6 +963,7 @@
   font-size: var(--qc-text-fontSizeAxis);
   font-weight: 400;
   font-variant-numeric: tabular-nums;
+  background-color: var(--qcd-legend-backdrop);
 }
 
 [data-qc-theme] .qc-legend-ohlc {
@@ -993,6 +1012,55 @@
   color: var(--qc-text-primary);
 }
 
+/* The bar's volume after its change: the quiet mark, then the number in the direction's ink. */
+[data-qc-theme] .qc-legend-volume {
+  display: inline-flex;
+  align-items: center;
+}
+
+[data-qc-theme] .qc-legend-volume > .qc-legend-mark {
+  color: var(--qc-text-muted);
+  margin-inline-end: 4px;
+}
+
+[data-qc-theme] .qc-legend-quote[data-qc-direction='up'] .qc-legend-volume > :last-child {
+  color: var(--qc-status-positive);
+}
+
+[data-qc-theme] .qc-legend-quote[data-qc-direction='down'] .qc-legend-volume > :last-child {
+  color: var(--qc-status-negative);
+}
+
+/* The rows extensions place in the legend, under the reading and above the indicator rows, at the
+ * header's own inset. The element in each is the extension's and takes the pointer; the slot
+ * wears the status line's backdrop, as the legend's own parts do. */
+[data-qc-theme] .qc-legend-slots {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding-inline-start: 9px;
+  pointer-events: none;
+}
+
+[data-qc-theme] .qc-legend-slot {
+  pointer-events: auto;
+  background-color: var(--qcd-legend-backdrop);
+}
+
+/* The change since the previous session's close, last in the reading, in its own direction's ink
+ * rather than the read bar's. */
+[data-qc-theme] .qc-legend-day-change {
+  color: var(--qc-text-primary);
+}
+
+[data-qc-theme] .qc-legend-day-change[data-qc-tone='up'] {
+  color: var(--qc-status-positive);
+}
+
+[data-qc-theme] .qc-legend-day-change[data-qc-tone='down'] {
+  color: var(--qc-status-negative);
+}
+
 [data-qc-theme] .qc-legend-rows {
   /* Rows hug their own content: the chip a hovered row takes must be the width of the row, not
    * of the chart. They start at the same 9px inset the header does. */
@@ -1074,6 +1142,7 @@
   font-weight: 400;
   border-radius: 4px;
   pointer-events: auto;
+  background-color: var(--qcd-legend-backdrop);
 }
 
 /* The same chip the identity band takes, on the same terms. */
@@ -1286,6 +1355,19 @@
   margin: 6px 0;
 }
 
+/* The price menu the scale's plus opens: the context menu's box as wide as its widest row, so a
+ * label shows whole and ellipsizes only where the viewport cannot hold its row. A shortcut stands
+ * 10px after its label, in 12px. */
+[data-qc-theme] .qc-menu.qc-price-menu {
+  width: max-content;
+  max-width: calc(100vw - 16px);
+}
+
+[data-qc-theme] .qc-menu.qc-price-menu .qc-menu-hint {
+  padding-inline: 4px 0;
+  font-size: 12px;
+}
+
 /* Indicator inputs ----------------------------------------------------------------------------- */
 
 [data-qc-theme] .qc-inputs {
@@ -1514,6 +1596,7 @@
 }
 
 [data-qc-theme] .qc-nav[data-qc-near],
+[data-qc-theme] .qc-nav[data-qc-visibility='always'],
 [data-qc-theme] .qc-nav:hover,
 [data-qc-theme] .qc-nav:focus-within {
   opacity: 1;
@@ -1567,8 +1650,8 @@
  * the chart chrome layer 5, notices 6, the overlay layer 20, a menu panel 21, a dialog scrim 22.
  * The replay transport takes no rung: it is an in-flow row of the root's column, not a float.
  * The chart chrome layer is a stacking context of its own, and the drawing surfaces inside it
- * keep their own rungs: the drawing toolbar on 3, the floating bars 7, the inline text
- * editor 8, a flyout or palette 9, a drawing dialog's scrim 10.
+ * keep their own rungs: the drawing toolbar on 3, a time-scale mark's tooltip 6, the floating
+ * bars 7, the inline text editor 8, a flyout or palette 9, a drawing dialog's scrim 10.
  * A host that must stack something above the widget gives its own element a stacking context
  * above the root; nothing here reaches the top of the integer range. */
 [data-qc-theme] .qc-overlays {
@@ -1942,6 +2025,24 @@
   padding: 0 6px 6px;
 }
 
+/* A hovered time-scale mark's words: 13 on 18 on the tooltip fill, its foot 4px above the mark,
+ * never taking the pointer, on the chart chrome layer's rung 6. */
+[data-qc-theme] .qc-chrome > .qc-mark-tooltip {
+  position: absolute;
+  z-index: 6;
+  box-sizing: border-box;
+  max-width: 310px;
+  padding: 3px 8px;
+  color: var(--qc-overlay-tooltipInk);
+  font-size: 13px;
+  line-height: 18px;
+  white-space: pre-line;
+  background: var(--qc-overlay-tooltip);
+  border-radius: 2px;
+  transform: translateY(-100%);
+  pointer-events: none;
+}
+
 /* The inline text editor over the pane, the glyph picker and the image picker. */
 
 /* The text editor over the pane. Its place, size and type are written by the editor, because they
@@ -5485,6 +5586,16 @@
   background: transparent;
 }
 
+/* A dialog the chart stays live behind lets the pointer through its backdrop: only the box and what
+ * it raises over the backdrop (its lists, popovers and tips) take the pointer. */
+[data-qc-theme] .qc-dialog-scrim[data-qc-pass='true'] {
+  pointer-events: none;
+}
+
+[data-qc-theme] .qc-dialog-scrim[data-qc-pass='true'] > * {
+  pointer-events: auto;
+}
+
 [data-qc-theme] .qc-dialog {
   display: flex;
   flex-direction: column;
@@ -6348,6 +6459,124 @@
   }
 }
 
+/* The controls that stand on the main price scale, over the renderer's own drawing of it. The chart
+ * places each over the scale's box as it measures it and writes `--qcd-chart-background`, the
+ * chart's own background, which each control stands on. */
+
+/* The auto-scale and logarithmic buttons at the foot of the scale: two 20x22 buttons 4px apart, a
+ * letter each. Off, a button is a 1px outline on the chart's background; on, it is a held mode,
+ * filled in the emphasis fill a checked box wears with its letter in the inverse ink. */
+[data-qc-theme] .qc-scale-modes {
+  position: absolute;
+  z-index: 4;
+  display: flex;
+  gap: 4px;
+  pointer-events: auto;
+}
+
+[data-qc-theme] .qc-scale-mode {
+  box-sizing: border-box;
+  display: inline-flex;
+  width: 20px;
+  height: 22px;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  font: inherit;
+  font-size: 12px;
+  line-height: 1;
+  color: var(--qc-text-primary);
+  background: var(--qcd-chart-background, var(--qc-canvas-background));
+  border: 1px solid var(--qc-overlay-separator);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+[data-qc-theme] .qc-scale-mode:hover {
+  background: var(--qc-state-hover);
+}
+
+[data-qc-theme] .qc-scale-mode[aria-pressed='true'] {
+  color: var(--qc-text-inverse);
+  background: var(--qc-control-on);
+  border-color: var(--qc-control-on);
+}
+
+/* The box at the top of the scale naming what its prices are in: at least 64x26, four pixels in from
+ * the scale's top and its side away from the plot, on the chart's background inside a 1px border
+ * with a radius of 4, in 12px text. It takes no pointer, so the scale under it still drags. */
+[data-qc-theme] .qc-scale-unit {
+  position: absolute;
+  z-index: 4;
+  box-sizing: border-box;
+  display: flex;
+  min-width: 64px;
+  height: 26px;
+  align-items: center;
+  justify-content: center;
+  padding: 0 6px;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 12px;
+  white-space: nowrap;
+  color: var(--qc-text-primary);
+  background: var(--qcd-chart-background, var(--qc-canvas-background));
+  border: 1px solid var(--qc-overlay-separator);
+  border-radius: 4px;
+  pointer-events: none;
+}
+
+/* The plus beside the crosshair's price label is painted by the renderer with the label. Its button
+ * stands over the painted box, at the size the chart writes: transparent, and taking no pointer, so
+ * a pointer resting on the plus stays on the plot and keeps the crosshair. It carries the plus's
+ * name and takes the keyboard. The chrome gives every button its pointer back, so this rule names
+ * the chrome as well and outranks that one: a button that took the pointer here would take it off
+ * the plot, the crosshair and the plus with it, and give it back once the plus was gone. */
+[data-qc-theme] .qc-chrome .qc-scale-plus {
+  position: absolute;
+  z-index: 4;
+  box-sizing: border-box;
+  padding: 0;
+  background: none;
+  border: 0;
+  border-radius: 2px;
+  pointer-events: none;
+}
+
+/* The buttons at the top right of each pane, 4px below its top and 4px in from the plot's edge: 24px
+ * rounded squares 4px apart, a 1px border on the chart's background, a 15px line glyph in the text
+ * ink, the raised hover fill under the pointer. */
+[data-qc-theme] .qc-pane-buttons {
+  position: absolute;
+  z-index: 4;
+  display: flex;
+  gap: 4px;
+  pointer-events: auto;
+}
+
+[data-qc-theme] .qc-pane-button {
+  box-sizing: border-box;
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  color: var(--qc-text-primary);
+  background: var(--qcd-chart-background, var(--qc-canvas-background));
+  border: 1px solid var(--qc-overlay-separator);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+[data-qc-theme] .qc-pane-button:hover {
+  background: var(--qc-state-hover);
+}
+
+[data-qc-theme] .qc-pane-button[aria-pressed='true'] {
+  background: var(--qc-state-pressed);
+}
+
 /* The thin bar beside a list the viewer scrolls to find something: the search results, the
  * indicator list, the saved layouts, a menu's rows, a dialog's body. Five pixels wide with a 3px
  * thumb inside a transparent border, so it reads as a position marker rather than a control.
@@ -7005,12 +7234,16 @@
   font-size: var(--qc-text-fontSizeSmall);
 }
 
-/* Chart settings is a centered, two-column dialog: a fixed title and footer around a section rail
- * and one roomy settings page. */
-[data-qc-theme] .qc-chart-settings-dialog {
+/* The chart settings dialog: a 750px card, as tall as the page it shows up to the viewport less
+ * 40px, with the drawing dialogs' header and footer around a body of two columns: the rail of pages,
+ * 226px with a 206px list 20px in, and the page beside it, which scrolls on its own. The page is the
+ * drawing dialogs' settings grid; these rules add what the chart's settings rows carry beyond it:
+ * checkbox rows with a hint or a tip, sub-rows, second lines of controls, the sliders and the tips. */
+[data-qc-theme] .qc-dialog.qc-chart-settings-dialog {
   box-sizing: border-box;
-  height: min(612px, calc(100vh - 32px));
-  max-height: min(612px, calc(100vh - 32px));
+  min-width: min(610px, calc(100% - 16px));
+  max-width: min(750px, calc(100% - 16px));
+  max-height: calc(100% - 40px);
   color: var(--qc-text-primary);
   background: var(--qc-overlay-surface);
   border: 0;
@@ -7018,302 +7251,457 @@
   box-shadow: var(--qc-overlay-shadow);
 }
 
-[data-qc-theme] .qc-chart-settings-dialog .qc-dialog-title {
-  box-sizing: border-box;
-  min-height: 64px;
-  padding: 0 14px 0 19px;
-}
-
-[data-qc-theme] .qc-chart-settings-dialog .qc-dialog-title .qc-title {
-  font-size: 20px;
-  font-weight: 600;
-  line-height: 28px;
+/* The close: a 34px cell whose hover fill rounds 8px at the corners. */
+[data-qc-theme] .qc-chart-settings-dialog .qc-dialog-close {
+  border-radius: 8px;
 }
 
-[data-qc-theme] .qc-chart-settings-dialog .qc-dialog-close {
-  width: 40px;
-  height: 40px;
-  border: 0;
+[data-qc-theme] .qc-chart-settings-dialog .qc-dialog-close:hover {
+  background: var(--qc-state-hover);
 }
 
-[data-qc-theme] .qc-chart-settings-body {
+[data-qc-theme] .qc-chart-settings-dialog .qc-chart-settings-body {
   display: flex;
   flex: 1 1 auto;
   flex-direction: row;
-  gap: 0;
   min-height: 0;
   padding: 0;
   overflow: hidden;
 }
 
+/* The rail stands as tall as the page beside it and adds nothing to the body's height of its own, so
+ * a page shorter than the rail's tabs leaves the rail to scroll. */
 [data-qc-theme] .qc-chart-settings-nav {
   display: flex;
   flex: 0 0 226px;
   flex-direction: column;
-  gap: 2px;
   box-sizing: border-box;
-  padding: 10px;
-  border-inline-end: 1px solid var(--qc-overlay-separator);
+  width: 226px;
+  padding: 8px 0 8px 20px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  contain: size;
+  scrollbar-width: auto;
 }
 
+[data-qc-theme] .qc-chart-settings-nav::-webkit-scrollbar {
+  display: block;
+  width: 5px;
+}
+
+[data-qc-theme] .qc-chart-settings-nav::-webkit-scrollbar-thumb {
+  border: 1px solid transparent;
+  border-radius: 3px;
+  background-color: var(--qc-chrome-scrollThumb);
+  background-clip: content-box;
+}
+
+[data-qc-theme] .qc-chart-settings-nav::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+@supports (-moz-appearance: none) {
+  [data-qc-theme] .qc-chart-settings-nav {
+    scrollbar-width: thin;
+    scrollbar-color: var(--qc-chrome-scrollThumb) transparent;
+  }
+}
+
+/* A page's tab: 206 by 40 on an 8px corner, its 28px icon 12px in and its name 4px after it at 14 on
+ * 18. The page shown and the tab under the pointer take the quiet fill and the strong ink; the page
+ * shown is named in bold. */
 [data-qc-theme] .qc-chart-settings-nav-item {
   display: flex;
-  gap: 10px;
+  flex: 0 0 40px;
+  gap: 4px;
   align-items: center;
-  width: 100%;
-  min-height: 40px;
-  padding: 0 12px;
-  color: var(--qc-text-secondary);
+  box-sizing: border-box;
+  width: 206px;
+  height: 40px;
+  padding: 0 16px 0 12px;
+  color: var(--qc-text-primary);
   font: inherit;
   font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
   text-align: start;
   background: transparent;
   border: 0;
   border-radius: 8px;
+  outline-offset: -2px;
   cursor: pointer;
 }
 
 [data-qc-theme] .qc-chart-settings-nav-item:hover {
-  color: var(--qc-text-primary);
+  color: var(--qc-control-neutralInk);
   background: var(--qc-state-hover);
 }
 
 [data-qc-theme] .qc-chart-settings-nav-item[aria-selected='true'] {
-  color: var(--qc-text-primary);
+  color: var(--qc-control-neutralInk);
   font-weight: 600;
-  background: var(--qc-state-selected);
+  background: var(--qc-control-neutral);
 }
 
-[data-qc-theme] .qc-chart-settings-panel {
+[data-qc-theme] .qc-chart-settings-nav-icon {
   display: flex;
+  flex: 0 0 28px;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+}
+
+[data-qc-theme] .qc-chart-settings-nav-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The page: the settings grid 16px by 20px in, with 16px more under its last section. */
+[data-qc-theme] .qc-chart-settings-panel {
   flex: 1 1 auto;
-  flex-direction: column;
+  align-content: start;
   min-width: 0;
-  padding: 13px 20px 26px;
+  box-sizing: border-box;
+  padding: 16px 20px 32px;
+  overflow-x: hidden;
   overflow-y: auto;
   outline: none;
 }
 
-[data-qc-theme] .qc-chart-settings-panel > .qc-menu-heading {
-  min-height: auto;
-  margin: 0 0 8px;
-  padding: 0;
-  color: var(--qc-text-muted);
-  font-size: 11px;
+/* A section heading: 11px capitals in the caption ink in a 32px row, 16px clear of the section before. */
+[data-qc-theme] .qc-chart-settings-panel > .qc-settings-heading {
+  color: var(--qc-text-caption);
   font-weight: 400;
-  line-height: 24px;
-  letter-spacing: 0;
 }
 
-[data-qc-theme] .qc-settings-menu .qc-settings-row {
-  display: grid;
-  grid-template-columns: minmax(150px, 1fr) auto;
-  gap: 16px;
-  min-height: 44px;
-  padding: 0;
+[data-qc-theme] .qc-chart-settings-panel > .qc-settings-heading:not(:first-child) {
+  margin-top: 16px;
 }
 
-[data-qc-theme] .qc-settings-menu .qc-settings-row .qc-field-label {
-  color: var(--qc-text-secondary);
-  font-size: 14px;
+/* A checkbox row across both columns: the box, its words 8px after it, a tip 8px after the words,
+ * and a hint at 13 on 18 in the muted ink under the line, after which the next row stands 16px off. */
+[data-qc-theme] .qc-settings-check {
+  box-sizing: border-box;
+  min-height: 50px;
+  padding: 8px 0;
 }
 
-/* A color here keeps its swatch: a 38 by 34 box on the raised fill, its well 3px in from the edge on
- * a corner that follows the box's. The edge, its step under the pointer and the focus ring are the
- * field's own, and a well that cannot be used stands on the read-only fill as every field does. */
-[data-qc-theme] .qc-settings-menu .qc-settings-row .qc-drawing-swatch-button {
-  box-sizing: border-box;
-  width: 38px;
-  height: 34px;
-  padding: 3px;
+[data-qc-theme] .qc-settings-check-line {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  min-height: 34px;
 }
 
-[data-qc-theme] .qc-settings-menu .qc-settings-row .qc-drawing-swatch-button:enabled {
-  background: var(--qc-chrome-surfaceRaised);
+[data-qc-theme] .qc-settings-hint {
+  color: var(--qc-text-caption);
+  font-size: 13px;
+  line-height: 18px;
 }
 
-[data-qc-theme] .qc-settings-menu .qc-settings-row .qc-drawing-well {
-  width: 28px;
-  height: 26px;
-  border-radius: 4px;
+[data-qc-theme] .qc-settings-check[data-hint='true'],
+[data-qc-theme] .qc-settings-hint-row {
+  margin-bottom: 16px;
+}
+
+[data-qc-theme] .qc-settings-hint-row {
+  margin-top: -8px;
+}
+
+/* A labelled row: its label cell stands its words, or its checkbox, level with the first line of
+ * controls, and the controls' cell stacks its lines 8px apart. */
+[data-qc-theme] .qc-chart-settings-panel .qc-settings-label {
+  gap: 8px;
+  align-items: flex-start;
 }
 
-/* This dialog paints its switches as compact square checks before the label, and each keeps the
- * accessible switch role. */
-[data-qc-theme] .qc-settings-menu .qc-switch-row {
+[data-qc-theme] .qc-settings-label-text {
   display: flex;
-  flex-direction: row-reverse;
-  justify-content: flex-end;
-  gap: 10px;
-  min-height: 44px;
-  padding: 0;
-  color: var(--qc-text-secondary);
-  cursor: pointer;
+  align-items: center;
+  min-height: 34px;
 }
 
-[data-qc-theme] .qc-settings-menu .qc-switch {
-  width: 18px;
-  height: 18px;
-  box-sizing: border-box;
-  background: transparent;
-  border: 1px solid var(--qc-control-on);
-  border-radius: 3px;
+[data-qc-theme] .qc-chart-settings-panel .qc-settings-controls {
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-start;
 }
 
-[data-qc-theme] .qc-settings-menu .qc-switch:hover:not([disabled]) {
-  background: var(--qc-state-hover);
+[data-qc-theme] .qc-settings-line {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  min-height: 34px;
 }
 
-[data-qc-theme] .qc-settings-menu .qc-switch[aria-checked='true'] {
-  background: var(--qc-control-on);
+/* A sub-row stands its box 26px in, level with the words of the row above, and 8px closer to it. */
+[data-qc-theme] .qc-settings-check[data-indent='true'] {
+  margin-top: -8px;
+  padding-inline-start: 26px;
 }
 
-[data-qc-theme] .qc-settings-menu .qc-switch-knob {
-  position: absolute;
-  top: 3px;
-  inset-inline-start: 6px;
-  width: 5px;
-  height: 9px;
-  box-sizing: border-box;
-  background: transparent;
-  border: solid var(--qc-control-mark);
-  border-width: 0 2px 2px 0;
-  border-radius: 0;
-  opacity: 0;
-  transform: rotate(45deg);
-  transition: opacity var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
+[data-qc-theme] .qc-settings-row[data-indent='true'] > * {
+  margin-top: -8px;
 }
 
-[data-qc-theme] .qc-settings-menu .qc-switch[aria-checked='true'] .qc-switch-knob {
-  inset-inline-start: 6px;
-  opacity: 1;
+[data-qc-theme] .qc-chart-settings-panel .qc-settings-row[data-indent='true'] > .qc-settings-label {
+  padding-inline-start: 26px;
 }
 
-[data-qc-theme] .qc-chart-settings-choices {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  width: min(100%, 360px);
+/* A row that cannot be used stands its words back with its box. */
+[data-qc-theme] [data-disabled='true'] > * > .qc-drawing-toggle > span,
+[data-qc-theme] [data-disabled='true'] > * > .qc-settings-label-text {
+  opacity: 0.5;
 }
 
-[data-qc-theme] .qc-chart-settings-choice {
-  display: flex;
-  gap: 10px;
+[data-qc-theme] [data-disabled='true'] > * > .qc-drawing-toggle {
+  cursor: default;
+}
+
+/* A tip's mark: 18px in the tip ink, which steps up under the pointer. */
+[data-qc-theme] .qc-settings-tip {
+  display: inline-flex;
+  flex: 0 0 18px;
   align-items: center;
-  min-height: 40px;
-  padding: 0 8px;
-  color: var(--qc-text-secondary);
-  font: inherit;
-  text-align: start;
-  background: transparent;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  margin-block: 8px;
+  padding: 0;
+  color: var(--qc-control-tipMark);
+  background: none;
   border: 0;
-  border-radius: 6px;
+  border-radius: 50%;
   cursor: pointer;
+  transition: color var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
 }
 
-[data-qc-theme] .qc-chart-settings-choice:hover:not([disabled]) {
-  color: var(--qc-text-primary);
-  background: var(--qc-state-hover);
+[data-qc-theme] .qc-settings-tip:hover,
+[data-qc-theme] .qc-settings-tip[aria-expanded='true'] {
+  color: var(--qc-control-tipMarkHover);
 }
 
-[data-qc-theme] .qc-chart-settings-choice[disabled] {
-  color: var(--qc-text-disabled);
-  cursor: default;
+/* A tip's line: 13 on 18 on the tooltip fill, 4px above its mark, never taking the pointer. */
+[data-qc-theme] .qc-dialog-scrim > .qc-settings-tooltip {
+  position: fixed;
+  z-index: 10;
+  box-sizing: border-box;
+  max-width: 310px;
+  padding: 3px 8px;
+  color: var(--qc-overlay-tooltipInk);
+  font-size: 13px;
+  line-height: 18px;
+  background: var(--qc-overlay-tooltip);
+  border-radius: 2px;
+  pointer-events: none;
 }
 
-[data-qc-theme] .qc-chart-settings-radio {
-  position: relative;
-  flex: 0 0 auto;
+/* A tip's card: 352px on a 16px corner, 16px in, its title and its words at 16 on 24 and the link at
+ * 14 on 18. */
+[data-qc-theme] .qc-drawing-popover.qc-settings-card-popover {
   box-sizing: border-box;
-  width: 18px;
-  height: 18px;
-  border: 1px solid var(--qc-control-on);
-  border-radius: 50%;
+  width: 352px;
+  padding: 16px;
+  border-radius: 16px;
 }
 
-[data-qc-theme] .qc-chart-settings-choice[aria-checked='true'] .qc-chart-settings-radio::after {
-  content: '';
-  position: absolute;
-  inset: 4px;
-  background: var(--qc-control-on);
-  border-radius: 50%;
+[data-qc-theme] .qc-settings-card-title {
+  color: var(--qc-text-primary);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
 }
 
-[data-qc-theme] .qc-chart-settings-footer {
-  display: flex;
-  flex: 0 0 64px;
+[data-qc-theme] .qc-settings-card-body {
+  color: var(--qc-text-primary);
+  font-size: 16px;
+  line-height: 24px;
+}
+
+[data-qc-theme] .qc-settings-card-link {
+  display: inline-block;
+  margin-top: 8px;
+  color: var(--qc-text-link);
+  font-size: 14px;
+  line-height: 18px;
+  text-decoration: none;
+}
+
+/* A color that follows the bars shows the bars' two colors, the up color in the top corner. */
+[data-qc-theme] .qc-drawing-swatch-button[data-qc-follows='true'] .qc-drawing-well-fill {
+  background: linear-gradient(to bottom left, var(--qc-series-up) 50%, var(--qc-series-down) 50%);
+}
+
+/* A line's thickness on its own: a 34px field wearing a 14px bar of the width. */
+[data-qc-theme] .qc-drawing-select--mark.qc-settings-width {
+  width: 34px;
+}
+
+[data-qc-theme] .qc-settings-width > .qc-drawing-thickness-bar {
+  width: 14px;
+}
+
+/* A number field and its unit, 9px after it. */
+[data-qc-theme] .qc-settings-number {
+  display: inline-flex;
+  gap: 9px;
   align-items: center;
-  justify-content: space-between;
+}
+
+[data-qc-theme] .qc-settings-suffix {
+  color: var(--qc-text-primary);
+  font-size: 14px;
+  line-height: 18px;
+}
+
+/* The sliders. The opacity is a 148 by 10 track on a 5px corner that fades from nothing into its color
+ * over the checked ground, inside a 1px edge of the color; the volume is a 136 by 6 track after its
+ * 18px speaker, 8px apart, filled in the on ink up to its knob. Both knobs are the color popover's, a
+ * 12px dark disc with a 2px light rim. Black and white are the poles of the value axis, not theme
+ * roles. */
+[data-qc-theme] .qc-settings-slider {
+  --qcd-angle-0: 0deg;
+  --qcd-black: hsl(var(--qcd-angle-0) 0% 0%);
+  --qcd-white: hsl(var(--qcd-angle-0) 0% 100%);
+  --qcd-check-hue: 224deg;
+  --qcd-check: hsl(var(--qcd-check-hue) 15% 19% / 0.4);
+  --qcd-ground: var(--qcd-black);
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  min-height: 34px;
+}
+
+[data-qc-theme='light'] .qc-settings-slider {
+  --qcd-ground: var(--qcd-white);
+}
+
+[data-qc-theme] .qc-settings-speaker {
+  flex: 0 0 18px;
+  color: var(--qc-text-primary);
+}
+
+[data-qc-theme] .qc-settings-opacity,
+[data-qc-theme] .qc-settings-volume {
   box-sizing: border-box;
-  padding: 0 18px;
-  border-top: 1px solid var(--qc-overlay-separator);
+  margin: 0;
+  outline: none;
+  cursor: pointer;
+  appearance: none;
 }
 
-[data-qc-theme] .qc-chart-settings-actions {
-  display: flex;
-  gap: 10px;
+[data-qc-theme] .qc-settings-opacity {
+  flex: 0 0 148px;
+  width: 148px;
+  height: 10px;
+  background:
+    linear-gradient(to right, transparent, var(--qcd-swatch)),
+    repeating-conic-gradient(from 270deg, var(--qcd-check) 0% 25%, transparent 0% 50%) 1px 50% / 8px 8px,
+    var(--qcd-ground);
+  border: 1px solid var(--qcd-swatch);
+  border-radius: 5px;
 }
 
-[data-qc-theme] .qc-chart-settings-footer .qc-button {
-  min-width: 62px;
-  height: 34px;
-  padding: 0 11px;
-  font-size: 14px;
-  line-height: 22px;
+[data-qc-theme] .qc-settings-volume {
+  flex: 0 0 136px;
+  width: 136px;
+  height: 6px;
+  background: linear-gradient(to right, var(--qc-control-on) var(--qcd-level), var(--qc-state-pressed) var(--qcd-level));
+  border-radius: 5px;
 }
 
-[data-qc-theme] .qc-chart-settings-footer .qc-chart-settings-reset {
-  min-width: 0;
+[data-qc-theme][dir='rtl'] .qc-settings-opacity,
+[data-qc-theme] [dir='rtl'] .qc-settings-opacity {
+  background:
+    linear-gradient(to left, transparent, var(--qcd-swatch)),
+    repeating-conic-gradient(from 270deg, var(--qcd-check) 0% 25%, transparent 0% 50%) right 1px top 50% / 8px 8px,
+    var(--qcd-ground);
 }
 
-[data-qc-theme] .qc-chart-settings-cancel,
-[data-qc-theme] .qc-chart-settings-ok {
-  min-width: 62px;
+[data-qc-theme][dir='rtl'] .qc-settings-volume,
+[data-qc-theme] [dir='rtl'] .qc-settings-volume {
+  background: linear-gradient(to left, var(--qc-control-on) var(--qcd-level), var(--qc-state-pressed) var(--qcd-level));
 }
 
-[data-qc-theme] .qc-chart-settings-nav {
-  scrollbar-width: none;
+[data-qc-theme] .qc-settings-opacity::-webkit-slider-thumb,
+[data-qc-theme] .qc-settings-volume::-webkit-slider-thumb {
+  width: 12px;
+  height: 12px;
+  background: var(--qcd-black);
+  border: 2px solid var(--qcd-white);
+  border-radius: 50%;
+  box-shadow: var(--qc-overlay-shadow);
+  cursor: pointer;
+  appearance: none;
 }
 
-[data-qc-theme] .qc-chart-settings-nav::-webkit-scrollbar {
-  display: none;
+[data-qc-theme] .qc-settings-opacity::-moz-range-thumb,
+[data-qc-theme] .qc-settings-volume::-moz-range-thumb {
+  box-sizing: border-box;
+  width: 12px;
+  height: 12px;
+  background: var(--qcd-black);
+  border: 2px solid var(--qcd-white);
+  border-radius: 50%;
+  box-shadow: var(--qc-overlay-shadow);
+  cursor: pointer;
 }
 
+[data-qc-theme] .qc-settings-opacity:focus-visible,
+[data-qc-theme] .qc-settings-volume:focus-visible {
+  box-shadow: 0 0 0 2px var(--qc-state-focusRing);
+}
+
+[data-qc-theme] .qc-settings-slider[data-disabled='true'] > * {
+  opacity: 0.5;
+}
+
+[data-qc-theme] .qc-settings-slider[data-disabled='true'] > input {
+  cursor: default;
+}
+
+/* The footer keeps its height whatever the page above it holds. */
+[data-qc-theme] .qc-chart-settings-dialog > .qc-chart-settings-footer {
+  flex: 0 0 auto;
+}
+
+/* The footer's Template menu opens over its button, as wide as its words. */
+[data-qc-theme] .qc-chart-settings-template-menu {
+  min-width: 0;
+}
+
+/* A narrow layer stacks the rail over the page as a strip of tabs. */
 @media (max-width: 680px) {
-  [data-qc-theme] .qc-chart-settings-dialog {
+  [data-qc-theme] .qc-dialog.qc-chart-settings-dialog {
     width: calc(100% - 20px) !important;
-    height: calc(100vh - 20px);
+    min-width: 0;
     max-width: none;
-    max-height: none;
   }
 
-  [data-qc-theme] .qc-chart-settings-body {
+  [data-qc-theme] .qc-chart-settings-dialog .qc-chart-settings-body {
     flex-direction: column;
   }
 
   [data-qc-theme] .qc-chart-settings-nav {
     flex: 0 0 auto;
     flex-direction: row;
-    gap: 4px;
-    padding: 6px 10px 8px;
+    width: auto;
+    padding: 0 10px 8px;
     overflow-x: auto;
-    border-inline-end: 0;
-    border-bottom: 1px solid var(--qc-overlay-separator);
+    overflow-y: hidden;
+    contain: none;
   }
 
   [data-qc-theme] .qc-chart-settings-nav-item {
+    flex: 0 0 auto;
     width: auto;
-    min-width: max-content;
-    min-height: 36px;
-    padding: 0 10px;
   }
 
   [data-qc-theme] .qc-chart-settings-panel {
-    padding: 13px 16px 20px;
-  }
-
-  [data-qc-theme] .qc-chart-settings-footer {
-    padding: 0 12px;
+    padding: 16px;
   }
 }