admin/Odoo-Modules
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(fusion_plating_shopfloor): dark-mode text/background readability

Browse Source 
Operators saw dark-on-dark (invisible) text in the workspace + "Cannot
Finish Step" dialog in Odoo dark mode.

Root cause: var(--text-secondary, #xxx) — a made-up variable that doesn't
exist in Odoo, so it always fell back to the hardcoded dark hex (invisible
on dark). Used 33× across job_workspace.scss + 5 component stylesheets.
Replaced with the real dark-aware var(--bs-secondary-color).

Also fixed paired backgrounds that would hide the now-theme-flipped text:
- finish-block action note → var(--bs-tertiary-bg) (was #f3f4f6).
- Tinted status banners (finish-block step, overtime timer, receiving
  status) → color-mix over var(--bs-body-bg) + var(--bs-body-color).
  Odoo's bootstrap lacks the BS5.3 -bg-subtle/-text-emphasis vars
  (verified against _root.scss), so color-mix is the dark-aware path.

Solid accent pills/dots (white text) and the color-coded plant-card chips
(light-bg + dark-text, readable in both) intentionally left as-is.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsinghpal
2026-06-02 01:24:25 -04:00
parent b59ad6b21e
commit 5c4a26b65f
7 changed files with 53 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
fusion_plating/fusion_plating_shopfloor/static/src/scss/components/_gate_viz.scss
View File

@@ -26,5 +26,5 @@ $_gate-text-hex: #b06600;
.o_fp_gate_icon { color: $_gate-border-hex; margin-top: 0.15rem; }
.o_fp_gate_body { flex: 1; }
.o_fp_gate_title { font-weight: 600; color: $_gate-text-hex; font-size: 0.85rem; }
.o_fp_gate_reason { color: var(--text-secondary, #666); font-size: 0.78rem; margin-top: 0.1rem; }
.o_fp_gate_reason { color: var(--bs-secondary-color, #666); font-size: 0.78rem; margin-top: 0.1rem; }
.o_fp_gate_jump { flex-shrink: 0; }

2
fusion_plating/fusion_plating_shopfloor/static/src/scss/components/_hold_composer.scss
View File

@@ -17,5 +17,5 @@
.o_fp_hc_row label {
font-size: 0.8rem;
font-weight: 600;
color: var(--text-secondary, #666);
color: var(--bs-secondary-color, #666);
}

8
fusion_plating/fusion_plating_shopfloor/static/src/scss/components/_kanban_card.scss
View File

@@ -34,18 +34,18 @@ $_kc-hover-hex: #f5f5f7;
}
.o_fp_kcard_h2 {
color: var(--text-secondary, #666);
color: var(--bs-secondary-color, #666);
font-size: 0.75rem;
margin-top: 0.15rem;
}
.o_fp_kcard_qty {
display: flex; justify-content: space-between;
font-size: 0.7rem; color: var(--text-secondary, #777);
font-size: 0.7rem; color: var(--bs-secondary-color, #777);
margin-top: 0.3rem;
}
.o_fp_kcard_due { color: var(--text-secondary, #999); }
.o_fp_kcard_due { color: var(--bs-secondary-color, #999); }
.o_fp_kcard_bar {
height: 4px; background: rgba(0,0,0,0.08);
@@ -74,7 +74,7 @@ $_kc-hover-hex: #f5f5f7;
}
.o_fp_kcard_wc {
color: var(--text-secondary, #999);
color: var(--bs-secondary-color, #999);
font-size: 0.7rem;
}

6
fusion_plating/fusion_plating_shopfloor/static/src/scss/components/_pin_pad.scss
View File

@@ -38,7 +38,7 @@ $_pin-dot-fill-hex: #1d1d1f;
}
.o_fp_pin_title { font-size: 1.1rem; font-weight: 600; }
.o_fp_pin_subtitle { font-size: 0.85rem; color: var(--text-secondary, #666); text-align: center; }
.o_fp_pin_subtitle { font-size: 0.85rem; color: var(--bs-secondary-color, #666); text-align: center; }
.o_fp_pin_dots {
display: flex;
@@ -83,8 +83,8 @@ $_pin-dot-fill-hex: #1d1d1f;
&:disabled { opacity: 0.5; cursor: wait; }
}
.o_fp_pin_key_clear { font-size: 0.95rem; color: var(--text-secondary, #666); }
.o_fp_pin_key_cancel { font-size: 0.95rem; color: var(--text-secondary, #666); }
.o_fp_pin_key_clear { font-size: 0.95rem; color: var(--bs-secondary-color, #666); }
.o_fp_pin_key_cancel { font-size: 0.95rem; color: var(--bs-secondary-color, #666); }
@keyframes o_fp_pin_shake_kf {
0%, 100% { transform: translateX(0); }

4
fusion_plating/fusion_plating_shopfloor/static/src/scss/components/_signature_pad.scss
View File

@@ -21,7 +21,7 @@ $_sig-canvas-border-hex: #d8dadd;
.o_fp_sig_ctx {
font-size: 0.85rem;
color: var(--text-secondary, #666);
color: var(--bs-secondary-color, #666);
}
.o_fp_sig_canvas {
@@ -36,6 +36,6 @@ $_sig-canvas-border-hex: #d8dadd;
.o_fp_sig_hint {
font-size: 0.75rem;
color: var(--text-secondary, #999);
color: var(--bs-secondary-color, #999);
text-align: center;
}

61
fusion_plating/fusion_plating_shopfloor/static/src/scss/job_workspace.scss
View File

@@ -29,7 +29,7 @@ $_ws-text-hex: #1d1d1f;
.o_fp_ws_loading {
margin: auto;
text-align: center;
color: var(--text-secondary, #666);
color: var(--bs-secondary-color, #666);
> div { margin-top: 0.6rem; }
}
@@ -87,8 +87,8 @@ $_ws-text-hex: #1d1d1f;
}
.o_fp_ws_wo { font-weight: 700; font-size: 1.3rem; letter-spacing: 0.01em; }
.o_fp_ws_dot { color: var(--text-secondary, #999); }
.o_fp_ws_cust, .o_fp_ws_part { color: var(--text-secondary, #555); font-size: 0.95rem; }
.o_fp_ws_dot { color: var(--bs-secondary-color, #999); }
.o_fp_ws_cust, .o_fp_ws_part { color: var(--bs-secondary-color, #555); font-size: 0.95rem; }
.o_fp_ws_pill {
background: linear-gradient(135deg, $_ws-card-hex 0%, $_ws-page-hex 100%);
@@ -97,7 +97,7 @@ $_ws-text-hex: #1d1d1f;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 500;
color: var(--text-secondary, #555);
color: var(--bs-secondary-color, #555);
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
@@ -152,7 +152,7 @@ $_ws-text-hex: #1d1d1f;
.o_fp_ws_bar_label {
font-size: 0.8rem;
font-weight: 500;
color: var(--text-secondary, #888);
color: var(--bs-secondary-color, #888);
margin-top: 0.35rem;
text-align: center;
}
@@ -237,7 +237,7 @@ $_ws-text-hex: #1d1d1f;
.o_fp_ws_empty {
text-align: center;
padding: 2rem 1rem;
color: var(--text-secondary, #999);
color: var(--bs-secondary-color, #999);
> div { margin-top: 0.5rem; }
}
@@ -270,9 +270,9 @@ $_ws-text-hex: #1d1d1f;
}
.o_fp_ws_step_icon { width: 18px; text-align: center; font-weight: 700; }
.o_fp_ws_step_num { color: var(--text-secondary, #999); font-size: 0.78rem; min-width: 50px; }
.o_fp_ws_step_num { color: var(--bs-secondary-color, #999); font-size: 0.78rem; min-width: 50px; }
.o_fp_ws_step_name { font-weight: 600; }
.o_fp_ws_step_meta { color: var(--text-secondary, #999); font-size: 0.78rem; margin-left: auto; }
.o_fp_ws_step_meta { color: var(--bs-secondary-color, #999); font-size: 0.78rem; margin-left: auto; }
.o_fp_ws_step_badge {
background: #0071e3;
@@ -295,12 +295,12 @@ $_ws-text-hex: #1d1d1f;
}
.o_fp_ws_step_chips { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.o_fp_ws_step_instr { font-size: 0.78rem; color: var(--text-secondary, #555); font-style: italic; }
.o_fp_ws_step_instr { font-size: 0.78rem; color: var(--bs-secondary-color, #555); font-style: italic; }
.o_fp_ws_step_actions { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.o_fp_ws_step_excluded {
font-size: 0.78rem;
color: var(--text-secondary, #888);
color: var(--bs-secondary-color, #888);
font-style: italic;
}
@@ -331,7 +331,7 @@ $_ws-text-hex: #1d1d1f;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary, #777);
color: var(--bs-secondary-color, #777);
margin-bottom: 0.35rem;
}
}
@@ -362,14 +362,14 @@ $_ws-text-hex: #1d1d1f;
display: flex;
gap: 0.4rem;
font-size: 0.72rem;
color: var(--text-secondary, #777);
color: var(--bs-secondary-color, #777);
}
.o_fp_ws_note .author { font-weight: 600; }
.o_fp_ws_note .body { color: var(--text-secondary, #555); margin-top: 0.15rem; }
.o_fp_ws_note .body { color: var(--bs-secondary-color, #555); margin-top: 0.15rem; }
.o_fp_ws_empty_small {
color: var(--text-secondary, #999);
color: var(--bs-secondary-color, #999);
font-size: 0.75rem;
font-style: italic;
}
@@ -417,7 +417,7 @@ $_ws-text-hex: #1d1d1f;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
color: var(--text-secondary, #777);
color: var(--bs-secondary-color, #777);
}
.o_fp_ws_ship_fields {
@@ -488,8 +488,8 @@ $_ws-text-hex: #1d1d1f;
.o_fp_ws_rcv_status {
padding: 0.2rem 0.6rem;
border-radius: 4px;
background: #fef3c7;
color: #78350f;
background-color: color-mix(in srgb, #f59e0b 18%, var(--bs-body-bg));
color: var(--bs-body-color);
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
@@ -507,7 +507,7 @@ $_ws-text-hex: #1d1d1f;
label {
font-weight: 600;
color: var(--text-secondary, #555);
color: var(--bs-secondary-color, #555);
font-size: 0.9rem;
}
}
@@ -529,7 +529,7 @@ $_ws-text-hex: #1d1d1f;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
color: var(--text-secondary, #666);
color: var(--bs-secondary-color, #666);
margin-bottom: 0.5rem;
letter-spacing: 0.05em;
}
@@ -598,7 +598,7 @@ $_ws-text-hex: #1d1d1f;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-secondary, #666);
color: var(--bs-secondary-color, #666);
margin-bottom: 0.5rem;
display: flex;
align-items: center;
@@ -644,7 +644,7 @@ $_ws-text-hex: #1d1d1f;
}
.o_fp_ws_rcv_damage_photos {
color: var(--text-secondary, #666);
color: var(--bs-secondary-color, #666);
font-size: 0.85rem;
}
@@ -680,7 +680,7 @@ $_ws-text-hex: #1d1d1f;
}
.o_fp_dmg_field { display: flex; flex-direction: column; gap: 0.4rem; }
.o_fp_dmg_label { font-weight: 600; color: var(--text-secondary, #555); }
.o_fp_dmg_label { font-weight: 600; color: var(--bs-secondary-color, #555); }
.o_fp_dmg_req { color: #dc2626; }
.o_fp_dmg_pills {
@@ -784,8 +784,8 @@ $_ws-text-hex: #1d1d1f;
}
.o_fp_ws_step_timer_over {
background: #fee2e2;
color: #7f1d1d;
background-color: color-mix(in srgb, #ef4444 16%, var(--bs-body-bg));
color: var(--bs-body-color);
animation: o_fp_ws_timer_pulse 1.5s ease-in-out infinite;
}
@@ -808,15 +808,18 @@ $_ws-text-hex: #1d1d1f;
.o_fp_finish_block_step {
font-size: 1.1rem;
color: #b45309;
background: #fef3c7;
color: var(--bs-body-color);
// Amber wash over the live theme bg — pale in light mode, dark-amber
// in dark mode (the -bg-subtle/-text-emphasis BS vars aren't defined
// in Odoo's bootstrap, so color-mix is the dark-aware path).
background-color: color-mix(in srgb, #f59e0b 14%, var(--bs-body-bg));
padding: 0.7rem 1rem;
border-radius: 6px;
border-left: 4px solid #f59e0b;
}
.o_fp_finish_block_msg {
color: var(--text-secondary, #333);
color: var(--bs-secondary-color, #333);
}
.o_fp_finish_block_list {
@@ -831,9 +834,9 @@ $_ws-text-hex: #1d1d1f;
}
.o_fp_finish_block_action_note {
color: var(--text-secondary, #555);
color: var(--bs-secondary-color, #555);
font-style: italic;
padding: 0.6rem 0.8rem;
background: #f3f4f6;
background: var(--bs-tertiary-bg, #f3f4f6);
border-radius: 4px;
}