/* ============================================================ * Serve & Charge — modernization overlay * ============================================================ * * This single file is loaded LAST in the host pages * (ServeAndCharge.html / ServeAndCharge-en.html), AFTER all the * Ext JS 2.x theme stylesheets, so it wins the cascade. * * Goal: repaint the 2008-era ExtJS / GWT-Ext look so it doesn't * feel like a Windows XP application. Strictly cosmetic — no * widths, heights, paddings, or margins are changed where ExtJS * measures them in JS, because that would break layout. * * What changes: * - System font stack instead of Tahoma 11px * - Neutral page palette (slate/indigo) instead of #869ca7 * - Flat panel/window/tab/button backgrounds (gradients off) * - Soft shadows + small radii on panels and dialogs * - Visible focus rings on inputs and buttons (a11y) * - Native styled to match (User Admin * and other dialogs that bypass ExtJS use raw HTML controls) * * What does NOT change: * - HTML structure (this file is the only addition aside from a * single tag in each host page) * - ExtJS / GWT widget JS * - Element box dimensions, paddings, or margins (ExtJS pixel- * measures these and breaks if we touch them) * - Icon sprites (.icon-*, expand/collapse arrows, tree elbows) * * Rollback: delete this file + the matching line from each * host page. Nothing else depends on it. * ============================================================ */ :root { --sac-bg-page: #eef1f5; --sac-bg-panel: #ffffff; --sac-bg-soft: #f5f7fa; --sac-bg-stripe: #fafbfc; --sac-border: #dde2e8; --sac-border-strong: #b9c2cc; --sac-text: #1f2933; --sac-text-muted: #52606d; --sac-text-on-accent: #ffffff; --sac-accent: #2563eb; --sac-accent-soft: #e7efff; --sac-accent-strong: #1e4fc8; --sac-header-bg: #2f4f7f; --sac-header-bg-2: #3a5a8c; --sac-footer-bg: #1f2933; --sac-brand-logo: url("https://local-cdn.labtagon.com/www/wp-content/uploads/LabtagonLogo_transition.svg"); --sac-brand-dark: #182338; --sac-brand-muted: #667085; --sac-shadow-sm: 0 1px 2px rgba(15,23,42,.06); --sac-shadow-md: 0 1px 2px rgba(15,23,42,.05), 0 4px 12px rgba(15,23,42,.07); --sac-shadow-lg: 0 10px 28px rgba(15,23,42,.18); --sac-radius: 5px; --sac-radius-sm: 3px; --sac-font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --sac-font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Consolas, "Liberation Mono", monospace; } /* ---- Page background ---- * The host pages set as a presentational * HTML attribute. CSS wins, but use !important to be sure. */ html, body { background: var(--sac-bg-page) !important; color: var(--sac-text); font-family: var(--sac-font); } /* ---- Typography ---- * Force the system font stack and a slightly larger base size * everywhere ExtJS / GWT widgets pin a font. Do NOT change * line-height — ExtJS measures rows by it. */ body, table, table td, select, input, button, textarea, .gwt-HTML, .gwt-BODY, .gwt-TextBox, .gwt-TextArea, .gwt-ListBox, .gwt-Button, .gwt-DialogBox, .gwt-DialogBox .Caption, .gwt-Label, .gwt-DecoratedTabBar .gwt-Label, .x-panel, .x-panel-header, .x-panel-body, .x-window, .x-window-header, .x-window-header-text, .x-grid3, .x-grid3-cell, .x-grid3-hd-inner, .x-toolbar, .x-toolbar button, .x-toolbar .ytb-text, .x-form-text, .x-form-textarea, .x-form-field, .x-btn, .x-btn-text, .x-menu-item, .x-menu-list, .x-menu-list-item, .x-tree-node, .x-tree-node a, .x-tree-node-anchor, .x-tab-strip-text, .x-tab-strip-top a, .x-tab-strip-top span, .x-statusbar, .x-statusbar .x-statusbar-text { font-family: var(--sac-font) !important; } body, table, table td { font-size: 12.5px; color: var(--sac-text); } /* ============================================================ * Application masthead * * The GWT frame still autoloads `goeing/header.html`, which is * generated from the module's public assets. Repaint the legacy * three-image table here instead of editing generated output or * GWT source. Keep the external footprint at 82px: Ext lays out * the north region around this fixed header height. * ============================================================ */ body table:has(img[src$="messe_li.jpg"]):has(img[src$="messe_mi.png"]):has(img[src$="getinge.jpg"]) { position: relative; width: 100% !important; height: 82px !important; min-height: 82px !important; max-height: 82px !important; border-collapse: collapse !important; table-layout: fixed !important; overflow: hidden !important; background: radial-gradient(circle at 12% 20%, rgba(37, 99, 235, .14), transparent 30%), linear-gradient(135deg, #ffffff 0%, #f8fbff 52%, #eef4ff 100%) !important; border: 0 !important; border-bottom: 1px solid rgba(37, 99, 235, .16) !important; box-shadow: 0 8px 24px rgba(24, 35, 56, .08) !important; } body table:has(img[src$="messe_li.jpg"]):has(img[src$="messe_mi.png"]):has(img[src$="getinge.jpg"]) td { position: relative; height: 82px !important; padding: 0 28px !important; vertical-align: middle !important; background: transparent !important; border: 0 !important; color: var(--sac-brand-dark) !important; white-space: nowrap; } body table:has(img[src$="messe_li.jpg"]):has(img[src$="messe_mi.png"]):has(img[src$="getinge.jpg"]) img { width: 1px !important; height: 1px !important; max-width: 1px !important; max-height: 1px !important; opacity: 0 !important; } body table:has(img[src$="messe_li.jpg"]):has(img[src$="messe_mi.png"]):has(img[src$="getinge.jpg"]) td:first-child::before { content: ""; display: inline-block; width: 244px; height: 52px; vertical-align: middle; background: var(--sac-brand-logo) left center / contain no-repeat; } body table:has(img[src$="messe_li.jpg"]):has(img[src$="messe_mi.png"]):has(img[src$="getinge.jpg"]) td:nth-child(2)::before { content: "Serve & Charge"; display: block; margin-bottom: 4px; color: var(--sac-brand-dark); font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } body table:has(img[src$="messe_li.jpg"]):has(img[src$="messe_mi.png"]):has(img[src$="getinge.jpg"]) td:nth-child(2)::after { content: "Service accounting platform"; display: block; color: var(--sac-brand-muted); font-size: 11px; font-weight: 600; letter-spacing: .14em; line-height: 1.1; text-transform: uppercase; } /* ============================================================ * ExtJS panels (the four "Required data / Base charging / ..." * boxes on the home view, plus every accordion section) * ============================================================ */ .x-panel { background-color: var(--sac-bg-panel) !important; } /* Panel header — kill the indigo gradient sprite, paint a flat slate */ .x-panel-header, .x-panel-tl .x-panel-header, .x-panel-tc { background: var(--sac-header-bg) !important; background-image: none !important; border-color: var(--sac-header-bg-2) !important; color: var(--sac-text-on-accent) !important; } .x-panel-header span.x-panel-header-text, .x-panel-header .x-panel-header-text { color: var(--sac-text-on-accent) !important; font-weight: 600 !important; letter-spacing: 0.01em; } /* Ext panel headers. * * Some panel titles are rendered directly on * `.x-panel-header.x-unselectable` instead of inside a nested * `.x-panel-header-text` span. The old sprite frame expected the * left cap to provide visual breathing room; once the sprite is gone, * titles like "Required data" sit too close to the left edge. */ body .x-panel-header, body .x-panel-header.x-unselectable, body .x-panel-tl .x-panel-header, body .x-panel-tl .x-panel-header.x-unselectable { padding-left: 8px !important; padding-right: 8px !important; } /* Panel corners / sides (the sprite-based rounded indigo frames) */ .x-panel-tl, .x-panel-tr, .x-panel-bl, .x-panel-br, .x-panel-tc, .x-panel-bc, .x-panel-ml, .x-panel-mr { background-image: none !important; } .x-panel-bwrap, .x-panel-mc { background-color: var(--sac-bg-panel) !important; } .x-panel-body { background-color: var(--sac-bg-panel) !important; } /* ============================================================ * Ext windows (login dialog, error dialogs, modal forms) * ============================================================ */ .x-window { background-color: var(--sac-bg-panel) !important; border: 1px solid var(--sac-border-strong) !important; border-radius: var(--sac-radius) !important; box-shadow: var(--sac-shadow-lg) !important; } /* Window 9-cell sprite frame — flatten everything to white; * the title row is repainted by the .x-window-tc / .x-window-header * block below. */ .x-window-tl, .x-window-tr, .x-window-bl, .x-window-br, .x-window-bc, .x-window-ml, .x-window-mr, .x-window-mc { background-image: none !important; background-color: var(--sac-bg-panel) !important; border: none !important; } .x-window-tc, .x-window-header { background: var(--sac-header-bg) !important; background-image: none !important; color: var(--sac-text-on-accent) !important; border-bottom: 1px solid var(--sac-header-bg-2) !important; } /* Top-left and top-right sprite cells of the window header carry * the rounded-corner gradient sprite. Repaint them slate so the * title bar reads as one continuous solid bar. */ .x-window .x-window-tl, .x-window .x-window-tr { background-color: var(--sac-header-bg) !important; } /* Brute-force nuker: kill background-images on every node Ext * uses for the title-bar 9-slice frame on both windows AND * panels. The "going" indigo theme layers `panel_white-top- * bottom.gif` (a dotted texture) on .x-panel-header and bleeds * it through. */ .x-window-tl, .x-window-tc, .x-window-tr, .x-window-bl, .x-window-bc, .x-window-br, .x-window-ml, .x-window-mc, .x-window-mr, .x-window-header, .x-panel-tl, .x-panel-tc, .x-panel-tr, .x-panel-bl, .x-panel-bc, .x-panel-br, .x-panel-ml, .x-panel-mc, .x-panel-mr, .x-panel-header, .x-window-tl .x-window-header, .x-panel-tl .x-panel-header { background-image: none !important; } .x-window-header-text { color: var(--sac-text-on-accent) !important; font-weight: 600 !important; } /* Modal mask: cleaner, lighter overlay so the page behind the * login dialog stays readable. The original Ext theme renders an * almost-opaque grey panel; this drops it to a subtle slate tint. */ .ext-el-mask, .x-mask { background: rgba(31, 41, 51, .35) !important; opacity: 1 !important; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* ============================================================ * Tabs (the "Home" + "User administration" tab strip at the top * of the main content area) * ============================================================ */ .x-tab-panel-header, .x-tab-strip-wrap, .x-tab-strip-top { background: transparent !important; background-image: none !important; border-bottom: 1px solid var(--sac-header-bg-2) !important; } .x-tab-strip li { background: var(--sac-bg-soft) !important; background-image: none !important; border: 1px solid var(--sac-border) !important; border-bottom: none !important; border-radius: var(--sac-radius) var(--sac-radius) 0 0 !important; } .x-tab-strip li.x-tab-strip-active { background: var(--sac-header-bg) !important; border-color: var(--sac-header-bg-2) !important; } .x-tab-strip-active .x-tab-strip-text, .x-tab-strip li.x-tab-strip-active .x-tab-strip-text, .x-tab-strip li.x-tab-strip-active a { color: var(--sac-text-on-accent) !important; font-weight: 600 !important; } .x-tab-strip-text { color: var(--sac-text) !important; } /* The sprite-based tab corners — flatten them all */ .x-tab-strip li .x-tab-left, .x-tab-strip li .x-tab-right, .x-tab-strip li .x-tab-strip-inner, .x-tab-strip-active .x-tab-left, .x-tab-strip-active .x-tab-right, .x-tab-strip-over .x-tab-left, .x-tab-strip-over .x-tab-right, .x-tab-strip-bottom li .x-tab-left, .x-tab-strip-bottom li .x-tab-right { background-image: none !important; } /* ============================================================ * Toolbars * * Used both at the top of grids/panels (button bars) AND as the * application footer (Menu / User: admin / Version: debug — see * GoeingFrame.createFooter()). Style as a single neutral light * surface; text is dark for contrast. The dark slate footer * idea was abandoned because the same .x-toolbar class is * reused everywhere and a south-only selector isn't reliable. * ============================================================ */ .x-toolbar { background: var(--sac-bg-soft) !important; background-image: none !important; border-color: var(--sac-border) !important; color: var(--sac-text) !important; } /* Toolbar text items (e.g. footer labels "User:", "Version:", * "admin", "debug"). Default Ext color is faded/legacy white; * force readable dark text on the light bar. */ .x-toolbar .ytb-text, .x-toolbar .x-toolbar-text, .x-toolbar .x-form-item, .x-toolbar td.ytb-sep, .x-toolbar .xtb-sep { color: var(--sac-text) !important; font-family: var(--sac-font) !important; } /* Toolbar separators */ .x-toolbar .ytb-sep, .x-toolbar .xtb-sep, .x-toolbar .x-toolbar-separator { border-color: var(--sac-border-strong) !important; } /* ============================================================ * Ext buttons (the green-checkmark Login, the red-X Close, etc.) * * Ext 2.x renders each button as a 3x3 with a 9-slice * sprite for the rounded gradient. The icon (icon-accept, * icon-delete, ...) lives as a background-image on the inner * `.x-btn-text`