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

changes

Browse Source
This commit is contained in:
gsinghpal
2026-04-02 03:30:02 -04:00
parent 5b76037988
commit 2a363c6b40
15 changed files with 580 additions and 506 deletions
Download Patch File Download Diff File Expand all files Collapse all files

469
fusion-woo-odoo/fusion_woocommerce/static/src/css/woo_styles.css
View File

@@ -1,144 +1,37 @@
/* ============================================================
Fusion WooCommerce — Theme-Aware Styles
Uses Odoo's CSS custom properties for dark/light mode support.
Odoo 19 sets color_scheme cookie to "dark" or "bright" and
applies .o_dark on the body or uses Bootstrap variables.
Fusion WooCommerce — Layout-Only Styles
All colors are inherited from Odoo's compiled theme.
No CSS custom properties for colors — Odoo handles theming
via SCSS compilation, not Bootstrap's data-bs-theme.
============================================================ */
/* ----------------------------------------------------------
CSS Custom Properties — light defaults, dark overrides
---------------------------------------------------------- */
:root {
--woo-bg-primary: #ffffff;
--woo-bg-secondary: #f9fafb;
--woo-bg-tertiary: #f3f4f6;
--woo-bg-hover: #f3f4f6;
--woo-bg-selected: #ede9fe;
--woo-border: #e5e7eb;
--woo-border-light: #f3f4f6;
--woo-text-primary: #111827;
--woo-text-secondary: #374151;
--woo-text-muted: #6b7280;
--woo-text-faint: #9ca3af;
--woo-accent: #7c3aed;
--woo-accent-hover: #6d28d9;
--woo-accent-glow: rgba(124, 58, 237, 0.15);
--woo-success: #059669;
--woo-success-bg: #d1fae5;
--woo-success-text: #065f46;
--woo-warning: #d97706;
--woo-warning-bg: #fef3c7;
--woo-warning-text: #92400e;
--woo-danger: #dc2626;
--woo-danger-bg: #fee2e2;
--woo-danger-text: #991b1b;
--woo-info-bg: #dbeafe;
--woo-info-text: #1e40af;
--woo-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
--woo-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.1);
--woo-progress-bg: #e5e7eb;
--woo-spinner-track: #e5e7eb;
--woo-btn-secondary-bg: #ffffff;
--woo-btn-secondary-border: #d1d5db;
--woo-btn-secondary-hover: #f3f4f6;
--woo-input-bg: #ffffff;
--woo-input-border: #d1d5db;
}
/* Dark mode — theme_detect.js reads Odoo's color_scheme cookie and sets
data-woo-theme="dark" on <html>. We also include @media query as fallback. */
html[data-woo-theme="dark"],
html[style*="color-scheme: dark"] {
--woo-bg-primary: #1e1e2e;
--woo-bg-secondary: #262637;
--woo-bg-tertiary: #2e2e42;
--woo-bg-hover: #33334a;
--woo-bg-selected: #3b2d6b;
--woo-border: #3c3c54;
--woo-border-light: #33334a;
--woo-text-primary: #e4e4e7;
--woo-text-secondary: #c4c4cc;
--woo-text-muted: #9ca3af;
--woo-text-faint: #6b7280;
--woo-accent: #a78bfa;
--woo-accent-hover: #8b5cf6;
--woo-accent-glow: rgba(167, 139, 250, 0.2);
--woo-success: #34d399;
--woo-success-bg: #064e3b;
--woo-success-text: #6ee7b7;
--woo-warning: #fbbf24;
--woo-warning-bg: #451a03;
--woo-warning-text: #fcd34d;
--woo-danger: #f87171;
--woo-danger-bg: #450a0a;
--woo-danger-text: #fca5a5;
--woo-info-bg: #1e3a5f;
--woo-info-text: #93c5fd;
--woo-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
--woo-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4);
--woo-progress-bg: #3c3c54;
--woo-spinner-track: #3c3c54;
--woo-btn-secondary-bg: #2e2e42;
--woo-btn-secondary-border: #3c3c54;
--woo-btn-secondary-hover: #33334a;
--woo-input-bg: #2e2e42;
--woo-input-border: #3c3c54;
}
/* ----------------------------------------------------------
Status badges
---------------------------------------------------------- */
.woo-badge {
display: inline-block;
padding: 2px 10px;
border-radius: 12px;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.woo-badge-mapped, .woo-badge-success {
background: var(--woo-success-bg);
color: var(--woo-success-text);
}
.woo-badge-unmapped {
background: var(--woo-bg-tertiary);
color: var(--woo-text-muted);
}
.woo-badge-conflict {
background: var(--woo-warning-bg);
color: var(--woo-warning-text);
}
.woo-badge-error, .woo-badge-failed {
background: var(--woo-danger-bg);
color: var(--woo-danger-text);
}
/* ----------------------------------------------------------
Tab navigation
---------------------------------------------------------- */
.woo-tabs {
display: flex;
gap: 4px;
border-bottom: 2px solid var(--woo-border);
border-bottom: 2px solid;
border-color: inherit;
margin-bottom: 16px;
}
.woo-tab {
padding: 8px 20px;
cursor: pointer;
font-weight: 500;
color: var(--woo-text-muted);
opacity: 0.6;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
background: none;
border-top: none;
border-left: none;
border-right: none;
transition: color 0.15s, border-color 0.15s;
color: inherit;
transition: opacity 0.15s, border-color 0.15s;
}
.woo-tab:hover { color: var(--woo-text-secondary); }
.woo-tab:hover { opacity: 0.85; }
.woo-tab.active {
color: var(--woo-accent);
border-bottom-color: var(--woo-accent);
opacity: 1;
font-weight: 600;
border-bottom-color: currentColor;
}
/* ----------------------------------------------------------
@@ -149,34 +42,35 @@ html[style*="color-scheme: dark"] {
align-items: center;
gap: 12px;
padding: 12px 16px;
background: var(--woo-bg-secondary);
border-bottom: 1px solid var(--woo-border);
border-bottom: 1px solid;
border-color: inherit;
flex-wrap: wrap;
}
.woo-topbar select,
.woo-topbar input {
border: 1px solid var(--woo-input-border);
border: 1px solid;
border-color: inherit;
border-radius: 6px;
padding: 6px 10px;
font-size: 0.875rem;
background: var(--woo-input-bg);
color: var(--woo-text-primary);
background: inherit;
color: inherit;
}
.woo-stat {
display: flex;
flex-direction: column;
align-items: center;
padding: 4px 14px;
border-left: 1px solid var(--woo-border);
border-left: 1px solid;
border-color: inherit;
}
.woo-stat-value {
font-size: 1.25rem;
font-weight: 700;
color: var(--woo-text-primary);
}
.woo-stat-label {
font-size: 0.7rem;
color: var(--woo-text-muted);
opacity: 0.6;
text-transform: uppercase;
letter-spacing: 0.04em;
}
@@ -192,57 +86,59 @@ html[style*="color-scheme: dark"] {
.woo-search-wrap .woo-search-icon {
position: absolute;
left: 10px;
color: var(--woo-text-faint);
opacity: 0.5;
font-size: 14px;
pointer-events: none;
}
.woo-search-input {
padding: 6px 10px 6px 32px;
border: 1px solid var(--woo-input-border);
border: 1px solid;
border-color: inherit;
border-radius: 6px;
font-size: 0.875rem;
width: 240px;
background: var(--woo-input-bg);
color: var(--woo-text-primary);
transition: border-color 0.15s;
background: inherit;
color: inherit;
}
.woo-search-input:focus {
outline: none;
border-color: var(--woo-accent);
box-shadow: 0 0 0 2px var(--woo-accent-glow);
}
.woo-search-input::placeholder {
color: var(--woo-text-faint);
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}
.woo-search-input::placeholder { opacity: 0.5; }
/* ----------------------------------------------------------
Tables
---------------------------------------------------------- */
.woo-table-wrap {
overflow-x: auto;
border: 1px solid;
border-color: inherit;
border-radius: 6px;
}
.woo-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
margin-bottom: 0;
}
.woo-table th {
background: var(--woo-bg-tertiary);
padding: 10px 12px;
text-align: left;
font-weight: 600;
color: var(--woo-text-secondary);
border-bottom: 2px solid var(--woo-border);
border-bottom: 2px solid;
border-color: inherit;
white-space: nowrap;
opacity: 0.85;
}
.woo-table td {
padding: 9px 12px;
border-bottom: 1px solid var(--woo-border-light);
color: var(--woo-text-secondary);
border-bottom: 1px solid;
border-color: inherit;
vertical-align: middle;
}
.woo-table tr:hover td { background: var(--woo-bg-hover); }
.woo-table tr.selected td { background: var(--woo-bg-selected); }
.woo-table tbody tr:last-child td { border-bottom: none; }
.woo-table tr:hover td { opacity: 0.9; }
.woo-table tr.selected td { font-weight: 500; }
/* ----------------------------------------------------------
Split view (unmatched tab)
@@ -254,17 +150,16 @@ html[style*="color-scheme: dark"] {
align-items: start;
}
.woo-split-panel {
border: 1px solid var(--woo-border);
border: 1px solid;
border-color: inherit;
border-radius: 8px;
overflow: hidden;
background: var(--woo-bg-primary);
}
.woo-split-panel-header {
background: var(--woo-bg-tertiary);
padding: 10px 14px;
font-weight: 600;
color: var(--woo-text-secondary);
border-bottom: 1px solid var(--woo-border);
border-bottom: 1px solid;
border-color: inherit;
display: flex;
justify-content: space-between;
align-items: center;
@@ -276,7 +171,7 @@ html[style*="color-scheme: dark"] {
justify-content: center;
padding-top: 60px;
gap: 8px;
color: var(--woo-text-faint);
opacity: 0.5;
font-size: 1.2rem;
}
.woo-split-list {
@@ -286,13 +181,15 @@ html[style*="color-scheme: dark"] {
.woo-split-item {
padding: 10px 14px;
cursor: pointer;
border-bottom: 1px solid var(--woo-border-light);
transition: background 0.1s;
border-bottom: 1px solid;
border-color: inherit;
transition: opacity 0.1s;
}
.woo-split-item:hover { background: var(--woo-bg-hover); }
.woo-split-item.selected { background: var(--woo-bg-selected); }
.woo-split-item-name { font-weight: 500; color: var(--woo-text-primary); }
.woo-split-item-sub { font-size: 0.75rem; color: var(--woo-text-muted); margin-top: 1px; }
.woo-split-item:last-child { border-bottom: none; }
.woo-split-item:hover { opacity: 0.8; }
.woo-split-item.selected { font-weight: 600; }
.woo-split-item-name { font-weight: 500; }
.woo-split-item-sub { font-size: 0.75rem; opacity: 0.6; margin-top: 1px; }
/* ----------------------------------------------------------
Map actions bar
@@ -302,52 +199,23 @@ html[style*="color-scheme: dark"] {
gap: 8px;
padding: 10px 0 14px;
flex-wrap: wrap;
border-bottom: 1px solid;
border-color: inherit;
margin-bottom: 14px;
}
/* ----------------------------------------------------------
Buttons
---------------------------------------------------------- */
.woo-btn {
padding: 6px 14px;
border-radius: 6px;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
border: 1px solid transparent;
transition: background 0.15s, border-color 0.15s;
}
.woo-btn-primary { background: var(--woo-accent); color: #fff; border-color: var(--woo-accent); }
.woo-btn-primary:hover { background: var(--woo-accent-hover); }
.woo-btn-success { background: var(--woo-success); color: #fff; border-color: var(--woo-success); }
.woo-btn-success:hover { background: #047857; }
.woo-btn-warning { background: var(--woo-warning); color: #fff; border-color: var(--woo-warning); }
.woo-btn-warning:hover { background: #b45309; }
.woo-btn-danger { background: var(--woo-danger); color: #fff; border-color: var(--woo-danger); }
.woo-btn-danger:hover { background: #b91c1c; }
.woo-btn-secondary {
background: var(--woo-btn-secondary-bg);
color: var(--woo-text-secondary);
border-color: var(--woo-btn-secondary-border);
}
.woo-btn-secondary:hover { background: var(--woo-btn-secondary-hover); }
.woo-btn-sm { padding: 3px 10px; font-size: 0.8rem; }
.woo-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* ----------------------------------------------------------
Dashboard cards
---------------------------------------------------------- */
.woo-dashboard {
padding: 20px;
}
.woo-dashboard { padding: 20px; }
.woo-dashboard-title {
font-size: 1.4rem;
font-weight: 700;
color: var(--woo-text-primary);
margin-bottom: 4px;
}
.woo-dashboard-subtitle {
font-size: 0.875rem;
color: var(--woo-text-muted);
opacity: 0.6;
margin-bottom: 24px;
}
.woo-cards {
@@ -357,57 +225,43 @@ html[style*="color-scheme: dark"] {
margin-bottom: 24px;
}
.woo-card {
background: var(--woo-bg-primary);
border: 1px solid var(--woo-border);
border: 1px solid;
border-color: inherit;
border-radius: 10px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 6px;
box-shadow: var(--woo-card-shadow);
transition: box-shadow 0.15s;
}
.woo-card:hover { box-shadow: var(--woo-card-shadow-hover); }
.woo-card-clickable { cursor: pointer; }
.woo-card-icon {
font-size: 1.6rem;
margin-bottom: 4px;
}
.woo-card-value {
font-size: 2rem;
font-weight: 700;
color: var(--woo-text-primary);
line-height: 1;
}
.woo-card-clickable:hover { opacity: 0.85; }
.woo-card-icon { font-size: 1.6rem; margin-bottom: 4px; }
.woo-card-value { font-size: 2rem; font-weight: 700; line-height: 1; }
.woo-card-label {
font-size: 0.8rem;
color: var(--woo-text-muted);
opacity: 0.6;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.woo-card-sub {
font-size: 0.78rem;
color: var(--woo-text-faint);
margin-top: 2px;
}
.woo-card-pending { border-left: 4px solid #f59e0b; }
.woo-card-errors { border-left: 4px solid #ef4444; }
.woo-card-mapped { border-left: 4px solid #10b981; }
.woo-card-sync { border-left: 4px solid #6366f1; }
.woo-card-sub { font-size: 0.78rem; opacity: 0.5; margin-top: 2px; }
.woo-card-pending { border-left-width: 4px; border-left-style: solid; }
.woo-card-errors { border-left-width: 4px; border-left-style: solid; }
.woo-card-mapped { border-left-width: 4px; border-left-style: solid; }
.woo-card-sync { border-left-width: 4px; border-left-style: solid; }
/* ----------------------------------------------------------
Progress bar
---------------------------------------------------------- */
.woo-progress-wrap {
background: var(--woo-progress-bg);
border-radius: 6px;
height: 8px;
overflow: hidden;
margin-top: 6px;
opacity: 0.15;
background: currentColor;
}
.woo-progress-bar {
height: 100%;
background: linear-gradient(90deg, #10b981, #059669);
border-radius: 6px;
transition: width 0.4s ease;
}
@@ -420,15 +274,16 @@ html[style*="color-scheme: dark"] {
align-items: center;
justify-content: center;
padding: 40px;
color: var(--woo-text-muted);
opacity: 0.6;
gap: 10px;
font-size: 0.9rem;
}
.woo-spinner {
width: 20px;
height: 20px;
border: 2px solid var(--woo-spinner-track);
border-top-color: var(--woo-accent);
border: 2px solid currentColor;
opacity: 0.3;
border-top-color: currentColor;
border-radius: 50%;
animation: woo-spin 0.7s linear infinite;
}
@@ -440,7 +295,7 @@ html[style*="color-scheme: dark"] {
.woo-empty {
text-align: center;
padding: 48px 20px;
color: var(--woo-text-faint);
opacity: 0.5;
}
.woo-empty-icon { font-size: 2.5rem; margin-bottom: 10px; }
.woo-empty-text { font-size: 0.9rem; }
@@ -461,10 +316,10 @@ html[style*="color-scheme: dark"] {
.woo-section-title {
font-size: 1rem;
font-weight: 600;
color: var(--woo-text-secondary);
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--woo-border-light);
border-bottom: 1px solid;
border-color: inherit;
}
/* ----------------------------------------------------------
@@ -477,82 +332,14 @@ html[style*="color-scheme: dark"] {
}
/* ----------------------------------------------------------
Theme-aware utility classes
Utility classes
---------------------------------------------------------- */
.woo-text-muted { color: var(--woo-text-muted) !important; }
.woo-text-faint { color: var(--woo-text-faint) !important; }
/* Inline code snippets (SKU etc.) */
.woo-code {
font-family: monospace;
font-size: 0.85em;
padding: 1px 6px;
border-radius: 4px;
background: var(--woo-bg-tertiary);
color: var(--woo-text-secondary);
}
/* ----------------------------------------------------------
Client action wrapper — ensure background matches theme
---------------------------------------------------------- */
.o_action.o_client_action .woo-dashboard,
.o_action.o_client_action .p-3 {
background: var(--woo-bg-primary);
color: var(--woo-text-primary);
min-height: 100%;
}
/* ----------------------------------------------------------
Form view overrides — theme-aware inputs in Odoo forms
---------------------------------------------------------- */
.o_form_view .woo-table th {
background: var(--woo-bg-tertiary);
color: var(--woo-text-secondary);
}
.o_form_view .woo-table td {
color: var(--woo-text-secondary);
border-bottom-color: var(--woo-border-light);
}
/* ----------------------------------------------------------
Checkbox overrides for dark mode
---------------------------------------------------------- */
.woo-table input[type="checkbox"],
.woo-topbar input[type="checkbox"] {
accent-color: var(--woo-accent);
}
/* ----------------------------------------------------------
Select dropdown — theme aware
---------------------------------------------------------- */
.woo-topbar select {
background: var(--woo-input-bg);
color: var(--woo-text-primary);
border-color: var(--woo-input-border);
}
.woo-topbar select option {
background: var(--woo-bg-primary);
color: var(--woo-text-primary);
}
/* ----------------------------------------------------------
Odoo native overrides for our views
These ensure Odoo's own notebook/tab/statusbar elements
inside our module's form views respect the theme.
---------------------------------------------------------- */
.o_form_view .o_notebook .nav-link {
color: var(--woo-text-muted);
}
.o_form_view .o_notebook .nav-link.active {
color: var(--woo-text-primary);
}
/* ----------------------------------------------------------
Ensure strong/bold text uses theme colour
---------------------------------------------------------- */
.woo-table strong,
.woo-card strong {
color: var(--woo-text-primary);
opacity: 0.8;
}
/* ----------------------------------------------------------
@@ -564,102 +351,58 @@ html[style*="color-scheme: dark"] {
justify-content: center;
gap: 12px;
padding: 12px 0;
border-top: 1px solid;
border-color: inherit;
margin-top: 4px;
}
.woo-pagination-info {
font-size: 0.85rem;
color: var(--woo-text-muted);
opacity: 0.6;
}
/* ----------------------------------------------------------
Icon buttons (price sync arrows)
Icon buttons (sync arrows)
---------------------------------------------------------- */
.woo-btn-icon {
background: none;
border: none;
cursor: pointer;
padding: 2px 4px;
color: var(--woo-text-muted);
opacity: 0.5;
font-size: 0.8rem;
border-radius: 4px;
transition: color 0.15s, background 0.15s;
}
.woo-btn-icon:hover {
color: var(--woo-accent);
background: var(--woo-bg-hover);
color: inherit;
transition: opacity 0.15s;
}
.woo-btn-icon:hover { opacity: 1; }
/* Product link to WooCommerce */
.woo-product-link {
color: var(--woo-accent);
text-decoration: none;
transition: color 0.15s;
}
.woo-product-link:hover {
color: var(--woo-accent-hover);
text-decoration: underline;
}
.woo-external-icon {
font-size: 0.7rem;
opacity: 0.5;
}
.woo-product-link:hover .woo-external-icon {
opacity: 1;
}
.woo-product-link { text-decoration: none; }
.woo-product-link:hover { text-decoration: underline; }
.woo-external-icon { font-size: 0.7rem; opacity: 0.5; }
.woo-product-link:hover .woo-external-icon { opacity: 1; }
/* Sale price highlight */
.woo-sale-price {
color: var(--woo-success);
font-weight: 600;
}
.woo-price-sync-col {
width: 60px;
white-space: nowrap;
}
.woo-sale-price { font-weight: 600; }
.woo-price-sync-col { width: 60px; white-space: nowrap; }
/* ----------------------------------------------------------
Editable price cells
---------------------------------------------------------- */
.woo-editable-cell {
cursor: pointer;
position: relative;
}
.woo-editable-cell:hover {
background: var(--woo-bg-hover) !important;
}
.woo-margin-cell {
font-weight: 600;
color: var(--woo-success);
}
.woo-editable-cell { cursor: pointer; position: relative; }
.woo-editable-cell:hover { opacity: 0.8; }
.woo-margin-cell { font-weight: 600; }
.woo-edit-input {
width: 90px;
padding: 2px 6px;
border: 1px solid var(--woo-accent);
border: 2px solid;
border-color: inherit;
border-radius: 4px;
font-size: 0.85rem;
text-align: right;
background: var(--woo-input-bg);
color: var(--woo-text-primary);
background: inherit;
color: inherit;
outline: none;
box-shadow: 0 0 0 2px var(--woo-accent-glow);
}
/* Category filter dropdown */
.woo-filter-select {
padding: 3px 8px;
border: 1px solid var(--woo-input-border);
border-radius: 4px;
font-size: 0.8rem;
background: var(--woo-input-bg);
color: var(--woo-text-primary);
max-width: 200px;
}
.woo-filter-select option {
background: var(--woo-bg-primary);
color: var(--woo-text-primary);
}
.woo-edit-input-text {
text-align: left;
width: 120px;
}
.woo-edit-input-text { text-align: left; width: 120px; }