1 @import 'mediawiki.mixins';
2 @import 'mediawiki.ui/variables';
3 @import 'mw.rcfilters.variables';
5 .animation-delay( ... ) {
6 -webkit-animation-delay: @arguments; // Chrome 4-42, Safari 4-8, Opera 15-29, Android 2.1-4.4.4
7 -moz-animation-delay: @arguments; // Firefox 5-15
8 animation-delay: @arguments; // Chrome 43+, Firefox 16+, IE 10+, Edge 12+, Safari 9+, Opera 12.10 & 30+, iOS 9+, Android 47+
11 // This is a general mixin for a color circle
12 .mw-rcfilters-mixin-circle( @color: @color-base--inverted, @diameter: 2em, @padding: 0.5em, @border: false, @borderColor: @colorGray5, @emptyBackground: false ) {
13 .box-sizing( border-box );
16 min-height: @diameter;
21 & when ( @emptyBackground = false ) {
22 background-color: @color;
24 & when ( @emptyBackground = true ) {
25 background-color: @highlight-none;
28 & when ( @border = true ) {
29 border: 1px solid @borderColor;
33 // This is the circle that appears next to the results
34 // Its visibility is directly dependent on whether there is
35 // a color class on its parent element
36 .result-circle( @colorName: 'none' ) {
38 .mw-rcfilters-mixin-circle( ~'@{highlight-@{colorName}}', @result-circle-diameter, 0 );
41 .mw-rcfilters-highlight-color-@{colorName} & {
42 display: inline-block;
47 // A mixin for changes list containers. Applies enough margin-left to fit the 5 highlight circles.
48 .result-circle-margin() {
49 margin-left: ~'calc( ( @{result-circle-diameter} + @{result-circle-margin} ) * 5 + @{result-circle-general-margin} )';
52 // A mixin just for changesListWrapperWidget page, to output the scope of the widget
53 // so it is before the rest of the rule; we need the li& to be in
54 // between the wrapper scope and the color-cX class, which doesn't
55 // work if the rules are inside the above widget LESS scope
56 .highlight-changesListWrapperWidget( @bgcolor ) {
57 .mw-rcfilters-ui-changesListWrapperWidget li&,
58 .mw-rcfilters-ui-changesListWrapperWidget & tr:first-child,
59 .mw-rcfilters-ui-changesListWrapperWidget tr&.mw-rcfilters-ui-changesListWrapperWidget-enhanced-toplevel:not( .mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey ) td:not( :nth-child( -n+2 ) ),
60 .mw-rcfilters-ui-changesListWrapperWidget tr&.mw-rcfilters-ui-changesListWrapperWidget-enhanced-nested:not( .mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey ) td:not( :nth-child( -n+4 ) ) {
61 background-color: @bgcolor;
65 // This mixin produces color mixes for two, three and four colors
66 .highlight-color-mix( @color1, @color2, @color3: false, @color4: false ) {
67 @highlight-color-class-var: ~'.mw-rcfilters-highlight-color-@{color1}.mw-rcfilters-highlight-color-@{color2}';
69 // The nature of these variables and them being inside
70 // a 'tint' and 'average' LESS functions is such where
71 // the parsing is failing if it is done inside those functions.
72 // Instead, we first construct their LESS variable names,
73 // and then we call them inside those functions by calling @@var
74 @c1var: ~'highlight-@{color1}';
75 @c2var: ~'highlight-@{color2}';
78 @{highlight-color-class-var} when ( @color3 = false ) and ( @color4 = false ) and not ( @color1 = false ), ( @color2 = false ) {
79 .highlight-changesListWrapperWidget( tint( average( @@c1var, @@c2var ), 50% ) );
82 @{highlight-color-class-var}.mw-rcfilters-highlight-color-@{color3} when ( @color4 = false ) and not ( @color3 = false ) {
83 @c3var: ~'highlight-@{color3}';
84 .highlight-changesListWrapperWidget( tint( mix( @@c1var, average( @@c2var, @@c3var ), 33% ), 30% ) );
88 @{highlight-color-class-var}.mw-rcfilters-highlight-color-@{color3}.mw-rcfilters-highlight-color-@{color4} when not ( @color4 = false ) {
89 @c3var: ~'highlight-@{color3}';
90 @c4var: ~'highlight-@{color4}';
91 .highlight-changesListWrapperWidget( tint( mix( @@c1var, mix( @@c2var, average( @@c3var, @@c4var ), 25% ), 25% ), 25% ) );