index.css

html {
	height: -webkit-fill-available;
}

body {
	height: 100vh;
	height: var(--vh);
	height: -webkit-fill-available;
	margin: 0;
	overflow: hidden;
}

div {
	display: inline-block;
}

.canvas, .tool, .subtools, .dialog {
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.canvas {
	overflow: hidden;
	padding: .25rem .25rem 2rem .25rem;
	position: relative;
}
@media (orientation: landscape) {
	.canvas {
		float: right;
		height: calc(100% - 2.25rem);
		margin-right: 5rem;
		width: calc(100vw - 11rem + .5rem);
	}
}
@media (orientation: portrait) {
	.canvas {
		height: calc(100% - 12.25rem);
		position: absolute;
		top: 5rem;
		width: calc(100vw - .5rem);
	}
}

#imageAttribution {
	background: #444;
	bottom: 0;
	color: #888;
	left: 0;
	line-height: 1.75rem;
	overflow: scroll;
	padding: 0 .75rem;
	position: absolute;
	right: 0;
	text-align: center;
	white-space: nowrap;
}

#graphic {
	height: 100%;
	width: 100%;
}

.tool {
	background: #444;
	overflow: hidden;
	padding: .5rem;
	position: absolute;
	z-index: 11;
}
@media (orientation: landscape) {
	.tool {
		bottom: 0;
		left: 0;
		top: 0;
		width: 4rem;
	}
	.tool .left {
		float: left;
	}
	.tool .middle {
		left: .5rem;
		position: fixed;
		top: calc(50% - 4rem);
		width: 4rem;
	}
	.tool .right {
		bottom: .5rem;
		left: .5rem;
		position: fixed;
		width: 4rem;
	}
	.page.floating .tool .right {
		position: absolute;
	}
}
@media (orientation: portrait) {
	.tool {
		height: 4rem;
		left: 0;
		right: 0;
		top: 0;
	}
	.tool .left {
		float: left;
	}
	.tool .middle {
		left: calc(50% - 4rem);
		position: fixed;
	}
	.tool .right {
		float: right;
	}
}

.subtools {
	background: #444;
	overflow: scroll;
	padding: .5rem;
	position: absolute;
	text-align: center;
	transition: top 500ms ease, left 500ms ease, right 500ms ease, bottom 500ms ease, width 500ms ease;
	z-index: 10;
}
@media (orientation: landscape) {
	.subtools {
		bottom: 0;
		right: 0;
		top: 0;
		width: 4rem;
	}
}
@media (orientation: portrait) {
	.subtools {
		bottom: 0;
		height: 4rem;
		left: 0;
		right: 0;
		white-space: nowrap;
	}
}

button.circle {
	background: #fff;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1.25rem;
	border: 2px solid #eee;
	border-radius: 3rem;
	cursor: pointer;
	display: inline-grid;
	height: 3rem;
	margin: .5rem;
	width: 3rem;
	-webkit-tap-highlight-color: transparent;
}
button.circle:focus {
	box-shadow: none;
	outline: none !important;
}
button.circle:hover {
	border-color: darksalmon;
}
button.circle:disabled {
	cursor: default;
	opacity: .25;
}
button.circle.iconBrush {
	background-image: url(assets/paint-brush-solid.svg);
}
button.circle.iconClose {
	background-image: url(assets/times-solid.svg);
}
button.circle.iconDownload {
	background-image: url(assets/download-solid.svg);
}
button.circle.iconOptions {
	background-image: url(assets/bars-solid.svg);
}
button.circle.iconPalette {
	background-image: url(assets/plus-solid.svg);
}
button.circle.iconPen {
	background-image: url(assets/pen-fancy-solid.svg);
}
button.circle.iconRedo {
	background-image: url(assets/redo-solid.svg);
}
button.circle.iconShare {
	background-image: url(assets/share-alt-solid.svg);
}
button.circle.iconUndo {
	background-image: url(assets/undo-solid.svg);
}

.subtools .swatch {
	border: .5rem solid #444;
	border-radius: 3rem;
	cursor: pointer;
	height: 3rem;
	margin: 0;
	transform: rotate(0deg);
	transition: transform 600ms ease, border-top-color 150ms ease, border-left-color 300ms ease, border-right-color 450ms ease, border-bottom-color 600ms ease;
	width: 3rem;
}
.subtools .swatch.active {
	border-color: #fff;
	transform: rotate(180deg);
}

.hidden {
	display: none;
}

.dialog {
	background: #00000080;
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 20;
}

.dialog.transparent-background {
	background: #00000001;
}

