/* ============================================================ Wiwo Neo Design System — Bridge over Perfex / Bootstrap 3 Consumes tokens from wiwo.tokens.css. Loads LAST in . Uses semantic tokens (--surface/--ink/--line...) so light & dark themes both work via html[data-theme]. Rules honored: green never as text on light (green = fill + ink); ink is the darkest; focus-visible ring blue/green. ============================================================ */ /* ============ 1. Typography ============ */ body, .btn, button, input, textarea, select, .panel_s, .panel, .table, .modal, .dropdown-menu, .menu, .navbar, .sidebar { font-family: var(--font-system) !important; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, .h1, .h2, .h3 { font-weight: var(--weight-display); letter-spacing: -0.015em; } h4, h5, h6, .h4, .h5, .h6 { font-weight: var(--weight-action); letter-spacing: -0.01em; } /* ============ 2. Surfaces / page ============ */ body { background: var(--surface) !important; color: var(--ink); } #wrapper, .content { background: transparent !important; } .panel_s, .panel { background: var(--wiwo-almost-white) !important; color: var(--ink); border: 1px solid var(--line) !important; border-radius: var(--radius-card); box-shadow: var(--shadow-1); } /* content surfaces: also flip the inner body/heading/footer (they carry the white) */ .panel_s .panel-body, .panel .panel-body, .panel_s .panel-heading, .panel .panel-heading, .panel_s .panel-footer, .panel .panel-footer, .panel-body, .panel-heading, .panel-footer { background-color: var(--wiwo-almost-white) !important; color: var(--ink); border-color: var(--line); } /* Tailwind hardcoded whites -> token surface (works both themes) */ .tw-bg-white, [class*="tw-bg-white"], .tw-bg-neutral-50, .tw-bg-neutral-100 { background-color: var(--wiwo-almost-white) !important; } .panel-title, .panel_s .panel-title { color: var(--ink); } .well { background: var(--surface-2); border-color: var(--line); border-radius: var(--shape-sm); } hr { border-color: var(--line); } /* ============ 3. Links / selection ============ */ a { color: var(--wiwo-blue); } a:hover, a:focus { color: var(--wiwo-blue-700); } ::selection { background: var(--state-press); } /* ============ 4. Focus visible (a11y) ============ */ a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--focus-ring) !important; outline-offset: 2px !important; box-shadow: 0 0 0 7px var(--focus-glow) !important; } /* ============ 5. Buttons ============ */ .btn { border-radius: var(--radius-control); font-weight: var(--weight-nav); } .btn-primary, .btn-info { background-color: var(--wiwo-blue) !important; border-color: var(--wiwo-blue) !important; color: #fff !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-info:hover, .btn-info:focus, .btn-info:active { background-color: var(--wiwo-blue-700) !important; border-color: var(--wiwo-blue-700) !important; color: #fff !important; } .btn-success { background-color: var(--wiwo-green) !important; border-color: var(--wiwo-green) !important; color: var(--wiwo-ink) !important; } .btn-success:hover, .btn-success:focus, .btn-success:active { background-color: var(--wiwo-green) !important; border-color: var(--wiwo-green) !important; color: var(--wiwo-ink) !important; filter: brightness(0.95); } .btn-default { background-color: var(--control-surface) !important; border-color: var(--line) !important; color: var(--ink) !important; } .btn-default:hover, .btn-default:focus { background-color: var(--control-surface-hover) !important; border-color: var(--wiwo-blue) !important; } /* ============ 6. Form controls ============ */ .form-control { border-radius: var(--shape-xs); border-color: var(--line); background-color: var(--control-surface); color: var(--ink); } .form-control:focus { border-color: var(--wiwo-blue); box-shadow: 0 0 0 3px var(--focus-glow); } input[type="checkbox"], input[type="radio"] { accent-color: var(--wiwo-blue); } /* ============ 7. Topbar (#header) ============ */ #header { background: var(--wiwo-almost-white) !important; border-bottom: 1px solid var(--line) !important; } #header .navbar-nav > li > a { color: var(--ink); } #header .navbar-nav > li > a:hover { color: var(--wiwo-blue); } /* dark-mode toggle: show the icon of the target theme */ #wiwo-theme-toggle svg { vertical-align: middle; } html[data-theme="light"] .wiwo-icon-sun { display: none; } html[data-theme="dark"] .wiwo-icon-moon { display: none; } /* theme-aware logo (blue lockup on light, beige lockup on dark). Note: a WiWO inline rule does `#header .logo img { content: url(...LogoWblanca.png) }` which replaces the img content — we reset it with higher specificity. */ #header #logo .wiwo-neo-logo img { content: normal !important; height: 30px !important; width: auto !important; display: block; } html[data-theme="light"] #header #logo .wiwo-logo-dark { display: none !important; } html[data-theme="dark"] #header #logo .wiwo-logo-light { display: none !important; } /* Contrast fix: hardcoded utility text colors -> tokens that flip with theme. In light these keep their look; in dark they become legible. */ .text-dark { color: var(--ink) !important; } .text-muted { color: var(--muted) !important; } body, .content, .table, td, th, label, p, span, .panel-body { } html[data-theme="dark"] .text-black, html[data-theme="dark"] .tw-text-black, html[data-theme="dark"] .tw-text-neutral-800, html[data-theme="dark"] .tw-text-neutral-900, html[data-theme="dark"] .tw-text-gray-800, html[data-theme="dark"] .tw-text-gray-900 { color: var(--ink) !important; } /* ============ 8. Sidebar (#menu.sidebar) ============ */ #menu.sidebar, aside#menu { background: var(--sidebar-bg) !important; border-right: 1px solid var(--sidebar-border) !important; } #side-menu > li > a, #setup-menu > li > a, #side-menu li a, #setup-menu li a { color: var(--sidebar-text) !important; } #side-menu li a:hover, #setup-menu li a:hover { background: var(--sidebar-nav-hover) !important; color: var(--wiwo-blue) !important; } #side-menu li.active > a, #setup-menu li.active > a, #side-menu li a.active { background: var(--sidebar-nav-active-bg) !important; color: var(--sidebar-nav-active-text) !important; border-radius: var(--shape-sm); } #side-menu ul.nav-second-level { background: transparent !important; } .sidebar-user-profile, .sidebar-user-profile a { color: var(--sidebar-text); } /* ============ 9. Tables ============ */ .table { color: var(--ink); } .table > thead > tr > th { border-bottom: 2px solid var(--line) !important; color: var(--muted); font-weight: var(--weight-nav); text-transform: none; } .table > tbody > tr > td { border-top: 1px solid var(--line) !important; } .table-hover > tbody > tr:hover, .table > tbody > tr:hover { background: var(--state-hover) !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--wiwo-blue) !important; border-color: var(--wiwo-blue) !important; color: #fff !important; border-radius: var(--shape-xs); } /* table loading indicator: the 3-bar .dt-loader is replaced by a mini-orb in wiwo.orb.css. Here we just theme the DataTables processing box. */ .dataTables_processing { background: var(--surface-container) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: var(--shape-sm) !important; box-shadow: var(--shadow-2) !important; } /* ============ 10. Dropdowns ============ */ .dropdown-menu { background: var(--wiwo-almost-white) !important; border: 1px solid var(--line) !important; border-radius: var(--shape-sm); box-shadow: var(--shadow-2); } .dropdown-menu > li > a { color: var(--ink) !important; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--state-hover) !important; color: var(--wiwo-blue) !important; } /* ============ 11. Modals ============ */ .modal-content { background: var(--surface) !important; color: var(--ink); border: 1px solid var(--line) !important; border-radius: var(--shape-md); box-shadow: var(--shadow-glass); } .modal-header, .modal-footer { border-color: var(--line) !important; } .modal-backdrop.in { opacity: 0.42; } /* ============ 12. Badges / labels ============ */ .badge { background: var(--wiwo-blue); color: #fff; border-radius: var(--shape-full); } .label-primary, .label-info { background-color: var(--wiwo-blue) !important; color: #fff !important; } .label-success, .bg-success, .text-success { } .label-success { background-color: var(--wiwo-green) !important; color: var(--wiwo-ink) !important; } .label-warning { background-color: var(--warn) !important; color: #fff !important; } .label-danger { background-color: var(--danger) !important; color: #fff !important; } .label-default { background-color: var(--surface-2) !important; color: var(--ink) !important; } .label { border-radius: var(--shape-full); font-weight: var(--weight-meta); padding: .28em .7em; } /* ============ 13. Alerts ============ */ .alert { border-radius: var(--shape-sm); border: 1px solid var(--line); } .alert-success { background: rgba(59,255,0,.12); border-color: rgba(59,255,0,.4); color: var(--ink); } .alert-info { background: rgba(66,66,255,.10); border-color: rgba(66,66,255,.35); color: var(--ink); } .alert-warning { background: rgba(155,102,0,.10); border-color: rgba(155,102,0,.35); color: var(--ink); } .alert-danger { background: var(--error-soft); border-color: rgba(186,26,26,.4); color: var(--ink); } /* ============ 14. Tabs / pagination ============ */ .nav-tabs { border-bottom-color: var(--line); } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: var(--wiwo-blue); border-bottom: 2px solid var(--wiwo-blue); background: transparent; } .pagination > .active > a, .pagination > .active > span { background: var(--wiwo-blue) !important; border-color: var(--wiwo-blue) !important; } .pagination > li > a { color: var(--wiwo-blue); } /* ============ 15. Dashboard cards — Neo + perf fix ============ Overrides the inline "Apple Vision OS" style: cut blur 40px -> 22px token, kill the perpetual infinite animations (Retina/Mac memory), align olive green -> Neo green. */ .top_stats_wrapper { background: var(--wiwo-almost-white) !important; /* PERF (Mac): the surface is opaque, so backdrop-filter blur is invisible but still forces a costly GPU pass on 4 always-visible cards. Kill it. */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid var(--line) !important; border-radius: var(--radius-card) !important; box-shadow: var(--shadow-1) !important; } /* PERF: kill the infinite shimmer/float loops that ran on always-visible cards */ .top_stats_wrapper .progress-bar::after { animation: none !important; } .top_stats_wrapper:hover svg { animation: none !important; } .top_stats_wrapper::before { animation: none !important; } .quick-stats-invoices .top_stats_wrapper .progress-bar { background: var(--wiwo-gradient-primary) !important; } .quick-stats-leads .top_stats_wrapper .progress-bar { background: linear-gradient(90deg, var(--wiwo-green), #6DFF7C) !important; } /* ============ 16. Scrollbars — Neo palette (both themes) ============ "barra de subida y bajada": neutral ink-tone thumb that turns brand on hover (blue on light, green on dark). Applies to the window and every inner scroll area (tables, modals, dropdowns, calendar). */ html[data-theme="light"] { --wiwo-scroll-thumb: rgba(41, 41, 41, .26); --wiwo-scroll-thumb-hover: var(--wiwo-blue); } html[data-theme="dark"] { --wiwo-scroll-thumb: rgba(248, 250, 215, .26); --wiwo-scroll-thumb-hover: var(--wiwo-green); } * { scrollbar-width: thin; scrollbar-color: var(--wiwo-scroll-thumb) transparent; } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--wiwo-scroll-thumb); border-radius: var(--shape-full); border: 3px solid transparent; background-clip: padding-box; transition: background-color var(--motion-fast) var(--ease-expressive); } ::-webkit-scrollbar-thumb:hover { background: var(--wiwo-scroll-thumb-hover); border: 3px solid transparent; background-clip: padding-box; } /* thin variant for compact inner panes (dropdowns, sidebars) */ .dropdown-menu::-webkit-scrollbar, #side-menu::-webkit-scrollbar, .modal-body::-webkit-scrollbar, .dataTables_scrollBody::-webkit-scrollbar { width: 9px; height: 9px; } /* ============ 17. Mac perf GUARDRAIL (prevents recurrence) ============ The macOS slowdown/crash was caused by backdrop-filter blur (Retina GPU killer) on always-visible chrome. This rule PROACTIVELY neutralizes any backdrop-filter — current OR future, whoever adds it — on the persistent admin surfaces. It is self-healing: reintroducing blur on these elements has no effect. The transient Neo orb overlay (.wiwo-orb-overlay) is a separate, on-demand element NOT matched here, so its brief blur survives. */ #header, #menu.sidebar, aside#menu, #wrapper, #wrapper > .content, .content, .panel, .panel_s, .panel-body, .top_stats_wrapper, .top_stats_wrapper *, .table, .dataTables_wrapper, .dropdown-menu, .modal-content, .widget, .tile-stats, #side-menu, #setup-menu, .navbar, .customtab { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* zero-filter dashboard cards (kills the trivial 2px icon drop-shadow too) */ .top_stats_wrapper svg { filter: none !important; }