Automerge backed Markdown editor for the Atmosphere
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616/* src/plugin/obsidian-ui.css * Obsidian-compatible CSS for plugin UI primitives. * Class names match Obsidian's convention so plugin CSS works unmodified. */
/* ---- Modal ---- */
.modal-container { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;}
.modal-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.85);}
.modal { position: relative; z-index: 1; min-width: 300px; max-width: 90vw; max-height: 85vh; background: var(--background-secondary, var(--bg-secondary, #2d2d2d)); border-radius: 0; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; overflow: hidden;}
.modal:focus { outline: none;}
.modal-close-button { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 0; color: var(--text-muted, var(--text-secondary, #b0b0b0)); z-index: 1;}
.modal-close-button::before { content: '\00d7'; /* multiplication sign as close icon */ font-size: 20px; line-height: 1;}
.modal-close-button:hover { background: var(--background-modifier-hover, var(--bg-hover, #3d3d3d)); color: var(--text-normal, var(--text-primary, #e0e0e0));}
.modal-title { padding: 16px 20px 8px; font-size: 18px; font-weight: 600;}
.modal-content { padding: 8px 20px 20px; overflow-y: auto; flex: 1;}
/* Vertical spacing for common plugin-created modal elements. Targets only the block-level elements plugins typically add to contentEl (headings, divs, paragraphs, form controls). Scoped to direct children of .modal-content to avoid reaching inside plugin sub-layouts. Excludes SuggestModal modals (which contain .prompt-results) via :not(:has(.prompt-results)). */.modal-content:not(:has(.prompt-results)) > h1 + *,.modal-content:not(:has(.prompt-results)) > h2 + *,.modal-content:not(:has(.prompt-results)) > h3 + *,.modal-content:not(:has(.prompt-results)) > div + *,.modal-content:not(:has(.prompt-results)) > p + *,.modal-content:not(:has(.prompt-results)) > input + *,.modal-content:not(:has(.prompt-results)) > textarea + * { margin-top: 8px;}
/* Horizontal spacing between adjacent buttons inside modal content (e.g., Search + Cancel in Wikipedia's search modal). */.modal-content button + button { margin-left: 6px;}
/* ---- Menu ---- */
.menu { position: fixed; z-index: 1100; min-width: 150px; max-width: 300px; background: var(--background-secondary, var(--bg-secondary, #2d2d2d)); border: 1px solid var(--background-modifier-border, var(--border-color, #404040)); border-radius: 0; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); padding: 4px 0; overflow-y: auto; max-height: 80vh;}
.menu-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; color: var(--text-normal, var(--text-primary, #e0e0e0)); font-size: 14px; user-select: none; -webkit-user-select: none;}
.menu-item:hover,.menu-item.is-selected { background: var(--background-modifier-hover, var(--bg-hover, #3d3d3d));}
.menu-item.is-disabled { opacity: 0.5; cursor: not-allowed;}
.menu-item.is-warning { color: var(--text-error, var(--error, #dc3545));}
.menu-item.is-checked::after { content: '\2713'; margin-left: auto; font-size: 14px;}
.menu-item.is-label { font-weight: 600; cursor: default; font-size: 12px; color: var(--text-muted, var(--text-secondary, #b0b0b0)); text-transform: uppercase; letter-spacing: 0.05em;}
.menu-item-icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.menu-item-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.mod-no-icon .menu-item-icon { display: none;}
.menu-separator { height: 1px; margin: 4px 0; background: var(--background-modifier-border, var(--border-color, #404040));}
/* ---- Notice ---- */
.notice-container { position: fixed; top: 8px; right: 8px; z-index: 1200; display: flex; flex-direction: column; gap: 6px; pointer-events: none; max-width: 400px;}
.notice { background: var(--background-secondary, var(--bg-secondary, #2d2d2d)); border: 1px solid var(--background-modifier-border, var(--border-color, #404040)); border-radius: 0; padding: 10px 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); color: var(--text-normal, var(--text-primary, #e0e0e0)); font-size: 14px; pointer-events: auto; cursor: pointer; animation: notice-in 0.15s ease-out;}
.notice-message { line-height: 1.4;}
@keyframes notice-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); }}
/* ---- Setting ---- */
.setting-item { display: flex; align-items: flex-start; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--background-modifier-border, var(--border-color, #404040));}
.setting-item-info { flex: 1; min-width: 0;}
.setting-item-name { font-size: 14px; font-weight: 500; color: var(--text-normal, var(--text-primary, #e0e0e0));}
.setting-item-description { font-size: 13px; color: var(--text-muted, var(--text-secondary, #b0b0b0)); margin-top: 2px;}
.setting-item-description a,.setting-tab-container a { color: var(--interactive-accent, var(--accent, #7b6cd9)); text-decoration: underline; text-decoration-color: var(--interactive-accent, var(--accent, #7b6cd9)); text-underline-offset: 2px;}
.setting-item-description a:hover,.setting-tab-container a:hover { color: var(--interactive-accent-hover, #9b8ef0);}
.setting-item-control { display: flex; align-items: center; gap: 8px; flex-shrink: 1; min-width: 0;}
.setting-item-heading { border-bottom: none; padding-top: 20px;}
.setting-item-heading .setting-item-name { font-size: 16px; font-weight: 600;}
.setting-item.is-disabled { opacity: 0.5; pointer-events: none;}
/* ---- Form Controls (text inputs, selects, textareas) ---- *//* Scoped to .setting-item-control, .setting-tab-container, AND .modal-content so that plugins using TextComponent/inputs/textareas inside Modals (e.g., Wikipedia's WikipediaSearchModal) get the same dark-theme styling. */
.setting-item-control input[type="text"],.setting-item-control input[type="search"],.setting-item-control input[type="email"],.setting-item-control input[type="url"],.setting-item-control input[type="number"],.setting-item-control input:not([type]):not([style*="display: none"]),.setting-item-control textarea,.setting-tab-container input[type="text"],.setting-tab-container input[type="search"],.setting-tab-container input:not([type]):not([style*="display: none"]),.setting-tab-container textarea,.modal-content input[type="text"],.modal-content input[type="search"],.modal-content input:not([type]):not([style*="display: none"]),.modal-content textarea { padding: 6px 10px; background: var(--background-primary, #1e1e1e); border: 1px solid var(--background-modifier-border, var(--border-color, #3d3d3d)); border-radius: 0; color: var(--text-normal, var(--text-primary, #e0e0e0)); font-size: 13px; font-family: inherit; box-sizing: border-box; width: 200px; min-width: 100px; flex-shrink: 1;}
.setting-item-control input[type="text"]:focus,.setting-item-control input[type="search"]:focus,.setting-item-control input:not([type]):focus,.setting-item-control textarea:focus,.setting-tab-container input[type="text"]:focus,.setting-tab-container input[type="search"]:focus,.setting-tab-container input:not([type]):focus,.setting-tab-container textarea:focus,.modal-content input[type="text"]:focus,.modal-content input[type="search"]:focus,.modal-content input:not([type]):focus,.modal-content textarea:focus { outline: none; border-color: var(--interactive-accent, var(--accent, #7b6cd9));}
.setting-item-control input::placeholder,.setting-tab-container input::placeholder,.setting-item-control textarea::placeholder,.setting-tab-container textarea::placeholder,.modal-content input::placeholder,.modal-content textarea::placeholder { color: var(--text-faint, var(--text-muted, #666));}
.setting-item-control select,.setting-tab-container select { padding: 6px 10px; background: var(--background-primary, #1e1e1e); border: 1px solid var(--background-modifier-border, var(--border-color, #3d3d3d)); border-radius: 0; color: var(--text-normal, var(--text-primary, #e0e0e0)); font-size: 13px; font-family: inherit; cursor: pointer; min-width: 120px;}
.setting-item-control select:focus,.setting-tab-container select:focus { outline: none; border-color: var(--interactive-accent, var(--accent, #7b6cd9));}
/* Buttons inside setting controls and modals */.setting-item-control button,.setting-tab-container button:not(.clickable-icon):not(.mod-cta):not(.mod-warning),.modal-content button:not(.mod-cta):not(.mod-warning) { padding: 6px 12px; background: var(--background-secondary, var(--bg-secondary, #2d2d2d)); border: 1px solid var(--background-modifier-border, var(--border-color, #3d3d3d)); border-radius: 0; color: var(--text-normal, var(--text-primary, #e0e0e0)); font-size: 13px; cursor: pointer;}
.setting-item-control button:hover,.setting-tab-container button:not(.clickable-icon):not(.mod-cta):not(.mod-warning):hover,.modal-content button:not(.mod-cta):not(.mod-warning):hover { background: var(--background-modifier-hover, var(--bg-hover, #3d3d3d));}
button.mod-cta { background: var(--interactive-accent, var(--accent, #7b6cd9)); color: white; border: none; padding: 6px 16px; border-radius: 0; cursor: pointer; font-size: 13px;}
button.mod-cta:hover { filter: brightness(1.1);}
button.mod-warning { background: var(--text-error, #dc3545); color: white; border: none; padding: 6px 16px; border-radius: 0; cursor: pointer; font-size: 13px;}
/* ---- Checkbox / Toggle ---- */
.checkbox-container { display: inline-flex; align-items: center; position: relative; width: 40px; height: 22px; background: var(--background-modifier-border, var(--border-color, #404040)); /* Pill track. Toggles are a deliberate exception to the rectilinear * chrome rule — the pill + circular thumb is the universal "switch" * affordance and reads as wrong when squared. */ border-radius: 11px; cursor: pointer; transition: background 0.15s ease; flex-shrink: 0;}
.checkbox-container::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--text-muted, var(--text-secondary, #b0b0b0)); top: 3px; left: 3px; transition: transform 0.15s ease, background 0.15s ease;}
.checkbox-container.is-enabled,.checkbox-container:has(input:checked) { background: var(--interactive-accent, var(--accent, #7b6cd9));}
.checkbox-container.is-enabled::after,.checkbox-container:has(input:checked)::after { transform: translateX(18px); background: white;}
.checkbox-container input[type="checkbox"] { /* Hidden but still functional for :checked selector */ position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;}
/* ---- Clickable Icon ---- */
.clickable-icon { display: inline-flex; align-items: center; justify-content: center; padding: 4px; border-radius: 0; cursor: pointer; color: var(--text-muted, var(--text-secondary, #b0b0b0));}
.clickable-icon:hover { background: var(--background-modifier-hover, var(--bg-hover, #3d3d3d)); color: var(--text-normal, var(--text-primary, #e0e0e0));}
/* ---- Setting Tab Container ---- */
.setting-tab-container { padding: 0;}
/* ---- Collapse Arrows ---- */
.collapse-indicator,.setting-item-heading .arrow { display: inline-flex; align-items: center; justify-content: center; transition: transform 0.15s ease; cursor: pointer;}
.collapse-indicator.is-collapsed,.setting-item-heading.is-collapsed .arrow { transform: rotate(0deg);}
/* ---- Breadcrumbs (used by PN settings sub-navigation) ---- */
.breadcrumbs { display: flex; align-items: center; gap: 4px; padding: 8px 0 16px; font-size: 13px; color: var(--text-muted, var(--text-secondary, #b0b0b0));}
.breadcrumbs .crumb { cursor: pointer;}
.breadcrumbs .crumb:hover { color: var(--text-normal, var(--text-primary, #e0e0e0));}
.breadcrumbs .arrow { display: inline-flex;}
/* ---- View Action (toolbar buttons in settings) ---- */
.view-action { display: inline-flex; align-items: center; justify-content: center; padding: 4px; border-radius: 0; cursor: pointer; color: var(--text-muted, var(--text-secondary, #b0b0b0));}
.view-action:hover { background: var(--background-modifier-hover, var(--bg-hover, #3d3d3d));}
/* ---- Suggestion / Prompt (used by FuzzySuggestModal) ---- */
.prompt { padding: 8px 12px; border-bottom: 1px solid var(--background-modifier-border, var(--border-color, #404040));}
.prompt-input { width: 100%; background: transparent; border: none; outline: none; color: var(--text-normal, var(--text-primary, #e0e0e0)); font-size: 16px; padding: 4px 0;}
.prompt-results { max-height: 400px; overflow-y: auto;}
.suggestion-item { padding: 6px 12px; cursor: pointer; color: var(--text-normal, var(--text-primary, #e0e0e0));}
.suggestion-item:hover,.suggestion-item.is-selected { background: var(--background-modifier-hover, var(--bg-hover, #3d3d3d));}
.suggestion-empty { padding: 12px; color: var(--text-muted, var(--text-secondary, #b0b0b0)); text-align: center;}
.suggestion-flair { margin-left: 4px; color: var(--text-muted, var(--text-secondary, #b0b0b0));}
.suggestion-badge { margin-left: auto; font-size: 11px; color: var(--text-muted, var(--text-secondary, #b0b0b0));}
/* ---- Mobile: stack setting items vertically ---- */
@media (max-width: 600px) { .setting-item { flex-wrap: wrap; }
.setting-item-control { width: 100%; }
.setting-item-control input[type="text"], .setting-item-control input[type="search"], .setting-item-control input[type="url"], .setting-item-control input[type="number"], .setting-item-control input:not([type]):not([style*="display: none"]), .setting-item-control textarea, .setting-tab-container input[type="text"], .setting-tab-container input[type="search"], .setting-tab-container input:not([type]):not([style*="display: none"]), .setting-tab-container textarea, .modal-content input[type="text"], .modal-content input[type="search"], .modal-content input:not([type]):not([style*="display: none"]), .modal-content textarea { width: 100%; min-width: 0; }}