[GitHub/WoltLab/WCF.git] / com.woltlab.wcf / templates / email_html.tpl

<html>
	<head>
		{* Apple Mail dark mode fix, see https://stackoverflow.com/a/58795882 *}
		<meta name="color-scheme" content="only">
		<style type="text/css">
		html, body, h1, h2, h3 {
			padding: 0;
			margin: 0;
		}

		body {
			background-color: {$style->getVariable('wcfContentBackground', true)};
			color: {$style->getVariable('wcfContentText', true)};
		}

		body, body * {
			font-family: {@$style->getEmailFontFamily()};
			font-size: {$style->getVariable('wcfFontSizeDefault')};
		}

		a {
			color: {$style->getVariable('wcfContentLink', true)};
			text-decoration: none;
		}

		p, .paragraphMargin {
			margin-top: 1em;
			margin-bottom: 1em;
		}

		td {
			vertical-align: top;
		}

		{* see email_paddingHelper.tpl *}
		table.paddingHelper.block {
			width: 100%;
		}

		.content {
			padding: 40px 40px 60px;
		}
		.header, .footer {
			padding: 20px 40px;
		}
		.header {
			background-color: {$style->getVariable('wcfHeaderBackground', true)};
			color: {$style->getVariable('wcfHeaderText', true)};
		}
		.footer {
			background-color: {$style->getVariable('wcfFooterBackground', true)};
			color: {$style->getVariable('wcfFooterText', true)};
		}
		.footer a {
			color: {$style->getVariable('wcfFooterLink', true)};
		}
		h1 {
			font-weight: 300;
			line-height: 1.05;
			font-size: {$style->getVariable('wcfFontSizeTitle')};
		}
		h2 {
			font-weight: 400;
			line-height: 1.28;
			color: {$style->getVariable('wcfContentHeadlineText')};
			font-size: {$style->getVariable('wcfFontSizeSection')};
		}
		small {
			font-size: {$style->getVariable('wcfFontSizeSmall')};
			font-weight: 300;
		}

		.largeMarginTop {
			margin-top: 40px;
		}

		{* Buttons *}
		td.button {
			background-color: {$style->getVariable('wcfButtonPrimaryBackground', true)};
			border-radius: 2px;
			padding: 6px 12px;
		}
		td.button a {
			color: {$style->getVariable('wcfButtonPrimaryText', true)};
		}

		.box128 {
			border-top: 1px solid {$style->getVariable('wcfContentBorder', true)};
			border-bottom: 1px solid {$style->getVariable('wcfContentBorder', true)};
			padding: 20px;
		}

		.box128 td.boxContent {
			padding-left: 20px;
		}

		.box64 {
			border-top: 1px solid {$style->getVariable('wcfContentBorder', true)};
			border-bottom: 1px solid {$style->getVariable('wcfContentBorder', true)};
			padding: 15px;
		}

		.box64 td.boxContent {
			padding-left: 15px;
		}

		.box48 {
			border-top: 1px solid {$style->getVariable('wcfContentBorder', true)};
			border-bottom: 1px solid {$style->getVariable('wcfContentBorder', true)};
			padding: 12px;
		}

		.box48 td.boxContent {
			padding-left: 12px;
		}

		.box32 {
			border-top: 1px solid {$style->getVariable('wcfContentBorder', true)};
			border-bottom: 1px solid {$style->getVariable('wcfContentBorder', true)};
			padding: 10px;
		}

		.box32 td.boxContent {
			padding-left: 10px;
		}

		.containerHeadline h3 {
			margin: 0;
			padding: 0;
			font-weight: 400;
			line-height: 1.28;
			font-size: {$style->getVariable('wcfFontSizeHeadline')};
		}

		.containerHeadline h3 a {
			font-size: {$style->getVariable('wcfFontSizeHeadline')};
		}

		.userAvatarImage {
			background-color: #fff;
			border-radius: 50%;
		}
		</style>
	</head>
	<body>
	{capture assign='header'}
	<h1>{PAGE_TITLE|phrase}</h1>
	{/capture}
	{include file='email_paddingHelper' block=true class='header' content=$header sandbox=true}

	{if $beforeContent|isset}{@$beforeContent}{/if}

	{include file='email_paddingHelper' block=true class='content' content=$content sandbox=true}

	{if $afterContent|isset}{@$afterContent}{/if}

	{capture assign='footer'}
	{hascontent}
	<span style="font-size: 0;">-- <br></span>
	{content}
	{if MAIL_SIGNATURE_HTML|phrase}
	{@MAIL_SIGNATURE_HTML|phrase}
	{else}
	{@MAIL_SIGNATURE|phrase|newlineToBreak}
	{/if}
	{/content}{/hascontent}{/capture}
	{include file='email_paddingHelper' block=true class='footer' content=$footer sandbox=true}

	<table>{* Do not remove: This table is needed by certain less able email clients to properly support background colors. Don't ask. *}</table>
	</body>
</html>
Commit	Line	Data
4f0caad2	1	<html>
d5ce28e2	2	<head>
d8a2b62d	3	{* Apple Mail dark mode fix, see https://stackoverflow.com/a/58795882 *}
d8a2b62d	4	<meta name="color-scheme" content="only">
d5ce28e2	5	<style type="text/css">
1ad7bb72	6	html, body, h1, h2, h3 {
d5ce28e2 TD	7	padding: 0;
d5ce28e2 TD	8	margin: 0;
d5ce28e2	9	}
d8a2b62d	10
d5ce28e2	11	body {
d5ce28e2	12	background-color: {$style->getVariable('wcfContentBackground', true)};
c9f5f17c	13	color: {$style->getVariable('wcfContentText', true)};
d5ce28e2	14	}
d8a2b62d	15
1ac55ad4	16	body, body * {
b6e1cf0f	17	font-family: {@$style->getEmailFontFamily()};
1ac55ad4 TD	18	font-size: {$style->getVariable('wcfFontSizeDefault')};
1ac55ad4 TD	19	}
d8a2b62d	20
c8855bb4 TD	21	a {
	22	color: {$style->getVariable('wcfContentLink', true)};
	23	text-decoration: none;
	24	}
d8a2b62d	25
713d7042 TD	26	p, .paragraphMargin {
	27	margin-top: 1em;
	28	margin-bottom: 1em;
	29	}
d8a2b62d	30
3c5d2b85 TD	31	td {
	32	vertical-align: top;
	33	}
d8a2b62d	34
c8855bb4 TD	35	{* see email_paddingHelper.tpl *}
	36	table.paddingHelper.block {
	37	width: 100%;
	38	}
d8a2b62d	39
d5ce28e2	40	.content {
885243e1 TD	41	padding: 40px 40px 60px;
885243e1 TD	42	}
219eb1ae TD	43	.header, .footer {
	44	padding: 20px 40px;
	45	}
885243e1 TD	46	.header {
	47	background-color: {$style->getVariable('wcfHeaderBackground', true)};
	48	color: {$style->getVariable('wcfHeaderText', true)};
d5ce28e2 TD	49	}
	50	.footer {
	51	background-color: {$style->getVariable('wcfFooterBackground', true)};
	52	color: {$style->getVariable('wcfFooterText', true)};
d5ce28e2	53	}
69390fbb	54	.footer a {
c9f5f17c	55	color: {$style->getVariable('wcfFooterLink', true)};
69390fbb	56	}
d5ce28e2 TD	57	h1 {
	58	font-weight: 300;
	59	line-height: 1.05;
	60	font-size: {$style->getVariable('wcfFontSizeTitle')};
219eb1ae TD	61	}
	62	h2 {
	63	font-weight: 400;
	64	line-height: 1.28;
d5ce28e2	65	color: {$style->getVariable('wcfContentHeadlineText')};
219eb1ae	66	font-size: {$style->getVariable('wcfFontSizeSection')};
d5ce28e2	67	}
852a7f7f TD	68	small {
	69	font-size: {$style->getVariable('wcfFontSizeSmall')};
	70	font-weight: 300;
	71	}
d8a2b62d	72
b16a5be6 TD	73	.largeMarginTop {
	74	margin-top: 40px;
	75	}
d8a2b62d	76
c8855bb4 TD	77	{* Buttons *}
c8855bb4 TD	78	td.button {
d5ce28e2	79	background-color: {$style->getVariable('wcfButtonPrimaryBackground', true)};
d5ce28e2 TD	80	border-radius: 2px;
	81	padding: 6px 12px;
	82	}
c8855bb4 TD	83	td.button a {
	84	color: {$style->getVariable('wcfButtonPrimaryText', true)};
	85	}
d8a2b62d	86
3c5d2b85 TD	87	.box128 {
	88	border-top: 1px solid {$style->getVariable('wcfContentBorder', true)};
	89	border-bottom: 1px solid {$style->getVariable('wcfContentBorder', true)};
	90	padding: 20px;
	91	}
d8a2b62d	92
852a7f7f TD	93	.box128 td.boxContent {
	94	padding-left: 20px;
	95	}
d8a2b62d	96
b16a5be6 TD	97	.box64 {
	98	border-top: 1px solid {$style->getVariable('wcfContentBorder', true)};
	99	border-bottom: 1px solid {$style->getVariable('wcfContentBorder', true)};
	100	padding: 15px;
	101	}
d8a2b62d	102
b16a5be6 TD	103	.box64 td.boxContent {
	104	padding-left: 15px;
	105	}
d8a2b62d	106
541bbe3a TD	107	.box48 {
	108	border-top: 1px solid {$style->getVariable('wcfContentBorder', true)};
	109	border-bottom: 1px solid {$style->getVariable('wcfContentBorder', true)};
	110	padding: 12px;
	111	}
d8a2b62d	112
541bbe3a TD	113	.box48 td.boxContent {
	114	padding-left: 12px;
	115	}
d8a2b62d	116
541bbe3a TD	117	.box32 {
	118	border-top: 1px solid {$style->getVariable('wcfContentBorder', true)};
	119	border-bottom: 1px solid {$style->getVariable('wcfContentBorder', true)};
	120	padding: 10px;
	121	}
d8a2b62d	122
541bbe3a TD	123	.box32 td.boxContent {
	124	padding-left: 10px;
	125	}
d8a2b62d	126
3c5d2b85 TD	127	.containerHeadline h3 {
	128	margin: 0;
	129	padding: 0;
852a7f7f	130	font-weight: 400;
1ad7bb72 TD	131	line-height: 1.28;
	132	font-size: {$style->getVariable('wcfFontSizeHeadline')};
	133	}
	134
	135	.containerHeadline h3 a {
	136	font-size: {$style->getVariable('wcfFontSizeHeadline')};
3c5d2b85	137	}
d8a2b62d	138
4d1c1381 TD	139	.userAvatarImage {
	140	background-color: #fff;
	141	border-radius: 50%;
	142	}
d5ce28e2 TD	143	</style>
d5ce28e2 TD	144	</head>
4f0caad2	145	<body>
885243e1	146	{capture assign='header'}
af708b84	147	<h1>{PAGE_TITLE\|phrase}</h1>
885243e1 TD	148	{/capture}
885243e1 TD	149	{include file='email_paddingHelper' block=true class='header' content=$header sandbox=true}
d8a2b62d	150
69fa057b	151	{if $beforeContent\|isset}{@$beforeContent}{/if}
d8a2b62d	152
885243e1	153	{include file='email_paddingHelper' block=true class='content' content=$content sandbox=true}
d8a2b62d	154
69fa057b	155	{if $afterContent\|isset}{@$afterContent}{/if}
d8a2b62d	156
c8855bb4	157	{capture assign='footer'}
4f0caad2	158	{hascontent}
71a2177b	159	<span style="font-size: 0;">-- <br></span>
5a6e0e75	160	{content}
dc543f1d MW	161	{if MAIL_SIGNATURE_HTML\|phrase}
dc543f1d MW	162	{@MAIL_SIGNATURE_HTML\|phrase}
5a6e0e75	163	{else}
dc543f1d	164	{@MAIL_SIGNATURE\|phrase\|newlineToBreak}
5a6e0e75 TD	165	{/if}
5a6e0e75 TD	166	{/content}{/hascontent}{/capture}
c8855bb4	167	{include file='email_paddingHelper' block=true class='footer' content=$footer sandbox=true}
d8a2b62d	168
4f0caad2 TD	169	<table>{* Do not remove: This table is needed by certain less able email clients to properly support background colors. Don't ask. *}</table>
	170	</body>
	171	</html>