User:Tsutomu25/sandbox/Cover4 - Revision history

Tsutomu25 at 15:47, 26 August 2025

2025-08-26T15:47:27Z

Tsutomu25: Credits to just eva

2025-08-26T15:44:44Z

Credits to just eva

Tsutomu25: Blanked the page

2025-08-26T13:02:32Z

Blanked the page

Tsutomu25 at 13:00, 26 August 2025

2025-08-26T13:00:13Z

Tsutomu25: Created page with "Goso {{code |css= .under { text-decoration: none !important; color: black !important; } .under:hover { text-decoration: none !imp..."

2025-08-26T12:36:49Z

Created page with "<span class="under">Goso</span> {{code |css= .under { text-decoration: none !important; color: black !important; } .under:hover { text-decoration: none !imp..."

New page

[[Gosho Aoyama|<span class="under">Goso</span>]]
{{code
|css=
.under
{
text-decoration: none !important;
color: black !important;
}

.under:hover
{
text-decoration: none !important;
color: black !important;
}

}}

@@ Line 27: / Line 27: @@
 }}
 </includeonly><noinclude>
-It hides the given input of spoiler text and reveals them when the user clicks on them. It takes two values. One is the name of the spoiler and another one is the actual spoiler text. Every time the template is used, every element has to have a unique id and class. Hence spoiler name is required.
+It hides the given input of spoiler text and reveals them when the user clicks on them. It takes just one value i.e., spoiler text.
 == Usage ==
 The following is a list of required parameters:
 <pre>
-{{User:Tsutomu25/sandbox/Cover2|<spoiler name>|<spoiler text>}}
+{{User:Tsutomu25/sandbox/Cover4|<spoiler text>}}
 </pre>
 == Limitations ==
 * When the template is used multiple times on the same page, only one spoiler can remain visible at a time. If the user reveals another spoiler, the previously opened one will automatically be hidden.
 * If the page is refreshed while a spoiler is revealed, that spoiler will remain open even after the page reloads.

