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

Revert scroll nav buttons to full-height style

Browse Source 
Reverted back to previous design:
- Buttons span full height (top-0 bottom-0)
- No separate container wrapper
- Direct glassmorphic styling on button
- 48px width (w-12)
- 32px icon size (w-8 h-8)
- Positioned at edges (left-0, right-0)

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Dorian
2026-02-03 01:00:13 +00:00
parent 0aed617bca
commit dacfa7a822
2 changed files with 103 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/ContentRow.vue
View File

@@ -6,19 +6,15 @@
<div class="relative group">
<!-- Scroll Left Button -->
<div
<button
v-if="canScrollLeft"
class="scroll-nav-container hidden md:flex absolute left-4 top-1/2 -translate-y-1/2 z-10"
@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"
>
<button
@click="scrollLeft"
class="scroll-nav-button flex items-center justify-center w-10 h-10 transition-all"
>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
</svg>
</button>
</div>
<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"/>
</svg>
</button>
<!-- Content Slider -->
<div
@@ -48,19 +44,15 @@
</div>
<!-- Scroll Right Button -->
<div
<button
v-if="canScrollRight"
class="scroll-nav-container hidden md:flex absolute right-4 top-1/2 -translate-y-1/2 z-10"
@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"
>
<button
@click="scrollRight"
class="scroll-nav-button flex items-center justify-center w-10 h-10 transition-all"
>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
</svg>
</button>
</div>
<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"/>
</svg>
</button>
</div>
</div>
</template>
@@ -133,7 +125,7 @@ onUnmounted(() => {
letter-spacing: 0.05em; /* 5% character spacing */
}
.scroll-nav-container {
.scroll-nav-button {
background: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
@@ -141,33 +133,21 @@ onUnmounted(() => {
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
border-radius: 12px;
padding: 2px;
color: rgba(255, 255, 255, 0.8);
opacity: 0.7;
transition: all 0.3s ease;
cursor: pointer;
}
.scroll-nav-container:hover {
.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);
}
.scroll-nav-button {
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.8);
cursor: pointer;
border-radius: 10px;
}
.scroll-nav-container:hover .scroll-nav-button {
color: rgba(255, 255, 255, 1);
}
.glass-card {
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);