diff --git a/modules/ext.createwiki.oouiform.ooui.less b/modules/ext.createwiki.oouiform.ooui.less index f6ef75472e..a24790cf4d 100644 --- a/modules/ext.createwiki.oouiform.ooui.less +++ b/modules/ext.createwiki.oouiform.ooui.less @@ -36,6 +36,8 @@ .ext-createwiki-tabs-wrapper.oo-ui-panelLayout-framed, .ext-createwiki-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout { + /* Decrease contrast of `border` slightly as padding/border combination is sufficient + * accessibility wise and focus of content is more important here. */ border-color: @border-color-subtle; } @@ -54,10 +56,8 @@ } .ext-createwiki-section-fieldset { - // is hard to style, so apply border to top of group - > .oo-ui-fieldsetLayout-group { - padding-top: 1.5em; - border-top: 1px solid #c8ccd1; + > .oo-ui-fieldsetLayout-header { + margin-bottom: @spacing-150; } // Remove spacing between legend and underline @@ -66,9 +66,8 @@ } } - // Spacing between sections - > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout:not( :last-child ) { - margin-bottom: 1em; + .oo-ui-tabPanelLayout + .oo-ui-tabPanelLayout { + margin-top: @spacing-100; } } } @@ -77,7 +76,7 @@ .client-js .ext-createwiki-tabs { .oo-ui-tabPanelLayout { // Panels don't need borders as the IndexLayout is inside a framed wrapper. - border: 0; + border-width: 0; // Hide section legend, only used in nojs mode > fieldset > legend { @@ -93,33 +92,6 @@ } } -#mw-htmlform-info { - > .oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header { - display: inline-block; - width: 20%; - padding: 0; - vertical-align: middle; - } - - > .oo-ui-fieldLayout-align-top .oo-ui-fieldLayout-help { - margin-right: 0; - } - - > .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field { - display: inline-block; - width: 80%; - vertical-align: middle; - } -} - -/* Compact number inputs */ -.mw-htmlform-field-HTMLFloatField, -.mw-htmlform-field-HTMLIntField { - .oo-ui-inputWidget { - max-width: 10em; - } -} - .mw-special-RequestWikiQueue { #mw-section-details, #mw-section-comments, @@ -130,21 +102,17 @@ } span > label { - font-weight: bold; + font-weight: @font-weight-bold; } + // HACK: Pretend to be a read-only OOUI TextInputWidget div > label { display: block; - width: 100%; - max-height: 15em; - box-sizing: border-box; - padding: 8px; - border: 1.5px solid @border-color-subtle; - border-radius: 4px; - background-color: @background-color-neutral-subtle; - color: @color-base; - font-family: 'Arial', sans-serif; - line-height: 1.5em; + max-width: 50em; + padding: @spacing-30 @spacing-50; + border: @border-base; + border-radius: @border-radius-base; + background-color: @background-color-interactive-subtle; overflow-y: auto; } }