animation-delay: @arguments; // Chrome 43+, Firefox 16+, IE 10+, Edge 12+, Safari 9+, Opera 12.10 & 30+, iOS 9+, Android 47+
}
-// This is a general mixin for a color circle
-.mw-rcfilters-mixin-circle( @color: @color-base--inverted, @diameter: 2em, @padding: 0.5em, @border: false, @borderColor: @colorGray5, @emptyBackground: false ) {
+// Circle mixin
+.mw-rcfilters-circle( @min-size-diameter: @min-size-circle, @size-diameter: @size-circle, @margin: 0.5em ) {
.box-sizing( border-box );
- min-width: @diameter;
- width: @diameter;
- min-height: @diameter;
- height: @diameter;
- margin: @padding;
+ min-width: @min-size-diameter;
+ width: @size-diameter;
+ min-height: @min-size-diameter;
+ height: @size-diameter;
+ margin: @margin;
border-radius: 50%;
+}
+// Circle color mixin
+.mw-rcfilters-circle-color( @color: @color-base--inverted, @border: false, @borderColor: @colorGray5, @emptyBackground: false ) {
& when ( @emptyBackground = false ) {
background-color: @color;
}
+
& when ( @emptyBackground = true ) {
background-color: @highlight-none;
}
// a color class on its parent element
.result-circle( @colorName: 'none' ) {
&-@{colorName} {
- .mw-rcfilters-mixin-circle( ~'@{highlight-@{colorName}}', @result-circle-diameter, 0 );
display: none;
+ .mw-rcfilters-circle-color( ~'@{highlight-@{colorName}}' );
.mw-rcfilters-highlight-color-@{colorName} & {
display: inline-block;
// A mixin for changes list containers. Applies enough margin-left to fit the 5 highlight circles.
.result-circle-margin() {
- margin-left: ~'calc( ( @{result-circle-diameter} + @{result-circle-margin} ) * 5 + @{result-circle-general-margin} )';
+ margin-left: ~'calc( ( @{size-circle-result} + @{margin-circle-result} ) * 5 + @{margin-circle} )';
}
// A mixin just for changesListWrapperWidget page, to output the scope of the widget
list-style: none;
}
}
+
+ & > div {
+ margin-right: @margin-circle-result;
+ }
}
// Make more specific for the overrides
div.mw-rcfilters-ui-highlights {
body.mw-rcfilters-ui-initialized & {
display: inline-block;
+ .mw-rcfilters-circle( @size-circle-result, @size-circle-result, 0 );
}
&-color {
&-none {
display: inline-block;
+
.mw-changeslist-watchedseen & {
.mw-rcfilters-ui-changesListWrapperWidget.mw-rcfilters-ui-changesListWrapperWidget-highlighted & {
- .mw-rcfilters-mixin-circle( @highlight-none, @result-circle-diameter, 0, true, @highlight-grey, true );
+ .mw-rcfilters-circle-color( @highlight-none, true, @highlight-grey, true );
}
.mw-rcfilters-ui-changesListWrapperWidget:not( .mw-rcfilters-ui-changesListWrapperWidget-highlighted ) & {
- .mw-rcfilters-mixin-circle( @highlight-none, @result-circle-diameter, 0, true, @highlight-bluedot, true );
+ .mw-rcfilters-circle-color( @highlight-none, true, @highlight-bluedot, true );
}
}
.mw-changeslist-watchedunseen & {
.mw-rcfilters-ui-changesListWrapperWidget.mw-rcfilters-ui-changesListWrapperWidget-highlighted & {
- .mw-rcfilters-mixin-circle( @highlight-grey, @result-circle-diameter, 0, true, @highlight-grey );
+ .mw-rcfilters-circle-color( @highlight-grey, true, @highlight-grey );
}
.mw-rcfilters-ui-changesListWrapperWidget:not( .mw-rcfilters-ui-changesListWrapperWidget-highlighted ) & {
- .mw-rcfilters-mixin-circle( @highlight-bluedot, @result-circle-diameter, 0, true, @highlight-bluedot );
+ .mw-rcfilters-circle-color( @highlight-bluedot, true, @highlight-bluedot );
}
}
}
- // Watchlist unseen highlighted fixes
- // Seen (empty circle)
- // There's no need to correct 'unseen' because that would be
- // a filled colorful circle, which is the regular rendering
- .mw-changeslist-watchedseen &-c1 {
- .mw-rcfilters-mixin-circle( @highlight-c1, @result-circle-diameter, 0, true, @highlight-c1, true );
- }
+ }
- .mw-changeslist-watchedseen &-c2 {
- .mw-rcfilters-mixin-circle( @highlight-c2, @result-circle-diameter, 0, true, @highlight-c2, true );
- }
+ // Watchlist unseen highlighted fixes
+ // Seen (empty circle)
+ // There's no need to correct 'unseen' because that would be
+ // a filled colorful circle, which is the regular rendering
+ .mw-changeslist-watchedseen &-c1 {
+ .mw-rcfilters-circle-color( @highlight-c1, true, @highlight-c1, true );
+ }
- .mw-changeslist-watchedseen &-c3 {
- .mw-rcfilters-mixin-circle( @highlight-c3, @result-circle-diameter, 0, true, @highlight-c3, true );
- }
+ .mw-changeslist-watchedseen &-c2 {
+ .mw-rcfilters-circle-color( @highlight-c2, true, @highlight-c2, true );
+ }
- .mw-changeslist-watchedseen &-c4 {
- .mw-rcfilters-mixin-circle( @highlight-c4, @result-circle-diameter, 0, true, @highlight-c4, true );
- }
+ .mw-changeslist-watchedseen &-c3 {
+ .mw-rcfilters-circle-color( @highlight-c3, true, @highlight-c3, true );
+ }
- .mw-changeslist-watchedseen &-c5 {
- .mw-rcfilters-mixin-circle( @highlight-c5, @result-circle-diameter, 0, true, @highlight-c5, true );
- }
+ .mw-changeslist-watchedseen &-c4 {
+ .mw-rcfilters-circle-color( @highlight-c4, true, @highlight-c4, true );
}
- .mw-rcfilters-ui-changesListWrapperWidget & > div {
- margin-right: @result-circle-margin;
+ .mw-changeslist-watchedseen &-c5 {
+ .mw-rcfilters-circle-color( @highlight-c5, true, @highlight-c5, true );
}
}
width: 100%;
}
}
-}
-
-.mw-rcfilters-ui-highlights {
- display: none;
- padding: 0 @result-circle-general-margin 0 0;
- // The width is 5 circles times their diameter + individual margin
- // and then plus the general margin
- width: ~'calc( ( @{result-circle-diameter} + @{result-circle-margin} ) * 5 )';
- // And we want to shift the entire block to the left of the li
- position: relative;
- // Negative left margin of width + padding
- margin-left: ~'calc( ( @{result-circle-diameter} + @{result-circle-margin} ) * -5 - @{result-circle-general-margin} )';
- .mw-rcfilters-ui-changesListWrapperWidget-highlighted & {
- display: inline-block;
- }
-
- > div {
- .box-sizing( border-box );
- margin-right: @result-circle-margin;
- vertical-align: middle;
- // This is to make the dots appear at the center of the
- // text itself; it's a horrendous hack and blame JamesF for it.
- margin-top: -2px;
- float: right;
- }
-
- &-color {
- &-none {
- .mw-rcfilters-mixin-circle( @highlight-none, @result-circle-diameter, 0, true );
+ &-highlights {
+ display: none;
+ padding: 0 @margin-circle 0 0;
+ text-align: right;
+ // The width is 5 circles times their diameter + individual margin
+ // and then plus the general margin
+ width: ~'calc( ( @{size-circle-result} + @{margin-circle-result} ) * 5 )';
+ // And we want to shift the entire block to the left of the li
+ position: relative;
+ // Negative left margin of width + padding
+ margin-left: ~'calc( ( @{size-circle-result} + @{margin-circle-result} ) * -5 - @{margin-circle} )';
+
+ .mw-rcfilters-ui-changesListWrapperWidget-highlighted & {
display: inline-block;
+ }
+
+ // This needs to be very specific, since these are
+ // position rules that should apply to all overrides
+ .mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-ui-changesListWrapperWidget-highlights > div&-circle {
+ vertical-align: middle;
+ .mw-rcfilters-circle( @size-circle-result, @size-circle-result, 0 );
+ // This is to make the dots appear at the center of the
+ // text itself; it's a horrendous hack and blame JamesF for it.
+ margin-top: -2px;
+ margin-right: @margin-circle-result;
+ }
- .mw-rcfilters-highlight-color-c1 &,
- .mw-rcfilters-highlight-color-c2 &,
- .mw-rcfilters-highlight-color-c3 &,
- .mw-rcfilters-highlight-color-c4 &,
- .mw-rcfilters-highlight-color-c5 & {
- display: none;
+ &-color {
+ &-none {
+ .mw-rcfilters-circle-color( @highlight-none, true );
+ display: inline-block;
+
+ .mw-rcfilters-highlight-color-c1 &,
+ .mw-rcfilters-highlight-color-c2 &,
+ .mw-rcfilters-highlight-color-c3 &,
+ .mw-rcfilters-highlight-color-c4 &,
+ .mw-rcfilters-highlight-color-c5 & {
+ display: none;
+ }
}
+ .result-circle( c1 );
+ .result-circle( c2 );
+ .result-circle( c3 );
+ .result-circle( c4 );
+ .result-circle( c5 );
}
- .result-circle( c1 );
- .result-circle( c2 );
- .result-circle( c3 );
- .result-circle( c4 );
- .result-circle( c5 );
}
}
.highlight-color-mix( c1, c3, c4, c5 );
.highlight-color-mix( c2, c3, c4, c5 );
-// Five colors:
+// Five colors
.mw-rcfilters-highlight-color-c1.mw-rcfilters-highlight-color-c2.mw-rcfilters-highlight-color-c3.mw-rcfilters-highlight-color-c4.mw-rcfilters-highlight-color-c5 {
.highlight-results( tint( mix( @highlight-c1, mix( @highlight-c2, mix( @highlight-c3, average( @highlight-c4, @highlight-c5 ), 20% ), 20% ), 20% ), 15% ) );
}
@import 'mw.rcfilters.mixins';
+@import 'mw.rcfilters.variables';
.mw-rcfilters-ui-filterItemHighlightButton {
.oo-ui-buttonWidget.oo-ui-popupButtonWidget .oo-ui-buttonElement-button > &-circle {
background-image: none;
display: inline-block;
vertical-align: middle;
- margin-right: 0.2em;
// Override OOUI rule on frameless icons
opacity: 1;
+ .mw-rcfilters-circle( @min-size-circle, @size-circle, @margin-circle 0 );
&-color {
&-c1 {
- // These values duplicate the sizing of the icon
- // width/height 1.875em
- .mw-rcfilters-mixin-circle( @highlight-c1, 1.875em, 0.2em 0 );
+ .mw-rcfilters-circle-color( @highlight-c1 );
}
&-c2 {
- .mw-rcfilters-mixin-circle( @highlight-c2, 1.875em, 0.2em 0 );
+ .mw-rcfilters-circle-color( @highlight-c2 );
}
&-c3 {
- .mw-rcfilters-mixin-circle( @highlight-c3, 1.875em, 0.2em 0 );
+ .mw-rcfilters-circle-color( @highlight-c3 );
}
&-c4 {
- .mw-rcfilters-mixin-circle( @highlight-c4, 1.875em, 0.2em 0 );
+ .mw-rcfilters-circle-color( @highlight-c4 );
}
&-c5 {
- .mw-rcfilters-mixin-circle( @highlight-c5, 1.875em, 0.2em 0 );
+ .mw-rcfilters-circle-color( @highlight-c5 );
}
}
}
@import 'mediawiki.ui/variables';
@import 'mw.rcfilters.mixins';
+@import 'mw.rcfilters.variables';
.mw-rcfilters-ui-highlightColorPickerWidget {
&-label {
display: block;
font-weight: bold;
- font-size: 1.2em;
+ font-size: 1.1425em;
}
&-buttonSelect {
&-color {
- // Override OOUI definition from padded popup; the definition
- // forces the first-child to be margin-top:0; which overrides
- // our definitions below where margin is 0.5em.
- // We set up the margin-top as 0.5em for all circles so we get
+ .mw-rcfilters-circle( @min-size-circle-colorpicker, @size-circle-colorpicker, @margin-circle );
+
+ // Override OOUI rule from padded popup;
+ // We set margin-top as ≈0.357em≈5px for all circles so we get
// a consistent result
- &.oo-ui-widget-enabled.oo-ui-optionWidget.oo-ui-buttonElement.oo-ui-buttonElement-frameless.oo-ui-buttonOptionWidget {
- margin-top: 0.5em;
+ &.oo-ui-buttonElement {
+ margin-top: @margin-circle;
+
+ // Override OOUI rule on frameless :first-child buttons
+ &:first-child {
+ margin-left: 0;
+ }
}
// Make the rule much more specific to override OOUI
- .oo-ui-iconElement-icon.oo-ui-icon-check {
- // Override OOUI icon dimensions
- // The parent is 2em with 0.5em margin
- // (see mw-rcfilters-mixin-circle below)
- // so here we want 2em - 0.5em = 1.5em
- width: 1.5em;
- height: 1.5em;
- // By eye, this is centered horizontally for the color circle
- margin-left: -0.1em;
+ &.oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon.oo-ui-icon-check {
+ // Align centered horizontally within the color circle
+ top: -2px;
+ left: 4 / @font-size-system-ui / @font-size-vector;
// Override OOUI rule on frameless icons
opacity: 1;
}
&-none {
- .oo-ui-iconElement-icon.oo-ui-icon-check {
- // By eye, this is centered horizontally for the white circle
- margin-left: -0.2em;
- }
-
- .mw-rcfilters-mixin-circle( @highlight-none, 2em, 0.5em, true );
+ .mw-rcfilters-circle-color( @highlight-none, true );
// Override `border-style` to `dashed`
border-style: dashed;
+ &.oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon.oo-ui-icon-check {
+ // Align centered horizontally in the dashed white circle with 1px border-width
+ left: 3 / @font-size-system-ui / @font-size-vector;
+ }
+
&.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
&.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
&.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
}
}
&-c1 {
- .mw-rcfilters-mixin-circle( @highlight-c1 );
+ .mw-rcfilters-circle-color( @highlight-c1, false );
+ border-color: @highlight-c1;
&.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
&.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
}
}
&-c2 {
- .mw-rcfilters-mixin-circle( @highlight-c2 );
+ .mw-rcfilters-circle-color( @highlight-c2, true );
+ border-color: @highlight-c2;
&.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
&.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
}
}
&-c3 {
- .mw-rcfilters-mixin-circle( @highlight-c3 );
+ .mw-rcfilters-circle-color( @highlight-c3, true );
+ border-color: @highlight-c3;
&.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
&.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
}
}
&-c4 {
- .mw-rcfilters-mixin-circle( @highlight-c4 );
+ .mw-rcfilters-circle-color( @highlight-c4, true );
+ border-color: @highlight-c4;
&.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
&.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
}
}
&-c5 {
- .mw-rcfilters-mixin-circle( @highlight-c5 );
+ .mw-rcfilters-circle-color( @highlight-c5, true );
+ border-color: @highlight-c5;
&.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
&.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
@import 'mw.rcfilters.mixins';
@import 'mw.rcfilters.variables';
+@size-circle: 20 / @font-size-system-ui / @font-size-vector;
+@margin-circle: 5 / @font-size-system-ui / @font-size-vector;
+
.mw-rcfilters-ui-tagItemWidget {
// Background and color of the capsule widget need a bit
// more specificity to override OOUI internals
&-highlight {
display: none;
- margin-right: 0.5em;
width: 10px;
+ margin-right: @margin-circle;
&-highlighted {
display: inline-block;
&:before {
content: '';
- position: absolute;
display: block;
+ position: absolute;
top: 50%;
+ .mw-rcfilters-circle( 10px, 10px, ~'-5px 0.5em 0 0' );
}
&[ data-color='c1' ]:before {
- .mw-rcfilters-mixin-circle( @highlight-c1, 10px, ~'-5px 0.5em 0 0' );
+ .mw-rcfilters-circle-color( @highlight-c1 );
}
&[ data-color='c2' ]:before {
- .mw-rcfilters-mixin-circle( @highlight-c2, 10px, ~'-5px 0.5em 0 0' );
+ .mw-rcfilters-circle-color( @highlight-c2 );
}
&[ data-color='c3' ]:before {
- .mw-rcfilters-mixin-circle( @highlight-c3, 10px, ~'-5px 0.5em 0 0' );
+ .mw-rcfilters-circle-color( @highlight-c3 );
}
&[ data-color='c4' ]:before {
- .mw-rcfilters-mixin-circle( @highlight-c4, 10px, ~'-5px 0.5em 0 0' );
+ .mw-rcfilters-circle-color( @highlight-c4 );
}
&[ data-color='c5' ]:before {
- .mw-rcfilters-mixin-circle( @highlight-c5, 10px, ~'-5px 0.5em 0 0' );
+ .mw-rcfilters-circle-color( @highlight-c5 );
}
}
}
// Muted state
@muted-opacity: 0.5;
+// Circles
+@min-size-circle: 20px;
+@size-circle: 20 / @font-size-system-ui / @font-size-vector;
+@margin-circle: 5 / @font-size-system-ui / @font-size-vector;
+
// Result list circle indicators
// Defined and used in mw.rcfilters.ui.ChangesListWrapperWidget.less
-@result-circle-margin: 3px;
-@result-circle-general-margin: 0.5em;
+@margin-circle-result: 3px;
// In these small sizes, 'em' appears
// squished and inconsistent.
// Pixels are better for this use case:
-@result-circle-diameter: 6px;
+@size-circle-result: 6px;
+
+// Color picker circles
+@min-size-circle-colorpicker: 30px;
+@size-circle-colorpicker: 30 / @font-size-system-ui / @font-size-vector;
dépôts / lhc / web / wiklou.git / commitdiff