144 lines
2.4 KiB
CSS
144 lines
2.4 KiB
CSS
body {
|
|
background-color: var(--color-body);
|
|
color: var(--color-body-text);
|
|
}
|
|
|
|
code {
|
|
background-color: var(--color-code);
|
|
border-color: var(--color-code-text);
|
|
color: var(--color-code-text);
|
|
}
|
|
|
|
.noscript {
|
|
box-sizing: border-box;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.spacer {
|
|
height: 3rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
section.fullheight {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
footer{
|
|
margin-top: 20rem;
|
|
}
|
|
|
|
|
|
.dragDrop {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100vh;
|
|
width: 100%;
|
|
|
|
background-color: var(--color-dragdrop);
|
|
color: var(--color-dragdrop-text);
|
|
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
z-index: 1000;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
|
|
--transition: all 0.25s ease-in-out 0s;
|
|
transition: var(--transition);
|
|
}
|
|
.dragDrop.hover, .dragDrop.loading {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
.dragDrop.loading {
|
|
background-color: var(--color-dragdrop-processing);
|
|
color: var(--color-dragdrop-processing-text);
|
|
}
|
|
.dragDrop .loader {
|
|
display: none;
|
|
}
|
|
.dragDrop.loading .loader {
|
|
display: block;
|
|
}
|
|
/*.dragDrop.loading p:first-child::before {
|
|
content: "⋮";
|
|
|
|
display: inline-flex;
|
|
width: 1em;
|
|
height: 1em;
|
|
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-content: center;
|
|
transform: rotate(0);
|
|
}*/
|
|
|
|
.pc .examples-list {
|
|
border: 1px solid var(--color-controls-button-border);
|
|
margin: 0;
|
|
border-radius: 0 4px 4px 4px;
|
|
}
|
|
|
|
.pc .examples-list table td:first-child {
|
|
padding: 12px 8px 12px 15px;
|
|
}
|
|
|
|
.pc .example-scroller-label {
|
|
display: inline-block;
|
|
margin: 0;
|
|
border: 1px solid var(--color-controls-button-border);
|
|
border-bottom-style: none;
|
|
color: var(--color-controls-button-text);
|
|
border-radius: 4px 4px 0 0;
|
|
padding: 2px 15px;
|
|
}
|
|
|
|
button, .button {
|
|
/* background-color: whitesmoke; */
|
|
color: var(--color-controls-button-text);
|
|
border-color: var(--color-controls-button-border);
|
|
}
|
|
button:hover, .button:hover{
|
|
color: var(--color-controls-button-text-hover);
|
|
}
|
|
|
|
.button-group {
|
|
margin-bottom: 2em;
|
|
}
|
|
.button-group > * {
|
|
border-radius: 0;
|
|
}
|
|
.button-group :first-child {
|
|
border-radius: 4px 0 0 4px;
|
|
}
|
|
.button-group :last-child {
|
|
border-radius: 0 4px 4px 0;
|
|
}
|
|
|
|
/* HELPERS */
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
.text-left {
|
|
text-align: left;
|
|
}
|
|
.text-right {
|
|
text-align: right;
|
|
}
|
|
|
|
.level {
|
|
float: left;
|
|
margin-right: 1.5em;
|
|
} |