Initial commit - Black Canyon Tickets whitelabel platform
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
248
src/styles/global.css
Normal file
248
src/styles/global.css
Normal file
@@ -0,0 +1,248 @@
|
||||
@import "tailwindcss";
|
||||
@import "./glassmorphism.css";
|
||||
|
||||
/* Accessibility Styles */
|
||||
|
||||
/* Screen reader only content */
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Screen reader only content that becomes visible on focus */
|
||||
.sr-only-focusable:focus {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: inherit;
|
||||
margin: inherit;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
/* Skip links */
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 6px;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
padding: 8px;
|
||||
text-decoration: none;
|
||||
z-index: 9999;
|
||||
border-radius: 4px;
|
||||
transition: top 0.3s;
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
/* Enhanced focus styles */
|
||||
.focus-visible {
|
||||
outline: 2px solid #3b82f6;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* High contrast mode styles */
|
||||
.high-contrast {
|
||||
--tw-bg-opacity: 1;
|
||||
--tw-text-opacity: 1;
|
||||
}
|
||||
|
||||
.high-contrast * {
|
||||
border-color: currentColor !important;
|
||||
}
|
||||
|
||||
.high-contrast button,
|
||||
.high-contrast input,
|
||||
.high-contrast select,
|
||||
.high-contrast textarea {
|
||||
border: 2px solid currentColor !important;
|
||||
}
|
||||
|
||||
.high-contrast a {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
/* Reduced motion styles */
|
||||
.reduce-motion *,
|
||||
.reduce-motion *::before,
|
||||
.reduce-motion *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
|
||||
/* Better focus management for modals */
|
||||
.modal-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Improved button contrast */
|
||||
button:focus-visible,
|
||||
a:focus-visible,
|
||||
input:focus-visible,
|
||||
select:focus-visible,
|
||||
textarea:focus-visible {
|
||||
outline: 2px solid #3b82f6;
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
/* Enhanced error state styles */
|
||||
input[aria-invalid="true"],
|
||||
select[aria-invalid="true"],
|
||||
textarea[aria-invalid="true"] {
|
||||
border-color: #ef4444;
|
||||
box-shadow: 0 0 0 1px #ef4444;
|
||||
}
|
||||
|
||||
/* Better spacing for form elements */
|
||||
label + input,
|
||||
label + select,
|
||||
label + textarea {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
/* Improved link styling */
|
||||
a:not(.btn):not(.button) {
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
a:not(.btn):not(.button):hover {
|
||||
text-decoration-thickness: 2px;
|
||||
}
|
||||
|
||||
/* Better table accessibility */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
border-bottom: 2px solid #e5e7eb;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
td {
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
/* Status indicators */
|
||||
.status-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.status-indicator::before {
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
/* Loading states */
|
||||
.loading {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.loading::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: -8px 0 0 -8px;
|
||||
border: 2px solid transparent;
|
||||
border-top: 2px solid currentColor;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Ensure sufficient color contrast */
|
||||
.text-slate-500 {
|
||||
color: #64748b; /* Improved contrast */
|
||||
}
|
||||
|
||||
.text-slate-600 {
|
||||
color: #475569; /* Improved contrast */
|
||||
}
|
||||
|
||||
/* Better button states */
|
||||
button:disabled,
|
||||
input:disabled,
|
||||
select:disabled,
|
||||
textarea:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Keyboard-only focus for better UX */
|
||||
@media (hover: hover) {
|
||||
.focus\:outline-none:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom checkbox and radio styles for better accessibility */
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
/* Better error message styling */
|
||||
.error-message {
|
||||
color: #ef4444;
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.error-message::before {
|
||||
content: '⚠';
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Success message styling */
|
||||
.success-message {
|
||||
color: #10b981;
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.success-message::before {
|
||||
content: '✓';
|
||||
font-weight: bold;
|
||||
}
|
||||
Reference in New Issue
Block a user