/* * modern.css — clquickium frontend modernization (Phase 0+) * Scoped under `html.modern` so it cleanly overrides the Porto theme * (theme.css / default.css / theme-custom.css) without !important sprawl. * Remove the `modern` class from in imports.html to fully revert * the visual override layer. * Loaded LAST in imports.html. */ /* ===== Fonts (self-hosted) ===== */ @font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url("../imports/fonts/inter/inter-latin-400-normal.woff2") format("woff2"); } @font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url("../imports/fonts/inter/inter-latin-500-normal.woff2") format("woff2"); } @font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url("../imports/fonts/inter/inter-latin-600-normal.woff2") format("woff2"); } @font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url("../imports/fonts/inter/inter-latin-700-normal.woff2") format("woff2"); } @font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url("../imports/fonts/jetbrains-mono/jetbrains-mono-latin-400-normal.woff2") format("woff2"); } @font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap; src:url("../imports/fonts/jetbrains-mono/jetbrains-mono-latin-500-normal.woff2") format("woff2"); } @font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:700; font-display:swap; src:url("../imports/fonts/jetbrains-mono/jetbrains-mono-latin-700-normal.woff2") format("woff2"); } /* ===== Base typography ===== */ html.modern, html.modern body { font-family: var(--font-ui); } html.modern h1, html.modern h2, html.modern h3, html.modern h4, html.modern h5, html.modern h6 { font-family: var(--font-ui); } /* ===== App surface + grid background (T5) ===== */ html.modern .content-body { background-color: var(--m-app-bg); background-image: linear-gradient(var(--m-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--m-grid-line) 1px, transparent 1px); background-size: 160px 160px; color: var(--m-text); } html.modern #content { color: var(--m-text); } /* ===== Cards / panels (T6) ===== */ html.modern .panel { background: var(--m-card-bg); border: 1px solid var(--m-card-border); border-radius: var(--m-radius); box-shadow: var(--m-shadow); overflow: hidden; } html.modern .panel-heading { background: transparent; border-bottom: 1px solid var(--m-card-border); color: var(--m-text); font-weight: 600; padding: var(--m-space-4) var(--m-space-5); } html.modern .panel-body { color: var(--m-text); padding: var(--m-space-5); } html.modern .panel-footer { background: transparent; border-top: 1px solid var(--m-card-border); } /* Brand top-accent strip — shared component (KPI header, Análises panels, future pages). .panel has overflow:hidden so the 4px strip clips to the rounded top corners. */ /* !important: when the card is also a Bootstrap column (e.g. alarms' `section.panel.col-xs-12`), theme-custom.css forces `.col-* { position: inherit !important }` (→ static), which would strip the ::before strip of its positioning anchor and hide it. See §1. */ html.modern .panel-featured-top { position: relative !important; } html.modern .panel-featured-top::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--primary-site-color); z-index: 1; } /* `.panel-featured-dark .panel-title` is hardcoded `color:#171717` (theme.css) — a near-black heading that is invisible on the modern dark card (billing, fill_kpis, client_plan, site_monitor). Re-point to the dark-aware --m-text token: still dark on the light card, readable near-white on the dark card. */ html.modern .panel-featured-dark .panel-title { color: var(--m-text); } /* Modal cards — magnific-popup .modal-block panels (charts_v2, custom_dashboard, library, admin, devices, …). Promoted to global in Phase 2c (was page-local in charts_v2.css). */ html.modern .modal-block .panel { background: var(--m-card-bg); border: 1px solid var(--m-card-border); border-radius: var(--m-radius); box-shadow: var(--m-shadow-lg); overflow: hidden; } html.modern .modal-block .panel-heading { background: transparent; border-bottom: 1px solid var(--m-card-border); } html.modern .modal-block .panel-title { color: var(--m-text); font-family: var(--font-ui); } html.modern .modal-block .panel-body, html.modern .modal-block .panel-footer { background: var(--m-card-bg); color: var(--m-text); } html.modern .modal-block .panel-footer { border-top: 1px solid var(--m-card-border); } /* ===== Buttons (T7) ===== */ html.modern .btn { border-radius: var(--m-radius-sm); font-weight: 600; padding: 8px 16px; border: 1px solid transparent; transition: filter .12s ease, background-color .12s ease, border-color .12s ease; } html.modern .btn-primary { background: var(--primary-site-color); border-color: var(--primary-site-color); color: var(--auxiliar-text-color); } html.modern .btn-primary:hover, html.modern .btn-primary:focus { filter: brightness(1.06); } /* Dark-mode rim (#4): near-black white-label brands (e.g. ELIS green #072f2c) filled the primary button so dark it barely separated from the dark surface (fill-vs-surface ~1.18:1; navy 1.86:1) — it read as floating text, not a button. Keep the exact brand fill (identity + white-label text contrast unchanged) and lift the button's existing 1px border to a lighter shade of the SAME brand hue so it gains a visible rim, with zero layout shift (the border is already there, just matching the fill). hsl(from …) keeps hue+sat and sets a fixed lightness; color-mix is the fallback for engines without relative-color syntax (§10). Dark-mode only — light surfaces already separate the fill. !important beats `theme-custom.css .btn.btn-primary { border-color: var(--bootstrap-primary) !important }` (this selector's higher specificity, 0,3,1, then wins; §1). Lightness = 30% (chosen in design review for a subtle rim): saturated/mid brands like ELIS green clear the WCAG 1.4.11 3:1 boundary (green rim 3.8:1) and bright brands (e.g. COLORMAQ) were already compliant via their fill, so the faint rim there is harmless; a low-luminance brand like navy stays just under 3:1 (rim 2.21:1) — a deliberate aesthetic tradeoff. Raising L to ~42% would clear 3:1 for the blue brands too, at the cost of a vivid rim on ELIS's saturated green. */ html.modern[data-theme="dark"] .btn-primary { border-color: color-mix(in srgb, var(--primary-site-color), white 40%) !important; border-color: hsl(from var(--primary-site-color) h s 30%) !important; } html.modern .btn-default, html.modern .btn-secondary { background: transparent; border-color: var(--m-card-border); color: var(--m-text); } html.modern .btn-default:hover, html.modern .btn-default:focus, html.modern .btn-secondary:hover, html.modern .btn-secondary:focus { background: rgba(127,127,127,.08); } /* .btn-secondary is the neutral "Desativar" button on /reports + /graph_report; it is not a real BS3 class, so without this it fell back to a hardcoded light (#efefef) fill and, in dark mode, inherited the near-white --m-text color -> an unreadable label. Both instances carry an inline `border:1px solid lightgray`; the !important recolors it to the token (justified §1: beats an inline style) so the border matches the modern layer in both themes. */ html.modern .btn-secondary { border-color: var(--m-card-border) !important; } /* Search-bar icon button (global). theme.css renders the .input-search magnifier as a borderless, transparent icon absolutely overlaid on the input's right end (theme.css `.input-search .input-group-btn button { border:0; background:transparent }`). The modern .btn / .btn-default layer (+ theme-custom's !important border-color, + the .btn-default hover tint) re-draws a grey box around it on every search bar app-wide. Re-assert borderless/transparent here so the clean icon shows over the input on ALL pages — replaces the former per-page copies (sgd/plugfield/novus/report). */ html.modern .input-search .input-group-btn .btn { border: none; background: transparent; box-shadow: none; } /* ===== Input-group corner cohesion (global) ===== */ /* modern's `.form-control`/`.btn { border-radius }` override Bootstrap's input-group corner reset, so every field/addon/button in a group rounds all four corners and the addon buttons ("+", "Trocar", "Filtrar"…) read as detached pills instead of part of the selector. Re-assert Bootstrap's logic with the modern radius: inner edges square so cells connect, only the group's outer edges rounded. Covers native fields, addon spans/buttons, .input-group-btn wrappers and the bootstrap-select toggle (its border lives on .dropdown-toggle). .input-search is excluded — its magnifier button has a separate borderless treatment above. */ html.modern .input-group:not(.input-search) > .form-control, html.modern .input-group:not(.input-search) > .input-group-addon:not([type="color"]), html.modern .input-group:not(.input-search) > .input-group-btn > .btn, html.modern .input-group:not(.input-search) > .bootstrap-select > .dropdown-toggle { border-radius: 0; } html.modern .input-group:not(.input-search) > .form-control:first-child, html.modern .input-group:not(.input-search) > .input-group-addon:not([type="color"]):first-child, html.modern .input-group:not(.input-search) > .input-group-btn:first-child > .btn, html.modern .input-group:not(.input-search) > .bootstrap-select:first-child > .dropdown-toggle { border-top-left-radius: var(--m-radius-sm); border-bottom-left-radius: var(--m-radius-sm); } html.modern .input-group:not(.input-search) > .form-control:last-child, html.modern .input-group:not(.input-search) > .input-group-addon:not([type="color"]):last-child, html.modern .input-group:not(.input-search) > .input-group-btn:last-child > .btn, html.modern .input-group:not(.input-search) > .bootstrap-select:last-child > .dropdown-toggle { border-top-right-radius: var(--m-radius-sm); border-bottom-right-radius: var(--m-radius-sm); } /* select2 renders its box/border on .select2-selection while the native 's .form-control class onto its .btn-group wrapper, so modern's .form-control box (border + bg + radius) paints a SECOND box around the real toggle — the toggle floats inside a larger bordered "div". Flatten the wrapper so the toggle itself is the single, clean field (it carries the border/bg/radius). Applies everywhere; input-group bootstrap-selects already fill their toggle via the flex rules, so this is idempotent there. */ html.modern .bootstrap-select.btn-group { background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 0; } html.modern .bootstrap-select.btn-group > .dropdown-toggle { width: 100%; height: 38px; } /* ===== Pricing-table cards (library / my_plugins / add_plugins) ===== */ /* `.pricing-table .plan` (theme.css) is a hard `background:#FFF` card whose ONLY dark variant is `html.dark .pricing-table .plan` — the LEGACY dark mechanism. The modern layer toggles `data-theme="dark"`, never the `.dark` class, so that override is dead and the cards render glaring white in modern dark mode (equipment/sensor library grid; also plugin cards). Re-point the card, header band, list dividers, and icon-circle to modern tokens under the modern dark attribute, mirroring the legacy intent. The card h3 title carries an inline `style="color:black"` (library.js / my_plugins.js / add_plugins.js), so its color needs !important (justified §1: beats an inline style) to stay readable on the now-dark header. */ html.modern[data-theme="dark"] .pricing-table .plan { background: var(--m-card-bg); border: 1px solid var(--m-card-border); color: var(--m-text); } html.modern[data-theme="dark"] .pricing-table h3 { background-color: var(--m-input-bg); text-shadow: none; } /* whiten the inline-black title only on the dark header band; my_plugins' active-plugin cards keep a bright-green h3 (its own !important) where the inline black stays readable, so exclude them to avoid near-white-on-green. */ html.modern[data-theme="dark"] .pricing-table h3:not(.active_plugin) { color: var(--m-text) !important; } html.modern[data-theme="dark"] .pricing-table li { border-top-color: var(--m-card-border); } html.modern[data-theme="dark"] .pricing-table h3 span { background: var(--m-input-bg); border-color: var(--m-card-border); box-shadow: none; color: var(--m-text-muted); } /* ===== Forms (T8) ===== */ html.modern .form-control { border-radius: var(--m-radius-sm); border: 1px solid var(--m-card-border); background: var(--m-input-bg); color: var(--m-text); box-shadow: none; height: auto; padding: 10px 12px; transition: border-color .12s ease, box-shadow .12s ease; } html.modern .form-control:focus { border-color: var(--primary-site-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-site-color) 25%, transparent); outline: none; } html.modern .form-control::placeholder { color: var(--m-text-muted); } html.modern label, html.modern .control-label { color: var(--m-text); font-weight: 600; } /* ===== Badges / pills (T9) ===== */ html.modern .label, html.modern .badge, html.modern .m-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--m-radius-pill); font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; padding: 3px 10px; line-height: 1.6; } html.modern .label-success, html.modern .m-badge.is-ok { background: color-mix(in srgb, var(--m-ok) 16%, transparent); color: var(--m-ok); } html.modern .label-danger, html.modern .m-badge.is-danger { background: color-mix(in srgb, var(--m-danger) 16%, transparent); color: var(--m-danger); } html.modern .label-warning, html.modern .m-badge.is-warn { background: color-mix(in srgb, var(--m-warn) 16%, transparent); color: var(--m-warn); } html.modern .m-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* Updates-feed note types — shared by the home feed (home_logged cards + badges) and the /updates_admin table badges. Each type modifier sets --type-c (from the theme tokens in principal.css); the badge and the feed card both read var(--type-c). The modifier is defined for BOTH .update-badge--x (so a badge is self-sufficient in the admin table) and .update-card--x (so the whole home card carries the colour and its descendant badge inherits --type-c). WCAG-AA verified: light 4.6–5.4:1, dark 5.5–8.4:1. */ html.modern .update-badge--bugfix, html.modern .update-card--bugfix { --type-c: var(--m-type-bugfix); } html.modern .update-badge--update, html.modern .update-card--update { --type-c: var(--m-type-update); } html.modern .update-badge--improvement, html.modern .update-card--improvement { --type-c: var(--m-type-improvement); } html.modern .update-badge--notice, html.modern .update-card--notice { --type-c: var(--m-type-notice); } /* Soft-tinted pill with a status dot; --type-c is the vivid accent, background is that accent mixed into the surface so it tints correctly in both themes. */ html.modern .update-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--m-radius-pill); font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--type-c); background: color-mix(in srgb, var(--type-c) 14%, var(--m-card-bg)); } html.modern .update-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--type-c); } /* ===== Tables (T10) ===== */ html.modern .table { color: var(--m-text); } html.modern .table > thead > tr > th { border-bottom: 1px solid var(--m-card-border); color: var(--m-text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; padding: 10px 14px; } html.modern .table > tbody > tr > td { border-top: 1px solid var(--m-card-border); padding: 12px 14px; vertical-align: middle; } html.modern .table-hover > tbody > tr:hover > td { background: rgba(127,127,127,.05); } html.modern .m-mono { font-family: var(--font-mono); font-size: 12px; color: var(--m-text-muted); } /* ===== Scrollbars (T11) ===== */ html.modern *::-webkit-scrollbar { width: 10px; height: 10px; } html.modern *::-webkit-scrollbar-thumb { background: var(--m-border-color); border-radius: var(--m-radius-pill); border: 2px solid transparent; background-clip: padding-box; } html.modern *::-webkit-scrollbar-thumb:hover { background: var(--m-text-muted); } html.modern *::-webkit-scrollbar-track { background: transparent; } /* ===== Dividers (T11) ===== */ html.modern hr { border-top: 1px solid var(--m-card-border); } /* ===== Flash / alerts (T11) ===== */ html.modern .alert { border-radius: var(--m-radius-sm); border: 1px solid var(--m-card-border); border-left-width: 4px; padding: 12px 16px; } html.modern .alert-success { border-left-color: var(--m-ok); } html.modern .alert-danger, html.modern .alert-error { border-left-color: var(--m-danger); } html.modern .alert-warning { border-left-color: var(--m-warn); } html.modern .alert-info { border-left-color: var(--primary-site-color); } /* ===== Sidebar internals — mode-dependent bg preserved by tokens (T12) ===== */ html.modern .sidebar-left { box-shadow: 3px 0 0 var(--sidebar-menu-divisor) inset; } html.modern ul.nav-main li a { border-radius: var(--m-radius-sm); margin: 2px 8px; padding: 9px 12px; font-weight: 500; transition: background-color .12s ease, color .12s ease; } html.modern ul.nav-main > li.nav-active > a, html.modern ul.nav-main > li.nav-expanded > a { background-color: var(--sidebar-menu-background-hover); color: var(--sidebar-menu-color-hover); } /* Active page link (JS tags it with .m-nav-active) — brand accent + tint */ html.modern #menu a.m-nav-active { position: relative; background-color: color-mix(in srgb, var(--primary-site-color) 14%, transparent) !important; color: var(--sidebar-menu-color-hover) !important; } html.modern #menu a.m-nav-active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary-site-color); } html.modern ul.nav-main li a > i { width: 20px; text-align: center; } /* Collapsed rail: center the top-level icon inside the pill. Porto leaves the label span as visibility:hidden with auto width, so it still reserves its text width and pushed the icon off-centre (12px gap left vs 7px right). Flex-centre the icon, drop the leftover icon margin, and fully remove the reserved span. Top-level only, and only while truly collapsed — hover-expand drops .sidebar-left-collapsed, so labels still show on hover. */ html.modern.sidebar-left-collapsed ul.nav-main > li > a { display: flex; align-items: center; justify-content: center; padding-left: 0; padding-right: 0; } html.modern.sidebar-left-collapsed ul.nav-main > li > a > i { margin-right: 0; } html.modern.sidebar-left-collapsed ul.nav-main > li > a > span { display: none; } html.modern .nav-section-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--sidebar-menu-disabled-color); padding: 14px 20px 6px; } /* ===== Page header (T13) ===== */ html.modern .page-header { border-radius: 0; box-shadow: var(--m-shadow-sm); padding: 0 24px; /* The header carries z-index:1001 but is position:static, so the z-index is ignored — any positioned page content (e.g. a .panel-featured-top card) then paints over the userbox dropdown that lives inside this header. Make it positioned so its z-index takes effect and the dropdown layers above content. (Promoted from kpi_monitor.css in Phase 2b — it recurs on every page with a positioned card, so it belongs here globally.) */ position: relative; } html.modern .page-header h2 { font-family: var(--font-ui); font-weight: 700; letter-spacing: -.01em; } /* ===== Userbox dropdown (T13) — clean drop-below the trigger ===== */ html.modern #userbox .dropdown-menu { top: calc(100% + 8px); left: auto; right: 0; width: max-content; min-width: 210px; box-sizing: border-box; border: 1px solid var(--m-card-border); border-radius: var(--m-radius); box-shadow: var(--m-shadow-lg); padding: 6px; background: var(--m-card-bg); z-index: 1050; } html.modern .userbox .dropdown-menu > li > a { border-radius: var(--m-radius-sm); color: var(--m-text); padding: 8px 12px; } html.modern .userbox .dropdown-menu > li > a:hover { background: rgba(127,127,127,.08); } html.modern .userbox .dropdown-menu .divider { background: var(--m-card-border); } /* drop the stray leading divider that renders a bare line above the first item */ html.modern #userbox .dropdown-menu li.divider:first-child { display: none; } /* ===== Centered header logo — anchored to the header so it scrolls WITH it ===== Was position:fixed (glued to the viewport top): on a scrolling page the relative .page-header scrolled away while the logo stayed pinned at the top, detaching it. position:absolute anchors it to the .page-header (which is position:relative), so it moves with the header. Centered on the header content area. */ html.modern .client-picture { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: auto; max-height: none; height: 50px; margin: 0; display: flex; align-items: center; justify-content: center; z-index: 1035; pointer-events: none; } html.modern .client-picture > img { height: 30px; } /* ===== Vendored widget reskins (T14) ===== */ /* select2 */ html.modern .select2-container--default .select2-selection--single, html.modern .select2-container--default .select2-selection--multiple { border: 1px solid var(--m-card-border); border-radius: var(--m-radius-sm); background: var(--m-input-bg); min-height: 40px; } html.modern .select2-dropdown { border: 1px solid var(--m-card-border); border-radius: var(--m-radius-sm); box-shadow: var(--m-shadow-lg); background: var(--m-card-bg); } html.modern .select2-results__option--highlighted[aria-selected] { background: var(--primary-site-color); color: var(--auxiliar-text-color); } /* bootstrap-select */ html.modern .bootstrap-select > .dropdown-toggle { border-radius: var(--m-radius-sm); border: 1px solid var(--m-card-border); background: var(--m-input-bg); color: var(--m-text); } html.modern .bootstrap-select .dropdown-menu { border: 1px solid var(--m-card-border); border-radius: var(--m-radius-sm); box-shadow: var(--m-shadow-lg); } /* A `data-container="body"` / `container:'body'` select appends its menu to inside a `.bs-container` — bootstrap-select leaves that wrapper at `z-index:auto`. When the select lives inside a magnific-popup modal (`.mfp-wrap`, z-index 10001/10002 — e.g. the dashboard widget editor's sensor/alarm selects, report/layouts' save & load popups), the auto-level wrapper loses the stacking battle and the open menu paints BEHIND the modal, unreachable. Lift it above the modal layer so the menu overlays as intended; stays below jquery-confirm (99999999) so confirm dialogs remain on top. */ html.modern .bs-container { z-index: 10060; } /* PNotify */ html.modern .ui-pnotify .ui-pnotify-container { border-radius: var(--m-radius); box-shadow: var(--m-shadow-lg); border: 1px solid var(--m-card-border); } /* jquery-confirm (single justified !important — plugin sets radius at high specificity) */ html.modern .jconfirm .jconfirm-box { border-radius: var(--m-radius) !important; box-shadow: var(--m-shadow-lg); } /* ===== iOS toggle switch — brand recolor, app-wide (promoted from dashboard_page.css, Phase 3b) ===== The plugin animates .off/.on (opacity/scale/translate); recolor only, never touch motion. off = neutral grey track, on = brand fill, white handle; theme-aware. Beats .switch-success. */ html.modern .switch .ios-switch { background-color: var(--m-border-color); } html.modern .switch .ios-switch .on-background { background: var(--primary-site-color); } html.modern .switch .ios-switch .state-background { background: var(--m-border-color); border-color: var(--m-border-color); } html.modern .switch .ios-switch .handle { background: #fff; } html.modern[data-theme="dark"] .switch .ios-switch .handle { background: #e7ebf3; }