LiveAtlas/src/scss/style.scss

/*!
 * Copyright 2020 James Lyne
 *
 * Some portions of this file were taken from https://github.com/webbukkit/dynmap.
 * These portions are Copyright 2020 Dynmap Contributors.
 *
 *    Licensed under the Apache License, Version 2.0 (the "License");
 *    you may not use this file except in compliance with the License.
 *    You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *    Unless required by applicable law or agreed to in writing, software
 *    distributed under the License is distributed on an "AS IS" BASIS,
 *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *    See the License for the specific language governing permissions and
 *    limitations under the License.
 */
@import "mixins";
@import "placeholders";
@import "notifications";
@import "leaflet";

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v14/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	margin-top: 0;
}

h1 {
	font-size: 3rem;
}

h2 {
	font-size: 2rem;
	line-height: 2.4rem;
	margin-bottom: 1rem;
}

a {
	color: var(--text-base);
}

button, [type=button] {
	@extend %button;
}

input {
	appearance: none;
	background-color: var(--background-light);
	box-shadow: none;
	color: var(--text-base);
	font-size: 1.6rem;
	padding: 1rem;
	border: 0.2rem solid var(--border-color);
	border-radius: 0;

	@include focus {
		color: var(--text-emphasis);
		outline-color: var(--text-emphasis);
	}

	&[disabled] {
		background-color: var(--background-disabled);
		border-color: var(--border-color);
		cursor: not-allowed;
	}
}

.js-focus-visible :focus:not(.focus-visible):not(:focus-visible) {
  outline: none;
}

.checkbox {
	display: flex;
	position: relative;
	align-items: center;

	&:before,
	svg,
	input[type=checkbox] {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		margin: auto 1rem auto 0;
	}

	&:before {
		content: '';
		width: 2.2rem;
		height: 2.2rem;
		border: 0.2rem solid #cccccc;
		border-radius: 0.3rem;
		background-color: transparent;
		box-sizing: border-box;
		z-index: 0;
	}

	input[type=checkbox] {
		width: 2.4rem;
		height: 2.4rem;
		opacity: 0;
		z-index: 2;

		&:checked {
			& ~ span {
				color: var(--text-base);
			}

			& + svg {
				opacity: 1;
			}
		}

		@include focus {
			& ~ span:after {
				content: '';
				outline: var(--outline-focus) 2px solid;
				position: absolute;
				top: 0;
				right: -0.5rem;
				bottom: 0;
				left: -0.5rem;
				border-radius: 0.5rem;
			}
		}
	}

	svg {
		opacity: 0;
		transition: opacity 0.2s ease-in;
		z-index: 1;
	}

	span {
		color: var(--text-subtle);
		padding-left: 3rem;
	}
}

.menu {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 1.6rem;

	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	> li {
		display: flex;
		padding: 0.8rem 0.8rem 0.7rem;
		position: relative;

		> button {
			margin: -0.8rem -0.8rem -0.7rem;
			flex-grow: 1;
		}
	}

	> input[type=radio] {
		clip: rect(1px, 1px, 1px, 1px);
		height: 1px;
		width: 1px;
		position: absolute;

		& + label {
			@include button;
			margin-bottom: 0.1rem;
		}

		& + label:hover, &:checked + label {
			@include button-hovered;
			position: relative;
		}

		&:focus + label {
			@include button-focused;
		}

		&:active + label {
			@include button-active;
		}

		&:disabled + label {
			@include button-disabled;
		}
	}

	& > li > button, & > input[type=radio] + label {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		padding: 0.8rem 0.8rem 0.7rem;
		text-align: left;
		min-height: 3.2rem;
		border-radius: 0.5rem;
	}
}

#app .map .tile img, img {
    image-rendering: pixelated;
}

.clock {
	@extend %panel;
	position: relative;
    width: 15rem;
    height: 6rem;
    z-index: 50;
	font-family: monospace;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.5rem 2rem;
	overflow: hidden;

	.clock__time {
		text-align: center;
		font-size: 2rem;
		line-height: 2rem;
		margin-top: auto;
		background-color: var(--background-base);
		z-index: 1;
		padding: 0.1rem 0.1rem 0;
		border-radius: 0.3rem;

		&.night {
			color: var(--text-night);
		}

		&.day {
			color: var(--text-day);
		}

		&.night, &.day {
			transition: color 8s 8s linear;
		}
	}

	.clock__sun,
	.clock__moon {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;

		svg {
			width: 15rem;
			height: 12rem;
		}
	}

	&.clock--digital {
		justify-content: center;
		height: 5rem;
		width: auto;

		.clock__sun,
		.clock__moon {
			display: none;
		}

		.clock__time {
			margin: 0;
			font-size: 3rem;
		}
	}

	@media (max-width: 480px), (max-height: 480px) {
		transform: scale(calc((1/6)*5));
    	transform-origin: top center
	}
}

@media print {
	@page {
		size: 297mm 210mm;
	}
}