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

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