mirror of
https://github.com/juherr/kill-the-news.git
synced 2026-06-20 22:03:48 +00:00
style(ui): add more depth to glass buttons
This commit is contained in:
Young Lee
+125
-71
@@ -127,74 +127,122 @@ export const componentStyles = `
|
|||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Button - VisionOS Style with consistent height */
|
/* Button - VisionOS Style with consistent height */
|
||||||
.button {
|
.button {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
height: 44px; /* Fixed height for consistency */
|
position: relative;
|
||||||
padding: 0 var(--spacing-lg);
|
overflow: hidden;
|
||||||
border-radius: var(--radius-md);
|
height: 44px; /* Fixed height for consistency */
|
||||||
font-size: var(--font-size-md);
|
padding: 0 var(--spacing-lg);
|
||||||
font-weight: var(--font-weight-medium);
|
border-radius: var(--radius-md);
|
||||||
|
font-size: var(--font-size-md);
|
||||||
|
font-weight: var(--font-weight-medium);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all var(--transition-fast), color 0.3s ease, background-color 0.3s ease;
|
transition: all var(--transition-fast), color 0.3s ease, background-color 0.3s ease;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
||||||
/* Glass effect for buttons */
|
/* Liquid-glass depth: layered gradients + inner highlights */
|
||||||
background-color: rgba(10, 132, 255, 0.8);
|
background-color: rgba(10, 132, 255, 0.78);
|
||||||
backdrop-filter: blur(var(--blur-sm));
|
background-image:
|
||||||
-webkit-backdrop-filter: blur(var(--blur-sm));
|
radial-gradient(140% 120% at 18% 0%, rgba(255, 255, 255, 0.38), transparent 48%),
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
linear-gradient(180deg, rgba(10, 132, 255, 0.98) 0%, rgba(10, 132, 255, 0.68) 100%);
|
||||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
backdrop-filter: blur(var(--blur-sm));
|
||||||
color: var(--color-text-on-primary);
|
-webkit-backdrop-filter: blur(var(--blur-sm));
|
||||||
}
|
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||||
|
box-shadow:
|
||||||
|
0 14px 34px rgba(0, 0, 0, 0.22),
|
||||||
|
0 2px 6px rgba(0, 0, 0, 0.14),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.22),
|
||||||
|
inset 0 -1px 0 rgba(0, 0, 0, 0.26);
|
||||||
|
color: var(--color-text-on-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
border-radius: inherit;
|
||||||
|
pointer-events: none;
|
||||||
|
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover, .button:focus {
|
||||||
|
background-color: rgba(10, 132, 255, 0.86);
|
||||||
|
background-image:
|
||||||
|
radial-gradient(140% 120% at 18% 0%, rgba(255, 255, 255, 0.45), transparent 50%),
|
||||||
|
linear-gradient(180deg, rgba(10, 132, 255, 1) 0%, rgba(10, 132, 255, 0.74) 100%);
|
||||||
|
box-shadow:
|
||||||
|
0 18px 46px rgba(0, 0, 0, 0.26),
|
||||||
|
0 6px 14px rgba(0, 0, 0, 0.16),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.22),
|
||||||
|
inset 0 -1px 0 rgba(0, 0, 0, 0.28);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
box-shadow:
|
||||||
|
0 10px 26px rgba(0, 0, 0, 0.22),
|
||||||
|
0 2px 6px rgba(0, 0, 0, 0.12),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.18),
|
||||||
|
inset 0 -1px 0 rgba(0, 0, 0, 0.30);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-secondary {
|
||||||
|
background-color: rgba(60, 60, 67, 0.12);
|
||||||
|
background-image:
|
||||||
|
radial-gradient(140% 120% at 18% 0%, rgba(255, 255, 255, 0.26), transparent 52%),
|
||||||
|
linear-gradient(180deg, rgba(60, 60, 67, 0.22) 0%, rgba(60, 60, 67, 0.08) 100%);
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-secondary:hover, .button-secondary:focus {
|
||||||
|
background-color: rgba(60, 60, 67, 0.18);
|
||||||
|
background-image:
|
||||||
|
radial-gradient(140% 120% at 18% 0%, rgba(255, 255, 255, 0.30), transparent 52%),
|
||||||
|
linear-gradient(180deg, rgba(60, 60, 67, 0.28) 0%, rgba(60, 60, 67, 0.10) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Light mode specific button styling */
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
.button-secondary {
|
||||||
|
background-color: rgba(60, 60, 67, 0.06);
|
||||||
|
background-image:
|
||||||
|
radial-gradient(140% 120% at 18% 0%, rgba(255, 255, 255, 0.55), transparent 55%),
|
||||||
|
linear-gradient(180deg, rgba(60, 60, 67, 0.10) 0%, rgba(60, 60, 67, 0.04) 100%);
|
||||||
|
border: 1px solid rgba(60, 60, 67, 0.14);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-secondary:hover, .button-secondary:focus {
|
||||||
|
background-color: rgba(60, 60, 67, 0.08);
|
||||||
|
background-image:
|
||||||
|
radial-gradient(140% 120% at 18% 0%, rgba(255, 255, 255, 0.62), transparent 55%),
|
||||||
|
linear-gradient(180deg, rgba(60, 60, 67, 0.12) 0%, rgba(60, 60, 67, 0.06) 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.button:hover, .button:focus {
|
/* Logout button styling */
|
||||||
background-color: rgba(10, 132, 255, 0.9);
|
.button-logout {
|
||||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
|
background-color: rgba(255, 159, 10, 0.78);
|
||||||
transform: translateY(-1px);
|
background-image:
|
||||||
}
|
radial-gradient(140% 120% at 18% 0%, rgba(255, 255, 255, 0.34), transparent 50%),
|
||||||
|
linear-gradient(180deg, rgba(255, 159, 10, 0.98) 0%, rgba(255, 159, 10, 0.66) 100%);
|
||||||
.button:active {
|
color: var(--color-text-on-primary);
|
||||||
transform: translateY(0);
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
}
|
||||||
}
|
|
||||||
|
.button-logout:hover, .button-logout:focus {
|
||||||
.button-secondary {
|
background-color: rgba(255, 159, 10, 0.86);
|
||||||
background-color: rgba(60, 60, 67, 0.1);
|
background-image:
|
||||||
color: var(--color-text-primary);
|
radial-gradient(140% 120% at 18% 0%, rgba(255, 255, 255, 0.42), transparent 52%),
|
||||||
border: 1px solid var(--color-border);
|
linear-gradient(180deg, rgba(255, 159, 10, 1) 0%, rgba(255, 159, 10, 0.72) 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-secondary:hover, .button-secondary:focus {
|
|
||||||
background-color: rgba(60, 60, 67, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Light mode specific button styling */
|
|
||||||
@media (prefers-color-scheme: light) {
|
|
||||||
.button-secondary {
|
|
||||||
background-color: rgba(60, 60, 67, 0.05);
|
|
||||||
border: 1px solid rgba(60, 60, 67, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-secondary:hover, .button-secondary:focus {
|
|
||||||
background-color: rgba(60, 60, 67, 0.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Logout button styling */
|
|
||||||
.button-logout {
|
|
||||||
background-color: var(--color-logout);
|
|
||||||
color: var(--color-text-on-primary);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-logout:hover, .button-logout:focus {
|
|
||||||
background-color: rgba(255, 159, 10, 0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Back button styling */
|
/* Back button styling */
|
||||||
.button-back {
|
.button-back {
|
||||||
@@ -210,13 +258,19 @@ export const componentStyles = `
|
|||||||
font-size: var(--font-size-lg);
|
font-size: var(--font-size-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-danger {
|
.button-danger {
|
||||||
background-color: rgba(255, 69, 58, 0.8);
|
background-color: rgba(255, 69, 58, 0.78);
|
||||||
}
|
background-image:
|
||||||
|
radial-gradient(140% 120% at 18% 0%, rgba(255, 255, 255, 0.34), transparent 50%),
|
||||||
.button-danger:hover, .button-danger:focus {
|
linear-gradient(180deg, rgba(255, 69, 58, 0.98) 0%, rgba(255, 69, 58, 0.66) 100%);
|
||||||
background-color: rgba(255, 69, 58, 0.9);
|
}
|
||||||
}
|
|
||||||
|
.button-danger:hover, .button-danger:focus {
|
||||||
|
background-color: rgba(255, 69, 58, 0.86);
|
||||||
|
background-image:
|
||||||
|
radial-gradient(140% 120% at 18% 0%, rgba(255, 255, 255, 0.42), transparent 52%),
|
||||||
|
linear-gradient(180deg, rgba(255, 69, 58, 1) 0%, rgba(255, 69, 58, 0.72) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
/* Small button variation */
|
/* Small button variation */
|
||||||
.button-small {
|
.button-small {
|
||||||
|
|||||||
Reference in New Issue
Block a user