WIP
This commit is contained in:
parent
9d5259767c
commit
25fcefcb50
68 changed files with 2982 additions and 307 deletions
54
raw/scss/_config.scss
Normal file
54
raw/scss/_config.scss
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
.config-nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: $nav;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
|
||||
div {
|
||||
padding: 10px 5px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
border-bottom: 1px solid transparent;
|
||||
|
||||
&.active {
|
||||
border-color: $active;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, .4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.config-content {
|
||||
padding: 1em;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.config-content .visuals {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
|
||||
.visual-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1em;
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
background-color: $darker;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
transition: .5s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: $nav;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border: 1px solid $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,10 @@
|
|||
#c {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
canvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
group {
|
||||
|
|
@ -118,15 +122,45 @@ group-input {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 100;
|
||||
|
||||
&.hide {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
modal-footer playlist {
|
||||
flex-direction: row-reverse;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.pagination {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
#image-upload form {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 90%;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.audio-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.artist {
|
||||
font-size: .75em;
|
||||
color: #dcdcdc;
|
||||
}
|
||||
}
|
||||
|
||||
.now-playing {
|
||||
font-size: .8em;
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.menus {
|
||||
z-index: 10;
|
||||
}
|
||||
|
|
@ -98,11 +98,15 @@
|
|||
}
|
||||
|
||||
.input {
|
||||
width: 90%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-top: 1rem;
|
||||
background-color: transparent;
|
||||
|
||||
&-range {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
input:focus + .input:after {
|
||||
|
|
@ -148,20 +152,20 @@ input:focus + .input:after {
|
|||
.floating-label input:focus ~ .input-label,
|
||||
.floating-label input:valid ~ .input-label {
|
||||
transform: translateY(-0.72rem);
|
||||
color: #ff0089;
|
||||
color: $active;
|
||||
font-size: .7rem;
|
||||
}
|
||||
|
||||
.floating-label input:valid ~ .input-label {
|
||||
transform: translateY(-0.72rem);
|
||||
color: #3949ab;
|
||||
color: $second;
|
||||
font-size: .7rem;
|
||||
}
|
||||
|
||||
.focus {
|
||||
content: '';
|
||||
width: 0;
|
||||
background-color: #ff0a8e;
|
||||
background-color: $second;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
|
@ -180,6 +184,10 @@ input:focus ~ .focus {
|
|||
}
|
||||
|
||||
switch {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 5px;
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
appearance: none;
|
||||
|
|
@ -190,6 +198,10 @@ switch {
|
|||
}
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
border-radius: 10px;
|
||||
|
|
@ -202,7 +214,7 @@ switch {
|
|||
|
||||
&:after {
|
||||
content: '';
|
||||
background-color: #ff3232;
|
||||
background-color: $primary;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
|
|
@ -234,7 +246,7 @@ input[type="color"] {
|
|||
}
|
||||
}
|
||||
|
||||
#colorBlob {
|
||||
.colorBlob {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
|
|
@ -242,12 +254,124 @@ input[type="color"] {
|
|||
}
|
||||
|
||||
.button {
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
border-radius: 5px;
|
||||
border: 1px solid $primary;
|
||||
padding: 0.5em 1em;
|
||||
cursor: pointer;
|
||||
transition: .5s;
|
||||
|
||||
&.spaced {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $second;
|
||||
border-radius: 7px;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
.max, .min, .current {
|
||||
font-size: .8em;
|
||||
color: $second;
|
||||
position: absolute;
|
||||
bottom: -1rem;
|
||||
}
|
||||
|
||||
.current {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.min {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.max {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
custom-select {
|
||||
width: auto;
|
||||
min-width: 200px;
|
||||
display: block;
|
||||
|
||||
label {
|
||||
color: #ff0089;
|
||||
font-size: .7rem;
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
padding: 10px 30px 10px 10px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all .3s;
|
||||
box-shadow: inset 0 0 3px rgba(94, 94, 94, 1);
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
border: solid #dcdcdc;
|
||||
border-width: 0 3px 3px 0;
|
||||
display: inline-block;
|
||||
padding: 3px;
|
||||
transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
transition: all .3s ease-in-out;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: calc(50% - 6px);
|
||||
}
|
||||
}
|
||||
|
||||
custom-options {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: all .5s ease;
|
||||
font-size: .9em;
|
||||
display: block;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
custom-option {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px 5px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, .08);
|
||||
|
||||
&:hover {
|
||||
background-color: $primary;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
custom-option.active {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
custom-select.open {
|
||||
.label {
|
||||
&::after {
|
||||
transform: rotate(-135deg);
|
||||
-webkit-transform: rotate(-135deg);
|
||||
top: calc(50% - 3px);
|
||||
}
|
||||
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
custom-options {
|
||||
max-height: none;
|
||||
border: 1px solid $nav !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -7,6 +7,10 @@
|
|||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
|
||||
&.lightMode {
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
div {
|
||||
position: unset;
|
||||
}
|
||||
|
|
@ -45,5 +49,11 @@
|
|||
modal-footer {
|
||||
display: block;
|
||||
box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
|
||||
.inner {
|
||||
padding: 5px;
|
||||
width: calc(100% - 40px);
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,117 @@
|
|||
.notification {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
right: 10px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
width: 320px;
|
||||
flex-direction: column-reverse;
|
||||
width: 90%;
|
||||
max-width: 400px;
|
||||
pointer-events: none;
|
||||
|
||||
.notification-item {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
div {
|
||||
position: unset;
|
||||
padding: unset;
|
||||
}
|
||||
|
||||
div.notification-item {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-item {
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
overflow: hidden;
|
||||
|
||||
&.success {
|
||||
background-color: $success;
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: $error;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: $warning;
|
||||
}
|
||||
|
||||
&.info {
|
||||
background-color: $info;
|
||||
}
|
||||
|
||||
.message {
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-item .fade-bar {
|
||||
animation: fadeOut ease-in-out 3000ms;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
opacity: 0.4;
|
||||
transform-origin: left;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
z-index: 1;
|
||||
bottom: 0;
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
&.endless {
|
||||
animation: endlessFade ease-in-out 500ms infinite;
|
||||
}
|
||||
|
||||
&.success {
|
||||
background-color: $successBorder;
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: $errorBorder;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: $warningBorder;
|
||||
}
|
||||
|
||||
&.info {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
to {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes endlessFade {
|
||||
0% {
|
||||
transform: scaleX(1);
|
||||
transform-origin: right;
|
||||
}
|
||||
49% {
|
||||
transform-origin: right;
|
||||
}
|
||||
50% {
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
}
|
||||
100% {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
|
@ -65,6 +65,8 @@ playlist {
|
|||
&-number {
|
||||
padding: 5px 10px 5px 5px;
|
||||
width: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,16 @@
|
|||
$bg: #303030;
|
||||
$darker: #212121;
|
||||
$nav: #1b1b1b;
|
||||
|
||||
$primary: #3949ab;
|
||||
$second: #ff0089;
|
||||
$active: #5ff507;
|
||||
$active: #5ff507;
|
||||
|
||||
$info: rgba(71,73,171,.6);
|
||||
$success: rgba(74, 177, 11,.6);
|
||||
$error: rgba(255,50,50,.6);
|
||||
$warning: rgba(255, 177, 89, 0.6);
|
||||
|
||||
$successBorder: #60ff00;
|
||||
$errorBorder: #fa0000;
|
||||
$warningBorder: #ff7700;
|
||||
|
|
@ -19,6 +19,8 @@ html, body {
|
|||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
div {
|
||||
|
|
@ -50,4 +52,5 @@ div {
|
|||
@import "controls";
|
||||
@import "playlist";
|
||||
@import "modal";
|
||||
@import "notification";
|
||||
@import "notification";
|
||||
@import "config";
|
||||
Loading…
Add table
Add a link
Reference in a new issue