/* BuiltByArchitects — global theme (plain CSS, no preprocessors) */ /* Place this at: /app/assets/bba.css */ /* It relies on . If 'auto' is present, bba-theme.js will switch it to light/dark at runtime based on user OS. */ /* Reset-ish */ * { box-sizing: border-box; } html, body { height: 100%; } img, svg, video, canvas { display: block; max-width: 100%; } /* Light theme */ :root { --bg: #f6f7fb; --text: #111827; --muted: #6b7280; --card: #ffffff; --line: #e5e7eb; --shade: #f3f4f6; --primary: #2563eb; --primary-contrast: #ffffff; --danger: #dc2626; --ok: #16a34a; --warn: #f59e0b; --shadow: 0 1px 3px rgba(0,0,0,0.06); } /* Dark theme overrides */ html[data-theme="dark"] { --bg: #0b1020; --text: #e5e7eb; --muted: #9aa4b2; --card: #0f172a; --line: #1f2937; --shade: #111827; --primary: #60a5fa; --primary-contrast: #0b1020; --danger: #f87171; --ok: #34d399; --warn: #fbbf24; --shadow: 0 1px 3px rgba(0,0,0,0.35); } /* Base */ body { margin: 24px; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); } /* Typography */ h1, h2, h3, h4 { margin: 0 0 8px; } .muted { color: var(--muted); } .small { font-size: 12px; } /* Layout helpers */ .row { display: flex; gap: 8px; align-items: center; } .right { display: flex; gap: 8px; align-items: center; margin-left: auto; } .grid { display: grid; gap: 12px; } .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } /* Cards & panels */ .card, .group, .panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); } .card { overflow: hidden; } .panel.pad, .group { padding: 16px; } /* Buttons */ .btn { padding: 10px 14px; border: 1px solid transparent; border-radius: 10px; background: #e5e7eb; color: var(--text); text-decoration: none; font-size: 14px; cursor: pointer; transition: transform .04s ease, filter .15s ease, background .15s ease, border-color .15s ease; } .btn:hover { filter: brightness(0.98); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--primary); color: var(--primary-contrast); } .btn-outline { background: transparent; border-color: var(--line); } /* Form controls */ input, textarea, select { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--text); } html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: #0b132b; border-color: #1f2937; color: var(--text); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); } /* Radios/checkboxes that use native color */ input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--primary); } /* Tables */ table { border-collapse: separate; border-spacing: 0; width: 100%; } th, td { border-bottom: 1px solid var(--line); padding: 12px; text-align: left; font-size: 14px; vertical-align: middle; } th { background: var(--shade); font-weight: 600; white-space: nowrap; } tr:hover td { background: color-mix(in srgb, var(--shade) 60%, transparent); } html[data-theme="dark"] tr:hover td { background: rgba(255,255,255,0.02); } /* Status pill */ .pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; color: #fff; } .pill.ok { background: var(--ok); } .pill.warn { background: var(--warn); } .pill.danger { background: var(--danger); } .pill.muted { background: #6b7280; } /* Menu (kebab) */ .menu { position: relative; } .menu-btn { border: 1px solid var(--line); background: var(--shade); padding: 6px 10px; border-radius: 8px; cursor: pointer; } .menu-list { position: absolute; right: 0; top: 36px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.15); min-width: 180px; display: none; z-index: 20; } .menu-list a, .menu-list button { display: block; width: 100%; text-align: left; background: transparent; border: none; padding: 10px 12px; font-size: 14px; cursor: pointer; color: var(--text); } .menu-list a:hover, .menu-list button:hover { background: var(--shade); } /* Modal */ .modal-backdrop { position: fixed; inset: 0; background: rgba(17,24,39,.45); display: none; align-items: center; justify-content: center; padding: 16px; z-index: 50; } .modal { width: 100%; max-width: 720px; background: var(--card); border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0,0,0,.35); overflow: hidden; } .modal header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); } .modal h2 { margin: 0; font-size: 18px; } .modal .content { padding: 18px; } .modal footer { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 18px; border-top: 1px solid var(--line); background: var(--shade); } /* Topbar */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }