/* ── Layer 1: AppShell layout ───────────────── Full-viewport column layout with optional fixed banners, announcement, surface, and footer. ──────────────────────────────────────────── */ /* v0.6.10: .sw-shell is no longer a viewport-level container. The single layout root is in base.html. .sw-shell fills its parent if any surface uses it. */ .sw-shell { display: flex; flex-direction: column; height: 100%; width: 100%; overflow: hidden; background: var(--bg); } /* ── Banner (fixed top / bottom — identical component) ── */ /* v0.6.10: banners are in-flow (template renders them), not fixed. */ .sw-shell__banner { position: static; z-index: 900; display: flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); font-size: 0.8rem; font-weight: 500; } .sw-shell__banner--top { top: 0; } .sw-shell__banner--bottom { bottom: 0; } .sw-shell__banner--info { background: var(--accent-dim); color: var(--accent-light); } .sw-shell__banner--warn { background: var(--warning-dim); color: var(--warning-light); } .sw-shell__banner--error { background: var(--danger-dim); color: var(--danger-light); } .sw-shell__banner--success { background: var(--success-dim); color: var(--success-light); } .sw-shell__banner-text { flex: 1; text-align: center; } .sw-shell__banner-close { background: none; border: none; color: inherit; cursor: pointer; font-size: 1.1rem; padding: 0 0.3rem; opacity: 0.7; line-height: 1; } .sw-shell__banner-close:hover { opacity: 1; } /* ── Shell body — insets for fixed banners ─── */ /* v0.6.10: template banners are in-flow — no padding offset needed. */ .sw-shell__body { display: flex; flex-direction: column; flex: 1; overflow: hidden; } /* ── Announcement bar ─────────────────────── */ .sw-shell__announcement { flex-shrink: 0; border-bottom: 1px solid var(--border); } .sw-shell__announcement-inner { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-5); font-size: 0.85rem; } .sw-shell__announcement--info { background: var(--bg-surface); color: var(--text-2); } .sw-shell__announcement--warn { background: var(--warning-dim); color: var(--warning-light); } .sw-shell__announcement--error { background: var(--danger-dim); color: var(--danger-light); } .sw-shell__announcement--success { background: var(--success-dim); color: var(--success-light); } .sw-shell__announcement-text { flex: 1; } /* ── Surface (main content area) ──────────── */ .sw-shell__surface { flex: 1; overflow: auto; position: relative; } /* ── Footer ───────────────────────────────── */ .sw-shell__footer { flex-shrink: 0; padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--text-3); text-align: center; background: var(--bg-surface); } /* ── Surface viewport ────────────────────── */ .sw-surface-viewport { flex: 1; position: relative; overflow: auto; display: flex; flex-direction: column; } /* ── Topbar — standard surface navigation bar ── */ .sw-topbar { display: flex; align-items: center; height: 44px; padding: 0 var(--sp-3); background: var(--bg-surface); border-bottom: 1px solid var(--border); flex-shrink: 0; gap: var(--sp-3); } .sw-topbar__title { font-weight: 600; font-size: 0.9rem; color: var(--text); flex-shrink: 0; white-space: nowrap; } .sw-topbar__spacer { flex: 1; } .sw-topbar__slot { display: flex; align-items: center; gap: var(--sp-2); } .sw-topbar__right { display: flex; align-items: center; gap: var(--sp-2); } /* ── User menu trigger ───────────────────── */ .sw-user-menu__trigger { display: inline-flex; align-items: center; background: none; border: none; cursor: pointer; padding: 2px; border-radius: 50%; transition: box-shadow var(--transition); } .sw-user-menu__trigger:hover { box-shadow: 0 0 0 2px var(--accent-dim); } .sw-user-menu__trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── Notification Bell ───────────────────── */ .sw-notification-bell { position: relative; } .sw-notification-bell__trigger { display: flex; align-items: center; justify-content: center; position: relative; width: 32px; height: 32px; background: none; border: none; border-radius: var(--radius); color: var(--text-3); cursor: pointer; transition: color 0.15s, background 0.15s; } .sw-notification-bell__trigger:hover { color: var(--text); background: var(--bg); } .sw-notification-bell__badge { position: absolute; top: 2px; right: 2px; background: var(--danger); color: #fff; font-size: 9px; font-weight: 700; min-width: 14px; height: 14px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0 3px; } .sw-notification-bell__panel { position: absolute; top: 100%; right: 0; margin-top: 6px; width: 320px; max-height: 420px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 8px 32px rgba(0,0,0,0.4); z-index: 200; overflow: hidden; display: flex; flex-direction: column; } .sw-notification-bell__header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--text); } .sw-notification-bell__mark-all { background: none; border: none; color: var(--accent); font-size: 11px; cursor: pointer; padding: 2px 6px; border-radius: var(--radius-sm); } .sw-notification-bell__mark-all:hover { background: var(--accent-dim); } .sw-notification-bell__list { overflow-y: auto; flex: 1; } .sw-notification-bell__empty { padding: var(--sp-6) var(--sp-3); text-align: center; color: var(--text-3); font-size: 12px; } .sw-notification-bell__item { padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.15s; } .sw-notification-bell__item:last-child { border-bottom: none; } .sw-notification-bell__item:hover { background: var(--bg); } .sw-notification-bell__item--unread { background: var(--accent-dim); } .sw-notification-bell__item--unread::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: middle; } .sw-notification-bell__item-text { font-size: 12px; color: var(--text); display: inline; } .sw-notification-bell__item-body { font-size: 11px; color: var(--text-3); margin-top: 3px; line-height: 1.4; } .sw-notification-bell__item-time { font-size: 10px; color: var(--text-3); margin-top: 3px; display: flex; align-items: center; justify-content: space-between; } .sw-notification-bell__item--navigable { cursor: pointer; } .sw-notification-bell__item-action { font-size: 10px; color: var(--accent); font-weight: 600; opacity: 0; transition: opacity 0.15s; } .sw-notification-bell__item:hover .sw-notification-bell__item-action { opacity: 1; } /* ── Notification Bell — Mobile ──────────── */ @media (max-width: 768px) { .sw-notification-bell__panel { width: calc(100vw - 24px); max-width: 320px; right: -8px; } .sw-notification-bell__trigger { min-width: 44px; min-height: 44px; } }