obscreen/data/www/scss/base/_html.scss

* {
	font-family: 'Work Sans', 'Roboto', 'Arial', 'sans-serif';
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	background-color: #111;
}

body, html {
	height: 100%;
	font-family: Arial, sans-serif;
}

.container {
	display: flex;
	height: 100vh;
}

.chips-green {
	background-image: url('../../img/spot-green.png');
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
	transform: translateX(-20%) translateY(-20%);
}

.chips-red {
	background-image: url('../../img/spot-red.png');
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	position: fixed;
	z-index: -1;
	transform: translateX(-10%) translateY(40%);
}

.chips-blue {
	background-image: url('../../img/spot-blue.png');
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	position: fixed;
	z-index: -1;
	transform: translateX(80%) translateY(0%);
}


main {
	flex: 1;
	display: flex;
	flex-direction: column;

	.context-bar {
		padding: 10px;
		position: sticky;
		top: 0;
		z-index: 1000;
		max-height: 80px;
		border-bottom: $layoutBorder;
		display: flex;
		flex-direction: row;
		align-items: center;

		.context-menu {
			flex: 1;

			.inner {
				display: flex;

				ul {
					background: #222;
					padding: 6px 4px 5px 4px;
					box-shadow: 1px 1px .5px .5px inset rgba(0, 0, 0, 0.2);
					border: 1px solid #222;
					border-radius: $baseRadius;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					list-style: none;
					margin: 0;

					li {
						&.divider {
							margin: 0 20px;
							width: 1px;
							height: 100%;
							background: #333;
						}

						&:hover {
							a {
								opacity: 0.9;
							}
						}

						a {
							border-radius: $baseRadius;
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;
							color: white;
							overflow: hidden;
							padding-right: 15px;
							text-align: center;
							background: rgba(0, 0, 0, 0.2);
							margin-right: 5px;

							span {
								display: flex;
								justify-content: center;
								align-items: center;
								margin-right: 20px;
								height: 32px;
								background: rgba(0, 0, 0, 0.2);
								width: 42px;
							}
						}

						&.active {
							border: none;

							a {
								display: flex;
								flex-direction: row;
								justify-content: flex-start;
								align-items: center;
								color: white;
								padding-right: 15px;
								background: $seaBlue;
								font-weight: bold;

								span {
									background: rgba(0, 0, 0, 0.2);
									margin-right: 10px;
									width: 42px;
								}
							}
						}

						&:last-child a {
							margin-right: 0;
						}
					}
				}
			}
		}

		.context-divider {
			width: 1px;
			height: 100%;
			background: #222;
			margin-left: 20px;
			margin-right: 20px;
		}

		.context-user {
			display: flex;
			margin-right: 20px;

			.trigger {
				color: white;

				.avatar {
					width: 32px;
					height: 32px;
					border-radius: $baseRadius;
					background: $seaBlue;
					margin-right: 10px;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					text-align: center;
					font-weight: bold;
					font-size: 14px;
					border: 1px solid #444;
				}

				i {
					margin-top: -5px;
					margin-left: 10px;
				}
			}
		}
	}

	.main-container {
		display: flex;
		flex: 1;
		overflow: hidden; /* Prevent main-container from overflowing */

		.main-content {
			flex: 2;
			overflow-y: auto;
			padding: 20px;
			background: $layoutBackground;
		}

		.left-panel {
			flex: 1;
			overflow-y: auto;
			padding: 20px;
			background-color: transparent;
			border-right: $layoutBorder;
			background: $layoutBackground;
		}

		.right-panel {
			flex: 1;
			overflow-y: auto;
			padding: 20px;
			background-color: transparent;
			border-left: $layoutBorder;
			background: $layoutBackground;
		}
	}
}