messages: Load our fonts from web server for HTML emails

[ipfire.org.git] / src / templates / messages / main.scss

@import "../../scss/variables";

@import "../../bootstrap/scss/functions";
@import "../../bootstrap/scss/variables";

@import "../../scss/_fonts.scss";

// Use font sizes in px
$font-size-base:            18px;
$small-font-size:           12px;

$h1-font-size:              48px;
$h2-font-size:				40px;
$h3-font-size:				36px;
$h4-font-size:				32px;
$headings-margin-bottom:	20px;

$paragraph-margin-bottom:	14px;

// Resets
img {
	border: none;
	-ms-interpolation-mode: bicubic;
	max-width: 100%;
}

body {
	background-color: $body-bg;
	font-family: $font-family-sans-serif;
	-webkit-font-smoothing: antialiased;
	font-size: $font-size-base;
	line-height: $line-height-base;
	margin: 0;
	padding: 0;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

table {
	border-collapse: separate;
	mso-table-lspace: 0pt;
	mso-table-rspace: 0pt;
	width: 100%;

	td {
		font-family: $font-family-sans-serif;
		font-size: $font-size-base;
		vertical-align: top;
	}
}

// Basic Styling

.body {
	background-color: $body-bg;
	width: 100%;
}

/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
	display: block;
	margin: 0 auto !important;

	// Center the container
	max-width: 580px;
	padding: 10px;
	width: 580px;
}

/* This should also be a block element, so that it will fill 100% of the .container */
.content {
	box-sizing: border-box;
	display: block;
	margin: 0 auto;
	max-width: 580px;
	padding: 10px;
}

// Headers, Footers, Containers

.main {
	background: $white;
	color: $dark;
	border-radius: $card-border-radius;
	width: 100%;

	.logo {
		text-align: center;

		img {
			height: 196px;
			padding: 24px 0 12px 0;
		}
	}
}

.wrapper {
	box-sizing: border-box;
	padding: 20px;
}

.content-block {
	padding-bottom: 10px;
	padding-top: 10px;
}

.footer {
	clear: both;
	margin-top: 10px;
	text-align: center;
	width: 100%;

	td, p, span, a {
		color: $light;
		font-size: $small-font-size;
		text-align: center;
	}
}

// Typography

h1, h2, h3, h4 {
	color: $dark;
	font-family: $font-family-sans-serif;
	font-weight: $headings-font-weight;
	line-height: $headings-line-height;
	margin: 0;
	margin-bottom: $headings-margin-bottom;
}

h1 {
	font-size: $h1-font-size;
	text-align: center;
	text-transform: capitalize;
}

p, ul, ol {
	font-family: $font-family-sans-serif;
	font-size: $font-size-base;
	font-weight: normal;
	margin: 0;
	margin-bottom: $paragraph-margin-bottom;
}

a {
	color: $link-color;
	text-decoration: underline;
}

// Buttons

.btn {
	box-sizing: border-box;
	width: 100%;

	> tbody > tr > td {
		padding-bottom: 15px;
	}

	table {
		width: 100%;

		td {
			background-color: #ffffff;
			border-radius: $btn-border-radius;
			text-align: center;
		}
	}

	a {
		width: 100%;
		background-color: #ffffff;
		border: 1px solid $link-color;
		border-radius: $btn-border-radius;
		box-sizing: border-box;
		color: $link-color;
		cursor: pointer;
		display: inline-block;
		font-size: $font-size-base;
		font-weight: $btn-font-weight;
		margin: 0;
		padding: $btn-padding-y $btn-padding-x;
		text-decoration: none;
		text-transform: uppercase;
	}
}

.btn-primary {
	table td {
		background-color: $link-color;
	}

	a {
		background-color: $link-color;
		border-color: $link-color;
		color: #ffffff;
	}
}

// Other

.align-center {
	text-align: center;
}

.align-right {
	text-align: right;
}

.align-left {
	text-align: left;
}

.clear {
	clear: both;
}

.mt-0 {
	margin-top: 0;
}

.mb-0 {
	margin-bottom: 0;
}

.preheader {
	color: transparent;
	display: none;
	height: 0;
	max-height: 0;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	mso-hide: all;
	visibility: hidden;
	width: 0;
}

.powered-by a {
	text-decoration: none;
}

hr {
	border: 0;
	border-bottom: $hr-border-width solid $hr-border-color;
	margin: 20px 0;
}

// Make this all mobile-friendly

@media only screen and (max-width: 620px) {
	table[class=body] {
		h1 {
			font-size: $h1-font-size !important;
			margin-bottom: $headings-margin-bottom !important;
		}

		p, ul, ol, td, span, a {
			font-size: $font-size-base !important;
		}

		.wrapper, .article {
			padding: 10px !important;
		}

		.content {
			padding: 0 !important;
		}

		.container {
			padding: 0 !important;
			width: 100% !important;
		}

		.main {
			border-left-width: 0 !important;
			border-radius: 0 !important;
			border-right-width: 0 !important;
		}

		.img-responsive {
			height: auto !important;
			max-width: 100% !important;
			width: auto !important;
		}
	}
}

// Hack for Dark Mode

@media (prefers-dark-interface) {
	.body {
		background-color: none;
	}

	.main {
		background: $white !important;
		color: $dark !important;
	}
}

// Hack for Outlook

@media all {
	.ExternalClass {
		width: 100%;

		&, p, span, font, td, div {
			line-height: 100%;
		}
	}

	.apple-link a {
		color: inherit !important;
		font-family: inherit !important;
		font-size: inherit !important;
		font-weight: inherit !important;
		line-height: inherit !important;
		text-decoration: none !important;
	}

	#MessageViewBody a {
		color: inherit;
		text-decoration: none;
		font-size: inherit;
		font-family: inherit;
		font-weight: inherit;
		line-height: inherit;
	}

	.btn-primary {
		table td:hover {
			background-color: $link-hover-color !important;
		}

		a:hover {
			background-color: $link-hover-color !important;
			border-color: $link-hover-color !important;
		}
	}
}