/* ========================================================================== Fabric Studio Manager for GCP -- design tokens Palette: Fortinet-red accent on a light, clinical "security console" base. Type: Space Grotesk (display/nav) + Inter (body/UI) + JetBrains Mono (data) Signature motif: pulsing status dots + hairline "circuit trace" dividers, echoing network/security monitoring consoles. ========================================================================== */ :root { --flb-red: #DA1A32; --flb-red-dark: #A8101F; --flb-red-tint: #FDEBEC; --flb-ink: #0F2337; --flb-ink-soft: #1B3A54; --flb-text-primary: #0F2337; --flb-text-secondary: #1B3A54; --flb-slate: #55697A; --flb-slate-light: #8797A5; --flb-bg: #F2F5F7; --flb-card: #FFFFFF; --flb-border: #E2E8ED; --flb-border-strong: #CBD5DD; --flb-green: #1B9C6E; --flb-green-tint: #E7F7F0; --flb-amber: #DC8B1E; --flb-amber-tint: #FDF3E4; --flb-gray: #94A3AF; --flb-gray-tint: #EEF1F3; --flb-blue: #1E6FD9; --flb-blue-tint: #E8F0FD; /* API debug log method colors only (Logs > API debug) -- aqua for PATCH, yellow for SSH. Not reused elsewhere, so these exist purely to keep that one table's color-coding theme-aware in both palettes rather than hardcoding a color that'd look wrong in dark mode. */ --flb-aqua: #2FA894; --flb-aqua-tint: #E3F6F2; --flb-yellow: #B08900; --flb-yellow-tint: #FBF3D8; /* Scheduler calendar's Saturday/Sunday column tint -- deliberately its own variable rather than reusing --flb-gray-tint/.cal-cell--out's color: those mark days OUTSIDE the viewed month (a muted, receded look), while this marks weekEND days WITHIN it (a "notice me" highlight) -- reusing either would make the two mean the same thing visually when they don't. */ --cal-weekend-bg: #EEF4FC; /* Public-holiday cell tint (Scheduler's "Show holidays" menu) -- its own color (a soft lavender, not used anywhere else in this app) so a holiday reads as its own distinct thing rather than blending into the weekend tint above or looking like a status color borrowed from somewhere else. */ --cal-holiday-bg: #F1EDFB; --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif; --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --shadow-card: 0 1px 2px rgba(15,35,55,.04), 0 6px 20px rgba(15,35,55,.06); --shadow-pop: 0 10px 40px rgba(15,35,55,.18); } /* Dark ("Night") theme -- applied via a data-theme attribute on , set by JS reading a long-lived cookie so it's remembered across logins, not just within one session. The login screen never gets this attribute, so it always stays on the light palette regardless of what a user picked after signing in. --flb-ink/--flb-ink-soft are left alone here since they're used as intentionally-dark BACKGROUNDS (sidebar, primary buttons, toast) that already look right in both themes -- only the surface colors (bg/card/border) and the dedicated text-color variables actually flip. */ html[data-theme="dark"] { --flb-red: #FF5A70; --flb-red-dark: #E23A50; --flb-red-tint: #3A1620; --flb-text-primary: #E8EDF2; --flb-text-secondary: #B7C4CF; --flb-slate: #93A3B0; --flb-slate-light: #6B7C8A; --flb-bg: #0C141C; --flb-card: #16212C; --flb-border: #2A3A48; --flb-border-strong: #3C4F5E; --flb-green: #3DD9A0; --flb-green-tint: #113328; --flb-amber: #F2A93C; --flb-amber-tint: #3A2A10; --flb-gray: #8394A2; --flb-gray-tint: #1E2B37; --flb-blue: #6FA8FF; --flb-blue-tint: #16283C; --flb-aqua: #5FD6C0; --flb-aqua-tint: #123B33; --flb-yellow: #E8C547; --flb-yellow-tint: #3A3010; /* Noticeably lighter/bluer than .cal-cell--out's dark-mode background (#101B24) on purpose -- a weekend should read as highlighted, not as receded the way an out-of-month day does. */ --cal-weekend-bg: #17293D; /* Same reasoning as --cal-weekend-bg above -- a lighter, more purple- leaning tint than the base card color, distinct from both it and the weekend tint, so a holiday still reads as its own thing here. */ --cal-holiday-bg: #241B36; --shadow-card: 0 1px 2px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.4); --shadow-pop: 0 10px 40px rgba(0,0,0,.55); } html[data-theme="dark"] body { background: var(--flb-bg); } html[data-theme="dark"] .cal-cell--out { background: #101B24; } html[data-theme="dark"] thead th { background: #101B24; } html[data-theme="dark"] .btn-outline { background: transparent; } html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: #101B24; border-color: var(--flb-border); } html[data-theme="dark"] .field input:focus, html[data-theme="dark"] .field select:focus, html[data-theme="dark"] .field textarea:focus { background: #101B24; } html[data-theme="dark"] .topbar { background: var(--flb-card); } html[data-theme="dark"] .modal, html[data-theme="dark"] .modal-backdrop .modal { background: var(--flb-card); } html[data-theme="dark"] .btn-danger { background: transparent; } html[data-theme="dark"] .topbar-dropdown { background: var(--flb-card); } html[data-theme="dark"] .toast-stack .toast { background: var(--flb-card); border: 1px solid var(--flb-border); } /* .section-note's background already flips via --flb-amber-tint, but its text/border colors were hardcoded for the light (pale amber bg / dark brown text) combination -- against the dark theme's much darker amber tint, that same brown text has poor contrast and reads as barely legible, which matters here since this is also how error messages are shown throughout the app. */ html[data-theme="dark"] .section-note { color: var(--flb-amber); border-color: #5A4420; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-body); background: var(--flb-bg); color: var(--flb-text-primary); -webkit-font-smoothing: antialiased; } h1, h2, h3, .display { font-family: var(--font-display); letter-spacing: -0.01em; } code, .mono { font-family: var(--font-mono); } a { color: inherit; } button { font-family: inherit; } :focus-visible { outline: 2px solid var(--flb-red); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid transparent; font-weight: 600; font-size: 13.5px; cursor: pointer; transition: transform .12s ease, background .15s ease, box-shadow .15s ease; white-space: nowrap; } /* Inline icon markup (e.g. ICONS.upload) has no intrinsic size of its own -- without this, an dropped into a .btn (as opposed to .icon-btn, which already sizes its svg below) falls back to the browser's default replaced-element size and renders huge. */ .btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--flb-red); color: #fff; box-shadow: 0 2px 8px rgba(218,26,50,.28); } .btn-primary:hover { background: var(--flb-red-dark); } .btn-secondary { background: var(--flb-ink); color: #fff; } .btn-secondary:hover { background: var(--flb-ink-soft); } .btn-outline { background: #fff; color: var(--flb-text-primary); border-color: var(--flb-border-strong); } .btn-outline:hover { border-color: var(--flb-red); color: var(--flb-red); } .btn-danger { background: #fff; color: var(--flb-red); border-color: var(--flb-red-tint); } .btn-danger:hover { background: var(--flb-red-tint); } .btn-sm { padding: 6px 12px; font-size: 12.5px; } .btn-block { width: 100%; } .btn:disabled { opacity: .5; cursor: not-allowed; } .icon-btn { padding: 6px; border-radius: var(--radius-sm); background: transparent; border: 1px solid var(--flb-border); cursor: pointer; color: var(--flb-slate); } .icon-btn:hover { border-color: var(--flb-red); color: var(--flb-red); } .icon-btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; } /* A smaller variant for an icon-btn that needs to sit inline with regular body text rather than at the default ~30px (padding + border + a 16px svg) size -- same idea as .ip-copy-row's own icon-btn override, just as a reusable class instead of scoped to one parent. */ .icon-btn-sm { width: 20px; height: 20px; padding: 0; } .icon-btn-sm svg { width: 12px; height: 12px; } .icon-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; } /* ---------- Auth pages ---------- */ .auth-body { background: var(--flb-ink); } .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 24px; background: radial-gradient(1200px 600px at 15% -10%, rgba(218,26,50,.25), transparent 60%), radial-gradient(900px 500px at 110% 110%, rgba(255,255,255,.06), transparent 60%), var(--flb-ink); } .auth-trace { position: absolute; inset: 0; opacity: .35; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(700px 500px at 30% 30%, #000, transparent 70%); } .auth-card { position: relative; width: 100%; max-width: 400px; background: #fff; border-radius: var(--radius-lg); padding: 36px 34px 30px; box-shadow: var(--shadow-pop); } .brand-mark { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; } .brand-logo-img { height: 72px; width: auto; flex: 0 0 auto; display: block; } .brand-name { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--flb-text-primary); line-height: 1.1; } .brand-sub { font-size: 11.5px; color: var(--flb-slate); letter-spacing: .03em; text-transform: uppercase; } .brand-version { font-family: var(--font-mono); font-size: 10px; color: var(--flb-slate-light); letter-spacing: .02em; margin-top: 3px; } .auth-card h1 { font-size: 22px; margin: 0 0 6px; } .auth-copy { color: var(--flb-slate); font-size: 13.5px; margin: 0 0 20px; } .auth-form { display: flex; flex-direction: column; gap: 14px; } .field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--flb-text-secondary); min-width: 0; } .field input, .field select, .field textarea { font: inherit; font-size: 14px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--flb-border-strong); background: #fbfcfd; color: var(--flb-text-primary); width: 100%; max-width: 100%; } .field select { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--flb-red); background: #fff; } /* input[type=file] inherits the same 10px/12px padding as every other field above, but a native file input renders that padding around its whole control INCLUDING the browser's own "Choose file" button, which inflates the whole thing to a much bigger control than any other field on the same form. Overridden down to a compact size, with the native button itself restyled via ::file-selector-button to match this app's own small outline buttons instead of the browser default. */ .field input[type="file"] { padding: 5px 8px; font-size: 12.5px; } .field input[type="file"]::file-selector-button { font: inherit; font-size: 12px; padding: 5px 10px; margin-right: 10px; border-radius: var(--radius-sm); border: 1px solid var(--flb-border-strong); background: var(--flb-bg); color: var(--flb-text-primary); cursor: pointer; } .field input[type="file"]::file-selector-button:hover { background: var(--flb-gray-tint); } .password-field { position: relative; display: flex; } .password-field input { padding-right: 38px; } .password-toggle-btn { position: absolute; right: 0; top: 0; bottom: 0; width: 36px; padding: 0; background: none; border: none; color: var(--flb-slate); cursor: pointer; display: flex; align-items: center; justify-content: center; } .password-toggle-btn:hover { color: var(--flb-red); } .password-toggle-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; } .password-toggle-btn .icon-eye-off { display: none; } .password-toggle-btn.is-revealed .icon-eye { display: none; } .password-toggle-btn.is-revealed .icon-eye-off { display: block; } /* A copy icon inside a .password-field wrapper -- sits at the far right (right: 0) when it's the only button (e.g. FortiFlex API ID, a plain text field with nothing to reveal/hide), or shifts one slot left (.field-copy-btn--with-toggle, right: 36px) to sit beside the show/hide eye button on an actual password field without the two overlapping -- see passwordFieldHtml's own copyable option. */ .field-copy-btn { position: absolute; right: 0; top: 0; bottom: 0; width: 36px; padding: 0; background: none; border: none; color: var(--flb-slate); cursor: pointer; display: flex; align-items: center; justify-content: center; } .field-copy-btn:hover { color: var(--flb-red); } .field-copy-btn svg { width: 15px; height: 15px; } .field-copy-btn.field-copy-btn--with-toggle { right: 36px; } .password-field.has-copy input { padding-right: 72px; } .auth-foot { margin-top: 18px; font-size: 12px; color: var(--flb-slate-light); text-align: center; } .alert { padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 14px; } .alert-error { background: var(--flb-red-tint); color: var(--flb-red-dark); border: 1px solid #f6c8cc; } /* ---------- Global in-flight progress bar (top of viewport) ---------- */ .top-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100; overflow: hidden; opacity: 0; transition: opacity .25s ease .1s; pointer-events: none; } .top-progress.active { opacity: 1; transition-delay: 0s; } .top-progress .bar { position: absolute; top: 0; height: 100%; width: 34%; left: -34%; background: linear-gradient(90deg, var(--flb-red), var(--flb-red-dark)); box-shadow: 0 0 10px rgba(218,26,50,.55); border-radius: 0 4px 4px 0; } .top-progress.active .bar { animation: topProgressSlide 1.15s cubic-bezier(.4,0,.2,1) infinite; } @keyframes topProgressSlide { 0% { left: -34%; width: 28%; } 55% { left: 45%; width: 38%; } 100% { left: 100%; width: 28%; } } /* ---------- App shell ---------- */ .app-body { overflow: hidden; } .app-shell { display: flex; height: 100vh; } .sidebar { width: 232px; flex: 0 0 232px; background: var(--flb-ink); color: #fff; display: flex; flex-direction: column; padding: 18px 14px; } .brand-mark--sidebar { padding: 4px 6px 18px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 12px; cursor: pointer; } .brand-mark--sidebar .brand-logo-img { height: 58px; } .brand-logo-circle { width: 70px; height: 70px; border-radius: 50%; background: #fff; border: 1px solid var(--flb-red); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; } .brand-logo-circle .brand-logo-img { height: 64px; } /* Centered within #content (the main content viewport, to the right of the sidebar and below the topbar) and sized in JS on every hover -- 75% of whichever of #content's current width/height is smaller, so it always fits fully on screen regardless of window size. left/top/ width/height are all set inline by wireLogoHoverAndAbout(); only the fade/scale-in look lives here. */ .logo-hover-preview { position: fixed; z-index: 400; pointer-events: none; opacity: 0; transform: scale(.92); transition: opacity .12s ease, transform .12s ease; filter: drop-shadow(0 10px 28px rgba(0,0,0,.35)); } .logo-hover-preview.visible { opacity: 1; transform: scale(1); } .logo-hover-preview img { display: block; width: 100%; height: 100%; object-fit: contain; } /* The About popup opened by clicking the sidebar logo -- logo enlarged on the left (almost the modal's own height), identity/version/credit/ disclaimer stacked on the right. */ .about-modal { display: flex; gap: 28px; align-items: center; } .about-modal-logo { width: 300px; height: 300px; object-fit: contain; flex: 0 0 auto; } .about-modal-info { min-width: 0; flex: 1 1 auto; } .about-modal-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--flb-slate); font-weight: 700; } .about-modal-name { margin-top: 10px; font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--flb-text-primary); line-height: 1.2; } /* Two spans, plain inline by default so narrow modals just wrap the whole phrase across as many lines as they need. Once the modal has room to breathe (its own max-width fully kicks in around 688px viewport width), force the two-line "Fabric Studio Manager" / "for GCP" split. */ @media (min-width: 688px) { .about-modal-name span { display: block; } } .about-modal-version { font-family: var(--font-mono); font-size: 12px; color: var(--flb-slate); margin-top: 2px; } .about-modal-credit { margin-top: 16px; font-size: 13px; color: var(--flb-text-secondary); } .about-modal-credit a { color: var(--flb-red); font-weight: 600; } /* Narrower than the info column it sits in -- a compact warning box rather than one stretched edge to edge. The "Provided as is. Expect bugs." sentence is forced onto its own line with a literal
in the markup (app.js), not just wide-enough-to-wrap-there text flow, since a width-dependent wrap can't guarantee it "always" lands on line 2 the way an explicit break can. */ .about-modal-disclaimer { margin: 16px 0 0; max-width: 300px; } .about-modal-disclaimer strong { text-decoration: underline; text-underline-offset: 2px; } /* "Warning" needs to stand out beyond the existing emphasis already used for "as is"/"bugs" mid-sentence -- uppercase + letter- spacing on top of the inherited bold gives it a distinct label look instead of reading as just another bolded word in the sentence. */ .about-modal-disclaimer-label { text-transform: uppercase; letter-spacing: .03em; text-decoration: none; } /* Wider than the default .modal max-width (640px) specifically for the About dialog -- at 640px the info column next to the 300px logo is too narrow for the credit line ("Hacked together by tvangramberen and (robot emoji)") to fit on one line. Scoped to just this modal via :has() rather than raising every modal's width, since nothing else needs the extra room. Smaller than an earlier version of this rule (760px) -- now that the disclaimer box above has its own fixed, narrower max-width instead of stretching to fill the column, the whole dialog no longer needs to be that wide. Still capped by the viewport on small screens, same as the default. */ .modal:has(.about-modal) { max-width: min(700px, calc(100vw - 48px)); } /* Below this, the logo/text side-by-side layout no longer has room to breathe -- stack the (shrunk) logo above the text instead, centered, so the dialog scales down cleanly instead of cramming a 300px logo and a text column into whatever's left of a phone-width viewport. */ @media (max-width: 560px) { .about-modal { flex-direction: column; text-align: center; gap: 16px; } .about-modal-logo { width: 160px; height: 160px; } .about-modal-info { width: 100%; } .about-modal-disclaimer { max-width: 100%; margin-left: auto; margin-right: auto; } } .brand-name--sidebar { color: #fff; } .brand-sub--sidebar { color: rgba(255,255,255,.55); } .sidebar-version { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,.3); letter-spacing: .02em; padding: 10px 12px 2px; text-align: center; } .nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; } #mainNav { min-height: 0; /* the flexbox fix: without this, a flex:1 child won't actually shrink below its content's natural size, so overflow-y:auto never kicks in and the whole sidebar grows past the viewport instead of scrolling here */ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; } #mainNav::-webkit-scrollbar { width: 5px; } #mainNav::-webkit-scrollbar-track { background: transparent; } #mainNav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 999px; } #mainNav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.35); } /* Same thin/rounded/transparent-track recipe as #mainNav above, but using theme-aware variables instead of a fixed white/rgba -- #mainNav always sits on the permanently-dark sidebar, while these sit on whatever the light/dark theme's own background happens to be. Applied to the main content column's own scrollbar and every horizontally- scrolling table wrapper, in place of each browser's chunky default. */ .content, .table-card { scrollbar-width: thin; scrollbar-color: var(--flb-border-strong) transparent; } .content::-webkit-scrollbar, .table-card::-webkit-scrollbar { width: 7px; height: 7px; } .content::-webkit-scrollbar-track, .table-card::-webkit-scrollbar-track { background: transparent; } .content::-webkit-scrollbar-thumb, .table-card::-webkit-scrollbar-thumb { background: var(--flb-border-strong); border-radius: 999px; } .content::-webkit-scrollbar-thumb:hover, .table-card::-webkit-scrollbar-thumb:hover { background: var(--flb-slate-light); } .nav-item { display: flex; align-items: center; gap: 11px; padding: 7px 12px; border-radius: var(--radius-sm); background: transparent; border: none; color: rgba(255,255,255,.68); font-size: 13.5px; font-weight: 500; cursor: pointer; text-align: left; position: relative; } .nav-item .ic { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; flex: 0 0 18px; } .nav-item:hover { background: rgba(255,255,255,.06); color: #fff; } .nav-item.active { background: rgba(218,26,50,.16); color: #fff; } .nav-item.active::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; background: var(--flb-red); border-radius: 0 3px 3px 0; } .nav-divider { height: 1px; background: rgba(255,255,255,.08); margin: 5px 6px; flex: 0 0 auto; } .nav-group-label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.35); padding: 5px 12px 3px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,.08); } .nav-item--soon { opacity: .45; cursor: default; } .nav-item--soon:hover { background: transparent; color: rgba(255,255,255,.68); } .nav-item--soon:disabled { opacity: .45; } .soon-badge { margin-left: auto; flex: 0 0 auto; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: rgba(255,255,255,.12); color: rgba(255,255,255,.6); padding: 2px 6px; border-radius: 999px; } .user-avatar { width: 32px; height: 32px; border-radius: 8px; background: var(--flb-red); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; font-family: var(--font-display); } .user-name { font-size: 13px; font-weight: 600; color: #fff; } .user-role { font-size: 11px; color: rgba(255,255,255,.55); } .main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .topbar { height: 62px; flex: 0 0 62px; background: #fff; border-bottom: 1px solid var(--flb-border); display: flex; align-items: center; justify-content: space-between; padding: 0 26px; position: relative; } .topbar-trace { position: absolute; right: 0; top: 0; bottom: 0; width: 320px; opacity: .5; pointer-events: none; background-image: radial-gradient(circle, var(--flb-red-tint) 1.5px, transparent 1.5px); background-size: 14px 14px; mask-image: linear-gradient(to left, #000, transparent); } .topbar-title { font-family: var(--font-display); font-weight: 600; font-size: 18px; position: relative; } .topbar-status { font-size: 12px; color: var(--flb-slate); position: relative; display: flex; align-items: center; gap: 8px; } .topbar-actions { display: flex; align-items: center; gap: 6px; position: relative; } .topbar-icon-btn { width: 34px; height: 34px; padding: 0; border-radius: var(--radius-sm); background: transparent; border: none; color: var(--flb-slate); cursor: pointer; display: flex; align-items: center; justify-content: center; } .topbar-icon-btn:hover { background: var(--flb-bg); color: var(--flb-red); } .topbar-icon-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; } .topbar-tenant-btn { width: auto; padding: 0 10px; gap: 7px; font-size: 13px; font-weight: 600; color: var(--flb-text-secondary); } .topbar-divider { width: 1px; height: 22px; background: var(--flb-border); margin: 0 4px; } .topbar-user-menu { position: relative; } .topbar-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px; z-index: 40; background: var(--flb-card); border: 1px solid var(--flb-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 6px; flex-direction: column; } .topbar-dropdown.open { display: flex; } .topbar-dropdown-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 8px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--flb-border); } .topbar-dropdown-head .user-name { color: var(--flb-text-primary); } .topbar-dropdown-head .user-role { color: var(--flb-slate); } /* flex-basis: 100% forces this onto its own line below the avatar/name row (rather than a third column beside them), and because that new line starts fresh at the flex container's own left edge -- the same edge .user-avatar itself starts at -- the email lines up flush left with the avatar, not indented under the name/role text next to it. */ .topbar-dropdown-email { flex-basis: 100%; font-size: 11.5px; color: var(--flb-slate); word-break: break-all; } .topbar-dropdown-item { display: block; padding: 8px 8px; border-radius: var(--radius-sm); color: var(--flb-text-secondary); font-size: 13px; text-decoration: none; cursor: pointer; } .topbar-dropdown-item:hover { background: var(--flb-bg); color: var(--flb-red); } /* A plain info line in the user dropdown (session timeout remaining) -- same padding/size as .topbar-dropdown-item, but not a link: no pointer cursor, no hover highlight, since there's nothing to click. */ .topbar-dropdown-info { padding: 8px 8px; font-size: 12.5px; color: var(--flb-slate); } .content { flex: 1; overflow-y: auto; padding: 26px 30px 60px; } .tab-panel { display: none; } .tab-panel.active { display: block; animation: fadein .18s ease; } @keyframes fadein { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: translateY(0);} } /* ---------- Building blocks ---------- */ .panel-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; gap: 16px; flex-wrap: wrap; } .panel-head h2 { margin: 0 0 4px; font-size: 20px; } .panel-head p { margin: 0; color: var(--flb-slate); font-size: 13px; } .actions-row { display: flex; gap: 10px; flex-wrap: wrap; } /* A small, left-aligned dropdown for an actions-row button (Scheduler's "Show holidays") -- deliberately not .topbar-dropdown/wireDropdown, which are built for the topbar's own once-ever, right-aligned menus; this one opens below-left of its own button instead, and is wired directly in renderScheduler (see the comment above that function) since it's rebuilt fresh on every render rather than created once. */ .action-dropdown { position: relative; display: inline-block; } .action-dropdown-menu { display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 170px; z-index: 40; background: var(--flb-card); border: 1px solid var(--flb-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 6px; flex-direction: column; } .action-dropdown-menu.open { display: flex; } .action-dropdown-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 8px; border-radius: var(--radius-sm); color: var(--flb-text-secondary); font-size: 13px; background: none; border: none; text-align: left; font-family: inherit; cursor: pointer; } .action-dropdown-item:hover { background: var(--flb-bg); color: var(--flb-red); } .action-dropdown-item.active { color: var(--flb-red); font-weight: 600; } .action-dropdown-item svg { width: 15px; height: 15px; flex: none; } /* Logs' own scope description -- deliberately full-width, underneath panel-head's title/actions-row rather than squeezed inside it as a flex sibling, so it always ends up below the scope toggle and its buttons no matter how narrow the window gets, instead of the two competing for the same row's space. */ .panel-sub-note { margin: -10px 0 18px; color: var(--flb-slate); font-size: 13px; } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 22px; } .stat-card { background: var(--flb-card); border: 1px solid var(--flb-border); border-radius: var(--radius-md); padding: 16px 18px; box-shadow: var(--shadow-card); position: relative; overflow: hidden; } .stat-card .stat-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--flb-slate); font-weight: 600; } .stat-card .stat-value { font-family: var(--font-display); font-size: 28px; font-weight: 700; margin-top: 6px; } .stat-card .stat-sub { font-size: 12px; color: var(--flb-slate-light); margin-top: 4px; } .stat-card::after { content: ""; position: absolute; right: -10px; bottom: -10px; width: 70px; height: 70px; border-radius: 50%; background: var(--flb-red-tint); opacity: .5; } .chart-card { background: var(--flb-card); border: 1px solid var(--flb-border); border-radius: var(--radius-md); padding: 18px 20px; box-shadow: var(--shadow-card); margin-bottom: 22px; } .chart-card h3 { margin: 0 0 14px; font-size: 14.5px; } .chart-canvas-wrap { position: relative; height: 230px; } /* Horizontal mini bar charts (Scheduler) only need room for two thin category rows, not the taller box a vertical bar chart needed. */ .mini-chart-wrap { position: relative; height: 48px; margin-top: 10px; } /* Scheduler's widget row: always exactly 3 equal columns (2 rows of 3 for its 6 cards), rather than .card-grid's usual auto-fit -- and every card in it shares one fixed height regardless of which of the 6 happen to have a chart, a sub-line, or a conditional button. */ .card-grid--sched3 { grid-template-columns: repeat(3, 1fr); } .stat-card--sched { min-height: 152px; display: flex; flex-direction: column; } .clickable-card { cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease; } .clickable-card:hover { border-color: var(--flb-red); box-shadow: 0 4px 14px rgba(0,0,0,.08); } .row-clickable { cursor: pointer; } /* One line per disk on Instance Settings' GCP settings "Storage" row. */ .disk-row { margin: 4px 0; } .disk-row:first-child { margin-top: 0; } .disk-row:last-child { margin-bottom: 0; } /* Small green checkmark next to a FS settings row's title (Registration status, Remote License Server, FortiFlex API) -- shown only once that row's own value confirms it's actually configured/active, so it's a signal to notice, not decoration on every row regardless. */ .row-status-ok { display: inline-flex; vertical-align: middle; margin-left: 6px; color: var(--flb-green); } .row-status-ok svg { width: 14px; height: 14px; } /* Same idea as .row-status-ok above, for the FS License Server deploy progress list's own done/failed step icons (fsLicStepIconHtml) -- ICONS.check/ICONS.close are bare SVGs with no size of their own. */ .deploy-step-icon { display: inline-flex; } .deploy-step-icon svg { width: 15px; height: 15px; } /* Registration status row's Mode/Token/Account lines -- a plain 2-column grid (not separate inline spans) is what actually lines up every value at the same horizontal position regardless of its own label's length ("Token:" vs "Account:"), rather than each line drifting based on its own label width. */ .reg-status-grid { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 2px; } /* FortiFlex configurations row: one .flex-config-group per productType, a small toggle switch (checkbox, visually restyled as an iOS-style slider -- red rather than green when on, matching this app's own accent color instead of the "success" green used for status dots elsewhere) showing/hiding a list of per-configuration radio buttons underneath it, indented to where the toggle's own label text starts (26px switch + 8px gap = 34px), not the row's left edge. Groups and their records are sorted A-Z in app.js before this ever renders. */ .flex-config-group { margin-bottom: 10px; } .flex-config-group:last-child { margin-bottom: 0; } .flex-toggle-row { display: flex; align-items: center; gap: 8px; cursor: pointer; } .flex-toggle-switch { position: relative; display: inline-block; width: 26px; height: 14px; flex: 0 0 auto; } .flex-toggle-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .flex-toggle-switch .slider { position: absolute; inset: 0; background: var(--flb-border-strong); border-radius: 999px; transition: background .15s ease; } .flex-toggle-switch .slider::before { content: ""; position: absolute; width: 10px; height: 10px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: transform .15s ease; } .flex-toggle-switch input:checked + .slider { background: var(--flb-red); } .flex-toggle-switch input:checked + .slider::before { transform: translateX(12px); } .flex-radio-list { margin-left: 34px; margin-top: 4px; display: flex; flex-direction: column; gap: 4px; } .flex-radio-list label { display: flex; align-items: center; gap: 6px; font-weight: 400; cursor: pointer; } /* ------------------------------- Documentation page ----------------------- */ .docs-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .docs-toc a { font-size: 12.5px; padding: 6px 12px; border-radius: 999px; background: var(--flb-gray-tint); color: var(--flb-text-primary); text-decoration: none; font-weight: 600; } .docs-toc a:hover { background: var(--flb-red-tint); color: var(--flb-red); } .docs-section { background: var(--flb-card); border: 1px solid var(--flb-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 22px 26px; margin-bottom: 16px; scroll-margin-top: 20px; } .docs-section h3 { font-family: var(--font-display); font-size: 16px; margin: 0 0 4px; color: var(--flb-text-primary); display: flex; align-items: center; gap: 8px; } .docs-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--flb-gray-tint); color: var(--flb-slate); padding: 2px 8px; border-radius: 999px; } .docs-badge--admin { background: var(--flb-red-tint); color: var(--flb-red); } .docs-badge--root { background: var(--flb-blue-tint); color: var(--flb-blue); } .docs-section p { font-size: 13.5px; line-height: 1.65; color: var(--flb-text-secondary); margin: 8px 0; } .docs-section ul { margin: 8px 0; padding-left: 20px; font-size: 13.5px; line-height: 1.75; color: var(--flb-text-secondary); } .docs-section li { margin-bottom: 4px; } .docs-section code { font-size: 12.5px; } .docs-back-to-top-row { text-align: right; margin-top: 14px; } .docs-back-to-top { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: var(--radius-sm); border: 1px solid var(--flb-border); background: transparent; color: var(--flb-slate); font-size: 12px; font-weight: 600; cursor: pointer; } .docs-back-to-top svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; } .docs-back-to-top:hover { border-color: var(--flb-red); color: var(--flb-red); } /* ------------------------------- Scheduler calendar ---------------------- */ .cal-wrap { background: var(--flb-card); border: 1px solid var(--flb-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow: hidden; } .cal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--flb-border); flex-wrap: wrap; gap: 10px; } .cal-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; min-width: 160px; } .cal-nav { display: flex; gap: 6px; align-items: center; } .cal-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--flb-slate); align-items: center; } .cal-legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; } /* A round 8px dot works fine for the Past-running/Needs-a-look legend entries (--flb-red/--flb-amber -- both fully saturated, so they stay visible even that small), but --cal-holiday-bg is a deliberately pale tint (so a whole calendar cell filled with it doesn't overpower the day number/events inside it) -- at legend-dot size that same pale color reads as barely-there/white rather than as its own visible swatch. This is the same var(--cal-holiday-bg) as the day cells themselves (so it's genuinely the same color, not a different one), just shown in a bigger, rectangular swatch closer to a mini calendar cell's own shape so the tint actually registers. */ .cal-legend-swatch { display: inline-block; width: 16px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: middle; border: 1px solid var(--flb-border-strong); } .cal-grid-header { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--flb-border); } .cal-grid-header > div { padding: 8px; text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--flb-slate); } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); } .cal-cell { min-height: 108px; border-right: 1px solid var(--flb-border); border-bottom: 1px solid var(--flb-border); padding: 6px; display: flex; flex-direction: column; gap: 3px; } .cal-cell:nth-child(7n) { border-right: none; } .cal-cell--out { background: #FAFBFC; } .cal-cell--out .cal-daynum { color: var(--flb-slate-light); } .cal-cell--today { background: var(--flb-red-tint); } /* Public holidays (Scheduler's "Show holidays" menu, default None) -- never set on an out-of-month cell in the first place (holidays are only looked up for in-month ISO dates), but still excluded from "today" explicitly so today's own red tint always wins if the two ever land on the same day. */ .cal-cell--holiday:not(.cal-cell--today) { background: var(--cal-holiday-bg); } /* Saturday/Sunday columns (grid is 7-wide, Mon first -- position 6 and 7 of every row of 7) get their own subtle tint so weekends stand out at a glance -- but only for days that actually belong to the viewed month and aren't already the "today" or a holiday cell, so it never fights with any of those three's own, more important, backgrounds. */ .cal-cell:not(.cal-cell--out):not(.cal-cell--today):not(.cal-cell--holiday):nth-child(7n+6), .cal-cell:not(.cal-cell--out):not(.cal-cell--today):not(.cal-cell--holiday):nth-child(7n) { background: var(--cal-weekend-bg); } .cal-daynum { font-size: 12px; font-weight: 700; color: var(--flb-text-primary); margin-bottom: 2px; } /* Plain, non-interactive label -- never a