@import 'mediawiki.mixins';
@import 'mediawiki.ui/variables';
+@import 'mw.rcfilters.variables';
.mw-rcfilters-ui-filterMenuHeaderWidget {
&-title {
&-invert,
&-highlight {
- width: 1em;
+ min-width: 1em;
vertical-align: middle;
// Using the same padding that the filter item
// uses, so the button is aligned with the highlight
// buttons for the filters
- padding-right: 0.5em;
+ padding-right: 12 / @font-size-system-ui / @font-size-vector;
}
&-back {
width: 1em;
vertical-align: middle;
- padding-left: 0.5em;
+
+ .mw-rcfilters-ui-filterMenuHeaderWidget-backButton:first-child {
+ // Overwrite `.oo-ui-buttonElement-frameless.oo-ui-iconElement:first-child`
+ margin-left: 0;
+ }
}
&-title {
@import 'mediawiki.mixins';
@import 'mediawiki.ui/variables';
+@import 'mw.rcfilters.variables';
.mw-rcfilters-ui-filterMenuOptionWidget {
+ .mw-rcfilters-ui-filterMenuSectionOptionWidget ~ & {
+ padding-left: 12 / @font-size-system-ui / @font-size-vector;
+ }
+
&.oo-ui-flaggedElement-muted {
&:not( .oo-ui-optionWidget-selected ) {
// Namespaces are muted 'the other way around' when they
}
}
+ // Override OOUI's pretty specific
+ // `.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header`
+ // selector
+ .mw-rcfilters-ui-itemMenuOptionWidget-itemCheckbox > .oo-ui-fieldLayout > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
+ padding-top: 0;
+ padding-bottom: 0;
+ padding-left: 12 / @font-size-system-ui / @font-size-vector;
+ }
}
@import 'mediawiki.mixins';
@import 'mediawiki.ui/variables';
+@import 'mw.rcfilters.variables';
.mw-rcfilters-ui-filterMenuSectionOptionWidget {
- background: @colorGray14;
- padding-bottom: 0.7em;
-
- &-header {
- padding: 0 0.75em;
- // Use a high specificity to override OOUI
- .oo-ui-optionWidget.oo-ui-labelElement &-title.oo-ui-labelElement-label {
- color: @colorGray5;
- .box-sizing( border-box );
- display: inline-block;
- }
+ background-color: @colorGray14;
+ padding-bottom: 8 / @font-size-system-ui / @font-size-vector;
+ padding-left: 12 / @font-size-system-ui / @font-size-vector;
+ padding-right: 12 / @font-size-system-ui / @font-size-vector;
+
+ &-header-title.oo-ui-labelElement-label {
+ color: @colorGray5;
+ display: inline-block;
}
&-whatsThisButton {
margin-left: 1.5em;
&.oo-ui-buttonElement > .oo-ui-buttonElement-button {
- font-weight: normal;
border: 0; // Override OOUI `border` needed for frameless keyboard focus
padding: 0;
+ font-weight: normal;
&:focus {
.box-shadow( none );
padding: 1em;
&-header {
- font-weight: bold;
margin-bottom: 1em;
+ font-weight: bold;
}
&-link {
}
}
- &-active {
- .mw-rcfilters-ui-filterMenuSectionOptionWidget-header-title {
- font-weight: bold;
- }
+ &-active .mw-rcfilters-ui-filterMenuSectionOptionWidget-header-title {
+ font-weight: bold;
}
}
}
&-view-namespaces {
- border-top: 5px solid @colorGray12;
+ border-top: 4px solid @colorGray12;
&:first-child,
&.mw-rcfilters-ui-itemMenuOptionWidget-identifier-subject + &.mw-rcfilters-ui-itemMenuOptionWidget-identifier-talk {
}
.mw-rcfilters-ui-table {
- padding-top: 0.5em;
+ padding-top: 6 / @font-size-system-ui / @font-size-vector;
+ padding-bottom: 6 / @font-size-system-ui / @font-size-vector;
}
&.oo-ui-optionWidget-selected {
}
&-itemCheckbox {
+ .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
+ padding-left: 12 / @font-size-system-ui / @font-size-vector;
+ }
+
.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline {
// Override margin-top and -bottom rules from FieldLayout
margin: 0 !important; /* stylelint-disable-line declaration-no-important */
@import 'mediawiki.mixins';
@import 'mediawiki.ui/variables';
+@import 'mw.rcfilters.variables';
.mw-rcfilters-ui-menuSelectWidget {
z-index: auto;
}
&-noresults {
- padding: 0.5em;
color: @colorGray5;
+ padding: 12 / @font-size-system-ui / @font-size-vector;
}
&-body {
}
&-footer {
- padding: 0.5em;
background-color: @colorGray15;
border-top: 1px solid @colorGray12;
+ padding: 12 / @font-size-system-ui / @font-size-vector;
& + & {
border-top: 0;
+// “External” variables
+@font-size-system-ui: 16; // Assumed browser default of `16px`
+@font-size-vector: 0.875em; // equals `14px` at browser default of `16px`
+
+// RCFilters variables
@background-color-base: #fff;
@background-color-primary: #eaf3ff;
@color-base--inverted: #fff;