Page MenuHomeWickedGov Phorge
Files F4125705

mw.rcfilters.mixins.less
No OneTemporary
Actions

Size
4 KB
Referenced Files
None
Subscribers
None

mw.rcfilters.mixins.less
View Options

@import 'mediawiki.skin.variables.less';
@import 'mw.rcfilters.variables.less';
@import 'mediawiki.mixins.less';
/* stylelint-disable selector-class-pattern */
// Circle mixin
.mw-rcfilters-circle( @min-size-diameter: @min-size-circle, @size-diameter: @size-circle, @margin: 0.5em ) {
box-sizing: border-box;
min-width: @min-size-diameter;
width: @size-diameter;
min-height: @min-size-diameter;
height: @size-diameter;
margin: @margin;
border-radius: @border-radius-circle;
}
// Circle color mixin
.mw-rcfilters-circle-color( @param-background-color: @background-color-base, @param-border: false, @param-border-color: #54595d, @param-empty-background: false ) {
& when ( @param-empty-background = false ) {
background-color: @param-background-color;
}
& when ( @param-empty-background = true ) {
background-color: @highlight-none;
}
& when ( @param-border = true ) {
border: @border-width-base @border-style-base @param-border-color;
}
}
// This is the circle that appears next to the results
// Its visibility is directly dependent on whether there is
// a color class on its parent element
.result-circle( @colorName: 'none' ) {
&-@{colorName} {
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( ( @{size-circle-result} + @{margin-circle-result} ) * 5 + @{margin-circle} )';
}
.background-color-with-dark-mode( @bgcolor ) {
background-color: @bgcolor;
html.skin-theme-clientpref-night & {
background-color: darken( @bgcolor, 70% );
}
/**
* Auto night mode.
*
* Applies the night mode color palette only in response to system settings.
*/
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
@media ( prefers-color-scheme: dark ) {
html.skin-theme-clientpref-os & {
background-color: darken( @bgcolor, 70% );
}
}
}
// A mixin just for changesListWrapperWidget page, to output the scope of the widget
// so it is before the rest of the rule; we need the li& to be in
// between the wrapper scope and the color-cX class, which doesn't
// work if the rules are inside the above widget LESS scope
.highlight-results( @bgcolor ) {
.mw-rcfilters-ui-changesListWrapperWidget li&,
.mw-rcfilters-ui-changesListWrapperWidget & tr:first-child,
.mw-rcfilters-ui-changesListWrapperWidget tr&.mw-rcfilters-ui-highlights-enhanced-toplevel:not( .mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey ) td:not( :nth-child( -n+2 ) ),
.mw-rcfilters-ui-changesListWrapperWidget tr&.mw-rcfilters-ui-highlights-enhanced-nested:not( .mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey ) td:not( :nth-child( -n+4 ) ) {
.background-color-with-dark-mode( @bgcolor );
}
}
// This mixin produces color mixes for two, three and four colors
.highlight-color-mix( @color1, @color2, @color3: false, @color4: false ) {
@highlight-color-class-var: ~'.mw-rcfilters-highlight-color-@{color1}.mw-rcfilters-highlight-color-@{color2}';
// The nature of these variables and them being inside
// a 'tint' and 'average' LESS functions is such where
// the parsing is failing if it is done inside those functions.
// Instead, we first construct their LESS variable names,
// and then we call them inside those functions by calling @@var
@c1var: ~'highlight-@{color1}';
@c2var: ~'highlight-@{color2}';
// Two colors
@{highlight-color-class-var} when ( @color3 = false ) and ( @color4 = false ) and not ( @color1 = false ), ( @color2 = false ) {
.highlight-results( tint( average( @@c1var, @@c2var ), 50% ) );
}
// Three colors
@{highlight-color-class-var}.mw-rcfilters-highlight-color-@{color3} when ( @color4 = false ) and not ( @color3 = false ) {
@c3var: ~'highlight-@{color3}';
.highlight-results( tint( mix( @@c1var, average( @@c2var, @@c3var ), 33% ), 30% ) );
}
// Four colors
@{highlight-color-class-var}.mw-rcfilters-highlight-color-@{color3}.mw-rcfilters-highlight-color-@{color4} when not ( @color4 = false ) {
@c3var: ~'highlight-@{color3}';
@c4var: ~'highlight-@{color4}';
.highlight-results( tint( mix( @@c1var, mix( @@c2var, average( @@c3var, @@c4var ), 25% ), 25% ), 25% ) );
}
}

File Metadata

Mime Type
text/plain
Expires
Wed, Aug 19, 07:36 (2 w, 2 d ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
1e/8a/ed41bfb2699de7168785e1e430a7
Default Alt Text
mw.rcfilters.mixins.less (4 KB)

Event Timeline