.dialog .page {
	background: #fff;
	bottom: 25%;
	border: 2px solid #000;
	border-radius: 1rem;
	display: none;
	left: 25%;
	overflow-y: scroll;
	position: absolute;
	right: 25%;
	top: 25%;
}
.dialog .page.show {
	display: block;
}
.dialog .page.floating {
	border: none;
	border-radius: 0;
}
.dialog .page.menu {
	background: #666;
	border-color: #bbb;
}
.dialog .page.palette {
	left: calc(50vw - 21.5rem);
	overflow-x: hidden;
	right: initial;
	width: 43rem;
}
@media (orientation: landscape) {
	.dialog .page.floating {
		bottom: 0;
		left: 0;
		right: initial;
		top: 0;
		width: 5rem;
	}
}
@media (orientation: portrait) {
	.dialog .page.floating {
		bottom: initial;
		height: 5rem;
		left: 0;
		right: 0;
		top: 0;
	}
}
.dialog .page.menu {
	left: 5rem;
	width: calc(100vw - 10rem - 4px);
}
@media only screen and (max-width: 45rem) {
	.dialog .page.menu {
		left: 3rem;
		width: calc(100vw - 6rem - 4px);
	}
	.dialog .page.palette {
		left: calc(50vw - 14.5rem);
		width: 29rem;
	}
}
@media only screen and (max-width: 31rem) {
	.dialog .page.menu {
		border-left: none;
		border-radius: 0;
		border-right: none;
		left: 0;
		width: 100vw;
	}
	.dialog .page.palette {
		left: calc(50vw - 7.5rem);
		width: 15rem;
	}
}
@media only screen and (max-width: 15rem) {
	.dialog .page.menu {
	}
	.dialog .page.palette {
		left: 0;
	}
}
.dialog .page.menu, .dialog .page.palette {
	height: calc(100% - 10rem - 4px);
	height: fit-content;
	max-height: calc(100% - 10rem - 4px);
	top: 5rem;
}
@media only screen and (max-height: 45rem) {
	.dialog .page.menu, .dialog .page.palette {
		height: calc(100% - 6rem - 4px);
		max-height: none;
		top: 3rem;
	}
}
@media only screen and (max-height: 31rem) {
	.dialog .page.menu, .dialog .page.palette {
		border-bottom: none;
		border-radius: 0;
		border-top: none;
		height: 100%;
		top: 0;
	}
}
@media only screen and (max-height: 15rem) {
	.dialog .page.menu, .dialog .page.palette {
	}
}

.dialog .page.menu ul {
	list-style-type: none;
	padding: 0;
}
.dialog .page.palette ul {
	list-style-type: none;
	padding: 0 .5rem;
}
.dialog .page.palette li, .dialog .page.menu li {
	cursor: pointer;
	display: inline-block;
	line-height: 2rem;
	margin: .5rem;
	overflow: hidden;
	position: relative;
	width: 13rem;
}
.dialog .page.menu li {
	width: 16rem;
}
.dialog .page.menu li.main-group {
	background: #666;
	color: #fff;
	cursor: default;
	display: block;
	margin: 0;
	padding: .5rem 1rem;
	width: auto;
}
.dialog .page.menu li.main-group .main-title {
	border-bottom: 2px solid darksalmon;
	line-height: 1.5rem;
	margin-bottom: .5rem;
}
.dialog .page.menu li.main-group ul {
	margin: 0 -1rem;
	overflow-x: scroll;
	padding: 0 .5rem;
	white-space: nowrap;
}
.dialog .page.menu li.main-group li.art {
	width: 6rem;
}
.dialog .page.palette .emoji {
	background: #ffffffc0;
    border-radius: 2rem;
	font-size: 1.5rem;
	left: .5rem;
	line-height: 2.5rem;
	position: absolute;
	text-align: center;
	top: .5rem;
    width: 2.5rem;
}
.dialog .page.palette .img {
	float: left;
}
.dialog .page.palette .title, .dialog .page.menu .title {
	float: left;
	line-height: 1.5rem;
	white-space: nowrap;
}
.dialog .page.menu .title {
	line-height: 1rem;
	height: 2rem;
	overflow: hidden;
	text-align: center;
	white-space: normal;
	width: 6rem;
}
.dialog .page.palette svg {
	border-radius: .5rem;
	height: 3.5rem;
	width: 13rem;
}
.dialog .page.menu .img, .dialog .page.menu .inline-img {
	background-color: #ccc;
	border-radius: .5rem;
	float: left;
	height: 6rem;
	width: 6rem;
}
.dialog .page.menu .img {
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
.dialog .page.menu .inline-img svg {
	border-radius: .5rem;
	height: 100%;
	width: 100%;
}
.dialog .page.menu .group {
	border-bottom: .25rem solid #bcc;
	cursor: auto;
	display: block;
	padding: 0 .5rem;
	width: 15rem;
}
.dialog .page.menu h4 {
	color: #fff;
	margin: 2rem 1rem 1rem 1rem;
}

/* ------------------------- */
/*           print           */
/* ------------------------- */

@media print {
	@page {
		margin: 0;
	}
	html {
		height: 100%;
	}
	body {
		margin: 1cm;
		height: calc(100% - 2cm);
		width: calc(100% - 2cm);
	}
	.print-none {
		display: none;
	}
	.canvas {
		height: calc(100vh - 3.25rem - 2cm);
		top: 0;
	}
	#imageAttribution {
		background: none;
		bottom: -1rem;
		color: #000;
		font-size: .8rem;
		line-height: 1.25rem;
	}
	#imageAttribution::before {
		background: url('assets/qr-code-by-sa-3.0-de.svg');
		background-size: 20mm;
		bottom: 5mm;
		content: '';
		display: block;
		position: fixed;
		left: 5mm;
		height: 20mm;
		width: 20mm;
		-webkit-print-color-adjust: exact !important;
		color-adjust: exact !important;
	}
	#imageAttribution::after {
		content: 'Dieses Bild wurde gedruckt mit "Kunterbunt"';
		display: block;
	}
}