Initial Commit
This commit is contained in:
276
static/styles/common.scss
Normal file
276
static/styles/common.scss
Normal file
@ -0,0 +1,276 @@
|
||||
body {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
background-color: #0c2738;
|
||||
color: #ffffff;
|
||||
height: 100%;
|
||||
font-family: Open Sans,serif;
|
||||
}
|
||||
|
||||
.nobr {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.song_list {
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
top: 6em;
|
||||
bottom: 0;
|
||||
left: 1em;
|
||||
right: 1em;
|
||||
padding-right: 1em; /* Leave space for scroll bar */
|
||||
}
|
||||
|
||||
.song_search_bar {
|
||||
position: relative;
|
||||
padding: 1em 1em .5em;
|
||||
}
|
||||
|
||||
.song_search_field {
|
||||
border: none;
|
||||
border-radius: .3em;
|
||||
padding: .7em 1em;
|
||||
width: calc(100% - 11em);
|
||||
color: #0c2738;
|
||||
margin: 0;
|
||||
float: left;
|
||||
height: 2em;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.song_sort_button {
|
||||
width: 3em;
|
||||
height: 3.4em;
|
||||
border-radius: 0;
|
||||
border-style: none;
|
||||
border-left-style: solid;
|
||||
background-color: #427493;
|
||||
transition: 0.4s;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.song_sort_button:hover {
|
||||
background-color: #5598be;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.song_sort_button:active {
|
||||
background-color: #30566c;
|
||||
transition: 0.1s;
|
||||
}
|
||||
|
||||
.song_sort_button_selected {
|
||||
color: #ffff00;
|
||||
transition: 0.1s;
|
||||
}
|
||||
|
||||
.song_sort_button_right {
|
||||
border-top-right-radius: 0.3em;
|
||||
border-bottom-right-radius: 0.3em;
|
||||
}
|
||||
|
||||
.song_search_counter {
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.song_item {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
border-radius: 1em;
|
||||
background: black;
|
||||
margin-bottom: 1em;
|
||||
animation: song_item_enter 1s 1;
|
||||
}
|
||||
|
||||
@keyframes song_item_enter {
|
||||
from {
|
||||
margin-left: -16em;
|
||||
margin-right: 16em;
|
||||
}
|
||||
to {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.song_item_info {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.song_item_cover {
|
||||
height: 5em;
|
||||
width: 5em;
|
||||
border-top-left-radius: 1em;
|
||||
border-bottom-left-radius: 1em;
|
||||
}
|
||||
|
||||
.song_item_date {
|
||||
font-size: smaller;
|
||||
color: #427493;
|
||||
}
|
||||
|
||||
.song_item_title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.song_item_artist {
|
||||
font-size: smaller;
|
||||
color: #adddff;
|
||||
}
|
||||
|
||||
.song_gizmos {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
padding-top: 1.5em;
|
||||
padding-right: 1.5em;
|
||||
}
|
||||
|
||||
.duet_icon {
|
||||
background-image: url("/images/duet.svg");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.play_queue {
|
||||
position: fixed;
|
||||
width: 26em;
|
||||
max-width: 100%;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #434343;
|
||||
border-top-left-radius: 1em;
|
||||
border-top-right-radius: 1em;
|
||||
max-height: 100%;
|
||||
transition: max-height 0.3s;
|
||||
}
|
||||
|
||||
@media (orientation: portrait) {
|
||||
.play_queue {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.play_queue_hidden {
|
||||
max-height: 6.3em;
|
||||
transition: max-height 0.3s;
|
||||
}
|
||||
|
||||
.play_queue_head {
|
||||
padding: 1em;
|
||||
padding-top:0.4em;
|
||||
border-bottom: solid 0.2em;
|
||||
border-color: #fff;
|
||||
border-top-left-radius: 1em;
|
||||
border-top-right-radius: 1em;
|
||||
background: rgba(99, 99, 99, 0.0);
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.play_queue_head:hover {
|
||||
background: rgba(99, 99, 99, 1.0);
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.play_queue_list {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
border: 16px solid #f3f3f3;
|
||||
border-top: 16px solid #0c2738;
|
||||
border-radius: 50%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
animation: spin 1.3s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
|
||||
margin: auto;
|
||||
border-bottom: 16px solid #0c2738;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Tooltip container */
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
|
||||
}
|
||||
|
||||
/* Tooltip text */
|
||||
.tooltip .tooltiptext {
|
||||
visibility: hidden;
|
||||
width: 120px;
|
||||
background-color: #555;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
border-radius: 6px;
|
||||
|
||||
/* Position the tooltip text */
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 125%;
|
||||
left: 50%;
|
||||
margin-left: -100px;
|
||||
|
||||
/* Fade in tooltip */
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
/* Tooltip arrow */
|
||||
.tooltip .tooltiptext::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 100px;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent #555 transparent;
|
||||
}
|
||||
|
||||
/* Show the tooltip text when you mouse over the tooltip container */
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
25
static/styles/marquee.scss
Normal file
25
static/styles/marquee.scss
Normal file
@ -0,0 +1,25 @@
|
||||
.marquee {
|
||||
height: 2em;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border-left: 2px solid #4a4a4a;
|
||||
border-right: 2px solid #4a4a4a;
|
||||
}
|
||||
|
||||
.marquee p {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
transform: translateX(100%);
|
||||
animation: scroll-left 6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes scroll-left {
|
||||
0% {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
58
static/styles/penguin.scss
Normal file
58
static/styles/penguin.scss
Normal file
@ -0,0 +1,58 @@
|
||||
@keyframes example {
|
||||
0% {
|
||||
transform: perspective(36em) rotateY(-90deg);
|
||||
background-image: url(/images/penguin1.svg);
|
||||
}
|
||||
24.99% {
|
||||
transform: perspective(36em) rotateY(90deg);
|
||||
background-image: url(/images/penguin1.svg);
|
||||
}
|
||||
25% {
|
||||
transform: perspective(36em) rotateY(90deg);
|
||||
background-image: url(/images/penguin2.svg);
|
||||
}
|
||||
49.99% {
|
||||
transform: perspective(36em) rotateY(270deg);
|
||||
background-image: url(/images/penguin2.svg);
|
||||
}
|
||||
50% {
|
||||
transform: perspective(36em) rotateY(270deg);
|
||||
background-image: url(/images/penguin3.svg);
|
||||
}
|
||||
74.99% {
|
||||
transform: perspective(36em) rotateY(450deg);
|
||||
background-image: url(/images/penguin3.svg);
|
||||
}
|
||||
75% {
|
||||
transform: perspective(36em) rotateY(450deg);
|
||||
background-image: url(/images/penguin2.svg);
|
||||
}
|
||||
99.99% {
|
||||
transform: perspective(36em) rotateY(630deg);
|
||||
background-image: url(/images/penguin2.svg);
|
||||
}
|
||||
100% {
|
||||
transform: perspective(36em) rotateY(630deg);
|
||||
background-image: url(/images/penguin1.svg);
|
||||
}
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 12em;
|
||||
height: 12em;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
background-image: url(/images/penguin1.svg);
|
||||
background-size: contain;
|
||||
animation-name: example;
|
||||
animation-duration: 4s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: cubic-bezier(0.1, 0.5, 0.9, 0.5);
|
||||
}
|
||||
|
||||
.penguin_small {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
margin-top: 0em;
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
Reference in New Issue
Block a user