/* Copyright (c) 2026 Pavel Bardukov. All rights reserved. See LICENSE. */ /* The application around the screens: header, screen switching, the skill-profile dialog. */ /* Every theme is dark: native parts (select drop-downs, number spinners, the search field's ✕, default scrollbars) follow that instead of Chromium's white. */ :root{--muted:var(--dim); color-scheme:dark} html,body{height:100%} /* ── form fields ── Without this every input/select/textarea is the browser's white box on the dark window. `:where()` keeps the specificity at zero, so any class rule (`.ships-search`, `.ed-cq-in`, `.ed-name`, the SSO dialog's own checkboxes) still wins on sizes and details. */ :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea){ background-color:var(--bg-card); color:var(--text); border:1px solid var(--border); border-radius:3px; font-family:"Segoe UI",Arial,sans-serif; padding:2px 5px} :where(input, select, textarea):focus{outline:none; border-color:var(--accent)} :where(input, textarea)::placeholder{color:var(--dim); opacity:1} :where(option, optgroup){background-color:var(--bg-panel); color:var(--text)} :where(optgroup){color:var(--accent)} :where(select){cursor:pointer} :where(input:not([type=checkbox]):not([type=radio]), select, textarea):disabled{opacity:.5; cursor:default} /* Read only (built-in and EVE profiles): still legible, but flatter than an editable field. Checkboxes count as `:read-only` too, hence the exclusions. */ :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), textarea):read-only:not(:disabled){ background-color:var(--bg-panel); color:var(--dim)} :where(input:not([type=checkbox]):not([type=radio]), textarea):read-only:focus{border-color:var(--border-lt)} /* Chromium paints autofilled fields pale yellow/blue; hold the theme colours instead. */ :where(input):-webkit-autofill{-webkit-text-fill-color:var(--text); box-shadow:inset 0 0 0 40px var(--bg-card); caret-color:var(--text)} /* Plain checkboxes and radios outside the SSO dialog take the accent instead of system blue. */ :where(input[type=checkbox], input[type=radio]){accent-color:var(--accent)} body{margin:0; padding:0; display:flex; flex-direction:column; overflow:hidden} .app-head{display:flex; align-items:center; gap:10px; padding:8px 14px; background-color:var(--bg-panel); border-bottom:1px solid var(--accent2); flex:0 0 auto} .app-title{font-family:var(--font-display); letter-spacing:var(--display-tracking); color:var(--accent); font-size:16px; margin-right:6px} /* The open fit's controls, moved up from the editor's head row (2026-09-27; that row holds the fit tabs now). Shown on the fit screen only. The name field gives way first when the window is narrow; the name prompt floats under the bar instead of widening it. */ .app-fitbar{display:inline-flex; align-items:center; gap:8px; min-width:0; flex:0 1 auto; position:relative} .app-fitbar .ed-name{width:200px; min-width:90px; flex:0 1 200px} .app-fitbar button{flex:0 0 auto; white-space:nowrap} .app-fitbar .ed-ask{position:absolute; left:0; top:calc(100% + 9px); z-index:1320; padding:6px 8px; border:1px solid var(--border-lt); border-radius:4px; background-color:var(--bg-panel); box-shadow:0 6px 20px rgba(0,0,0,.5)} .head-field{display:inline-flex; align-items:center; gap:6px; color:var(--dim); font-size:12px} #profile{min-width:160px} /* Refresh the pilot's skills from EVE. Shown only while an EVE character is picked; it spins while the request runs and turns red with the reason in its tooltip when it fails. */ #btn-profile-sync{padding:0 8px; line-height:1} .sync-ico{display:inline-block; font-size:14px} #btn-profile-sync.busy .sync-ico,.sync-ico.spin{animation:sso-spin .9s linear infinite} #btn-profile-sync:disabled{opacity:.6; cursor:default; transform:none} #btn-profile-sync:disabled:hover{color:var(--dim); border-color:var(--border)} #btn-profile-sync.err{color:var(--red); border-color:var(--red)} #btn-profile-sync.err:hover{color:var(--red); border-color:var(--red)} #btn-contacts{flex:0 0 auto; white-space:nowrap} #btn-contacts[aria-expanded="true"]{color:var(--accent); border-color:var(--accent)} /* ── Contacts: a drop-down under the header's button (ported from Fleet Manager's contact strip) ── `.popup` pins itself with right/bottom for the editor's menus; this one is fixed and placed by `placeContacts` (shell.js) from the button's rectangle, so both are reset to auto here. The four entries look alike but are two elements - a