TOC: Add z-index: -1 to hidden checkbox

The hidden checkbox is not visible but still clickable and changes the
cursor. The z-index: -1 prevent this.

Also add comments to explain the reason for each declaration.

This change is a follow-up to 68527cf47935a0350d3f0a153bd06cbb98062ec8.

Change-Id: Ia66f4fb250d1685fe5bb0089b789b36d9916a5d5

diff --git a/resources/src/mediawiki.toc.styles/screen.less b/resources/src/mediawiki.toc.styles/screen.less
index 16b2591..ff41b5e 100644 (file)
--- a/resources/src/mediawiki.toc.styles/screen.less
+++ b/resources/src/mediawiki.toc.styles/screen.less
@@ -1,11 +1,16 @@
 /* This style adds a toggle button with internationalized message for the TOC. */
 
-/* When the browser supports :checked then overwrite the style="display:none" and make the /*
+/* When the browser supports :checked then overwrite the style="display:none" and make the */
 /* checkbox invisible on another way to allow to focus the checkbox with keyboard. */
 :not( :checked ) > .toctogglecheckbox {
+       // Make the checkbox visible to allow it to focus with keyboard.
        display: inline !important; /* stylelint-disable-line declaration-no-important */
+       // Remove any size of the checkbox.
        position: absolute;
+       // Make the checkbox invisible.
        opacity: 0;
+       // Prevent that the checkbox is clickable and changes the cursor.
+       z-index: -1;
 }
 
 .toctogglespan {