HLRTest/render/base.css

@font-face {
	font-family: "Noto Color Emoji";
	src: url("./fonts/NotoColorEmoji/Noto-COLRv1-noflags.ttf");
}
@font-face {
	font-family: "OpenMojiDemoFont";
	src: url("./fonts/OpenMoji/OpenMoji-color-colr1_svg.woff2") format("woff2");
}
@font-face {
	font-family: "Twemoji Mozilla Built";
	src: url("./fonts/Mozilla/Twemoji.Mozilla.ttf");
}


html, body {
	box-sizing: border-box;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: system-ui;
	/*font-variant: all-petite-caps;*/
}
*, *:before, *:after {
  box-sizing: inherit;
}

h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child {
	margin-top: 0;
}

.emoji {
	font-family: "Noto Color Emoji", sans-serif;
	font-family: "OpenMojiDemoFont", sans-serif;
	font-family: "Twemoji Mozilla Built", sans-serif;
	font-size: 16px;
	font-weight: 400;
	font-style: normal;
	position: relative;
	/*top: 1px; /* Twemoji */
}
.emoji:after {
	font-variant-emoji: emoji; /* experimental feature and only in firefox :( */
	content: '\FE0F'; /* fuck off, give me emoji // https://codepoints.net/U+FE0F */
}
.emoji.Twemoji {
	font-family: "Twemoji Mozilla Built", sans-serif;
	font-size: 16px;
	top: 2px;
}
.emoji.Noto {
	font-family: "Noto Color Emoji", sans-serif;
	font-size: 14px;
	/*left: -1px;*/
	top: 0px;
}
.emoji.OpenMoji {
	font-family: "OpenMojiDemoFont", sans-serif;
	font-size: 17px;
	left: -2px;
	top: 0px;
	color: #888; /* fix outline */
}
.emoji.OpenMoji + .text-left-margin {
	margin-left: 0;
}
.emoji.Noto + .text-left-margin {
	margin-left: 5px;
}
.sidebar .emoji.Noto + .emoji.Noto {
	margin-left: 4px;
}


footer {
	text-align: center;
	color: #888;
	margin: .5em;
}

.autocomplete {
	position: relative;
	display: inline-block;
}

.autocomplete-items {
	z-index: 99;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
}

.autocomplete-item {
	background-color: #fefefe;
	cursor: pointer;
	border: 1px solid #eee;
	border-top: none;
}

.autocomplete-item:hover {
	background-color: #e9e9e9;
}

.item-inactive {
	padding: 5px;
}

.item-inactive .group {
	color: #777;
}

.item-active {
	padding: 5px;
	background-color: DodgerBlue !important;
	color: #fff;
}

.item-active .group {
	color: #ccc;
}
/*
table, tr, td, th {
	border: 1px solid #888;
}
*/



:root {
	--caption-size: 2rem;
	--outline-width: 2px;
	--outline-width-: calc(0px - var(--outline-width));
	--options-height: 18.6em; /* FIXME */
	--options-height-min: 17em;
	--image-height: 800px;
}


.grid-container {
	display: grid;
	width: 100%;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto;
	grid-template-areas: "sidebar content";
	column-gap: 10px;
	height: 100vh;
}
.grid-container.reversed {
	grid-template-columns: 1fr auto;
	grid-template-areas: "content sidebar";
}

.sidebar {
	grid-area: sidebar;
	/*position: fixed;*/
	height: 100vh;
	overflow-y: auto;
	white-space: nowrap; /* ugly firefox */
	overflow-block: scroll; /* ugly firefox */
	display: grid;
	grid-gap: 2px;
	align-items: stretch;
	align-content: baseline;
}
.sidebar h2 {
	font-size: 17px;
}
#options {
	height: var(--options-height);
}
#table { }

#fail_images {
	display: grid;
	justify-content: left;
}
#fail_images.center,
.grid-container.reversed #fail_images.center{
	justify-content: center;
}
.grid-container.reversed #fail_images {
	justify-content: right;
}

.panel {
	display: block;
	padding: 10px;
}
.panel > div {
	line-height: 30px;
}
.sticky {
	top: 0;
	position: sticky;
	z-index: 10;
}

.content {
	grid-area: content;
	overflow: auto;
	padding: 0px 10px;
}



body.mini { /* split feature */
	width: 75%; margin: 0 auto; /* FIXME */
}
.mini .sidebar {
	font-size: 12px;
	/*font-weight: bold;*/
}
.mini .sidebar .panel > div {
	line-height: 20px;
}
.mini .sidebar #options.panel {
	height: var(--options-height-min);
}



@keyframes flash {
	0% {
		z-index: 1;
	}
	49% {
		z-index: 1;
	}
	50% {
		z-index: -1;
	}
	100% {
		z-index: -1;
	}
}
.block {
	position: relative;
	display: block;
	max-height: var(--image-height);
}
.block:after {
	display: block;
	position: absolute;
	bottom: 20px;
	left: 25px;

	font-family: Impact;
	font-size: var(--caption-size);
	/*-webkit-text-stroke: 1px black;*/ /*ugly*/
	text-shadow:
	var(--outline-width) var(--outline-width) 0 #000,
	var(--outline-width-) var(--outline-width) 0 #000,
	var(--outline-width-) var(--outline-width-) 0 #000,
	var(--outline-width) var(--outline-width-) 0 #000;
}
.block-test:after {
	/*content: "TEST 🧪\FE0F";*/
	content: "TEST";
	color: white;
}
.block-gold:after {
	/*content: "GOLD 🏆\FE0F";*/
	content: "GOLD";
	color: gold;
}

