devilreef/denpa-radio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(frontend): add Tape presentational component

Browse source
This commit is contained in:
devilreef 2026-04-30 09:34:49 +06:00
parent d16bc80ac8
commit f069eef8a8
Signed by: devilreef
SSH key fingerprint: SHA256:UZisRr4iuXx+IhkbZnR655L2RWAT6o2rgbGv5F/6m3Y
2 changed files with 53 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

23
frontend/src/styles/components/tape.css Normal file
View file

@ -0,0 +1,23 @@
.tape {
font-family: var(--f-mono);
background: var(--cream); color: var(--ink);
padding: 10px 12px 12px;
border: 2px solid var(--ink);
box-shadow: 3px 3px 0 var(--ink);
cursor: pointer; text-align: left;
transition: transform 120ms ease-out, box-shadow 120ms ease-out;
width: 100%;
}
.tape:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }
.tape.active {
background: var(--pink); color: var(--cream);
transform: translate(-3px,-3px) rotate(-1deg);
box-shadow: 6px 6px 0 var(--lemon);
}
.tape-num { font-family: var(--f-mono); font-size: 10px; opacity: 0.65; letter-spacing: 1.5px; }
.tape-name { font-family: var(--f-pixel); font-size: 16px; line-height: 1.1; margin-top: 2px; }
.tape-jp { font-family: var(--f-pixel); font-size: 11px; opacity: 0.85; letter-spacing: 1.5px; margin-top: 2px; }
.tape-meta { font-family: var(--f-mono); font-size: 10px; margin-top: 6px; display: flex; justify-content: space-between; opacity: 0.75; }
.tape-holes { display: flex; gap: 4px; margin-top: 6px; }
.tape-holes span { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 3px var(--cream); }
.tape.active .tape-holes span { box-shadow: inset 0 0 0 3px var(--pink); }