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><span class="cover">{{{1}}}</span>
+<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
-.cover, .cover a, a .cover, .cover a.new {
+|param={{{1}}}
-  background-color: #e6e6e6;
+|css=
-  color: #e6e6e6;
+   .checkbox{
-  text-shadow: none;
+        display: none;
-}
+    }
-.cover:hover, .cover:active,
-.cover:hover .cover, .cover:active .cover {
+    .spoilerText {
-  color: black !important;
+        background: #909199;
-}
+        color: transparent;
-.cover:hover a, a:hover .cover,
+        cursor: pointer;
-.cover:active a, a:active .cover {
+        display: inline;
-  color: lightblue !important;
+        text-align: center;
-}
+    }
-.cover:hover .new, .cover .new:hover, .new:hover .cover,
-.cover:active .new, .cover .new:active, .new:active .cover {
+    .spoilerText:hover {
-  color: #BA0000 !important;
+        background: #70717a;
-}
+        transition: 0.15s;
-}}</includeonly><noinclude>{{Documentation}}
+    }
-This template permits the insertion of "spoiler information" with a concealed appearance by default; '''the user would have to select the designated chunk of text by highlighting the segment desired to see covered content''' - this works by setting the covered text in the same colour as the background, and as the user highlights it, the background would change, making the specified text visible.
+    .checkbox:not(:checked) + .spoilerText
+    {
+        -webkit-user-select: none; /* Safari */
+        -ms-user-select: none; /* IE 10 and IE 11 */
+         user-select: none; /* Standard syntax */
+    }
+    .checkbox:checked + .spoilerText {
+        background: #e3e3e5;
+        color: #000;
+        transition: 0.15s;
+    }
+}}</includeonly><noinclude><pre>{{cover|The culprit is Gosho Aoyama}}</pre>
-Despite the clunky method utilised to attain this effect, this mechanism is the most troubleless and uncomplicated one (as there is no need to modify CSS):
+Results in {{cover|The culprit is Gosho Aoyama}}
-<pre>{{Cover|The culprit is Gosho Aoyama}}</pre>
-Results in {{Cover|The culprit is Gosho Aoyama}}
 [[Category:Templates]]
 </noinclude>