gahusb
6ef687378d
- --border-line → --line (5개 컴포넌트 8곳) - --gradient-accent → --grad-accent (FAB) - --text-default → --text (MobileSheet) - useSwipe.js 삭제 (미사용 dead code) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
51 lines
1.0 KiB
CSS
51 lines
1.0 KiB
CSS
/* FAB — Floating Action Button (mobile-only) */
|
|
|
|
.fab {
|
|
display: none;
|
|
position: fixed;
|
|
right: 20px;
|
|
bottom: calc(var(--bottom-nav-h) + var(--safe-area-bottom) + 16px);
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 50%;
|
|
background: var(--grad-accent);
|
|
border: none;
|
|
color: #000;
|
|
font-size: 24px;
|
|
z-index: 250;
|
|
box-shadow: 0 0 0 1px var(--neon-cyan-dim), 0 4px 16px rgba(0, 255, 255, 0.25);
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
-webkit-tap-highlight-color: transparent;
|
|
transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.fab {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.fab:active {
|
|
transform: scale(0.92);
|
|
}
|
|
|
|
.fab__icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Variant: positioned above a music mini-player */
|
|
.fab--above-player {
|
|
bottom: calc(var(--bottom-nav-h) + var(--safe-area-bottom) + 16px + 56px);
|
|
}
|
|
|
|
/* Reduced motion */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.fab {
|
|
transition: none;
|
|
}
|
|
}
|