mirror of
https://github.com/KuekHaoYang/KVideo.git
synced 2026-08-12 23:33:43 +08:00
kuekhaoyang
1439a15d22
- Added Danmaku settings including API URL, opacity, font size, and display area to PlayerSettings. - Improved button styles and transitions across various UI components for better user experience. - Updated BackToTop, Badge, Button, Card, ConfirmDialog, Input, ModalBackdrop, ModalHeader, SegmentedControl, and Switch components for consistency with Liquid Glass design. - Adjusted package versions in package.json and package-lock.json to reflect version 4.5.0.
67 lines
1.6 KiB
CSS
67 lines
1.6 KiB
CSS
/* Glass Components */
|
|
.glass-card {
|
|
background: var(--bg-color);
|
|
opacity: 1;
|
|
border-radius: var(--radius-2xl);
|
|
box-shadow: var(--shadow-sm);
|
|
border: 1px solid var(--glass-border);
|
|
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
|
|
transform: translateZ(0);
|
|
will-change: transform;
|
|
}
|
|
|
|
.glass-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.glass-input {
|
|
background: var(--glass-bg);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: var(--radius-2xl);
|
|
color: var(--text-color);
|
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.glass-input:focus {
|
|
outline: none;
|
|
border-color: var(--accent-color);
|
|
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.3);
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 30%, transparent);
|
|
}
|
|
|
|
.glass-button {
|
|
background: var(--accent-color);
|
|
color: white;
|
|
border: none;
|
|
border-radius: var(--radius-2xl);
|
|
padding: 0.75rem 1.25rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.glass-button:hover {
|
|
transform: translateY(-2px);
|
|
filter: brightness(1.1);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.glass-button:active {
|
|
transform: translateY(0) scale(0.98);
|
|
filter: brightness(0.95);
|
|
}
|
|
|
|
.glass-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: var(--radius-full);
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
background-color: var(--accent-color);
|
|
color: white;
|
|
}
|