resources/src/mediawiki.special.changeslist.enhanced.less

   1 /*!
   2  * Styling for Special:Watchlist and Special:RecentChanges when preference 'usenewrc'
   3  * a.k.a. Enhanced Recent Changes is enabled.
   4  */
   5
   6 @import 'mediawiki.skin.variables.less';
   7
   8 .mw-enhancedchanges-checkbox {
   9         // The checkbox must be hidden. A display:none would also hide the
  10         // checkbox. But an element hidden by display:none is not focusable
  11         // via keyboard. Therefor make the checkbox invisible on another way
  12         // to allow to focus the checkbox with keyboard.
  13
  14         // Remove any size of the checkbox.
  15         position: absolute;
  16         // Make the checkbox invisible.
  17         opacity: 0;
  18         // Prevent that the checkbox is clickable and changes the cursor.
  19         z-index: @z-index-bottom;
  20
  21         // Hide the nested changes if the checkbox is not checked.
  22         &:not( :checked ) + * .mw-rcfilters-ui-highlights-enhanced-nested {
  23                 display: none;
  24         }
  25 }
  26
  27 table.mw-enhanced-rc {
  28         border: 0;
  29         border-spacing: 0;
  30
  31         th,
  32         td {
  33                 padding: 0;
  34                 vertical-align: top;
  35         }
  36
  37         td.mw-enhanced-rc-nested {
  38                 padding-left: 1em;
  39         }
  40 }
  41
  42 td.mw-enhanced-rc {
  43         white-space: nowrap;
  44         font-family: monospace, monospace;
  45 }
  46
  47 .mw-enhanced-rc-time {
  48         font-family: monospace, monospace;
  49 }
  50
  51 @width-arrow-space: 15px;
  52
  53 .mw-enhancedchanges-arrow {
  54         padding-top: 2px;
  55         cursor: pointer;
  56
  57         .mw-enhancedchanges-checkbox + * & {
  58                 .cdx-mixin-css-icon( @cdx-icon-down-triangle, @color-base, @size-icon-x-small );
  59                 transition: transform 250ms ease;
  60         }
  61
  62         .mw-enhancedchanges-checkbox:not( :checked ) + * & {
  63                 // Rotate is not flipped by CSS Janus. [T353099]
  64                 [ dir='ltr' ] & {
  65                         transform: rotate( -90deg );
  66                 }
  67
  68                 [ dir='rtl' ] & {
  69                         transform: rotate( 90deg );
  70                 }
  71         }
  72
  73         .mw-enhancedchanges-checkbox[ type ] + * & {
  74                 // Restore enforced space to make sure arrows align
  75                 // with timestamp
  76                 width: @width-arrow-space;
  77                 height: @width-arrow-space;
  78         }
  79
  80         // Show a focus ring around the label when focusing the invisible checkbox.
  81         // This simulates that the label is in focus.
  82         .mw-enhancedchanges-checkbox:focus + * & {
  83                 outline: auto;
  84         }
  85 }
  86
  87 .mw-enhancedchanges-arrow-space {
  88         display: inline-block;
  89         width: @width-arrow-space;
  90         height: @width-arrow-space;
  91 }
  92
  93 .mw-enhanced-watched .mw-enhanced-rc-time {
  94         font-weight: bold;
  95 }
  96
  97 /* stylelint-disable-next-line selector-class-pattern */
  98 span.changedby {
  99         font-size: 95%;
 100 }