/* * Trix toolbar override — replaces the default black SVG button icons * with CSS mask-image so the icons inherit `currentColor` from the * surrounding text. This is the only way to make the toolbar visible * in dark mode without monkey-patching the Trix npm bundle. * * Ported verbatim from Stejar (Eventya's internal gem) — same SVGs, * same mask technique. Recoloured for Clarity's slate + teal palette. * * Also tightens up the toolbar layout: removes the boxed buttons, * uses an 8px hover background, and gives the active button the * brand teal background. */ trix-toolbar { inset-block-start: 0; inline-size: 100%; } trix-toolbar .trix-button-row { background-color: transparent; border-bottom: 1px solid rgba(148, 163, 184, 0.2); /* slate-400/20 */ column-gap: 2px; row-gap: 2px; padding: 0.5rem 0.75rem 0.375rem; display: flex; flex-wrap: nowrap; align-items: center; overflow-x: auto; scrollbar-width: none; } trix-toolbar .trix-button-row::-webkit-scrollbar { display: none; } trix-toolbar .trix-button-group { border: 0 !important; column-gap: 2px; margin: 0 !important; flex-shrink: 0; display: inline-flex; flex-wrap: nowrap; align-items: center; } trix-toolbar .trix-button-group + .trix-button-group::before { content: ""; width: 1px; height: 20px; background: rgba(148, 163, 184, 0.3); /* slate-400/30 */ margin: 0 6px; flex-shrink: 0; } trix-toolbar .trix-button { background-color: transparent; border: 0 !important; border-radius: 8px; color: #475569; /* slate-600 — light mode default */ padding: 5px; width: 30px; height: 30px; min-width: 30px; transition: background-color 0.15s ease, color 0.15s ease; } trix-toolbar .trix-button:hover { background-color: rgba(15, 23, 42, 0.06); /* slate-900/6 */ color: #264D4A; /* clarity teal */ } trix-toolbar .trix-button.trix-active { background-color: rgba(38, 77, 74, 0.12); /* clarity teal/12 */ color: #264D4A; } /* Dark-mode color overrides — Clarity sets a `dark` class on via the theme Stimulus controller. */ :where(.dark) trix-toolbar .trix-button-row { border-bottom-color: rgba(148, 163, 184, 0.15); } :where(.dark) trix-toolbar .trix-button-group + .trix-button-group::before { background: rgba(148, 163, 184, 0.2); } :where(.dark) trix-toolbar .trix-button { color: #cbd5e1; /* slate-300 — dark mode default */ } :where(.dark) trix-toolbar .trix-button:hover { background-color: rgba(255, 255, 255, 0.08); color: #6ee7b7; /* emerald-300 */ } :where(.dark) trix-toolbar .trix-button.trix-active { background-color: rgba(110, 231, 183, 0.15); color: #6ee7b7; } /* The icon mask itself. Reset Trix's default background-image and use mask-image with currentColor instead so each icon picks up the parent button's `color`. */ trix-toolbar .trix-button.trix-button--icon::before { opacity: 1; width: 18px; height: 18px; top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); background-image: none !important; background-color: currentColor; -webkit-mask-size: 18px 18px; mask-size: 18px 18px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } trix-toolbar .trix-button.trix-button--icon:disabled::before { opacity: 0.25; } /* ── Per-button mask images (Flowbite outline icons, ported from Stejar). The stroke colour inside each SVG is irrelevant since only the alpha channel is used as a mask. ── */ trix-toolbar .trix-button--icon-bold::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M8 5h4.5a3.5 3.5 0 1 1 0 7H8m0-7v7m0-7H6m2 7h6.5a3.5 3.5 0 1 1 0 7H8m0-7v7m0 0H6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M8 5h4.5a3.5 3.5 0 1 1 0 7H8m0-7v7m0-7H6m2 7h6.5a3.5 3.5 0 1 1 0 7H8m0-7v7m0 0H6'/%3E%3C/svg%3E"); } trix-toolbar .trix-button--icon-italic::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m8.874 19 6.143-14M6 19h6.33m-.66-14H18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m8.874 19 6.143-14M6 19h6.33m-.66-14H18'/%3E%3C/svg%3E"); } trix-toolbar .trix-button--icon-strike::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M16 4H9a3 3 0 0 0-2.83 4M14 12a4 4 0 0 1 0 8H6M4 12h16'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M16 4H9a3 3 0 0 0-2.83 4M14 12a4 4 0 0 1 0 8H6M4 12h16'/%3E%3C/svg%3E"); } trix-toolbar .trix-button--icon-link::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13.213 9.787a3.391 3.391 0 0 0-4.795 0l-3.425 3.426a3.39 3.39 0 0 0 4.795 4.794l.321-.304m-.321-4.49a3.39 3.39 0 0 0 4.795 0l3.424-3.426a3.39 3.39 0 0 0-4.794-4.795l-1.028.961'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13.213 9.787a3.391 3.391 0 0 0-4.795 0l-3.425 3.426a3.39 3.39 0 0 0 4.795 4.794l.321-.304m-.321-4.49a3.39 3.39 0 0 0 4.795 0l3.424-3.426a3.39 3.39 0 0 0-4.794-4.795l-1.028.961'/%3E%3C/svg%3E"); } trix-toolbar .trix-button--icon-heading-1::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 6.2V5h11v1.2M8 5v14m-3 0h6m2-6.8V11h8v1.2M17 11v8m-1.5 0h3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 6.2V5h11v1.2M8 5v14m-3 0h6m2-6.8V11h8v1.2M17 11v8m-1.5 0h3'/%3E%3C/svg%3E"); } trix-toolbar .trix-button--icon-quote::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 11V8a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1Zm0 0v2a4 4 0 0 1-4 4H5m14-6V8a1 1 0 0 0-1-1h-3a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1Zm0 0v2a4 4 0 0 1-4 4h-1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 11V8a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1Zm0 0v2a4 4 0 0 1-4 4H5m14-6V8a1 1 0 0 0-1-1h-3a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1Zm0 0v2a4 4 0 0 1-4 4h-1'/%3E%3C/svg%3E"); } trix-toolbar .trix-button--icon-code::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m8 8-4 4 4 4m8 0 4-4-4-4m-2-3-4 14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m8 8-4 4 4 4m8 0 4-4-4-4m-2-3-4 14'/%3E%3C/svg%3E"); } trix-toolbar .trix-button--icon-bullet-list::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-width='2' d='M9 8h10M9 12h10M9 16h10M4.99 8H5m-.02 4h.01m0 4H5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-width='2' d='M9 8h10M9 12h10M9 16h10M4.99 8H5m-.02 4h.01m0 4H5'/%3E%3C/svg%3E"); } trix-toolbar .trix-button--icon-number-list::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 6h8m-8 6h8m-8 6h8M4 16a2 2 0 1 1 3.321 1.5L4 20h5M4 5l2-1v6m-2 0h4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 6h8m-8 6h8m-8 6h8M4 16a2 2 0 1 1 3.321 1.5L4 20h5M4 5l2-1v6m-2 0h4'/%3E%3C/svg%3E"); } trix-toolbar .trix-button--icon-undo::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 9h13a5 5 0 0 1 0 10H7M3 9l4-4M3 9l4 4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 9h13a5 5 0 0 1 0 10H7M3 9l4-4M3 9l4 4'/%3E%3C/svg%3E"); } trix-toolbar .trix-button--icon-redo::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 9H8a5 5 0 0 0 0 10h9m4-10-4-4m4 4-4 4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 9H8a5 5 0 0 0 0 10h9m4-10-4-4m4 4-4 4'/%3E%3C/svg%3E"); } trix-toolbar .trix-button--icon-attach::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 8v8a5 5 0 1 0 10 0V6.5a3.5 3.5 0 1 0-7 0V15a2 2 0 0 0 4 0V8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 8v8a5 5 0 1 0 10 0V6.5a3.5 3.5 0 1 0-7 0V15a2 2 0 0 0 4 0V8'/%3E%3C/svg%3E"); } trix-toolbar .trix-button--icon-decrease-nesting-level::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 6H11M21 12H11M21 18H11M7 8l-4 4 4 4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 6H11M21 12H11M21 18H11M7 8l-4 4 4 4'/%3E%3C/svg%3E"); } trix-toolbar .trix-button--icon-increase-nesting-level::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 6H11M21 12H11M21 18H11M3 8l4 4-4 4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 6H11M21 12H11M21 18H11M3 8l4 4-4 4'/%3E%3C/svg%3E"); } /* ── Trix dialog (link picker) — themed for both modes ── */ trix-toolbar .trix-dialog { background-color: #ffffff; border: 1px solid rgba(148, 163, 184, 0.3); border-radius: 8px; margin: 0.25rem 0.75rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); padding: 0.5rem; } :where(.dark) trix-toolbar .trix-dialog { background-color: #0f172a; /* slate-900 */ border-color: rgba(148, 163, 184, 0.2); color: #cbd5e1; } trix-toolbar .trix-input--dialog { border: 1px solid rgba(148, 163, 184, 0.3); background-color: #ffffff; color: #0f172a; border-radius: 6px; padding: 0.375rem 0.5rem; font-size: 0.8125rem; } :where(.dark) trix-toolbar .trix-input--dialog { background-color: #1e293b; /* slate-800 */ color: #e2e8f0; border-color: rgba(148, 163, 184, 0.2); } trix-toolbar .trix-button--dialog { background-color: #264D4A; color: #ffffff; border-radius: 6px; padding: 0.375rem 0.625rem; font-size: 0.75rem; width: auto; min-width: auto; height: auto; } trix-toolbar .trix-button--dialog[data-trix-method="removeAttribute"] { background-color: transparent; color: #264D4A; border: 1px solid #264D4A !important; } :where(.dark) trix-toolbar .trix-button--dialog[data-trix-method="removeAttribute"] { color: #6ee7b7; border-color: #6ee7b7 !important; } /* ── Editor body — make text + caret colors match the active theme ── */ trix-editor { color: #0f172a; caret-color: #264D4A; } :where(.dark) trix-editor { color: #e2e8f0; caret-color: #6ee7b7; background-color: transparent; }