/* ───────────────────────────────────────────────────────────────────────── Color Type Selector — reusable dropdown palette picker UI faithfully replicated from the ColorSelector070826 prototype. All classes are namespaced with `cts-` so they never collide with the Dialog Editor's own .field/.panel/.chip/.strip/.legend/.sw2 styles. The panel is portaled to and positioned via JS (position:fixed), so it is never clipped by a scrolling modal. ───────────────────────────────────────────────────────────────────────── */ .cts-field { display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: 34px; /* color_field_border_color config (category 'field display') — the global config stylesheet defines --cfg-color-field-border-color on :root. */ border: 1px solid var(--cfg-color-field-border-color, #d4d4d4); border-radius: 6px; background: #fff; cursor: pointer; font-size: 13px; user-select: none; font-family: 'Segoe UI', system-ui, sans-serif; /* As a flex/grid item the field would otherwise refuse to shrink below its min-content width and overflow a narrow column (see .color-row in the icon editor). */ min-width: 0; } .cts-field:hover { border-color: #a3a3a3; } /* The swatch sits inside a checkerboard wrapper. For an alpha colour, refresh() paints the inner .cts-sw as a half/half gradient — opaque colour on the left, the same colour at its real alpha on the right — so the checkerboard only shows through the right half. That keeps both facts visible: which colour it is, and how transparent it is. */ .cts-field .cts-swwrap { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,0,0,.12); flex: none; position: relative; overflow: hidden; background-color: #fff; background-image: linear-gradient(45deg, #c8c8c8 25%, transparent 25%, transparent 75%, #c8c8c8 75%), linear-gradient(45deg, #c8c8c8 25%, transparent 25%, transparent 75%, #c8c8c8 75%); background-size: 6px 6px; background-position: 0 0, 3px 3px; } .cts-field .cts-swwrap .cts-sw { position: absolute; inset: 0; width: auto; height: auto; border: 0; border-radius: 0; } .cts-field .cts-sw { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,0,0,.12); flex: none; } /* min-width:0 is what actually lets the ellipsis happen — a flex item defaults to min-width:auto, so without it the name pushes the field wider instead of truncating. */ .cts-field .cts-nm { flex: 1; min-width: 0; color: #171717; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cts-field .cts-cv { color: #737373; font-size: 11px; } .cts-field .cts-chev { color: #737373; } .cts-panel { position: fixed; width: 360px; max-width: calc(100vw - 16px); background: #fff; border: 1px solid #d4d4d4; border-radius: 8px; box-shadow: 0 12px 34px rgba(0,0,0,.18); z-index: 100000; padding: 12px; font-family: 'Segoe UI', system-ui, sans-serif; display: none; } .cts-panel.cts-open { display: block; } .cts-base { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .cts-chip { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border: 1px solid var(--cfg-color-field-border-color, #d4d4d4); border-radius: 6px; background: #fff; cursor: pointer; font-size: 12px; font-weight: 600; color: #404040; font-family: inherit; } .cts-chip:hover { border-color: #a3a3a3; } .cts-chip.cts-sel { outline: 2px solid #2563eb; outline-offset: 1px; } .cts-chip .cts-sw { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,0,0,.12); flex: none; } .cts-basediv { height: 1px; background: #eef1f4; margin: 0 -12px 10px; } .cts-legend { display: grid; grid-template-columns: 44px repeat(10, 1fr); gap: 3px; margin-bottom: 4px; } .cts-legend span { font-size: 9px; color: #737373; text-align: center; } .cts-strip { display: grid; grid-template-columns: 44px repeat(10, 1fr); gap: 3px; align-items: center; margin-bottom: 3px; } .cts-strip .cts-flabel { font-size: 11px; font-weight: 600; color: #404040; text-transform: capitalize; } .cts-sw2 { aspect-ratio: 1; border-radius: 4px; border: 1px solid rgba(0,0,0,.10); cursor: pointer; position: relative; } .cts-sw2:hover { outline: 2px solid rgba(0,0,0,.25); outline-offset: 1px; z-index: 2; } .cts-sw2.cts-sel { outline: 2px solid #2563eb; outline-offset: 1px; z-index: 3; } /* "Current" — the value already saved on this field, kept after the palette */ .cts-current { margin-top: 10px; padding-top: 10px; border-top: 1px solid #eef1f4; } .cts-current .cts-clabel { font-size: 9px; color: #737373; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; } /* Opacity slider — rendered only for fields that opted in with data-cts-alpha */ .cts-alpha { margin-top: 10px; padding-top: 10px; border-top: 1px solid #eef1f4; display: flex; align-items: center; gap: 10px; } .cts-alpha .cts-clabel { font-size: 9px; color: #737373; text-transform: uppercase; letter-spacing: .04em; flex: none; } .cts-alpha input[type="range"] { flex: 1; margin: 0; cursor: pointer; } .cts-alpha .cts-apct { font-size: 11px; color: #737373; min-width: 34px; text-align: right; }