changes
This commit is contained in:
@@ -0,0 +1,68 @@
|
||||
// =============================================================================
|
||||
// Fusion Plating — Job Status pill on the SO list
|
||||
// Copyright 2026 Nexa Systems Inc. · License OPL-1
|
||||
//
|
||||
// One pill per row, one colour per phase, vibrant + saturated so phases
|
||||
// pop at a glance against both the light and dark Odoo bundles. Same
|
||||
// hue map for both modes — saturated 500-level Tailwind hues with white
|
||||
// text give consistent contrast against either page background.
|
||||
// =============================================================================
|
||||
|
||||
// ----- Vibrant tints (light + dark) -----
|
||||
$_fp-muted-bg : #6b7280; // slate
|
||||
$_fp-warning-bg : #f59e0b; // amber
|
||||
$_fp-primary-bg : #8b5cf6; // violet
|
||||
$_fp-info-bg : #3b82f6; // blue
|
||||
$_fp-shipping-bg : #06b6d4; // cyan
|
||||
$_fp-delivered-bg : #14b8a6; // teal
|
||||
$_fp-invoiced-bg : #84cc16; // lime
|
||||
$_fp-paid-bg : #16a34a; // green
|
||||
$_fp-danger-bg : #ef4444; // red
|
||||
|
||||
// Matching glow shadows — darker tone of the same hue for a subtle
|
||||
// drop-shadow that gives the pill a "lifted" feel without being noisy.
|
||||
$_fp-muted-glow : rgba(31, 41, 55, 0.35);
|
||||
$_fp-warning-glow : rgba(180, 83, 9, 0.45);
|
||||
$_fp-primary-glow : rgba(91, 33, 182, 0.45);
|
||||
$_fp-info-glow : rgba(29, 78, 216, 0.45);
|
||||
$_fp-shipping-glow : rgba(14, 116, 144, 0.45);
|
||||
$_fp-delivered-glow : rgba(15, 118, 110, 0.45);
|
||||
$_fp-invoiced-glow : rgba(101, 163, 13, 0.45);
|
||||
$_fp-paid-glow : rgba(21, 128, 61, 0.5);
|
||||
$_fp-danger-glow : rgba(185, 28, 28, 0.45);
|
||||
|
||||
// =============================================================================
|
||||
// Pill base
|
||||
// =============================================================================
|
||||
.fp-job-status {
|
||||
display: inline-block;
|
||||
padding: 0.4em 0.95em;
|
||||
border-radius: 999px;
|
||||
font-weight: 600;
|
||||
font-size: 0.82em;
|
||||
line-height: 1.25;
|
||||
letter-spacing: 0.015em;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
min-width: 72px;
|
||||
color: #ffffff !important;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Per-kind tints — same map applies to light + dark bundles. White text
|
||||
// gives consistent contrast against any saturated mid-tone hue.
|
||||
// =============================================================================
|
||||
.fp-kind-muted { background-color: $_fp-muted-bg; box-shadow: 0 1px 3px $_fp-muted-glow; }
|
||||
.fp-kind-warning { background-color: $_fp-warning-bg; box-shadow: 0 1px 3px $_fp-warning-glow; }
|
||||
.fp-kind-primary { background-color: $_fp-primary-bg; box-shadow: 0 1px 3px $_fp-primary-glow; }
|
||||
.fp-kind-info { background-color: $_fp-info-bg; box-shadow: 0 1px 3px $_fp-info-glow; }
|
||||
.fp-kind-shipping { background-color: $_fp-shipping-bg; box-shadow: 0 1px 3px $_fp-shipping-glow; }
|
||||
.fp-kind-delivered { background-color: $_fp-delivered-bg; box-shadow: 0 1px 3px $_fp-delivered-glow; }
|
||||
.fp-kind-invoiced { background-color: $_fp-invoiced-bg; box-shadow: 0 1px 3px $_fp-invoiced-glow; }
|
||||
.fp-kind-paid {
|
||||
background-color: $_fp-paid-bg;
|
||||
box-shadow: 0 1px 4px $_fp-paid-glow;
|
||||
font-weight: 700;
|
||||
}
|
||||
.fp-kind-danger { background-color: $_fp-danger-bg; box-shadow: 0 1px 3px $_fp-danger-glow; }
|
||||
Reference in New Issue
Block a user