Template:Color label: Difference between revisions

Revision as of 14:41, 9 August 2024

Template documentation

Uses template styles

This template uses template styles found in:

Hex color (gold): #FFD700

Predefined color (red): red

RGB color (orange) with a custom name: #FFD700

blue

Produces a little square with given color and a color code label. Can also add a custom label.

Template parameters[Edit template data]
This template prefers inline formatting of parameters.
Parameter		Description	Type	Status
Color	`1`	A valid CSS color. Example red	Line	required
Label	`2`	A custom label. Example Cool green	Line	suggested

@@ Line 1: / Line 1: @@
 <includeonly><!--
---><templatestyles src="Color label/styles.css" /><!--
+--><!--<templatestyles src="Color label/styles.css" />--><!--
---><span class="color-label">
+--><span class="color-label" style="
-<span class="color-label-label" style="background-color: {{{2}}};"></span>
+    display: inline-block;
-<span class="color-label-color-square" style="background-color: {{{1}}};"></span>
+    border: 1px solid var(--border-color);
-<span class="color-label-code">{{{1}}}</span>
+    padding: 0px 3px 2px 4px;
+    border-radius: 0.2rem;
+    margin: -1px 0px -3px 0px;
+    text-wrap: nowrap;
+">
+<span class="color-label-label" style="
+    background-color: {{{2}}};
+    /* offset from the color rect */
+    margin-right: 0.3rem;
+"></span>
+<span class="color-label-color-square" style="
+    background-color: {{{1}}};
+    display: inline-block;
+    vertical-align: middle;
+    width: 1em;
+    height: 1em;
+    border-radius: 2px;
+    margin-right: 0.15rem;
+"></span>
+<span class="color-label-code" style="
+    font-family: monospace;
+">{{{1}}}</span>
 </span></includeonly><noinclude>
 {{docs|bb=