hylogen-0.1.2.1: web/index.html
<!DOCTYPE html>
<html>
<head>
<title>HYLOGEN</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
div {
margin: 0;
padding: 0;
}
#entry {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
font-family: "Lucida Sans Typewriter", "Lucida Sans", "Andale Mono", AndaleMono, monospace;
font-size: 12px;
}
.program {
width: 100vmax;
height: 100vmax;
}
#banner {
position: fixed;
background: none;
pointer-events: none;
left: 0;
top: 0;
width: 100%;
height: 100vh;
color: rgba(255, 255, 255, 1);
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
pointer-events: none;
z-index: 0;
}
#title {
text-transform: uppercase;
font-style: italic;
font-weight: bold;
font-size: 15vw;
letter-spacing: 0.1em;
text-shadow: 0 0 0.2em rgba(255, 255, 255, 1);
font-family: arial;
}
.inputPicker {
color: rgba(255, 255, 255, 0.5);
width:20vw;
margin: 1em;
}
.audioControls {
position: fixed;
display: flex;
bottom: 0;
left: 0;
z-index: 10;
color: rgba(255, 255, 255, 0.7);
background: rgba(0, 0, 0, 0.2);
width: 100vw;
height: auto;
pointer-events: all;
/* mix-blend-mode: screen; */
}
input {
font-family: inherit;
background: none;
border: none;
color: rgba(255, 255, 255, 0.7);
}
input:hover {
background: rgba(255, 255, 255, 0.5);
}
input[type="radio"] {
opacity: 0.5;
}
button {
font-family: inherit;
background: none;
border: none;
color: rgba(255, 255, 255, 0.7);
}
button:hover {
background: rgba(255, 255, 255, 0.5);
}
.sb-soundplayer-progress-container {
background-color: rgba(255, 255, 255, 0.2);
width: 100%;
height: 10px;
overflow: hidden;
cursor: pointer;
}
.sb-soundplayer-progress-inner {
background-color: #ff88ee;
height: 100%;
-webkit-transition: width .2s ease-in;
transition: width .2s ease-in;
}
.scPlayer {
width: 60vw;
margin: 1em;
}
.row {
display: flex;
margin-top: 0.5em;
justify-content: center;
align-items: center;
}
#hideButton{
position: fixed;
z-index: 20;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.1);
color: rgba(255, 255, 255, 0.4);
}
a {
text-decoration: none;
color: inherit;
color: #888888;
}
.hidden {
visibility: hidden;
-webkit-transition: visibility 0s 3s, opacity 3s ease-in-out;
-moz-transition: visibility 0s 3s, opacity 3s ease-in-out;
-ms-transition: visibility 0s 3s, opacity 3s ease-in-out;
-o-transition: visibility 0s 3s, opacity 3s ease-in-out;
opacity: 0;
}
.hiddenFast {
visibility: hidden;
-webkit-transition: visibility 0s 0.5s, opacity 0.5s ease-in-out;
-moz-transition: visibility 0s 0.5s, opacity 0.5s ease-in-out;
-ms-transition: visibility 0s 0.5s, opacity 0.5s ease-in-out;
-o-transition: visibility 0s 0.5s, opacity 0.5s ease-in-out;
opacity: 0;
}
.unhiddenFast {
visibility: visible;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
opacity: 1;
}
.errorText {
position: fixed;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
left: 0;
top: 0;
white-space: pre-wrap;
color: white;
padding: 2em;
}
</style>
</head>
<body>
<div id="entry"></div>
<script src="./bundle.js"></script>
</body>
</html>