/* * This is a manifest file that'll be compiled into application.css. * * With Propshaft, assets are served efficiently without preprocessing steps. You can still include * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard * cascading order, meaning styles declared later in the document or manifest will override earlier ones, * depending on specificity. * * Consider organizing styles into separate files for maintainability. */ /* * Lexxy dark mode * * Lexxy only ships light-mode variables. The app uses a .dark class on , * so we remap the key tokens here. */ /* * html.dark has specificity 0,1,1 which beats lexxy-variables.css's :root (0,1,0). * lexxy.css loads after application.css, so same-specificity rules there would win — * the extra element selector here ensures our dark overrides always take precedence. */ html.dark { --lexxy-color-ink: oklch(92% 0 0); --lexxy-color-ink-medium: oklch(65% 0 0); --lexxy-color-ink-light: oklch(50% 0 0); --lexxy-color-ink-lighter: oklch(28% 0 0); --lexxy-color-ink-lightest: oklch(22% 0 0); --lexxy-color-ink-inverted: oklch(12% 0 0); --lexxy-color-canvas: #111827; /* gray-900 */ --lexxy-color-selected: oklch(28% 0.06 260); --lexxy-color-selected-hover: oklch(34% 0.08 260); } /* * Lexxy editor — match shape and border to other form fields. * Uses plain element/class selectors (specificity 0,0,1 / 0,1,0) which beat * the gem's :where() rules (specificity 0,0,0). */ lexxy-editor { border-width: 2px; border-color: #d1d5db; /* gray-300 */ border-radius: 0; transition: border-color 150ms; } lexxy-editor:focus-within { border-color: #2563eb; /* blue-600 */ } html.dark lexxy-editor { border-color: #374151; /* gray-700 */ } html.dark lexxy-editor:focus-within { border-color: #2563eb; /* blue-600 */ } /* Suppress the native/browser focus ring on the content area — the outer lexxy-editor border already signals focus. :where() has zero specificity so the gem's own outline:0 is overridden by anything else; this re-applies it at class specificity (0,1,0) to win reliably. */ .lexxy-editor__content { outline: none; } /* Tailwind preflight strips list-style globally. Restore bullets/numbers inside both the WYSIWYG editor and the rendered output. */ .lexxy-editor__content ul, .trix-content ul { list-style-type: disc; padding-left: 1.5em; } .lexxy-editor__content ol, .trix-content ol { list-style-type: decimal; padding-left: 1.5em; } .lexxy-editor__content li, .trix-content li { display: list-item; } /* Give the "..." overflow menu a visible border so it doesn't float unstyled. Reuses the same ink-lighter variable the toolbar separator uses. */ .lexxy-editor__toolbar-overflow-menu { border: 1px solid var(--lexxy-color-ink-lighter); } /* * Lexxy toolbar fixes * * Tailwind preflight sets `summary { display: list-item }` which wins over Lexxy's * `:where(.lexxy-editor__toolbar-button)` rules (zero specificity). This restores * display:grid+place-items:center and hides the browser disclosure triangle on all * toolbar summary elements. */ summary.lexxy-editor__toolbar-button { display: grid; place-items: center; list-style: none; } summary.lexxy-editor__toolbar-button::-webkit-details-marker { display: none; }