Automerge backed Markdown editor for the Atmosphere
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137/* src/layout/Header.css */
.app-header { display: flex; align-items: center; height: var(--header-height, 40px); /* No outer horizontal padding: the leading burger button and the * trailing right-panel toggle each occupy a full --icon-column-width * slot, so they sit at the same X coordinates as the ribbon column * (left) and the right panel's icon strip (right). This holds even * when the ribbon is hidden — the burger's slot is laid out by the * header itself, not by the ribbon's presence. */ padding: 0; background-color: var(--bg-secondary); border-bottom: 1px solid var(--border-color); gap: 0; flex-shrink: 0;}
@media (display-mode: standalone) { .app-header { height: calc(var(--header-height, 40px) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); box-sizing: border-box; }}
.header-toggle-btn { display: flex; align-items: center; justify-content: center; /* Match the icon column metric so the burger button is horizontally * centered at the same X as ribbon icons / side-tab icons. Fills * the full header height so the hover/active fill is flush with * the header band — no top/bottom gap. */ width: var(--icon-column-width); height: 100%; background: none; border: none; /* Square corners — matches the rectilinear chrome (ribbon, side-tab * strip, file-tree rows, tab bar). */ border-radius: 0; color: var(--text-secondary); cursor: pointer; transition: color 0.15s, background-color 0.15s; flex-shrink: 0;}
.header-toggle-btn:hover { color: var(--text-primary); background-color: var(--bg-tertiary);}
.header-toggle-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px;}
.header-toggle-btn svg { /* Match ribbon icon size so the burger button sits in the same * icon column as ribbon icons and reads as the same visual weight. */ width: 20px; height: 20px;}
.header-title { flex: 1; min-width: 0; /* The header has zero outer padding so the burger / right-toggle * buttons span the full --icon-column-width. Add inline padding to * the title so the "Reams" text doesn't sit flush against the * burger button. */ padding: 0 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--text-primary); user-select: none; -webkit-user-select: none;}
.header-update-btn { flex-shrink: 0; margin-right: var(--ui-space-2); min-height: 32px; padding: 4px 10px;}.header-update-btn:disabled { cursor: wait; }.header-update-error { color: var(--error); font-size: 0.75rem; max-width: 12rem; }
.header-mode-toggle { display: flex; align-items: center; gap: 0.375rem; background: none; border: 1px solid var(--border-color); /* Square corners — matches the rectilinear chrome. */ border-radius: 0; padding: 0.2rem 0.5rem; /* The header has zero outer padding (see .app-header); add a small * right margin so the mode toggle pill doesn't sit flush against the * right-panel toggle button next to it. */ margin-right: 0.5rem; color: var(--text-secondary); font-family: inherit; font-size: 0.75rem; cursor: pointer; transition: color 0.15s, border-color 0.15s, background-color 0.15s; user-select: none; flex-shrink: 0;}
.header-mode-toggle:hover { color: var(--text-primary); border-color: var(--text-tertiary); background-color: var(--bg-tertiary);}
.header-mode-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px;}
.header-mode-toggle svg { width: 14px; height: 14px;}
.header-mode-label { font-size: 0.75rem;}
.header-mode-shortcut { color: var(--text-tertiary); font-size: 0.65rem; margin-left: 0.25rem;}