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;
|
||||
}
|
||||
Reference in New Issue
Block a user