FEAT: MUSIC LIBRARY BROSWER
This commit is contained in:
Terry Geng
@ -1,10 +1,17 @@
|
||||
.bs-docs-section{margin-top:4em}
|
||||
.bs-docs-section .page-header h1 { padding: 2rem 0; font-size: 3rem; margin-bottom: 10px }
|
||||
.btn-space{margin-right:5px}
|
||||
.btn-space{margin-right:5px;}
|
||||
.tag-space{margin-right:3px;}
|
||||
.playlist-title-td{width:60%}
|
||||
.playlist-title{float:left; }
|
||||
.playlist-artwork{float:left; margin-left:10px;}
|
||||
.tag-click{cursor:pointer;}
|
||||
.tag-click{
|
||||
cursor:pointer;
|
||||
transition: 400ms;
|
||||
}
|
||||
.tag-clicked{
|
||||
transform: scale(1.2);
|
||||
}
|
||||
.floating-button {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
@ -20,9 +27,74 @@
|
||||
right: 50px;
|
||||
bottom: 40px;
|
||||
}
|
||||
|
||||
.floating-button:hover {
|
||||
background-color: hsl(0, 0%, 43%);
|
||||
color: white;
|
||||
}
|
||||
.library-item{
|
||||
display: flex;
|
||||
margin-left: 5px;
|
||||
padding: .5rem .5rem .5rem 0;
|
||||
height: 72px;
|
||||
transition: ease-in-out 200ms;
|
||||
}
|
||||
.library-thumb-img {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.library-thumb-col {
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
overflow: hidden;
|
||||
margin: -0.5rem 1rem -0.5rem 0;
|
||||
}
|
||||
.library-thumb-grp {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -95px;
|
||||
width: 70px;
|
||||
margin-left: 15px;
|
||||
transition: left 300ms;
|
||||
border-radius: 5px;
|
||||
opacity: 0.6;
|
||||
font-weight: 300;
|
||||
}
|
||||
.library-thumb-img:hover + .library-thumb-grp {
|
||||
left: -15px;
|
||||
}
|
||||
.library-thumb-grp:hover {
|
||||
left: -15px;
|
||||
}
|
||||
.library-thumb-btn-up {
|
||||
position: absolute !important;
|
||||
top: 0;
|
||||
height: 35px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
.library-thumb-btn-down {
|
||||
position: absolute !important;
|
||||
top: 35px;
|
||||
height: 35px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
.library-info-col {
|
||||
margin-right: 2rem;
|
||||
padding: 3px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.library-info-col .small {
|
||||
font-weight: 300;
|
||||
}
|
||||
.library-action {
|
||||
margin-left: auto;
|
||||
}
|
||||
.library-info-col .path{
|
||||
font-style: italic !important;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
|
||||
1
static/image/empty_box.svg
Normal file
1
static/image/empty_box.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg height="512pt" viewBox="0 -12 512.00032 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m455.074219 172.613281 53.996093-53.996093c2.226563-2.222657 3.273438-5.367188 2.828126-8.480469-.441407-3.113281-2.328126-5.839844-5.085938-7.355469l-64.914062-35.644531c-4.839844-2.65625-10.917969-.886719-13.578126 3.953125-2.65625 4.84375-.890624 10.921875 3.953126 13.578125l53.234374 29.230469-46.339843 46.335937-166.667969-91.519531 46.335938-46.335938 46.839843 25.722656c4.839844 2.65625 10.921875.890626 13.578125-3.953124 2.660156-4.839844.890625-10.921876-3.953125-13.578126l-53.417969-29.335937c-3.898437-2.140625-8.742187-1.449219-11.882812 1.695313l-54 54-54-54c-3.144531-3.144532-7.988281-3.832032-11.882812-1.695313l-184.929688 101.546875c-2.757812 1.515625-4.644531 4.238281-5.085938 7.355469-.445312 3.113281.601563 6.257812 2.828126 8.480469l53.996093 53.996093-53.996093 53.992188c-2.226563 2.226562-3.273438 5.367187-2.828126 8.484375.441407 3.113281 2.328126 5.839844 5.085938 7.351562l55.882812 30.6875v102.570313c0 3.652343 1.988282 7.011719 5.1875 8.769531l184.929688 101.542969c1.5.824219 3.15625 1.234375 4.8125 1.234375s3.3125-.410156 4.8125-1.234375l184.929688-101.542969c3.199218-1.757812 5.1875-5.117188 5.1875-8.769531v-102.570313l55.882812-30.683594c2.757812-1.515624 4.644531-4.242187 5.085938-7.355468.445312-3.113282-.601563-6.257813-2.828126-8.480469zm-199.074219 90.132813-164.152344-90.136719 164.152344-90.140625 164.152344 90.140625zm-62.832031-240.367188 46.332031 46.335938-166.667969 91.519531-46.335937-46.335937zm-120.328125 162.609375 166.667968 91.519531-46.339843 46.339844-166.671875-91.519531zm358.089844 184.796875-164.929688 90.5625v-102.222656c0-5.523438-4.476562-10-10-10s-10 4.476562-10 10v102.222656l-164.929688-90.5625v-85.671875l109.046876 59.878907c1.511718.828124 3.167968 1.234374 4.808593 1.234374 2.589844 0 5.152344-1.007812 7.074219-2.929687l54-54 54 54c1.921875 1.925781 4.484375 2.929687 7.074219 2.929687 1.640625 0 3.296875-.40625 4.808593-1.234374l109.046876-59.878907zm-112.09375-46.9375-46.339844-46.34375 166.667968-91.515625 46.34375 46.335938zm0 0" fill="#aaaaaa" fill-opacity="1"/><path d="m404.800781 68.175781c2.628907 0 5.199219-1.070312 7.070313-2.933593 1.859375-1.859376 2.929687-4.4375 2.929687-7.066407 0-2.632812-1.070312-5.210937-2.929687-7.070312-1.859375-1.863281-4.441406-2.929688-7.070313-2.929688-2.640625 0-5.210937 1.066407-7.070312 2.929688-1.871094 1.859375-2.929688 4.4375-2.929688 7.070312 0 2.628907 1.058594 5.207031 2.929688 7.066407 1.859375 1.863281 4.441406 2.933593 7.070312 2.933593zm0 0" fill="#aaaaaa" fill-opacity="1"/><path d="m256 314.925781c-2.628906 0-5.210938 1.066407-7.070312 2.929688-1.859376 1.867187-2.929688 4.4375-2.929688 7.070312 0 2.636719 1.070312 5.207031 2.929688 7.078125 1.859374 1.859375 4.441406 2.921875 7.070312 2.921875s5.210938-1.0625 7.070312-2.921875c1.859376-1.871094 2.929688-4.441406 2.929688-7.078125 0-2.632812-1.070312-5.203125-2.929688-7.070312-1.859374-1.863281-4.441406-2.929688-7.070312-2.929688zm0 0" fill="#aaaaaa" fill-opacity="1"/></svg>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
1
static/image/loading.svg
Normal file
1
static/image/loading.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="64px" height="64px" viewBox="0 0 128 128" xml:space="preserve"><g><path d="M75.4 126.63a11.43 11.43 0 0 1-2.1-22.65 40.9 40.9 0 0 0 30.5-30.6 11.4 11.4 0 1 1 22.27 4.87h.02a63.77 63.77 0 0 1-47.8 48.05v-.02a11.38 11.38 0 0 1-2.93.37z" fill="#aaaaaa" fill-opacity="1"/><animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="1800ms" repeatCount="indefinite"></animateTransform></g></svg>
|
||||
|
After Width: | Height: | Size: 620 B |
Reference in New Issue
Block a user