style.scss

@import "helper.min.css";

html,
body {
	margin: 0;
	padding: 0;
	background-color: #853;
	overflow: clip;
	overscroll-behavior: none;
	position: relative;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

body {
	&.big_buttons { // Big Buttons
		.headbar {
			.max,
			.close,
			.devreload {
				height: 2rem;
				width: 2rem;
			}

			.max {
				right:calc(2rem - 1px);
			}
		}
	
		.resizer2 {
			height:20px;
			width:20px;
			bottom:-11px;
			right:-11px;
		}
	}
}

* {
	box-sizing: border-box;
	font-family: var(--font);
}

.content {
	position: absolute;
	display: flex;
	flex-direction: column;
	top: 0;
	left: 0;
	height: 100%;
	overflow: clip;
	width: 100%;

	.desktop {
		&__background {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			background-size: cover;
			background-position: center;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
			pointer-events: none;
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;

			.aboutthisversion {
				position: absolute;
				bottom: 40px;
				right: 20px;
				text-align: right;
				font-size: 1.05em;
				line-height:1.4;
				a {
					color:#ffffffcc;
				}
			}
		}

		&__icons {
			padding: 15px;
			position: absolute;
			display: flex;
			overflow: visible;
			top: 0;
			left: 0;
			width: auto;
			height: calc(100% - 65px);
			justify-content: flex-start;
			flex-direction: column;
			flex-wrap: wrap;
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		
			a {
				transition: .2s;
				position: relative;
				display: inline-block !important;
				overflow: hidden;
				width: 70px;
				height: calc(70px + 1.5rem);
				margin: 3px;
				background-color: transparent;
				border: 0;
				padding: 0;
				text-align: center;
				text-decoration: none;
				font-size: .85em;
				border-radius: var(--border-radius);
				text-overflow: ellipsis;
				backdrop-filter: blur(var(--glassyElementBlur));

				&:hover,
				&:focus-visible {
					// background-color: var(--hovercolor);
					overflow: visible;
					z-index: 2;
				}

				img {
					padding: .5rem;
					width: 100%;
					margin: 0 auto;
					height: auto;
					aspect-ratio: 1/1;
					object-fit: contain;
					top: 0;
					display: inline-block;
					position: relative;
				}

				span {
					margin: 0;
					line-height: 1.25;
					width: 100%;
					display: inline-block;
					position: relative;
					text-overflow: ellipsis;
					overflow: hidden;
					min-height: 1.5em;
					height: 1.25em;
					padding: 2px;
					word-wrap: break-word;
					color: #fff;
				}

			}
		}
	}

	.programs {
		display: inline-block;
		// allow click-through but still allow interaction with child elements, so we can interact with the desktop
		pointer-events: none;
		position: relative;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		overflow: visible;
		* {
			pointer-events: auto;
		}
		&.peek {
			>div {
				backdrop-filter: blur(1px);
				outline: 1px solid var(--themecolor);
				>* {
					opacity: .05 !important;
					&.headbar {
						opacity: 1 !important;
						background-color: transparent;
						* {
							opacity: 0;
						}
						.progicon, .progtitle {
							opacity: 1;
							background-color: var(--themecolor);
						}
					}
				}
			}
		}
	}

	#taskbar {
		background-color: var(--glassyElementBackground);
		position: relative;
		order: 200;
		display: flex;
		justify-content: space-between;
		bottom: 0;
		left: 0;
		width: 100%;
		height: var(--taskbarheight);
		max-height: 40vh;
		overflow: visible;
		z-index: 99999;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		flex-grow: 0;
		flex-shrink: 0;
		// box-shadow: 0 -1px 0 0px #00000088;
		backdrop-filter: blur(var(--glassyElementBlur));
	
		#start {
			background-color: transparent;
			position: relative;
			float: left;
			height: 100%;
			width: auto;
			border: none;
			display: flex;
			top: 0;
			left: 0;
			z-index: 999;
			font-size: 1.5em;
			padding: 2px 5px;
			justify-content: left;
			min-width: 36px;
	
			img {
				position: relative;
				display: inline-block;
				height: 100%;
				width: 100%;
				filter: drop-shadow(0 0 1px #000);
				object-fit: contain;
			}
	
			p {
				position: absolute;
				display: inline;
				bottom: -2px;
				margin: 0;
				padding: 0;
				right: 35px;
				z-index: 999;
				color: #fff;
			}
		}
	
		#tasklist {
			height: 100%;
			width: auto;
			position: relative;
			display: flex;
			flex-grow: 99;
			&.showprogramtitle {
				span {
					display: unset;
				}
			}
	
			button {
				height: 100%;
				border-radius: var(--border-radius);
				display: inline-flex;
				border: 0;
				background: #77777711;
				padding: 2px 5px;
				margin: 0 2px;
				box-sizing: border-box;
				&.active {
					background: #7777774f;
					border: 2px solid var(--themecolor2);
				}
				img {
					height: 100%;
					margin-right: 0;
					aspect-ratio: 1/1;
					object-fit: scale-down;
				}
				span {
					margin: auto;
					line-height: 1;
					display: none;
				}
			}
		}
	
		#taskbarright {
			position: relative;
			display: flex;
			flex-direction: row;
			right: 0;
			top: 0;
			height: 100%;
			width: auto;
			// background-color: #00000033;
			// border-left: 2px solid #420;
			max-width: 60%;
			color: #fff;
			min-width: 50px;
			// background-color: var(--glassyElementBackground);
	
			a {
				display: inline-block;
				position: relative;
				padding: 5px;
				border-radius: var(--border-radius);
				margin: 0 2px;
	
			}
	
			#taskbarrighticons {
				height: 100%;
				width: auto;
			}
	
			img {
				height: 100%;
				margin: 3px;
				width: auto;
				aspect-ratio: 1/1;
			}
	
			#taskbartime,
			.taskbarlanguage {
				height: auto;
				background: transparent;
				display: table-cell;
				padding: 5px;
				vertical-align: middle;
			}
	
			.show-desktop {
				width: 6px;
				padding: 0;
				background: var(--themecolor);
				opacity:.9;
				height: 100%;
				position: relative;
				display: inline-block;
				order: 9999;
				right: 0;
				top: 0;
				border-radius: 0;
				margin-right: 0;
			}
		}
	}

	@media (max-width:350px) {
		.desktop {
			&__background {
			}

			&__icons {
		
				button {
					width: 50px;
					font-size: .85em;
					height: 70px;

				}
			}
		}

		.aboutthisversion {
			font-size:.7em;
			margin:0;
		}
	}
}

