mirror of
https://github.com/rcourtman/Pulse.git
synced 2026-09-21 10:43:36 +00:00
rcourtman
f53550fc6c
- Remove confusing "preview mode" - channels switch and save immediately - Eliminate complex localStorage channel persistence logic - Reduce update reload time from 10+ seconds to 3 seconds - Remove redundant "Switch to X & Update" buttons - Make channel switching instant with immediate feedback Users can now simply change the dropdown to switch channels instantly, then click Apply Update for a fast 3-second reload experience. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
122 lines
2.9 KiB
CSS
122 lines
2.9 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 */
|
|
}
|
|
|
|
/* Dynamic column widths for responsive tables */
|
|
:root {
|
|
--name-col-width: 150px;
|
|
--uptime-col-width: 80px;
|
|
--pbs-name-col-width: 120px;
|
|
--pbs-path-col-width: 150px;
|
|
--backup-name-col-width: 150px;
|
|
--backup-node-col-width: 80px;
|
|
--backup-pbs-col-width: 100px;
|
|
--backup-ds-col-width: 100px;
|
|
--storage-name-col-width: 150px;
|
|
--storage-type-col-width: 80px;
|
|
}
|
|
|
|
/* Make sticky name column respond to row hover - use opaque colors */
|
|
tr:hover td.sticky {
|
|
@apply bg-gray-50 dark:bg-gray-700 !important;
|
|
}
|
|
|
|
/* Spin animation for loading indicators */
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.animate-spin {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|