/* ============================================================= SI-TELUR PETIS — assets/css/app.css Design System & Komponen Global Semua komponen yang dipakai lebih dari satu halaman ada di sini. Jangan tambahkan style spesifik satu halaman di sini. ============================================================= */ /* ─── CSS Variables (Design Tokens) ──────────────────────── */ :root { --color-primary: #1D9E75; --color-primary-dark: #168B64; --color-primary-light: #E1F5EE; --color-primary-text: #085041; --color-primary-mid: #0F6E56; --color-primary-border: #5DCAA5; --stp-primary: #1D9E75; --stp-primary-dark: #168B64; --stp-primary-light: #E1F5EE; --stp-primary-text: #085041; --stp-primary-mid: #0F6E56; --stp-warn-bg: #FAEEDA; --stp-warn-text: #633806; --stp-warn-border: #EF9F27; --stp-warn-icon: #854F0B; --stp-danger-bg: #FCEBEB; --stp-danger-text: #791F1F; --stp-danger-border: #F09595; --stp-danger-icon: #A32D2D; --stp-ok-bg: #E1F5EE; --stp-ok-text: #085041; --stp-ok-border: #5DCAA5; } /* ─── Base ─────────────────────────────────────────────────── */ * { box-sizing: border-box; } /* ─── PENGATURAN UKURAN FONT GLOBAL ─────────────────────────── Semua font-size di file ini sudah dikonversi ke satuan REM (relatif terhadap font-size ), BUKAN px absolut lagi. Cara mengubah ukuran font SELURUH APLIKASI dari satu titik: ubah SATU baris di bawah ini saja (html { font-size: ... }). Contoh: 100% → ukuran normal / default (setara base 16px) 112.5% → semua teks membesar 12.5% (setara base 18px) 87.5% → semua teks mengecil 12.5% (setara base 14px) 125% → semua teks membesar 25% (setara base 20px) TIDAK PERLU lagi mengubah font-size satu per satu di bawah. ────────────────────────────────────────────────────────── */ html { font-size: 100%; /* ← UBAH HANYA DI SINI untuk scale semua font */ } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 0.8125rem; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; } /* ─── Layout ──────────────────────────────────────────────── */ .stp-main { padding: 12px 12px 80px; } /* ─── Top Bar ─────────────────────────────────────────────── */ .stp-topbar { background: var(--color-primary); padding: 12px 16px 14px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; } .stp-topbar__greeting-label { font-size: 0.6875rem; color: rgba(255,255,255,0.75); font-weight: 400; } .stp-topbar__title { font-size: 1.125rem; font-weight: 600; color: #fff; line-height: 1.2; } /* Varian sub-page: back button + judul */ .stp-topbar--subpage .stp-topbar__title { font-size: 1rem; font-weight: 500; } .stp-topbar__back-btn, .stp-topbar__icon-btn { background: rgba(255,255,255,0.15); border: none; border-radius: 10px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.25rem; position: relative; cursor: pointer; flex-shrink: 0; } .stp-notif-badge { position: absolute; top: 5px; right: 5px; background: #E24B4A; color: #fff; border-radius: 99px; font-size: 0.5625rem; font-weight: 700; min-width: 16px; height: 16px; line-height: 16px; padding: 0 3px; text-align: center; } /* ─── Section Label ───────────────────────────────────────── */ .stp-section-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; color: var(--bs-secondary-color, #6c757d); text-transform: uppercase; } /* ─── Card ────────────────────────────────────────────────── */ .stp-card { background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color, #dee2e6); border-radius: 12px; padding: 12px; margin-bottom: 0; } .stp-card--stat { display: flex; flex-direction: column; height: 100%; } .stp-card--chart { padding: 12px 8px 8px; } .stp-card__stat-label { font-size: 0.6875rem; color: var(--bs-secondary-color, #6c757d); margin: 6px 0 2px; } .stp-card__stat-value { font-size: 1.375rem; font-weight: 600; color: var(--bs-body-color, #212529); line-height: 1.1; } .stp-card__stat-unit { font-size: 0.6875rem; color: var(--bs-secondary-color, #6c757d); } .stp-card__stat-time { font-size: 0.625rem; color: var(--bs-secondary-color, #6c757d); margin-top: 5px; } /* ─── Antropometri Pills ──────────────────────────────────── */ .stp-antrop-pill { font-size: 0.75rem; font-weight: 500; color: var(--bs-body-color, #212529); background: var(--bs-secondary-bg, #f8f9fa); border-radius: 6px; padding: 2px 7px; display: inline-block; margin-bottom: 3px; } .stp-antrop-pill span { font-size: 0.625rem; font-weight: 400; color: var(--bs-secondary-color, #6c757d); } .stp-antrop-pill--time { font-size: 0.625rem; color: var(--bs-secondary-color, #6c757d); margin-top: 3px; } /* ─── Icon Wrappers (Kategori Fitur) ─────────────────────── */ .stp-card__icon-wrap { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; flex-shrink: 0; } .stp-icon-teal { background: #E1F5EE; color: #0F6E56; } .stp-icon-blue { background: #E6F1FB; color: #185FA5; } .stp-icon-orange { background: #FAEEDA; color: #854F0B; } .stp-icon-purple { background: #EEEDFE; color: #534AB7; } .stp-icon-green { background: #EAF3DE; color: #3B6D11; } .stp-icon-red { background: #FCEBEB; color: #A32D2D; } .stp-icon-pink { background: #FBEAF0; color: #993556; } /* ─── Badge ───────────────────────────────────────────────── */ .stp-badge { display: inline-block; border-radius: 99px; padding: 2px 8px; font-size: 0.625rem; font-weight: 600; line-height: 1.5; } .stp-badge--lg { font-size: 0.75rem; padding: 3px 10px; } .stp-badge--ok { background: #E1F5EE; color: #085041; border: 1px solid #5DCAA5; } .stp-badge--warn { background: #FAEEDA; color: #633806; border: 1px solid #EF9F27; } .stp-badge--danger { background: #FCEBEB; color: #791F1F; border: 1px solid #F09595; } /* ─── Alert ───────────────────────────────────────────────── */ .stp-alert { display: flex; align-items: flex-start; gap: 10px; border-radius: 10px; padding: 10px 12px; font-size: 0.75rem; line-height: 1.5; } .stp-alert__icon { font-size: 1.125rem; flex-shrink: 0; margin-top: 1px; } .stp-alert__msg { flex: 1; } .stp-alert--danger { background: #FCEBEB; color: #791F1F; border: 1px solid #F09595; } .stp-alert--danger .stp-alert__icon { color: #A32D2D; } .stp-alert--warn { background: #FAEEDA; color: #633806; border: 1px solid #EF9F27; } .stp-alert--warn .stp-alert__icon { color: #854F0B; } .stp-alert--info { background: #E6F1FB; color: #1A4A7A; border: 1px solid #90BDE8; } .stp-alert--info .stp-alert__icon { color: #185FA5; } /* ─── STS Strip ───────────────────────────────────────────── */ .stp-sts-strip { background: linear-gradient(135deg, #1D9E75 0%, #168B64 100%); border-radius: 14px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; margin-top: 4px; } .stp-sts-strip__diary { flex: 1; } .stp-sts-strip__label { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.07em; color: rgba(255,255,255,0.7); text-transform: uppercase; } .stp-sts-strip__sts { display: flex; align-items: baseline; gap: 3px; margin: 2px 0 4px; } .stp-sts-strip__score { font-size: 1.75rem; font-weight: 700; color: #fff; line-height: 1; } .stp-sts-strip__unit { font-size: 0.75rem; color: rgba(255,255,255,0.65); } .stp-sts-strip__cta { font-size: 0.75rem; color: rgba(255,255,255,0.85); text-decoration: none; font-weight: 500; display: inline-block; margin-top: 2px; } .stp-sts-strip__cta:hover { color: #fff; } .stp-sts-strip__streak { display: flex; flex-direction: column; align-items: center; gap: 0; padding-left: 16px; border-left: 1px solid rgba(255,255,255,0.2); min-width: 56px; } .stp-sts-strip__flame { font-size: 1.5rem; color: #FFD166; line-height: 1; } .stp-sts-strip__streak-val { font-size: 1.375rem; font-weight: 700; color: #fff; line-height: 1.1; } .stp-sts-strip__streak-label{ font-size: 0.625rem; color: rgba(255,255,255,0.65); } /* ─── Chart ───────────────────────────────────────────────── */ .stp-chart-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px; color: var(--bs-secondary-color, #6c757d); font-size: 0.75rem; } .stp-chart-empty i { font-size: 1.75rem; opacity: 0.4; } /* ─── Quick Access Items ──────────────────────────────────── */ .stp-quick-item { background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color, #dee2e6); border-radius: 12px; padding: 12px; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--bs-body-color, #212529); font-size: 0.8125rem; font-weight: 500; } .stp-quick-item:active { background: var(--bs-secondary-bg, #f8f9fa); } /* ─── Icon-only Button (chevron dsb.) ────────────────────── */ .stp-btn-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--bs-secondary-bg, #f8f9fa); border: 1px solid var(--bs-border-color, #dee2e6); display: flex; align-items: center; justify-content: center; color: var(--bs-secondary-color, #6c757d); text-decoration: none; font-size: 1rem; flex-shrink: 0; } /* ─── Tombol Utama ────────────────────────────────────────── */ .stp-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 44px; border: none; border-radius: 10px; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: opacity 0.15s; } .stp-btn:disabled { opacity: 0.6; cursor: not-allowed; } .stp-btn--primary { background: var(--color-primary); color: #fff; } .stp-btn--primary:hover { opacity: 0.9; } .stp-btn--danger { background: #FCEBEB; color: #A32D2D; border: 1px solid #F09595; } /* ─── Input ───────────────────────────────────────────────── */ .stp-input-group { margin-bottom: 14px; } .stp-label { display: block; font-size: 0.75rem; font-weight: 500; color: var(--bs-body-color, #212529); margin-bottom: 5px; } .stp-input { width: 100%; height: 40px; background: var(--bs-secondary-bg, #f8f9fa); border: 1px solid var(--bs-border-color, #dee2e6); border-radius: 8px; padding: 0 12px; font-size: 0.8125rem; font-family: inherit; color: var(--bs-body-color, #212529); outline: none; transition: border-color 0.15s; } .stp-input:focus { border-color: var(--color-primary); background: #fff; } .stp-input::placeholder { color: #adb5bd; } /* ─── Avatar ──────────────────────────────────────────────── */ .stp-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary-text); display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 700; flex-shrink: 0; } .stp-avatar--sm { width: 32px; height: 32px; font-size: 0.75rem; } .stp-avatar--lg { width: 56px; height: 56px; font-size: 1.25rem; } /* ─── Bottom Nav ──────────────────────────────────────────── */ .stp-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 60px; background: var(--bs-body-bg, #fff); border-top: 1px solid var(--bs-border-color, #dee2e6); display: flex; align-items: stretch; z-index: 200; padding-bottom: env(safe-area-inset-bottom); } .stp-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; color: var(--bs-secondary-color, #6c757d); font-size: 0.625rem; position: relative; border: none; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .stp-nav-item i { font-size: 1.375rem; line-height: 1; } .stp-nav-item.active { color: var(--color-primary); font-weight: 500; } .stp-nav-dot { position: absolute; top: 8px; right: calc(50% - 16px); width: 7px; height: 7px; background: #E24B4A; border-radius: 50%; border: 2px solid var(--bs-body-bg, #fff); } /* ─── Skeleton Loader ─────────────────────────────────────── */ @keyframes stp-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .stp-skeleton { background: linear-gradient(90deg, #e8edf0 25%, #f5f7f8 50%, #e8edf0 75%); background-size: 800px 100%; animation: stp-shimmer 1.4s infinite; border-radius: 10px; } .stp-skeleton--alert { height: 52px; } .stp-skeleton--card { height: 110px; border-radius: 12px; } .stp-skeleton--card-wide { height: 72px; border-radius: 12px; } .stp-skeleton--chart { height: 170px; border-radius: 12px; } .stp-skeleton--line { height: 14px; border-radius: 4px; } .stp-skeleton--circle { border-radius: 50%; } /* ─── Offline Toast ───────────────────────────────────────── */ .stp-offline-toast { position: fixed; bottom: 72px; left: 50%; transform: translateX(-50%); background: #212529; color: #fff; border-radius: 10px; padding: 10px 16px; font-size: 0.75rem; display: flex; align-items: center; gap: 8px; z-index: 999; white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,0.2); } .stp-offline-toast[hidden] { display: none; } /* ─── Spinner ─────────────────────────────────────────────── */ .stp-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: stp-spin 0.7s linear infinite; } @keyframes stp-spin { to { transform: rotate(360deg); } } /* ─── Divider ─────────────────────────────────────────────── */ .stp-divider { height: 1px; background: var(--bs-border-color, #dee2e6); margin: 12px 0; } /* ─── List Item (menu / riwayat) ──────────────────────────── */ .stp-list-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bs-border-color, #dee2e6); text-decoration: none; color: var(--bs-body-color, #212529); } .stp-list-item:last-child { border-bottom: none; } .stp-list-item__title { font-size: 0.8125rem; font-weight: 500; } .stp-list-item__sub { font-size: 0.6875rem; color: var(--bs-secondary-color, #6c757d); margin-top: 2px; }