www.spaceplanner.app

main.css (3142B)

---

 body {
 	margin: 0;
 	margin-top: var(--bar-height);
 	padding: 0;
 	width: 100vw;
 	height: calc(100vh - var(--bar-height));
 	background-color: white;
 
 	overflow: hidden;
 }
 
 header, #bar, label {
 	touch-action: none;
 }
 
 #bar {
 	position: fixed;
 }
 
 #editor {
 	display: flex;
 	flex-flow: column;
 	box-sizing: border-box;
 	width: 100%;
 	height: 100%;
 	padding: 0;
 	position: fixed;
 }
 
 button, input, select {
 	font-size: large;
 }
 
 header {
 	position: fixed;
 	padding: .2em .5em;
 	width: 100vw;
 	border-bottom: thin solid lightgrey;
 	background-color: white;
 }
 
 h1.fp_name {
 	padding: 0;
 	margin: 0;
 	font-weight: normal;
 }
 
 #status {
 	font-size: smaller;
 	text-decoration: underline;
 }
 
 div:has(#status) {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 }
 
 header > .toolbar {
 	list-style: none;
 	padding: 0;
 	margin: .25em;
 }
 
 header > .toolbar > li {
 	float: left;
 	padding-right: 1em;
 }
 
 #selOps {
 	float: right;
 }
 
 #selOps > * {
 	margin: 0 .5em;
 	display: inline;
 }
 
 svg {
 	flex: 1;
 	border:  ridge thin;
 	background-color: white;
 }
 
 aside.terminal {
 	position: absolute;
 	bottom: 5vh;
 	right: 5vw;
 	background-color: slategrey;
 	border: thin ridge darkslategrey;
 	color: white;
 }
 
 aside.menu {
 	padding: 1em;
 }
 
 aside.menu > form > input[type=radio] {
 	width: 100%;
 }
 
 #furniture_menu {
 	background-color: rgba(220, 220, 220, .9);
 	backdrop-filter: blur(1px);
 	border: thin solid #CCC;
 	border-radius: .2em;
 	padding: 1em;
 	position: fixed;
 	bottom: 0;
 	right: 0;
 	width: fit-content;
 }
 
 .furniture_params_menu > label > input:is([name="width"], [name="depth"]) {
 	max-width: 6em;
 }
 
 .furniture_params_menu > label {
 	display: inline-block;
 	margin: .1em .2em;
 }
 
 aside.message {
 	position: absolute;
 	box-sizing: border-box;
 	bottom: 0;
 	left: 0;
 	width: 100vw;
 	background-color: rgba(0, 0, 0, 0.6);
 	color: white;
 	border: thin solid darkgrey;
 	border-radius: 0;
 	padding: .2em;
 }
 
 input.invalid {
 	background-color: lightgrey;
 }
 
 #selOps > form {
 	display: inline-block;
 }
 
 #login {
 	border: thin solid lightgrey;
 	background-color: white;
 	position: absolute;
 	top: 2em;
 	left: 2em;
 }
 
 #demo_footer {
 	position: fixed;
 	bottom: 0;
 	left: 0;
 	background-color: rgba(0, 0, 0, .8);
 	color: white;
 	padding: .5em;
 	font-size: smaller;
 	width: 100vw;
 	text-align: center;
 	
 }
 
 #demo_footer > a {
 	color: orange;
 }
 
 .toolgroup {
 	display: inline-block;
 	position: relative;
 }
 
 .toolgroup > button {
 	background-color: #FEFEFE;
 	border: thin solid lightgrey;
 	border-radius: .2em;
 	padding: .5em 1em;
 }
 
 .toolgroup > button:hover {
 	background-color: #F5F5F5;
 }
 
 .toolgroup > ul {
 	display: none;
 	list-style: none;
 	position: absolute;
 	background-color: #f9f9f9;
 	border: thin solid black;
 	width: fit-content;
 	min-width: 10em;
 	padding-left: 0;
 	width: 8em;
 	z-index: 1;
 }
 
 .toolgroup > ul > li:not(:first-child) {
 	border-top: thin solid lightgrey;
 }
 
 .toolgroup > ul > li {
 	padding: .5em;
 }
 
 .toolgroup > ul > li > input[type="button"] {
 	font-size: larger;
 	width: 100%;
 	height: 100%;
 }
 
 .toolgroup > ul > li > input[type="button"]:focus {
 	background: rgba(0,0,0,.05);
 }
 
 .toolgroup:hover ul {
 	display: block;
 }