Dymas/h-play
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Match Kaizoku theme cards

Browse Source
This commit is contained in:
Dymas
2026-09-15 15:21:36 +02:00
parent e1dfdc7bd7
commit b0690edb2a
5 changed files with 42 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/styles.css
+35 -16
View File
@@ -34,7 +34,7 @@ body {
radial-gradient(circle at top right, rgba(117, 201, 255, 0.12), transparent 24%),
linear-gradient(180deg, #120c1d 0%, #0b0813 56%, #07050d 100%);
color: var(--text);
font: 15px/1.5 "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font: 15px/1.5 "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
body::before {
@@ -240,24 +240,36 @@ label {
.title-list {
display: grid;
gap: 8px;
gap: 12px;
min-width: 0;
}
.title-button {
display: grid;
gap: 0.2rem;
gap: 12px;
width: 100%;
min-height: 62px;
border-radius: 16px;
min-height: auto;
border: 1px solid var(--line);
border-radius: 20px;
background: linear-gradient(180deg, rgba(32, 24, 54, 0.9) 0%, rgba(17, 13, 29, 0.96) 100%);
box-shadow: 0 18px 38px rgba(5, 2, 15, 0.32);
padding: 14px;
text-align: left;
background: rgba(255, 255, 255, 0.03);
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.title-button:hover {
border-color: var(--line-strong);
background: linear-gradient(180deg, rgba(38, 28, 64, 0.94) 0%, rgba(19, 14, 32, 0.98) 100%);
transform: translateY(-2px);
}
.title-button.is-active {
border-color: rgba(157, 123, 255, 0.34);
background: var(--accent-soft);
box-shadow: inset 0 0 0 1px rgba(157, 123, 255, 0.16);
border-color: rgba(157, 123, 255, 0.58);
background: linear-gradient(180deg, rgba(48, 36, 80, 0.96), rgba(20, 15, 35, 0.96));
box-shadow:
inset 0 0 0 1px rgba(157, 123, 255, 0.16),
0 18px 38px rgba(5, 2, 15, 0.32);
}
.title-button__name {
@@ -308,16 +320,16 @@ label {
}
.poster {
aspect-ratio: 2 / 3;
border: 1px solid var(--line);
border-radius: 20px;
aspect-ratio: 3 / 4;
position: relative;
border: 1px solid rgba(157, 123, 255, 0.16);
border-radius: 16px;
background:
radial-gradient(circle at 35% 20%, rgba(157, 123, 255, 0.28), transparent 34%),
linear-gradient(180deg, rgba(32, 24, 54, 0.9), rgba(17, 13, 29, 0.96));
radial-gradient(circle at top, rgba(157, 123, 255, 0.28), transparent 44%),
linear-gradient(180deg, #221734 0%, #0c0915 100%);
overflow: hidden;
display: grid;
place-items: center;
box-shadow: 0 16px 36px rgba(5, 2, 15, 0.3);
}
.poster img {
@@ -327,9 +339,16 @@ label {
}
.poster span {
color: var(--accent);
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: #d8e5ef;
font-size: clamp(2.5rem, 7vw, 5rem);
font-weight: 900;
letter-spacing: 0;
text-transform: uppercase;
background: linear-gradient(180deg, rgba(157, 123, 255, 0.24), rgba(9, 7, 15, 0.18));
}
.summary {