/* * VPS Realtime Monitor — Dashboard_UI styles (Carbon "UI Shell"). * Gaya IBM Carbon Design System + tipografi IBM Plex (self-hosted woff2). * * Aset ini di-*hand-author* di mesin lokal (bukan di-build dengan Node/webpack * di VPS, demi hemat RAM). Semua warna, spasi, dan skala tipe mengacu token * resmi IBM Carbon agar setia pada IBM classic tanpa build step, tanpa CDN. * * Tema default: gelap "Gray 100" (g100). Tema terang (varian "Gray 10"/g10) * diaktifkan app.js dengan menambahkan class .theme-light pada ; nilai * token warna ditimpa lewat CSS custom properties (lihat blok di bawah). * * Kontras warna dipilih agar memenuhi WCAG 2.x AA di atas background gelap * (divalidasi app/web/contrast.py). Font IBM Plex di-*vendor* lokal di ./fonts/. */ /* ===================================================================== */ /* Font IBM Plex — self-hosted (woff2) di ./fonts/ */ /* ===================================================================== */ @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/IBMPlexSans-Regular.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/IBMPlexMono-Regular.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/IBMPlexMono-Medium.woff2") format("woff2"); } /* ===================================================================== */ /* Design tokens (IBM Carbon) — tema gelap g100 sebagai default. */ /* ===================================================================== */ :root { /* --- Palet abu Carbon (acuan) --- */ --cds-gray-100: #161616; --cds-gray-90: #262626; --cds-gray-80: #393939; --cds-gray-70: #525252; --cds-gray-60: #6f6f6f; --cds-gray-50: #8d8d8d; --cds-gray-30: #c6c6c6; --cds-gray-10: #f4f4f4; /* --- Layering (background/layer/field) tema g100 --- */ --background: var(--cds-gray-100); /* dasar aplikasi */ --layer-01: var(--cds-gray-90); /* kartu tingkat 1 */ --layer-02: var(--cds-gray-80); /* elemen di atas kartu */ --layer-hover-01: #333333; --field-01: var(--cds-gray-90); /* input field */ --border-subtle: var(--cds-gray-80); --border-strong: var(--cds-gray-60); /* --- Teks --- (kontras AA di atas background gelap) */ --text-primary: var(--cds-gray-10); --text-secondary: var(--cds-gray-30); --text-placeholder: var(--cds-gray-60); --text-on-color: #ffffff; /* --- Support colors (status kesehatan) --- */ --support-success: #42be65; /* green 40 — healthy */ --support-warning: #f1c21b; /* yellow 30 — warning */ --support-error: #ff8389; /* red 40 — critical */ --support-info: #78a9ff; /* blue 40 — info/link */ /* --- Interaktif (tombol, tautan) --- */ --interactive: #4589ff; /* blue 50 */ --link-primary: #78a9ff; /* blue 40 */ /* --- Skala spasi Carbon (basis 8px / mini-unit 2px) --- */ --spacing-01: 0.125rem; --spacing-02: 0.25rem; --spacing-03: 0.5rem; --spacing-04: 0.75rem; --spacing-05: 1rem; --spacing-06: 1.5rem; --spacing-07: 2rem; --spacing-08: 2.5rem; --spacing-09: 3rem; /* --- Skala tipe Carbon (IBM Plex) --- */ --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; --type-caption-01: 0.75rem; --type-body-01: 0.875rem; --type-body-02: 1rem; --type-heading-03: 1.25rem; --type-heading-04: 1.75rem; --type-display-01: 2.625rem; --layout-header-height: 3rem; /* 48px — tinggi header Carbon */ --layout-sidenav-width: 16rem; /* 256px — lebar sidenav Carbon */ } /* --- Tema terang (Carbon g10). Ditimpa saat . --- */ html.theme-light { --background: var(--cds-gray-10); --layer-01: #ffffff; --layer-02: #e0e0e0; --layer-hover-01: #e8e8e8; --field-01: #ffffff; --border-subtle: #d0d0d0; --border-strong: #8d8d8d; --text-primary: #161616; --text-secondary: #525252; --text-placeholder: #6f6f6f; --text-on-color: #ffffff; --support-success: #24a148; --support-warning: #b28600; --support-error: #da1e28; --support-info: #0f62fe; --interactive: #0f62fe; --link-primary: #0f62fe; } /* ===================================================================== */ /* Reset ringan + dasar */ /* ===================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* Pastikan atribut `hidden` SELALU menyembunyikan elemen, mengalahkan aturan * `display` author. Tanpa ini, toggle tampilan login⇆dashboard & halaman * router via `el.hidden` tidak berfungsi. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; } body { background-color: var(--background); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--type-body-01); line-height: 1.4; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; /* Cegah scroll horizontal di viewport sempit (mobile). Konten menggulir * vertikal saja; tidak ada elemen yang boleh melebihi lebar layar (Req 14.2). */ overflow-x: hidden; } /* ===================================================================== */ /* Grid ringkasan + kartu metrik — layout responsif mobile-first (Req 14).*/ /* */ /* Breakpoint Carbon (dinyatakan dalam PX agar mudah diverifikasi mesin): */ /* - md = 672px (42rem) → tablet : >= 2 kolom (Req 14.3) */ /* - lg = 1056px (66rem) → desktop : >= 3 kolom (Req 14.4) */ /* Basis (< 672px): 1 kolom, gulir vertikal, TANPA scroll horizontal. */ /* Reflow murni media query CSS (tanpa JS) → jauh di bawah 1 detik. */ /* CATATAN: blok media .metric-grid ditaruh PALING AWAL agar menjadi */ /* kemunculan pertama breakpoint 672/1056 (dipakai test aset frontend). */ /* ===================================================================== */ .metric-grid { display: grid; gap: var(--spacing-05); grid-template-columns: 1fr; /* basis mobile-first: SATU kolom (< 672px) */ width: 100%; } @media (min-width: 672px) { /* 672px = 42rem — tablet: minimal 2 kolom (Req 14.3). */ .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1056px) { /* 1056px = 66rem — laptop/desktop: minimal 3 kolom (Req 14.4). */ .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ===================================================================== */ /* Header Carbon UI Shell */ /* ===================================================================== */ .app-header { display: flex; align-items: center; gap: var(--spacing-04); height: var(--layout-header-height); padding: 0 var(--spacing-05); background-color: var(--background); border-bottom: 1px solid var(--border-subtle); position: sticky; top: 0; z-index: 30; } .header-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; background: transparent; color: var(--text-primary); cursor: pointer; flex: none; } .header-menu-btn:hover { background-color: var(--layer-hover-01); } .app-header__brand { display: flex; align-items: baseline; gap: var(--spacing-03); min-width: 0; margin-right: auto; /* dorong kontrol ke kanan */ } .app-header__product { font-size: var(--type-body-02); font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; } .app-header__product .accent { color: var(--text-secondary); font-weight: 400; } .app-header__controls { display: flex; align-items: center; gap: var(--spacing-04); min-width: 0; } /* Indikator status koneksi. State di-drive JS via data-state. */ .connection-status { display: inline-flex; align-items: center; gap: var(--spacing-03); font-size: var(--type-caption-01); color: var(--text-secondary); white-space: nowrap; } .connection-status__dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; background-color: var(--text-placeholder); flex: none; } .connection-status[data-state="connected"] .connection-status__dot { background-color: var(--support-success); } .connection-status[data-state="connecting"] .connection-status__dot { background-color: var(--support-warning); } .connection-status[data-state="disconnected"] .connection-status__dot { background-color: var(--support-error); } .interval-control { display: inline-flex; align-items: center; gap: var(--spacing-02); font-size: var(--type-caption-01); color: var(--text-secondary); } .interval-control__label { white-space: nowrap; } .interval-control__input { width: 3.25rem; font-family: var(--font-mono); font-size: var(--type-body-01); padding: var(--spacing-02) var(--spacing-03); background-color: var(--field-01); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: 0; } .interval-control__input:focus { outline: 2px solid var(--interactive); outline-offset: -2px; } /* ===================================================================== */ /* Shell body: sidenav + konten */ /* ===================================================================== */ .shell-body { display: flex; align-items: stretch; min-height: calc(100vh - var(--layout-header-height)); position: relative; } /* --- Sidenav Carbon --- */ .sidenav { flex: none; width: var(--layout-sidenav-width); background-color: var(--layer-01); border-right: 1px solid var(--border-subtle); padding: var(--spacing-03) 0; overflow-y: auto; /* Sticky di bawah header agar tetap terlihat saat konten panjang. */ position: sticky; top: var(--layout-header-height); align-self: flex-start; height: calc(100vh - var(--layout-header-height)); transition: transform 0.16s ease, width 0.16s ease; } /* Collapse di desktop: sidenav disembunyikan, konten memenuhi lebar. */ .dashboard-view[data-nav-open="false"] .sidenav { width: 0; border-right: 0; transform: translateX(-100%); overflow: hidden; } .sidenav__list { list-style: none; margin: 0; padding: 0; } .sidenav__link { display: flex; align-items: center; gap: var(--spacing-04); padding: 0 var(--spacing-05); height: 2.5rem; color: var(--text-secondary); text-decoration: none; font-size: var(--type-body-01); white-space: nowrap; border-left: 3px solid transparent; } .sidenav__link:hover { background-color: var(--layer-hover-01); color: var(--text-primary); } .sidenav__link.is-active { background-color: var(--layer-02); color: var(--text-primary); border-left-color: var(--interactive); font-weight: 600; } .sidenav__icon { width: 1.1rem; height: 1.1rem; flex: none; } .sidenav__badge { margin-left: auto; min-width: 1.25rem; height: 1.25rem; padding: 0 0.35rem; border-radius: 0.75rem; background-color: var(--support-error); color: #161616; font-size: 0.6875rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; } /* Overlay backdrop untuk drawer mobile. */ .shell-overlay { display: none; position: fixed; inset: var(--layout-header-height) 0 0 0; background: rgba(0, 0, 0, 0.5); z-index: 19; } /* --- Konten utama --- */ .shell-content { flex: 1 1 auto; min-width: 0; padding: var(--spacing-06) var(--spacing-05); width: 100%; } .page__title { font-size: var(--type-heading-03); font-weight: 400; margin: 0 0 var(--spacing-06); color: var(--text-primary); } .page__head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-04); flex-wrap: wrap; } .page__head .page__title { margin-bottom: var(--spacing-04); } .page__meta { font-size: var(--type-caption-01); color: var(--text-secondary); margin: 0 0 var(--spacing-05); } /* ===================================================================== */ /* Sidenav responsif: drawer slide-in di mobile (< 672px). */ /* ===================================================================== */ @media (max-width: 671px) { /* Sidenav jadi drawer off-canvas fixed. */ .sidenav { position: fixed; top: var(--layout-header-height); left: 0; height: calc(100vh - var(--layout-header-height)); width: min(18rem, 82vw); z-index: 20; transform: translateX(-100%); } /* data-nav-open="true" → geser masuk. */ .dashboard-view[data-nav-open="true"] .sidenav { transform: translateX(0); } /* Di mobile, collapse (false) tetap tersembunyi via transform default. */ .dashboard-view[data-nav-open="false"] .sidenav { width: min(18rem, 82vw); transform: translateX(-100%); } .dashboard-view[data-nav-open="true"] .shell-overlay { display: block; } /* Sembunyikan label interval agar header tak sesak. */ .interval-control__label { display: none; } .app-header__controls { gap: var(--spacing-03); } .app-header { gap: var(--spacing-03); } } /* ===================================================================== */ /* Kartu metrik (gaya "tile" Carbon) */ /* ===================================================================== */ .metric-card { background-color: var(--layer-01); border: 1px solid transparent; padding: var(--spacing-05); min-height: 8rem; display: flex; flex-direction: column; gap: var(--spacing-03); transition: background-color 0.11s ease; /* Izinkan kartu menyusut di grid & cegah overflow oleh konten panjang. */ min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .metric-card:hover { background-color: var(--layer-hover-01); } .metric-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-03); } .metric-card__label { font-size: var(--type-caption-01); text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-secondary); } /* Nilai metrik memakai IBM Plex Mono agar angka rata (tabular). */ .metric-card__value { font-family: var(--font-mono); font-weight: 500; font-size: var(--type-heading-04); color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.2; min-width: 0; max-width: 100%; overflow-wrap: anywhere; } .metric-card__value[data-empty="true"] { color: var(--text-placeholder); } .metric-card__unit { font-size: var(--type-body-01); color: var(--text-secondary); margin-left: var(--spacing-02); } .metric-card__meta { font-size: var(--type-caption-01); color: var(--text-secondary); margin-top: auto; } /* Badge status kesehatan. */ .health-badge { display: inline-flex; align-items: center; gap: var(--spacing-02); font-size: var(--type-caption-01); font-weight: 600; padding: var(--spacing-01) var(--spacing-03); border-radius: 0; } .health-badge__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: var(--text-placeholder); } .health-badge[data-health="healthy"] .health-badge__dot { background-color: var(--support-success); } .health-badge[data-health="warning"] .health-badge__dot { background-color: var(--support-warning); } .health-badge[data-health="critical"] .health-badge__dot { background-color: var(--support-error); } /* Card yang membentang dua kolom pada layout lebar. */ .metric-card--wide { grid-column: span 1; } @media (min-width: 672px) { .metric-card--wide { grid-column: span 2; } } /* Grid detail untuk halaman per-metrik (CPU/Memory/Disk/Network). */ .detail-grid { display: grid; gap: var(--spacing-05); grid-template-columns: 1fr; margin-bottom: var(--spacing-05); } @media (min-width: 672px) { .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Utility: sembunyikan visual tapi tetap terbaca screen reader. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ===================================================================== */ /* Tombol (gaya Carbon ringkas) */ /* ===================================================================== */ .btn { font-family: var(--font-sans); font-size: var(--type-body-01); line-height: 1.2; padding: var(--spacing-04) var(--spacing-05); border: 1px solid transparent; border-radius: 0; cursor: pointer; transition: background-color 0.11s ease, border-color 0.11s ease; color: var(--text-on-color); } .btn:disabled { cursor: not-allowed; opacity: 0.5; } .btn--primary { background-color: var(--interactive); color: #ffffff; width: 100%; } .btn--primary:hover:not(:disabled) { background-color: #3a72d4; } .btn--tertiary { background-color: transparent; border-color: var(--border-strong); color: var(--text-primary); } .btn--tertiary:hover:not(:disabled) { background-color: var(--layer-hover-01); } .btn--sm { padding: var(--spacing-02) var(--spacing-04); font-size: var(--type-caption-01); } /* ===================================================================== */ /* Halaman login (Req 10, 11.6, 11.7) */ /* ===================================================================== */ .login-view { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--spacing-05); } .login-card { width: 100%; max-width: 22rem; background-color: var(--layer-01); border: 1px solid var(--border-subtle); padding: var(--spacing-07); display: flex; flex-direction: column; gap: var(--spacing-05); } .login-card__brand { display: flex; align-items: baseline; gap: var(--spacing-03); flex-wrap: wrap; } .login-card__title { font-size: var(--type-heading-03); font-weight: 400; margin: 0; } .login-form { display: flex; flex-direction: column; gap: var(--spacing-05); } .form-field { display: flex; flex-direction: column; gap: var(--spacing-02); } .form-field__label { font-size: var(--type-caption-01); color: var(--text-secondary); } .form-field__input { font-family: var(--font-sans); font-size: var(--type-body-02); padding: var(--spacing-04) var(--spacing-05); background-color: var(--field-01); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: 0; } .form-field__input:focus { outline: 2px solid var(--interactive); outline-offset: -2px; } .login-error { margin: 0; font-size: var(--type-body-01); color: var(--support-error); } .login-divider { display: flex; align-items: center; text-align: center; color: var(--text-secondary); font-size: var(--type-caption-01); } .login-divider::before, .login-divider::after { content: ""; flex: 1; border-bottom: 1px solid var(--border-subtle); } .login-divider span { padding: 0 var(--spacing-04); } /* ===================================================================== */ /* Bar persen / gauge horizontal (CPU, Memory, Disk, Kuota) */ /* */ /* Warna ambang status (default; app.js dapat menimpanya dari /api/ */ /* settings): healthy < warning → hijau, warning..critical → kuning, */ /* >= critical → merah. app.js menambah data-level="ok|warning|critical". */ /* ===================================================================== */ .gauge { width: 100%; min-width: 0; } .gauge__track { width: 100%; height: 0.5rem; background-color: var(--layer-02); overflow: hidden; } .gauge__fill { height: 100%; width: 0%; background-color: var(--text-placeholder); transition: width 0.3s ease, background-color 0.2s ease; } .gauge__fill[data-level="ok"], .mini-bars__fill[data-level="ok"], .disk-item__fill[data-level="ok"] { background-color: var(--support-success); } .gauge__fill[data-level="warning"], .mini-bars__fill[data-level="warning"], .disk-item__fill[data-level="warning"] { background-color: var(--support-warning); } .gauge__fill[data-level="critical"], .mini-bars__fill[data-level="critical"], .disk-item__fill[data-level="critical"] { background-color: var(--support-error); } /* --- Mini-bar per-core CPU --- */ .mini-bars { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.25rem, 1fr)); gap: var(--spacing-02) var(--spacing-03); width: 100%; min-width: 0; } .mini-bars__empty, .mini-bars__item + .mini-bars__empty { font-size: var(--type-caption-01); color: var(--text-placeholder); } .mini-bars__item { display: flex; flex-direction: column; gap: var(--spacing-01); min-width: 0; } .mini-bars__label { font-size: 0.625rem; color: var(--text-secondary); font-family: var(--font-mono); white-space: nowrap; display: flex; justify-content: space-between; gap: var(--spacing-02); } .mini-bars__label b { font-weight: 500; color: var(--text-primary); } .mini-bars__track { height: 0.375rem; background-color: var(--layer-02); overflow: hidden; } .mini-bars__fill { height: 100%; width: 0%; background-color: var(--text-placeholder); transition: width 0.3s ease, background-color 0.2s ease; } /* --- Sparkline (canvas riwayat realtime, Overview) --- */ .sparkline { width: 100%; height: 2.5rem; min-width: 0; } .sparkline--tall { height: 3.5rem; } .sparkline__canvas { display: block; width: 100%; height: 100%; } /* --- Daftar filesystem disk --- */ .disk-list { display: flex; flex-direction: column; gap: var(--spacing-04); width: 100%; min-width: 0; } .disk-item { display: flex; flex-direction: column; gap: var(--spacing-02); min-width: 0; } .disk-item__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-03); font-size: var(--type-caption-01); min-width: 0; } .disk-item__mount { font-family: var(--font-mono); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .disk-item__pct { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-secondary); flex: none; } .disk-item__track { width: 100%; height: 0.5rem; background-color: var(--layer-02); overflow: hidden; } .disk-item__fill { height: 100%; width: 0%; background-color: var(--text-placeholder); transition: width 0.3s ease, background-color 0.2s ease; } .disk-item__meta { font-size: var(--type-caption-01); color: var(--text-secondary); } /* --- Laju jaringan rx/tx --- */ .metric-card__value--rates { display: flex; flex-wrap: wrap; gap: var(--spacing-05); font-size: var(--type-heading-03); } .net-rate { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; } .net-rate--rx { color: var(--support-info); } .net-rate--tx { color: var(--support-success); } /* --- Tabel proses (Top CPU / Top Memory) --- */ .proc-tables { display: grid; grid-template-columns: 1fr; gap: var(--spacing-05); width: 100%; min-width: 0; } @media (min-width: 672px) { .proc-tables { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .proc-table-wrap { min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-03); } .proc-table__caption { font-size: var(--type-caption-01); text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-secondary); } /* Bungkus tabel: gulir horizontal LOKAL (dalam kartu) bila perlu, agar * halaman tidak ikut menggulir horizontal (Req 14.2). */ .proc-table__scroll { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .proc-table { width: 100%; border-collapse: collapse; font-size: var(--type-caption-01); } .proc-table th, .proc-table td { text-align: left; padding: var(--spacing-02) var(--spacing-03); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .proc-table thead th { color: var(--text-secondary); font-weight: 600; text-transform: uppercase; font-size: 0.625rem; letter-spacing: 0.02em; } .proc-table__num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .proc-table tbody td { color: var(--text-primary); } .proc-table tbody td.proc-table__num { color: var(--text-secondary); } .proc-table__name { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .proc-table__empty td { color: var(--text-placeholder); white-space: normal; } /* ===================================================================== */ /* Chart time-series (canvas) + kontrol rentang */ /* ===================================================================== */ .chart-card { gap: var(--spacing-04); } .chart-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-04); flex-wrap: wrap; } .chart-card__head--stack { flex-direction: column; align-items: stretch; } .chart-wrap { width: 100%; height: 16rem; min-width: 0; } .chart-wrap--large { height: 22rem; } .chart-canvas { display: block; width: 100%; height: 100%; } .chart-status { font-size: var(--type-caption-01); color: var(--text-secondary); min-height: 1rem; } .chart-legend { display: flex; gap: var(--spacing-05); flex-wrap: wrap; font-size: var(--type-caption-01); color: var(--text-secondary); } .chart-legend .swatch, .metric-toggle .swatch { display: inline-block; width: 0.75rem; height: 0.75rem; vertical-align: middle; margin-right: 0.25rem; } /* Range picker (tombol preset). */ .range-picker { display: inline-flex; flex-wrap: wrap; gap: var(--spacing-02); } .range-picker__btn { font-family: var(--font-sans); font-size: var(--type-caption-01); padding: var(--spacing-02) var(--spacing-04); background-color: transparent; color: var(--text-secondary); border: 1px solid var(--border-strong); border-radius: 0; cursor: pointer; } .range-picker__btn:hover { background-color: var(--layer-hover-01); color: var(--text-primary); } .range-picker__btn.is-active { background-color: var(--interactive); border-color: var(--interactive); color: #ffffff; } /* Kontrol rentang kustom + toggle metrik (History). */ .custom-range { display: flex; flex-wrap: wrap; align-items: end; gap: var(--spacing-03); font-size: var(--type-caption-01); color: var(--text-secondary); } .custom-range label { display: flex; flex-direction: column; gap: var(--spacing-02); } .custom-range__input { font-family: var(--font-sans); font-size: var(--type-caption-01); padding: var(--spacing-02) var(--spacing-03); background-color: var(--field-01); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: 0; } .metric-toggles { display: flex; flex-wrap: wrap; gap: var(--spacing-04); font-size: var(--type-caption-01); color: var(--text-secondary); } .metric-toggle { display: inline-flex; align-items: center; gap: var(--spacing-02); cursor: pointer; } /* ===================================================================== */ /* Alerts */ /* ===================================================================== */ .alerts-list { display: flex; flex-direction: column; gap: var(--spacing-03); } .alert-item { display: flex; align-items: center; gap: var(--spacing-04); padding: var(--spacing-04) var(--spacing-05); background-color: var(--layer-01); border-left: 4px solid var(--border-strong); } .alert-item[data-level="warning"] { border-left-color: var(--support-warning); } .alert-item[data-level="critical"] { border-left-color: var(--support-error); } .alert-item__metric { font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; min-width: 4rem; } .alert-item__level { font-size: var(--type-caption-01); text-transform: uppercase; font-weight: 600; } .alert-item[data-level="warning"] .alert-item__level { color: var(--support-warning); } .alert-item[data-level="critical"] .alert-item__level { color: var(--support-error); } .alert-item__detail { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-secondary); margin-left: auto; font-size: var(--type-caption-01); } .empty-state { padding: var(--spacing-06); text-align: center; color: var(--text-secondary); background-color: var(--layer-01); } .empty-state--ok { color: var(--support-success); } /* ===================================================================== */ /* Settings */ /* ===================================================================== */ .settings-form { max-width: 40rem; display: flex; flex-direction: column; gap: var(--spacing-06); margin-bottom: var(--spacing-07); } .settings-group { border: 1px solid var(--border-subtle); padding: var(--spacing-05); display: flex; flex-direction: column; gap: var(--spacing-04); max-width: 40rem; } .settings-group legend { font-size: var(--type-caption-01); text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-secondary); padding: 0 var(--spacing-02); } .threshold-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-04); } .threshold-row__label { min-width: 4rem; color: var(--text-secondary); } .threshold-row label { display: inline-flex; align-items: center; gap: var(--spacing-02); font-size: var(--type-caption-01); color: var(--text-secondary); } .settings-input { width: 5rem; font-family: var(--font-mono); font-size: var(--type-body-01); padding: var(--spacing-02) var(--spacing-03); background-color: var(--field-01); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: 0; } .settings-input:focus { outline: 2px solid var(--interactive); outline-offset: -2px; } .settings-save { width: auto; align-self: flex-start; } .settings-status { margin: 0; font-size: var(--type-body-01); } .settings-status[data-state="ok"] { color: var(--support-success); } .settings-status[data-state="error"] { color: var(--support-error); } /* ===================================================================== */ /* Jarvis Chat_UI (Req 1.1–1.7, 3.3, 5.4) */ /* ===================================================================== */ .jarvis-chat { display: flex; flex-direction: column; gap: var(--spacing-05); max-width: 48rem; } /* Riwayat percakapan. Scroll lokal; pesan terbaru di bawah. */ .jarvis-log { display: flex; flex-direction: column; gap: var(--spacing-04); min-height: 12rem; max-height: 60vh; overflow-y: auto; padding: var(--spacing-05); background-color: var(--layer-01); border: 1px solid var(--border-subtle); } /* Satu pesan. Operator vs Jarvis dibedakan lewat atribut PERSISTEN data-role + kelas modifier: alignment kontainer + label penulis (BUKAN hanya warna), agar tetap terbaca tanpa mengandalkan warna (Req 1.4). */ .jarvis-msg { display: flex; flex-direction: column; gap: var(--spacing-02); max-width: 85%; } .jarvis-msg--operator { align-self: flex-end; align-items: flex-end; text-align: right; } .jarvis-msg--jarvis { align-self: flex-start; align-items: flex-start; text-align: left; } .jarvis-msg__meta { display: flex; gap: var(--spacing-03); align-items: baseline; font-size: var(--type-caption-01); color: var(--text-secondary); } .jarvis-msg__author { font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; } .jarvis-msg__time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .jarvis-msg__bubble { padding: var(--spacing-04) var(--spacing-05); font-size: var(--type-body-01); line-height: 1.45; white-space: pre-wrap; word-break: break-word; border: 1px solid var(--border-subtle); } /* Operator: bubble terisi warna interaktif; Jarvis: layer-02 dengan garis aksen kiri. Perbedaan mengandalkan alignment + border, bukan hanya warna. */ .jarvis-msg--operator .jarvis-msg__bubble { background-color: var(--layer-02); border-color: var(--border-strong); } .jarvis-msg--jarvis .jarvis-msg__bubble { background-color: var(--layer-01); border-left: 3px solid var(--interactive); } .jarvis-msg[data-error="true"] .jarvis-msg__bubble { border-left-color: var(--support-error); color: var(--support-error); } /* Kartu Deal_Result (Req 5.4). source_url dirender sebagai tautan. */ .jarvis-deals { display: flex; flex-direction: column; gap: var(--spacing-03); width: 100%; } .jarvis-deal { display: flex; flex-direction: column; gap: var(--spacing-02); padding: var(--spacing-04); background-color: var(--layer-02); border: 1px solid var(--border-subtle); text-align: left; } .jarvis-deal__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-03); flex-wrap: wrap; } .jarvis-deal__title { font-weight: 600; color: var(--text-primary); } .jarvis-deal__discount { font-family: var(--font-mono); font-size: var(--type-caption-01); font-weight: 600; color: var(--support-success); white-space: nowrap; } .jarvis-deal__price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-secondary); } .jarvis-deal__foot { display: flex; justify-content: flex-end; } .jarvis-deal__link { font-size: var(--type-body-01); color: var(--link-primary); } .jarvis-deal__link--plain { color: var(--text-placeholder); word-break: break-all; } /* Indikator progres Task_Run (Req 3.3). */ .jarvis-progress { display: flex; align-items: center; gap: var(--spacing-03); font-size: var(--type-caption-01); color: var(--text-secondary); } .jarvis-progress__spinner { width: 1rem; height: 1rem; border: 2px solid var(--border-strong); border-top-color: var(--interactive); border-radius: 50%; animation: jarvis-spin 0.8s linear infinite; flex: none; } @keyframes jarvis-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .jarvis-progress__spinner { animation: none; } } /* Komposer pesan. */ .jarvis-form { display: flex; flex-direction: column; gap: var(--spacing-03); } .jarvis-form__field { display: flex; flex-direction: column; gap: var(--spacing-02); } .jarvis-input { font-family: var(--font-sans); font-size: var(--type-body-02); padding: var(--spacing-04) var(--spacing-05); background-color: var(--field-01); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: 0; resize: vertical; min-height: 3rem; } .jarvis-input:focus { outline: 2px solid var(--interactive); outline-offset: -2px; } .jarvis-input-hint { margin: 0; font-size: var(--type-body-01); color: var(--support-error); } .jarvis-form__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-04); flex-wrap: wrap; } .jarvis-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--type-caption-01); color: var(--text-secondary); } .jarvis-count[data-over="true"] { color: var(--support-error); font-weight: 600; } /* ===================================================================== */ /* Cron Jobs Management */ /* ===================================================================== */ .cron-jobs-list { display: flex; flex-direction: column; gap: var(--spacing-04); } .cron-card { background-color: var(--layer-01); border: 1px solid var(--border-subtle); border-radius: 4px; padding: var(--spacing-05); transition: border-color 0.15s ease; } .cron-card:hover { border-color: var(--border-strong); } .cron-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-03); margin-bottom: var(--spacing-04); } .cron-card__title { display: flex; align-items: center; gap: var(--spacing-03); } .cron-card__name { font-size: var(--type-body-02); font-weight: 600; margin: 0; color: var(--text-primary); } .cron-card__status-dot { font-size: 0.75rem; line-height: 1; } .cron-card__badge { font-size: 0.6875rem; font-weight: 600; padding: 0.125rem 0.5rem; border-radius: 0.75rem; white-space: nowrap; } .cron-card__body { margin-bottom: var(--spacing-04); } .cron-card__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--spacing-03) var(--spacing-04); } .cron-card__field { display: flex; flex-direction: column; gap: 0.125rem; } .cron-card__field-label { font-size: var(--type-caption-01); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.02em; } .cron-card__field-value { font-size: var(--type-body-01); color: var(--text-primary); } .cron-card__field-value code { font-family: var(--font-mono); font-size: 0.8125rem; } .cron-card__error { margin-top: var(--spacing-03); padding: var(--spacing-03); background-color: rgba(255, 131, 137, 0.1); border: 1px solid var(--support-error); border-radius: 4px; font-size: var(--type-caption-01); color: var(--support-error); } .cron-card__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-02); padding-top: var(--spacing-03); border-top: 1px solid var(--border-subtle); } .cron-action--danger { color: var(--support-error); } .cron-action--danger:hover { background-color: rgba(255, 131, 137, 0.1); } .cron-card__edit { margin-top: var(--spacing-03); padding-top: var(--spacing-03); border-top: 1px solid var(--border-subtle); } .cron-edit-row { display: flex; gap: var(--spacing-03); flex-wrap: wrap; align-items: center; } .cron-edit-input { flex: 1 1 200px; min-width: 0; } .cron-edit-hint { margin: var(--spacing-02) 0 0; font-size: var(--type-caption-01); color: var(--text-secondary); } /* Toast */ .cron-toast { position: fixed; bottom: var(--spacing-05); left: 50%; transform: translateX(-50%); max-width: 90vw; padding: var(--spacing-03) var(--spacing-05); border-radius: 4px; font-size: var(--type-body-01); z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,0.3); animation: cronToastIn 0.2s ease; } .cron-toast--success { background-color: var(--support-success); color: #161616; } .cron-toast--error { background-color: var(--support-error); color: #161616; } .cron-toast--info { background-color: var(--support-info); color: #161616; } @keyframes cronToastIn { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* Mobile: cron card grid jadi 2 kolom */ @media (max-width: 671px) { .cron-card__grid { grid-template-columns: repeat(2, 1fr); } .cron-card__actions { flex-direction: column; } .cron-card__actions .btn { width: 100%; text-align: center; } .cron-edit-row { flex-direction: column; align-items: stretch; } .cron-edit-input { flex: 1 1 auto; } } /* Desktop: wider grid */ @media (min-width: 1056px) { .cron-card__grid { grid-template-columns: repeat(3, 1fr); } }