truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update music production card layout and hover interaction styles

Browse Source
This commit is contained in:
Ümit Tunç
2026-06-01 08:46:21 +03:00
parent f34fc0f2a0
commit e7ad0123ac
1 changed files with 30 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/front/music-productions/index.blade.php
+30 -26
View File
@@ -119,21 +119,21 @@
@endif @endif
</div> </div>
<div class="player__track">{{ $production->translate('title') }}</div> <div class="player__track">{{ $production->translate('title') }}</div>
<a href="{{ $detailUrl }}" class="album" data-album>
@if($production->cover_image_url)
<div class="album__cover" style="background-image: url('{{ $production->cover_image_url }}');"></div>
@else
<div class="album__cover" style="background-image: url('{{ asset('assets/img/photos/pd6.jpg') }}');"></div>
@endif
<div class="vinyl">
<div class="vinyl__shadow"></div>
<div class="vinyl__circle">
<div class="vinyl__center" style="--center-bg: url('{{ $production->cover_image_url ?: asset('assets/img/photos/pd6.jpg') }}')"></div>
</div>
</div>
</a>
</div> </div>
<a href="{{ $detailUrl }}" class="album" data-album>
@if($production->cover_image_url)
<div class="album__cover" style="background-image: url('{{ $production->cover_image_url }}');"></div>
@else
<div class="album__cover" style="background-image: url('{{ asset('assets/img/photos/pd6.jpg') }}');"></div>
@endif
<div class="vinyl">
<div class="vinyl__shadow"></div>
<div class="vinyl__circle">
<div class="vinyl__center" style="--center-bg: url('{{ $production->cover_image_url ?: asset('assets/img/photos/pd6.jpg') }}')"></div>
</div>
</div>
</a>
</div> </div>
</div> </div>
</div> </div>
@@ -368,16 +368,19 @@
background-color: var(--color-white); background-color: var(--color-white);
height: 100%; height: 100%;
padding: 50px 15px 0 15px; padding: 50px 15px 0 15px;
position: relative; position: absolute;
left: 0;
top: 0;
text-align: left; text-align: left;
width: 100%; width: 100%;
z-index: 10; z-index: 50;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 10px 30px rgba(0,0,0,0.05); box-shadow: 0 10px 30px rgba(0,0,0,0.05);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
border: 1px solid rgba(8, 60, 130, 0.05); border: 1px solid rgba(8, 60, 130, 0.05);
transition: all var(--transition-time) var(--transition-method);
} }
.player .player__artist { .player .player__artist {
@@ -421,15 +424,14 @@
} }
.album { .album {
transform: translateY(-50%);
transition: all var(--transition-time) var(--transition-method); transition: all var(--transition-time) var(--transition-method);
box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15); box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
cursor: pointer; cursor: pointer;
height: var(--album-size); height: 100%;
position: absolute; position: absolute;
right: 0; left: 0;
top: 50%; top: 0;
width: var(--album-size); width: 100%;
z-index: 100; z-index: 100;
border-radius: 8px; border-radius: 8px;
} }
@@ -439,16 +441,18 @@
} }
.player:hover { .player:hover {
transform: scale(1.08) translateY(-5px);
z-index: 999; z-index: 999;
} }
.player:hover .player__content { .player:hover .player__content {
box-shadow: 0 15px 35px rgba(0,0,0,0.1); transform: translateX(-260px);
box-shadow: -10px 15px 35px rgba(0,0,0,0.1);
} }
.player:hover .album { .player:hover .album {
right: -140px; transform: scale(1.5);
z-index: 150;
box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.25);
} }
.album__cover { .album__cover {
@@ -498,12 +502,12 @@
} }
.player:hover .vinyl { .player:hover .vinyl {
left: 45%; left: 60%;
} }
.player:hover .vinyl__circle { .player:hover .vinyl__circle {
animation-play-state: running; animation-play-state: running;
box-shadow: 0 0 25px rgba(227, 30, 36, 0.65), 0 0 50px rgba(227, 30, 36, 0.35); box-shadow: 0 0 25px rgba(0, 0, 0, 0.35), 0 0 50px rgba(3, 3, 3, 0.35);
} }
.vinyl__center { .vinyl__center {