/* public/css/common.css Port of Android Compose theme: - Colors from Color.kt (Purple40/80, PurpleGrey40/80, Pink40/80) - Light/Dark schemes from Theme.kt - Typography baseline from Type.kt (bodyLarge 16/24/0.5sp) - Responsive + accessibility tokens */ /* 1) CSS Reset (small, safe) */ * { box-sizing: border-box; } html, body { height: 100%; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; } /* 2) Typography base (mirrors Type.kt bodyLarge) */ :root { --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; --fs-body: 16px; /* bodyLarge fontSize = 16.sp */ --lh-body: 24px; /* bodyLarge lineHeight = 24.sp */ --ls-body: 0.5px; /* bodyLarge letterSpacing = 0.5.sp */ --radius-xs: 8px; --radius-sm: 10px; --radius-md: 12px; --radius-lg: 16px; --shadow-1: 0 1px 2px rgba(0,0,0,.05); /* Material tokens (LIGHT) from Theme.kt + Color.kt */ --md-primary: #6650a4; /* Purple40 */ --md-secondary: #625b71; /* PurpleGrey40 */ --md-tertiary: #7D5260; /* Pink40 */ --md-on-primary: #ffffff; --md-on-secondary: #ffffff; --md-on-tertiary: #ffffff; --md-background: #FFFBFE; --md-surface: #FFFBFE; --md-on-background: #1C1B1F; --md-on-surface: #1C1B1F; /* Derived app tokens */ --color-bg: var(--md-background); --color-surface: #f6f9f7; /* subtle card tint on light */ --color-text: var(--md-on-surface); --color-muted: #6b7280; --color-primary: var(--md-primary); --color-primary-ink: var(--md-on-primary); --color-secondary: var(--md-secondary); --color-tertiary: var(--md-tertiary); --color-ok: #16a34a; --color-danger: #ef4444; /* Layout */ --container-max: 1000px; --gap: 12px; } /* 3) Dark scheme (maps Theme.kt DarkColorScheme with Purple80/… as accents) */ @media (prefers-color-scheme: dark) { :root { --md-primary: #D0BCFF; /* Purple80 */ --md-secondary: #CCC2DC; /* PurpleGrey80 */ --md-tertiary: #EFB8C8; /* Pink80 */ --md-on-primary: #1C1B1F; --md-on-secondary: #1C1B1F; --md-on-tertiary: #1C1B1F; --md-background: #0b0f17; --md-surface: #111827; --md-on-background: #e5e7eb; --md-on-surface: #e5e7eb; --color-bg: var(--md-background); --color-surface: var(--md-surface); --color-text: var(--md-on-surface); --color-muted: #9aa3af; --color-ok: #22c55e; --color-danger: #f87171; } } /* Optional manual toggle: add .theme-dark to to force dark */ html.theme-dark { --md-primary: #D0BCFF; --md-secondary: #CCC2DC; --md-tertiary: #EFB8C8; --md-on-primary: #1C1B1F; --md-on-secondary: #1C1B1F; --md-on-tertiary: #1C1B1F; --md-background: #0b0f17; --md-surface: #111827; --md-on-background: #e5e7eb; --md-on-surface: #e5e7eb; --color-bg: var(--md-background); --color-surface: var(--md-surface); --color-text: var(--md-on-surface); --color-muted: #9aa3af; } /* 4) Base elements */ body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--color-text); background: var(--color-bg); } /* Links and focus */ a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 3px solid color-mix(in srgb, var(--color-primary) 60%, white); outline-offset: 2px; } /* 5) Reusable UI primitives (used by device.css) */ .btn { display: inline-flex; align-items: center; justify-content: center; border: none; cursor: pointer; height: 40px; padding: 8px 14px; border-radius: var(--radius-sm); font-weight: 600; box-shadow: var(--shadow-1); } .btn-primary { background: var(--color-primary); color: var(--md-on-primary); } .btn-outline { background: transparent; color: var(--color-text); border: 1px solid #cfd8dc; } .btn-ghost { background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-text); } .chip { display: inline-block; padding: 6px 10px; border-radius: 16px; font-size: 13px; background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-text); } .card { background: var(--color-surface); border-radius: var(--radius-lg); padding: 12px; box-shadow: var(--shadow-1); } .status { font-weight: 600; } .status-connected { color: var(--color-ok); } .status-disconnected{ color: var(--color-danger); } /* Utilities */ .text-muted { color: var(--color-muted); } .round-lg { border-radius: var(--radius-lg); } .hidden { display: none !important; } /* Container / grid */ .container { max-width: var(--container-max); margin: 0 auto; padding: 16px; display: grid; grid-template-columns: 1fr; gap: var(--gap); } /* Responsive breakpoints consistent with device.css */ @media (min-width: 820px) { .container { grid-template-columns: 1fr 1fr; grid-auto-flow: dense; } } @media (min-width: 1100px) { /* reserved for larger screens */ }