. Minimal global bleed: most rules are scoped to .alarmtool, .at-app. Light/Dark support via prefers-color-scheme. */ /* ===== CSS Variables ===== */ :root { --at-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --at-radius: 14px; --at-radius-sm: 10px; --at-shadow-1: 0 6px 20px rgba(2, 6, 23, 0.08); --at-shadow-2: 0 10px 35px rgba(2, 6, 23, 0.12); --at-speed: 180ms; /* Light palette */ --at-bg: #0b1020; --at-surface: #0f172a; /* slate-900 */ --at-panel: #111827; /* gray-900 */ --at-elev: #0b1220; /* deep navy */ --at-text: #e5e7eb; /* gray-200 */ --at-text-dim: #cbd5e1; /* slate-300 */ --at-muted: #94a3b8; /* slate-400 */ --at-primary: #6366f1; /* indigo-500 */ --at-primary-600: #5458ee; --at-primary-700: #4f46e5; --at-accent: #f59e0b; /* amber-500 */ --at-success: #10b981; /* emerald-500 */ --at-danger: #ef4444; /* red-500 */ --at-warning: #f59e0b; /* amber-500 */ --at-info: #0ea5e9; /* sky-500 */ --at-border: 1px solid rgba(148, 163, 184, 0.25); --at-outline: 2px solid rgba(99, 102, 241, 0.55); } @media (prefers-color-scheme: light) { :root { --at-bg: #f7f8fb; --at-surface: #ffffff; --at-panel: #ffffff; --at-elev: #ffffff; --at-text: #0b1220; --at-text-dim: #334155; --at-muted: #475569; --at-border: 1px solid rgba(2, 6, 23, 0.08); --at-shadow-1: 0 6px 20px rgba(2, 6, 23, 0.06); --at-shadow-2: 0 14px 45px rgba(2, 6, 23, 0.12); } } /* ===== Base (scoped) ===== */ .alarmtool, .at-app { font-family: var(--at-font-sans); color: var(--at-text); background: var(--at-bg); min-height: 100dvh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .alarmtool *, .at-app * { box-sizing: border-box; } /* Page max width container */ .alarmtool .at-container, .at-app .at-container { width: min(1100px, 92vw); margin: 32px auto; } /* Headers */ .alarmtool h1, .at-app h1 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem); line-height: 1.15; margin: 0 0 12px; letter-spacing: -0.02em; } .alarmtool h2, .at-app h2 { font-size: 1.25rem; margin: 18px 0 10px; } .alarmtool p, .at-app p { color: var(--at-text-dim); margin: 0 0 12px; } /* ===== Cards & Panels ===== */ .alarmtool .at-card, .at-app .at-card { background: linear-gradient(0deg, var(--at-surface), var(--at-surface)); border: var(--at-border); border-radius: var(--at-radius); box-shadow: var(--at-shadow-1); padding: 18px; } .alarmtool .at-card__header, .at-app .at-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .alarmtool .at-card__title, .at-app .at-card__title { font-weight: 700; color: var(--at-text); letter-spacing: -0.01em; } .alarmtool .at-card__sub, .at-app .at-card__sub { color: var(--at-muted); font-size: .925rem; } /* ===== Buttons ===== */ .alarmtool .at-btn, .at-app .at-btn { --bg: var(--at-panel); --fg: var(--at-text); display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--at-radius-sm); border: var(--at-border); background: var(--bg); color: var(--fg); font-weight: 600; letter-spacing: .01em; cursor: pointer; transition: transform var(--at-speed) ease, box-shadow var(--at-speed) ease, background var(--at-speed) ease; box-shadow: 0 2px 0 rgba(2,6,23,.08); } .alarmtool .at-btn:hover, .at-app .at-btn:hover { transform: translateY(-1px); box-shadow: var(--at-shadow-1); } .alarmtool .at-btn:active, .at-app .at-btn:active { transform: translateY(0); } .alarmtool .at-btn:focus-visible, .at-app .at-btn:focus-visible { outline: var(--at-outline); outline-offset: 2px; } .at-btn--primary { --bg: linear-gradient(180deg, var(--at-primary), var(--at-primary-700)); --fg: #fff; border: none; } .at-btn--success { --bg: linear-gradient(180deg, #22c55e, #16a34a); --fg: #fff; border: none; } .at-btn--danger { --bg: linear-gradient(180deg, #ef4444, #dc2626); --fg: #fff; border: none; } .at-btn--ghost { --bg: transparent; border: var(--at-border); } .at-btn--icon { padding: 9px 11px; aspect-ratio: 1/1; } /* Button group */ .at-btn-group { display: inline-flex; gap: 10px; flex-wrap: wrap; } /* ===== Forms ===== */ .alarmtool .at-field, .at-app .at-field { display: grid; gap: 8px; margin-bottom: 14px; } .alarmtool label.at-label, .at-app label.at-label { font-weight: 600; color: var(--at-text); } .alarmtool .at-input, .at-app .at-input, .alarmtool .at-select, .at-app .at-select, .alarmtool .at-textarea, .at-app .at-textarea { width: 100%; padding: 10px 12px; border-radius: 12px; border: var(--at-border); background: var(--at-elev); color: var(--at-text); outline: none; transition: border-color var(--at-speed), box-shadow var(--at-speed); } .alarmtool .at-input::placeholder, .at-app .at-input::placeholder { color: var(--at-muted); } .alarmtool .at-input:focus, .at-app .at-input:focus, .alarmtool .at-select:focus, .at-app .at-select:focus, .alarmtool .at-textarea:focus, .at-app .at-textarea:focus { border-color: rgba(99, 102, 241, .6); box-shadow: 0 0 0 3px rgba(99, 102, 241, .18); } /* Switch */ .alarmtool .at-switch, .at-app .at-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; } .alarmtool .at-switch input, .at-app .at-switch input { display: none; } .alarmtool .at-switch .at-track, .at-app .at-switch .at-track { width: 44px; height: 26px; border-radius: 999px; background: #334155; position: relative; transition: background var(--at-speed); } .alarmtool .at-switch .at-thumb, .at-app .at-switch .at-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform var(--at-speed); box-shadow: 0 2px 6px rgba(2,6,23,.25); } .alarmtool .at-switch input:checked + .at-track { background: var(--at-primary); } .alarmtool .at-switch input:checked + .at-track .at-thumb { transform: translateX(18px); } /* ===== Tables ===== */ .alarmtool .at-table, .at-app .at-table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: var(--at-radius); } .alarmtool .at-table th, .at-app .at-table th, .alarmtool .at-table td, .at-app .at-table td { padding: 12px 14px; text-align: left; } .alarmtool .at-table thead th, .at-app .at-table thead th { background: rgba(99, 102, 241, .08); color: var(--at-text); font-weight: 700; } .alarmtool .at-table tbody tr:nth-child(odd), .at-app .at-table tbody tr:nth-child(odd) { background: rgba(148, 163, 184, 0.06); } .alarmtool .at-table tbody tr:hover, .at-app .at-table tbody tr:hover { background: rgba(99, 102, 241, .10); } /* ===== Alerts / Badges ===== */ .at-alert { padding: 12px 14px; border-radius: var(--at-radius-sm); display: flex; align-items: center; gap: 10px; border: var(--at-border); } .at-alert--success { background: rgba(16,185,129,.12); color: #d1fae5; border-color: rgba(16,185,129,.25); } .at-alert--info { background: rgba(14,165,233,.12); color: #e0f2fe; border-color: rgba(14,165,233,.25); } .at-alert--warn { background: rgba(245,158,11,.14); color: #fef3c7; border-color: rgba(245,158,11,.28); } .at-alert--error { background: rgba(239,68,68,.14); color: #fee2e2; border-color: rgba(239,68,68,.28); } .at-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: .78rem; } .at-badge--primary { background: rgba(99,102,241,.15); color: #c7d2fe; } .at-badge--success { background: rgba(16,185,129,.18); color: #bbf7d0; } .at-badge--danger { background: rgba(239,68,68,.18); color: #fecaca; } /* ===== Toolbar / Header ===== */ .at-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: var(--at-radius); background: var(--at-surface); border: var(--at-border); box-shadow: var(--at-shadow-1); } /* ===== Grid / Layout helpers ===== */ .at-grid { display: grid; gap: 14px; } @media (min-width: 720px) { .at-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .at-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } } .at-flex { display:flex; gap:12px; align-items:center; } .at-right { margin-left: auto; } .at-center { display:grid; place-items:center; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-20 { margin-top: 20px; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-20 { margin-bottom: 20px; } .p-12 { padding: 12px; } .p-16 { padding: 16px; } .p-20 { padding: 20px; } /* ===== Modals / Overlays ===== */ .at-modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.6); display:none; } .at-modal { position: fixed; inset: 0; display:none; place-items:center; } .at-modal.open, .at-modal-backdrop.open { display: grid; animation: at-fade .2s ease; } .at-modal .at-dialog { width: min(680px, 92vw); background: var(--at-surface); border: var(--at-border); border-radius: var(--at-radius); box-shadow: var(--at-shadow-2); padding: 18px; } /* ===== Toasts ===== */ .at-toast { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 10px; z-index: 9999; } .at-toast .at-toast__item { background: var(--at-surface); border: var(--at-border); border-radius: var(--at-radius-sm); box-shadow: var(--at-shadow-1); padding: 12px 14px; display:flex; align-items:center; gap:10px; animation: at-slide-up .25s ease both; } /* ===== Progress ===== */ .at-progress { height: 10px; background: rgba(148,163,184,.25); border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(2,6,23,.3); } .at-progress > span { display:block; height:100%; width:0%; background: linear-gradient(90deg, var(--at-primary), var(--at-accent)); transition: width .4s ease; } /* ===== Animations ===== */ @keyframes at-fade { from { opacity:.001; transform: scale(.98);} to { opacity:1; transform: scale(1);} } @keyframes at-slide-up { from { opacity:.001; transform: translateY(8px);} to { opacity:1; transform: translateY(0);} } /* ===== Small utility to hide during JS enhancements ===== */ .js-hidden { visibility: hidden; } .js-show { visibility: visible; }