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
</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>
<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>
@@ -368,16 +368,19 @@
background-color: var(--color-white);
height: 100%;
padding: 50px 15px 0 15px;
position: relative;
position: absolute;
left: 0;
top: 0;
text-align: left;
width: 100%;
z-index: 10;
z-index: 50;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
justify-content: flex-start;
border: 1px solid rgba(8, 60, 130, 0.05);
transition: all var(--transition-time) var(--transition-method);
}
.player .player__artist {
@@ -421,15 +424,14 @@
}
.album {
transform: translateY(-50%);
transition: all var(--transition-time) var(--transition-method);
box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
cursor: pointer;
height: var(--album-size);
height: 100%;
position: absolute;
right: 0;
top: 50%;
width: var(--album-size);
left: 0;
top: 0;
width: 100%;
z-index: 100;
border-radius: 8px;
}
@@ -439,16 +441,18 @@
}
.player:hover {
transform: scale(1.08) translateY(-5px);
z-index: 999;
}
.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 {
right: -140px;
transform: scale(1.5);
z-index: 150;
box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.25);
}
.album__cover {
@@ -498,12 +502,12 @@
}
.player:hover .vinyl {
left: 45%;
left: 60%;
}
.player:hover .vinyl__circle {
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 {