.speak {
	display: inline;
	border: 0;
	width: 0;
	height: 0;
	opacity: 0;
}

.autostart {
	display: none !important;
}

#emergencytools,
#emergencytoolsloading { // Emergency Tools
	display: none;
	height: 0;
	z-index: 99999999 !important;
	background: #000000;
	color: #ffffff;
	position: fixed;
	top: 0;
	left: 0;
	height: calc(100vh - var(--taskbarheight));
	padding: 10px;
	overflow:auto;
	max-height: 100vh;
	max-width: 100vw;
	width: 100vw;

	&:target {
		display: block;
		+#emergencytoolsloading {
			display: none !important;
		}
	}

	img {
		position: fixed;
		margin: 10px;
		top: 0;
		right: 0;
		height: 6vmin;
		width: auto;
	}

	h2 {
		top: 0;
		position: sticky;
		background: #000000;
		border-bottom: 1px solid #aaccff;
	}

	* {
		font-family: monospace, system-ui, -apple-system, sans-serif;
	}

	textarea {
		background: #ffffaa;
		color: #000000;
		display: block;
		width: 90%;
		height: 500px;
		resize: none;
	}

	details {
		a {
			color: reset;
		}

		input {
			display: block;
			width: 80%;
		}
		
		#emergencyframe {
			resize: both;
			height: 600px;
			max-height: 80vh;
			width: 80%
		}
	}
}

