1b4a5507df
Introduce intermediate info panels for user type selection with description and benefits before registration. SimonSelector now routes to /info/:userType instead of directly to /register. Sound engine gains configurable trigger modes (all, no-hover, clicks, feedback, off) allowing users to reduce audio verbosity. FloatingSettings includes UI styling for the trigger mode selector. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
664 lines
16 KiB
CSS
664 lines
16 KiB
CSS
/* ============================================
|
|
FLOATING SETTINGS - Multi-action FAB
|
|
============================================ */
|
|
|
|
.floating-settings-container {
|
|
position: fixed;
|
|
bottom: calc(var(--footer-height, 60px) + 8px); /* Footer height + spacing */
|
|
right: 1.5rem;
|
|
z-index: 100;
|
|
}
|
|
|
|
/* Backdrop blur overlay */
|
|
.floating-settings-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
backdrop-filter: blur(2px);
|
|
z-index: 99;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Main FAB - always visible */
|
|
.floating-settings-fab {
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 50%;
|
|
border: 2px solid rgba(255, 255, 255, 0.2);
|
|
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
|
color: white;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow:
|
|
0 4px 15px rgba(0, 0, 0, 0.3),
|
|
0 0 30px rgba(99, 102, 241, 0.3);
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
z-index: 101;
|
|
}
|
|
|
|
.floating-settings-fab:hover {
|
|
border-color: rgba(255, 255, 255, 0.4);
|
|
box-shadow:
|
|
0 6px 20px rgba(0, 0, 0, 0.4),
|
|
0 0 40px rgba(99, 102, 241, 0.5);
|
|
}
|
|
|
|
.floating-settings-fab:focus-visible {
|
|
outline: 2px solid rgba(255, 255, 255, 0.8);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Action buttons container */
|
|
.floating-settings-actions {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
/* Category row - contains category button and its expandable options */
|
|
.category-row {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 4px;
|
|
}
|
|
|
|
/* Individual action buttons */
|
|
.floating-action-button {
|
|
position: relative;
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
border: 2px solid rgba(255, 255, 255, 0.2);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
transition: all 0.3s ease;
|
|
color: white;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.floating-action-button:hover {
|
|
border-color: rgba(255, 255, 255, 0.4);
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.floating-action-button:focus-visible {
|
|
outline: 2px solid rgba(255, 255, 255, 0.8);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Expandable options container (expands to the left) */
|
|
.category-options {
|
|
position: absolute;
|
|
right: 56px; /* Position to the left of the 48px button + gap */
|
|
bottom: 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
/* Individual option buttons */
|
|
.option-button {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
border: 2px solid rgba(255, 255, 255, 0.15);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
transition: all 0.2s ease;
|
|
color: white;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.option-button:hover {
|
|
border-color: rgba(255, 255, 255, 0.4);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.option-button.active {
|
|
border-color: rgba(255, 255, 255, 0.6);
|
|
box-shadow:
|
|
0 2px 8px rgba(0, 0, 0, 0.3),
|
|
0 0 15px rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.option-button:focus-visible {
|
|
outline: 2px solid rgba(255, 255, 255, 0.8);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Option label (for sound options) */
|
|
.option-label {
|
|
font-size: 0.6rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* Particle option styling by type */
|
|
.particle-option.off {
|
|
background: linear-gradient(135deg, rgba(107, 114, 128, 0.7) 0%, rgba(75, 85, 99, 0.7) 100%);
|
|
}
|
|
|
|
.particle-option.off.active {
|
|
background: linear-gradient(135deg, rgba(107, 114, 128, 0.9) 0%, rgba(75, 85, 99, 0.9) 100%);
|
|
}
|
|
|
|
.particle-option.glow {
|
|
background: linear-gradient(135deg, rgba(147, 51, 234, 0.7) 0%, rgba(126, 34, 206, 0.7) 100%);
|
|
}
|
|
|
|
.particle-option.glow.active {
|
|
background: linear-gradient(135deg, rgba(147, 51, 234, 0.9) 0%, rgba(126, 34, 206, 0.9) 100%);
|
|
box-shadow:
|
|
0 2px 8px rgba(0, 0, 0, 0.3),
|
|
0 0 20px rgba(147, 51, 234, 0.5);
|
|
}
|
|
|
|
.particle-option.party {
|
|
background: linear-gradient(135deg, rgba(251, 191, 36, 0.7) 0%, rgba(245, 158, 11, 0.7) 100%);
|
|
}
|
|
|
|
.particle-option.party.active {
|
|
background: linear-gradient(135deg, rgba(251, 191, 36, 0.9) 0%, rgba(245, 158, 11, 0.9) 100%);
|
|
box-shadow:
|
|
0 2px 8px rgba(0, 0, 0, 0.3),
|
|
0 0 20px rgba(251, 191, 36, 0.5);
|
|
}
|
|
|
|
.particle-option.snow {
|
|
background: linear-gradient(135deg, rgba(191, 219, 254, 0.7) 0%, rgba(147, 197, 253, 0.7) 100%);
|
|
color: rgba(30, 58, 138, 0.9);
|
|
}
|
|
|
|
.particle-option.snow.active {
|
|
background: linear-gradient(135deg, rgba(191, 219, 254, 0.95) 0%, rgba(147, 197, 253, 0.95) 100%);
|
|
box-shadow:
|
|
0 2px 8px rgba(0, 0, 0, 0.3),
|
|
0 0 20px rgba(147, 197, 253, 0.5);
|
|
}
|
|
|
|
.particle-option.glitter {
|
|
background: linear-gradient(135deg, rgba(253, 224, 71, 0.7) 0%, rgba(250, 204, 21, 0.7) 100%);
|
|
color: rgba(113, 63, 18, 0.9);
|
|
}
|
|
|
|
.particle-option.glitter.active {
|
|
background: linear-gradient(135deg, rgba(253, 224, 71, 0.95) 0%, rgba(250, 204, 21, 0.95) 100%);
|
|
box-shadow:
|
|
0 2px 8px rgba(0, 0, 0, 0.3),
|
|
0 0 20px rgba(253, 224, 71, 0.5);
|
|
}
|
|
|
|
.particle-option.stars {
|
|
background: linear-gradient(135deg, rgba(254, 249, 195, 0.7) 0%, rgba(253, 230, 138, 0.7) 100%);
|
|
color: rgba(133, 77, 14, 0.9);
|
|
}
|
|
|
|
.particle-option.stars.active {
|
|
background: linear-gradient(135deg, rgba(254, 249, 195, 0.95) 0%, rgba(253, 230, 138, 0.95) 100%);
|
|
box-shadow:
|
|
0 2px 8px rgba(0, 0, 0, 0.3),
|
|
0 0 20px rgba(254, 249, 195, 0.5);
|
|
}
|
|
|
|
/* Sound option styling */
|
|
.sound-option.off {
|
|
background: linear-gradient(135deg, rgba(239, 68, 68, 0.7) 0%, rgba(220, 38, 38, 0.7) 100%);
|
|
}
|
|
|
|
.sound-option.off.active {
|
|
background: linear-gradient(135deg, rgba(239, 68, 68, 0.9) 0%, rgba(220, 38, 38, 0.9) 100%);
|
|
box-shadow:
|
|
0 2px 8px rgba(0, 0, 0, 0.3),
|
|
0 0 15px rgba(239, 68, 68, 0.4);
|
|
}
|
|
|
|
.sound-option.human {
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.7) 0%, rgba(37, 99, 235, 0.7) 100%);
|
|
}
|
|
|
|
.sound-option.human.active {
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.9) 0%, rgba(37, 99, 235, 0.9) 100%);
|
|
box-shadow:
|
|
0 2px 8px rgba(0, 0, 0, 0.3),
|
|
0 0 15px rgba(59, 130, 246, 0.4);
|
|
}
|
|
|
|
.sound-option.anime {
|
|
background: linear-gradient(135deg, rgba(236, 72, 153, 0.7) 0%, rgba(219, 39, 119, 0.7) 100%);
|
|
}
|
|
|
|
.sound-option.anime.active {
|
|
background: linear-gradient(135deg, rgba(236, 72, 153, 0.9) 0%, rgba(219, 39, 119, 0.9) 100%);
|
|
box-shadow:
|
|
0 2px 8px rgba(0, 0, 0, 0.3),
|
|
0 0 15px rgba(236, 72, 153, 0.4);
|
|
}
|
|
|
|
/* Sound toggle button styling */
|
|
.sound-button {
|
|
background: rgba(0, 0, 0, 0.7);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.sound-button.human {
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.8) 0%, rgba(37, 99, 235, 0.8) 100%);
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 0, 0, 0.3),
|
|
0 0 20px rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
.sound-button.human:hover {
|
|
box-shadow:
|
|
0 6px 16px rgba(0, 0, 0, 0.4),
|
|
0 0 30px rgba(59, 130, 246, 0.5);
|
|
}
|
|
|
|
.sound-button.anime {
|
|
background: linear-gradient(135deg, rgba(236, 72, 153, 0.8) 0%, rgba(219, 39, 119, 0.8) 100%);
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 0, 0, 0.3),
|
|
0 0 20px rgba(236, 72, 153, 0.3);
|
|
}
|
|
|
|
.sound-button.anime:hover {
|
|
box-shadow:
|
|
0 6px 16px rgba(0, 0, 0, 0.4),
|
|
0 0 30px rgba(236, 72, 153, 0.5);
|
|
}
|
|
|
|
.sound-button.disabled {
|
|
background: linear-gradient(135deg, rgba(239, 68, 68, 0.8) 0%, rgba(220, 38, 38, 0.8) 100%);
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 0, 0, 0.3),
|
|
0 0 20px rgba(239, 68, 68, 0.3);
|
|
}
|
|
|
|
.sound-button.disabled:hover {
|
|
box-shadow:
|
|
0 6px 16px rgba(0, 0, 0, 0.4),
|
|
0 0 30px rgba(239, 68, 68, 0.5);
|
|
}
|
|
|
|
/* Sound pack button styling */
|
|
.pack-button {
|
|
background: rgba(0, 0, 0, 0.7);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.pack-button.human {
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.8) 0%, rgba(37, 99, 235, 0.8) 100%);
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 0, 0, 0.3),
|
|
0 0 20px rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
.pack-button.human:hover {
|
|
box-shadow:
|
|
0 6px 16px rgba(0, 0, 0, 0.4),
|
|
0 0 30px rgba(59, 130, 246, 0.5);
|
|
}
|
|
|
|
.pack-button.anime {
|
|
background: linear-gradient(135deg, rgba(236, 72, 153, 0.8) 0%, rgba(219, 39, 119, 0.8) 100%);
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 0, 0, 0.3),
|
|
0 0 20px rgba(236, 72, 153, 0.3);
|
|
}
|
|
|
|
.pack-button.anime:hover {
|
|
box-shadow:
|
|
0 6px 16px rgba(0, 0, 0, 0.4),
|
|
0 0 30px rgba(236, 72, 153, 0.5);
|
|
}
|
|
|
|
/* Particle style button styling */
|
|
.particle-button {
|
|
background: rgba(0, 0, 0, 0.7);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.particle-button.off {
|
|
background: linear-gradient(135deg, rgba(107, 114, 128, 0.8) 0%, rgba(75, 85, 99, 0.8) 100%);
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 0, 0, 0.3),
|
|
0 0 20px rgba(107, 114, 128, 0.3);
|
|
}
|
|
|
|
.particle-button.off:hover {
|
|
box-shadow:
|
|
0 6px 16px rgba(0, 0, 0, 0.4),
|
|
0 0 30px rgba(107, 114, 128, 0.5);
|
|
}
|
|
|
|
.particle-button.glow {
|
|
background: linear-gradient(135deg, rgba(147, 51, 234, 0.8) 0%, rgba(126, 34, 206, 0.8) 100%);
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 0, 0, 0.3),
|
|
0 0 20px rgba(147, 51, 234, 0.3);
|
|
}
|
|
|
|
.particle-button.glow:hover {
|
|
box-shadow:
|
|
0 6px 16px rgba(0, 0, 0, 0.4),
|
|
0 0 30px rgba(147, 51, 234, 0.5);
|
|
}
|
|
|
|
.particle-button.party {
|
|
background: linear-gradient(135deg, rgba(251, 191, 36, 0.8) 0%, rgba(245, 158, 11, 0.8) 100%);
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 0, 0, 0.3),
|
|
0 0 20px rgba(251, 191, 36, 0.3);
|
|
}
|
|
|
|
.particle-button.party:hover {
|
|
box-shadow:
|
|
0 6px 16px rgba(0, 0, 0, 0.4),
|
|
0 0 30px rgba(251, 191, 36, 0.5);
|
|
}
|
|
|
|
.particle-button.snow {
|
|
background: linear-gradient(135deg, rgba(191, 219, 254, 0.8) 0%, rgba(147, 197, 253, 0.8) 100%);
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 0, 0, 0.3),
|
|
0 0 20px rgba(191, 219, 254, 0.3);
|
|
}
|
|
|
|
.particle-button.snow:hover {
|
|
box-shadow:
|
|
0 6px 16px rgba(0, 0, 0, 0.4),
|
|
0 0 30px rgba(191, 219, 254, 0.5);
|
|
}
|
|
|
|
.particle-button.glitter {
|
|
background: linear-gradient(135deg, rgba(253, 224, 71, 0.8) 0%, rgba(250, 204, 21, 0.8) 100%);
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 0, 0, 0.3),
|
|
0 0 20px rgba(253, 224, 71, 0.3);
|
|
}
|
|
|
|
.particle-button.glitter:hover {
|
|
box-shadow:
|
|
0 6px 16px rgba(0, 0, 0, 0.4),
|
|
0 0 30px rgba(253, 224, 71, 0.5);
|
|
}
|
|
|
|
.particle-button.stars {
|
|
background: linear-gradient(135deg, rgba(254, 249, 195, 0.8) 0%, rgba(253, 230, 138, 0.8) 100%);
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 0, 0, 0.3),
|
|
0 0 20px rgba(254, 249, 195, 0.3);
|
|
}
|
|
|
|
.particle-button.stars:hover {
|
|
box-shadow:
|
|
0 6px 16px rgba(0, 0, 0, 0.4),
|
|
0 0 30px rgba(254, 249, 195, 0.5);
|
|
}
|
|
|
|
/* Volume option styling */
|
|
.volume-option {
|
|
background: linear-gradient(135deg, rgba(16, 185, 129, 0.7) 0%, rgba(5, 150, 105, 0.7) 100%);
|
|
}
|
|
|
|
.volume-option.active {
|
|
background: linear-gradient(135deg, rgba(16, 185, 129, 0.9) 0%, rgba(5, 150, 105, 0.9) 100%);
|
|
box-shadow:
|
|
0 2px 8px rgba(0, 0, 0, 0.3),
|
|
0 0 15px rgba(16, 185, 129, 0.4);
|
|
}
|
|
|
|
/* Volume button styling */
|
|
.volume-button {
|
|
background: linear-gradient(135deg, rgba(16, 185, 129, 0.8) 0%, rgba(5, 150, 105, 0.8) 100%);
|
|
backdrop-filter: blur(10px);
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 0, 0, 0.3),
|
|
0 0 20px rgba(16, 185, 129, 0.3);
|
|
}
|
|
|
|
.volume-button:hover {
|
|
box-shadow:
|
|
0 6px 16px rgba(0, 0, 0, 0.4),
|
|
0 0 30px rgba(16, 185, 129, 0.5);
|
|
}
|
|
|
|
.volume-button.muted {
|
|
background: linear-gradient(135deg, rgba(107, 114, 128, 0.8) 0%, rgba(75, 85, 99, 0.8) 100%);
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 0, 0, 0.3),
|
|
0 0 20px rgba(107, 114, 128, 0.3);
|
|
}
|
|
|
|
.volume-button.muted:hover {
|
|
box-shadow:
|
|
0 6px 16px rgba(0, 0, 0, 0.4),
|
|
0 0 30px rgba(107, 114, 128, 0.5);
|
|
}
|
|
|
|
/* Trigger option styling */
|
|
.trigger-option {
|
|
background: linear-gradient(135deg, rgba(245, 158, 11, 0.7) 0%, rgba(217, 119, 6, 0.7) 100%);
|
|
}
|
|
|
|
.trigger-option.active {
|
|
background: linear-gradient(135deg, rgba(245, 158, 11, 0.9) 0%, rgba(217, 119, 6, 0.9) 100%);
|
|
box-shadow:
|
|
0 2px 8px rgba(0, 0, 0, 0.3),
|
|
0 0 15px rgba(245, 158, 11, 0.4);
|
|
}
|
|
|
|
.trigger-option.all {
|
|
background: linear-gradient(135deg, rgba(16, 185, 129, 0.7) 0%, rgba(5, 150, 105, 0.7) 100%);
|
|
}
|
|
|
|
.trigger-option.all.active {
|
|
background: linear-gradient(135deg, rgba(16, 185, 129, 0.9) 0%, rgba(5, 150, 105, 0.9) 100%);
|
|
box-shadow:
|
|
0 2px 8px rgba(0, 0, 0, 0.3),
|
|
0 0 15px rgba(16, 185, 129, 0.4);
|
|
}
|
|
|
|
.trigger-option.no-hover {
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.7) 0%, rgba(37, 99, 235, 0.7) 100%);
|
|
}
|
|
|
|
.trigger-option.no-hover.active {
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.9) 0%, rgba(37, 99, 235, 0.9) 100%);
|
|
box-shadow:
|
|
0 2px 8px rgba(0, 0, 0, 0.3),
|
|
0 0 15px rgba(59, 130, 246, 0.4);
|
|
}
|
|
|
|
.trigger-option.clicks {
|
|
background: linear-gradient(135deg, rgba(168, 85, 247, 0.7) 0%, rgba(139, 92, 246, 0.7) 100%);
|
|
}
|
|
|
|
.trigger-option.clicks.active {
|
|
background: linear-gradient(135deg, rgba(168, 85, 247, 0.9) 0%, rgba(139, 92, 246, 0.9) 100%);
|
|
box-shadow:
|
|
0 2px 8px rgba(0, 0, 0, 0.3),
|
|
0 0 15px rgba(168, 85, 247, 0.4);
|
|
}
|
|
|
|
.trigger-option.feedback {
|
|
background: linear-gradient(135deg, rgba(34, 197, 94, 0.7) 0%, rgba(22, 163, 74, 0.7) 100%);
|
|
}
|
|
|
|
.trigger-option.feedback.active {
|
|
background: linear-gradient(135deg, rgba(34, 197, 94, 0.9) 0%, rgba(22, 163, 74, 0.9) 100%);
|
|
box-shadow:
|
|
0 2px 8px rgba(0, 0, 0, 0.3),
|
|
0 0 15px rgba(34, 197, 94, 0.4);
|
|
}
|
|
|
|
.trigger-option.off {
|
|
background: linear-gradient(135deg, rgba(107, 114, 128, 0.7) 0%, rgba(75, 85, 99, 0.7) 100%);
|
|
}
|
|
|
|
.trigger-option.off.active {
|
|
background: linear-gradient(135deg, rgba(107, 114, 128, 0.9) 0%, rgba(75, 85, 99, 0.9) 100%);
|
|
box-shadow:
|
|
0 2px 8px rgba(0, 0, 0, 0.3),
|
|
0 0 15px rgba(107, 114, 128, 0.4);
|
|
}
|
|
|
|
/* Triggers button styling */
|
|
.triggers-button {
|
|
background: linear-gradient(135deg, rgba(245, 158, 11, 0.8) 0%, rgba(217, 119, 6, 0.8) 100%);
|
|
backdrop-filter: blur(10px);
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 0, 0, 0.3),
|
|
0 0 20px rgba(245, 158, 11, 0.3);
|
|
}
|
|
|
|
.triggers-button:hover {
|
|
box-shadow:
|
|
0 6px 16px rgba(0, 0, 0, 0.4),
|
|
0 0 30px rgba(245, 158, 11, 0.5);
|
|
}
|
|
|
|
.triggers-button.all {
|
|
background: linear-gradient(135deg, rgba(16, 185, 129, 0.8) 0%, rgba(5, 150, 105, 0.8) 100%);
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 0, 0, 0.3),
|
|
0 0 20px rgba(16, 185, 129, 0.3);
|
|
}
|
|
|
|
.triggers-button.all:hover {
|
|
box-shadow:
|
|
0 6px 16px rgba(0, 0, 0, 0.4),
|
|
0 0 30px rgba(16, 185, 129, 0.5);
|
|
}
|
|
|
|
.triggers-button.no-hover {
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.8) 0%, rgba(37, 99, 235, 0.8) 100%);
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 0, 0, 0.3),
|
|
0 0 20px rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
.triggers-button.no-hover:hover {
|
|
box-shadow:
|
|
0 6px 16px rgba(0, 0, 0, 0.4),
|
|
0 0 30px rgba(59, 130, 246, 0.5);
|
|
}
|
|
|
|
.triggers-button.clicks {
|
|
background: linear-gradient(135deg, rgba(168, 85, 247, 0.8) 0%, rgba(139, 92, 246, 0.8) 100%);
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 0, 0, 0.3),
|
|
0 0 20px rgba(168, 85, 247, 0.3);
|
|
}
|
|
|
|
.triggers-button.clicks:hover {
|
|
box-shadow:
|
|
0 6px 16px rgba(0, 0, 0, 0.4),
|
|
0 0 30px rgba(168, 85, 247, 0.5);
|
|
}
|
|
|
|
.triggers-button.feedback {
|
|
background: linear-gradient(135deg, rgba(34, 197, 94, 0.8) 0%, rgba(22, 163, 74, 0.8) 100%);
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 0, 0, 0.3),
|
|
0 0 20px rgba(34, 197, 94, 0.3);
|
|
}
|
|
|
|
.triggers-button.feedback:hover {
|
|
box-shadow:
|
|
0 6px 16px rgba(0, 0, 0, 0.4),
|
|
0 0 30px rgba(34, 197, 94, 0.5);
|
|
}
|
|
|
|
.triggers-button.off {
|
|
background: linear-gradient(135deg, rgba(107, 114, 128, 0.8) 0%, rgba(75, 85, 99, 0.8) 100%);
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 0, 0, 0.3),
|
|
0 0 20px rgba(107, 114, 128, 0.3);
|
|
}
|
|
|
|
.triggers-button.off:hover {
|
|
box-shadow:
|
|
0 6px 16px rgba(0, 0, 0, 0.4),
|
|
0 0 30px rgba(107, 114, 128, 0.5);
|
|
}
|
|
|
|
/* Mobile responsive */
|
|
@media (max-width: 480px) {
|
|
.floating-settings-container {
|
|
bottom: calc(var(--footer-height, 60px) + 8px);
|
|
right: 1rem;
|
|
}
|
|
|
|
.floating-settings-fab {
|
|
width: 52px;
|
|
height: 52px;
|
|
}
|
|
|
|
.floating-action-button {
|
|
width: 44px;
|
|
height: 44px;
|
|
}
|
|
|
|
.option-button {
|
|
width: 44px;
|
|
height: 44px;
|
|
}
|
|
|
|
.category-options {
|
|
gap: 4px;
|
|
padding-right: 6px;
|
|
}
|
|
|
|
.option-label {
|
|
font-size: 0.45rem;
|
|
}
|
|
}
|
|
|
|
/* Reduced motion preference */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.floating-settings-fab,
|
|
.floating-action-button,
|
|
.option-button {
|
|
transition: none;
|
|
}
|
|
|
|
.floating-settings-backdrop {
|
|
backdrop-filter: none;
|
|
}
|
|
}
|
|
|
|
/* High contrast mode support */
|
|
@media (prefers-contrast: high) {
|
|
.floating-settings-fab,
|
|
.floating-action-button {
|
|
border-width: 3px;
|
|
}
|
|
}
|
|
|
|
/* Dark mode adjustments (if needed) */
|
|
@media (prefers-color-scheme: dark) {
|
|
.floating-settings-fab {
|
|
box-shadow:
|
|
0 4px 15px rgba(0, 0, 0, 0.5),
|
|
0 0 30px rgba(99, 102, 241, 0.4);
|
|
}
|
|
}
|