.swipe-indicator {
position: fixed;
bottom: 80px;
right: 20px;
background: rgba(0, 0, 0, 0.85);
color: #fff;
padding: 12px 20px;
border-radius: 25px;
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 500;
z-index: 9999;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
animation: slideInUp 0.5s ease-out, pulse 2s ease-in-out infinite 1s;
cursor: pointer;
transition: transform 0.2s, opacity 0.3s;
}
.swipe-indicator:hover {
transform: scale(1.05);
}
.swipe-indicator .swipe-icon {
font-size: 20px;
animation: pointUp 1.5s ease-in-out infinite;
}
.swipe-indicator .swipe-text {
white-space: nowrap;
} .swipe-hint {
position: fixed;
top: 0;
bottom: 0;
width: 40%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9998;
pointer-events: none;
transition: opacity 0.1s;
}
.swipe-hint.swipe-left {
left: 0;
background: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent);
}
.swipe-hint.swipe-right {
right: 0;
background: linear-gradient(to left, rgba(0, 0, 0, 0.5), transparent);
}
.swipe-hint .swipe-arrow {
font-size: 48px;
color: #fff;
margin-bottom: 10px;
animation: slideHorizontal 0.8s ease-in-out infinite;
}
.swipe-hint.swipe-left .swipe-arrow {
animation: slideLeft 0.8s ease-in-out infinite;
}
.swipe-hint.swipe-right .swipe-arrow {
animation: slideRight 0.8s ease-in-out infinite;
}
.swipe-hint .swipe-title {
color: #fff;
font-size: 16px;
font-weight: 600;
max-width: 80%;
text-align: center;
padding: 0 10px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
line-height: 1.4;
} .swipe-feedback {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.9);
color: #fff;
padding: 20px 30px;
border-radius: 12px;
z-index: 99999;
display: none;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.swipe-feedback .feedback-content {
display: flex;
align-items: center;
gap: 15px;
}
.swipe-feedback .feedback-arrow {
font-size: 24px;
animation: bounce 0.6s ease-in-out infinite;
}
.swipe-feedback .feedback-text {
font-size: 16px;
font-weight: 500;
} @keyframes slideInUp {
from {
transform: translateY(100px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
@keyframes pointUp {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
@keyframes slideLeft {
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(-10px);
}
}
@keyframes slideRight {
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(10px);
}
}
@keyframes bounce {
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(5px);
}
} @media (min-width: 769px) {
.swipe-indicator,
.swipe-hint,
.swipe-feedback {
display: none !important;
}
} @media (max-width: 768px) {
.swipe-indicator {
bottom: 60px;
right: 15px;
padding: 10px 16px;
font-size: 13px;
}
.swipe-indicator .swipe-icon {
font-size: 18px;
}
.swipe-hint .swipe-arrow {
font-size: 40px;
}
.swipe-hint .swipe-title {
font-size: 14px;
}
} @media (prefers-color-scheme: dark) {
.swipe-indicator {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
}