diff options
Diffstat (limited to 'www/wiki/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less')
| -rw-r--r-- | www/wiki/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less | 193 |
1 files changed, 193 insertions, 0 deletions
diff --git a/www/wiki/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less b/www/wiki/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less new file mode 100644 index 00000000..e9e331b1 --- /dev/null +++ b/www/wiki/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less @@ -0,0 +1,193 @@ +@import 'mediawiki.ui/variables'; +@import 'mw.rcfilters.mixins'; +@import 'mw.rcfilters.variables'; + +@keyframes fadeBlue { + 60% { + border-top-color: @colorProgressive; + } + 100% { + border-top-color: @colorGray12; + } +} + +.mw-rcfilters-ui-changesListWrapperWidget { + position: relative; + + &-newChanges { + min-height: 34px; + margin: 8px 0 0 0; + text-align: center; + } + + &-previousChangesIndicator { + margin: 10px 0; + border-top: 2px solid @colorGray12; + animation: 1s ease fadeBlue; + } + + &-results { + width: 35em; + margin: 5em auto; + + &-noresult, + &-conflict { + margin-bottom: 0.5em; + font-weight: bold; + text-align: center; + } + } + + // Rule needs to be specific + // We want the expand button to appear outside the color + // to match the way the general highlight background appears + &-enhanced-grey td:not( :nth-child( -n+2 ) ) { + background-color: @light-gray; + } + + &-highlighted { + ul { + list-style: none; + + li { + list-style: none; + } + } + } + + .mw-changeslist-legend { + background-color: @background-color-base; + position: relative; // We want to keep the legend accessible when results are overlaid + border: 1px solid @colorGray12; + } + + .mw-changeslist-overlay { + position: absolute; + display: none; + width: 100%; + height: 100%; + } + + &--overlaid > .mw-changeslist-overlay { + display: block; + } + + // Correction for Enhanced RC + // This is outside the scope of the 'highlights' wrapper + table.mw-enhanced-rc { + td:last-child { + width: 100%; + } + } + + &-highlights { + display: none; + padding: 0 @result-circle-general-margin 0 0; + text-align: right; + // 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; + } + + // 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 { + .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; + } + + &-color { + + &-none { + .mw-rcfilters-mixin-circle( @highlight-none, @result-circle-diameter, 0, 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 ); + } + } +} + +// One color +.mw-rcfilters-highlight-color-c1 { + .highlight-changesListWrapperWidget( tint( @highlight-c1, 70% ); ); +} + +.mw-rcfilters-highlight-color-c2 { + .highlight-changesListWrapperWidget( tint( @highlight-c2, 70% ); ); +} + +.mw-rcfilters-highlight-color-c3 { + .highlight-changesListWrapperWidget( tint( @highlight-c3, 70% ); ); +} + +.mw-rcfilters-highlight-color-c4 { + .highlight-changesListWrapperWidget( tint( @highlight-c4, 70% ); ); +} + +.mw-rcfilters-highlight-color-c5 { + .highlight-changesListWrapperWidget( tint( @highlight-c5, 70% ); ); +} + +// Two colors +.highlight-color-mix( c1, c2 ); +// Overriding .highlight-color-mix( c1, c3 ); to produce +// a custom color rather than the computed tint +// see https://phabricator.wikimedia.org/T161267 +.mw-rcfilters-highlight-color-c1.mw-rcfilters-highlight-color-c3 { + .highlight-changesListWrapperWidget( @light-green ); +} +.highlight-color-mix( c1, c4 ); +.highlight-color-mix( c1, c5 ); +.highlight-color-mix( c2, c3 ); +.highlight-color-mix( c2, c4 ); +.highlight-color-mix( c2, c5 ); +.highlight-color-mix( c3, c4 ); +.highlight-color-mix( c3, c5 ); +.highlight-color-mix( c4, c5 ); + +// Three colors +.highlight-color-mix( c1, c2, c3 ); +.highlight-color-mix( c1, c2, c5 ); +.highlight-color-mix( c1, c2, c4 ); +.highlight-color-mix( c1, c3, c4 ); +.highlight-color-mix( c1, c3, c5 ); +.highlight-color-mix( c1, c4, c5 ); +.highlight-color-mix( c2, c3, c4 ); +.highlight-color-mix( c2, c3, c5 ); +.highlight-color-mix( c2, c4, c5 ); +.highlight-color-mix( c3, c4, c5 ); + +// Four colors +.highlight-color-mix( c1, c2, c3, c4 ); +.highlight-color-mix( c1, c2, c3, c5 ); +.highlight-color-mix( c1, c2, c4, c5 ); +.highlight-color-mix( c1, c3, c4, c5 ); +.highlight-color-mix( c2, c3, c4, c5 ); + +// 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-changesListWrapperWidget( tint( mix( @highlight-c1, mix( @highlight-c2, mix( @highlight-c3, average( @highlight-c4, @highlight-c5 ), 20% ), 20% ), 20% ), 15% ) ); +} |