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

Create compact glass containers for arrow icons

Browse Source 
Restructured scroll navigation:
- Arrow icons now in their own glass containers
- Minimal padding: 8px around icons
- 12px border-radius for rounded corners
- Positioned with left-2/right-2 and centered vertically
- Smaller, more elegant design
- Scale(1.05) on hover for subtle feedback

Icons are now compact glass pills instead of full-height bars.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Dorian
2026-02-03 00:45:05 +00:00
parent bcaae91dfd
commit 4558415d80
1 changed files with 21 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/ContentRow.vue
View File

@@ -9,11 +9,13 @@
<button <button
v-if="canScrollLeft" v-if="canScrollLeft"
@click="scrollLeft" @click="scrollLeft"
class="scroll-nav-button hidden md:flex items-center justify-center absolute left-0 top-0 bottom-0 z-10 w-12 transition-all" class="hidden md:flex items-center justify-center absolute left-2 top-1/2 -translate-y-1/2 z-10 transition-all"
> >
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"> <div class="scroll-nav-icon">
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
</svg> <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
</svg>
</div>
</button> </button>
<!-- Content Slider --> <!-- Content Slider -->
@@ -47,11 +49,13 @@
<button <button
v-if="canScrollRight" v-if="canScrollRight"
@click="scrollRight" @click="scrollRight"
class="scroll-nav-button hidden md:flex items-center justify-center absolute right-0 top-0 bottom-0 z-10 w-12 transition-all" class="hidden md:flex items-center justify-center absolute right-2 top-1/2 -translate-y-1/2 z-10 transition-all"
> >
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"> <div class="scroll-nav-icon">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
</svg> <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
</svg>
</div>
</button> </button>
</div> </div>
</div> </div>
@@ -125,7 +129,9 @@ onUnmounted(() => {
letter-spacing: 0.05em; /* 5% character spacing */ letter-spacing: 0.05em; /* 5% character spacing */
} }
.scroll-nav-button { .scroll-nav-icon {
padding: 8px;
border-radius: 12px;
background: rgba(0, 0, 0, 0.35); background: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(24px); backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
@@ -135,10 +141,14 @@ onUnmounted(() => {
inset 0 1px 0 rgba(255, 255, 255, 0.15); inset 0 1px 0 rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
opacity: 0.7; opacity: 0.7;
transition: all 0.3s ease;
cursor: pointer; cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
} }
.scroll-nav-button:hover { button:hover .scroll-nav-icon {
background: rgba(0, 0, 0, 0.45); background: rgba(0, 0, 0, 0.45);
border-color: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.15);
opacity: 1; opacity: 1;
@@ -146,6 +156,7 @@ onUnmounted(() => {
box-shadow: box-shadow:
0 12px 32px rgba(0, 0, 0, 0.6), 0 12px 32px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.2); inset 0 1px 0 rgba(255, 255, 255, 0.2);
transform: scale(1.05);
} }
.glass-card { .glass-card {