dd6b26c524
- Add mobile hamburger menu in TopBar with slide-in panel - Optimize all components for mobile (responsive fonts, spacing, touch targets) - Add proper viewport meta tags and safe area padding - Fix /jackpot/next API to return active cycles regardless of scheduled time - Remove BTC display from jackpot pot (show sats only) - Add setup/ folder to .gitignore - Improve mobile UX: 16px inputs (no iOS zoom), 44px touch targets - Add active states for touch feedback on buttons
143 lines
2.4 KiB
CSS
143 lines
2.4 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
--foreground-rgb: 218, 218, 218;
|
|
--background-rgb: 11, 11, 11;
|
|
}
|
|
|
|
body {
|
|
color: rgb(var(--foreground-rgb));
|
|
background: rgb(var(--background-rgb));
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* Prevent horizontal overflow on mobile */
|
|
html, body {
|
|
overflow-x: hidden;
|
|
max-width: 100vw;
|
|
}
|
|
|
|
/* Touch-friendly tap targets */
|
|
@layer utilities {
|
|
.text-balance {
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fade-in 0.5s ease-out forwards;
|
|
}
|
|
|
|
/* Mobile-friendly tap targets */
|
|
.touch-target {
|
|
min-height: 44px;
|
|
min-width: 44px;
|
|
}
|
|
|
|
/* Hide scrollbar while maintaining functionality */
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Safe area padding for notched devices */
|
|
.safe-top {
|
|
padding-top: env(safe-area-inset-top);
|
|
}
|
|
|
|
.safe-bottom {
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
.safe-left {
|
|
padding-left: env(safe-area-inset-left);
|
|
}
|
|
|
|
.safe-right {
|
|
padding-right: env(safe-area-inset-right);
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Custom scrollbar (desktop) */
|
|
@media (hover: hover) and (pointer: fine) {
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #0b0b0b;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #333;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #555;
|
|
}
|
|
}
|
|
|
|
/* Mobile-specific styles */
|
|
@media (max-width: 640px) {
|
|
/* Larger touch targets on mobile */
|
|
button,
|
|
a,
|
|
input[type="button"],
|
|
input[type="submit"],
|
|
[role="button"] {
|
|
min-height: 44px;
|
|
}
|
|
|
|
/* Better input styling on mobile */
|
|
input, textarea, select {
|
|
font-size: 16px; /* Prevents zoom on iOS */
|
|
}
|
|
|
|
/* Smoother scrolling on mobile */
|
|
* {
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
}
|
|
|
|
/* Prevent iOS bounce/pull-to-refresh on certain elements */
|
|
.no-bounce {
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
/* Focus visible only for keyboard navigation */
|
|
@media (hover: none) and (pointer: coarse) {
|
|
*:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
/* Print styles */
|
|
@media print {
|
|
nav, footer, button {
|
|
display: none !important;
|
|
}
|
|
|
|
body {
|
|
background: white;
|
|
color: black;
|
|
}
|
|
}
|