Update style.css
This commit is contained in:
Broque Thomas
parent
987b9b96e7
commit
c2119d4ecf
1 changed files with 241 additions and 143 deletions
|
|
@ -89,7 +89,7 @@ body {
|
||||||
.sidebar-header {
|
.sidebar-header {
|
||||||
height: 95px;
|
height: 95px;
|
||||||
background: linear-gradient(180deg,
|
background: linear-gradient(180deg,
|
||||||
rgba(29, 185, 84, 0.12) 0%,
|
rgba(29, 185, 84, 0.14) 0%,
|
||||||
rgba(29, 185, 84, 0.08) 30%,
|
rgba(29, 185, 84, 0.08) 30%,
|
||||||
rgba(29, 185, 84, 0.03) 70%,
|
rgba(29, 185, 84, 0.03) 70%,
|
||||||
transparent 100%);
|
transparent 100%);
|
||||||
|
|
@ -101,53 +101,89 @@ body {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
/* Subtle inner glow */
|
/* Subtle inner glow */
|
||||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Ambient light sweep across header */
|
||||||
|
.sidebar-header::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -50%;
|
||||||
|
left: -100%;
|
||||||
|
width: 60%;
|
||||||
|
height: 200%;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
transparent 0%,
|
||||||
|
rgba(29, 185, 84, 0.06) 40%,
|
||||||
|
rgba(29, 185, 84, 0.12) 50%,
|
||||||
|
rgba(29, 185, 84, 0.06) 60%,
|
||||||
|
transparent 100%
|
||||||
|
);
|
||||||
|
animation: sidebar-header-sweep 8s ease-in-out infinite;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sidebar-header-sweep {
|
||||||
|
0%, 100% { left: -100%; opacity: 0; }
|
||||||
|
10% { opacity: 1; }
|
||||||
|
50% { left: 140%; opacity: 1; }
|
||||||
|
60% { opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
.app-name {
|
.app-name {
|
||||||
font-family: 'SF Pro Display', -apple-system, sans-serif;
|
font-family: 'SF Pro Display', -apple-system, sans-serif;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
background: linear-gradient(90deg, #ffffff 0%, #1ed760 60%, #1db954 100%);
|
background: linear-gradient(90deg, #ffffff 0%, #1ed760 60%, #1db954 100%);
|
||||||
|
background-size: 200% 100%;
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
letter-spacing: -0.8px;
|
letter-spacing: -0.8px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
animation: sidebar-logo-shimmer 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sidebar-logo-shimmer {
|
||||||
|
0%, 100% { background-position: 0% 50%; }
|
||||||
|
50% { background-position: 100% 50%; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-subtitle {
|
.app-subtitle {
|
||||||
font-family: 'SF Pro Text', -apple-system, sans-serif;
|
font-family: 'SF Pro Text', -apple-system, sans-serif;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: rgba(255, 255, 255, 0.65);
|
color: rgba(255, 255, 255, 0.5);
|
||||||
letter-spacing: 0.2px;
|
letter-spacing: 1.5px;
|
||||||
|
text-transform: uppercase;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Navigation Buttons */
|
/* Navigation Buttons */
|
||||||
.sidebar-nav {
|
.sidebar-nav {
|
||||||
padding: 25px 12px;
|
padding: 20px 12px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 8px;
|
gap: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-button {
|
.nav-button {
|
||||||
height: 52px;
|
height: 44px;
|
||||||
width: 216px;
|
width: 216px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
border-radius: 16px;
|
border-radius: 12px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 16px;
|
gap: 14px;
|
||||||
padding: 0 18px;
|
padding: 0 16px;
|
||||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 0.25s 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;
|
||||||
|
|
@ -155,43 +191,60 @@ body {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Active indicator bar - left edge glow */
|
||||||
|
.nav-button::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 3px;
|
||||||
|
height: 0;
|
||||||
|
border-radius: 0 3px 3px 0;
|
||||||
|
background: linear-gradient(180deg, #1ed760, #1db954);
|
||||||
|
box-shadow: 0 0 8px rgba(29, 185, 84, 0.6);
|
||||||
|
transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button.active::before {
|
||||||
|
height: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
.nav-button:hover {
|
.nav-button:hover {
|
||||||
background: linear-gradient(135deg,
|
background: linear-gradient(135deg,
|
||||||
rgba(255, 255, 255, 0.06) 0%,
|
rgba(255, 255, 255, 0.06) 0%,
|
||||||
rgba(255, 255, 255, 0.03) 100%);
|
rgba(255, 255, 255, 0.03) 100%);
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
transform: translateX(4px);
|
transform: translateX(4px);
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 4px 12px rgba(0, 0, 0, 0.2),
|
0 4px 12px rgba(0, 0, 0, 0.2),
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-button.active {
|
.nav-button.active {
|
||||||
background: linear-gradient(135deg,
|
background: linear-gradient(135deg,
|
||||||
rgba(29, 185, 84, 0.16) 0%,
|
rgba(29, 185, 84, 0.14) 0%,
|
||||||
rgba(29, 185, 84, 0.12) 50%,
|
rgba(29, 185, 84, 0.10) 50%,
|
||||||
rgba(29, 185, 84, 0.08) 100%);
|
rgba(29, 185, 84, 0.06) 100%);
|
||||||
border: 1px solid rgba(29, 185, 84, 0.25);
|
border: 1px solid rgba(29, 185, 84, 0.2);
|
||||||
transform: translateX(6px);
|
transform: translateX(6px);
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 4px 16px rgba(29, 185, 84, 0.25),
|
0 4px 16px rgba(29, 185, 84, 0.2),
|
||||||
0 2px 8px rgba(0, 0, 0, 0.2),
|
0 2px 8px rgba(0, 0, 0, 0.2),
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.12),
|
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||||
inset -1px 0 0 rgba(29, 185, 84, 0.6);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-button.active:hover {
|
.nav-button.active:hover {
|
||||||
background: linear-gradient(135deg,
|
background: linear-gradient(135deg,
|
||||||
rgba(29, 185, 84, 0.22) 0%,
|
rgba(29, 185, 84, 0.20) 0%,
|
||||||
rgba(29, 185, 84, 0.18) 50%,
|
rgba(29, 185, 84, 0.16) 50%,
|
||||||
rgba(29, 185, 84, 0.12) 100%);
|
rgba(29, 185, 84, 0.10) 100%);
|
||||||
border: 1px solid rgba(29, 185, 84, 0.35);
|
border: 1px solid rgba(29, 185, 84, 0.3);
|
||||||
transform: translateX(8px);
|
transform: translateX(8px);
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 6px 20px rgba(29, 185, 84, 0.3),
|
0 6px 20px rgba(29, 185, 84, 0.25),
|
||||||
0 3px 10px rgba(0, 0, 0, 0.2),
|
0 3px 10px rgba(0, 0, 0, 0.2),
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.15),
|
inset 0 1px 0 rgba(255, 255, 255, 0.12);
|
||||||
inset -1px 0 0 rgba(29, 185, 84, 0.7);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-icon {
|
.nav-icon {
|
||||||
|
|
@ -200,36 +253,49 @@ body {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 16px;
|
font-size: 15px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
border-radius: 10px;
|
border-radius: 8px;
|
||||||
background: linear-gradient(135deg,
|
background: linear-gradient(135deg,
|
||||||
rgba(255, 255, 255, 0.08) 0%,
|
rgba(255, 255, 255, 0.07) 0%,
|
||||||
rgba(255, 255, 255, 0.04) 100%);
|
rgba(255, 255, 255, 0.03) 100%);
|
||||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
color: rgba(255, 255, 255, 0.8);
|
color: rgba(255, 255, 255, 0.7);
|
||||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 2px 4px rgba(0, 0, 0, 0.15),
|
0 2px 4px rgba(0, 0, 0, 0.15),
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button:hover .nav-icon {
|
||||||
|
color: rgba(255, 255, 255, 0.95);
|
||||||
|
background: linear-gradient(135deg,
|
||||||
|
rgba(255, 255, 255, 0.12) 0%,
|
||||||
|
rgba(255, 255, 255, 0.06) 100%);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-button.active .nav-icon {
|
.nav-button.active .nav-icon {
|
||||||
color: #1ed760;
|
color: #1ed760;
|
||||||
background: linear-gradient(135deg,
|
background: linear-gradient(135deg,
|
||||||
rgba(29, 185, 84, 0.25) 0%,
|
rgba(29, 185, 84, 0.25) 0%,
|
||||||
rgba(30, 215, 96, 0.20) 100%);
|
rgba(30, 215, 96, 0.18) 100%);
|
||||||
border: 1px solid rgba(29, 185, 84, 0.3);
|
border: 1px solid rgba(29, 185, 84, 0.3);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 3px 8px rgba(29, 185, 84, 0.3),
|
0 0 12px rgba(29, 185, 84, 0.3),
|
||||||
0 1px 4px rgba(29, 185, 84, 0.2),
|
0 2px 6px rgba(29, 185, 84, 0.2),
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.15);
|
inset 0 1px 0 rgba(255, 255, 255, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-text {
|
.nav-text {
|
||||||
color: rgba(255, 255, 255, 0.8);
|
color: rgba(255, 255, 255, 0.65);
|
||||||
letter-spacing: 0.1px;
|
letter-spacing: 0.2px;
|
||||||
|
transition: all 0.25s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button:hover .nav-text {
|
||||||
|
color: rgba(255, 255, 255, 0.95);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-button.active .nav-text {
|
.nav-button.active .nav-text {
|
||||||
|
|
@ -240,6 +306,24 @@ body {
|
||||||
/* Sidebar Spacer */
|
/* Sidebar Spacer */
|
||||||
.sidebar-spacer {
|
.sidebar-spacer {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
min-height: 12px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fade divider between nav and bottom content */
|
||||||
|
.sidebar-spacer::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 24px;
|
||||||
|
right: 24px;
|
||||||
|
height: 1px;
|
||||||
|
background: linear-gradient(90deg,
|
||||||
|
transparent 0%,
|
||||||
|
rgba(255, 255, 255, 0.06) 30%,
|
||||||
|
rgba(255, 255, 255, 0.06) 70%,
|
||||||
|
transparent 100%
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Media Player Section - Premium Glassmorphic Design */
|
/* Media Player Section - Premium Glassmorphic Design */
|
||||||
|
|
@ -249,32 +333,32 @@ body {
|
||||||
rgba(20, 20, 20, 0.98) 50%,
|
rgba(20, 20, 20, 0.98) 50%,
|
||||||
rgba(14, 14, 14, 1.0) 100%);
|
rgba(14, 14, 14, 1.0) 100%);
|
||||||
backdrop-filter: blur(12px) saturate(1.1);
|
backdrop-filter: blur(12px) saturate(1.1);
|
||||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.12);
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
margin: 12px 14px;
|
margin: 8px 14px;
|
||||||
padding: 20px;
|
padding: 18px;
|
||||||
min-height: 150px;
|
min-height: 150px;
|
||||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 8px 24px rgba(0, 0, 0, 0.4),
|
0 8px 24px rgba(0, 0, 0, 0.4),
|
||||||
0 4px 12px rgba(0, 0, 0, 0.3),
|
0 4px 12px rgba(0, 0, 0, 0.3),
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-player:hover {
|
.media-player:hover {
|
||||||
border: 1px solid rgba(29, 185, 84, 0.25);
|
border: 1px solid rgba(29, 185, 84, 0.2);
|
||||||
border-top: 1px solid rgba(29, 185, 84, 0.3);
|
border-top: 1px solid rgba(29, 185, 84, 0.25);
|
||||||
background: linear-gradient(180deg,
|
background: linear-gradient(180deg,
|
||||||
rgba(29, 185, 84, 0.10) 0%,
|
rgba(29, 185, 84, 0.08) 0%,
|
||||||
rgba(28, 28, 28, 0.95) 40%,
|
rgba(28, 28, 28, 0.95) 40%,
|
||||||
rgba(20, 20, 20, 0.98) 70%,
|
rgba(20, 20, 20, 0.98) 70%,
|
||||||
rgba(14, 14, 14, 1.0) 100%);
|
rgba(14, 14, 14, 1.0) 100%);
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 12px 32px rgba(0, 0, 0, 0.5),
|
0 12px 32px rgba(0, 0, 0, 0.5),
|
||||||
0 6px 16px rgba(29, 185, 84, 0.2),
|
0 6px 16px rgba(29, 185, 84, 0.15),
|
||||||
0 4px 12px rgba(0, 0, 0, 0.3),
|
0 4px 12px rgba(0, 0, 0, 0.3),
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.15);
|
inset 0 1px 0 rgba(255, 255, 255, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.loading-animation {
|
.loading-animation {
|
||||||
|
|
@ -647,56 +731,47 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-track-message {
|
.no-track-message {
|
||||||
color: #888888;
|
color: rgba(255, 255, 255, 0.25);
|
||||||
font-size: 13px;
|
font-size: 11px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 24px 20px;
|
padding: 24px 20px;
|
||||||
letter-spacing: 0.1px;
|
letter-spacing: 0.3px;
|
||||||
font-family: 'Spotify Circular', -apple-system, sans-serif;
|
font-family: 'SF Pro Text', -apple-system, sans-serif;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
opacity: 0.85;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Crypto Donation Section - Premium Glassmorphic Design */
|
/* Crypto Donation Section */
|
||||||
.crypto-donation {
|
.crypto-donation {
|
||||||
background: linear-gradient(180deg,
|
background: transparent;
|
||||||
rgba(18, 18, 18, 0.95) 0%,
|
border-top: 1px solid rgba(255, 255, 255, 0.04);
|
||||||
rgba(22, 22, 22, 0.98) 50%,
|
margin: 4px 14px;
|
||||||
rgba(16, 16, 16, 1.0) 100%);
|
padding: 12px 6px;
|
||||||
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 {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 0 20px 8px 20px;
|
padding: 0 14px 6px 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.donation-title {
|
.donation-title {
|
||||||
font-family: 'SF Pro Text', -apple-system, sans-serif;
|
font-family: 'SF Pro Text', -apple-system, sans-serif;
|
||||||
font-size: 10px;
|
font-size: 9px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: rgba(255, 255, 255, 0.9);
|
color: rgba(255, 255, 255, 0.3);
|
||||||
letter-spacing: 0.2px;
|
letter-spacing: 1px;
|
||||||
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle-button {
|
.toggle-button {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 20px;
|
height: 18px;
|
||||||
background: rgba(255, 255, 255, 0.1);
|
background: rgba(255, 255, 255, 0.06);
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
color: rgba(255, 255, 255, 0.7);
|
color: rgba(255, 255, 255, 0.5);
|
||||||
font-size: 8px;
|
font-size: 8px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -704,94 +779,86 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle-button:hover {
|
.toggle-button:hover {
|
||||||
background: rgba(255, 255, 255, 0.15);
|
background: rgba(255, 255, 255, 0.1);
|
||||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
color: rgba(255, 255, 255, 0.9);
|
color: rgba(255, 255, 255, 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
.donation-addresses {
|
.donation-addresses {
|
||||||
padding: 0 12px;
|
padding: 4px 8px 0 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.donation-item {
|
.donation-item {
|
||||||
height: 32px;
|
height: 30px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 4px 12px;
|
padding: 4px 12px;
|
||||||
margin: 0 0 4px 0;
|
margin: 0 0 2px 0;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
border: 1px solid transparent;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.donation-item:hover {
|
.donation-item:hover {
|
||||||
background: rgba(255, 255, 255, 0.06);
|
background: rgba(255, 255, 255, 0.04);
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
}
|
}
|
||||||
|
|
||||||
.donation-name {
|
.donation-name {
|
||||||
font-family: 'SF Pro Text', -apple-system, sans-serif;
|
font-family: 'SF Pro Text', -apple-system, sans-serif;
|
||||||
font-size: 9px;
|
font-size: 9px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: rgba(255, 255, 255, 0.8);
|
color: rgba(255, 255, 255, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
.donation-address,
|
.donation-address,
|
||||||
.donation-link {
|
.donation-link {
|
||||||
font-family: 'Courier New', monospace;
|
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||||
font-size: 8px;
|
font-size: 8px;
|
||||||
color: rgba(255, 255, 255, 0.5);
|
color: rgba(255, 255, 255, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.donation-link {
|
.donation-link {
|
||||||
font-family: 'SF Pro Text', -apple-system, sans-serif;
|
font-family: 'SF Pro Text', -apple-system, sans-serif;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
|
color: rgba(29, 185, 84, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Version Section - Premium Glassmorphic Design */
|
/* Version Section */
|
||||||
.version-section {
|
.version-section {
|
||||||
height: 45px;
|
|
||||||
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-radius: 12px;
|
|
||||||
margin: 8px 14px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 12px 20px;
|
padding: 4px 14px;
|
||||||
box-shadow:
|
margin: 0 14px;
|
||||||
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 {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: none;
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
color: rgba(255, 255, 255, 0.6);
|
color: rgba(255, 255, 255, 0.35);
|
||||||
font-family: 'SF Pro Text', -apple-system, sans-serif;
|
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||||
font-size: 10px;
|
font-size: 9px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
letter-spacing: 0.1px;
|
letter-spacing: 1px;
|
||||||
padding: 2px 8px;
|
padding: 4px 12px;
|
||||||
border-radius: 4px;
|
border-radius: 20px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.3s ease;
|
||||||
border: 1px solid transparent;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.version-button:hover {
|
.version-button:hover {
|
||||||
color: #1ed760;
|
color: #1ed760;
|
||||||
background: rgba(29, 185, 84, 0.1);
|
background: rgba(29, 185, 84, 0.08);
|
||||||
border: 1px solid rgba(29, 185, 84, 0.2);
|
border: 1px solid rgba(29, 185, 84, 0.2);
|
||||||
|
box-shadow: 0 0 12px rgba(29, 185, 84, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
.version-button:active {
|
.version-button:active {
|
||||||
background: rgba(29, 185, 84, 0.15);
|
background: rgba(29, 185, 84, 0.12);
|
||||||
|
transform: scale(0.97);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Status Section - Premium Glassmorphic Design */
|
/* Status Section - Premium Glassmorphic Design */
|
||||||
|
|
@ -801,81 +868,112 @@ body {
|
||||||
rgba(18, 18, 18, 0.95) 0%,
|
rgba(18, 18, 18, 0.95) 0%,
|
||||||
rgba(14, 14, 14, 0.98) 100%);
|
rgba(14, 14, 14, 0.98) 100%);
|
||||||
backdrop-filter: blur(8px) saturate(1.1);
|
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.06);
|
||||||
border-bottom-right-radius: 20px;
|
border-bottom-right-radius: 20px;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
margin: 8px 14px 0 14px;
|
margin: 8px 14px 14px 14px;
|
||||||
padding: 24px 0;
|
padding: 16px 0 12px 0;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 4px 16px rgba(0, 0, 0, 0.3),
|
0 4px 16px rgba(0, 0, 0, 0.3),
|
||||||
0 2px 8px rgba(0, 0, 0, 0.2),
|
0 2px 8px rgba(0, 0, 0, 0.2),
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-title {
|
.status-title {
|
||||||
font-family: 'SF Pro Text', -apple-system, sans-serif;
|
font-family: 'SF Pro Text', -apple-system, sans-serif;
|
||||||
font-size: 11px;
|
font-size: 9px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: rgba(255, 255, 255, 0.9);
|
color: rgba(255, 255, 255, 0.4);
|
||||||
letter-spacing: 0.2px;
|
letter-spacing: 1.5px;
|
||||||
padding: 0 20px 8px 20px;
|
text-transform: uppercase;
|
||||||
margin-bottom: 8px;
|
padding: 0 20px 10px 20px;
|
||||||
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-indicator {
|
.status-indicator {
|
||||||
height: 38px;
|
height: 34px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 14px;
|
gap: 12px;
|
||||||
padding: 8px 20px;
|
padding: 6px 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin: 0 8px;
|
||||||
|
transition: background 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-indicator:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-dot {
|
.status-dot {
|
||||||
width: 18px;
|
width: 10px;
|
||||||
height: 18px;
|
height: 10px;
|
||||||
border-radius: 9px;
|
border-radius: 50%;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 10px;
|
font-size: 0;
|
||||||
font-weight: 700;
|
position: relative;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-dot.connected {
|
.status-dot.connected {
|
||||||
color: #1ed760;
|
background: #1ed760;
|
||||||
background: linear-gradient(135deg, rgba(29, 185, 84, 0.2) 0%, rgba(30, 215, 96, 0.15) 100%);
|
border: none;
|
||||||
border: 1px solid rgba(29, 185, 84, 0.3);
|
box-shadow:
|
||||||
|
0 0 6px rgba(29, 185, 84, 0.6),
|
||||||
|
0 0 12px rgba(29, 185, 84, 0.3);
|
||||||
|
animation: status-pulse-green 3s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-dot.connected::before {
|
.status-dot.connected::before {
|
||||||
content: "●";
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: -3px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1.5px solid rgba(29, 185, 84, 0.3);
|
||||||
|
animation: status-ring-pulse 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes status-pulse-green {
|
||||||
|
0%, 100% {
|
||||||
|
box-shadow: 0 0 6px rgba(29, 185, 84, 0.6), 0 0 12px rgba(29, 185, 84, 0.3);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
box-shadow: 0 0 8px rgba(29, 185, 84, 0.8), 0 0 20px rgba(29, 185, 84, 0.4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes status-ring-pulse {
|
||||||
|
0%, 100% { opacity: 0.6; transform: scale(1); }
|
||||||
|
50% { opacity: 1; transform: scale(1.15); }
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-dot.disconnected {
|
.status-dot.disconnected {
|
||||||
color: #ff6b6b;
|
background: rgba(255, 80, 80, 0.7);
|
||||||
background: linear-gradient(135deg, rgba(255, 107, 107, 0.15) 0%, rgba(255, 107, 107, 0.1) 100%);
|
border: none;
|
||||||
border: 1px solid rgba(255, 107, 107, 0.2);
|
box-shadow: 0 0 4px rgba(255, 80, 80, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-dot.disconnected::before {
|
.status-dot.disconnected::before {
|
||||||
content: "●";
|
content: '';
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-name {
|
.status-name {
|
||||||
font-family: 'SF Pro Text', -apple-system, sans-serif;
|
font-family: 'SF Pro Text', -apple-system, sans-serif;
|
||||||
font-size: 10px;
|
font-size: 11px;
|
||||||
letter-spacing: 0.1px;
|
letter-spacing: 0.2px;
|
||||||
min-width: 85px;
|
min-width: 85px;
|
||||||
|
transition: color 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-indicator:has(.connected) .status-name {
|
.status-indicator:has(.connected) .status-name {
|
||||||
color: rgba(255, 255, 255, 0.95);
|
color: rgba(255, 255, 255, 0.9);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-indicator:has(.disconnected) .status-name {
|
.status-indicator:has(.disconnected) .status-name {
|
||||||
color: rgba(255, 255, 255, 0.5);
|
color: rgba(255, 255, 255, 0.35);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue