/* ───────────────────────────────────────────────────────────── EFESO Demo Hub Everything here is scoped under .efeso-hub. The assets folder is shared by every app built from this image (hub, inventory-wizard, sppa), and Dash serves all of it to all of them — unscoped rules would leak into the other two. ───────────────────────────────────────────────────────────── */ .efeso-hub, .efeso-hub-modal { --ground: #FAF8F6; --surface: #FFFFFF; --surface-2: #F2EEEA; --ink: #1A1512; --ink-muted: #6B625B; --ink-faint: #9A918A; --rule: #E6E0D9; --rule-strong: #CFC6BC; --accent: #EE6B00; --accent-ink: #FFFFFF; --accent-soft: #FDEEE0; --ready: #2E7D4F; --ready-soft: #E4F1E9; --waking: #B87400; --waking-soft: #FBF0DC; --asleep: #8A817A; --asleep-soft: #EFEBE7; --down: #B3392A; --down-soft: #FAE9E6; --shadow: 0 1px 2px rgba(26,21,18,.05), 0 6px 20px -8px rgba(26,21,18,.12); --shadow-lg: 0 2px 6px rgba(26,21,18,.07), 0 24px 60px -20px rgba(26,21,18,.28); background: var(--ground); color: var(--ink); min-height: 100vh; padding: 30px 28px 90px; font-size: 15px; line-height: 1.55; } .efeso-hub * { box-sizing: border-box; } /* ── page head ───────────────────────────────────────────── */ .efeso-hub .hub-inner { max-width: 1240px; margin: 0 auto; } .efeso-hub .hub-title { font-size: 27px; font-weight: 650; letter-spacing: -.022em; margin: 0; color: var(--ink); } .efeso-hub .hub-sub { color: var(--ink-muted); font-size: 14.5px; margin: 4px 0 0; max-width: 64ch; } /* ── prep bar ───────────────────────────────────────────────── Sticky, so search and "Wake all" stay reachable down a long catalogue. 4em is the height of the fixed navbar above it; the negative margin and padding let the page scroll behind it without showing a gap at the top. ─────────────────────────────────────────────────────────── */ .efeso-hub .hub-prep { position: sticky; top: 4em; z-index: 25; margin: 24px 0 26px; background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 9px; padding: 16px 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; box-shadow: var(--shadow); } @supports not (position: sticky) { .efeso-hub .hub-prep { position: static; } } .efeso-hub .hub-search { width: 100%; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 8px; padding: 8px 12px; } .efeso-hub .hub-search::placeholder { color: var(--ink-faint); } .efeso-hub .hub-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .efeso-hub .hub-prep-text { flex: 1; min-width: 250px; } .efeso-hub .hub-prep-text b { display: block; font-size: 14.5px; font-weight: 620; } .efeso-hub .hub-prep-text span { color: var(--ink-muted); font-size: 13.5px; } .efeso-hub .hub-readout { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--ink-muted); background: var(--surface-2); border-radius: 6px; padding: 5px 10px; font-variant-numeric: tabular-nums; white-space: nowrap; } .efeso-hub .hub-readout b { color: var(--ready); } /* ── buttons ───────────────────────────────────────────────── Scoped to BOTH .efeso-hub and .efeso-hub-modal. dbc.Modal renders at the end of , outside the page wrapper, so rules scoped only to .efeso-hub never reach the dialog's buttons. ─────────────────────────────────────────────────────────── */ .efeso-hub .hub-btn, .efeso-hub-modal .hub-btn { border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink); border-radius: 7px; padding: 8px 15px; font-size: 13.5px; font-weight: 550; white-space: nowrap; cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.4; transition: background .13s, border-color .13s, color .13s; } .efeso-hub .hub-btn:hover:not(:disabled), .efeso-hub-modal .hub-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); text-decoration: none; } .efeso-hub .hub-btn-primary, .efeso-hub-modal .hub-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } /* Must restate background and colour, not just a filter: the generic .hub-btn:hover rule above sets a light background at equal specificity, which is what turned the primary button white on hover. */ .efeso-hub .hub-btn-primary:hover:not(:disabled), .efeso-hub-modal .hub-btn-primary:hover:not(:disabled) { background: #D75F00; border-color: #D75F00; color: var(--accent-ink); } .efeso-hub .hub-btn:disabled, .efeso-hub-modal .hub-btn:disabled { opacity: .45; cursor: default; } .efeso-hub .hub-btn-block, .efeso-hub-modal .hub-btn-block { width: 100%; text-align: center; } .efeso-hub .hub-link-btn, .efeso-hub-modal .hub-link-btn { background: none; border: 0; color: var(--ink-muted); font-size: 12.5px; padding: 6px 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--rule-strong); } .efeso-hub .hub-link-btn:hover, .efeso-hub-modal .hub-link-btn:hover { color: var(--ink); } /* ── filter chips ────────────────────────────────────────── */ .efeso-hub .hub-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .efeso-hub .hub-chip { border: 1px solid var(--rule); background: var(--surface); color: var(--ink-muted); border-radius: 100px; padding: 6px 14px; font-size: 13px; font-weight: 520; cursor: pointer; transition: all .13s; } .efeso-hub .hub-chip:hover { border-color: var(--rule-strong); color: var(--ink); } .efeso-hub .hub-chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--ground); font-weight: 570; } .efeso-hub .hub-chip .n { opacity: .55; margin-left: 5px; font-variant-numeric: tabular-nums; } /* ── section heads ───────────────────────────────────────── */ .efeso-hub .hub-sec { display: flex; align-items: baseline; gap: 12px; margin: 32px 0 16px; padding-bottom: 9px; border-bottom: 1px solid var(--rule); } .efeso-hub .hub-sec h2 { font-size: 12px; font-weight: 640; letter-spacing: .1em; text-transform: uppercase; margin: 0; color: var(--ink-muted); } .efeso-hub .hub-sec-count { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; } /* ── grid + cards ────────────────────────────────────────── */ .efeso-hub .hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(292px, 1fr)); gap: 18px; } .efeso-hub .hub-empty { grid-column: 1 / -1; text-align: center; padding: 40px 20px; color: var(--ink-faint); font-size: 14px; border: 1.5px dashed var(--rule); border-radius: 10px; } .efeso-hub .hub-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); transition: border-color .15s, transform .15s, box-shadow .15s; } .efeso-hub .hub-card:hover { border-color: var(--rule-strong); transform: translateY(-1px); box-shadow: var(--shadow-lg); } .efeso-hub .hub-card-top { height: 96px; position: relative; background: var(--surface-2); border-bottom: 1px solid var(--rule); overflow: hidden; } .efeso-hub .hub-card-top img { width: 100%; height: 100%; object-fit: cover; display: block; } .efeso-hub .hub-status { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: 100px; font-size: 11px; font-weight: 620; letter-spacing: .02em; } .efeso-hub .hub-status.inline { position: static; } .efeso-hub .hub-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; } .efeso-hub .st-ready { background: var(--ready-soft); color: var(--ready); } .efeso-hub .st-ready .hub-dot { background: var(--ready); } .efeso-hub .st-waking { background: var(--waking-soft); color: var(--waking); } .efeso-hub .st-waking .hub-dot { background: var(--waking); animation: hubPulse 1.1s ease-in-out infinite; } .efeso-hub .st-asleep { background: var(--asleep-soft); color: var(--asleep); } .efeso-hub .st-asleep .hub-dot { background: var(--asleep); } .efeso-hub .st-down { background: var(--down-soft); color: var(--down); } .efeso-hub .st-down .hub-dot { background: var(--down); } /* A start that never answered: same palette as unavailable, but retryable. */ .efeso-hub .st-failed { background: var(--down-soft); color: var(--down); } .efeso-hub .st-failed .hub-dot { background: var(--down); } @keyframes hubPulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } } @media (prefers-reduced-motion: reduce) { .efeso-hub .hub-dot { animation: none !important } } .efeso-hub .hub-card-body { padding: 15px 17px 0; flex: 1; display: flex; flex-direction: column; gap: 7px; } .efeso-hub .hub-card-title { font-size: 15.5px; font-weight: 620; letter-spacing: -.012em; margin: 0; color: var(--ink); } .efeso-hub .hub-card-client { font-size: 10.5px; font-weight: 660; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .efeso-hub .hub-card-client.generic { color: var(--ink-faint); } .efeso-hub .hub-card-desc { font-size: 13.5px; color: var(--ink-muted); margin: 0; } .efeso-hub .hub-card-meta { display: flex; align-items: center; gap: 10px; min-height: 17px; font-size: 11.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; } .efeso-hub .hub-card-foot { padding: 13px 17px 15px; display: flex; gap: 8px; align-items: center; } .efeso-hub .hub-card-foot .hub-btn { flex: 1; } .efeso-hub .hub-bar { height: 3px; background: var(--surface-2); border-radius: 100px; overflow: hidden; flex: 1; } .efeso-hub .hub-bar + span { flex: none; white-space: nowrap; } .efeso-hub .hub-bar span { display: block; height: 100%; background: var(--waking); transition: width .3s linear; } /* ── add tile ────────────────────────────────────────────── */ .efeso-hub .hub-add { border: 1.5px dashed var(--rule-strong); background: transparent; border-radius: 10px; min-height: 262px; cursor: pointer; color: var(--ink-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; transition: all .13s; } .efeso-hub .hub-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .efeso-hub .hub-add .plus { font-size: 27px; line-height: 1; font-weight: 300; } .efeso-hub .hub-add b { font-size: 14px; font-weight: 600; } .efeso-hub .hub-add span { font-size: 12.5px; max-width: 24ch; text-align: center; } /* ── modal chrome ────────────────────────────────────────── */ .efeso-hub-modal .modal-content { border: 1px solid #E6E0D9; border-radius: 12px; box-shadow: 0 24px 60px -20px rgba(26,21,18,.3); } .efeso-hub-modal .modal-header { border-bottom: 1px solid #E6E0D9; padding: 20px 24px 16px; } .efeso-hub-modal .modal-body { padding: 20px 24px; } .efeso-hub-modal .modal-footer { border-top: 1px solid #E6E0D9; padding: 16px 24px; } .efeso-hub-modal .field-label { font-size: 10.5px; font-weight: 660; letter-spacing: .09em; text-transform: uppercase; color: #9A918A; margin: 0 0 7px; } .efeso-hub-modal .prose { font-size: 14px; color: #6B625B; margin: 0; } .efeso-hub-modal .stack { display: flex; flex-direction: column; gap: 22px; } .efeso-hub-modal .res { display: flex; align-items: center; gap: 11px; border: 1px solid #E6E0D9; border-radius: 8px; padding: 10px 13px; text-decoration: none; color: #1A1512; transition: border-color .13s, background .13s; margin-bottom: 7px; } .efeso-hub-modal .res:hover { border-color: #EE6B00; background: #FDEEE0; text-decoration: none; } .efeso-hub-modal .res-ico { width: 28px; height: 28px; border-radius: 6px; flex: none; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: #F2EEEA; color: #6B625B; } .efeso-hub-modal .res-name { font-size: 13.5px; font-weight: 550; display: block; } .efeso-hub-modal .res-sub { font-size: 11.5px; color: #9A918A; } .efeso-hub-modal .res-add { border: 1px dashed #CFC6BC; background: none; color: #6B625B; border-radius: 8px; padding: 10px; font-size: 13px; width: 100%; cursor: pointer; } .efeso-hub-modal .res-add:hover { border-color: #EE6B00; color: #EE6B00; } .efeso-hub-modal .kv { display: grid; grid-template-columns: auto 1fr; gap: 7px 18px; font-size: 13px; margin: 0; } .efeso-hub-modal .kv dt { color: #9A918A; } .efeso-hub-modal .kv dd { margin: 0; color: #1A1512; font-variant-numeric: tabular-nums; } .efeso-hub-modal .hint { font-size: 11.5px; color: #9A918A; margin: 5px 0 0; } .efeso-hub-modal .note { background: #FDEEE0; border: 1px solid #E6E0D9; border-left: 3px solid #EE6B00; border-radius: 7px; padding: 12px 15px; font-size: 13px; color: #6B625B; margin-bottom: 20px; } .efeso-hub-modal .note b { color: #1A1512; } .efeso-hub-modal .form-control:focus { border-color: #EE6B00; box-shadow: 0 0 0 .15rem rgba(238,107,0,.15); } @media (max-width: 640px) { .efeso-hub { padding: 22px 16px 70px; } } /* Destructive action, kept visually distinct from the orange primary so it is never the button you press by reflex. Pushed left, away from Save. */ .efeso-hub .hub-btn-danger, .efeso-hub-modal .hub-btn-danger { border-color: #E3B4AC; color: #B3392A; background: #FFFFFF; margin-right: auto; } .efeso-hub .hub-btn-danger:hover:not(:disabled), .efeso-hub-modal .hub-btn-danger:hover:not(:disabled) { background: #FAE9E6; border-color: #B3392A; color: #B3392A; } /* ── sign-in ────────────────────────────────────────────────── The sign-in page (app/components/login.py). Scoped like the rest of this file: the assets folder is shared by every app built from this image. ─────────────────────────────────────────────────────────── */ .efeso-login { --ground: #FAF8F6; --surface: #FFFFFF; --ink: #1A1512; --ink-muted: #6B625B; --rule: #E6E0D9; --accent: #EE6B00; --accent-dark: #D35F00; min-height: 78vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .efeso-login .efeso-login-card { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 40px 36px 32px; text-align: center; box-shadow: 0 1px 2px rgba(26,21,18,.05), 0 10px 34px -14px rgba(26,21,18,.22); } .efeso-login .efeso-login-logo { height: 42px; margin-bottom: 26px; } .efeso-login .efeso-login-title { font-size: 23px; font-weight: 650; letter-spacing: -.02em; margin: 0; color: var(--ink); } .efeso-login .efeso-login-sub { color: var(--ink-muted); font-size: 14px; margin: 6px 0 26px; } .efeso-login .efeso-login-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 18px; border-radius: 9px; background: var(--accent); color: #fff; text-decoration: none; font-size: 15px; font-weight: 600; transition: background .13s; } .efeso-login .efeso-login-btn:hover { background: var(--accent-dark); color: #fff; } .efeso-login .efeso-login-btn i { font-size: 15px; } .efeso-login .efeso-login-note { color: var(--ink-muted); font-size: 12.5px; margin: 18px 0 0; } .efeso-login .efeso-login-alert { text-align: left; font-size: 13.5px; } /* ── categories on a card ─────────────────────────────────── */ .efeso-hub .hub-card-cats { display: flex; flex-wrap: wrap; gap: 5px; min-height: 16px; } .efeso-hub .hub-cat { font-size: 10.5px; font-weight: 640; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border-radius: 100px; padding: 2px 8px; } .efeso-hub .hub-cat.none { color: var(--ink-faint); background: var(--surface-2); } /* ── settings dialog ──────────────────────────────────────── */ .efeso-hub-modal .set-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule); } .efeso-hub-modal .set-row .grow { flex: 1; min-width: 0; } .efeso-hub-modal .set-row .sub { color: var(--ink-muted); font-size: 12.5px; } .efeso-hub-modal .set-tag { font-size: 10.5px; font-weight: 660; letter-spacing: .05em; text-transform: uppercase; border-radius: 100px; padding: 2px 8px; background: var(--surface-2); color: var(--ink-muted); } .efeso-hub-modal .set-tag.admin { background: var(--accent-soft); color: var(--accent); }