118 lines
2.0 KiB
CSS
118 lines
2.0 KiB
CSS
@import "tailwindcss";
|
|
|
|
@import "./assets/main.css";
|
|
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
/* Custom scrollbar for webkit browsers */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #f1f5f9;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #cbd5e1;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #94a3b8;
|
|
}
|
|
|
|
/* Smooth transitions for better mobile experience */
|
|
* {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
/* Focus styles for better accessibility */
|
|
button:focus,
|
|
input:focus,
|
|
select:focus,
|
|
textarea:focus {
|
|
outline: 2px solid #10b981;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Loading animation */
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.animate-spin {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
/* Enhanced responsive utilities */
|
|
@media (max-width: 640px) {
|
|
.container {
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
}
|
|
|
|
/* Custom line clamp utilities */
|
|
.line-clamp-1 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.line-clamp-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.line-clamp-3 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Mobile-first button styles */
|
|
button {
|
|
min-height: 44px; /* iOS recommended touch target */
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
button {
|
|
min-height: auto;
|
|
}
|
|
}
|
|
|
|
/* Enhanced mobile card styles */
|
|
@media (max-width: 768px) {
|
|
.card-mobile {
|
|
margin-left: -1rem;
|
|
margin-right: -1rem;
|
|
border-radius: 0;
|
|
border-left: none;
|
|
border-right: none;
|
|
}
|
|
}
|
|
|
|
/* Reset any conflicting styles specifically for the app */
|
|
#app {
|
|
display: block !important;
|
|
grid-template-columns: none !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
max-width: none !important;
|
|
}
|
|
|
|
/* Ensure body doesn't interfere with the layout */
|
|
body {
|
|
display: block !important;
|
|
place-items: unset !important;
|
|
}
|