/* ========================================================================== Don's Tools - shared tool UI One stylesheet for the options area, controls and action row of every tool card. Loaded last in on every page, so it settles the layout that the pages' own inlined CSS would otherwise each decide for themselves. Structure it expects: .toolbox--wrap the card .tool-options wrapping row of controls .field one control .field-label fixed-height caption, never wraps .field-control fixed-height slot, control centred inside .field-group two or more related .field, visibly grouped .tool-actions the action row ========================================================================== */ :root { --control-h: 44px; --control-r: 10px; --control-fs: 15px; --label-h: 20px; --label-fs: 14px; --field-gap: 20px; --swatch: 22px; --ctl-bg: #ffffff; --ctl-bd: #c9ced4; --ctl-bd-soft: #e3e6ea; --ctl-fg: #1f2933; --ctl-muted: #5f6b7a; --ctl-accent: #4a7c0f; --ctl-accent-soft: #f2f8e6; --ctl-group-bg: #f7f8fa; --ctl-focus: #aef13c; } html.dark, :root[data-theme="dark"] { --ctl-bg: #1c2229; --ctl-bd: #3a444f; --ctl-bd-soft: #2a333d; --ctl-fg: #e6ebf1; --ctl-muted: #a3b0be; --ctl-accent: #aef13c; --ctl-accent-soft: #223016; --ctl-group-bg: #1a1f26; } /* ---------------------------------------------------------------- options */ .toolbox--wrap .tool-options { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: var(--field-gap) 28px; max-width: 100%; margin-inline: auto; } /* ------------------------------------------------------------------ field */ .toolbox--wrap .field { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; flex: 0 0 auto; gap: 6px; min-width: 0; } .toolbox--wrap .field-label, .toolbox--wrap .field > label, .toolbox--wrap .field > .lab, .toolbox--wrap .field > .rowlab, .toolbox--wrap .field-label.rowlab { display: flex; align-items: flex-end; justify-content: center; height: var(--label-h) !important; min-height: var(--label-h); max-height: var(--label-h); margin: 0; padding: 0; font-family: inherit; font-size: var(--label-fs); font-weight: 600; line-height: var(--label-h); letter-spacing: normal; text-transform: none; text-align: center; white-space: nowrap; color: var(--ctl-fg); } .toolbox--wrap .field-control { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--control-h); } /* ------------------------------------------------------------ the control */ .toolbox--wrap .field-control > select, .toolbox--wrap .field-control > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), .toolbox--wrap .field-control > textarea { height: var(--control-h); min-height: var(--control-h); padding: 0 12px; border: 1px solid var(--ctl-bd); border-radius: var(--control-r); background: var(--ctl-bg); color: var(--ctl-fg); font-family: inherit; font-size: var(--control-fs); line-height: normal; box-shadow: none; } .toolbox--wrap .field-control > select { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6b7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px 16px; } html.dark .toolbox--wrap .field-control > select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3b0be' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } .toolbox--wrap .field-control > select:focus-visible, .toolbox--wrap .field-control > input:focus-visible { outline: 2px solid var(--ctl-focus); outline-offset: 1px; } /* --------------------------------------------------- input with a unit --- The unit lives inside the same bordered box as the input, never as a loose text node beside it. */ .toolbox--wrap .input-unit { display: inline-flex; align-items: center; height: var(--control-h); padding-right: 12px; border: 1px solid var(--ctl-bd); border-radius: var(--control-r); background: var(--ctl-bg); overflow: hidden; } .toolbox--wrap .input-unit > input { height: calc(var(--control-h) - 2px); min-height: 0; border: 0 !important; border-radius: 0; background: none; padding: 0 8px 0 12px; font-family: inherit; font-size: var(--control-fs); color: var(--ctl-fg); box-shadow: none; outline: none; } .toolbox--wrap .input-unit > .unit { flex: none; font-size: 13px; font-weight: 600; color: var(--ctl-muted); white-space: nowrap; } .toolbox--wrap .input-unit:focus-within { outline: 2px solid var(--ctl-focus); outline-offset: 1px; } /* --------------------------------------------------------------- slider -- The readout sits in a fixed-width cell so 9% -> 100% does not shift the row. */ .toolbox--wrap .slider { display: inline-flex; align-items: center; gap: 10px; height: var(--control-h); } .toolbox--wrap .slider > input[type="range"] { width: 150px; height: var(--control-h); margin: 0; accent-color: var(--ctl-accent); } .toolbox--wrap .slider > .slider-value { flex: none; width: 4ch; text-align: left; font-size: 13px; font-weight: 700; color: var(--ctl-muted); font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------ segmented -- */ .toolbox--wrap .field-control > .seg, .toolbox--wrap .segmented { display: inline-flex; align-items: stretch; /* size to the buttons, never clip them */ width: max-content; max-width: 100%; overflow: visible !important; flex-wrap: wrap; height: auto; min-height: var(--control-h); border: 1px solid var(--ctl-bd); border-radius: var(--control-r); background: var(--ctl-group-bg); box-shadow: none; } .toolbox--wrap .field-control > .seg > button, .toolbox--wrap .segmented > button { min-height: calc(var(--control-h) - 2px); padding: 0 14px; border: 0; border-radius: 0; background: none; font-family: inherit; font-size: var(--control-fs); font-weight: 600; color: var(--ctl-muted); cursor: pointer; } .toolbox--wrap .field-control > .seg > button:first-child{border-radius:calc(var(--control-r) - 1px) 0 0 calc(var(--control-r) - 1px)} .toolbox--wrap .field-control > .seg > button:last-child{border-radius:0 calc(var(--control-r) - 1px) calc(var(--control-r) - 1px) 0} .toolbox--wrap .field-control > .seg > button.on, .toolbox--wrap .segmented > button.on, .toolbox--wrap .field-control > .seg > button[aria-pressed="true"] { background: var(--ctl-bg); color: var(--ctl-accent); box-shadow: inset 0 0 0 1px var(--ctl-bd-soft); } /* ------------------------------------- checkbox and colour: same geometry -- Both are 22px inside a 44x44 hit area, with the same border, so a checkbox and a colour swatch sitting next to each other look like siblings. */ .toolbox--wrap .check, .toolbox--wrap .color-swatch { display: inline-flex; align-items: center; justify-content: center; width: var(--control-h); height: var(--control-h); flex: none; cursor: pointer; } .toolbox--wrap .check > input[type="checkbox"], .toolbox--wrap .check > input[type="radio"] { /* page stylesheets size these themselves; the whole point here is that a checkbox and a colour swatch end up identical, so this wins outright */ width: var(--swatch) !important; min-width: var(--swatch) !important; max-width: var(--swatch) !important; height: var(--swatch) !important; min-height: 0 !important; max-height: var(--swatch) !important; box-sizing: border-box; margin: 0 !important; accent-color: var(--ctl-accent); cursor: pointer; } .toolbox--wrap .color-swatch > input[type="color"] { width: var(--swatch) !important; min-width: var(--swatch) !important; max-width: var(--swatch) !important; height: var(--swatch) !important; min-height: 0 !important; max-height: var(--swatch) !important; box-sizing: border-box; margin: 0 !important; padding: 0; border: 1px solid var(--ctl-bd); border-radius: 6px; background: none; cursor: pointer; appearance: none; -webkit-appearance: none; } .toolbox--wrap .color-swatch > input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } .toolbox--wrap .color-swatch > input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 5px; } .toolbox--wrap .color-swatch > input[type="color"]::-moz-color-swatch { border: 0; border-radius: 5px; } /* Checkbox lists - - are a good pattern in their own right and stay outside the .field system, but they still get the same box size and the same 44px touch target. */ .toolbox--wrap label > input[type="checkbox"], .toolbox--wrap label > input[type="radio"], .toolbox--wrap label > .check > input { width: var(--swatch) !important; height: var(--swatch) !important; min-height: 0 !important; box-sizing: border-box; accent-color: var(--ctl-accent); vertical-align: middle; } .toolbox--wrap label:not(.field-label):has(> input[type="checkbox"]), .toolbox--wrap label:not(.field-label):has(> input[type="radio"]), .toolbox--wrap label:not(.field-label):has(> .check) { display: inline-flex; align-items: center; gap: 8px; min-height: var(--control-h); font-size: var(--control-fs); cursor: pointer; } /* ------------------------------------------------------------ field group -- Related controls read as one thing. */ .toolbox--wrap .field-group { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 16px 22px; padding: 12px 18px 14px; border: 1px solid var(--ctl-bd-soft); border-radius: 14px; background: var(--ctl-group-bg); } .toolbox--wrap .field-group > .field-group-caption { flex-basis: 100%; margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: center; color: var(--ctl-muted); } /* --------------------------------------------------- dependent controls -- Inactive but still in the layout, so nothing jumps when it switches on. */ /* a dependent field that is off keeps its place in the row, so nothing jumps when it switches on - driven by the control's own disabled state, no JS */ .toolbox--wrap .field:has(> .field-control > :disabled), .toolbox--wrap .field:has(> .field-control > .input-unit > :disabled), .toolbox--wrap .field:has(> .field-control > .slider > :disabled), .toolbox--wrap .field[aria-disabled="true"], .toolbox--wrap .field.is-inactive { opacity: .45; pointer-events: none; } /* ------------------------------------------------------------- actions --- */ .toolbox--wrap .tool-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 14px; margin-top: 24px; } .toolbox--wrap .tool-actions > .tool-actions-primary { flex-basis: 100%; display: flex; justify-content: center; } .toolbox--wrap .tool-actions > .tool-actions-left { margin-right: auto; display: flex; gap: 10px; flex-wrap: wrap; } .toolbox--wrap .tool-actions > .tool-actions-right { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; } /* action row ordering: primary alone on the first line, downloads left, destructive right - driven by classes so no wrapper divs are inserted */ .toolbox--wrap .tool-actions > .is-primary{order:0;flex-basis:100%;justify-self:center;margin-inline:auto} .toolbox--wrap .tool-actions > .is-download{order:1;margin-right:auto} .toolbox--wrap .tool-actions > .is-download ~ .is-download{margin-right:0} .toolbox--wrap .tool-actions > .is-destructive{order:2;margin-left:auto} .toolbox--wrap .tool-actions > .hint,.toolbox--wrap .tool-actions > .counter{order:3;flex-basis:100%} .toolbox--wrap .hint { flex-basis: 100%; margin: 0; text-align: center; font-size: 15px; color: var(--ctl-muted); background: none; border: 0; padding: 0; } .toolbox--wrap .counter { font-size: 13px; font-weight: 700; color: var(--ctl-muted); font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------ empty state -- A status, progress or result element with nothing in it must not paint. Scoped to these classes so decorative empty elements (chart bars, colour swatches, ruled lines) are untouched. */ .toolbox--wrap .out:empty, .toolbox--wrap .outbox:empty, .toolbox--wrap .status:empty, .toolbox--wrap .statusline:empty, .toolbox--wrap .result:empty, .toolbox--wrap .results:empty, .toolbox--wrap .result-card:empty, .toolbox--wrap .warn:empty, .toolbox--wrap .warn-box:empty, .toolbox--wrap .msg:empty, .toolbox--wrap .note:empty, .toolbox--wrap .prog:empty, .toolbox--wrap .progress:empty, .toolbox--wrap .counter:empty, .toolbox--wrap .hint:empty { display: none !important; } /* -------------------------------------------------------------- responsive */ @media (max-width: 640px) { .toolbox--wrap .tool-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; } .toolbox--wrap .field { width: 100%; } .toolbox--wrap .field-control { width: 100%; } .toolbox--wrap .field-control > select, .toolbox--wrap .field-control > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), .toolbox--wrap .input-unit { width: 100%; } /* wide controls take the full row */ .toolbox--wrap .field:has(> .field-control > .seg), .toolbox--wrap .field:has(> .field-control > .slider), .toolbox--wrap .field:has(> .field-control > textarea), .toolbox--wrap .field-group { grid-column: 1 / -1; } .toolbox--wrap .slider > input[type="range"] { width: 100%; } /* a segmented group may wrap onto more rows rather than squeeze its labels */ .toolbox--wrap .field-control > .seg { flex-direction: row !important; flex-wrap: wrap; height: auto; max-width: 100%; } .toolbox--wrap .field-control > .seg > button { flex: 0 1 auto !important; min-width: 0; min-height: var(--control-h); padding: 0 12px; white-space: nowrap; } .toolbox--wrap .field-control { width: 100%; flex-wrap: wrap; } .toolbox--wrap .tool-actions > .tool-actions-left, .toolbox--wrap .tool-actions > .tool-actions-right { margin: 0; flex-basis: 100%; justify-content: center; } }