/* * Global styles for the TPI rich text editor's portaled UI. * * The advanced color picker popup (and its host) live outside the Blazor * component's scoped CSS context — they're reparented to so they can * escape the Radzen layout body's `transform: translateZ(0)` + `overflow: auto` * containing block (which would otherwise clip the popup at the body's right * edge, making it look like the device-preview sidebar overlaps it). Once the * popup is outside the component scope, the `::deep` selectors in * TPIRichTextEditor.razor.css no longer match it, so the popup styling has to * live in this global file. */ .tpi-color-popup-portal { position: fixed; z-index: 1100; box-sizing: border-box; width: 360px; padding: 16px; background: white; border: 1px solid #d1d5db; border-radius: 6px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12); color: #1f2937; user-select: none; } .tpi-color-popup-portal * { box-sizing: border-box; } .tpi-color-popup { display: flex; flex-direction: column; gap: 10px; width: 100%; } .tpi-color-sat { position: relative; width: 100%; height: 150px; border-radius: 4px; overflow: hidden; cursor: crosshair; background-color: #ff0000; } .tpi-color-sat-white { position: absolute; inset: 0; background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%); pointer-events: none; } .tpi-color-sat-black { position: absolute; inset: 0; background: linear-gradient(to top, #000000 0%, rgba(0, 0, 0, 0) 100%); pointer-events: none; } .tpi-color-sat-cursor { position: absolute; width: 12px; height: 12px; margin-left: -6px; margin-top: -6px; border: 2px solid #ffffff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); pointer-events: none; background: transparent; } .tpi-color-hue { position: relative; width: 100%; height: 12px; border-radius: 6px; cursor: pointer; background: linear-gradient( to right, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100% ); } .tpi-color-hue-cursor, .tpi-color-alpha-cursor { position: absolute; top: -2px; width: 8px; height: 16px; margin-left: -4px; border: 2px solid #ffffff; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); pointer-events: none; background: transparent; } .tpi-color-alpha { position: relative; width: 100%; height: 12px; border-radius: 6px; overflow: hidden; cursor: pointer; } .tpi-color-alpha-checker { position: absolute; inset: 0; background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%), linear-gradient(-45deg, #cccccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #cccccc 75%), linear-gradient(-45deg, transparent 75%, #cccccc 75%); background-size: 8px 8px; background-position: 0 0, 0 4px, 4px -4px, -4px 0; pointer-events: none; } .tpi-color-alpha-gradient { position: absolute; inset: 0; pointer-events: none; } .tpi-color-inputs { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 6px; } .tpi-color-input { display: flex; flex-direction: column; align-items: center; gap: 2px; } /* Hue + alpha share a row with the current-color preview swatch on the right (TPID-3715). */ .tpi-color-sliders-row { display: flex; flex-direction: row; align-items: stretch; gap: 10px; } .tpi-color-sliders-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; } /* Square preview the same height as hue + gap + alpha so it visually anchors the sliders row. Checker pattern shows through whenever alpha < 100. */ .tpi-color-preview { position: relative; flex: 0 0 auto; width: 34px; align-self: stretch; border: 1px solid #d1d5db; border-radius: 4px; overflow: hidden; background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%), linear-gradient(-45deg, #cccccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #cccccc 75%), linear-gradient(-45deg, transparent 75%, #cccccc 75%); background-size: 8px 8px; background-position: 0 0, 0 4px, 4px -4px, -4px 0; } .tpi-color-preview-fill { position: absolute; inset: 0; } .tpi-color-input input { width: 100%; text-align: center; padding: 5px 4px; font-size: 12px; border: 1px solid #d1d5db; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: white; color: #1f2937; line-height: 1.2; } .tpi-color-input input:focus { outline: none; border-color: #1151f3; } .tpi-color-input label { font-size: 10px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; user-select: none; } .tpi-color-presets { display: flex; flex-direction: column; gap: 4px; } .tpi-color-preset-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; } .tpi-color-preset { width: 100%; aspect-ratio: 1 / 1; padding: 0; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 3px; cursor: pointer; transition: transform 0.08s ease-in-out; } .tpi-color-preset:hover { transform: scale(1.08); border-color: rgba(0, 0, 0, 0.5); } .tpi-color-preset:focus { outline: 2px solid #1151f3; outline-offset: 1px; } .tpi-color-ok-row { display: flex; /* Default button sits on the left, OK on the right (TPID-3715 follow-up). */ justify-content: space-between; align-items: center; width: 100%; /* Row height is fixed so the buttons are vertically centred between the presets above and the popup's bottom padding — keeps top/bottom spacing visually balanced. */ min-height: 40px; padding: 0; margin: 0; } /* Secondary "Default" button — outlined to read as a reset action distinct from OK. Same padding/height as OK so the row balances vertically. The Bootstrap/Radzen button reset would otherwise wash out the background; force the palette to win. */ .tpi-color-popup .tpi-color-default, .tpi-color-popup .tpi-color-default:focus, .tpi-color-popup .tpi-color-default:focus-visible { margin: 0 !important; padding: 6px 14px !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; font-size: 13px; font-weight: 500; line-height: 1; background-color: #ffffff !important; background-image: none !important; color: #1f2937 !important; border: 1px solid #d1d5db !important; border-radius: 4px; cursor: pointer; -webkit-appearance: none; appearance: none; box-shadow: none; outline: none; } .tpi-color-popup .tpi-color-default:hover { background-color: #f3f4f6 !important; border-color: #9ca3af !important; } .tpi-color-popup .tpi-color-default:active { background-color: #e5e7eb !important; border-color: #6b7280 !important; } /* The button reset from Bootstrap/Radzen sets `background: transparent` on bare buttons, which beat our previous declaration on specificity and made OK render white. Force the final palette + appearance reset so the button keeps its solid black look in every state. */ .tpi-color-popup .tpi-color-ok, .tpi-color-popup .tpi-color-ok:focus, .tpi-color-popup .tpi-color-ok:focus-visible { margin: 0 !important; padding: 6px 20px !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; font-size: 13px; font-weight: 500; line-height: 1; background-color: #000000 !important; background-image: none !important; color: #ffffff !important; border: 1px solid #000000 !important; border-radius: 4px; cursor: pointer; -webkit-appearance: none; appearance: none; box-shadow: none; outline: none; } .tpi-color-popup .tpi-color-ok:hover { background-color: #1f1f1f !important; border-color: #1f1f1f !important; } .tpi-color-popup .tpi-color-ok:active { background-color: #000000 !important; border-color: #000000 !important; }