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/controls";
@import "leaflet/popups";

@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 {
	@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;
	}
}

.focus-mover {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute;
	height: 1px;
	width: 1px;

	@include focus {
		outline: none;
		border: 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;
			}
		}
	}

	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;
		border-bottom: 0.1rem solid transparent;

		> button {
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			margin: -0.8rem -0.8rem -0.7rem;
			padding: 0.8rem 0.8rem 0.7rem;
			text-align: left;
			flex-grow: 1;
			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;

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

/*******************
 * players on the map
 */

.marker {
	display: flex;
	align-items: center;

	&.marker--player {
   		transition: transform 0.3s ease-in 0s;

		.marker__label {
			display: block;
		}

		.player__health,
		.player__armor {
			width: 50px;
		}

		.player__health,
		.player__armor,
		.player__health-bar,
		.player__armor-bar {
			height: 7px;
		}

		.player__health {
			background: url(../assets/images/heart_depleted.png) repeat-x left center;
		}

		.player__health-bar {
			background: url(../assets/images/heart.png) repeat-x left center;
		}

		.player__armor {
			background: url(../assets/images/armor_depleted.png) repeat-x left center;
		}

		.player__armor-bar {
			background: url(../assets/images/armor.png) repeat-x left center;
		}
	}

	.marker__label {
		flex: 0 0 auto;
		margin-left: 2px;
		z-index: 20;
		font-size: 1.5rem;
		line-height: 1;

		white-space: nowrap;

		color: var(--text-base);
		background: var(--background-dark);
		padding: 0.2rem;
		display: none;
		max-width: 25vw;
		text-overflow: ellipsis;
		overflow: hidden;

		@at-root .leaflet-pane--show-labels .marker__label {
			display: block;
		}
	}

	&:hover {
		z-index: 1000;
	}

	@include focus {
		z-index: 1000;

		.marker__label {
			display: block;
			outline: auto;
		}
	}

	&:hover .marker__label {
		display: block;
	}

	@at-root {
		.no-animations .marker.marker--player {
			transition: none;
		}
	}

	@media print {
		display: none !important;
	}
}

.leaflet-container {
	font-family: inherit;
	font-size: 1.5rem;
	font-weight: inherit;
	line-height: 1;

	/* Workaround for focus outlines until https://github.com/Leaflet/Leaflet/pull/7259 gets released */
	@include focus {
		outline: -webkit-focus-ring-color auto thin !important;
		outline: revert !important;
	}
}

.leaflet-players-pane {
	z-index: 600;
}

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