← Older revision	Revision as of 15:44, 26 August 2025
Line 1:	Line 1:
	+	<includeonly><span class="text-cover" tabindex="0"><span class="text-cover-content">{{{1}}}</span></span>
	+	{{code
	+	\|css=
	+	.text-cover {
	+	background-color: #909199;
	+	transition: 0.3s;
	+	}

	+	.text-cover-content {
	+	opacity: 0;
	+	pointer-events: none;
	+	-webkit-user-select: none;
	+	-ms-user-select: none;
	+	user-select: none;
	+	}
	+
	+	.text-cover:hover {
	+	background-color: #70717a;
	+	}
	+	.text-cover:focus-within {
	+	background-color: #e3e3e5;
	+	}
	+	.text-cover:focus-within .text-cover-content {
	+	opacity: 1;
	+	pointer-events: auto;
	+	}
	+	}}
	+	</includeonly><noinclude>
	+	It hides the given input of spoiler text and reveals them when the user clicks on them. It takes two values. One is the name of the spoiler and another one is the actual spoiler text. Every time the template is used, every element has to have a unique id and class. Hence spoiler name is required.
	+
	+	== Usage ==
	+	The following is a list of required parameters:
	+	<pre>
	+	{{User:Tsutomu25/sandbox/Cover2\|<spoiler name>\|<spoiler text>}}
	+	</pre>
	+
	+	== Limitations ==
	+	* When the template is used multiple times on the same page, only one spoiler can remain visible at a time. If the user reveals another spoiler, the previously opened one will automatically be hidden.
	+	* The hyperlinks are not clickable when used inside the template.
	+	* If the page is refreshed while a spoiler is revealed, that spoiler will remain open even after the page reloads.
	+
	+	== Examples==
	+	Result: {{User:Tsutomu25/sandbox/Cover4\|The weapon is Knife}}
	+	Result: {{User:Tsutomu25/sandbox/Cover4\|The culprit wore {{font color\|#ffa500\|Orange}} clothes}}
	+	Result: {{User:Tsutomu25/sandbox/Cover4\|The culprit is [[Gosho Aoyama]] and his editor}}
	+
	+	[[Category:Templates]]
	+	</noinclude>

← Older revision		Revision as of 13:02, 26 August 2025
Line 1:		Line 1:
−	<includeonly><span class="tt-target">{{{1}}}<span class="tt-container tt-container-above" style="display: none;"><span class="tt-tooltip">{{{2}}}<span class="tt-chevron"></span></span></span></span>{{code
−	~~\|css=~~
−	~~/* Target word for the tooltip to focus on */~~
−	~~.tt-target {~~
−	~~position: relative;~~
−	~~display: inline-block;~~
−	~~border-bottom: 0.0625em dotted;~~
−	~~cursor: help;~~
−	}
−
−
−	~~/* CONTAINER CLASSES */~~
−	~~/* A so-called 'container' for the tooltip to work around in */~~
−	~~.tt-container {~~
−	~~position: absolute;~~
−	~~left: 50%;~~
−	~~min-height: 1em;~~
−	~~width: 170px;~~
−	~~padding: 10px 0 8px;~~
−	~~display: flex;~~
−	~~justify-content: center;~~
−	~~opacity: 0;~~
−	~~z-index: 999;~~
−	~~pointer-events: none;~~
−	~~user-select: none;~~
−	~~-webkit-user-select: none;~~
−	~~-ms-user-select: none;~~
−	~~transition: 0.3s ease 0.1s; /* This is used for the hover animations */~~
−	}
−
−	~~/* Container appear above target */~~
−	~~.tt-container-above {~~
−	~~bottom: calc(100% - 2px);~~
−	~~transform: translate(-50%, 3px);~~
−	}
−
−	~~/* Container appear below target */~~
−	~~.tt-container-below {~~
−	~~top: calc(100% - 2px);~~
−	~~transform: translate(-50%, -3px);~~
−	}
−	~~/* END OF CONTAINER CLASSES */~~
−
−
−	~~/* The TOOLTIP itself */~~
−	~~.tt-tooltip {~~
−	~~background: #fff;~~
−	~~border-radius: 4px;~~
−	~~filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));~~
−	~~padding: 6px 9px;~~
−	~~text-align: center;~~
−	~~overflow-wrap: anywhere;~~
−	}
−
−
−	~~/* CHEVRON CLASSES */~~
−	~~/* Shared class */~~
−	~~.tt-chevron {~~
−	~~position: absolute;~~
−	~~left: 50%;~~
−	~~transform: translateX(-50%);~~
−	~~width: 0;~~
−	~~height: 0;~~
−	~~border-style: solid;~~
−	~~z-index: 998;~~
−	}
−
−	~~/* When tooltip is above */~~
−	~~.tt-container-above .tt-chevron {~~
−	~~top: calc(100% - 3px);~~
−	~~border-width: 9px 9px 0 9px;~~
−	~~border-color: #fff transparent transparent transparent;~~
−	}
−
−	~~/* When tooltip is below */~~
−	~~.tt-container-below .tt-chevron {~~
−	~~bottom: calc(100% - 2px);~~
−	~~border-width: 0 9px 9px 9px;~~
−	~~border-color: transparent transparent #fff transparent;~~
−	}
−	~~/* END OF CHEVRON CLASSES */~~
−
−
−	~~/* HOVER ANIMATION CLASSES */~~
−	~~/* Tooltip fade-in */~~
−	~~.tt-target:hover .tt-container {~~
−	~~opacity: 1;~~
−	~~transform: translate(-50%, 0);~~
−	~~pointer-events: auto;~~
−	~~user-select: auto;~~
−	~~-webkit-user-select: auto;~~
−	~~-ms-user-select: auto;~~
−	}

−	~~/* Text bold on hover */~~
−	~~.tt-target:hover {~~
−	~~border-bottom: 0.0625em dashed;~~
−	}
−	~~/* END OF HOVER ANIMATION CLASSES */~~
−
−	~~}}</includeonly>~~

@@ Line 1: / Line 1: @@
-[[Gosho Aoyama|<span class="under">Goso</span>]]
+<includeonly><span class="tt-target">{{{1}}}<span class="tt-container tt-container-above" style="display: none;"><span class="tt-tooltip">{{{2}}}<span class="tt-chevron"></span></span></span></span>{{code
 |css=
-.under
+    /* Target word for the tooltip to focus on */
+    .tt-target {
-text-decoration: none !important;
+        position: relative;
-color: black !important;
+        display: inline-block;
+        border-bottom: 0.0625em dotted;
-.under:hover
+    /* Text bold on hover */
+    .tt-target:hover {
-text-decoration: none !important;
+        border-bottom: 0.0625em dashed;
-color: black !important;
+    /* END OF HOVER ANIMATION CLASSES */
-−
-}}
+}}</includeonly>