resources/src/mediawiki.skinning/toc/screen.less

   1 /**
   2  * Table of Contents
   3  *
   4  * Default styles for the display of table of contents in @media screen.
   5  *
   6  * Styles for @media print are inside print.css.
   7  */
   8
   9 @import 'mediawiki.mixins.less';
  10 @import 'mediawiki.skin.variables.less';
  11
  12 /* stylelint-disable selector-class-pattern */
  13
  14 /* Table of Contents */
  15 .toc,
  16 .toccolours {
  17         background-color: @background-color-neutral-subtle;
  18         border: @border-width-base @border-style-base @border-color-base;
  19         padding: 5px;
  20         font-size: 95%;
  21 }
  22
  23 /**
  24  * We want to display the ToC element with intrinsic width in block mode. The fit-content
  25  * value for width is however not supported by large groups of browsers.
  26  *
  27  * We use display:table. Even though it should only contain other table-* display
  28  * elements, there are no known problems with using this.
  29  */
  30 .toc {
  31         display: table;
  32         padding: 7px;
  33
  34         h2 {
  35                 display: inline;
  36                 border: 0;
  37                 padding: 0;
  38                 font-size: 100%;
  39                 font-weight: bold;
  40         }
  41
  42         .toctitle {
  43                 text-align: center;
  44                 direction: ltr;
  45         }
  46
  47         ul {
  48                 list-style: none;
  49                 margin: 0.3em 0;
  50                 padding: 0;
  51                 text-align: start;
  52
  53                 ul {
  54                         margin: 0;
  55                         .margin-inline( 2em, 0 );
  56                 }
  57         }
  58 }
  59
  60 /* CSS for backwards-compatibility with cached page renders and creative uses in wikitext */
  61 table.toc {
  62         border-collapse: collapse;
  63
  64         /* Remove additional paddings inside table-cells that are not present in <div>s */
  65         td {
  66                 padding: 0;
  67         }
  68 }
  69
  70 /* Separate columns for tocnumber and toctext */
  71 .tocnumber,
  72 .toctext {
  73         display: table-cell;
  74         /*
  75          * Text decorations are not propagated to the contents of inline blocks and inline tables,
  76          * according to <https://www.w3.org/TR/css-text-decor-3/#line-decoration>, and 'display: table-cell'
  77          * generates an inline table when used without any parent table-rows and tables.
  78          */
  79         text-decoration: inherit;
  80 }
  81
  82 .tocnumber {
  83         color: @color-base;
  84 }
  85
  86 /* Overwrite the style="display:none" and make the checkbox invisible on another way to */
  87 /* allow to focus the checkbox with keyboard. */
  88 .toctogglecheckbox {
  89         // Make the checkbox visible to allow it to focus with keyboard.
  90         display: inline !important; /* stylelint-disable-line declaration-no-important */
  91         // Remove any size of the checkbox.
  92         position: absolute;
  93         // Make the checkbox invisible.
  94         opacity: 0;
  95         // Prevent that the checkbox is clickable and changes the cursor.
  96         z-index: -1;
  97 }
  98
  99 .toctogglespan {
 100         font-size: 94%;
 101 }
 102
 103 .toctogglespan::before {
 104         content: ' [';
 105 }
 106
 107 .toctogglespan::after {
 108         content: ']';
 109 }
 110
 111 /* Make the label look like a link. */
 112 .toctogglelabel {
 113         color: @color-link;
 114         cursor: pointer;
 115 }
 116
 117 .toctogglelabel:hover {
 118         text-decoration: underline;
 119 }
 120
 121 /* Show a focus ring around the label when focusing the invisible checkbox. */
 122 /* This simulates that the label is in focus. */
 123 .toctogglecheckbox:focus + .toctitle .toctogglelabel {
 124         text-decoration: underline;
 125         outline: auto;
 126 }
 127
 128 /* Change the text of the button based on the state of the checkbox. */
 129 .toctogglecheckbox:checked + .toctitle .toctogglelabel::after {
 130         content: '@{msg-showtoc}';
 131 }
 132
 133 .toctogglecheckbox:not( :checked ) + .toctitle .toctogglelabel::after {
 134         content: '@{msg-hidetoc}';
 135 }