fix(quick-look): dark-mode-aware instructions panel
The Operator Instructions panel had a hardcoded inline style (background: #f8f9fa) which became a white-on-dark unreadable blob in dark mode. Replaced with a CSS class backed by an SCSS file that branches at compile-time via $o-webclient-color-scheme — registered in both web.assets_backend (light) and web.assets_web_dark (dark) bundles per the CLAUDE.md pattern. Tokens: panel bg #f8f9fa light / #22262d dark; border #d8dadd / #3a3f47; text #212529 / #e8eaed. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,41 @@
|
||||
// Step Details Quick-Look modal — dark-mode aware tokens.
|
||||
// Pattern documented in fusion-plating/CLAUDE.md: branch hex values
|
||||
// at SCSS compile-time via $o-webclient-color-scheme. Don't rely on
|
||||
// var(--bs-body-bg) — Odoo 19 doesn't flip it consistently across
|
||||
// addons.
|
||||
|
||||
$o-webclient-color-scheme: bright !default;
|
||||
|
||||
$_fp_ql_panel_hex: #f8f9fa;
|
||||
$_fp_ql_border_hex: #d8dadd;
|
||||
$_fp_ql_text_hex: #212529;
|
||||
|
||||
@if $o-webclient-color-scheme == dark {
|
||||
$_fp_ql_panel_hex: #22262d !global;
|
||||
$_fp_ql_border_hex: #3a3f47 !global;
|
||||
$_fp_ql_text_hex: #e8eaed !global;
|
||||
}
|
||||
|
||||
$fp-ql-panel: var(--fp-card-bg, #{$_fp_ql_panel_hex});
|
||||
$fp-ql-border: var(--fp-border-color, #{$_fp_ql_border_hex});
|
||||
$fp-ql-text: var(--fp-text, #{$_fp_ql_text_hex});
|
||||
|
||||
// Container around the rich-text instructions inside the quick-look
|
||||
// modal. Bordered + scrollable + readable in both light and dark modes.
|
||||
.o_fp_quick_look_instructions {
|
||||
max-height: 40vh;
|
||||
overflow: auto;
|
||||
padding: 12px 14px;
|
||||
margin-bottom: 8px;
|
||||
background: $fp-ql-panel;
|
||||
color: $fp-ql-text;
|
||||
border: 1px solid $fp-ql-border;
|
||||
border-radius: 4px;
|
||||
|
||||
// Make sure rich-text inner elements inherit the readable colour.
|
||||
p, li, span, strong, em, h1, h2, h3, h4, h5, h6 {
|
||||
color: inherit;
|
||||
}
|
||||
ul, ol { margin-bottom: 0; }
|
||||
p:last-child { margin-bottom: 0; }
|
||||
}
|
||||
Reference in New Issue
Block a user