mediawiki-extensions-Discus.../modules/dt.ui.ReplyWidget.less
Ed Sanders 32e306f6e1 Hide icon in anon warning below tablet width
Bug: T307709
Change-Id: I800153cabc1ba14fd249c106d57162fd0cd9dbe1
2022-06-03 16:33:26 +01:00

378 lines
8.8 KiB
Plaintext

@width-breakpoint-tablet: 720px;
.ext-discussiontools-ui-replyWidget {
margin-bottom: 1em;
position: relative;
clear: both;
// This is in user language, do not inherit text-align from the content (T306137).
// 'initial' is not widely supported, but luckily, browsers that don't support it (IE 11) also
// don't suffer from that bug. We can't set 'text-align: left' (and rely on flipping), because
// that would affect the input field, which is in content language.
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
text-align: initial;
}
// @supports does not work when nested
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
@supports ( display: flow-root ) {
.ext-discussiontools-ui-replyWidget {
// Allow the widget to be squished next to floating elements (T278476).
//
// To ensure that everything is squished to the same width, introduce a block formatting context
// (otherwise the preview or textarea could be wider than the container and mess up the layout).
// https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
//
// All of the usual ways to do this (listed on that page) have unwanted side-effects
// (in particular, `overflow: hidden` cuts off VE inspectors), so we must use this relatively
// recent property, and only apply this fix on supporting browsers, notably excluding IE 11
// (https://caniuse.com/?search=flow-root)
display: flow-root;
min-width: 250px;
clear: none;
}
}
.ext-discussiontools-ui-replyWidget { /* stylelint-disable-line no-duplicate-selectors */
&-bodyWrapper > .oo-ui-textInputWidget {
max-width: none;
.oo-ui-inputWidget-input {
line-height: 1.5em;
overflow-y: hidden;
// Leave space for newComments button
padding-bottom: 22px;
}
}
.ve-ui-targetToolbar > .oo-ui-toolbar-bar {
background: none;
box-shadow: none;
border: 0;
// Stretch to all available space
flex-grow: 1;
}
.oo-ui-toolbar-position-top .ve-ui-toolbarDialog-position-above {
border-top: 0;
.oo-ui-window-body {
padding-left: 0;
padding-right: 0;
}
}
.ve-ui-targetToolbar {
display: flex;
// Allow wrapping when the space is very narrow (mode switcher above toolbar)
flex-wrap: wrap-reverse;
> .oo-ui-windowManager {
flex-basis: 100%;
box-shadow: 0 -1px 1px 0 rgba( 0, 0, 0, 0.1 );
}
}
.skin-minerva & .ve-ui-surface-visual .ve-ce-paragraphNode {
// Reduce paragraph spacing in editor, as replies will actually generate <dd> not <p>
margin: 0;
&:first-child {
margin-top: 0.5em;
}
}
&-modeTabs {
box-shadow: none;
height: 3em;
text-align: right;
// Hide outline that can appear after switching modes via keyboard
outline: 0;
.oo-ui-tabOptionWidget:last-child {
margin-right: 2px;
}
// When mode tabs are focussed, the only available option uses the same styles as normal focus
.ext-discussiontools-ui-modeTab.oo-ui-optionWidget-highlighted {
color: #36c;
border-radius: 2px;
box-shadow: inset 0 0 0 2px #36c;
}
// The unavailable option in mode tabs is disabled, to make it un-interactable, but we want it
// to look as if it was selected
.ext-discussiontools-ui-modeTab.oo-ui-widget-disabled {
color: #36c;
box-shadow: inset 0 -2px 0 0 #36c;
}
}
&-editSwitch {
text-align: right;
.oo-ui-toolbar-bar { /* stylelint-disable-line no-descending-specificity */
border: 0;
box-shadow: none;
}
.oo-ui-toolbar-popups {
text-align: left;
}
}
&-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;
> * {
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
&-links {
// Extra specificity to override rules from MediaWiki
.mw-content-ltr &,
.mw-content-rtl & {
margin: 0;
padding: 0;
}
li {
display: inline;
&:after {
content: ' • ';
}
&:last-child:after {
content: '';
}
}
}
}
&-preview {
background: #f6f6f6;
padding: 0.5em 1em;
// Establish a block formatting context, so that floated content (e.g. image thumbnails)
// doesn't leak out and mess up our layout. (Also hides the 'Preview' label when empty.)
overflow: hidden;
&:empty {
height: 0;
padding: 0;
}
&:before {
content: attr( data-label );
color: #808080;
}
.ext-discussiontools-ui-replyWidget:not( .ext-discussiontools-ui-replyWidget-newTopic ) & > .mw-parser-output {
margin-left: -1.6em;
.skin-minerva & {
margin-left: -1em;
}
}
> .mw-parser-output > h2:first-child {
// Remove excess spacing above section title for preview
padding-top: 0;
margin-top: 0.25em;
}
}
&-bodyWrapper {
position: relative;
}
&-newComments {
position: absolute;
bottom: -1em;
left: 50%;
transition: transform 250ms ease-in, opacity 250ms ease-in;
transform: translate( -50%, 30px );
opacity: 0;
&-open {
transform: translate( -50%, 0 );
opacity: 1;
}
// Same border-radius is applied to all these elements to ensure that the trimmed-off corner
// areas don't capture clicks
&,
.oo-ui-buttonElement-framed:first-child,
.oo-ui-buttonElement-framed:first-child .oo-ui-buttonElement-button {
border-bottom-left-radius: 1.1em;
border-top-left-radius: 1.1em;
}
// Same border-radius is applied to all these elements to ensure that the trimmed-off corner
// areas don't capture clicks
&,
.oo-ui-buttonElement-framed:last-child,
.oo-ui-buttonElement-framed:last-child .oo-ui-buttonElement-button {
border-bottom-right-radius: 1.1em;
border-top-right-radius: 1.1em;
}
}
&-anonWarning,
&-advanced {
&.oo-ui-messageWidget-block {
padding: 8px 12px;
}
}
&-captcha {
margin-top: 0.5em;
}
&-error {
margin-bottom: 0.5em;
}
&-anonWarning {
margin-bottom: 0.5em;
display: flex;
align-items: center;
// Allow wrapping when the space is very narrow (buttons below the warning text)
flex-wrap: wrap;
// When wrapping, align actions to the right
justify-content: flex-end;
&.oo-ui-messageWidget-block {
> .oo-ui-iconElement-icon {
background-position: center center;
transform: scale( 1.5 );
transform-origin: 0 center;
left: 1em;
// Hide warning icon below tablet width
@media all and ( max-width: @width-breakpoint-tablet ) {
& {
display: none;
}
}
}
}
> .oo-ui-labelElement-label {
flex-grow: 1;
flex-basis: 20em;
margin-left: 3em;
// Hide warning icon below tablet width
@media all and ( max-width: @width-breakpoint-tablet ) {
& {
margin-left: 0;
}
}
}
.ext-discussiontools-ui-replyWidget-actions {
// Fix alignment within message widget
margin-top: 0.5em;
}
}
&-editSummaryField {
// We want to display the "Summary" label and the checkboxes on the same line (above the summary
// field), but prevent them from overlapping if there's not enough space. The checkboxes are
// after the summary field in the DOM for accessibility reasons, but we want to display them
// above it, and we can't achieve this with floats.
.oo-ui-fieldLayout-body {
display: flex;
flex-flow: row-reverse wrap;
justify-content: space-between;
}
.ext-discussiontools-ui-replyWidget-checkboxes {
order: 1;
}
.oo-ui-fieldLayout-header {
order: 2;
// Stretch to all available space on the line
flex-grow: 1;
}
.oo-ui-fieldLayout-field {
order: 3;
// Force to a separate line
width: 100%;
}
// Change field layout and order on mobile
@media all and ( max-width: @width-breakpoint-tablet ) {
.oo-ui-fieldLayout-header {
order: 1;
}
.oo-ui-fieldLayout-field {
order: 2;
}
.ext-discussiontools-ui-replyWidget-checkboxes {
order: 3;
flex-grow: 1;
margin-top: 1em;
}
}
}
&-editSummary {
max-width: none;
}
&-advanced.oo-ui-element-hidden + .ext-discussiontools-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;
}
.oo-ui-buttonElement-button {
min-height: auto;
}
}
}
.skin-minerva .ext-discussiontools-init-replylink-open dl dd {
// Disable overflow hack for scrolling images in <dd> in Minerva
// while the tool is open, as we need negative margins on the widget.
overflow: visible;
}