aherman
/
SoulSync
mirror of https://github.com/Nezreka/SoulSync.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update style.css

Browse Source
pull/15/head
Broque Thomas 8 months ago
parent 196a1eb3ac
commit 041b6c4d31
1 changed files with 154 additions and 47 deletions
Show Stats Download Patch File Download Diff File

201
webui/static/style.css
Unescape View File

@ -30,15 +30,31 @@ body {
}
/* ======================================
SIDEBAR STYLING - Matching ModernSidebar
SIDEBAR STYLING - Premium Glassmorphic Design
====================================== */
.sidebar {
width: 240px;
background: linear-gradient(135deg, #0d1117 0%, #121212 30%, #0a0a0a 100%);
border-right: 1px solid rgba(29, 185, 84, 0.1);
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
/* Premium glassmorphic foundation */
background: linear-gradient(135deg,
rgba(20, 20, 20, 0.95) 0%,
rgba(12, 12, 12, 0.98) 100%);
backdrop-filter: blur(20px) saturate(1.2);
/* Enhanced borders */
border-right: 1px solid rgba(255, 255, 255, 0.12);
border-top: 1px solid rgba(255, 255, 255, 0.18);
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
/* Premium shadow effect */
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.6),
0 8px 32px rgba(0, 0, 0, 0.4),
0 0 40px rgba(29, 185, 84, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
display: flex;
flex-direction: column;
overflow: hidden;
@ -47,14 +63,22 @@ body {
/* Sidebar Header */
.sidebar-header {
height: 95px;
background: linear-gradient(180deg, rgba(29, 185, 84, 0.08) 0%, rgba(29, 185, 84, 0.03) 40%, transparent 100%);
border-bottom: 1px solid rgba(29, 185, 84, 0.15);
border-top-right-radius: 12px;
padding: 24px;
background: linear-gradient(180deg,
rgba(29, 185, 84, 0.12) 0%,
rgba(29, 185, 84, 0.08) 30%,
rgba(29, 185, 84, 0.03) 70%,
transparent 100%);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
border-top-right-radius: 20px;
padding: 28px 24px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
gap: 6px;
position: relative;
/* Subtle inner glow */
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.app-name {
@ -91,34 +115,61 @@ body {
height: 52px;
width: 216px;
background: transparent;
border: none;
border: 1px solid transparent;
border-radius: 16px;
cursor: pointer;
display: flex;
align-items: center;
gap: 16px;
padding: 0 18px;
transition: all 0.3s ease;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-family: 'SF Pro Text', -apple-system, sans-serif;
font-size: 12px;
font-weight: 500;
position: relative;
overflow: hidden;
}
.nav-button:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
border-left: 2px solid rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.08);
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.04) 100%);
border: 1px solid rgba(255, 255, 255, 0.12);
transform: translateX(4px);
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.3),
0 2px 8px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.nav-button.active {
background: linear-gradient(135deg, rgba(29, 185, 84, 0.18) 0%, rgba(29, 185, 84, 0.12) 50%, rgba(29, 185, 84, 0.08) 100%);
border-left: 3px solid #1ed760;
border: 1px solid rgba(29, 185, 84, 0.2);
background: linear-gradient(135deg,
rgba(29, 185, 84, 0.20) 0%,
rgba(29, 185, 84, 0.15) 50%,
rgba(29, 185, 84, 0.10) 100%);
border: 1px solid rgba(29, 185, 84, 0.3);
transform: translateX(6px);
box-shadow:
0 6px 20px rgba(29, 185, 84, 0.4),
0 4px 12px rgba(29, 185, 84, 0.3),
0 2px 6px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.15),
inset -1px 0 0 rgba(29, 185, 84, 0.8);
}
.nav-button.active:hover {
background: linear-gradient(135deg, rgba(29, 185, 84, 0.25) 0%, rgba(29, 185, 84, 0.18) 50%, rgba(29, 185, 84, 0.12) 100%);
border: 1px solid rgba(29, 185, 84, 0.3);
background: linear-gradient(135deg,
rgba(29, 185, 84, 0.28) 0%,
rgba(29, 185, 84, 0.22) 50%,
rgba(29, 185, 84, 0.15) 100%);
border: 1px solid rgba(29, 185, 84, 0.4);
transform: translateX(8px);
box-shadow:
0 8px 24px rgba(29, 185, 84, 0.5),
0 6px 16px rgba(29, 185, 84, 0.4),
0 3px 8px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset -1px 0 0 rgba(29, 185, 84, 0.9);
}
.nav-icon {
@ -130,16 +181,28 @@ body {
font-size: 16px;
font-weight: 600;
border-radius: 14px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
border: 1px solid rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.7);
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.10) 0%,
rgba(255, 255, 255, 0.06) 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.8);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.nav-button.active .nav-icon {
color: #1ed760;
background: linear-gradient(135deg, rgba(29, 185, 84, 0.25) 0%, rgba(30, 215, 96, 0.2) 100%);
border: 1px solid rgba(29, 185, 84, 0.3);
background: linear-gradient(135deg,
rgba(29, 185, 84, 0.30) 0%,
rgba(30, 215, 96, 0.25) 100%);
border: 1px solid rgba(29, 185, 84, 0.4);
font-weight: 700;
box-shadow:
0 4px 12px rgba(29, 185, 84, 0.4),
0 2px 6px rgba(29, 185, 84, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.nav-text {
@ -157,20 +220,39 @@ body {
flex: 1;
}
/* Media Player Section - Matching MediaPlayer widget */
/* Media Player Section - Premium Glassmorphic Design */
.media-player {
background: linear-gradient(180deg, rgba(26, 26, 26, 0.95) 0%, rgba(18, 18, 18, 0.98) 50%, rgba(12, 12, 12, 1.0) 100%);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
margin: 8px 10px;
padding: 18px 18px 12px 18px;
background: linear-gradient(180deg,
rgba(28, 28, 28, 0.95) 0%,
rgba(20, 20, 20, 0.98) 50%,
rgba(14, 14, 14, 1.0) 100%);
backdrop-filter: blur(12px) saturate(1.1);
border: 1px solid rgba(255, 255, 255, 0.08);
border-top: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 16px;
margin: 12px 14px;
padding: 20px;
min-height: 150px;
transition: all 0.3s ease;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.4),
0 4px 12px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.media-player:hover {
border: 1px solid rgba(29, 185, 84, 0.2);
background: linear-gradient(180deg, rgba(29, 185, 84, 0.08) 0%, rgba(26, 26, 26, 0.95) 50%, rgba(18, 18, 18, 1.0) 100%);
border: 1px solid rgba(29, 185, 84, 0.25);
border-top: 1px solid rgba(29, 185, 84, 0.3);
background: linear-gradient(180deg,
rgba(29, 185, 84, 0.10) 0%,
rgba(28, 28, 28, 0.95) 40%,
rgba(20, 20, 20, 0.98) 70%,
rgba(14, 14, 14, 1.0) 100%);
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.5),
0 6px 16px rgba(29, 185, 84, 0.2),
0 4px 12px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.loading-animation {
@ -549,12 +631,21 @@ body {
opacity: 0.85;
}
/* Crypto Donation Section - Matching CryptoDonationWidget */
/* Crypto Donation Section - Premium Glassmorphic Design */
.crypto-donation {
background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.02) 30%, rgba(255, 255, 255, 0.04) 100%);
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: 15px 0;
background: linear-gradient(180deg,
rgba(18, 18, 18, 0.95) 0%,
rgba(22, 22, 22, 0.98) 50%,
rgba(16, 16, 16, 1.0) 100%);
backdrop-filter: blur(8px) saturate(1.1);
border-top: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
margin: 8px 14px;
padding: 18px 20px;
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.3),
0 2px 8px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.donation-header {
@ -630,17 +721,24 @@ body {
font-style: italic;
}
/* Version Section - Matching version widget */
/* Version Section - Premium Glassmorphic Design */
.version-section {
height: 45px;
background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.02) 30%, rgba(255, 255, 255, 0.04) 100%);
background: linear-gradient(180deg,
rgba(18, 18, 18, 0.95) 0%,
rgba(14, 14, 14, 0.98) 100%);
backdrop-filter: blur(8px) saturate(1.1);
border-top: 1px solid rgba(255, 255, 255, 0.08);
margin: 0;
border-radius: 12px;
margin: 8px 14px;
display: flex;
align-items: center;
justify-content: center;
padding: 12px 20px;
box-shadow:
0 3px 12px rgba(0, 0, 0, 0.25),
0 1px 6px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.version-button {
@ -668,13 +766,22 @@ body {
background: rgba(29, 185, 84, 0.15);
}
/* Status Section - Matching status indicators */
/* Status Section - Premium Glassmorphic Design */
.status-section {
height: fit-content;
background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.02) 30%, rgba(255, 255, 255, 0.04) 100%);
background: linear-gradient(180deg,
rgba(18, 18, 18, 0.95) 0%,
rgba(14, 14, 14, 0.98) 100%);
backdrop-filter: blur(8px) saturate(1.1);
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-bottom-right-radius: 12px;
padding: 20px 0;
border-bottom-right-radius: 20px;
border-radius: 12px;
margin: 8px 14px 0 14px;
padding: 24px 0;
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.3),
0 2px 8px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.status-title {

Write Preview
Loading…
Cancel
Save