mediawiki-extensions-Discus.../modules/dt.ui.ReplyWidget.less
Bartosz Dziewoński d5a1b7bc2b ReplyWidget: Ensure scrollbar doesn't appear in source mode
Even though the field is supposed to resize itself to match the text
inside, vertical scrollbar would sometimes appear when the user has
zoomed in. Some calculation probably handles fractions of pixels
incorrectly (might be a bug in OOUI or a browser bug).

Since this field has no limit on max rows, we can just hide the
scrollbar. This can't be fixed in OOUI itself, since its autosize text
fields usually have a limit to how tall they are allowed to grow
before a scrollbar is used.

Bug: T267609
Change-Id: Id36ed417c4678e469a6c05715404e330064c2017
2020-11-10 12:20:30 +01:00

161 lines
2.7 KiB
Plaintext

.dt-ui-replyWidget {
margin-bottom: 1em;
position: relative;
clear: both;
> .oo-ui-textInputWidget {
max-width: none;
overflow-y: hidden;
.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;
}
}
// anonWarning & advanced box
> .oo-ui-messageWidget-block {
padding: 8px 12px;
}
&-anonWarning {
margin-bottom: 0.5em;
display: flex;
align-items: center;
&.oo-ui-messageWidget-block {
> .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;
}
.dt-ui-replyWidget-actions {
// Fix alignment within message widget
margin-bottom: 0;
}
}
&-editSummaryField.oo-ui-labelElement {
margin-top: 0;
}
&-editSummary {
max-width: none;
}
&-advanced.oo-ui-element-hidden + .dt-ui-replyWidget-anonWarning {
// Removing spacing between message widgets when the first is hidden
margin-top: 0;
}
&-advancedToggle {
font-size: 0.75em;
.oo-ui-indicatorElement-indicator {
min-width: auto;
}
}
&-checkboxes {
float: right;
}
}