768 lines
25 KiB
Svelte
768 lines
25 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import { startTimeZonePreference } from '$ui/stores/time-zone.js';
|
|
import { afterNavigate, beforeNavigate, onNavigate, goto } from '$app/navigation';
|
|
import { startPipelineStream } from '$ui/stores/pipeline.js';
|
|
import { startServerStream } from '$ui/stores/servers.js';
|
|
import { startFleetMonitor, hydrateFleet } from '$ui/stores/fleet.js';
|
|
import { page } from '$app/stores';
|
|
import Navigation from '$ui/components/Navigation.svelte';
|
|
import CommandPalette from '$ui/components/CommandPalette.svelte';
|
|
import { visibleNavigation } from '$lib/navigation.js';
|
|
import BrandMark from '$ui/components/BrandMark.svelte';
|
|
import Confirmation from '$ui/components/Confirmation.svelte';
|
|
import Dialog from '$ui/components/primitives/Dialog.svelte';
|
|
import { resolveConfirmation } from '$ui/confirm.js';
|
|
import '$ui/styles/components.css';
|
|
import { enableViewTransitions } from '$ui/motion/viewTransition.js';
|
|
import type { AuthUser } from '$lib/auth.js';
|
|
// Side-effect import — puts @fontsource CSS on Vite's module graph so
|
|
// the referenced woff/woff2 files get emitted into the build.
|
|
import '$ui/styles/fonts.js';
|
|
|
|
interface Props {
|
|
children: import('svelte').Snippet;
|
|
data: { user: AuthUser | null; setupRequired: boolean };
|
|
}
|
|
let { children, data }: Props = $props();
|
|
const publicPage = $derived(['/login', '/setup'].includes($page.url.pathname));
|
|
const sessionReady = $derived(!!data.user && !data.user.mustChangePassword && !publicPage);
|
|
let accountOpen = $state(false);
|
|
let signingOut = $state(false);
|
|
let signOutError = $state('');
|
|
let helpOpen = $state(false);
|
|
let paletteOpen = $state(false);
|
|
let drawerOpen = $state(false);
|
|
let sidebarCollapsed = $state(false);
|
|
let accountButton = $state<HTMLButtonElement>();
|
|
const accountName = $derived(data.user?.displayName || data.user?.username || 'Account');
|
|
const accountInitial = $derived(Array.from(accountName.trim())[0]?.toLocaleUpperCase() || '?');
|
|
|
|
function dismissAccount(event: MouseEvent) {
|
|
if (event.target instanceof Element && !event.target.closest('.account-menu'))
|
|
accountOpen = false;
|
|
}
|
|
|
|
function openHelp() {
|
|
if (accountOpen) accountButton?.focus();
|
|
accountOpen = false;
|
|
helpOpen = true;
|
|
}
|
|
|
|
beforeNavigate(() => performance.mark('ec:navigation-start'));
|
|
afterNavigate(() => {
|
|
if (performance.getEntriesByName('ec:navigation-start').length) {
|
|
performance.measure('ec:navigation', 'ec:navigation-start');
|
|
performance.clearMarks('ec:navigation-start');
|
|
}
|
|
});
|
|
afterNavigate(() => {
|
|
accountOpen = false;
|
|
drawerOpen = false;
|
|
paletteOpen = false;
|
|
resolveConfirmation(false);
|
|
});
|
|
|
|
function closeMenu(event: KeyboardEvent) {
|
|
if (event.key === 'Escape' && accountOpen) {
|
|
accountOpen = false;
|
|
accountButton?.focus();
|
|
}
|
|
}
|
|
|
|
async function signOut() {
|
|
if (signingOut) return;
|
|
signingOut = true;
|
|
signOutError = '';
|
|
try {
|
|
const response = await fetch('/api/auth/logout', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: '{}'
|
|
});
|
|
if (!response.ok) {
|
|
const body = await response.json();
|
|
throw new Error(body.error ?? 'Could not sign out. Try again.');
|
|
}
|
|
window.location.assign('/login');
|
|
} catch (cause) {
|
|
signOutError = (cause as Error).message;
|
|
signingOut = false;
|
|
}
|
|
}
|
|
|
|
$effect(() => {
|
|
if (!sessionReady) return;
|
|
const stopPipeline = startPipelineStream();
|
|
const stopServers = startServerStream();
|
|
return () => {
|
|
stopPipeline?.();
|
|
stopServers?.();
|
|
};
|
|
});
|
|
|
|
$effect(() => {
|
|
if (!sessionReady) return;
|
|
if ('fleetSnapshot' in $page.data && $page.data.fleetSnapshot)
|
|
hydrateFleet($page.data.fleetSnapshot);
|
|
});
|
|
|
|
$effect(() => {
|
|
if (!sessionReady) return;
|
|
// Navigation badges need fresh host evidence on every signed-in page.
|
|
return startFleetMonitor();
|
|
});
|
|
|
|
onMount(() => {
|
|
const stopTimeZone = startTimeZonePreference();
|
|
const desktop = window.matchMedia('(min-width: 961px)');
|
|
const closeDrawer = () => {
|
|
if (desktop.matches) drawerOpen = false;
|
|
};
|
|
desktop.addEventListener('change', closeDrawer);
|
|
|
|
const shortcuts = Object.fromEntries(
|
|
visibleNavigation(data.user?.role ?? 'viewer')
|
|
.flatMap((group) => group.items)
|
|
.filter((item) => item.shortcut)
|
|
.map((item) => [item.shortcut!, item.href])
|
|
);
|
|
let armed = false;
|
|
let armTimer: ReturnType<typeof setTimeout> | null = null;
|
|
|
|
const onKey = (e: KeyboardEvent) => {
|
|
if (!sessionReady) return;
|
|
// Global search also works while focus is in a page's search field.
|
|
if ((e.metaKey || e.ctrlKey) && !e.altKey && e.key.toLowerCase() === 'k') {
|
|
e.preventDefault();
|
|
accountOpen = false;
|
|
drawerOpen = false;
|
|
helpOpen = false;
|
|
paletteOpen = !paletteOpen;
|
|
return;
|
|
}
|
|
const target = e.target as HTMLElement;
|
|
if (
|
|
target &&
|
|
(['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName) ||
|
|
target.isContentEditable ||
|
|
target.closest('dialog'))
|
|
)
|
|
return;
|
|
if (e.metaKey || e.ctrlKey || e.altKey) return;
|
|
if (e.key === '?') {
|
|
e.preventDefault();
|
|
openHelp();
|
|
return;
|
|
}
|
|
|
|
if (!armed && e.key === 'g') {
|
|
armed = true;
|
|
if (armTimer) clearTimeout(armTimer);
|
|
armTimer = setTimeout(() => {
|
|
armed = false;
|
|
}, 1000);
|
|
return;
|
|
}
|
|
if (armed) {
|
|
armed = false;
|
|
if (armTimer) {
|
|
clearTimeout(armTimer);
|
|
armTimer = null;
|
|
}
|
|
const dest = shortcuts[e.key];
|
|
if ((e.key === 'h' || e.key === 'k') && data.user?.role !== 'admin') return;
|
|
if (dest) {
|
|
e.preventDefault();
|
|
goto(dest);
|
|
}
|
|
}
|
|
};
|
|
window.addEventListener('keydown', onKey);
|
|
return () => {
|
|
stopTimeZone();
|
|
desktop.removeEventListener('change', closeDrawer);
|
|
window.removeEventListener('keydown', onKey);
|
|
if (armTimer) clearTimeout(armTimer);
|
|
};
|
|
});
|
|
|
|
// Route changes cross-fade via the browser's View Transitions API.
|
|
// Non-Chromium browsers fall through to plain navigation.
|
|
onNavigate(enableViewTransitions);
|
|
|
|
const shortcuts = $derived(
|
|
visibleNavigation(data.user?.role ?? 'viewer')
|
|
.flatMap((group) => group.items)
|
|
.filter((item) => item.shortcut)
|
|
);
|
|
</script>
|
|
|
|
<svelte:window onkeydown={closeMenu} onclick={dismissAccount} />
|
|
|
|
<div class="shell" class:with-sidebar={sessionReady} class:sidebar-collapsed={sidebarCollapsed}>
|
|
<a class="skip-link" href="#main-content">Skip to content</a>
|
|
{#if sessionReady && data.user}
|
|
<aside class="sidebar" id="desktop-navigation" hidden={sidebarCollapsed}>
|
|
<a class="sidebar-brand" href="/" aria-label="Electric Cherry home"
|
|
><BrandMark size="sm" /></a
|
|
>
|
|
<div class="sidebar-scroll"><Navigation role={data.user.role} /></div>
|
|
</aside>
|
|
<div class="navigation-drawer">
|
|
<Dialog bind:open={drawerOpen} title="Navigation" drawer>
|
|
<div id="mobile-navigation">
|
|
<Navigation role={data.user.role} onNavigate={() => (drawerOpen = false)} />
|
|
</div>
|
|
</Dialog>
|
|
</div>
|
|
{/if}
|
|
{#if publicPage}
|
|
<header class="auth-brand"><BrandMark size="md" /></header>
|
|
{:else}
|
|
<header class="app-header">
|
|
{#if sessionReady}
|
|
<button
|
|
class="icon-button desktop-toggle"
|
|
type="button"
|
|
aria-label={sidebarCollapsed ? 'Expand navigation' : 'Collapse navigation'}
|
|
aria-controls="desktop-navigation"
|
|
aria-expanded={!sidebarCollapsed}
|
|
onclick={() => (sidebarCollapsed = !sidebarCollapsed)}
|
|
>
|
|
<svg viewBox="0 0 20 20" aria-hidden="true"
|
|
><rect x="2" y="3" width="16" height="14" rx="2" /><path d="M7 3v14" /></svg
|
|
>
|
|
</button>
|
|
<button
|
|
class="icon-button mobile-toggle"
|
|
type="button"
|
|
aria-label="Open navigation"
|
|
aria-controls="mobile-navigation"
|
|
aria-expanded={drawerOpen}
|
|
onclick={() => (drawerOpen = true)}
|
|
>
|
|
<svg viewBox="0 0 20 20" aria-hidden="true"
|
|
><path d="M3 5h14M3 10h14M3 15h14" /></svg
|
|
>
|
|
</button>
|
|
{/if}
|
|
<a
|
|
class="brand-link"
|
|
href={sessionReady ? '/' : '/account'}
|
|
aria-label="Electric Cherry home"
|
|
>
|
|
<BrandMark size="sm" />
|
|
</a>
|
|
{#if sessionReady}<button
|
|
class="search-button"
|
|
type="button"
|
|
aria-label="Search pages, servers, hosts, and players"
|
|
aria-keyshortcuts="Meta+k Control+k"
|
|
onclick={() => (paletteOpen = true)}
|
|
>
|
|
<svg viewBox="0 0 20 20" aria-hidden="true"
|
|
><circle cx="8" cy="8" r="5" /><path d="m12 12 5 5" /></svg
|
|
>
|
|
<span class="search-label">Search pages, servers, players…</span><kbd
|
|
>⌘K / Ctrl K</kbd
|
|
>
|
|
</button>{/if}
|
|
<div class="header-actions">
|
|
{#if sessionReady}<button
|
|
class="icon-button help-button"
|
|
type="button"
|
|
aria-label="Keyboard shortcuts"
|
|
title="Keyboard shortcuts (?)"
|
|
onclick={openHelp}>?</button
|
|
>{/if}
|
|
{#if data.user}
|
|
<div class="account-menu">
|
|
<button
|
|
bind:this={accountButton}
|
|
class="account-button"
|
|
type="button"
|
|
aria-label={`Account: ${accountName}`}
|
|
title={accountName}
|
|
aria-expanded={accountOpen}
|
|
aria-controls="account-links"
|
|
onclick={() => (accountOpen = !accountOpen)}
|
|
>
|
|
<span aria-hidden="true">{accountInitial}</span>
|
|
</button>
|
|
{#if accountOpen}
|
|
<div class="account-links" id="account-links">
|
|
<div class="account-name">{accountName}</div>
|
|
<a href="/account">My account</a>
|
|
{#if sessionReady}<button onclick={openHelp}
|
|
>Keyboard shortcuts <span aria-hidden="true">?</span
|
|
></button
|
|
>{/if}
|
|
{#if data.user.role === 'admin' && sessionReady}<a
|
|
href="/settings/users">Manage users</a
|
|
>{/if}
|
|
<button disabled={signingOut} onclick={signOut}
|
|
>{signingOut ? 'Signing out…' : 'Sign out'}</button
|
|
>
|
|
{#if signOutError}<p role="alert">{signOutError}</p>{/if}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</header>
|
|
{/if}
|
|
<main id="main-content" tabindex="-1" class:auth-main={publicPage}>
|
|
{#if sessionReady && data.user?.role === 'viewer'}<aside class="viewer-note">
|
|
<strong>Viewer access</strong><span
|
|
>You can read fleet status and summaries. Operating servers or viewing raw
|
|
configs, file changes, logs, and telemetry requires an operator account.</span
|
|
>
|
|
</aside>{/if}
|
|
{@render children()}
|
|
</main>
|
|
<Confirmation />
|
|
{#if sessionReady && data.user}<CommandPalette
|
|
bind:open={paletteOpen}
|
|
role={data.user.role}
|
|
/>{/if}
|
|
<Dialog
|
|
bind:open={helpOpen}
|
|
title="Keyboard shortcuts"
|
|
description="Press g, then a destination key. Page shortcuts are inactive while typing or using a dialog; search works from any field."
|
|
>
|
|
<dl class="shortcuts">
|
|
<div>
|
|
<dt><kbd>⌘K / Ctrl K</kbd></dt>
|
|
<dd>Search pages, servers, hosts, and players</dd>
|
|
</div>
|
|
{#each shortcuts as item}<div>
|
|
<dt><kbd>g {item.shortcut}</kbd></dt>
|
|
<dd>{item.href === '/' ? 'Fleet' : item.label}</dd>
|
|
</div>{/each}
|
|
<div>
|
|
<dt><kbd>?</kbd></dt>
|
|
<dd>This help</dd>
|
|
</div>
|
|
</dl>
|
|
</Dialog>
|
|
</div>
|
|
|
|
<style>
|
|
@import '$ui/styles/tokens.css';
|
|
|
|
:global(html, body) {
|
|
margin: 0;
|
|
background: var(--surface-sunken);
|
|
color: var(--text-primary);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-base);
|
|
line-height: var(--leading-body);
|
|
min-height: 100vh;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
:global(*) {
|
|
box-sizing: border-box;
|
|
}
|
|
:global(a) {
|
|
color: var(--accent-primary-hover);
|
|
}
|
|
:global(::selection) {
|
|
background: var(--accent-primary);
|
|
color: var(--text-on-accent);
|
|
}
|
|
:global(:focus-visible) {
|
|
outline: 2px solid var(--accent-primary-hover);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
/* Ambient background — a faint radial gradient hints at depth without
|
|
any lines. Fixed to the viewport so scrolling stays quiet. */
|
|
:global(body::before) {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
background:
|
|
radial-gradient(1200px 700px at 20% -10%, rgba(46, 134, 209, 0.1), transparent 60%),
|
|
radial-gradient(900px 600px at 90% 100%, rgba(124, 192, 245, 0.05), transparent 60%);
|
|
z-index: -1;
|
|
}
|
|
|
|
.shell {
|
|
min-height: 100vh;
|
|
}
|
|
.shell.with-sidebar {
|
|
padding-left: 224px;
|
|
}
|
|
.shell.sidebar-collapsed {
|
|
padding-left: 0;
|
|
}
|
|
.sidebar {
|
|
position: fixed;
|
|
inset: 0 auto 0 0;
|
|
z-index: 25;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 224px;
|
|
border-right: 1px solid var(--border-subtle);
|
|
background: var(--surface);
|
|
}
|
|
.sidebar[hidden] {
|
|
display: none;
|
|
}
|
|
.sidebar-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 60px;
|
|
padding: 0 var(--space-4);
|
|
text-decoration: none;
|
|
}
|
|
.sidebar-scroll {
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
padding: var(--space-2) var(--space-2) var(--space-6);
|
|
scrollbar-width: thin;
|
|
}
|
|
.navigation-drawer :global(dialog.drawer) {
|
|
inset: 0 auto 0 0;
|
|
width: min(320px, 100vw);
|
|
border-left: 0;
|
|
border-right: 1px solid var(--border-subtle);
|
|
}
|
|
.auth-brand {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 48px 20px 20px;
|
|
}
|
|
main {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
padding: var(--space-6) var(--space-8) var(--space-16);
|
|
max-width: 1600px;
|
|
margin: 0 auto;
|
|
view-transition-name: main;
|
|
}
|
|
main.auth-main {
|
|
max-width: 520px;
|
|
padding-top: 16px;
|
|
}
|
|
.viewer-note {
|
|
display: flex;
|
|
gap: 8px 16px;
|
|
flex-wrap: wrap;
|
|
padding: 14px 18px;
|
|
margin-bottom: 24px;
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface);
|
|
font-size: var(--text-sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
.viewer-note strong {
|
|
color: var(--text-primary);
|
|
}
|
|
.app-header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 20;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
min-height: 60px;
|
|
padding: 0 var(--space-5);
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
background: var(--surface-sunken);
|
|
}
|
|
.brand-link {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
}
|
|
.with-sidebar:not(.sidebar-collapsed) .app-header .brand-link {
|
|
display: none;
|
|
}
|
|
.icon-button {
|
|
display: inline-grid;
|
|
place-items: center;
|
|
flex-shrink: 0;
|
|
width: 44px;
|
|
height: 44px;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: var(--radius-sm);
|
|
background: transparent;
|
|
color: var(--text-secondary);
|
|
font-size: var(--text-lg);
|
|
cursor: pointer;
|
|
}
|
|
.icon-button:hover {
|
|
color: var(--text-primary);
|
|
background: var(--surface-raised);
|
|
}
|
|
.icon-button svg,
|
|
.search-button svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.6;
|
|
flex-shrink: 0;
|
|
}
|
|
.mobile-toggle {
|
|
display: none;
|
|
}
|
|
.search-button {
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
flex: 1;
|
|
max-width: 440px;
|
|
height: 36px;
|
|
padding: 0 var(--space-3);
|
|
border: 1px solid var(--border-control);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--surface-sunken);
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
text-align: left;
|
|
font-size: var(--text-xs);
|
|
}
|
|
.search-button:hover {
|
|
border-color: var(--border-control-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
.search-label {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.search-button kbd {
|
|
padding: 1px 4px;
|
|
white-space: nowrap;
|
|
}
|
|
.header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-left: auto;
|
|
}
|
|
.account-menu {
|
|
position: relative;
|
|
}
|
|
.account-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 44px;
|
|
height: 44px;
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface);
|
|
color: var(--text-primary);
|
|
font: inherit;
|
|
cursor: pointer;
|
|
}
|
|
.account-button {
|
|
border-radius: 50%;
|
|
color: var(--accent-primary-hover);
|
|
background: color-mix(in oklab, var(--accent-primary) 12%, var(--surface));
|
|
font-weight: 600;
|
|
}
|
|
.account-links {
|
|
position: absolute;
|
|
right: 0;
|
|
top: calc(100% + 8px);
|
|
width: 220px;
|
|
max-width: calc(100vw - 32px);
|
|
max-height: calc(100dvh - 84px);
|
|
overflow-y: auto;
|
|
z-index: 30;
|
|
display: grid;
|
|
padding: 8px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: var(--radius-md);
|
|
box-shadow: 0 12px 32px #0005;
|
|
}
|
|
.account-name {
|
|
padding: 8px 12px 12px;
|
|
margin-bottom: 4px;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
color: var(--text-secondary);
|
|
font-size: var(--text-sm);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.account-links a,
|
|
.account-links button {
|
|
text-align: left;
|
|
padding: 10px 12px;
|
|
color: var(--text-primary);
|
|
background: none;
|
|
border: 0;
|
|
border-radius: var(--radius-sm);
|
|
font: inherit;
|
|
font-size: var(--text-sm);
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
.account-links a:hover,
|
|
.account-links button:hover {
|
|
background: var(--surface-raised);
|
|
}
|
|
.account-links p {
|
|
padding: 0 12px;
|
|
font-size: var(--text-xs);
|
|
color: var(--state-danger);
|
|
}
|
|
.shortcuts {
|
|
display: grid;
|
|
gap: 12px;
|
|
margin: 0;
|
|
}
|
|
.shortcuts > div {
|
|
display: flex;
|
|
gap: 20px;
|
|
align-items: center;
|
|
}
|
|
.shortcuts dt {
|
|
min-width: 120px;
|
|
}
|
|
.shortcuts dd {
|
|
margin: 0;
|
|
font-size: var(--text-sm);
|
|
}
|
|
kbd {
|
|
font-family: var(--font-mono);
|
|
padding: 3px 8px;
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: 5px;
|
|
}
|
|
.skip-link {
|
|
position: fixed;
|
|
left: 16px;
|
|
top: -80px;
|
|
z-index: 300;
|
|
padding: 12px 16px;
|
|
background: var(--surface-raised);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
.skip-link:focus {
|
|
top: 12px;
|
|
}
|
|
:global(input),
|
|
:global(select),
|
|
:global(textarea) {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
:global(input),
|
|
:global(select),
|
|
:global(textarea),
|
|
:global(button),
|
|
:global(a) {
|
|
scroll-margin-block: 90px 100px;
|
|
}
|
|
:global(dialog) {
|
|
max-height: calc(100dvh - 32px);
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
@media (max-width: 960px) {
|
|
.shell.with-sidebar {
|
|
padding-left: 0;
|
|
}
|
|
.sidebar,
|
|
.desktop-toggle {
|
|
display: none;
|
|
}
|
|
.mobile-toggle {
|
|
display: inline-grid;
|
|
}
|
|
.with-sidebar:not(.sidebar-collapsed) .app-header .brand-link {
|
|
display: flex;
|
|
}
|
|
.app-header {
|
|
min-height: 56px;
|
|
gap: var(--space-2);
|
|
padding: 0 var(--space-3);
|
|
}
|
|
.search-button {
|
|
margin-left: auto;
|
|
max-width: 300px;
|
|
}
|
|
.search-button kbd {
|
|
display: none;
|
|
}
|
|
.header-actions {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
@media (max-width: 720px) {
|
|
.app-header {
|
|
padding-inline: var(--space-2);
|
|
gap: var(--space-1);
|
|
}
|
|
.brand-link :global(.mark-sm .word) {
|
|
font-size: var(--text-xs);
|
|
letter-spacing: 1px;
|
|
}
|
|
.search-button {
|
|
flex: 0 0 44px;
|
|
width: 44px;
|
|
height: 44px;
|
|
padding: 0;
|
|
justify-content: center;
|
|
border: 0;
|
|
}
|
|
.search-label,
|
|
.help-button {
|
|
display: none;
|
|
}
|
|
main {
|
|
padding: var(--space-4) max(var(--space-4), env(safe-area-inset-right))
|
|
calc(var(--space-16) + env(safe-area-inset-bottom))
|
|
max(var(--space-4), env(safe-area-inset-left));
|
|
}
|
|
:global(input:not([type='checkbox']):not([type='radio'])),
|
|
:global(select),
|
|
:global(textarea) {
|
|
font-size: var(--text-input) !important;
|
|
min-height: 44px;
|
|
}
|
|
:global(button),
|
|
:global(.btn) {
|
|
min-height: 44px;
|
|
}
|
|
}
|
|
@media (max-width: 360px) {
|
|
.brand-link :global(.mark-sm .word) {
|
|
display: none;
|
|
}
|
|
.brand-link::after {
|
|
content: 'EC';
|
|
margin-left: var(--space-2);
|
|
color: var(--text-primary);
|
|
font-size: var(--text-base);
|
|
font-weight: var(--weight-semibold);
|
|
}
|
|
.header-actions {
|
|
gap: 4px;
|
|
}
|
|
}
|
|
:global(::view-transition-old(root)),
|
|
:global(::view-transition-new(root)),
|
|
:global(::view-transition-old(main)),
|
|
:global(::view-transition-new(main)) {
|
|
animation-duration: var(--dur-base);
|
|
animation-timing-function: var(--ease-standard);
|
|
}
|
|
</style>
|