Automerge backed Markdown editor for the Atmosphere
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218/* src/layout/file-tree/CreateItemModal.css */
.create-item-modal__backdrop { position: fixed; inset: 0; z-index: 1000; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center;}
.create-item-modal { background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 0; padding: 1.5rem; width: 90%; max-width: 400px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);}
.create-item-modal__title { margin: 0 0 1rem; font-size: 1.125rem; font-weight: 600; color: var(--text-primary);}
.create-item-modal__input-wrapper { position: relative; display: flex; align-items: center; gap: 0.5rem;}
.create-item-modal__path-prefix { flex: 0 0 auto; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8125rem; color: var(--text-secondary);}
.create-item-modal__input { flex: 1 1 auto; width: 100%; padding: 0.625rem 0.75rem; font-size: 0.875rem; color: var(--text-primary); background-color: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 0; outline: none; box-sizing: border-box;}
.create-item-modal__suffix-hint { position: absolute; right: 0.75rem; font-size: 0.875rem; color: var(--text-tertiary); opacity: 0.5; pointer-events: none;}
.create-item-modal__input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.2);}
.create-item-modal__input--error { border-color: var(--error);}
.create-item-modal__image-button { display: block; width: 100%; margin-top: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.8125rem; color: var(--text-secondary); background-color: var(--bg-primary); border: 1px dashed var(--border-color); border-radius: 0; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease;}
.create-item-modal__image-button:hover:not(:disabled) { background-color: var(--bg-tertiary); border-color: var(--accent); color: var(--text-primary);}
.create-item-modal__image-button:disabled { opacity: 0.5; cursor: not-allowed;}
.create-item-modal__error { margin-top: 0.5rem; font-size: 0.75rem; color: var(--error);}
.create-item-modal__hint { margin-top: 0.75rem; font-size: 0.75rem; color: var(--text-tertiary); line-height: 1.4;}
.create-item-modal__hint-tip { display: block; margin-top: 0.25rem; opacity: 0.7;}
.create-item-modal__hint code { background-color: var(--bg-tertiary); padding: 0.1rem 0.3rem; border-radius: 0; font-family: monospace; font-size: 0.7rem;}
.create-item-modal__buttons { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.5rem;}
.create-item-modal__button { padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; border-radius: 0; cursor: pointer; transition: background-color 0.15s ease;}
.create-item-modal__button--cancel { background-color: transparent; border: 1px solid var(--border-color); color: var(--text-primary);}
.create-item-modal__button--cancel:hover { background-color: var(--bg-tertiary);}
.create-item-modal__button--submit { background-color: var(--accent); border: none; color: white;}
.create-item-modal__button--submit:hover:not(:disabled) { background-color: var(--accent-hover);}
.create-item-modal__button--submit:disabled { opacity: 0.5; cursor: not-allowed;}
.create-item-modal__template-select { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.25rem;}
.create-item-modal__template-label { font-size: 0.75rem; color: var(--text-secondary); font-weight: 500;}
.create-item-modal__select { width: 100%; padding: 0.5rem 0.75rem; font-size: 0.875rem; color: var(--text-primary); background-color: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 0; outline: none; box-sizing: border-box; appearance: auto;}
.create-item-modal__select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.2);}
.create-item-modal__select:disabled { opacity: 0.5; cursor: not-allowed;}
.create-item-modal__filename-preview { font-size: 0.75rem; color: var(--text-secondary, #b0b0b0); margin-top: 0.375rem;}
.create-item-modal__filename-preview code { background: var(--bg-secondary, #2a2a2a); padding: 0.1rem 0.3rem; border-radius: 0;}