optolith-client/css/Main.scss

@import "bourbon/bourbon";
@import "helpers/helpers";
@import "Fonts";
@import "Variables";
@import "Print";

@import "components/AppBootstrap";

@import "components/layout/_Layout";

@import "components/content/AccountContainer";

@import "components/content/Content";

* {
	box-sizing: border-box;
	-ms-overflow-style: none;

	&:not(input):not(textarea) {
		-moz-user-select: none;
		-o-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
}

html, body, #bodywrapper, #body {
	-webkit-touch-callout: none;
	-ms-scroll-translation: vertical-to-horizontal;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	touch-action: none;
	cursor: default;
	overflow: hidden;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	position: relative;
}

#body {
	display: flex;
	background: $background;
	font: 14px/23px Alegreya;
	position: relative;
	
	&.logged-out {
		@include calc(width, "100% + " + ($pane-width - 15px));
		
		.pane-wrapper {
			pointer-events: none;
		
			.pane-externallinks-wrapper {
				opacity: 0;
			}
		}
	}
	
	&.fullscreen {
		@include calc(width, "100% + " + $pane-width);
	}
	
	> div.wait {
		position: fixed;
		height: 100%;
		width: 100%;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9000;
		
		div {
			margin: auto;
			position: relative;
			border-top: 4px solid rgba(75, 227, 222, 0.2);
			border-right: 4px solid rgba(75, 227, 222, 0.2);
			border-bottom: 4px solid rgba(75, 227, 222, 0.2);
			border-left: 4px solid #4be3de;
			-webkit-transform: translateZ(0);
			-ms-transform: translateZ(0);
			transform: translateZ(0);
			-webkit-animation: load8 0.8s infinite linear;
			animation: load8 0.8s infinite linear;
			
			&, &:after {
				border-radius: 50%;
				width: 44px;
				height: 44px;
			}
			
			@-webkit-keyframes load8 {
				0% {
					-webkit-transform: rotate(0deg);
					transform: rotate(0deg);
				}
				100% {
					-webkit-transform: rotate(360deg);
					transform: rotate(360deg);
				}
			}
			@keyframes load8 {
				0% {
					-webkit-transform: rotate(0deg);
					transform: rotate(0deg);
				}
				100% {
					-webkit-transform: rotate(360deg);
					transform: rotate(360deg);
				}
			}
		}
	}
}

a {
	color: #0080b9;

	&:hover {
		color: #52abd1;
	}
}

p {
	&:first-child {
		margin: 0;
	}

	margin: 10px 0 0;

	&.featured {
		font-weight: 500;
		color: #f1e6d4;
	}
}

h2, h3, h4, h5, h6 {
	font-weight: normal;
	text-align: left;
	text-transform: none;
	padding: 0;
	color: #f1e6d4;
	font: bold 18px/28px Alegreya;
	margin: 20px 0 0;
	letter-spacing: 0.05em;

	&:first-child {
		margin-top: 0 !important;
	}
}

h2 {
	text-transform: uppercase;
}

h4 {
	font-size: bold 14px/22px Alegreya;
	color: #878683;
	letter-spacing: 0.025em;
	text-transform: uppercase;
}

div.space {
	height: 30px;
}

.rotate-180 {
	transform: rotate(180deg);
}

.columns {
	margin: 0 -15px;
	@include calc(width, "100% + 30px");
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	padding-bottom: 30px;

	> * {
		text-align: justify;
		min-width: 430px;
		flex: 1 1 0;
		padding: 40px 15px 0;
	}

	> .h3 {
		padding-top: 30px;
	}

	> .h4 {
		padding-top: 20px;
	}

	> .default-1-1 {
		flex: 1 100%;
	}

	> .default-1-2 {
		flex: 1 50%;
	}
}

.default {
	&-1-1 {
		width: 100%;
	}

	&-1-2 {
		width: 50%;
	}

	&-1-3 {
		width: 33.3333%;
	}

	&-1-4 {
		width: 25%;
	}

	&-1-5 {
		width: 20%;
	}

	&-1-6 {
		width: 16.6666%;
	}

	&-5-6 {
		width: 83.3333%;
	}

	&-1-9 {
		width: 11.11111%;
	}
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	-webkit-border-horizontal-spacing: 0px; 
	-webkit-border-vertical-spacing: 0px;
	table-layout: auto;
}











.gm {
	&-test {
		width: 100px;
		height: 100px;
		position: absolute;
		top: -9999px;
		overflow: scroll;
		-ms-overflow-style: scrollbar;
	}

	&-scrollbar-disable-selection {
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	&-prevented {
		-webkit-overflow-scrolling: touch;

		.gm-scrollbar {
			display: none;
		}
	}

	&-scrollbar-container {
		position: relative;
		overflow: hidden !important;
		width: 100%;
		height: 100%;

		.gm-scroll-view {
			width: calc(100% + 17px) !important;
			height: 100%;
			overflow: scroll;
			-webkit-overflow-scrolling: touch;
		}

		&.gm-autoshow {
			.gm-scrollbar {
				opacity: 0;
				transition: opacity 120ms ease-out;
			}

			&:hover, &:focus {
				.gm-scrollbar {
					opacity: 1;
					transition: opacity 340ms ease-out;
				}
			}
		}
	}

	&-scrollbar {
		position: absolute;
		z-index: 20;
		background: transparent;

		&.-vertical {
			width: 5px;
			right: 3px;
			top: 0;
			bottom: 0;

			.thumb {
				width: 100%;
			}
		}

		&.-horizontal {
			height: 5px;
			bottom: 0;
			left: 0;
			right: 0;
			display: none;

			.thumb {
				height: 100%;
			}
		}

		.thumb {
			position: relative;
			display: block;
			width: 0;
			height: 0;
			cursor: pointer;
			border-radius: 2.5px;
			background-color: #785a28;

			&:hover {
				background-color: #cdbe91;
			}

			&:active {
				background-color: #463714;
			}
		}
	}
}




hr {
	border: 0;

	&.gold {
		box-shadow: 0 1px 0px rgba(145, 130, 82, 0.75) inset, 0 0 2px black;
		background: #4e4b38;
	}

	&.blue {
		background: #151f20;
	}

	&.horizontal {
		height: 2px;
		width: 100%;
		margin: 10px 0 0;
	}

	&.vertical {
		width: 2px;
		height: 100%;
	}
}