/* ============================================================================ notes-colour.css — the shared colour picker v2.38.0 ============================================================================ THE PALETTE IS LITERAL ON PURPOSE. This card is appended to so it can escape the notes panel's overflow clipping and Studio's transformed ancestors — which means it has LEFT the subtree where --ntp-* is declared. `background: var(--ntp-bg)` would resolve to nothing there and paint the card transparent over a playing sermon. Same trap as the studio layout box and the notes confirm dialog; same fix: own colours, both themes, no var() chain through --color-bg / --cn-bg (the theme remaps those to a 0.72-alpha glass). ==========================================================================*/ .eos-clr { --c-bg: #FFFFFF; --c-fg: #191917; --c-fg2: #6B6B68; --c-muted: #9A9A95; --c-border: #E5E5E5; --c-soft: #F4F4F2; --c-gold: #7E560F; --c-shadow: 0 18px 46px rgba(20, 18, 12, .30); position: fixed; z-index: 10060; display: none; width: 244px; padding: 12px; background: var(--c-bg); color: var(--c-fg); border: 1px solid var(--c-border); border-radius: 14px; box-shadow: var(--c-shadow); font-family: var(--font-body, 'Figtree', system-ui, sans-serif); font-size: 12.5px; line-height: 1.45; -webkit-user-select: none; user-select: none; } .eos-clr.is-open { display: block; } [data-theme="dark"] .eos-clr { --c-bg: #1F1F1E; --c-fg: #F5F5F3; --c-fg2: #B4B4AE; --c-muted: #86868092; --c-border: #3A3A38; --c-soft: #2A2A28; --c-gold: #EDB94F; --c-shadow: 0 18px 46px rgba(0, 0, 0, .62); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .eos-clr { --c-bg: #1F1F1E; --c-fg: #F5F5F3; --c-fg2: #B4B4AE; --c-muted: #868680; --c-border: #3A3A38; --c-soft: #2A2A28; --c-gold: #EDB94F; --c-shadow: 0 18px 46px rgba(0, 0, 0, .62); } } /* header */ .eos-clr-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; margin-bottom: 10px; } .eos-clr-x { margin-left: auto; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--c-border); background: var(--c-soft); color: var(--c-fg); border-radius: 8px; cursor: pointer; font-size: 17px; line-height: 1; padding: 0; } .eos-clr-x:hover { background: var(--c-border); } /* the spectrum */ .eos-clr-sv { position: relative; height: 122px; border-radius: 10px; cursor: crosshair; touch-action: none; overflow: hidden; border: 1px solid rgba(0,0,0,.10); } .eos-clr-sv > i { position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.45); transform: translate(-50%, -50%); pointer-events: none; } .eos-clr-hue { position: relative; height: 14px; margin-top: 10px; border-radius: 999px; cursor: pointer; touch-action: none; background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); } .eos-clr-hue > i { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 1px solid rgba(0,0,0,.3); box-shadow: 0 1px 4px rgba(0,0,0,.35); transform: translate(-50%, -50%); pointer-events: none; } .eos-clr-sv:focus-visible, .eos-clr-hue:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; } /* strength (highlights only) */ .eos-clr-a { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 11px; font-weight: 600; color: var(--c-fg2); } .eos-clr-a input[type="range"] { flex: 1; min-width: 0; accent-color: var(--c-gold); cursor: pointer; } .eos-clr-a span { min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; } /* hex row */ .eos-clr-row { display: flex; align-items: center; gap: 7px; margin-top: 11px; } .eos-clr-prev { width: 30px; height: 30px; flex: none; border-radius: 9px; border: 1px solid rgba(0,0,0,.16); } .eos-clr-hex { flex: 1; min-width: 0; height: 30px; border: 1px solid var(--c-border); border-radius: 9px; background: var(--c-bg); color: var(--c-fg); font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; text-transform: uppercase; padding: 0 8px; -webkit-user-select: text; user-select: text; } .eos-clr-hex:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 1px; } .eos-clr-ico { width: 30px; height: 30px; flex: none; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--c-border); background: transparent; color: var(--c-fg2); border-radius: 9px; cursor: pointer; } .eos-clr-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .eos-clr-ico:hover { background: var(--c-soft); color: var(--c-fg); } .eos-clr-ico.is-on { color: var(--c-gold); border-color: var(--c-gold); } .eos-clr-ico.is-on svg { fill: currentColor; } .eos-clr-ico:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; } /* swatch rows */ .eos-clr-lab { font-size: 9.5px; letter-spacing: .6px; font-weight: 700; color: var(--c-muted); margin: 12px 0 6px; } .eos-clr-sw { display: flex; flex-wrap: wrap; gap: 6px; } .eos-clr-chip { width: 24px; height: 24px; padding: 0; border-radius: 7px; border: 1px solid rgba(0,0,0,.14); cursor: pointer; } .eos-clr-chip:hover { transform: scale(1.08); } .eos-clr-chip:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; } [data-theme="dark"] .eos-clr-chip { border-color: rgba(255,255,255,.20); } .eos-clr-none { font-size: 11px; color: var(--c-muted); } .eos-clr-clear { width: 100%; margin-top: 12px; padding: 8px 0; border: 1px solid var(--c-border); background: transparent; color: var(--c-fg2); border-radius: 9px; font: inherit; font-size: 12px; cursor: pointer; } .eos-clr-clear:hover { background: var(--c-soft); color: var(--c-fg); } @media (pointer: coarse) { .eos-clr { width: 262px; } .eos-clr-chip { width: 30px; height: 30px; } .eos-clr-sv { height: 140px; } .eos-clr-hue { height: 18px; } } @media (prefers-reduced-motion: reduce) { .eos-clr-chip:hover { transform: none; } } /* ============================================================================ The colour section inside the tools ("Search tools") menu. ============================================================================ The More menu MOVES the real #eos-ntp-fg-row node into itself, and the menu lays its children out as full-width rows - so the 26px swatches were stretched into wide colour BARS, which is what the owner reported. They are chips everywhere else and must be chips here too. The last item in the row opens the shared picker, so "all colours" is reachable from the menu exactly as it is from the toolbar. */ .eos-ntp-menu #eos-ntp-fg-row, .eos-ntp-menu #eos-ntp-hi-row { display: flex !important; flex-wrap: wrap; align-items: center; gap: 7px; width: auto !important; padding: 4px 12px 10px !important; background: none !important; } .eos-ntp-menu #eos-ntp-fg-row .eos-ntp-sw, .eos-ntp-menu #eos-ntp-hi-row .eos-ntp-sw { width: 26px !important; height: 26px !important; flex: 0 0 auto !important; border-radius: 8px !important; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; } /* The "all colours" entry: an icon-only chip in the toolbar popover, a labelled row in the menu where there is width for words. */ .eos-ntp-more-clr { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; } .eos-ntp-more-clr .mi { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .eos-ntp-more-clr .lbl { display: none; } .eos-ntp-menu .eos-ntp-more-clr { width: auto !important; padding: 0 11px !important; height: 26px; border-radius: 999px; border: 1px solid var(--ntp-border, #E5E5E5) !important; background: transparent !important; color: var(--ntp-fg, #191917); font: inherit; font-size: 11.5px; font-weight: 600; } .eos-ntp-menu .eos-ntp-more-clr .lbl { display: inline; } .eos-ntp-menu .eos-ntp-more-clr:hover { background: var(--ntp-amber-glow, rgba(169,118,31,.14)) !important; color: var(--ntp-amber-txt, #7E560F); border-color: var(--ntp-amber-txt, #7E560F) !important; }