Template:Cover: Difference between revisions

Latest revision as of 08:03, 7 June 2025

{{cover|The culprit is Gosho Aoyama}}

Results in

@@ Line 1: / Line 1: @@
-<includeonly><input type="checkbox" id="btnControl"/><label class="spoilerText" for="btnControl">{{{1}}}</label></includeonly>
+<includeonly>{{code
-{{css|
+|html=%3Cinput%20type%3D%22checkbox%22%20class%3D%22checkbox%22%20id%3D%22%7B%7B%7BUID%7D%7D%7D%22%2F%3E%3Clabel%20class%3D%22spoilerText%22%20for%3D%22%7B%7B%7BUID%7D%7D%7D%22%3E%7B%7B%7Bparam%7D%7D%7D%3C%2Flabel%3E
-#btnControl {
+|param={{{1}}}
+|css=
+   .checkbox{
          display: none;
-}
+    }
-.spoilerText {
+    .spoilerText {
-    height: 1em;
+        background: #909199;
-    background: #909199;
+        color: transparent;
-    color: #909199;
+        cursor: pointer;
-    display: inline;
+        display: inline;
-    text-align: center;
+        text-align: center;
-}
+    }
-.spoilerText:hover {
+    .spoilerText:hover {
-    background: #70717a;
+        background: #70717a;
-    color: #70717a;
+        transition: 0.15s;
-    transition: 0.1s;
+    }
-}
-#btnControl:checked + label {
+    .checkbox:not(:checked) + .spoilerText
-     background: #e3e3e5;
+    {
-    color: #000;
+        -webkit-user-select: none; /* Safari */
-    transition: 0.15s;
+        -ms-user-select: none; /* IE 10 and IE 11 */
-}
+         user-select: none; /* Standard syntax */
-}}
+    }
-<noinclude>{{Documentation}}
-This template permits the insertion of "spoiler information" with a concealed appearance by default; '''the user would have to hover their cursor on the chunk of covered text to uncover spoiler content'''.
+    .checkbox:checked + .spoilerText {
+        background: #e3e3e5;
-<pre>{{Cover|The culprit is Gosho Aoyama}}</pre>
+        color: #000;
+        transition: 0.15s;
+    }
+}}</includeonly><noinclude><pre>{{cover|The culprit is Gosho Aoyama}}</pre>
-Results in {{Cover|The culprit is Gosho Aoyama}}
+Results in {{cover|The culprit is Gosho Aoyama}}
 [[Category:Templates]]
 </noinclude>