/* AutoClank Theme (CSS variables) */ /* Usage: ... or omit for light Use class="ac" on the app root to scope. */ :root{ --ac-font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji"; --ac-radius-sm: 10px; --ac-radius-md: 14px; --ac-radius-lg: 18px; --ac-shadow-sm: 0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06); --ac-shadow-md: 0 2px 6px rgba(0,0,0,.10), 0 16px 40px rgba(0,0,0,.10); --ac-ring: 0 0 0 3px rgba(47, 184, 255, .25); /* Brand */ --ac-brand-50: #E9F7FF; --ac-brand-100: #CFEFFF; --ac-brand-200: #A7E2FF; --ac-brand-300: #72D0FF; --ac-brand-400: #3AB8FF; --ac-brand-500: #1298FF; /* primary */ --ac-brand-600: #0C7DDB; --ac-brand-700: #0862B0; --ac-brand-800: #064B86; --ac-brand-900: #053B66; --ac-accent-500: #FFB020; /* "clank" amber */ --ac-good-500: #24D18E; --ac-warn-500: #FF5C5C; /* Light defaults */ --ac-bg: #F7FAFF; --ac-surface: #FFFFFF; --ac-surface-2: #F2F6FF; --ac-border: rgba(15, 23, 42, .10); --ac-text: #0F172A; --ac-text-2: rgba(15, 23, 42, .72); --ac-muted: rgba(15, 23, 42, .55); --ac-link: var(--ac-brand-600); --ac-focus: var(--ac-brand-500); --ac-card: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78)); --ac-hero: radial-gradient(1200px 600px at 15% 10%, rgba(18,152,255,.24), transparent 55%), radial-gradient(900px 500px at 85% 0%, rgba(255,176,32,.18), transparent 50%); } html[data-theme="dark"]{ --ac-bg: #0B1220; --ac-surface: rgba(255,255,255,.06); --ac-surface-2: rgba(255,255,255,.10); --ac-border: rgba(226,232,240,.14); --ac-text: #EAF2FF; --ac-text-2: rgba(234,242,255,.72); --ac-muted: rgba(234,242,255,.55); --ac-link: var(--ac-brand-300); --ac-card: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05)); --ac-shadow-sm: 0 1px 2px rgba(0,0,0,.22), 0 18px 50px rgba(0,0,0,.35); --ac-shadow-md: 0 2px 8px rgba(0,0,0,.30), 0 26px 70px rgba(0,0,0,.42); --ac-ring: 0 0 0 3px rgba(58, 184, 255, .28); } /* ---------- Base ---------- */ .ac{ font-family: var(--ac-font-sans); color: var(--ac-text); background: var(--ac-bg); min-height: 100vh; } .ac a{ color: var(--ac-link); text-decoration: none; } .ac a:hover{ text-decoration: underline; } .ac .surface{ background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-radius-md); box-shadow: var(--ac-shadow-sm); } .ac .card{ background: var(--ac-card); border: 1px solid var(--ac-border); border-radius: var(--ac-radius-lg); box-shadow: var(--ac-shadow-sm); backdrop-filter: blur(8px); } .ac .hero-bg{ background: var(--ac-hero); } .ac .btn{ display: inline-flex; align-items: center; gap: .55rem; padding: .65rem .95rem; border-radius: var(--ac-radius-md); border: 1px solid var(--ac-border); background: var(--ac-surface); color: var(--ac-text); box-shadow: var(--ac-shadow-sm); cursor: pointer; transition: transform .08s ease, box-shadow .12s ease, background .12s ease; } .ac .btn:hover{ transform: translateY(-1px); box-shadow: var(--ac-shadow-md); } .ac .btn:active{ transform: translateY(0px); box-shadow: var(--ac-shadow-sm); } .ac .btn:focus-visible{ outline: none; box-shadow: var(--ac-shadow-md), var(--ac-ring); } .ac .btn-primary{ border-color: rgba(18,152,255,.45); background: linear-gradient(180deg, rgba(18,152,255,.95), rgba(12,125,219,.92)); color: white; } .ac .btn-primary:hover{ background: linear-gradient(180deg, rgba(58,184,255,.98), rgba(12,125,219,.95)); } .ac .chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.22rem .55rem; border-radius: 999px; font-size:.82rem; border: 1px solid var(--ac-border); background: var(--ac-surface-2); color: var(--ac-text-2); } .ac .chip-good{ border-color: rgba(36,209,142,.35); background: rgba(36,209,142,.14); color: color-mix(in srgb, var(--ac-text) 85%, var(--ac-good-500)); } .ac .chip-warn{ border-color: rgba(255,92,92,.35); background: rgba(255,92,92,.14); } .ac .input{ width: 100%; padding: .7rem .9rem; border-radius: var(--ac-radius-md); border: 1px solid var(--ac-border); background: var(--ac-surface); color: var(--ac-text); outline: none; } .ac .input:focus{ box-shadow: var(--ac-ring); border-color: rgba(18,152,255,.45); } .ac .kbd{ font: 600 .78rem var(--ac-font-sans); padding: .1rem .35rem; border-radius: .45rem; background: var(--ac-surface-2); border: 1px solid var(--ac-border); color: var(--ac-text-2); } .ac .divider{ height:1px; background: var(--ac-border); } /* Ticket status */ .ac .status{ display:inline-flex; align-items:center; gap:.45rem; padding:.28rem .6rem; border-radius:999px; border:1px solid var(--ac-border); background: var(--ac-surface-2); color: var(--ac-text-2); font-size:.82rem; } .ac .status::before{ content:""; width:.55rem; height:.55rem; border-radius:999px; background: var(--ac-muted); } .ac .status.todo::before{ background: rgba(255,176,32,.95); } .ac .status.doing::before{ background: rgba(58,184,255,.95); } .ac .status.done::before{ background: rgba(36,209,142,.95); } .ac .status.blocked::before{ background: rgba(255,92,92,.95); } /* Subtle grid bg helper */ .ac .grid-bg{ background-image: linear-gradient(to right, rgba(148,163,184,.12) 1px, transparent 1px), linear-gradient(to bottom, rgba(148,163,184,.12) 1px, transparent 1px); background-size: 28px 28px; background-position: -1px -1px; } html[data-theme="dark"] .ac .grid-bg{ background-image: linear-gradient(to right, rgba(148,163,184,.10) 1px, transparent 1px), linear-gradient(to bottom, rgba(148,163,184,.10) 1px, transparent 1px); }