/*! * jQuery StatusGrid Plugin v1.3.0 — Stylesheet * Link this file in your before initialising the plugin. * * Theme switching: * Add [data-bs-theme=dark] or [data-bs-theme=light] to any ancestor element (e.g. ). * Switching that class instantly re-themes the dashboard — no JS needed. * * * */ /* ============================================================ STRUCTURE — layout only, no colours (works in both themes) ============================================================ */ .sg-root { display: flex; flex-direction: column; font-family: Roboto, Arial, sans-serif; overflow: hidden; border-radius: 4px; } /* Topbar */ .sg-topbar { height: 40px; display: flex; align-items: center; padding: 0 12px; gap: 10px; flex-shrink: 0; } .sg-logo { width: 22px; height: 22px; background: #e05f0a; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; } .sg-topbar-title { font-size: 14px; font-weight: 500; } .sg-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 12px; } /* Toolbar */ .sg-toolbar { padding: 8px 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex-shrink: 0; } /* Group tabs */ .sg-group-tabs { display: flex; gap: 0; } .sg-group-btn { padding: 4px 14px; font-size: 12px; cursor: pointer; transition: all 0.12s; } .sg-group-btn:first-child { border-radius: 3px 0 0 3px; } .sg-group-btn:last-child { border-radius: 0 3px 3px 0; } .sg-group-btn + .sg-group-btn { border-left: none; } /* Status filter buttons */ .sg-filter-group { display: flex; gap: 6px; } .sg-filter-btn { padding: 4px 12px; font-size: 12px; border-radius: 3px; cursor: pointer; transition: all 0.12s; display: flex; align-items: center; gap: 5px; } .sg-filter-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; } /* Tile size slider */ .sg-size-control { display: flex; align-items: center; gap: 8px; margin-left: auto; } .sg-size-label { font-size: 11px; white-space: nowrap; } .sg-size-slider { -webkit-appearance: none; appearance: none; width: 120px; height: 4px; border-radius: 2px; outline: none; cursor: pointer; } .sg-size-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #e05f0a; cursor: pointer; } .sg-size-val { font-size: 11px; min-width: 28px; font-weight: 700; } /* Stats bar */ .sg-stats { padding: 6px 14px; display: flex; gap: 20px; align-items: center; font-size: 11px; flex-wrap: wrap; flex-shrink: 0; } .sg-stat-item { display: flex; align-items: center; gap: 6px; } .sg-stat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .sg-stat-num { font-size: 14px; font-weight: 700; } /* Content area */ .sg-content { flex: 1; overflow-y: auto; padding: 12px 14px; } .sg-section { margin-bottom: 10px; } .sg-section-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; padding-left: 7px; border-left: 3px solid #e05f0a; } .sg-grid { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; } /* Tiles */ .sg-tile { border-radius: 3px; cursor: pointer; transition: filter 0.1s, transform 0.1s; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6px 4px; flex-shrink: 0; overflow: hidden; } .sg-tile:hover { filter: brightness(1.15); transform: scale(1.04); z-index: 5; } .sg-tile-name { font-weight: 700; font-style: italic; line-height: 1.2; color: #fff; } .sg-tile-meta { color: rgba(255, 255, 255, 0.88); line-height: 1.35; } /* Built-in status tile colours */ .sg-status-up { background: #299438; } .sg-status-down { background: #c4162a; } .sg-status-warn { background: #e68b09; } /* Example custom status tile colours — add your own following this pattern */ .sg-status-provision { background: #1f6fbf; } .sg-status-deploy { background: #1f6fbf; } .sg-status-maint { background: #7b5ea7; } .sg-status-inactive { background: #6b7594; } /* Tooltip */ .sg-tooltip { position: fixed; border-radius: 5px; padding: 10px 14px; font-size: 11px; pointer-events: none; opacity: 0; transition: opacity 0.12s; z-index: 99999; min-width: 200px; } .sg-tt-name { font-size: 13px; font-weight: 700; font-style: italic; margin-bottom: 8px; } .sg-tt-row { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; } .sg-tt-val { font-weight: 500; text-align: right; max-width: 120px; word-break: break-word; } /* Tooltip status colours — same in both themes */ .sg-tt-status-up { color: #6fcf7a; font-weight: 700; } .sg-tt-status-down { color: #f08090; font-weight: 700; } .sg-tt-status-warn { color: #f4c36a; font-weight: 700; } /* Empty state */ .sg-empty { font-size: 13px; text-align: center; padding: 32px; width: 100%; } /* ============================================================ DARK THEME — [data-bs-theme=dark] on any ancestor element ============================================================ */ [data-bs-theme=dark] .sg-root { background: #161719; color: #fff; } [data-bs-theme=dark] .sg-topbar { background: #1a1b1e; border-bottom: 1px solid #2c2e33; } [data-bs-theme=dark] .sg-topbar-title { color: #e0e0e0; } [data-bs-theme=dark] .sg-topbar-right { color: #7b7f89; } [data-bs-theme=dark] .sg-toolbar { background: #1a1b1e; border-bottom: 1px solid #262829; } [data-bs-theme=dark] .sg-group-btn { border: 1px solid #383a3e; background: #262729; color: #afb3bb; } [data-bs-theme=dark] .sg-group-btn:hover:not(.sg-active) { background: #2e3035; color: #e0e0e0; } [data-bs-theme=dark] .sg-filter-btn { border: 1px solid #383a3e; background: #262729; color: #afb3bb; } [data-bs-theme=dark] .sg-filter-btn:hover { background: #2e3035; color: #e0e0e0; } [data-bs-theme=dark] .sg-size-label { color: #7b7f89; } [data-bs-theme=dark] .sg-size-slider { background: #383a3e; } [data-bs-theme=dark] .sg-size-val { color: #afb3bb; } [data-bs-theme=dark] .sg-stats { background: #1a1b1e; border-bottom: 1px solid #2c2e33; } [data-bs-theme=dark] .sg-stat-item { color: #7b7f89; } [data-bs-theme=dark] .sg-section-label { color: #7b7f89; } [data-bs-theme=dark] .sg-tooltip { background: #1e2030; border: 1px solid #383a3e; box-shadow: 0 6px 24px rgba(0,0,0,0.55); } [data-bs-theme=dark] .sg-tt-name { color: #fff; } [data-bs-theme=dark] .sg-tt-row { color: #7b7f89; border-bottom: 1px solid #2a2c34; } [data-bs-theme=dark] .sg-tt-row:last-child { border-bottom: none; } [data-bs-theme=dark] .sg-tt-val { color: #e0e0e0; } [data-bs-theme=dark] .sg-empty { color: #7b7f89; } /* ============================================================ LIGHT THEME — [data-bs-theme=light] on any ancestor element ============================================================ */ [data-bs-theme=light] .sg-root { background: #f4f5f7; color: #1a1a2e; } [data-bs-theme=light] .sg-topbar { background: #ffffff; border-bottom: 1px solid #d2d6de; } [data-bs-theme=light] .sg-topbar-title { color: #2d3748; } [data-bs-theme=light] .sg-topbar-right { color: #718096; } [data-bs-theme=light] .sg-toolbar { background: #ffffff; border-bottom: 1px solid #e2e8f0; } [data-bs-theme=light] .sg-group-btn { border: 1px solid #d2d6de !important; background: #ffffff !important; color: #4a5568 !important; } [data-bs-theme=light] .sg-group-btn:hover:not(.sg-active) { background: #edf2f7 !important; color: #2d3748 !important; } [data-bs-theme=light] .sg-filter-btn { border: 1px solid #d2d6de !important; background: #ffffff !important; color: #4a5568 !important; } [data-bs-theme=light] .sg-filter-btn:hover { background: #edf2f7 !important; color: #2d3748 !important; } [data-bs-theme=light] .sg-size-label { color: #718096; } [data-bs-theme=light] .sg-size-slider { background: #d2d6de; } [data-bs-theme=light] .sg-size-val { color: #4a5568; } [data-bs-theme=light] .sg-stats { background: #ffffff; border-bottom: 1px solid #e2e8f0; } [data-bs-theme=light] .sg-stat-item { color: #718096; } [data-bs-theme=light] .sg-section-label { color: #718096; } [data-bs-theme=light] .sg-tooltip { background: #ffffff; border: 1px solid #d2d6de; box-shadow: 0 4px 16px rgba(0,0,0,0.12); } [data-bs-theme=light] .sg-tt-name { color: #1a202c; } [data-bs-theme=light] .sg-tt-row { color: #718096; border-bottom: 1px solid #e2e8f0; } [data-bs-theme=light] .sg-tt-row:last-child { border-bottom: none; } [data-bs-theme=light] .sg-tt-val { color: #2d3748; } [data-bs-theme=light] .sg-empty { color: #a0aec0; } /* ============================================================ ACTIVE / SELECTED STATE — must win in BOTH themes ============================================================ The light theme's base button rules use !important at the same specificity as a plain ".sg-group-btn.sg-active" rule, so a simple colour-only override placed earlier in the file loses the cascade tie and the "selected" look silently disappears in light mode (this was the actual bug behind "can't tell which button is selected"). Adding the [data-bs-theme] attribute bumps specificity above every themed base/hover rule above, and this block being last in the file wins any remaining ties — so it works regardless of theme or declaration order. Status filter buttons (.sg-factive-active) get their highlight colour from JS (jquery.statusgrid.js _setActiveFilterBtn), not a fixed CSS rule — the plugin supports arbitrary custom status keys from statusMap, so there's no fixed set of colours to hardcode here. This block only supplies the shared "selected" chrome (bold text, thicker border); JS sets background/border/text colour inline with setProperty(..., 'important') so it also beats the themed !important base rules. ============================================================ */ [data-bs-theme] .sg-group-btn.sg-active { background: #e05f0a !important; border-color: #e05f0a !important; color: #fff !important; font-weight: 700; } [data-bs-theme] .sg-filter-btn.sg-factive-all { background: #e05f0a !important; border-color: #e05f0a !important; color: #fff !important; } [data-bs-theme] .sg-filter-btn.sg-factive-all, [data-bs-theme] .sg-filter-btn.sg-factive-active { font-weight: 700; border-width: 2px !important; padding: 3px 11px; /* 1px less than base to offset the thicker border */ } /* Keep the status dot visible against a same-coloured active background */ .sg-filter-btn.sg-factive-active .sg-filter-dot { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7); }