mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/DiscussionTools
synced 2024-11-25 00:38:33 +00:00
74560f216e
The footer was already laid out using flexbox and just required some CSS tweaks to enable wrapping. The header required some DOM changes, now also uses flexbox, and wraps in a similar manner. Bug: T259320 Change-Id: I6f6a86932a108037bf1d70f077c372654318be26
137 lines
2.2 KiB
Plaintext
137 lines
2.2 KiB
Plaintext
.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;
|
|
}
|
|
}
|