NightFox
a09c4968c9
use hybrid emoji (different fonts for better UX) add missing Twemoji.Mozilla license
399 lines
6.6 KiB
CSS
399 lines
6.6 KiB
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.ttf");
|
||
}
|
||
/*@font-face {
|
||
font-family: "OpenMojiDemoFont";
|
||
src: url("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,h2,h3,h4,h5 {
|
||
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;
|
||
}
|
||
.emoji:after {
|
||
font-variant-emoji: emoji; /* experimental 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;
|
||
}
|
||
.emoji.Noto {
|
||
font-family: "Noto Color Emoji", sans-serif;
|
||
font-size: 14px;
|
||
/*vertical-align: top;*/
|
||
}
|
||
.emoji.OpenMoji {
|
||
font-family: "OpenMojiDemoFont", sans-serif;
|
||
font-size: 17px;
|
||
position: relative;
|
||
left: -1px;
|
||
}
|
||
.emoji.OpenMoji + .text-left-margin {
|
||
margin-left: 0;
|
||
}
|
||
.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;
|
||
}
|
||
|
||
#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;
|
||
}
|
||
.block-gold.anim_off,
|
||
.block-gold.anim_force_off {
|
||
animation: none;
|
||
}
|
||
|
||
|
||
: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: 2px;
|
||
/*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;
|
||
/*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: 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 {
|
||
|
||
}
|
||
|
||
|
||
.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);
|
||
} |