Template:Box: Difference between revisions

(7 intermediate revisions by 2 users not shown)

Line 1:

{{#if:{{{icon|}}}|<span style="opacity: 0.8; display: flex; align-items: center; margin-right: 0.5em; line-height: ~~50px~~;">[[File:{{{icon}}}|50px|left|link=|alt=]]</span> }}

<div style="color: {{{title-color|~~#000000~~}}}; font-weight: bold; line-height: 50px; ~~{{#if:{{{center}}}|text-align: center;}}~~"><big>{{{title}}}</big></div>

{{#if:{{{icon|}}}|<span style="opacity: 0.8; display: flex; align-items: center; margin-right: 0.5em; line-height: 50pxm;">[[File:{{{icon}}}|50px|left|link=|alt=]]</span> }}

~~{{#if:{{{trailing-icon|}}}|<span style="opacity: 0.8; display: flex; align-items: center; margin-right: 0.5em; line-height: 50px;">[[File:{{{trailing-icon}}}|50px|left|link=|alt=]]</span> }}~~

<div style="color: {{{title-color|var(--color-base)}}}; font-weight: bold; line-height: 50px;"><big>{{{title}}}</big></div>

{{#if:{{{link|}}}|<div style="float: right; font-size: 0.7em;">[[{{{link}}}|<span style="color: {{{link-color|{{{title-color|~~#000000~~}}}}}};">{{{Link-text|{{{link-text|Link}}}}}}</span>]]</div>}}

{{#if:{{{link|}}}|<div style="float: right; font-size: 0.7em;">[[{{{link}}}|<span style="color: {{{link-color|{{{title-color|var(--color-progressive)}}}}}};">{{{Link-text|{{{link-text|Link}}}}}}</span>]]</div>}}

{{#if:{{{trailing-icon|}}}|<span style="opacity: 0.8; display: flex; align-items: center; margin-left: 0.5em; line-height: 50px;">[[File:{{{trailing-icon}}}|50px|left|link=|alt=]]</span> }}

</div>

{{{content}}}{{clr}}

</div>

Line 46:

Line 49:

"title-color": {

"label": "Title color",

"description": "~~Hexadecimal~~ color ~~code~~ of the title text.",

"description": "CSS color of the title text.",

"example": "#339966",

"type": "string",

"default": "~~#FFFFFF~~"

"default": "var(--color-base)"

},

"style": {

Line 58:

Line 61:

"link-color": {

"label": "Link color",

"description": "~~Hexadecimal~~ color ~~code~~ of the 'Edit' link.",

"description": "CSS color of the 'Edit' link.",

"example": "#339966",

"type": "string",

"default": "~~#999999~~"

"default": "var(--color-progressive)"

},

"background-title-color": {

"label": "Title background color",

"description": "~~Hexadecimal~~ color ~~code~~ of the title bar background.",

"description": "CSS color of the title bar background.",

"example": "#447FF5",

"type": "string",

"default": "~~#339966~~",

"default": "var(--background-color-base)",

"suggested": true

},

"background-content-color": {

"label": "Content background color",

"description": "~~Hexadecimal~~ color ~~code~~ of the box content background.",

"description": "CSS color of the box content background.",

"example": "#339966",

"type": "string",

"default": "~~#F8F9FA~~"

"default": "var(--background-color-base)"

},

"Link-text": {

Line 103:

Line 106:

"description": "An icon to display after, rather than before, the title.",

"type": "wiki-file-name"

},

"class": {

"label": "Class",

"description": "CSS classes to apply to the box.",

"type": "string",

"suggestedvalues": [

"ambox",

"hatnote",

"dablink",

"side-box"

]

}

},

Line 122:

Line 136:

"title-color-hover",

"flex",

"center"

"center",

"class"

],

"format": "block"

@@ Line 1: / Line 1: @@
-<div style="box-shadow: 0 0 0.2em #999999; border-radius: 0.2em; margin: 0.5em 0.5em 1em 0.5em; background: {{{background-content-color|#f8f9fa}}}; {{{style|}}};">
+<div class="{{{class|}}}" style="display: block; box-shadow: 0 0 0.2em #999999; border-radius: 0.2em; margin: 0.5em 0.5em 1em 0.5em; background: {{{background-content-color|var(--background-color-base)}}}; {{{style|}}};">
-   <!-- CSS for icon and background -->
+   <!-- Title Box -->
-   <div style="background: {{{background-title-color|#eaecf0}}}; border-radius: 0.2em 0.2em 0 0; padding: 0.5em 1em 0.5em 1em;; display: flex; align-items: center;">
+   <div style="background: {{{background-title-color|var(--background-color-neutral)}}}; border-radius: 0.2em 0.2em 0 0; padding: 0.5em 1em 0.5em 1em; display: flex; align-items: center; {{#if:{{{center|}}}|justify-content: space-between;}}">
-     {{#if:{{{icon|}}}|<span style="opacity: 0.8; display: flex; align-items: center; margin-right: 0.5em; line-height: 50px;">[[File:{{{icon}}}|50px|left|link=|alt=]]</span>&#32;}}
+    <!-- Icon -->
-     <div style="color: {{{title-color|#000000}}}; font-weight: bold; line-height: 50px; {{#if:{{{center}}}|text-align: center;}}"><big>{{{title}}}</big></div>
+     {{#if:{{{icon|}}}|<span style="opacity: 0.8; display: flex; align-items: center; margin-right: 0.5em; line-height: 50pxm;">[[File:{{{icon}}}|50px|left|link=|alt=]]</span>&#32;}}
-    {{#if:{{{trailing-icon|}}}|<span style="opacity: 0.8; display: flex; align-items: center; margin-right: 0.5em; line-height: 50px;">[[File:{{{trailing-icon}}}|50px|left|link=|alt=]]</span>&#32;}}
+    <!-- Title -->
-     <!-- Link div -->
+     <div style="color: {{{title-color|var(--color-base)}}}; font-weight: bold; line-height: 50px;"><big>{{{title}}}</big></div>
-     {{#if:{{{link|}}}|<div style="float: right; font-size: 0.7em;">[[{{{link}}}|<span style="color: {{{link-color|{{{title-color|#000000}}}}}};">{{{Link-text|{{{link-text|Link}}}}}}</span>]]</div>}}
+     <!-- Link -->
+     {{#if:{{{link|}}}|<div style="float: right; font-size: 0.7em;">[[{{{link}}}|<span style="color: {{{link-color|{{{title-color|var(--color-progressive)}}}}}};">{{{Link-text|{{{link-text|Link}}}}}}</span>]]</div>}}
+    <!-- Trailing Icon -->
+    {{#if:{{{trailing-icon|}}}|<span style="opacity: 0.8; display: flex; align-items: center; margin-left: 0.5em; line-height: 50px;">[[File:{{{trailing-icon}}}|50px|left|link=|alt=]]</span>&#32;}}
    </div>
-   <!-- CSS for the content -->
+   <!-- Content Box -->
-   <div style="padding: 1em; padding-left: 1em;">
+   <div style="padding: 1em; padding-left: 1em; color: var(--color-base);">
 <!---->{{{content}}}{{clr}}
    </div>
@@ Line 46: / Line 49: @@
 		"title-color": {
 			"label": "Title color",
-			"description": "Hexadecimal color code of the title text.",
+			"description": "CSS color of the title text.",
 			"example": "#339966",
 			"type": "string",
-			"default": "#FFFFFF"
+			"default": "var(--color-base)"
 		},
 		"style": {
@@ Line 58: / Line 61: @@
 		"link-color": {
 			"label": "Link color",
-			"description": "Hexadecimal color code of the 'Edit' link.",
+			"description": "CSS color of the 'Edit' link.",
 			"example": "#339966",
 			"type": "string",
-			"default": "#999999"
+			"default": "var(--color-progressive)"
 		},
 		"background-title-color": {
 			"label": "Title background color",
-			"description": "Hexadecimal color code of the title bar background.",
+			"description": "CSS color of the title bar background.",
 			"example": "#447FF5",
 			"type": "string",
-			"default": "#339966",
+			"default": "var(--background-color-base)",
 			"suggested": true
 		},
 		"background-content-color": {
 			"label": "Content background color",
-			"description": "Hexadecimal color code of the box content background.",
+			"description": "CSS color of the box content background.",
 			"example": "#339966",
 			"type": "string",
-			"default": "#F8F9FA"
+			"default": "var(--background-color-base)"
 		},
 		"Link-text": {
@@ Line 103: / Line 106: @@
 			"description": "An icon to display after, rather than before, the title.",
 			"type": "wiki-file-name"
+		},
+		"class": {
+			"label": "Class",
+			"description": "CSS classes to apply to the box.",
+			"type": "string",
+			"suggestedvalues": [
+				"ambox",
+				"hatnote",
+				"dablink",
+				"side-box"
+			]
 		}
 	},
@@ Line 122: / Line 136: @@
 		"title-color-hover",
 		"flex",
-		"center"
+		"center",
+		"class"
 	],
 	"format": "block"