Template:Cover: Difference between revisions

Revision as of 19:53, 1 June 2025

Template documentation

Editors can experiment in this template's sandbox (edit \| diff) and testcases (create) pages. Please add categories to the /doc subpage. Subpages of this template.

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.

{{Cover|The culprit is Gosho Aoyama}}

Results in Template:Css<input type="checkbox" id="btnControl"/><label class="spoilerText" for="btnControl">The culprit is Gosho Aoyama</label>

@@ Line 1: / Line 1: @@
-<includeonly><span class="cover">{{{1}}}</span></includeonly>
 {{css|
-.cover, .cover a, a .cover, .cover a.new {
+#btnControl {
-  background-color: #e6e6e6;
+        display: none;
-  color: #e6e6e6;
-  text-shadow: none;
-  transition: color 0.2s linear, background-color 0.2s linear;
 }
-.cover:hover, .cover:active,
-.cover:hover .cover, .cover:active .cover {
+.spoilerText {
-  color: black !important;
+    height: 1em;
-  background-color: transparent !important;
+    background: #909199;
+    color: #909199;
+    display: inline;
+    text-align: center;
 }
-.cover:hover a, a:hover .cover,
-.cover:active a, a:active .cover {
+.spoilerText:hover {
-  color: blue !important;
+    background: #70717a;
-  background-color: transparent !important;
+    color: #70717a;
+    transition: 0.1s;
 }
-.cover:hover .new, .cover .new:hover, .new:hover .cover,
-.cover:active .new, .cover .new:active, .new:active .cover {
+#btnControl:checked + label {
-  color: #BA0000 !important;
+    background: #e3e3e5;
-  background-color: transparent !important;
+    color: #000;
+    transition: 0.15s;
 }
-}}<noinclude>{{Documentation}}
+}}<includeonly><input type="checkbox" id="btnControl"/><label class="spoilerText" for="btnControl">{{{1}}}</label></includeonly>
+<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'''.