/*
.block:before {
	display: block;
	position: absolute;
	bottom: 20px;
	left: 20px;
}
.block-test:before {
	content: "🧪\FE0F";
	color: white;
}
.block-gold:before {
	content: "🏆\FE0F";
	color: gold;
}
*/

.block-gold {
	position: absolute;
	animation: flash var(--animation-duration) infinite;
}
.block-gold.anim_off,
.block-gold.anim_force_off,
.all_diff .block-gold,
.split_compare .block-gold{
	animation: none;
}





.split_compare .image-container {
	cursor: col-resize;
}
.split_compare .block-gold {
	overflow: hidden;
	width: 50%;
	position: absolute;
	z-index: 10;
}

.split_compare .separator {
	width: 1px;
	height: 100%;
	cursor: col-resize;
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 10;
	backdrop-filter: invert(1);
}
.split_compare .block-test:after {
	left: auto;
	right: 25px;
}




:root {
	--animation-duration: 0.7s;
	--height-image: calc((100vh - 800px) / 2);
}

.image-container,
.meta-block {
	position: relative;
}

.meta-block h3 {
	/*display: none;*/
	font-family: monospace;
	/*font-family: "Gill Sans", sans-serif;*/
	padding-top: 10px;
	margin-top: revert;
	/*font-size: 150%;*/
	font-size: 1.5em;
}
.meta-block h3:before {
	content: "🎯\FE0F"; /* for hedging her bets; see .emoji for details */
}

.text-link {
	text-decoration: none;
}

#fail_images.vpadding .meta-block {
	/*margin-block: 100vh;*/
	padding-top: calc(var(--height-image));
	padding-bottom: 2px;
	/*padding-bottom: calc(50% - var(--height-image) );*/
}
#fail_images.vpadding .meta-block h3, .meta-block:first-child h3 {
	border-top: none;
}

.block-diff {
	display: none;
	/*visibility: collapse;*/
	position: absolute;
	top: 0px;
	/*z-index: 10;*/
}

.block-diff.show_diff,
.all_diff .block-diff {
	display: block;
	z-index: 2;
}

.diff_separate .block-diff {
	display: block;
	position: relative;
	top: auto;
}

.image-container, img, .block {
	max-width: 100%;
	user-select: none;
}
/* TODO: исправить конфликт с image split compare */
.split_compare .image-container,
.split_compare img,
.split_compare .block {
	max-width: unset;
}

table {
	position: relative;
	width: 100%;
	text-align: left;
	border-collapse: collapse; 
	line-height: normal;
	/*overflow: hidden;*/ /* ugly chrome-based */
}
th, td {
	padding: 0.15rem;
	border: none;
}
tr {
	padding: 0.15rem;
	border: none;
	cursor: pointer;
}
tr a {
	text-decoration: none;
}
th {
	z-index: 1;
}
th.table-sticky {
	position: sticky;
	top: 2.7em; /* FIXME */
}
.mini th.table-sticky {
	position: sticky;
	top: 3.53em; /* FIXME */
}
#options.sticky + #table th.table-sticky {
	top: calc(var(--options-height) + 2.74em); /* FIXME */
}
.mini .sidebar #options.sticky + #table th.table-sticky {
	top: calc(var(--options-height-min) + 3.50em); /* FIXME */
}
.filter {
	display: block;
	padding: 10px 4px;
	font-size: 16px;
	font-weight: bold;
}
.filter * {
	font-weight: normal;
}
.mini .filter {
	font-size: 12px;
}

#options.sticky + #table .filter.sticky {
	top: calc(var(--options-height) + 0.0em); /* FIXME */
}
.mini .sidebar #options.sticky + #table .filter.sticky {
	top: calc(var(--options-height-min) + 0.0em); /* FIXME */
}
.filter input {
	margin-left: 10px;
}
#options .filter.sticky {
	
}




input[type=range] { vertical-align: middle; }

a, a:visited {
	
}


.text-left-margin {
	margin-left: 6px;
}

ul.list {
	margin: 0;
}
ul.list li { display: inline-block; margin-left: 10px; } /* FIXME: flex or grid */
ul.list li:first-child { margin-left: 0;}

summary {
	cursor: pointer;
	list-style: none;
}
summary:before {
	content: "📁\FE0F +";
	margin: -5px 5px 0 0;
}
details[open] summary:before {
	content: "📂\FE0F −";
}


.red {
	color: #f53200;
	color: oklch(62.8% 0.25768330773615683 32.82);
}
.yellow {
	color: #d3a100;
	color: oklch(76.67% 0.17685825418032033 90.53);
}
.green {
	color: #6b9a00;
	color: oklch(62.8% 0.25768330773615683 128.19);
}

table th:nth-child(3) {
	text-align: center;
}
table td:nth-child(3) { /* Δ, % // TODO: add class */
	text-align: right;
	font-family: Consolas, monospace;
}
table td:nth-child(4) { /* Passed // TODO: add class */
	text-align: center;
}