resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less

   1 @import 'mw.rcfilters.mixins';
   2
   3 .mw-rcfilters-ui-changesListWrapperWidget {
   4         &-highlighted {
   5                 ul {
   6                         list-style: none;
   7                         // Each li's margin-left should be the width of the highlights
   8                         // element + the margin
   9                         margin-left: ~"calc( ( @{result-circle-diameter} + @{result-circle-margin} ) * 5 + @{result-circle-general-margin} )";
  10                 }
  11         }
  12
  13         // Correction for Enhanced RC
  14         // This is outside the scope of the 'highlights' wrapper
  15         table.mw-enhanced-rc {
  16                 margin-left: ~"calc( ( @{result-circle-diameter} + @{result-circle-margin} ) * 5 + @{result-circle-general-margin} )";
  17
  18                 td:last-child {
  19                         width: 100%;
  20                 }
  21         }
  22
  23         &-highlights {
  24                 display: none;
  25                 padding: 0 @result-circle-general-margin 0 0;
  26                 text-align: right;
  27                 // The width is 5 circles times their diameter + individual margin
  28                 // and then plus the general margin
  29                 width: ~"calc( ( @{result-circle-diameter} + @{result-circle-margin} ) * 5 )";
  30                 // And we want to shift the entire block to the left of the li
  31                 position: absolute;
  32                 left: 0;
  33
  34                 .mw-rcfilters-ui-changesListWrapperWidget-highlighted & {
  35                         display: inline-block;
  36                 }
  37
  38                 div {
  39                         .box-sizing( border-box );
  40                         margin-right: @result-circle-margin;
  41                         vertical-align: middle;
  42                         // This is to make the dots appear at the center of the
  43                         // text itself; it's a horrendous hack and blame JamesF for it.
  44                         margin-top: -2px;
  45                 }
  46
  47                 &-color {
  48
  49                         &-none {
  50                                 .mw-rcfilters-mixin-circle( @highlight-none, @result-circle-diameter, 0, true );
  51                                 display: inline-block;
  52
  53                                 .mw-rcfilters-highlight-color-c1 &,
  54                                 .mw-rcfilters-highlight-color-c2 &,
  55                                 .mw-rcfilters-highlight-color-c3 &,
  56                                 .mw-rcfilters-highlight-color-c4 &,
  57                                 .mw-rcfilters-highlight-color-c5 & {
  58                                         display: none;
  59                                 }
  60                         }
  61                         .result-circle( c1 );
  62                         .result-circle( c2 );
  63                         .result-circle( c3 );
  64                         .result-circle( c4 );
  65                         .result-circle( c5 );
  66                 }
  67         }
  68
  69         // One color
  70         .mw-rcfilters-highlight-color-c1 {
  71                 background-color: tint( @highlight-c1, 70% );
  72         }
  73
  74         .mw-rcfilters-highlight-color-c2 {
  75                 background-color: tint( @highlight-c2, 70% );
  76         }
  77
  78         .mw-rcfilters-highlight-color-c3 {
  79                 background-color: tint( @highlight-c3, 70% );
  80         }
  81
  82         .mw-rcfilters-highlight-color-c4 {
  83                 background-color: tint( @highlight-c4, 70% );
  84         }
  85
  86         .mw-rcfilters-highlight-color-c5 {
  87                 background-color: tint( @highlight-c5, 70% );
  88         }
  89
  90         // Two colors
  91         .highlight-color-mix( c1, c2 );
  92         .highlight-color-mix( c1, c3 );
  93         .highlight-color-mix( c1, c4 );
  94         .highlight-color-mix( c1, c5 );
  95         .highlight-color-mix( c2, c3 );
  96         .highlight-color-mix( c2, c4 );
  97         .highlight-color-mix( c2, c5 );
  98         .highlight-color-mix( c3, c4 );
  99         .highlight-color-mix( c3, c5 );
 100         .highlight-color-mix( c4, c5 );
 101
 102         // Three colors
 103         .highlight-color-mix( c1, c2, c3 );
 104         .highlight-color-mix( c1, c2, c5 );
 105         .highlight-color-mix( c1, c2, c4 );
 106         .highlight-color-mix( c1, c3, c4 );
 107         .highlight-color-mix( c1, c3, c5 );
 108         .highlight-color-mix( c1, c4, c5 );
 109         .highlight-color-mix( c2, c3, c4 );
 110         .highlight-color-mix( c2, c3, c5 );
 111         .highlight-color-mix( c2, c4, c5 );
 112         .highlight-color-mix( c3, c4, c5 );
 113
 114         // Four colors
 115         .highlight-color-mix( c1, c2, c3, c4 );
 116         .highlight-color-mix( c1, c2, c3, c5 );
 117         .highlight-color-mix( c1, c2, c4, c5 );
 118         .highlight-color-mix( c1, c3, c4, c5 );
 119         .highlight-color-mix( c2, c3, c4, c5 );
 120
 121         // Five colors:
 122         .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 {
 123                 background-color: tint( mix( @highlight-c1, mix( @highlight-c2, mix( @highlight-c3, average( @highlight-c4, @highlight-c5 ), 20% ), 20% ), 20% ), 15% );
 124         }
 125 }