Eos/eosweb/core/templates/email/base.scss

{#
	Eos - Verifiable elections
	Copyright © 2017-18  RunasSudo (Yingtong Li)
	
	This file adapted from https://github.com/leemunroe/responsive-html-email-template, licensed under the MIT licence.
	
	This program is free software: you can redistribute it and/or modify
	it under the terms of the GNU Affero General Public License as published by
	the Free Software Foundation, either version 3 of the License, or
	(at your option) any later version.
	
	This program is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
	GNU Affero General Public License for more details.
	
	You should have received a copy of the GNU Affero General Public License
	along with this program.  If not, see <http://www.gnu.org/licenses/>.
#}

/* -------------------------------------
    GLOBAL RESETS
------------------------------------- */

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

body {
	background-color: #f6f6f6;
	font-family: sans-serif;
	-webkit-font-smoothing: antialiased;
	font-size: 14px;
	line-height: 1.4;
	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: sans-serif;
		font-size: 14px;
		vertical-align: top;
	}
}

/* -------------------------------------
    BODY & CONTAINER
------------------------------------- */

.body {
	background-color: #f6f6f6;
	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;
	/* makes it centered */
	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;
}

/* -------------------------------------
    HEADER, FOOTER, MAIN
------------------------------------- */

.main {
	background: #ffffff;
	border-radius: 3px;
	width: 100%;
}

.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%;
}

.footer td, .footer p, .footer span, .footer a {
	color: #999999;
	font-size: 12px;
	text-align: center;
}

/* -------------------------------------
		TYPOGRAPHY
------------------------------------- */

h1, h2, h3, h4 {
	color: #000000;
	font-family: sans-serif;
	font-weight: 400;
	line-height: 1.4;
	margin: 0;
	Margin-bottom: 30px;
}

h1 {
	font-size: 35px;
	font-weight: 300;
	text-align: center;
	text-transform: capitalize;
}

p, ul, ol {
	font-family: sans-serif;
	font-size: 14px;
	font-weight: normal;
	margin: 0;
	Margin-bottom: 15px;
	
	li {
		list-style-position: inside;
		margin-left: 5px;
	}
}

a {
	color: #3498db;
	text-decoration: underline;
}

/* -------------------------------------
    BUTTONS
------------------------------------- */

.btn {
	box-sizing: border-box;
	width: 100%;
	
	& > tbody > tr > td {
		padding-bottom: 15px;
	}
	
	table {
		width: auto;
		
		td {
			background-color: #ffffff;
			border-radius: 5px;
			text-align: center;
		}
	}
	
	a {
		background-color: #ffffff;
		border: solid 1px #3498db;
		border-radius: 5px;
		box-sizing: border-box;
		color: #3498db;
		cursor: pointer;
		display: inline-block;
		font-size: 14px;
		font-weight: bold;
		margin: 0;
		padding: 12px 25px;
		text-decoration: none;
		text-transform: capitalize;
	}
}

.btn-primary {
	table td {
		background-color: #3498db;
	}
	
	a {
		background-color: #3498db;
		border-color: #3498db;
		color: #ffffff;
	}
}

/* -------------------------------------
    OTHER STYLES THAT MIGHT BE USEFUL
------------------------------------- */

.last {
	margin-bottom: 0;
}
.first {
	margin-top: 0;
}

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

.clear {
	clear: both;
}

.mt0 {
	margin-top: 0;
}
.mb0 {
	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: 1px solid #f6f6f6;
	Margin: 20px 0;
}

/* -------------------------------------
    RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */

@media only screen and (max-width: 620px) {
	table[class=body] {
		h1 {
			font-size: 28px !important;
			margin-bottom: 10px !important;
		}
		
		p, ul, ol, td, span, a {
			font-size: 16px !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;
		}
		
		.btn {
			table {
				width: 100% !important;
			}
			
			a {
				width: 100% !important;
			}
			
			.img-responsive {
				height: auto !important;
				max-width: 100% !important;
				width: auto !important;
			}
		}
	}
}

/* -------------------------------------
    PRESERVE THESE STYLES IN THE HEAD
------------------------------------- */

@media all {
	.ExternalClass {
		width: 100%;
	}
	.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass 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;
	}
	.btn-primary table td:hover {
		background-color: #34495e !important;
	}
	.btn-primary a:hover {
		background-color: #34495e !important;
		border-color: #34495e !important;
	}
}