index.css

html {
	margin-left: 0;
	margin-right: calc(100% - 100vw);
/*	^
	Prevent page elements from jumping due to page width changing when vertical scrollbar appears.

	Source:
	https://css-tricks.com/elegant-fix-jumping-scrollbar-issue/
	https://aykevl.nl/2014/09/fix-jumping-scrollbar
*/
	color: black;
	background-color: #ddd;
	font-family: sans-serif;
	line-height: 1.5;
	text-align: center;
}
body {
	margin: 1em auto;
}
.stub {
	background-color: #f5f5f5;
	display: inline-block;
	padding: 1em;
}
.text {
	line-height: 1.5;
}
small {
	font-size: smaller;
}
big,
.larger-text-button b,
.larger-text button,
.larger-text option,
.larger-text select,
.larger-text input,
.larger-text {
	font-size: large;
}
.larger-text .larger-text-button small {
	font-size: small;
}
.larger-text pre,
.larger-text code {
	font-weight: bold;
}
.menu-bar {
	z-index: 1;
	position: relative;
}
.top-buttons {
	z-index: 2;
	position: fixed;
	display: flex;
	top: 0;
	right: 0;
}
.top-buttons button {
	border: 0.0625em solid gray;
	width: 3em;
	height: 3em;
	margin: 1em 1em 0 0;
	white-space: nowrap;
}
.top-buttons button:hover {
	background-color: white;
}
.fixed-tab-width .fixed-tab-width-button,
.larger-text .larger-text-button {
	background-color: #ace;
}
.fixed-tab-width .fixed-tab-width-button:hover,
.larger-text .larger-text-button:hover {
	background-color: #bdf;
}
.top-buttons button::-moz-focus-inner,
.menu-list summary::-moz-focus-inner,
.main.panel.row .button::-moz-focus-inner,
.main.panel.row .button > *::-moz-focus-inner {
	border: none;	/* <- https://stackoverflow.com/a/199319 */
}
.top-buttons button:focus,
.menu-list summary:focus,
.main.panel.row .button:focus,
.main.panel.row .button > *:focus {
	outline: none;	/* <- https://stackoverflow.com/a/47002717 */
}
/*	^
	Outlines should only be modified using :focus.
	The universal selector (*) is known to be slow.
	Unqualified attribute selectors are known to be slow.
	Don't use IDs in selectors.

	Source:
	http://csslint.net/
*/
a {
	color: gray;
}
a:hover {
	color: black;
}
hr {
	border: none;
	border-top: 0.0625em solid gray;
}
label:hover {
	background-color: #eee;
}
[onclick],
button,
label,
select,
summary,
input[type="file"] {
	cursor: pointer;
}
[onclick]:disabled,
button:disabled,
label:disabled,
select:disabled,
input[type="file"]:disabled {
	cursor: not-allowed;
}
.size-full[onclick] {
	cursor: zoom-out;
}
.size-fit[onclick] {
	cursor: zoom-in;
}
.size-fit {
	max-width: 100%;
	height: auto;	/* <- keep image from growing too wide and keep proportions */
}
.panel {
	display: flex;
	text-align: left;
	vertical-align: top;
	white-space: nowrap;
}
.panel:empty {
	display: none;
}
.panel:not(.row),
.panel.column {
	flex-flow: column;
}
.panel.row {
	flex-flow: row;
}
.panel.wrap {
	flex-wrap: wrap;
}
.panel.main {
	margin: 1em;
	padding: 1em 1.5em;
	background-color: #f5f5f5;
	line-height: normal;
}
.panel.sub button,
.panel.sub header,
.panel.sub footer {
	text-align: center;
}
.panel.sub {
	background-color: rgba(0,0,0, 0.1);
}
.panel[draggable] {
	cursor: resize;
	cursor: col-resize;
	cursor: e-resize;
}
.panel.row[draggable] {
	cursor: row-resize;
	cursor: n-resize;
}
.panel[draggable] .panel.sub,
.panel.sub {
	padding: 0.5em 1em;
}
.draggable-order header {
	padding: 0.5em 0;
	/* align-self: center; */
}
.draggable-order .panel,
.draggable-order header {
	align-items: center;
}
.draggable-order .panel.sub .panel,
.draggable-order .panel.sub,
.panel {
	gap: 0.5em;
}
.panel.sub .panel,
.panel.sub {
	gap: 0.5em 1em;
}
.panel.mid,
.panel details > summary + .panel {
	margin-top: 0.5em;
}
.panel details > summary + .panel:not(:last-child) {
	margin-bottom: 0.5em;
}
.panel details > summary {
	margin: -0.5em -1em;
	padding: 0.5em 1em;
}
.panel details > summary:hover {
	background-color: white;
}
.panel details > summary:focus {
	outline: 0;
}
/*
	For browsers without "gap" support, e.g. Firefox 56:
*/
.no-gap .panel button,
.no-gap .panel.main > *,
.no-gap .panel.sub > *,
.no-gap .panel[draggable] {
	margin: 0.25em;
}
.no-gap .section > .list-name {
	margin: 0.5em;
}
.no-gap .panel.sub {
	padding: 0;
}
.no-gap .draggable-order header {
	padding: 0.5em 1em;
}
.draggable-order [draggable].dragged,
.draggable-order [draggable]:active {		background-color: #f5f5f5;}
.draggable-order [draggable]:hover {		background-color: #eee;}
.draggable-order [draggable].row.dragged,
.draggable-order [draggable].row:active {	background-color: #bdf;}
.draggable-order [draggable].row:hover {	background-color: #ace;}
.draggable-order .relevant[draggable].dragged,
.draggable-order .relevant[draggable]:active,
.draggable-order .relevant[draggable]:hover {		background-color: #feb;}
.draggable-order .relevant {				background-color: #eda;}
.draggable-order .relevant[draggable].row.dragged,
.draggable-order .relevant[draggable].row:active,
.draggable-order .relevant[draggable].row:hover {	background-color: #dfc;}
.draggable-order .relevant.row {			background-color: #cea;}
/*	^
	:active, :hover or toggled classname selectors behave variously bad with drag-n-drop,
	everywhere from Firefox 56 to latest Vivaldi (chrome-based browser).
*/
.menu-head {
	display: inline-block;
	position: relative;
}
.menu-head > .button {
	display: flex;
	align-items: center;
	padding: 0.5em 1em;
	background-color: #f5f5f5;
}
.menu-head > .button::before {
	content: "\25BF\A0";
}
.menu-head > .button.show::before {
	content: "\25BE\A0";
}
.menu-head:hover > .button {
	background-color: white;
}
.menu-drop {
	display: none;
	position: relative;
}
.menu-head > .show + .menu-drop,
.menu-head:hover .menu-drop,
.menu-drop:hover {
	display: block;
	z-index: 1;
}
.menu-head:hover .menu-drop,
.menu-drop:hover {
	z-index: 2;
}
.menu-hid {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	min-width: 100%;
}
.menu-list {
	display: block;
	border: 0.0625em solid gray;
	background-color: #f5f5f5;
	text-align: left;
	white-space: nowrap;
}
.menu-list button + button {
	margin-left: auto;
}
.menu-list > details:not(:first-child),
.menu-list > section:not(:first-child) {
	border-top: 0.0625em solid gray;
}
.menu-list > section {
	padding: 0 1em;
}
.menu-list > header {
	display: flex;
	margin: 1em;
}
.menu-list > details > summary {
	padding: 1em;
	background-color: rgba(0,0,0, 0.05);
}
.menu-list > details > summary:hover {
	background-color: white;
}
.menu-list > details[open] > summary {
	background-color: #ace;
}
.menu-list > details[open] > summary:hover {
	background-color: #bdf;
}
.menu-list > details > div {
	padding: 1em;
	transition: background-color 0.7s ease-in;
	background-color: transparent;
}
.menu-list > details.opening > div {
	transition: none;
	background-color: #bdf;
}
.menu-list > details table,
.menu-list > details tr,
.menu-list > details td {
	margin: 0;
	padding: 0;
	border-collapse: collapse;
}
.menu-list > details th {
	padding: 0.5em;
}
.menu-list > details th:first-child {
	padding-left: 0;
}
.menu-list > details td {
	padding-left: 0.5em;
	vertical-align: top;
}
.menu-list > details td:first-child {
	width: 0;
	padding-left: 0;
}
.menu-list > details tr:hover td {
	background-color: white;
}
.menu-list > details tr:hover td code {
	opacity: 0.7;		/* <- hack to avoid redefining all bg colors */
}
.menu-list > details code,
.menu-list > details code span,
.menu-list > details pre span,
.menu-list > details .list,
.menu-list > details .button-text {
	display: inline-flex;	/* <- (TODO) does not fill parent table-cell height */
}
.menu-list > details pre > :not(.value),
.menu-list > details code > :not(.value),
.menu-list > details code[class],
.menu-list > details .button-text {
	padding-left: 0.5em;
	padding-right: 0.5em;
}
.menu-list > details pre:first-child {
	margin-top: 0.5em;
}
.menu-list > details pre {
	/* display: flex; */
	margin-top: 2.5em;
	margin-bottom: 0.5em;
	padding: 0.5em;
}
.menu-list > details pre br {
	margin-bottom: 0.5em;
}
.menu-list > details code,
.menu-list > details pre,
.menu-list > details .button-text,
.menu-list > details .ignore {	background-color: #e2e2e2;}
.menu-list > details .comment {	background-color: #f3d7d7;}
.menu-list > details .name {	background-color: #d7d7f3;}
.menu-list > details .param {	background-color: #d7f3d7;}
.menu-list > details .path {	background-color: #f3f300;}
.menu-list > details .value {	color: #1e90ff;}
.menu-list > details .custom {	color: red;}	/* cadetblue = #5f9ea0, dodgerblue = #1e90ff */
.menu-list > details .ignore {
	min-width: 2em;
	text-align: center;
	display: inline-block;
}
.example-files {
	border-collapse: collapse;
}
.example-files td {
	padding: 0.125em 0.25em;
}
.example-files td:first-child {
	text-align: right;
}
.example-files tr > *:first-child {
	padding-left: 1em;
}
.example-files tr > *:last-child {
	padding-right: 1em;
}
.example-file-type,
.example-file-type header {
	margin: 1em 0;
}
.example-file:hover:not(.loading) td {
	background-color: white;
}
.example-file.loading td {
	position: relative;
	border-color: #bdf;
	background-color: #bdf;
}
.example-file.loading td:last-child::after {
	position: absolute;
	top: 0;
	right: 0;
	width: 1em;
	text-align: center;
	content: "⌛";
}
.example-files tbody:not(:first-child),
.example-files tfoot:not(:first-child),
.example-files:not(:first-child) tbody,
.example-files:not(:first-child) tfoot {
	border-top: 0.0625em solid gray;
}
.example-files tbody:not(:last-child),
.example-files tfoot:not(:last-child),
.example-files:not(:last-child) tbody,
.example-files:not(:last-child) tfoot {
	border-bottom: 0.0625em solid gray;
}
.example-files tbody tr:first-child td,
.example-files tfoot tr:first-child td {
	padding-top: 1em;
}
.example-files tbody tr:last-child td,
.example-files tfoot tr:last-child td {
	padding-bottom: 1em;
}
.example-files button {
	width: 100%;
}
.button,
.button .button-close:not(:hover) {
	background-color: rgba(0,0,0, 0.1);
}
.button.without-options:not(:hover) {
	background-color: rgba(0,0,0, 0.2);
}
.button.show:not(:hover) {
	background-color: #ace;
}
.button.show:hover {
	background-color: #bdf;
}
.button:hover {
	background-color: white;
}
.button.loading {
	background-color: #eda;
}
.button.failed {
	background-color: #f88;
}
.button .button-select {
	border: none;
	background: transparent;
}
.button .button-close,
.button .button-thumbnail {
	display: flex;
	min-width: 2.5em;
	min-height: 2.5em;
}
.button .button-close {
	border: none;
}
.button .button-close::after {
	content: "⨉";
}
.button .button-close::after,
.button .thumbnail-hover {
	margin: auto;	/* <- centered content */
	line-height: 0;	/* <- prevent text baseline from messing with alignment */
}
.button .button-close:hover {
	color: white;
	background-color: #f88;
}
.thumbnail {
	align-self: center;
	background-color: transparent;
	border: 0.0625em solid transparent;
}
.thumbnail-hover:hover .thumbnail,
.thumbnail.larger {
	background-color: rgba(0,0,0, 0.4);
	border-color: white;
}
.thumbnail-hover {
	position: relative;
	display: flex;
	cursor: zoom-in;
}
.thumbnail-hover .larger {
	position: absolute;
	top: 100%;
	left: 100%;
	z-index: 1;
}
.thumbnail-hover:not(:hover) .larger {
	display: none;
}
.thumbnail:not(img) {
	background-position: center;
	background-repeat: no-repeat;
}
.fixed-tab-width .main.panel.row .button-text {
	width: 8em;			/* <- "em" is bad with different font-sizes on different lines, so set only here */
}
.count-line,
.fixed-tab-width .main.panel.row .button-text,
.fixed-tab-width .main.panel.row .button-text * {
	overflow: hidden;
	text-overflow: ellipsis;	/* <- requires max-width */
	white-space: nowrap;
}
.main.panel.row .button-text {
	text-align: left;
	margin: 0.25em 0.5em;
}
.main.panel.row .button-name {
	font-size: 80%;
	font-weight: bold;
}
.main.panel.row .button-status {
	font-size: 70%;
	opacity: 0.35;
}
.main.panel.row .button-select,
.main.panel.row .button-close,
.main.panel.row .button {
	display: inline-flex;	/* <- vertically fill container row height */
}
.loaded-file:not(.show),
.loaded-file:empty {
	display: none;
}
.loaded-file > header {
	padding: 0.5em 1em;
}
.loaded-file > header.filename {
	padding: 0 1em 1em 0;
}
.loaded-file .project-render :not(img),
.loaded-file table,
.loaded-file tr,
.loaded-file th {
	margin: 0;
	padding: 0;
	border-collapse: collapse;
	white-space: nowrap;
}
.loaded-file .project-render .render-debug-nested-level {
	padding-left: 1em;
	border-left: 0.2em solid #bbb;
}
.loaded-file .project-render .render-debug-nested-level:hover {
	border-color: #bdf;
}
.loaded-file img {
	padding: 0.5em;
	margin: 0.5em;
	border: 0.0625em solid #ddd;
	box-shadow: 0.1875em 0.1875em rgba(0,0,0, 0.1);
}
.loaded-file img[onclick]:hover {
	border-color: gray !important;
}
.project-options header {
	padding: 0.5em 1em;
	background-color: rgba(0,0,0, 0.1);
}
.project-options .option-select {
	max-width: 10em;
}
.project-options select {
	display: block;
	border-width: 0.0625em;
	width: 100%;
	min-width: 8em;
}
.project-options select,
.project-options option {
	color: black;
	background-color: white;
}
.project-options select[value][value=""],
.project-options option:empty {
	background-color: #ddd;
}
.project-options label {
	display: block;
	min-width: 2.5em;
	height: 1.25em;
}
.project-options label :not(input) {
	display: flex;
	height: 100%;
	align-items: center;
	text-align: center;
}
.project-options label :not(input):not(:empty) {
	min-width: 4em;
	padding: 0 0.5em;
}
.project-options label :not(input)::before {
	width: 100%;
}
.project-options .batch-batched::before {	content: "\2E2C";}
.project-options .batch-batched {		background-color: #eda;}
.project-options .batch-batched:hover {		background-color: #feb;}

.project-options .batch-single::before {	content: "\2E30";}
.project-options .batch-single {		background-color: #ace;}
.project-options .batch-single:hover {		background-color: #bdf;}

.project-options .layout-inline::before {	content: "\22EF";}
.project-options .layout-inline {		background-color: #ace;}
.project-options .layout-inline:hover {		background-color: #bdf;}

.project-options .layout-newline::before {	content: "\22EE";}
.project-options .layout-newline {		background-color: #cea;}
.project-options .layout-newline:hover {	background-color: #dfc;}

.project-options .option-omitable::before {	content: "[-]"; font-family: monospace;}
.project-options .option-omitable {		background-color: #ace;}
.project-options .option-omitable:hover {	background-color: #bdf;}

.project-options .option-unomitable::before {	content: "[+]"; font-family: monospace;}
.project-options .option-unomitable {		background-color: #8cd;}
.project-options .option-unomitable:hover {	background-color: #9df;}

.project-options .prefix-prefixed::before {	content: "[=]"; font-family: monospace;}
.project-options .prefix-prefixed {		background-color: #ace;}
.project-options .prefix-prefixed:hover {	background-color: #bdf;}

.project-options .prefix-unprefixed::before {	content: "[o]"; font-family: monospace;}
.project-options .prefix-unprefixed {		background-color: #bbb;}
.project-options .prefix-unprefixed:hover {	background-color: #ccc;}

.project-options label input:disabled ~ :not(input):hover,
.project-options label input:disabled ~ :not(input) {
	background-color: gray;
	cursor: not-allowed;
}
.project-options label input:checked ~ .unchecked,
.project-options label input:not(:checked) ~ .checked,
.project-options label input[type="checkbox"] {
	display: none;
}
.project-options tr:empty {
	height: 1em;
}
.project-options th {
	padding: 0.5em 0;
}
.project-options td:last-child {
	padding-right: 0;
}
.project-options td:first-child {
	text-align: right;
	padding-left: 1em;
	padding-right: 0.5em;
	min-width: 9em;
	max-width: 9em;
	overflow: hidden;
	text-overflow: ellipsis;	/* <- requires max-width */
}
.project-options > table {
	max-width: 20em;
}
.project-render {
	white-space: normal;
}
.filename {
	font-weight: bold;
}
.filename .list-name {		color: #1e90ff;}
.filename .option-name {	color: #5f9ea0;}
.filename .selected-parts {
	color: #b184b1;
	/* border-radius: 0.5em; */
	/* margin: 0.25em; */
	padding: 0.25em;
}
details[open] .filename .selected-parts {
	background-color: lightyellow;
}
p.warning {
	text-align: center;
}
.warning::before {
	content: "⚠";
}
.count-label::before {
	content: " (";
}
.count-label::after {
	content: ")";
}
.count-label:empty::after {
	content: "?)";
}
.folder::before {
	content: "📂";
}
.nested-layer::before {
	content: "\21B3";
}
.help-section-header::before,
.section-link::before {
	content: "\A7";
	padding-right: 0.25em;
}
.external-link::after {
	/* padding-left: 0.25em; */
	content: "⎘";
}
.help-section-header::before,
.external-link::after,
.section-link::before {
	display: inline-block;	/* <- to remove underline, https://stackoverflow.com/a/15688237 */
	/* text-decoration: none; */
}
.help-section-header:not(:hover)::before {
	visibility: hidden;
}
.fade-out {
	transition: opacity 0.7s ease-in;
	opacity: 0;
}
.wip::before {
	display: inline-flex;
	align-self: center;
	align-content: center;
	content: attr(data-wip);	/* <- animated text */
	width: 1em;
}
[hidden],
.hidden {
	display: none !important;
}