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