Update style.css
This commit is contained in:
Broque Thomas
parent
196a1eb3ac
commit
041b6c4d31
1 changed files with 154 additions and 47 deletions
|
|
@ -30,15 +30,31 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ======================================
|
/* ======================================
|
||||||
SIDEBAR STYLING - Matching ModernSidebar
|
SIDEBAR STYLING - Premium Glassmorphic Design
|
||||||
====================================== */
|
====================================== */
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
width: 240px;
|
width: 240px;
|
||||||
background: linear-gradient(135deg, #0d1117 0%, #121212 30%, #0a0a0a 100%);
|
|
||||||
border-right: 1px solid rgba(29, 185, 84, 0.1);
|
/* Premium glassmorphic foundation */
|
||||||
border-top-right-radius: 12px;
|
background: linear-gradient(135deg,
|
||||||
border-bottom-right-radius: 12px;
|
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;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
@ -47,14 +63,22 @@ body {
|
||||||
/* Sidebar Header */
|
/* Sidebar Header */
|
||||||
.sidebar-header {
|
.sidebar-header {
|
||||||
height: 95px;
|
height: 95px;
|
||||||
background: linear-gradient(180deg, rgba(29, 185, 84, 0.08) 0%, rgba(29, 185, 84, 0.03) 40%, transparent 100%);
|
background: linear-gradient(180deg,
|
||||||
border-bottom: 1px solid rgba(29, 185, 84, 0.15);
|
rgba(29, 185, 84, 0.12) 0%,
|
||||||
border-top-right-radius: 12px;
|
rgba(29, 185, 84, 0.08) 30%,
|
||||||
padding: 24px;
|
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;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
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 {
|
.app-name {
|
||||||
|
|
@ -91,34 +115,61 @@ body {
|
||||||
height: 52px;
|
height: 52px;
|
||||||
width: 216px;
|
width: 216px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: none;
|
border: 1px solid transparent;
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
padding: 0 18px;
|
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-family: 'SF Pro Text', -apple-system, sans-serif;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-button:hover {
|
.nav-button:hover {
|
||||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
|
background: linear-gradient(135deg,
|
||||||
border-left: 2px solid rgba(255, 255, 255, 0.2);
|
rgba(255, 255, 255, 0.08) 0%,
|
||||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
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 {
|
.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%);
|
background: linear-gradient(135deg,
|
||||||
border-left: 3px solid #1ed760;
|
rgba(29, 185, 84, 0.20) 0%,
|
||||||
border: 1px solid rgba(29, 185, 84, 0.2);
|
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 {
|
.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%);
|
background: linear-gradient(135deg,
|
||||||
border: 1px solid rgba(29, 185, 84, 0.3);
|
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 {
|
.nav-icon {
|
||||||
|
|
@ -130,16 +181,28 @@ body {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
border-radius: 14px;
|
border-radius: 14px;
|
||||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
|
background: linear-gradient(135deg,
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
rgba(255, 255, 255, 0.10) 0%,
|
||||||
color: rgba(255, 255, 255, 0.7);
|
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 {
|
.nav-button.active .nav-icon {
|
||||||
color: #1ed760;
|
color: #1ed760;
|
||||||
background: linear-gradient(135deg, rgba(29, 185, 84, 0.25) 0%, rgba(30, 215, 96, 0.2) 100%);
|
background: linear-gradient(135deg,
|
||||||
border: 1px solid rgba(29, 185, 84, 0.3);
|
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;
|
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 {
|
.nav-text {
|
||||||
|
|
@ -157,20 +220,39 @@ body {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Media Player Section - Matching MediaPlayer widget */
|
/* Media Player Section - Premium Glassmorphic Design */
|
||||||
.media-player {
|
.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%);
|
background: linear-gradient(180deg,
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
rgba(28, 28, 28, 0.95) 0%,
|
||||||
border-radius: 12px;
|
rgba(20, 20, 20, 0.98) 50%,
|
||||||
margin: 8px 10px;
|
rgba(14, 14, 14, 1.0) 100%);
|
||||||
padding: 18px 18px 12px 18px;
|
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;
|
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 {
|
.media-player:hover {
|
||||||
border: 1px solid rgba(29, 185, 84, 0.2);
|
border: 1px solid rgba(29, 185, 84, 0.25);
|
||||||
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-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 {
|
.loading-animation {
|
||||||
|
|
@ -549,12 +631,21 @@ body {
|
||||||
opacity: 0.85;
|
opacity: 0.85;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Crypto Donation Section - Matching CryptoDonationWidget */
|
/* Crypto Donation Section - Premium Glassmorphic Design */
|
||||||
.crypto-donation {
|
.crypto-donation {
|
||||||
background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.02) 30%, rgba(255, 255, 255, 0.04) 100%);
|
background: linear-gradient(180deg,
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
rgba(18, 18, 18, 0.95) 0%,
|
||||||
|
rgba(22, 22, 22, 0.98) 50%,
|
||||||
padding: 15px 0;
|
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 {
|
.donation-header {
|
||||||
|
|
@ -630,17 +721,24 @@ body {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Version Section - Matching version widget */
|
/* Version Section - Premium Glassmorphic Design */
|
||||||
.version-section {
|
.version-section {
|
||||||
height: 45px;
|
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);
|
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
border-radius: 12px;
|
||||||
margin: 0;
|
margin: 8px 14px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 12px 20px;
|
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 {
|
.version-button {
|
||||||
|
|
@ -668,13 +766,22 @@ body {
|
||||||
background: rgba(29, 185, 84, 0.15);
|
background: rgba(29, 185, 84, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Status Section - Matching status indicators */
|
/* Status Section - Premium Glassmorphic Design */
|
||||||
.status-section {
|
.status-section {
|
||||||
height: fit-content;
|
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-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
border-bottom-right-radius: 12px;
|
border-bottom-right-radius: 20px;
|
||||||
padding: 20px 0;
|
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 {
|
.status-title {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue