HLRTest/render/base.css

307 lines
4.8 KiB
CSS

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,h2,h3,h4,h5 {
margin-top: 0;
}
.emoji:after {
font-variant-emoji: emoji; /* experimental and only in firefox :( */
content: '\FE0F'; /* fuck off, give me emoji // https://codepoints.net/U+FE0F */
}
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;
}
#options {
height: var(--options-height);
}
#table { }
#fail_images {
display: grid;
justify-content: center;
}
.panel {
display: block;
padding: 10px;
}
.panel > div {
line-height: 30px;
}
.sticky {
top: 0;
position: sticky;
z-index: 10;
}
.content {
grid-area: content;
overflow: auto;
justify-content: center;
}
body.min { /* split feature */
width: 75%; margin: 0 auto; /* FIXME */
}
.min .sidebar {
font-size: 12px;
}
.min .sidebar .panel > div {
line-height: 20px;
}
.min .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;
}
:root {
--animation-duration: 0.7s;
--height-image: calc((100vh - 800px) / 2);
}
.image-container,
.meta-block {
position: relative;
}
.meta-block h2 {
/*display: none;*/
font-family: monospace;
/*font-family: "Gill Sans", sans-serif;*/
padding-top: 10px;
margin-top: revert;
}
.meta-block h2:before {
content: "🎯\FE0F"; /* for hedging her bets; see .emoji for details */
}
#fail_images.padding .meta-block {
/*margin-block: 100vh;*/
padding-top: calc(var(--height-image));
/*padding-bottom: calc(50% - var(--height-image) );*/
}
#fail_images.padding .meta-block h2, .meta-block:first-child h2 {
border-top: none;
}
.block-diff {
display: none;
/*visibility: collapse;*/
position: absolute;
top: 0px;
/*z-index: 10;*/
}
.block-diff.show_diff {
display: block;
z-index: 2;
}
.image-container, img, .block {
max-width: 100%;
}
table {
position: relative;
width: 100%;
text-align: left;
border-collapse: collapse;
line-height: normal;
}
th, td {
padding: 0.15rem;
border: none;
}
th {
}
th.table-sticky {
position: sticky;
top: 0;
}
#options.sticky + #table th.table-sticky {
top: calc(var(--options-height) + 0.07em); /* FIXME */
}
.min .sidebar #options.sticky + #table th.table-sticky {
top: calc(var(--options-height-min) + 0.07em); /* FIXME */
}
input[type=range] { vertical-align: middle; }
a, a:visited {
}
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;}