/* * SwiftUI Native Theme * Applied only when the WKWebView shell adds .native-app to . * Overrides tools.css variables and component styles to mimic SwiftUI dark mode. */ /* ── DESIGN TOKENS ── */ html.native-app { --sf: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif; --sf-rounded: "SF Pro Rounded", -apple-system, BlinkMacSystemFont, sans-serif; --sf-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, monospace; /* macOS dark-mode palette */ --bg: #1C1C1E; --surface: #2C2C2E; --surface2: #3A3A3C; --border: #38383A; --border-bright: #48484A; /* System colours (dark) */ --accent: #0A84FF; --accent-dim: rgba(10,132,255,0.15); --accent-glow: rgba(10,132,255,0.30); --green: #30D158; --green-dim: rgba(48,209,88,0.15); --amber: #FF9F0A; --amber-dim: rgba(255,159,10,0.15); --danger: #FF453A; --danger-dim: rgba(255,69,58,0.15); /* Typography */ --text: #FFFFFF; --text-muted: #8E8E93; --text-dim: #AEAEB2; --mono: var(--sf-mono); --sans: var(--sf); /* SwiftUI geometry */ --radius: 10px; --radius-lg: 16px; --transition: 0.2s ease; } /* ── GLOBAL ── */ html.native-app body { font-family: var(--sf); -webkit-font-smoothing: antialiased; background: var(--bg); } /* ── HEADER (NavigationBar style) ── */ html.native-app header, html.native-app header.tool-bar { background: rgba(44,44,46,0.72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 0.5px solid rgba(255,255,255,0.1); height: 52px; padding-left: 78px; /* Clear macOS traffic lights */ } html.native-app .logo-icon { background: var(--accent); border-radius: 8px; width: 30px; height: 30px; } html.native-app .logo-text { font-family: var(--sf-rounded); font-weight: 700; font-size: 14px; color: var(--accent); letter-spacing: 0; } html.native-app .header-right a { font-family: var(--sf); font-size: 13px; font-weight: 500; color: var(--accent); border-radius: 8px; padding: 6px 12px; letter-spacing: 0; } html.native-app .header-right a:hover { background: var(--accent-dim); color: var(--accent); } html.native-app .header-right .user-email { font-family: var(--sf); font-size: 12px; color: var(--text-muted); letter-spacing: 0; } /* ── SIDEBAR (SwiftUI List sidebar) ── */ html.native-app nav { background: rgba(28,28,30,0.6); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-right: 0.5px solid rgba(255,255,255,0.08); } html.native-app .nav-section-label { font-family: var(--sf); font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: uppercase; color: var(--text-muted); } html.native-app nav a { font-family: var(--sf); font-size: 13px; font-weight: 400; border-left: none; border-radius: 8px; margin: 1px 8px; padding: 7px 10px; transition: background var(--transition); } html.native-app nav a:hover { background: rgba(255,255,255,0.06); } html.native-app nav a.active { background: var(--accent-dim); color: var(--accent); border-left: none; } /* ── MAIN CONTENT ── */ html.native-app main { background: var(--bg); } /* ── SECTION HEADERS ── */ html.native-app .section-tag { font-family: var(--sf); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: uppercase; color: var(--text-muted); } html.native-app .section-title { font-family: var(--sf); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; } html.native-app .section-desc { font-family: var(--sf); font-size: 15px; color: var(--text-muted); } /* ── CARDS (GroupBox / Inset Grouped List style) ── */ html.native-app .card { background: var(--surface); border: 0.5px solid rgba(255,255,255,0.06); border-radius: var(--radius-lg); padding: 16px 20px; box-shadow: none; } html.native-app .card-title { font-family: var(--sf); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: uppercase; color: var(--text-muted); } html.native-app .card-title::after { display: none; } /* ── FORM FIELDS (SwiftUI TextField / Picker style) ── */ html.native-app label { font-family: var(--sf); font-size: 13px; font-weight: 500; color: var(--text-dim); letter-spacing: 0; } html.native-app label .hint { font-size: 11px; } html.native-app input[type="text"], html.native-app input[type="password"], html.native-app input[type="url"], html.native-app input[type="number"], html.native-app select, html.native-app textarea { font-family: var(--sf); font-size: 15px; background: rgba(0,0,0,0.2); border: 0.5px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 10px 14px; color: var(--text); } html.native-app input:focus, html.native-app select:focus, html.native-app textarea:focus { box-shadow: 0 0 0 3px var(--accent-glow); border-color: transparent; } html.native-app input::placeholder, html.native-app textarea::placeholder { font-size: 15px; color: var(--text-muted); } html.native-app select { /* Solid background prevents WKWebView compositing the alpha against the window vibrancy material, which otherwise produces a zig-zag striped popup. background-repeat/position must be explicit here because the group rule above uses the `background` shorthand (which resets them to repeat/0% 0%). */ background-color: var(--surface2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238E8E93' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } html.native-app select option { background: var(--surface2); color: var(--text); } /* ── TOGGLES (SwiftUI Toggle / green pill) ── */ html.native-app .toggle-row { background: var(--surface); border: none; border-radius: 12px; padding: 12px 16px; } html.native-app .toggle-row:hover { background: var(--surface2); border: none; } html.native-app .toggle-row.enabled { background: var(--surface); border: none; } html.native-app .toggle-label { font-family: var(--sf); font-size: 15px; font-weight: 400; } html.native-app .toggle-desc { font-family: var(--sf); font-size: 13px; } html.native-app .toggle-switch { width: 51px; height: 31px; background: #636366; border-radius: 999px; } html.native-app .toggle-switch::after { width: 27px; height: 27px; background: #FFFFFF; top: 2px; left: 2px; box-shadow: 0 2px 4px rgba(0,0,0,0.3); } html.native-app .toggle-row.enabled .toggle-switch { background: var(--green); } html.native-app .toggle-row.enabled .toggle-switch::after { left: 22px; background: #FFFFFF; } /* ── BUTTONS (SwiftUI Button styles) ── */ html.native-app .btn { font-family: var(--sf); font-size: 15px; font-weight: 600; border-radius: 12px; padding: 10px 20px; letter-spacing: 0; text-transform: none; } html.native-app .btn-primary { background: var(--accent); color: #FFFFFF; border-color: var(--accent); } html.native-app .btn-primary:hover { opacity: 0.85; box-shadow: none; } html.native-app .btn-success { background: var(--green); color: #FFFFFF; border-color: var(--green); } html.native-app .btn-success:hover { opacity: 0.85; box-shadow: none; } html.native-app .btn-danger { background: var(--danger); color: #FFFFFF; border-color: var(--danger); } html.native-app .btn-danger:hover { opacity: 0.85; box-shadow: none; } html.native-app .btn-ghost { background: rgba(255,255,255,0.06); border-color: transparent; color: var(--accent); } html.native-app .btn-ghost:hover { background: rgba(255,255,255,0.1); color: var(--accent); border-color: transparent; } html.native-app .btn-add { border: 1px dashed var(--border-bright); border-radius: 12px; font-family: var(--sf); font-size: 14px; letter-spacing: 0; } /* ── ITEM ROWS (SwiftUI List rows) ── */ html.native-app .item-row { background: var(--surface); border: none; border-radius: 12px; padding: 12px 16px; } html.native-app .item-row:hover { background: var(--surface2); border-color: transparent; } html.native-app .item-cell { font-family: var(--sf-mono); font-size: 13px; } html.native-app .item-cell.name { font-family: var(--sf); } html.native-app .item-remove { border: none; border-radius: 8px; background: rgba(255,69,58,0.12); color: var(--danger); } html.native-app .item-remove:hover { background: rgba(255,69,58,0.25); border-color: transparent; } html.native-app .item-edit { border: none; border-radius: 8px; background: rgba(10,132,255,0.12); color: var(--accent); font-family: var(--sf); } html.native-app .item-edit:hover { background: rgba(10,132,255,0.25); border-color: transparent; } /* ── DASHBOARD (SwiftUI grid) ── */ html.native-app .dashboard { max-width: 1000px; } html.native-app .tool-search-input { font-family: var(--sf); font-size: 15px; background: var(--surface); border: none; border-radius: 12px; padding: 12px 16px; } html.native-app .tool-search-input:focus { box-shadow: 0 0 0 3px var(--accent-glow); border-color: transparent; } html.native-app .tool-group-title { font-family: var(--sf); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; } html.native-app .tool-group-desc { font-family: var(--sf); font-size: 15px; } html.native-app .tool-card { background: var(--surface); border: 0.5px solid rgba(255,255,255,0.06); border-radius: var(--radius-lg); padding: 16px 20px; box-shadow: none; transition: background var(--transition); } html.native-app .tool-card:hover { background: var(--surface2); border-color: rgba(255,255,255,0.1); box-shadow: none; transform: none; } html.native-app .tool-card-title { font-family: var(--sf); font-size: 15px; font-weight: 600; letter-spacing: 0; } html.native-app .tool-card-desc { font-family: var(--sf); font-size: 13px; } html.native-app .tool-card .btn { font-size: 13px; padding: 8px 16px; border-radius: 10px; } /* ── BADGES ── */ html.native-app .badge { font-family: var(--sf); font-size: 11px; border-radius: 6px; letter-spacing: 0; padding: 3px 8px; } /* ── ALERTS ── */ html.native-app .alert { border: none; border-radius: 12px; font-family: var(--sf); font-size: 14px; } /* ── DROP ZONES ── */ html.native-app .drop-zone { border-radius: var(--radius-lg); border: 2px dashed var(--border-bright); background: rgba(0,0,0,0.15); } html.native-app .drop-zone:hover, html.native-app .drop-zone.drag-over { border-color: var(--accent); background: var(--accent-dim); } html.native-app .drop-zone-label { font-family: var(--sf); font-size: 14px; } /* ── XML PREVIEW ── */ html.native-app .xml-preview { font-family: var(--sf-mono); font-size: 12px; border-radius: 12px; background: rgba(0,0,0,0.2); border: 0.5px solid rgba(255,255,255,0.06); } /* ── GENERATE CARD ── */ html.native-app .generate-card { border: 0.5px solid rgba(255,255,255,0.06); border-radius: var(--radius-lg); box-shadow: none; overflow: hidden; } html.native-app .generate-header { border-bottom: 0.5px solid rgba(255,255,255,0.08); } html.native-app .generate-title { font-family: var(--sf); font-size: 13px; font-weight: 600; letter-spacing: 0; } /* ── INFO / WARNING BOXES ── */ html.native-app .info-box { border: none; border-radius: 12px; background: rgba(10,132,255,0.12); font-family: var(--sf); font-size: 14px; } html.native-app .warning-box { border: none; border-radius: 12px; background: rgba(255,159,10,0.12); font-family: var(--sf); font-size: 14px; } /* ── EMPTY STATE ── */ html.native-app .empty-state { font-family: var(--sf); font-size: 14px; border-radius: 12px; border: 1px dashed var(--border-bright); letter-spacing: 0; } /* ── VALIDATION ── */ html.native-app .validation-banner { border: none; border-radius: 12px; font-family: var(--sf); } /* ── STATUS PILL ── */ html.native-app .status-pill { font-family: var(--sf); font-size: 12px; letter-spacing: 0; } /* ── TOOL BAR (back button) ── */ html.native-app .tool-bar-back { font-family: var(--sf); font-size: 13px; font-weight: 500; border-radius: 8px; letter-spacing: 0; border: none; background: rgba(255,255,255,0.06); color: var(--accent); } html.native-app .tool-bar-back:hover { background: rgba(255,255,255,0.1); color: var(--accent); border-color: transparent; } /* ── SECTION FOOTER ── */ html.native-app .section-footer { border-top: 0.5px solid rgba(255,255,255,0.08); } /* ── BITMASK DISPLAY ── */ html.native-app .bitmask-display { background: var(--surface); border: none; border-radius: 12px; } html.native-app .bitmask-label { font-family: var(--sf); letter-spacing: 0; } html.native-app .bitmask-value { font-family: var(--sf-rounded); } /* ── SCROLLBAR (thinner, native-like) ── */ html.native-app ::-webkit-scrollbar { width: 8px; height: 8px; } html.native-app ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; } html.native-app ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); } html.native-app ::-webkit-scrollbar-track { background: transparent; } /* ── PAGE HERO ── */ html.native-app .page-hero .page-title { font-family: var(--sf); font-size: 34px; font-weight: 700; letter-spacing: -0.02em; } html.native-app .page-hero .page-lead { font-family: var(--sf); font-size: 17px; } /* ── CODE ── */ html.native-app code { font-family: var(--sf-mono); font-size: 12px; } /* ── COLUMN HEADERS ── */ html.native-app .col-header { font-family: var(--sf); font-size: 11px; font-weight: 600; letter-spacing: 0; } /* ── FIELD GRID adjustments ── */ html.native-app .field-grid { gap: 16px; } /* ── PRINTER/DRIVER ITEMS ── */ html.native-app .printer-item, html.native-app .driver-item { background: var(--surface); border: none; border-radius: 12px; } html.native-app .printer-item:hover, html.native-app .driver-item:hover { background: var(--surface2); border-color: transparent; }