740 lines
No EOL
12 KiB
CSS
740 lines
No EOL
12 KiB
CSS
* {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
|
|
#container-body {
|
|
display: none;
|
|
}
|
|
|
|
#container-menu {
|
|
user-select: none;
|
|
display: flex;
|
|
position: absolute;
|
|
width: 65vw;
|
|
height: 20vw;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background-color: transparent;
|
|
}
|
|
|
|
#left-menu {
|
|
text-align: center;
|
|
width: 15vw;
|
|
height: 100%;
|
|
background-color: var(--body);
|
|
border: 1px solid var(--border);
|
|
border-top-left-radius: 1vw;
|
|
border-bottom-left-radius: 1vw;
|
|
border-top-right-radius: .25vw;
|
|
}
|
|
|
|
#right-menu {
|
|
text-align: center;
|
|
width: 15vw;
|
|
height: 100%;
|
|
background-color: var(--body);
|
|
border: 1px solid var(--border);
|
|
border-top-right-radius: 1vw;
|
|
border-bottom-right-radius: 1vw;
|
|
border-top-left-radius: .25vw;
|
|
}
|
|
|
|
#div-container {
|
|
display: block;
|
|
width: 35vw;
|
|
height: 20vw;
|
|
background-image: url('img/mesa.png');
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
|
|
#div-controls--music {
|
|
display: block;
|
|
width: 2vw;
|
|
height: 2vw;
|
|
margin-left: 16.45vw;
|
|
transform: translateY(6.25vw);
|
|
border-radius: 2vw;
|
|
border: none;
|
|
background-color: rgba(255, 0, 0, 0);
|
|
}
|
|
|
|
#div-controls--input {
|
|
display: block;
|
|
width: 7.5vw;
|
|
height: 1vw;
|
|
border: none;
|
|
font-size: 0.75vw;
|
|
text-align: center;
|
|
background-color: #000;
|
|
color: white;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
#div-controls--exit {
|
|
height: 1vw;
|
|
width: 1vw;
|
|
background-color: rgba(255, 255, 255, 0);
|
|
border: none;
|
|
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(375%, -50%);
|
|
}
|
|
|
|
#div-controls--stop {
|
|
height: 1vw;
|
|
width: 1vw;
|
|
background-color: rgba(255, 255, 255, 0);
|
|
border: none;
|
|
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 36.75%;
|
|
transform: translate(375%, -50%);
|
|
}
|
|
|
|
/*
|
|
|
|
Made By Geloteee#2901
|
|
|
|
Join our Discord: https://discord.gg/sERxdnduDM
|
|
|
|
*/
|
|
|
|
h1 {
|
|
color: #fff;
|
|
}
|
|
|
|
input[type=range] {
|
|
appearance: none;
|
|
width: 99.3%;
|
|
height: 5px;
|
|
background: #000;
|
|
outline: none;
|
|
border: 2.5px solid var(--background);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
input[type=range]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 10px;
|
|
height: 1.35vw;
|
|
background: #000;
|
|
cursor: pointer;
|
|
border: 2.55px solid var(--background);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.div-controls--sound {
|
|
display: block;
|
|
width: 2vw;
|
|
height: 2vw;
|
|
border-radius: 0.5vw;
|
|
border: none;
|
|
background-color: rgba(43, 255, 0, 0);
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.div-controls--sound:hover {
|
|
border: none;
|
|
}
|
|
|
|
.div-controls--sound.first {
|
|
transform: translate(-845%, 275%);
|
|
}
|
|
|
|
.div-controls--sound.second {
|
|
transform: translate(-735%, 275%);
|
|
}
|
|
|
|
.div-controls--sound.third {
|
|
transform: translate(635%, 275%);
|
|
}
|
|
|
|
.div-controls--sound.fourth {
|
|
transform: translate(745%, 275%);
|
|
}
|
|
|
|
.div-controls--sound2 {
|
|
display: block;
|
|
width: 2vw;
|
|
height: 2vw;
|
|
border-radius: 0.5vw;
|
|
border: none;
|
|
background-color: rgba(43, 255, 0, 0);
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.div-controls--sound2:hover {
|
|
border: none;
|
|
}
|
|
|
|
.div-controls--sound2.quinto {
|
|
transform: translate(-845%, 385%);
|
|
}
|
|
|
|
.div-controls--sound2.sexto {
|
|
transform: translate(-735%, 385%);
|
|
}
|
|
|
|
.div-controls--sound2.septimo {
|
|
transform: translate(635%, 385%);
|
|
}
|
|
|
|
.div-controls--sound2.octavo {
|
|
transform: translate(750%, 385%);
|
|
}
|
|
|
|
|
|
|
|
|
|
.menu-section {
|
|
margin-top: 1vw;
|
|
}
|
|
|
|
.hightlight {
|
|
color: var(--border);
|
|
}
|
|
|
|
.microphone-hightlight {
|
|
color: rgb(112, 255, 68);
|
|
}
|
|
|
|
.stopmicrophone-hightlight {
|
|
color: rgb(255, 90, 90);
|
|
}
|
|
|
|
#distance {
|
|
width: 10vw;
|
|
margin: 1vw;
|
|
}
|
|
|
|
#volume {
|
|
width: 10vw;
|
|
margin: 1vw;
|
|
}
|
|
|
|
.division-line {
|
|
height: 0.05vw;
|
|
width: 100%;
|
|
margin-top: 0.5vw;
|
|
background-color: rgba(255, 255, 255, 0.233);
|
|
}
|
|
|
|
#microphone {
|
|
margin-top: 1.25vw;
|
|
width: 8vw;
|
|
height: 1.85vw;
|
|
font-size: 0.75vw;
|
|
}
|
|
|
|
#stop-microphone {
|
|
margin-top: 1.25vw;
|
|
width: 8vw;
|
|
height: 1.85vw;
|
|
font-size: 0.75vw;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1vw;
|
|
}
|
|
|
|
#left-nav-bar {
|
|
width: 100%;
|
|
height: 10%;
|
|
border-radius: 0vw;
|
|
border-top-right-radius: .15vw;
|
|
border-top-left-radius: .9vw;
|
|
background-color: var(--background);
|
|
}
|
|
|
|
#left-nav-bar h4 {
|
|
display: inline-block;
|
|
margin-top: 0.25vw;
|
|
border: 1px solid var(--border);
|
|
padding-left: 1vw;
|
|
padding-right: 1vw;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#right-nav-bar {
|
|
width: 100%;
|
|
height: 10%;
|
|
border-radius: 0vw;
|
|
border-top-right-radius: .9vw;
|
|
border-top-left-radius: .15vw;
|
|
background-color: var(--background);
|
|
}
|
|
|
|
#right-nav-bar h4 {
|
|
display: inline-block;
|
|
margin-top: 0.25vw;
|
|
border: 1px solid var(--border);
|
|
padding-left: 1vw;
|
|
padding-right: 1vw;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#right-first-page {
|
|
display: block;
|
|
}
|
|
|
|
#right-first-page h4 {
|
|
margin-top: 1vw;
|
|
margin-bottom: .5vw;
|
|
}
|
|
|
|
#spotlight-select {
|
|
height: 1.35vw;
|
|
width: 6vw;
|
|
}
|
|
|
|
#smoke-start {
|
|
width: 8vw;
|
|
height: 1.85vw;
|
|
font-size: 0.75vw;
|
|
}
|
|
|
|
#fire-start {
|
|
margin-bottom: .5vw;
|
|
width: 8vw;
|
|
height: 1.85vw;
|
|
font-size: 0.75vw;
|
|
}
|
|
|
|
#firework-start {
|
|
margin-bottom: .5vw;
|
|
width: 8vw;
|
|
height: 1.85vw;
|
|
font-size: 0.75vw;
|
|
}
|
|
|
|
#right-second-page {
|
|
display: none;
|
|
}
|
|
|
|
.spotlight-color-pick {
|
|
margin-top: 1vw;
|
|
width: 100%;
|
|
}
|
|
|
|
.spotlight-color-pick div {
|
|
display: inline-block;
|
|
height: 1.31vw;
|
|
width: 1.31vw;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
#spotlight-color-red {
|
|
background-color: rgb(255, 59, 59);
|
|
}
|
|
|
|
#spotlight-color-green {
|
|
background-color: rgb(154, 255, 86);
|
|
}
|
|
|
|
#spotlight-color-blue {
|
|
background-color: rgb(59, 167, 255);
|
|
}
|
|
|
|
#spotlight-color-red-2 {
|
|
background-color: rgb(255, 242, 59);
|
|
}
|
|
|
|
#spotlight-color-green-2 {
|
|
background-color: rgb(86, 255, 227);
|
|
}
|
|
|
|
#spotlight-color-blue-2 {
|
|
background-color: rgb(222, 59, 255);
|
|
}
|
|
|
|
#spotlight-color-red-3 {
|
|
background-color: rgb(255, 59, 196);
|
|
}
|
|
|
|
#spotlight-color-green-3 {
|
|
background-color: rgb(119, 0, 255);
|
|
}
|
|
|
|
#spotlight-color-blue-3 {
|
|
background-color: rgb(255, 153, 0);
|
|
}
|
|
|
|
#spotlight-color-red-4 {
|
|
background-color: rgb(255, 255, 255);
|
|
}
|
|
|
|
#spotlight-color-green-4 {
|
|
background-color: rgb(0, 0, 0);
|
|
}
|
|
|
|
#spotlight-color-blue-4 {
|
|
background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
|
|
linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
|
|
linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
|
|
}
|
|
|
|
#smoke-color-red {
|
|
background-color: rgb(255, 59, 59);
|
|
}
|
|
|
|
#smoke-color-green {
|
|
background-color: rgb(154, 255, 86);
|
|
}
|
|
|
|
#smoke-color-blue {
|
|
background-color: rgb(59, 167, 255);
|
|
}
|
|
|
|
#smoke-color-red-2 {
|
|
background-color: rgb(255, 242, 59);
|
|
}
|
|
|
|
#smoke-color-green-2 {
|
|
background-color: rgb(86, 255, 227);
|
|
}
|
|
|
|
#smoke-color-blue-2 {
|
|
background-color: rgb(222, 59, 255);
|
|
}
|
|
|
|
#smoke-color-red-3 {
|
|
background-color: rgb(255, 59, 196);
|
|
}
|
|
|
|
#smoke-color-green-3 {
|
|
background-color: rgb(119, 0, 255);
|
|
}
|
|
|
|
#smoke-color-blue-3 {
|
|
background-color: rgb(255, 153, 0);
|
|
}
|
|
|
|
#smoke-color-red-4 {
|
|
background-color: rgb(255, 255, 255);
|
|
}
|
|
|
|
#smoke-color-green-4 {
|
|
background-color: rgb(0, 0, 0);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#left-first-page {
|
|
display: block;
|
|
}
|
|
|
|
#left-second-page {
|
|
display: none;
|
|
text-align: center;
|
|
height: 18vw;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
#left-second-page::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.playlist-container {
|
|
display: inline-block;
|
|
text-align: center;
|
|
margin-top: .5vw;
|
|
width: 95%;
|
|
height: 1.5vw;
|
|
max-height: none;
|
|
background-color: var(--body);
|
|
border: 1px solid var(--border);
|
|
padding-top: .5vw;
|
|
padding-bottom: .5vw;
|
|
}
|
|
|
|
.playlist-table {
|
|
display: none;
|
|
}
|
|
|
|
.playlist-table img {
|
|
float: right;
|
|
height: .5vw;
|
|
transform: rotate(45deg);
|
|
margin: .25vw;
|
|
width: auto;
|
|
}
|
|
|
|
.playlist-table img:hover {
|
|
transform: rotate(45deg) scale(1.5);
|
|
}
|
|
|
|
.playlist-container h1 {
|
|
height: 2vw;
|
|
padding: 0;
|
|
font-size: 1vw;
|
|
font-style: normal;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
margin-bottom: .5vw;
|
|
}
|
|
|
|
.playlist-container button {
|
|
display: inline-block;
|
|
margin: 0;
|
|
margin-bottom: .25vw;
|
|
font-size: .75vw;
|
|
font-style: normal;
|
|
width: 90%;
|
|
height: auto;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.add-song {
|
|
display: block;
|
|
width: .75vw;
|
|
height: auto;
|
|
float: left;
|
|
margin-left: .5vw;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#add-img {
|
|
width: 1.5vw;
|
|
height: auto;
|
|
float: left;
|
|
margin: 1vw;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#delete-img {
|
|
width: 1.75vw;
|
|
height: auto;
|
|
float: right;
|
|
margin: 1vw;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
|
|
#add-song-popup {
|
|
display: none;
|
|
position: absolute;
|
|
text-align: center;
|
|
width: 20vw;
|
|
height: 10vw;
|
|
background-color: var(--background);
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
#add-song-popup h1 {
|
|
font-style: normal;
|
|
font-size: 1vw;
|
|
margin: 0;
|
|
margin-top: .5vw;
|
|
margin-bottom: .5vw;
|
|
}
|
|
|
|
#add-song-popup input {
|
|
text-align: center;
|
|
font-style: normal;
|
|
margin: 0;
|
|
margin-bottom: .5vw;
|
|
font-size: 1vw;
|
|
width: 15vw;
|
|
height: 2vw;
|
|
}
|
|
|
|
#add-song-popup button {
|
|
text-align: center;
|
|
font-style: normal;
|
|
font-size: .75vw;
|
|
width: 5vw;
|
|
height: 1.5vw;
|
|
margin: 0;
|
|
margin-top: .5vw;
|
|
}
|
|
|
|
#add-song-popup img {
|
|
position: absolute;
|
|
font-style: normal;
|
|
font-size: 1vw;
|
|
width: 1vw;
|
|
height: auto;
|
|
margin: 0;
|
|
margin-left: 8.5vw;
|
|
margin-top: .5vw;
|
|
transform: rotate(45deg);
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#add-popup {
|
|
display: none;
|
|
position: absolute;
|
|
text-align: center;
|
|
width: 20vw;
|
|
height: 7.5vw;
|
|
background-color: var(--background);
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
#add-popup h1 {
|
|
font-style: normal;
|
|
font-size: 1vw;
|
|
margin: 0;
|
|
margin-top: .5vw;
|
|
margin-bottom: .5vw;
|
|
}
|
|
|
|
#add-popup input {
|
|
text-align: center;
|
|
font-style: normal;
|
|
font-size: 1vw;
|
|
width: 15vw;
|
|
height: 2vw;
|
|
margin: 0;
|
|
}
|
|
|
|
#add-popup button {
|
|
text-align: center;
|
|
font-style: normal;
|
|
font-size: .75vw;
|
|
width: 5vw;
|
|
height: 1.5vw;
|
|
margin: 0;
|
|
margin-top: .5vw;
|
|
}
|
|
|
|
#add-popup img {
|
|
position: absolute;
|
|
font-style: normal;
|
|
font-size: 1vw;
|
|
width: 1vw;
|
|
height: auto;
|
|
margin: 0;
|
|
margin-left: 8.5vw;
|
|
margin-top: .5vw;
|
|
transform: rotate(45deg);
|
|
cursor: pointer;
|
|
}
|
|
|
|
#delete-popup {
|
|
display: none;
|
|
position: absolute;
|
|
text-align: center;
|
|
width: 20vw;
|
|
height: 6vw;
|
|
background-color: var(--background);
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
#delete-popup h1 {
|
|
font-style: normal;
|
|
font-size: 1vw;
|
|
margin: 0;
|
|
margin-top: .5vw;
|
|
margin-bottom: .5vw;
|
|
}
|
|
|
|
#delete-popup input {
|
|
text-align: center;
|
|
font-style: normal;
|
|
font-size: 1vw;
|
|
width: 15vw;
|
|
height: 2vw;
|
|
margin: 0;
|
|
}
|
|
|
|
#delete-popup button {
|
|
text-align: center;
|
|
font-style: normal;
|
|
font-size: .75vw;
|
|
width: 5vw;
|
|
height: 1.75vw;
|
|
margin: 0;
|
|
margin-top: .5vw;
|
|
}
|
|
|
|
#delete-popup img {
|
|
position: absolute;
|
|
font-style: normal;
|
|
font-size: 1vw;
|
|
width: 1vw;
|
|
height: auto;
|
|
margin: 0;
|
|
margin-left: 8.5vw;
|
|
margin-top: .5vw;
|
|
transform: rotate(45deg);
|
|
cursor: pointer;
|
|
}
|
|
|
|
#devtool-body {
|
|
display: none;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 500px;
|
|
height: auto;
|
|
margin: 150px;
|
|
margin-top: 15px;
|
|
background-color: var(--body);
|
|
border: 1px solid var(--border);
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
#devtool-title {
|
|
text-align: center;
|
|
padding: 5px;
|
|
}
|
|
|
|
.devtool-box {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 20px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.devtool-box p {
|
|
display: inline-block;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
#devtool-preview-container {
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
|
|
#devtool-preview {
|
|
width: 455px;
|
|
margin-top: 20px;
|
|
} |