#emergencytoolsloading {
	height: auto;
	width: 100%;
	background: transparent;
	position: absolute;
	bottom: 0px;
	top: unset;
	padding: 0;
	left: 0;
	progress {
		width: 100%;
		background: rgba(255,255,255,.15);
		border: 0;
		height: 44px;
	}
}

.program {
	position: absolute;
	display: none;
	min-width: 100px;
	min-height: 50px;
	top: 0;
	left: 0;
	transform: scale(1) translate(1);
	transform-origin: bottom left;
	background-color: transparent;
	border-radius: var(--border-radius);

	&,* {
		transition: opacity .2s, backdrop-filter .3s, transform .3s, margin .3s;
	}

	&.noborder {
		border-radius: 0 !important;
	
		iframe {
			top: 0 !important;
			border: 0 !important;
			background-color: transparent !important;
			border-radius: 0 !important;
			height: 100%;
		}
	
		.headbar,
		.resizers {
			display: none;
		}
	}


	&.peeking:not(.active) {
		// &:not(.maximized:not(.minimized)) {
			&,* {
				z-index:99999 !important;
				transform: scale(1);
				opacity: 1;
				visibility: visible;
				transition: 0s;
			}
			iframe {
				transform: scaleY(1) !important;
				border-radius: var(--border-radius) !important;
				overflow: hidden;
			}
			transform: scale(.25) !important;
			transform-origin: bottom left !important;
			margin: 0 !important;
			top: unset !important;
			bottom: 20px !important;
			left: 20px !important;
			outline: 40px solid rgba(0,0,0,.6);
			border-radius: var(--border-radius);

		}

	&:not(.active) {
		.close {
			filter: grayscale(.4) brightness(1.1);
		}
	}

	&.closing {
		transition: .3s !important;
		transform: scale(0) !important;
		transform-origin: bottom left;
		opacity: .5 !important;
	}

	&.alwaysontop {
		z-index: 999999 !important;
		.controls {
			.pin {
				&::after {
					content: "📍";
					background: #000000;
				}
				&:hover {
					&::after {
						opacity: 0;
					}
				}
			}
		}
	}

	&.fullscreen {
		z-index: 100000 !important;
		top: 0 !important;
		left: 0 !important;
		height: 100vh !important;
		width: 100vw !important;

		iframe {
			top: 0;
			left: 0;
			height: calc(100%);
			border: 0;
			border-radius: 0;
		}

		.headbar {
			&:hover {
				z-index: 2;
				border-bottom: 1px solid #000;
				.close {
					display: inline-block;
				}

				.fullscreen {
					transform: scale(1);
				}
			}

			.controls {
				button {
					display: none;
					&.fullscreen {
						transform: scale(.8);
						right: 1.65em;
						position: absolute;
						display: inline-block;
					}
				}
			}
		}
	}

	&.minimized {
		user-select: none;
		opacity: 0;
		z-index: -100;
		// visibility: hidden;
		margin-left: -70vw;
		margin-top: 100vh;
		transform: scale(0);
		&,* {
			pointer-events: none;
		}


		iframe {
			transform: scaleY(0);
			pointer-events: none;
			user-select: none;
			// visibility: hidden;
		}
	}

	&.maximized {
		height: 100%;
		width: 100%;
		max-height: 100vh;
		max-width: 100vw;
		border-radius: 0;

		iframe {
			border-left: none;
			border-right: none;
			border-bottom: none;
			border-radius: 0;
		}

		.resizers {
			display: none;
		}

		.headbar {
			border-radius: 0;
		}
	}

	&.notmaximized {
		height: 50%;
		width: 50%;
		.headbar {
			.drag {
				cursor: grab;
			}
		}
	}

	* {
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-o-user-select: none;
		user-select: none;
	}

	iframe {
		position: absolute;
		border: 0;
		top: 30px;
		left: 0;
		height: calc(100% - 30px);
		width: 100%;
		// background-color: #fff;
		overflow: hidden;
		border: 1px solid var(--themecolor);
		border-top: 0;
		border-bottom-left-radius: var(--border-radius);
		border-bottom-right-radius: var(--border-radius);
		color-scheme: initial !important;
	}

	.headbar {
		position: relative;
		top: 0;
		background-color: var(--themecolor);
		height: 30px;
		width: 100%;
		padding-right: 2px;
		border: none;
		overflow: hidden;
		border-top-left-radius: var(--border-radius);
		border-top-right-radius: var(--border-radius);
		* {
			display: inline;
			transition: .5s;
		}

		.drag {
			height: 100%;
			width: 100%;
			top: 0;
			left: 0;
			display: inline-block !important;
			position: absolute;
			z-index: 0;
		}

		.controls {
			position: absolute;
			right: 0;
			top: 0;
			display: flex;
			height: 100%;

			button {
				height: 100%;
				aspect-ratio: 1.2/1;
				@supports not (aspect-ratio: 1/1) {
					width: 30px;
				}
				top: 0;
				border: 0;
				margin: 0 0 0 2px;
				padding: 0;
				position: relative;
				// border-left: 1px solid #fff;
				// border-bottom: 1px solid #fff;
				z-index: 1;
				font-size: 1.2rem;
				line-height: 0;
				text-align: center;
				justify-content: center;
				object-fit: contain;
				border-radius: 0;
				background:transparent;

				img {
					height: 100%;
					// width: 100%;
					max-width: 100%;
					padding: 15%;
					font-size: 0;
					aspect-ratio: 1/1;
				}

				&[disabled],
				&[disabled="disabled"] {
					display: none;
					pointer-events: none;
				}

				&.close {
					order: 10000;
					&:hover {
						background-color: #f00 !important;
					}
				}

				&.max {
					order: 9500;
					// background-color: var(--themecolor2);
				}

				&.minimize {
					order: 9000;
					// background-color: var(--themecolor2);
				}

				&.fullscreen {
					order: 8500;
					// background-color: var(--themecolor2);
				}

				&.pin {
					// background-color: var(--themecolor2);
				}

				&.reload {
					// background-color: #ff0;
					color: #000;
				}
			}
		}
	}


	.resizers {
		* {
			height: 10px;
			width: 10px;
			position: absolute;
			transform:scale(1);
			&:active {
				z-index: 9999;
				transition: 0s;
				cursor: se-resize;
			}
			&:hover {
				// if not active
				&:not(:active) {
					border-radius: 50%;
					backdrop-filter: blur(10px);
					transform: scale(1.5);
					outline: 1px solid var(--themecolor);
				}

			}
		}
		.resizer2 {
			bottom: -5px;
			right: -5px;
			cursor: se-resize;
			z-index: 20;
		}
	}

	.progtitle {
		position: relative;
		left: 0;
		top: 5px;
		margin: 5px;
		font-size: 16px;
		height: 16px;
		color:#fff;
	}
}

.progicon {
	position: relative;
	float: left;
	left: 0;
	height: 24px;
	margin: 4px 4px 4px 6px;
	pointer-events: none;
}

.start_menu {
	overflow: visible !important;
	z-index: 99999999 !important;

	&, iframe {
		background-color: transparent !important;
	}

	* {
		border: none;
		border-radius: 0;
		overflow: hidden !important;
		z-index: 999999999 !important;
	}

	iframe {
		top: auto;
		position: absolute;
		bottom: -35px;
		height: calc(100% + 35px);
		background-color: transparent;
	}

	.headbar {
		display: none;
	}
}

@media (prefers-color-scheme:dark) {
	.program {
		iframe {
			// background-color: var(--black);
		}
	}
}