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

   1 /* This style adds a toggle button with internationalized message for the TOC. */
   2
   3 /* When the browser supports :checked then overwrite the style="display:none" and make the */
   4 /* checkbox invisible on another way to allow to focus the checkbox with keyboard. */
   5 :not( :checked ) > .toctogglecheckbox {
   6         // Make the checkbox visible to allow it to focus with keyboard.
   7         display: inline !important; /* stylelint-disable-line declaration-no-important */
   8         // Remove any size of the checkbox.
   9         position: absolute;
  10         // Make the checkbox invisible.
  11         opacity: 0;
  12         // Prevent that the checkbox is clickable and changes the cursor.
  13         z-index: -1;
  14 }
  15
  16 .toctogglespan {
  17         font-size: 94%;
  18 }
  19
  20 /* IE8 does not support :checked and therefor it does not support the hiding at all. */
  21 /* The selector ":not( :checked ) >" prevents that the useless brackets are shown on IE8. */
  22 :not( :checked ) > .toctogglespan:before {
  23         content: ' [';
  24 }
  25
  26 :not( :checked ) > .toctogglespan:after {
  27         content: ']';
  28 }
  29
  30 /* Make the label look like a link. */
  31 .toctogglelabel {
  32         cursor: pointer;
  33         color: #0645ad;
  34 }
  35
  36 .toctogglelabel:hover {
  37         text-decoration: underline;
  38 }
  39
  40 /* Show a focus ring around the label when focusing the invisible checkbox. */
  41 /* This simulates that the label is in focus. */
  42 .toctogglecheckbox:focus + .toctitle .toctogglelabel {
  43         text-decoration: underline;
  44         outline: dotted 1px; /* Firefox style for focus */
  45         outline: auto -webkit-focus-ring-color; /* Webkit style for focus */
  46 }
  47
  48 /* Change the text of the button based on the state of the checkbox. */
  49 .toctogglecheckbox:checked + .toctitle .toctogglelabel:after {
  50         content: '@{msg-showtoc}';
  51 }
  52
  53 .toctogglecheckbox:not( :checked ) + .toctitle .toctogglelabel:after {
  54         content: '@{msg-hidetoc}';
  55 }