943 lines
17 KiB
CSS
Executable file
943 lines
17 KiB
CSS
Executable file
:root {
|
|
--padding: 20px;
|
|
--about-w: 30vw;
|
|
}
|
|
|
|
body {
|
|
position: fixed;
|
|
top: 0px;
|
|
left: 0px;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
body:not(.debug) .debug {
|
|
display: none;
|
|
}
|
|
|
|
body.debug div:not(.centerLine) {
|
|
border: 1px solid green;
|
|
}
|
|
|
|
.hideBody {
|
|
display: none;
|
|
}
|
|
|
|
/*
|
|
* Note: These fonts are not free and therefore not in this repository.
|
|
* If you want to buy them, please visit celinehurka.com, thanks! :-)
|
|
*
|
|
* */
|
|
@font-face {
|
|
font-family: "vtVF";
|
|
src: url("/web/fonts/vtVF.ttf") format("TrueType");
|
|
}
|
|
@font-face {
|
|
font-family: "VariableIcons";
|
|
src: url("/web/fonts/variabletimeicons-Regular.otf") format("OpenType")
|
|
}
|
|
@font-face {
|
|
font-family: "Tonka";
|
|
src: url("/web/fonts/TonkaVF.woff2") format("woff2")
|
|
}
|
|
@font-face {
|
|
font-family: "Version-2-var";
|
|
src: url("/web/fonts/Version-2-var.ttf") format("TrueType");
|
|
font-weight: 100 1000;
|
|
font-display: swap;
|
|
/*animation: fontWeightAnimation 15s infinite ease-in-out;*/
|
|
}
|
|
|
|
#content {
|
|
position: fixed;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0.1;
|
|
cursor: grab;
|
|
}
|
|
|
|
.textObject {
|
|
font-family: "Version-2-var";
|
|
font-size: 10em;
|
|
font-variation-settings: "wght" 375;
|
|
right: 0px;
|
|
top: 20px;
|
|
position: absolute;
|
|
max-width: 50%;
|
|
line-height: 1.1em;
|
|
z-index: 1;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.textObject:hover .header {
|
|
display: flex;
|
|
}
|
|
|
|
.textObject .header {
|
|
display: none;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
padding: 2px;
|
|
background-color: blue;
|
|
color: white;
|
|
|
|
font-family: sans-serif;
|
|
font-size: 11px;
|
|
line-height: 11px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.textObject .header .move,
|
|
.textObject .header .duplicate,
|
|
.textObject .header .delete {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: move;
|
|
padding: 4px;
|
|
width: 100%;
|
|
border: 1px solid red;
|
|
}
|
|
|
|
.textObject .text {
|
|
position: absolute;
|
|
z-index: 9;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.textObject:hover .text.original {
|
|
border: 1px solid red;
|
|
}
|
|
|
|
.textObject:hover .text.mirror_x,
|
|
.textObject:hover .text.mirror_y,
|
|
.textObject:hover .text.mirror_xy {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.panel {
|
|
font-size: 10em;
|
|
right: 0px;
|
|
bottom: 10px;
|
|
position: absolute;
|
|
background-color: transparent;
|
|
height: fit-content;
|
|
display: flex;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.panel .header {
|
|
flex-direction: column;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
padding: 2px;
|
|
background-color: blue;
|
|
display: none;
|
|
color: white;
|
|
|
|
font-family: sans-serif;
|
|
font-size: 11px;
|
|
line-height: 11px;
|
|
}
|
|
|
|
.panelWrapper:first-child {
|
|
order: 0;
|
|
}
|
|
|
|
.panelWrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.panel button {
|
|
padding: 5px;
|
|
box-sizing: border-box;
|
|
white-space: nowrap;
|
|
border: none;
|
|
/* background: white; */
|
|
/* color: white; */
|
|
font-family: "Tonka";
|
|
margin-right: 10px;
|
|
text-transform: uppercase;
|
|
padding-top: 7px;
|
|
width: fit-content;
|
|
align-self: flex-end;
|
|
margin-top: 10px;
|
|
/* color: #ea2333; */
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.panel button:hover {
|
|
background-color: #DADADB;
|
|
}
|
|
|
|
.panel .header .move {
|
|
display: flex;
|
|
cursor: move;
|
|
}
|
|
|
|
#notice {
|
|
position: fixed;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0,0,0,0.5);
|
|
z-index: 2000;
|
|
display: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-family: "Tonka";
|
|
font-variation-settings: 'wght' 500;
|
|
font-size: 0.8em;
|
|
}
|
|
#notice.visible {
|
|
display: flex;
|
|
}
|
|
|
|
#notice .content {
|
|
width: fit-content;
|
|
height: fit-content;
|
|
padding: 2em;
|
|
color: black;
|
|
background-color: white;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#notice .content .what p {
|
|
color: black;
|
|
}
|
|
|
|
#notice .content .details p {
|
|
color: black;
|
|
}
|
|
|
|
.exporterChild * {
|
|
font-family: "Tonka";
|
|
}
|
|
|
|
.options_title{
|
|
font-variation-settings: 'wght' 600 !important;
|
|
font-size: 0.9em;
|
|
text-align: right;
|
|
}
|
|
|
|
.options_cont{
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
column-gap: 25px;
|
|
padding: 10px;
|
|
|
|
}
|
|
.options_cont:not(.options_cont:first-of-type){
|
|
border-left: 1px dashed #91919177;
|
|
}
|
|
|
|
.options_cont p{
|
|
margin: 0;
|
|
height: fit-content;
|
|
font-variation-settings: 'wght' 800;
|
|
}
|
|
|
|
.options{
|
|
row-gap: 5px;
|
|
display: grid;
|
|
height: fit-content;
|
|
}
|
|
|
|
.options.adjustable{
|
|
row-gap: 0px;
|
|
display: grid;
|
|
column-gap: 10px;
|
|
font-variation-settings: 'wght' 800;
|
|
}
|
|
.options.adjustable label{
|
|
grid-column-start: 1;
|
|
white-space: nowrap;
|
|
}
|
|
.options input:focus{
|
|
border-color: transparent;
|
|
}
|
|
.options input {
|
|
font-variation-settings: 'wght' 800;
|
|
margin: 3px 0px 8px 0px;
|
|
padding: 1px 2px;
|
|
font-size: 1.1em;
|
|
/* grid-column-start: 2; */
|
|
width: fit-content;
|
|
height: fit-content;
|
|
/* text-align: center; */
|
|
border: none;
|
|
}
|
|
|
|
.exporterChild {
|
|
background-color: white;
|
|
width: 100%;
|
|
/* min-height: fit-content; */
|
|
/* max-height: 40vh;*/
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
padding: 0px 15px;
|
|
display: flex;
|
|
transition: 0.5s margin-bottom;
|
|
|
|
}
|
|
|
|
.exporterChild:not(.exporterShown .exporterChild){
|
|
margin-bottom: -50vh;
|
|
}
|
|
|
|
.exporterShown .exporterChild{
|
|
margin-bottom: 0vh;
|
|
}
|
|
|
|
#loader{
|
|
position: fixed;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
#exporter{
|
|
position: fixed;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
.exporter_options_child{
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
}
|
|
#export_progress_task{
|
|
margin: 15px 0px 0px 0px;
|
|
}
|
|
|
|
.loaderChild {
|
|
text-align: center;
|
|
}
|
|
|
|
.loaderChild h1 {
|
|
font-size: 1em;
|
|
font-family: 'Tonka';
|
|
}
|
|
|
|
#exporter {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
z-index: 1000;
|
|
transition: 0.5s opacity;
|
|
display: flex;
|
|
}
|
|
#exporter.exporterShown{
|
|
opacity: 1;
|
|
pointer-events: all;
|
|
}
|
|
|
|
#loader {
|
|
display: flex;
|
|
z-index: 20002;
|
|
font-family: 'monospace';
|
|
background: white;
|
|
}
|
|
|
|
#loader #loader_progress,
|
|
#loader #loader_progress_task,
|
|
#exporter #export_progress,
|
|
#exporter #export_progress_task {
|
|
font-family: 'Tonka';
|
|
background-color: white;
|
|
font-variation-settings: 'wght' 600;
|
|
}
|
|
|
|
#export_progress{
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.exportButtonsCont button {
|
|
margin: 0px;
|
|
background-color: rgba(222, 222, 222, 0.97);
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 7px 15px;
|
|
border-radius: 10px;
|
|
font-size: 0.9em;
|
|
text-transform: uppercase;
|
|
font-variation-settings: 'wght' 800;
|
|
|
|
|
|
}
|
|
|
|
.exporter_options_buttons{
|
|
display: flex;
|
|
margin: 0 10px;
|
|
}
|
|
|
|
.exportButtonsCont button:not([disabled]):hover{
|
|
background: black;
|
|
color: white;
|
|
}
|
|
|
|
.exportButtonsCont {
|
|
display: grid;
|
|
grid-template-rows: 1fr 1fr;
|
|
row-gap: 5px;
|
|
padding: 0px 5px;
|
|
}
|
|
|
|
#exporter_options {
|
|
/* border: 1px solid green;*/
|
|
overflow-y: auto;
|
|
width: 100%;
|
|
background: rgba(247,247,247,1);
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
margin-left: 5px;
|
|
}
|
|
#exporter_close:hover{
|
|
background: black;
|
|
color: white;
|
|
}
|
|
#exporter_close{
|
|
padding: calc(var(--padding)/2) calc(var(--padding)/2) calc(var(--padding)/2.5) calc(var(--padding)/2);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 10px;
|
|
width: fit-content;
|
|
height: fit-content;
|
|
font-variation-settings: 'wght' 800;
|
|
text-transform: uppercase;
|
|
background: rgba(255, 255, 255, 1);
|
|
font-size: 0.8em;
|
|
cursor: pointer;
|
|
grid-column-start: 5;
|
|
grid-row-start: 1;
|
|
justify-self: flex-end;
|
|
font-family: "Tonka";
|
|
color: black;
|
|
text-decoration: none;
|
|
background: rgba(242, 242, 242, 0.97);
|
|
}
|
|
.exporter_dimension_warning {
|
|
background: pink;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
font-variation-settings: 'wght' 500;
|
|
font-size: 0.8em;
|
|
flex-direction: column;
|
|
border-radius: 10px;
|
|
/* max-width: 70%; */
|
|
grid-column-start: 1;
|
|
grid-column-end: 3;
|
|
}
|
|
.exporter_dimension_warning p{
|
|
margin: 0;
|
|
}
|
|
|
|
#exporter_render_info {
|
|
display: none;
|
|
color: rgb(234, 35, 51);
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: 0;
|
|
font-family: 'Tonka';
|
|
font-variation-settings: 'wght' 800;
|
|
}
|
|
#exporter_render_info p {
|
|
max-width: 500px;
|
|
}
|
|
|
|
|
|
.artboard_width::before,
|
|
.render_width::before {
|
|
content: "width: ";
|
|
font-variation-settings: 'wght' 500;
|
|
|
|
}
|
|
|
|
.artboard_height::before,
|
|
.render_height::before {
|
|
content: "height: ";
|
|
font-variation-settings: 'wght' 500;
|
|
|
|
}
|
|
|
|
.render_pixels::before {
|
|
content: "total pixel count: ";
|
|
font-variation-settings: 'wght' 500;
|
|
|
|
}
|
|
|
|
.render_length::before {
|
|
content: "length: ";
|
|
font-variation-settings: 'wght' 500;
|
|
|
|
}
|
|
|
|
.render_length::after {
|
|
content: " seconds";
|
|
font-variation-settings: 'wght' 500;
|
|
|
|
}
|
|
.artboard_pixelDensity::before {
|
|
content: "pixel density: ";
|
|
font-variation-settings: 'wght' 500;
|
|
|
|
}
|
|
|
|
#artboard_scale_label::before {
|
|
content: "render scale (";
|
|
font-variation-settings: 'wght' 500;
|
|
|
|
}
|
|
#artboard_scale_label::after {
|
|
content: "): ";
|
|
font-variation-settings: 'wght' 500;
|
|
|
|
}
|
|
#render_timescale_label::before {
|
|
content: "render timestretch (";
|
|
font-variation-settings: 'wght' 500;
|
|
|
|
}
|
|
#render_timescale_label::after {
|
|
content: "): ";
|
|
font-variation-settings: 'wght' 500;
|
|
|
|
}
|
|
|
|
#player {
|
|
display: none;
|
|
position: relative;
|
|
max-width: 80%;
|
|
max-height: 80%;
|
|
}
|
|
|
|
/*.fontFamilyWrapper{
|
|
order: 0;
|
|
}
|
|
.fontSizeWrapper{
|
|
order: 1;
|
|
}
|
|
.etterSpacingWrapper{
|
|
order: 2;
|
|
}
|
|
.lineHeighWrapper{
|
|
order: 3;
|
|
}
|
|
.textWrapper{
|
|
order: 4;
|
|
}
|
|
.fontVariationAxesContWrapper{
|
|
order: 5;
|
|
}
|
|
.xWrapper{
|
|
order: 6;
|
|
}
|
|
.yWrapper{
|
|
order: 7;
|
|
}
|
|
.alignButtonsHorizontal{
|
|
order: 8;
|
|
}
|
|
.alignButtonsVertical{
|
|
order: 9;
|
|
}*/
|
|
|
|
#midiController {
|
|
display: none;
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 20px;
|
|
width: 50%;
|
|
height: 25%;
|
|
background: yellow;
|
|
z-index: 1001;
|
|
}
|
|
|
|
#midiController .midiMessages {
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
#midiController .buttons div {
|
|
cursor: pointer;
|
|
}
|
|
|
|
#timeline {
|
|
position: fixed;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 20px;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
background: grey;
|
|
z-index: 1002;
|
|
}
|
|
|
|
#timeline_head {
|
|
position: absolute;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
width: 20px;
|
|
height: 20px;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
background: black;
|
|
z-index: 1002;
|
|
}
|
|
|
|
/* ABOUT BEGIN */
|
|
.overlay-text-cont.hidden {
|
|
margin-left: calc(var(--about-w)*-1);
|
|
|
|
}
|
|
|
|
.overlay-text-cont {
|
|
display: flex;
|
|
position: fixed;
|
|
width: var(--about-w);
|
|
height: 100vh;
|
|
top: 0;
|
|
left: 0;
|
|
transition: 0.5s margin-left;
|
|
margin-left: 0vw;
|
|
overflow-y: scroll;
|
|
background: rgba(242, 242, 242, 0.97);
|
|
padding-bottom: var(--padding);
|
|
box-sizing: border-box;
|
|
z-index: 20100;
|
|
}
|
|
|
|
.overlay-text-cont::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.overlay-text-cont::-webkit-scrollbar-thumb {
|
|
background: #c2c2c2;
|
|
}
|
|
|
|
.overlay-text-cont::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
}
|
|
|
|
.overlay-text {
|
|
z-index: 1005;
|
|
backdrop-filter: blur(3px);
|
|
width: 100%;
|
|
padding: calc(var(--padding)/2) calc(var(--padding)/2);
|
|
font-family: "Tonka";
|
|
display: grid;
|
|
column-gap: var(--padding);
|
|
margin-bottom: var(--padding);
|
|
height: fit-content;
|
|
}
|
|
|
|
.about-text {
|
|
grid-column-start: 1;
|
|
grid-column-end: 5;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.overlay-text *::selection {
|
|
background-color: #91919177;
|
|
}
|
|
|
|
.overlay-text p {
|
|
grid-column-start: 1;
|
|
font-variation-settings: 'wght' 500;
|
|
line-height: 1.2em;
|
|
}
|
|
|
|
.overlay-text a {
|
|
font-variation-settings: 'wght' 700;
|
|
color: black;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.expanded{
|
|
|
|
overflow: hidden;
|
|
height: fit-content;
|
|
|
|
transition: 0.5s max-height;
|
|
|
|
/* padding-left: 1em;*/
|
|
display: none;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.expanded p:last-of-type{
|
|
margin-bottom: 1em;
|
|
}
|
|
.expanded p:first-of-type{
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
.instructions .textParent{
|
|
padding-left: 1em;
|
|
}
|
|
.textParent:not(.textParent:first-of-type){
|
|
/*border-top: 1px dashed #91919177;
|
|
padding-top: 0.5em;*/
|
|
}
|
|
.textParent p{
|
|
margin-top: 0px;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
.openText .expanded{
|
|
display: flex;
|
|
}
|
|
|
|
.aboutParent{
|
|
margin-bottom: 1.5em;
|
|
}
|
|
|
|
.expanded video{
|
|
max-width: 250px;
|
|
min-width: 200px;
|
|
align-self: center;
|
|
justify-self: end;
|
|
display: flex;
|
|
margin: 1em;
|
|
border: 1px solid lightgrey;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.expandText{
|
|
border: none;
|
|
font-size: 1em;
|
|
cursor: pointer;
|
|
display: inline;
|
|
mix-blend-mode: multiply;
|
|
/* padding: calc(var(--padding)/4); */
|
|
padding: calc(var(--padding)/6) calc(var(--padding)/6) calc(var(--padding)/6.5) calc(var(--padding)/6);
|
|
background: #91919177;
|
|
border-radius: 5px;
|
|
margin-left: 0.3em;
|
|
width: 1em;
|
|
height: 1em;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.expandText:hover{
|
|
background: black;
|
|
color: white;
|
|
}
|
|
|
|
*{
|
|
font-weight: normal !important;
|
|
|
|
}
|
|
|
|
h4{
|
|
font-weight: normal;
|
|
margin-top: 0px;
|
|
margin-bottom: 0.5em;
|
|
font-variation-settings: 'wght' 500;
|
|
font-size: 1.2em;
|
|
border-top: 1px dashed #91919177;
|
|
padding-top: 0.5em;
|
|
width: 100%;
|
|
}
|
|
|
|
.button-overlay {
|
|
padding: calc(var(--padding)/2) calc(var(--padding)/2) calc(var(--padding)/2.5) calc(var(--padding)/2);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 10px;
|
|
width: fit-content;
|
|
height: fit-content;
|
|
font-variation-settings: 'wght' 750;
|
|
text-transform: uppercase;
|
|
background: rgba(255, 255, 255, 1);
|
|
|
|
font-size: 0.8em;
|
|
cursor: pointer;
|
|
grid-column-start: 5;
|
|
grid-row-start: 1;
|
|
justify-self: flex-end;
|
|
font-family: "Tonka";
|
|
color: black;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.link-in-text {
|
|
display: inline;
|
|
mix-blend-mode: multiply;
|
|
/* padding: calc(var(--padding)/4); */
|
|
padding: calc(var(--padding)/7) calc(var(--padding)/7) calc(var(--padding)/7.5) calc(var(--padding)/7);
|
|
background: #91919177;
|
|
border-radius: 5px;
|
|
margin-left: calc(var(--padding)/8);
|
|
margin-right: calc(var(--padding)/8);
|
|
font-size: 0.7em;
|
|
}
|
|
|
|
.contact_us{
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
|
|
.links .button-overlay {
|
|
margin: 0 calc(var(--padding)/2) calc(var(--padding)/2) 0;
|
|
}
|
|
|
|
.button-overlay.button-close {
|
|
position: sticky;
|
|
top: var(--padding);
|
|
margin: calc(var(--padding)/2) 0 calc(var(--padding)/2) calc(var(--padding)/2);
|
|
}
|
|
|
|
.links {
|
|
position: sticky;
|
|
bottom: 0;
|
|
grid-row-start: 3;
|
|
grid-column-start: 5;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
|
|
|
|
.button-overlay:hover {
|
|
background: black;
|
|
color: white;
|
|
}
|
|
|
|
.vt-title {
|
|
font-family: "vtVF";
|
|
font-size: 4em;
|
|
text-align: left;
|
|
line-height: 1em;
|
|
margin-top: 0;
|
|
margin-bottom: calc(var(--padding)*2);
|
|
}
|
|
|
|
.letter:not(.hidden .letter) {
|
|
animation: key 3s infinite;
|
|
}
|
|
|
|
.logos {
|
|
grid-column-start: 1;
|
|
grid-column-end: 5;
|
|
font-size: 0.8em;
|
|
margin-top: calc(var(--padding)*2);
|
|
border-top: 1px dashed #91919177;
|
|
}
|
|
|
|
.logos img {
|
|
max-width: 15%;
|
|
max-height: 5vh;
|
|
}
|
|
|
|
@keyframes key {
|
|
0% {
|
|
font-variation-settings: "wght" 0, "opsz" 0;
|
|
}
|
|
|
|
50% {
|
|
font-variation-settings: "wght" 100, "opsz" 0;
|
|
}
|
|
|
|
100% {
|
|
font-variation-settings: "wght" 0, "opsz" 0;
|
|
}
|
|
}
|
|
|
|
.buttons-bottom {
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 10vw;
|
|
display: flex;
|
|
padding: calc(var(--padding)/2);
|
|
flex-direction: column;
|
|
z-index: 20000;
|
|
}
|
|
/* these are in theatre-play.js */
|
|
/*.main_panel_button{*/
|
|
/*color: red !important;*/
|
|
/*font-size: 1.15em;*/
|
|
/*}*/
|
|
|
|
#debug_profiling{
|
|
display: none;
|
|
}
|
|
|
|
.upload_font_button{
|
|
pointer-events: all;
|
|
background: white;
|
|
width: fit-content;
|
|
cursor: pointer;
|
|
font-family: 'Tonka';
|
|
border-radius: 5px;
|
|
padding: 10px;
|
|
text-transform: uppercase;
|
|
box-sizing: border-box;
|
|
}
|
|
.upload_font_button:hover{
|
|
background: black;
|
|
color: white;
|
|
}
|
|
|
|
.upload_font_button_container{
|
|
pointer-events: none;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1010;
|
|
position: fixed;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0px;
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
|
|
|
|
/* ABOUT END */
|
|
.audioWrapper {
|
|
position: absolute;
|
|
left: 0px;
|
|
bottom: 0px;
|
|
z-index: 42000;
|
|
background-color: rgba(255,125,125,0.5);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
.audioWrapper canvas.visualizer {
|
|
border-top: 1px solid black;
|
|
border-bottom: 1px solid black;
|
|
margin-bottom: -3px;
|
|
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.7), 0 3px 4px rgba(0, 0, 0, 0.7);
|
|
}
|