162 lines
2.9 KiB
CSS
162 lines
2.9 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* Custom scrollbar - always visible at consistent size */
|
|
* {
|
|
scrollbar-width: 6px;
|
|
scrollbar-color: #52525b transparent;
|
|
}
|
|
|
|
*::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
background: transparent;
|
|
}
|
|
|
|
*::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb {
|
|
background: #52525b;
|
|
border-radius: 3px;
|
|
min-height: 40px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
background: #71717a;
|
|
}
|
|
|
|
*::-webkit-scrollbar-corner {
|
|
background: transparent;
|
|
}
|
|
|
|
@layer base {
|
|
:root {
|
|
font-size: 100%;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: #09090b;
|
|
color: #e4e4e7;
|
|
overflow-x: hidden;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#root {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow-x: hidden;
|
|
}
|
|
}
|
|
|
|
/* Force custom scrollbars everywhere */
|
|
html ::-webkit-scrollbar,
|
|
body ::-webkit-scrollbar,
|
|
* ::-webkit-scrollbar {
|
|
width: 6px !important;
|
|
height: 6px !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
html ::-webkit-scrollbar-track,
|
|
body ::-webkit-scrollbar-track,
|
|
* ::-webkit-scrollbar-track {
|
|
background: transparent !important;
|
|
}
|
|
|
|
html ::-webkit-scrollbar-thumb,
|
|
body ::-webkit-scrollbar-thumb,
|
|
* ::-webkit-scrollbar-thumb {
|
|
background: #52525b !important;
|
|
border-radius: 3px !important;
|
|
min-height: 40px !important;
|
|
}
|
|
|
|
html ::-webkit-scrollbar-thumb:hover,
|
|
body ::-webkit-scrollbar-thumb:hover,
|
|
* ::-webkit-scrollbar-thumb:hover {
|
|
background: #71717a !important;
|
|
}
|
|
|
|
/* Firefox */
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
scrollbar-width: 6px !important;
|
|
scrollbar-color: #52525b transparent !important;
|
|
}
|
|
|
|
/* No scrollbar utility */
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none !important;
|
|
}
|
|
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none !important;
|
|
scrollbar-width: none !important;
|
|
}
|
|
|
|
/* Focus ring spacing */
|
|
.focus-ring-spacing {
|
|
padding: 4px;
|
|
}
|
|
|
|
.focus-ring-spacing:focus-within {
|
|
outline: 2px solid rgba(99, 102, 241, 0.8);
|
|
outline-offset: -2px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* Reduced motion */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|
|
|
|
/* Forced colors / high contrast mode */
|
|
@media (forced-colors: active) {
|
|
.focus-ring-spacing:focus-within {
|
|
outline: 2px solid LinkText;
|
|
}
|
|
}
|
|
|
|
/* Screen reader only utility */
|
|
.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;
|
|
}
|
|
|
|
/* Native dialog styles */
|
|
dialog {
|
|
background: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
max-width: 100vw;
|
|
max-height: 100vh;
|
|
overflow: visible;
|
|
}
|
|
|
|
dialog::backdrop {
|
|
background: rgba(9, 9, 11, 0.8);
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
dialog[open] {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|