- added imageUploader
- fixed loading songs - cleanup utils - added some helper class - cleanup preparing of WEBGL2 - added 3D wave - added light-support - added configs - added gui-events for playing, shuffling and playlist
This commit is contained in:
parent
300b6c4106
commit
9d5259767c
34 changed files with 1631 additions and 418 deletions
|
|
@ -7,18 +7,18 @@
|
|||
background-color: rgba(33, 33, 33, .6);
|
||||
border: none;
|
||||
font-size: 1.4em;
|
||||
border-top: 4px solid #089bec;
|
||||
border-top: 4px solid $primary;
|
||||
padding: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
transition: .5s;
|
||||
|
||||
&.active {
|
||||
border-color: #ff066a;
|
||||
border-color: $second;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(21, 21, 21, .7);
|
||||
border-color: #aaef22;
|
||||
border-color: $active;
|
||||
}
|
||||
}
|
||||
|
|
@ -84,7 +84,7 @@ group-input {
|
|||
height: 6px;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
background-color: #006ea8;
|
||||
background-color: $primary;
|
||||
animation: loadingBar 2s infinite;
|
||||
|
||||
&.delay {
|
||||
|
|
@ -124,45 +124,9 @@ group-input {
|
|||
}
|
||||
}
|
||||
|
||||
#modal {
|
||||
max-width: 860px;
|
||||
width: 90%;
|
||||
min-height: 200px;
|
||||
background-color: #333;
|
||||
padding: unset;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
|
||||
header {
|
||||
height: 50px;
|
||||
font-size: 30px;
|
||||
line-height: 50px;
|
||||
padding-left: 10px;
|
||||
overflow: hidden;
|
||||
background-color: #212121;
|
||||
display: flex;
|
||||
|
||||
.headline {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.close {
|
||||
margin-right: 10px;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #ff3232;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
modal-content {
|
||||
display: block;
|
||||
max-height: calc(100vh - 200px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
modal-footer {
|
||||
display: block;
|
||||
}
|
||||
#image-upload form {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -1,39 +1,182 @@
|
|||
input[type=range] {
|
||||
.range {
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus::-webkit-slider-runnable-track {
|
||||
background: #545454;
|
||||
}
|
||||
|
||||
&:focus::-ms-fill-lower {
|
||||
background: #424242;
|
||||
}
|
||||
|
||||
&:focus::-ms-fill-upper {
|
||||
background: #545454;
|
||||
}
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
input[type=range]::-webkit-slider-runnable-track {
|
||||
.range.center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.range.right {
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
.range:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.range::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 25.6px;
|
||||
height: 5px;
|
||||
cursor: pointer;
|
||||
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
||||
background: #424242;
|
||||
border-radius: 0;
|
||||
border: 0 solid #010101;
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
border-radius: 15px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
height: 25px;
|
||||
.range::-webkit-slider-thumb {
|
||||
border: 0 solid rgba(0, 0, 30, 0);
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
border-radius: 0;
|
||||
border-radius: 15px;
|
||||
background: #ff0089;
|
||||
cursor: pointer;
|
||||
margin-top: 0.3px;
|
||||
-webkit-appearance: none;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.range:focus::-webkit-slider-runnable-track {
|
||||
background: rgba(89, 89, 89, 0.12);
|
||||
}
|
||||
|
||||
.range::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
cursor: pointer;
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
border-radius: 15px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.range::-moz-range-thumb {
|
||||
border: 0 solid rgba(0, 0, 30, 0);
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
border-radius: 15px;
|
||||
background: #ff0089;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.range::-ms-track {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.range::-ms-fill-lower {
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
border: none;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.range::-ms-fill-upper {
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
border: none;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.range::-ms-thumb {
|
||||
border: 0 solid rgba(0, 0, 30, 0);
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
border-radius: 15px;
|
||||
background: #ff0089;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.range:focus::-ms-fill-lower {
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.range:focus::-ms-fill-upper {
|
||||
background: rgba(89, 89, 89, 0.12);
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 90%;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-top: 1rem;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
input:focus + .input:after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input input:not([type=range]) {
|
||||
border: none;
|
||||
border-bottom: 2px solid #dcdcdc;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
padding: 5px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.input input:not([type=range]):focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.input.center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.input.right {
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.floating-label .input-label {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
pointer-events: none;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
.floating-label input:focus ~ .input-label,
|
||||
.floating-label input:valid ~ .input-label {
|
||||
transform: translateY(-0.72rem);
|
||||
color: #ff0089;
|
||||
font-size: .7rem;
|
||||
}
|
||||
|
||||
.floating-label input:valid ~ .input-label {
|
||||
transform: translateY(-0.72rem);
|
||||
color: #3949ab;
|
||||
font-size: .7rem;
|
||||
}
|
||||
|
||||
.focus {
|
||||
content: '';
|
||||
width: 0;
|
||||
background-color: #ff0a8e;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
height: 2px;
|
||||
transition: 0.4s cubic-bezier(0.8, 0.4, 0.25, 1);
|
||||
}
|
||||
|
||||
input:focus ~ .focus {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
switch {
|
||||
|
|
@ -76,4 +219,35 @@ input[type="file"] {
|
|||
left: -100000vw;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
input[type="color"] {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.color-picker {
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
position: absolute !important;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#colorBlob {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.button {
|
||||
border: 1px solid $primary;
|
||||
padding: 0.5em 1em;
|
||||
cursor: pointer;
|
||||
transition: .5s;
|
||||
|
||||
&:hover {
|
||||
border-color: $second;
|
||||
}
|
||||
}
|
||||
49
raw/scss/_modal.scss
Normal file
49
raw/scss/_modal.scss
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
#modal {
|
||||
max-width: 860px;
|
||||
width: 90%;
|
||||
background-color: $bg;
|
||||
padding: unset;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
|
||||
div {
|
||||
position: unset;
|
||||
}
|
||||
|
||||
header {
|
||||
height: 50px;
|
||||
font-size: 30px;
|
||||
line-height: 50px;
|
||||
padding-left: 10px;
|
||||
overflow: hidden;
|
||||
background-color: $darker;
|
||||
display: flex;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
|
||||
.headline {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.close {
|
||||
margin-right: 10px;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
modal-content {
|
||||
display: block;
|
||||
max-height: calc(100vh - 200px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
modal-footer {
|
||||
display: block;
|
||||
box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
}
|
||||
6
raw/scss/_notification.scss
Normal file
6
raw/scss/_notification.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
.notification {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
width: 320px;
|
||||
}
|
||||
|
|
@ -13,11 +13,17 @@ playlist {
|
|||
font-size: 1.5em;
|
||||
padding: 5px;
|
||||
|
||||
.current {
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
.item {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
border-radius: 5px;
|
||||
margin: 0 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.inactive {
|
||||
color: #aaa;
|
||||
|
|
@ -26,7 +32,7 @@ playlist {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
color: #006ea8;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -34,8 +40,20 @@ playlist {
|
|||
.playlist-item {
|
||||
display: flex;
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid #dcdcdc;
|
||||
box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, .08);
|
||||
cursor: pointer;
|
||||
transition: .5s;
|
||||
|
||||
&.active {
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
|
||||
.playlist-item-title {
|
||||
&:before {
|
||||
content: '🔊 ';
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-left: 10px;
|
||||
|
|
@ -46,7 +64,6 @@ playlist {
|
|||
|
||||
&-number {
|
||||
padding: 5px 10px 5px 5px;
|
||||
border-right: 1px solid #ff3232;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
|
|
|
|||
42
raw/scss/_scrollbar.scss
Normal file
42
raw/scss/_scrollbar.scss
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
|
||||
::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #e1e1e1;
|
||||
border: 0 none #ffffff;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background: $primary;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #666666;
|
||||
border: 0 none #ffffff;
|
||||
border-radius: 46px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track:hover {
|
||||
background: #666666;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track:active {
|
||||
background: #666666;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
6
raw/scss/_variables.scss
Normal file
6
raw/scss/_variables.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
$bg: #303030;
|
||||
$darker: #212121;
|
||||
|
||||
$primary: #3949ab;
|
||||
$second: #ff0089;
|
||||
$active: #5ff507;
|
||||
|
|
@ -1,3 +1,6 @@
|
|||
@import "variables";
|
||||
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -12,7 +15,10 @@ html, body {
|
|||
overflow: hidden;
|
||||
font-size: 16px;
|
||||
font-family: sans-serif;
|
||||
background-color: #000000;
|
||||
background-color: $bg;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
div {
|
||||
|
|
@ -38,7 +44,10 @@ div {
|
|||
}
|
||||
|
||||
|
||||
@import "scrollbar";
|
||||
@import "gui";
|
||||
@import "input";
|
||||
@import "controls";
|
||||
@import "playlist";
|
||||
@import "playlist";
|
||||
@import "modal";
|
||||
@import "notification";
|
||||
Loading…
Add table
Add a link
Reference in a new issue