mirror of
https://github.com/rcourtman/Pulse.git
synced 2026-09-23 03:33:53 +00:00
courtmanr@gmail.com
89 lines
2.2 KiB
CSS
89 lines
2.2 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Screen reader only text */
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
}
|
|
|
|
.overflow-y-hidden {
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
|
|
/* Enhanced focus indicators for accessibility */
|
|
@layer utilities {
|
|
.focus-visible-ring {
|
|
@apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800;
|
|
}
|
|
|
|
.focus-visible-ring-inset {
|
|
@apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-inset;
|
|
}
|
|
}
|
|
|
|
/* Ensure all interactive elements have visible focus */
|
|
button:focus-visible,
|
|
a:focus-visible,
|
|
input:focus-visible,
|
|
select:focus-visible,
|
|
textarea:focus-visible,
|
|
[role="button"]:focus-visible,
|
|
[role="tab"]:focus-visible,
|
|
[tabindex]:focus-visible {
|
|
@apply outline-none ring-2 ring-blue-500 ring-offset-2 dark:ring-offset-gray-800;
|
|
}
|
|
|
|
/* Special focus styles for tabs */
|
|
.tab:focus-visible {
|
|
@apply outline-none ring-2 ring-blue-500 ring-inset;
|
|
}
|
|
|
|
/* Focus styles for table sortable headers */
|
|
th.sortable:focus-visible {
|
|
@apply outline-none ring-2 ring-blue-500 ring-inset;
|
|
}
|
|
|
|
.subtle-stripes-light {
|
|
background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.025) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.025) 50%, rgba(0, 0, 0, 0.025) 75%, transparent 75%, transparent);
|
|
background-size: 10px 10px;
|
|
}
|
|
|
|
.subtle-stripes-dark {
|
|
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.02) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.02) 50%, rgba(255, 255, 255, 0.02) 75%, transparent 75%, transparent);
|
|
background-size: 10px 10px; /* Explicitly set for dark mode too */
|
|
}
|
|
|
|
/* Respect user's motion preferences */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
|
|
.pulse-logo-circle {
|
|
animation: none !important;
|
|
}
|
|
|
|
.animate-spin {
|
|
animation: none !important;
|
|
}
|
|
|
|
.transition-all,
|
|
.transition-colors,
|
|
.transition-opacity {
|
|
transition: none !important;
|
|
}
|
|
}
|