.dt-ui-replyWidget { margin-bottom: 1em; position: relative; clear: both; > .oo-ui-textInputWidget { max-width: none; .oo-ui-inputWidget-input { line-height: 1.5em; } } .ve-ui-targetToolbar > .oo-ui-toolbar-bar { background: none; box-shadow: none; border: 0; > .oo-ui-toolbar-actions { display: none; } } .oo-ui-toolbar-position-top .ve-ui-toolbarDialog-position-above { border-top: 0; .oo-ui-window-body { padding-left: 0; padding-right: 0; } } &-headerWrapper { display: flex; // Allow wrapping when the space is very narrow (mode switcher above toolbar) flex-wrap: wrap-reverse; } &-modeTabs { box-shadow: none; height: 3em; text-align: right; // Stretch to all available space flex-grow: 1; .oo-ui-tabOptionWidget:last-child { margin-right: 2px; } } &-actionsWrapper { margin-top: 0.5em; display: flex; // Allow wrapping when the space is very narrow (buttons above the footer text) flex-wrap: wrap-reverse; // When wrapping, align actions to the right justify-content: flex-end; } &-actions { // Add spacing before the footer when wrapping margin-bottom: 0.5em; margin-left: 3em; white-space: nowrap; } &-footer { // Preferred width; if there isn't enough space, this wraps under the actions flex-basis: 20em; // Stretch to all available space flex-grow: 1; font-size: 0.75em; color: #54595d; > p { &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } } } &-preview { background: #f6f6f6; padding: 0.5em 1em; &:empty { height: 0; padding: 0; overflow: hidden; } &:before { content: attr( data-label ); color: #808080; } > .mw-parser-output { margin-left: -1.6em; } } .oo-ui-messageWidget, .dt-ui-replyWidget-preview { margin-bottom: 0.5em; } &-anonWarning { display: flex; align-items: center; &.oo-ui-messageWidget-block { padding: 8px 12px; > .oo-ui-iconElement-icon { background-position: center center; transform: scale( 1.5 ); transform-origin: 0 center; } } > .oo-ui-labelElement-label { flex-grow: 1; margin-left: 3em; } } &-checkboxes { display: inline-block; vertical-align: middle; margin-right: 1.5em; } }