/* Todo: define $var and use them for things like times, colors, etc. */
/* Global variables. */
:root {
--svg-line-width: 3px;
--svg-active-line-width: 5px;
--svg-hover-line-width: 7px;
--svg-highlight-line-width: 21px;
--svg-over-width: 1px;
--svg-active-over-width: 2px;
--svg-hover-over-width: 3px;
/* Loops are in RD, we cannot use px. */
--svg-loupe-line-width: 0.08%;
--svg-loupe-active-line-width: 0.08%; /* Yes, same size. */
--svg-loupe-hover-line-width: 0.20%;
/* Gicons, Fill:0 Weight:600 Grade:0 OSize:48. */
--icon-info-dim: url('data:image/svg+xml;charset=utf8,');
--icon-info-lit: url('data:image/svg+xml;charset=utf8,');
--icon-arrow-drop-down-circle-orn: url('data:image/svg+xml;charset=utf8,');
--icon-arrow-drop-down-circle-grn: url('data:image/svg+xml;charset=utf8,');
--icon-arrow-drop-down-circle-dim: url('data:image/svg+xml;charset=utf8,');
--icon-arrow-drop-down-circle-lit: url('data:image/svg+xml;charset=utf8,');
--icon-download-dim: url('data:image/svg+xml;charset=utf8,');
--icon-download-lit: url('data:image/svg+xml;charset=utf8,');
--icon-delete-dim: url('data:image/svg+xml;charset=utf8,');
--icon-delete-lit: url('data:image/svg+xml;charset=utf8,');
--icon-add-box-dim: url('data:image/svg+xml;charset=utf8,');
--icon-add-box-lit: url('data:image/svg+xml;charset=utf8,');
--icon-remove-selection-dim: url('data:image/svg+xml;charset=utf8,');
--icon-remove-selection-lit: url('data:image/svg+xml;charset=utf8,');
--icon-conversion-path-dim: url('data:image/svg+xml;charset=utf8,');
--icon-conversion-path-lit: url('data:image/svg+xml;charset=utf8,');
--icon-select-all-dim: url('data:image/svg+xml;charset=utf8,');
--icon-select-all-lit: url('data:image/svg+xml;charset=utf8,');
--icon-account-circle-off-dim: url('data:image/svg+xml;charset=utf8,');
--icon-account-circle-off-lit: url('data:image/svg+xml;charset=utf8,');
--icon-account-circle-dim: url('data:image/svg+xml;charset=utf8,');
--icon-account-circle-lit: url('data:image/svg+xml;charset=utf8,');
--icon-open-width-dim:url('data:image/svg+xml;charset=utf8,');
--icon-open-width-lit:url('data:image/svg+xml;charset=utf8,');
--icon-rotate-left-dim:url('data:image/svg+xml;charset=utf8,');
--icon-rotate-left-lit:url('data:image/svg+xml;charset=utf8,');
--icon-transform-dim:url('data:image/svg+xml;charset=utf8,');
--icon-transform-lit:url('data:image/svg+xml;charset=utf8,');
/* Note rotated CCW 90 degree. *//*
--icon-output-circle-dim: url('data:image/svg+xml;charset=utf8,');
--icon-output-circle-lit: url('data:image/svg+xml;charset=utf8,');
/**/
}
*, *::before, *::after {
box-sizing: border-box;
}
/* Overwrite some defaults. */
* {
margin: 0;
padding: 0;
border: 0;
user-select: auto;
z-index: 0;
/* cursor: default; */
}
*:focus {
outline: none;
}
body {
font-family: Tahoma, Geneva, sans-serif; /* keep */
font-size: 2vh; /* keep */
-webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
display: block;
}
input, button, textarea, select {
font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
/* Overlay to disable screen when bussy. */
#overlay {
user-select: none;
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 99999999; /* 8x9 should be the biggest. */
}
#overlay div {
user-select: none;
position: absolute;
white-space : nowrap; /* Wrapping needs to be off. */
top: 50%;
left: 50%;
font-size: 6vmin;
color: Orange;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
/* A special line.gValues is used to carry globals from server to browser. */
.gValues {
visibility: hidden;
}
/* Generic classes. */
.invisible {
visibility: hidden;
}
.invisirun {
visibility: hidden;
}
.spaceDown {
visibility: hidden;
}
.nodrop {
cursor: no-drop;
}
/* Body */
body {
overflow: hidden; /* Todo: this should not be need! Remove. Fix scroll bars on body. */
position: static;
}
h2.msg {
margin: 0.5rem 1rem;
}
/* Todo: Add things like: ''@media only screen and (max-width: 1000px)'' */
/* Area types. */
#bar {
display: flex;
flex-flow: row wrap;
justify-content: left;
align-items: center;
background: lightgrey;
padding: .35vh .5vw .65vh .5vw;
width: 100%;
height: 5vh;
}
/* Image Scroller container. */
#srl {
background: #dde; /* Nice background for the white floorplans */
display: flex;
overflow: scroll;
width: 100%;
height: 92vh; /* Makes 100vh for #bar and #srl. */
}
/* Status bar at the bottom. */
#sts {
display: block;
flex-flow: row wrap;
justify-content: left;
align-items: center;
background: lightgrey;
padding: .5vh .5vw;
width: 100%;
height: 3vh; /* Makes 100vh for #bar and #srl. */
}
/* Allow text select (and copy) for the