Automerge backed Markdown editor for the Atmosphere
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195/* src/layout/TabBar.css */
.tab-bar { position: relative; display: flex; align-items: center; /* Shared with every sidebar panel header so the bottom border lines up * across the entire .app-shell-body. See src/index.css. */ height: var(--chrome-row-height); background-color: var(--bg-secondary); border-bottom: 1px solid var(--border-color); overflow: hidden; flex-shrink: 0;}
.tab-bar__scroller { display: flex; align-items: center; flex: 1; min-width: 0; height: 100%; overflow-x: auto; overflow-y: hidden; touch-action: pan-x pinch-zoom;}
.tab-bar__scroll-shadow { position: absolute; top: 0; bottom: 0; width: 28px; pointer-events: none; opacity: 0; transition: opacity 0.15s ease-out; z-index: 1;}
.tab-bar__scroll-shadow--left { left: 0; background: linear-gradient(to right, rgba(0, 0, 0, 0.42), transparent);}
.tab-bar__scroll-shadow--right { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, 0.42), transparent);}
.tab-bar[data-scroll-shadow-left="true"] .tab-bar__scroll-shadow--left { opacity: 1;}
.tab-bar[data-scroll-shadow-right="true"] .tab-bar__scroll-shadow--right { opacity: 1;}
/* Hide scrollbar but keep functionality */.tab-bar__scroller::-webkit-scrollbar { height: 0;}
.tab-bar__scroller { scrollbar-width: none;}
.tab { position: relative; display: flex; align-items: center; gap: 0.25rem; height: 100%; padding: 0 0 0 0.625rem; background: none; border: none; border-right: 1px solid var(--border-color); color: var(--text-secondary); font-family: inherit; font-size: 0.75rem; cursor: pointer; white-space: nowrap; flex-shrink: 0; max-width: 224px; min-width: 80px; transition: color 0.15s, background-color 0.15s; user-select: none;}
.tab[data-dragging="true"] { opacity: 0.6; z-index: 2;}
.tab[data-shifting="true"] { transition: transform 0.12s ease-out, color 0.15s, background-color 0.15s;}
@media (prefers-reduced-motion: reduce) { .tab[data-shifting="true"] { transition: none; }}
.tab[data-drop-before="true"]::before,.tab[data-drop-after="true"]::before { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); content: ''; z-index: 1;}
.tab[data-drop-before="true"]::before { left: 0; }.tab[data-drop-after="true"]::before { right: 0; }
.tab:hover { color: var(--text-primary); background-color: var(--bg-tertiary);}
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px;}
.tab[aria-selected="true"] { color: var(--text-primary); background-color: var(--bg-primary);}
.tab-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left;}
.tab-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 100%; /* Square — matches the rectilinear chrome. */ border-radius: 0; background: none; border: none; color: var(--text-tertiary); cursor: pointer; opacity: 0; transition: opacity 0.15s, color 0.15s, background-color 0.15s; flex-shrink: 0;}
.tab:hover .tab-close,.tab:focus-within .tab-close,.tab[aria-selected="true"] .tab-close { opacity: 1;}
.tab-close:hover { color: var(--text-primary); background-color: var(--bg-active);}
.tab-close:focus-visible { opacity: 1; outline: 1px solid var(--accent); outline-offset: -1px;}
.tab-close svg { width: 12px; height: 12px;}
.tab-bar-empty { display: flex; align-items: center; height: 100%; padding: 0 0.75rem; white-space: nowrap; color: var(--text-tertiary); font-size: 0.75rem; font-style: italic;}
.tab-reorder-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}