client/styles.css
*,
*:after,
*:before {
overflow-wrap: break-word;
box-sizing: border-box !important;
color: inherit;
}
a {
text-decoration: none;
}
svg {
height: 1em;
width: 1em;
fill: currentColor;
}
.recharts-wrapper svg {
all: unset;
}
.siteLoading {
opacity: 0.5;
pointer-events: none;
filter: blur(10px);
user-select: none;
}
.siteLoading body {
animation-name: shimmer;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
svg.svgImage {
all: unset;
width: 100%;
height: auto;
}
a svg,
button svg {
opacity: 0.75;
}
a:hover svg,
a:focus svg,
button:hover svg,
button:focus svg {
opacity: 1;
}
::placeholder {
font-size: 0.85em;
}
.screen-reader-text:not(:focus):not(:active) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
body {
overflow-y: scroll;
overflow-x: hidden;
}
body.modal-open {
overflow-y: hidden;
}
.modal-open #root {
overflow-y: scroll;
}
#reader .drawingBuffer {
display: none;
}
select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
select option {
all: initial;
}
select::-ms-expand {
display: none;
}
input:checked ~ .dot {
transform: translateX(100%);
}
input:focus-visible ~ .toggleInner {
outline: 3px solid #333;
}
/*****************************************************************************
* ANIMATIONS
*****************************************************************************/
.log-entry-enter {
opacity: 0;
transform: translate(0, 50px);
}
.log-entry-enter-active {
opacity: 1;
transform: translate(0, 0);
transition: opacity 250ms cubic-bezier(0, 1, 0.02, 0.96),
transform 400ms cubic-bezier(0, 1, 0.02, 0.96);
}
.log-entry-exit {
opacity: 1;
position: absolute;
}
.log-entry-exit-active {
opacity: 0;
}
.toast-fadeout {
animation-fill-mode: both;
animation-iteration-count: 1;
animation-duration: 1s;
animation-delay: 3s;
animation-name: fadeOut;
}
.toast {
animation-delay: 0;
animation-duration: 0.25s;
animation-name: toastSlideUp;
animation-timing-function: cubic-bezier(0.2, 1, 0, 0.9);
}
.shutter {
animation-fill-mode: both;
animation-iteration-count: 1;
animation-duration: 0.75s;
animation-name: fadeOut;
}
@keyframes toastSlideUp {
from {
transform: translateY(100px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes shimmer {
from {
opacity: 1;
}
to {
opacity: 0.75;
}
}
/*****************************************************************************
* MARKDOWN
*****************************************************************************/
.md h1 {
font-size: 1.5em;
line-height: 1.2em;
}
.md h2 {
font-size: 1.45em;
line-height: 1.2em;
}
.md h3 {
font-size: 1.35em;
line-height: 1.2em;
}
.md h4 {
font-size: 1.3em;
line-height: 1.2em;
}
.md h5 {
font-size: 1.2em;
line-height: 1.2em;
}
.md h6 {
font-size: 1.1em;
line-height: 1.2em;
}
.md pre {
max-height: 20vh;
overflow: scroll;
background: #fafafa;
border: 1px solid #eee;
padding: 1em;
border-radius: 5px;
}
.md pre code {
white-space: pre;
}
.md ul,
.md ol {
display: block;
padding-left: 1.5em;
list-style: circle;
}
.md ol {
list-style: decimal;
}
.md li + li {
margin-top: 0.5em;
}
.md * + * {
margin-top: 1em;
}
.md blockquote {
opacity: 0.7;
border-left: 4px solid #eee;
padding-left: 1em;
font-size: 0.9em;
line-height: 1.2em;
max-width: 42em;
}
.md p,
.md li {
max-width: 42rem;
}
.md a {
color: blue;
text-decoration: underline;
}
.md a:hover,
.md a:focus,
.md a:active {
color: darkblue;
}