.d-editor-container { display: flex; flex-grow: 1; } .d-editor-overlay { position: absolute; background-color: black; opacity: 0.8; z-index: 1000; } .d-editor-modals { position: absolute; z-index: 1001; } .d-editor { display: flex; flex-grow: 1; min-height: 0; } .d-editor .d-editor-modal { min-width: 400px; position: absolute; background-color: $secondary; border: 1px solid $primary-low; padding: 1em; top: 25px; input { width: 98%; } h3 { margin-bottom: 0.5em; } } .d-editor-textarea-wrapper, .d-editor-preview-wrapper { flex: 1; } .d-editor-textarea-wrapper { display: flex; flex-direction: column; background-color: $secondary; position: relative; } .d-editor-preview-wrapper { margin-left: 5px; max-width: 50%; display: flex; flex-direction: column; background: $secondary; } .d-editor-button-bar { display: flex; align-items: center; border-bottom: 2px solid $primary-low; min-height: 30px; button { background-color: transparent; color: $primary-medium; } .btn:not(.no-text) { font-size: 1.2em; } .btn.bold { font-weight: bolder; } .btn.italic { font-style: italic; } } .d-editor-spacer { width: 1px; height: 20px; margin: 0 5px; background-color: $primary-low; display: inline-block; } .d-editor-input, .d-editor-preview { box-shadow: none; box-sizing: border-box; height: 100%; margin: 0; min-height: auto; width: 100%; word-wrap: break-word; flex-grow: 1; &:focus { box-shadow: none; border: 0; outline: 0; } } .d-editor-plugin { display: flex; overflow: auto; } .d-editor-input { border: 0; padding: 7px; overflow-x: hidden; } .d-editor-preview { border: 1px dashed $primary-low; overflow: auto; cursor: default; background-color: $secondary; padding: 7px; } .composing-whisper .d-editor-preview { font-style: italic; color: $primary-medium !important; } .d-editor-preview > *:first-child { margin-top: 0; } .hide-preview .d-editor-preview-wrapper { display: none; flex: 0; } .user-preferences .bio-composer, .edit-category-tab-topic-template { textarea { width: 100%; } .d-editor-container { display: block; } .d-editor-textarea-wrapper { border: 1px solid $primary-low; } .d-editor-preview-wrapper { max-width: 100%; margin: 10px 0 0 0; } .d-editor-preview { background-color: $primary-very-low; } } .user-preferences .bio-composer { padding: 10px; border: 1px solid $primary-low; }