mirror of
https://github.com/riwiwa/muzi.git
synced 2026-02-28 11:56:57 -08:00
added webui lastfm importing, account sessions, partial codebase cleanup
This commit is contained in:
196
static/style.css
196
static/style.css
@@ -1,17 +1,17 @@
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #222;
|
||||
color: #AFA;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
max-width: 70vw;
|
||||
margin: 0;
|
||||
width: 70vw;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #222;
|
||||
color: #AFA;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
max-width: 70vw;
|
||||
margin: 0 auto;
|
||||
width: 70vw;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.page_buttons {
|
||||
display: flex;
|
||||
@@ -27,7 +27,19 @@ body {
|
||||
}
|
||||
|
||||
.user-stats-top {
|
||||
display: inline-block;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 20%;
|
||||
h3 {
|
||||
color: #FFF;
|
||||
font-size: 25px;
|
||||
margin: 0;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
color: #EEE;
|
||||
}
|
||||
}
|
||||
|
||||
.username-bio {
|
||||
@@ -37,10 +49,15 @@ body {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.profile-top-blank {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.profile-top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
h1 {
|
||||
color: #FFFFFF;
|
||||
margin: 0;
|
||||
@@ -50,11 +67,6 @@ body {
|
||||
font-size: 15px;
|
||||
margin: 0;
|
||||
}
|
||||
h3 {
|
||||
color: #AAAAAA;
|
||||
font-size: 25px;
|
||||
margin: 0;
|
||||
}
|
||||
img {
|
||||
object-fit: cover;
|
||||
width: 250px;
|
||||
@@ -63,16 +75,24 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.login-form {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.login-error {
|
||||
color: #AA0000;
|
||||
}
|
||||
|
||||
.history {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
width: 100%;
|
||||
table {
|
||||
width: 90%;
|
||||
width: auto;
|
||||
}
|
||||
tr {
|
||||
display: flex;
|
||||
@@ -90,3 +110,135 @@ body {
|
||||
background-color: #111;
|
||||
}
|
||||
}
|
||||
|
||||
.import-section {
|
||||
margin: 20px 0;
|
||||
padding: 20px;
|
||||
background: #1a1a1a;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.import-section form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.import-section input {
|
||||
padding: 8px;
|
||||
border: 1px solid #333;
|
||||
border-radius: 4px;
|
||||
background: #222;
|
||||
color: #AFA;
|
||||
}
|
||||
|
||||
.import-section button {
|
||||
padding: 10px 20px;
|
||||
background: #333;
|
||||
color: #AFA;
|
||||
border: 1px solid #444;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.import-section button:hover {
|
||||
background: #444;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
margin-top: 15px;
|
||||
padding: 15px;
|
||||
background: #1a1a1a;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
.progress-bar-wrapper {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
background: #2a2a2a;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin: 10px 0;
|
||||
border: 2px solid #444;
|
||||
}
|
||||
|
||||
.progress-bar-fill {
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
background: linear-gradient(90deg, #5a5 0%, #7f7 50%, #5a5 100%);
|
||||
background-size: 200% 100%;
|
||||
border-radius: 10px;
|
||||
transition: width 0.3s ease-out;
|
||||
box-shadow:
|
||||
inset 0 2px 4px rgba(255, 255, 255, 0.3),
|
||||
inset 0 -2px 4px rgba(0, 0, 0, 0.3),
|
||||
0 0 15px rgba(0, 255, 0, 0.4);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.progress-bar-fill.animating {
|
||||
animation: shimmer 2s linear infinite, pulse-glow 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-glow {
|
||||
0%, 100% {
|
||||
box-shadow:
|
||||
inset 0 2px 4px rgba(255, 255, 255, 0.3),
|
||||
inset 0 -2px 4px rgba(0, 0, 0, 0.3),
|
||||
0 0 15px rgba(0, 255, 0, 0.4);
|
||||
}
|
||||
50% {
|
||||
box-shadow:
|
||||
inset 0 2px 4px rgba(255, 255, 255, 0.3),
|
||||
inset 0 -2px 4px rgba(0, 0, 0, 0.3),
|
||||
0 0 25px rgba(0, 255, 0, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.progress-status {
|
||||
color: #AFA;
|
||||
font-size: 14px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.progress-tracks {
|
||||
color: #888;
|
||||
font-size: 12px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.progress-error {
|
||||
color: #F88;
|
||||
font-size: 14px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.progress-success {
|
||||
color: #8F8;
|
||||
font-size: 14px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user