Untitled

<!DOCTYPE html>
<html lang="en" class="elementsLoading">
<head>
	<title>Options</title>
	<style type="text/css">
		/*#region Fonts*/
		 @font-face {
			 font-family: 'Roboto';
			 font-style: normal;
			 font-weight: 400;
			 src: url(../fonts/Roboto-Regular.ttf);
		 }

		@font-face {
			font-family: 'Roboto';
			font-style: normal;
			font-weight: 500;
			src: url(../fonts/Roboto-Medium.ttf);
		}

		@font-face {
			font-family: 'Roboto';
			font-style: normal;
			font-weight: 700;
			src: url(../fonts/Roboto-Bold.ttf);
		}

		@font-face {
			font-family: 'Inconsolata';
			font-style: normal;
			font-weight: 400;
			src: url(../fonts/Inconsolata-Regular.ttf);
		}

		@font-face {
			font-family: 'Inconsolata';
			font-style: normal;
			font-weight: 700;
			src: url(../fonts/Inconsolata-Bold.ttf);
		}

		body {
			font-size: 75%;
			font-family: 'Roboto', "segoe UI", tahoma, sans serif;
		}
		/*#endregion*/

		/*#region Splash screen*/
		#splashScreen {
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			background-color: #FF5722;
			position: fixed;
			z-index: 999999999999999;
			color: white;
			opacity: 0;
			transition: opacity 500ms ease-in-out;
			pointer-events: none;
			overflow: hidden;
		}

		#splashScreenVerticalCenterer, #splashScreenHorizontalCenterer {
			display: flex;
			justify-content: center;
			height: 100vh;
		}

		#splashScreenVerticalCenterer {
			flex-direction: column;
		}

		#splashScreenHorizontalCenterer {
			flex-direction: row;
		}

		#splashScreenTitle {
			font-size: calc(100vw / 20);
		}

		#splashScreenLoaderCenterer {
			display: flex;
			flex-direction: row;
			justify-content: center;
		}

		.elementsLoading #splashScreen {
			opacity: 1;
			pointer-events: initial;
		}

		#splashScreenProgressBarCont {
			width: 50vw;
			height: 4px;
			background-color: rgb(224, 224, 224);
			margin-top: 20px;
			position: relative;
		}

		#splashScreenProgressBarLoader {
			will-change: transform;
			-webkit-transform-origin: left center;
			transform-origin: left center;
			position: absolute;
			transform: scaleX(0);
			background-color: rgb(38, 153, 244);
			width: 50vw;
			height: 4px;
		}
		/*#endregion*/
	</style>
	<link async rel="stylesheet" href="../css/codemirror.css" />
	<script src="../bower_components/webcomponentsjs/webcomponents.min.js"></script>
	<link rel="import" href="../bower_components/polymer/polymer.html" />
	<script src="../bower_components/iron-meta/iron-meta.js"></script>
	<link async rel="import" href="../elements/crm-app/crm-app.html" />
</head>
<body style="margin: 0;">
	<div id="splashScreen">
		<div id="splashScreenHorizontalCenterer">
			<div id="splashScreenVerticalCenterer">
				<div id="splashScreenTitle">
					Custom Right-Click Menu
				</div>
				<div id="splashScreenLoaderCenterer">
					<div id="splashScreenProgressBarCont">
						<div id="splashScreenProgressBarLoader"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<crm-app class="elementLoading"></crm-app>
	<!-- build:js ../js/libraries/codemirror/codeMirrorFile.min.js -->
	<script defer src="../js/libraries/codemirror/codemirror.js"></script>
	<script defer src="../js/libraries/diff_match_patch.js"></script>
	<script defer src="../js/libraries/codemirror/codeMirrorAddons.js" async></script>
	<script defer src="../js/userscriptMetadataCodemirror.js" async></script>
	<script defer src="../js/libraries/codemirror/codemirrorJs.js" async></script>
	<script defer src="../js/crmAPIDefs.js" async></script>
	<!-- /build -->
</body>
</html>