Automerge backed Markdown editor for the Atmosphere
Something went wrong. Try again.
3.9 kB · 109 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110.sectioned-dialog { --dialog-content-inset: 24px; --dialog-nav-width: 200px; --dialog-header-height: 45px; display: flex; width: 90%; max-width: 900px; height: 80vh; height: 80svh; max-height: 600px; overflow: hidden; background: var(--background-secondary, #2d2d2d); border-radius: 0; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);}
.sectioned-dialog__nav { position: relative; display: flex; flex: 0 0 var(--dialog-nav-width); flex-direction: column; min-width: 0; overflow: hidden; border-right: 1px solid var(--background-modifier-border, #3d3d3d);}
.sectioned-dialog__nav-header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; min-height: var(--dialog-header-height); flex: 0 0 var(--dialog-header-height); box-sizing: border-box; padding: 0 16px; font-size: 18px; font-weight: 600; background: var(--background-secondary, #2d2d2d); border-bottom: 1px solid var(--background-modifier-border, #3d3d3d);}.sectioned-dialog__nav--closable .sectioned-dialog__nav-header { padding-right: 44px; font-size: 16px; }.sectioned-dialog__nav-sections { flex: 1; min-height: 0; width: 100%; overflow-y: auto; }
.sectioned-dialog__nav-entry { flex: 0 0 auto; min-width: 0; }.sectioned-dialog__nav-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 16px; text-align: left; background: none; border: none; color: var(--text-normal, #e0e0e0); font-size: 14px; cursor: pointer; transition: background-color 0.1s;}.sectioned-dialog__nav-item:hover { background: var(--background-modifier-hover, #3d3d3d); }.sectioned-dialog__nav-item[aria-selected="true"] { background: var(--interactive-accent, #4a9eff); color: white; }.sectioned-dialog__icon { display: flex; width: 20px; height: 20px; flex-shrink: 0; }.sectioned-dialog__icon .lucide { width: 20px; height: 20px; }.sectioned-dialog__nav-label { min-width: 0; }.sectioned-dialog__separator { border: none; border-top: 1px solid var(--background-modifier-border, #3d3d3d); margin: 8px 16px; }.sectioned-dialog__body { flex: 1; min-width: 0; overflow-y: auto; padding: 16px var(--dialog-content-inset); }.sectioned-dialog__close { position: absolute; z-index: 2; top: 0; left: calc(var(--dialog-nav-width) - 44px); display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: var(--dialog-header-height); padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer;}.sectioned-dialog__close:hover { background: var(--background-modifier-hover, #3d3d3d); }.sectioned-dialog__nav-item:focus-visible, .sectioned-dialog__close:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Same vertical icon strip as Settings, with the content beside it. */@media (max-width: 600px) { .sectioned-dialog { --dialog-content-inset: 16px; --dialog-nav-width: 44px; height: 90vh; height: 90svh; } .sectioned-dialog__nav { flex-basis: var(--dialog-nav-width); padding: 0; overflow: hidden; align-items: center; gap: 0; } .sectioned-dialog__nav--closable .sectioned-dialog__nav-sections { margin-bottom: 44px; } .sectioned-dialog__nav-header { display: none; } .sectioned-dialog__nav-entry { width: 100%; } .sectioned-dialog__nav-item { width: 100%; height: 44px; padding: 0; align-items: center; justify-content: center; } .sectioned-dialog__nav-label { display: none; } .sectioned-dialog__separator { margin: 4px 8px; } /* 15px inset + 20px title + 8px rule padding + 1px border matches the 44px first tab. */ .sectioned-dialog__body { padding: 15px var(--dialog-content-inset) 12px; } .sectioned-dialog__close { top: auto; left: 0; bottom: 0; width: var(--dialog-nav-width); height: 44px; }}