+@import 'mediawiki.ui/variables';
@import 'mw.rcfilters.mixins';
+@import 'mw.rcfilters.variables';
@keyframes fadeBlue {
60% {
- border-top-color: #36c;
+ border-top-color: @colorProgressive;
}
100% {
- border-top-color: #c8ccd1;
+ border-top-color: @colorGray12;
}
}
&-previousChangesIndicator {
margin: 10px 0;
- border-top: 2px solid #c8ccd1;
+ border-top: 2px solid @colorGray12;
animation: 1s ease fadeBlue;
}
}
}
- h4:first-of-type {
- margin-top: 0;
- padding-top: 0;
- }
-
- ul {
- // Each li's margin-left should be the width of the highlights
- // element + the margin
- margin-left: ~'calc( ( @{result-circle-diameter} + @{result-circle-margin} ) * 5 + @{result-circle-general-margin} )';
+ // 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 {
}
.mw-changeslist-legend {
- background-color: #fff;
+ background-color: @background-color-base;
}
// Correction for Enhanced RC
// This is outside the scope of the 'highlights' wrapper
- table.mw-enhanced-rc {
- margin-left: ~'calc( ( @{result-circle-diameter} + @{result-circle-margin} ) * 5 + @{result-circle-general-margin} )';
+ table.mw-enhanced-rc td {
+ vertical-align: middle;
- td:last-child {
+ &:last-child {
width: 100%;
}
}
// 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: absolute;
- left: 0;
+ 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 {
+ // 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;
.result-circle( c5 );
}
}
+}
- // One color
- .mw-rcfilters-highlight-color-c1 {
- background-color: tint( @highlight-c1, 70% );
- }
+// One color
+.mw-rcfilters-highlight-color-c1 {
+ .highlight-changesListWrapperWidget( tint( @highlight-c1, 70% ); );
+}
- .mw-rcfilters-highlight-color-c2 {
- background-color: tint( @highlight-c2, 70% );
- }
+.mw-rcfilters-highlight-color-c2 {
+ .highlight-changesListWrapperWidget( tint( @highlight-c2, 70% ); );
+}
- .mw-rcfilters-highlight-color-c3 {
- background-color: tint( @highlight-c3, 70% );
- }
+.mw-rcfilters-highlight-color-c3 {
+ .highlight-changesListWrapperWidget( tint( @highlight-c3, 70% ); );
+}
- .mw-rcfilters-highlight-color-c4 {
- background-color: tint( @highlight-c4, 70% );
- }
+.mw-rcfilters-highlight-color-c4 {
+ .highlight-changesListWrapperWidget( tint( @highlight-c4, 70% ); );
+}
- .mw-rcfilters-highlight-color-c5 {
- background-color: tint( @highlight-c5, 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 {
- background-color: #ccdecc;
- }
- .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 {
- background-color: tint( mix( @highlight-c1, mix( @highlight-c2, mix( @highlight-c3, average( @highlight-c4, @highlight-c5 ), 20% ), 20% ), 20% ), 15% );
- }
+// 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% ) );
}