lfg2025/indee-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply glassmorphism to scroll navigation arrows

Browse Source 
Styled scroll buttons with glass treatment:
- Background: rgba(0, 0, 0, 0.35) with 24px backdrop blur
- Border: Subtle white border with glow
- Box shadow: Layered shadows with inset highlight
- Hover: Darker background with enhanced glow
- Opacity: 70% default, 100% on hover
- Matches overall glassmorphic design language

Buttons now have the same elegant glass styling as other UI elements.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Dorian
2026-02-03 00:44:09 +00:00
parent 439bc792a3
commit bcaae91dfd
1 changed files with 27 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/ContentRow.vue
View File

@@ -9,9 +9,9 @@
<button <button
v-if="canScrollLeft" v-if="canScrollLeft"
@click="scrollLeft" @click="scrollLeft"
class="scroll-nav-button hidden md:block absolute left-0 top-0 bottom-0 z-10 w-12 bg-black/50 hover:bg-black/70 backdrop-blur-sm opacity-70 hover:opacity-100 transition-opacity" class="scroll-nav-button hidden md:flex items-center justify-center absolute left-0 top-0 bottom-0 z-10 w-12 transition-all"
> >
<svg class="w-8 h-8 mx-auto" fill="currentColor" viewBox="0 0 24 24"> <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/> <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
</svg> </svg>
</button> </button>
@@ -47,9 +47,9 @@
<button <button
v-if="canScrollRight" v-if="canScrollRight"
@click="scrollRight" @click="scrollRight"
class="scroll-nav-button hidden md:block absolute right-0 top-0 bottom-0 z-10 w-12 bg-black/50 hover:bg-black/70 backdrop-blur-sm opacity-70 hover:opacity-100 transition-opacity" class="scroll-nav-button hidden md:flex items-center justify-center absolute right-0 top-0 bottom-0 z-10 w-12 transition-all"
> >
<svg class="w-8 h-8 mx-auto" fill="currentColor" viewBox="0 0 24 24"> <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/> <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
</svg> </svg>
</button> </button>
@@ -125,6 +125,29 @@ onUnmounted(() => {
letter-spacing: 0.05em; /* 5% character spacing */ letter-spacing: 0.05em; /* 5% character spacing */
} }
.scroll-nav-button {
background: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.8);
opacity: 0.7;
cursor: pointer;
}
.scroll-nav-button:hover {
background: rgba(0, 0, 0, 0.45);
border-color: rgba(255, 255, 255, 0.15);
opacity: 1;
color: rgba(255, 255, 255, 1);
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.glass-card { .glass-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);