Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
6.0 kB · 346 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347:root { font-family: "JetBrains Mono", "SF Mono", "Monaco", "Cascadia Code", "Roboto Mono", monospace; line-height: 1.4; font-weight: 400; font-size: 12px;
color-scheme: dark; color: #ffffff; background-color: #000000;
font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%;}
* { box-sizing: border-box; margin: 0; padding: 0;}
body { background: #000000; width: 100%; min-height: 50em; overflow: hidden; position: relative;}
body::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, #333333, transparent); animation: scanline 3s linear infinite; z-index: 1000; pointer-events: none;}
#app { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; background: #000000; position: relative;}
/* Input and form elements global reset */input,button,textarea,select { font-family: inherit; font-size: inherit; color: inherit; background: transparent; border: none; outline: none;}
button { cursor: pointer; user-select: none;}
input::placeholder { color: #555555;}
/* Selection styling */::selection { background: rgba(255, 255, 255, 0.15); color: #ffffff;}
::-moz-selection { background: rgba(255, 255, 255, 0.15); color: #ffffff;}
/* Cross-browser scrollbar styling */
/* Standard scrollbar properties (Firefox, Chrome 121+, Edge 121+) */* { scrollbar-width: thin; scrollbar-color: #333333 #0a0a0a;}
/* Content areas get even thinner scrollbars */.content,.output-content,textarea,input { scrollbar-width: thin; scrollbar-color: #2a2a2a #000000;}
/* Webkit scrollbar styling for older browsers and better customization *//* Global scrollbar styling */::-webkit-scrollbar { width: 8px; height: 8px;}
::-webkit-scrollbar-track { background: #0a0a0a; border-radius: 0;}
::-webkit-scrollbar-thumb { background: #333333; border-radius: 0; border: none; transition: background 0.2s ease;}
::-webkit-scrollbar-thumb:hover { background: #555555;}
::-webkit-scrollbar-thumb:active { background: #666666;}
::-webkit-scrollbar-corner { background: #0a0a0a;}
/* Scrollbar for specific containers */.content::-webkit-scrollbar,.output-content::-webkit-scrollbar,textarea::-webkit-scrollbar,input::-webkit-scrollbar { width: 6px; height: 6px;}
.content::-webkit-scrollbar-track,.output-content::-webkit-scrollbar-track,textarea::-webkit-scrollbar-track,input::-webkit-scrollbar-track { background: #000000;}
.content::-webkit-scrollbar-thumb,.output-content::-webkit-scrollbar-thumb,textarea::-webkit-scrollbar-thumb,input::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 0; border: none; transition: background 0.15s ease;}
.content::-webkit-scrollbar-thumb:hover,.output-content::-webkit-scrollbar-thumb:hover,textarea::-webkit-scrollbar-thumb:hover,input::-webkit-scrollbar-thumb:hover { background: #444444;}
.content::-webkit-scrollbar-thumb:active,.output-content::-webkit-scrollbar-thumb:active,textarea::-webkit-scrollbar-thumb:active,input::-webkit-scrollbar-thumb:active { background: #555555;}
/* Animations */@keyframes scanline { 0% { transform: translateY(0); opacity: 0; } 50% { opacity: 0.3; } 100% { transform: translateY(600px); opacity: 0; }}
@keyframes flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; }}
/* Focus indicators */*:focus { outline: 1px solid #444444; outline-offset: -1px;}
/* Disable focus outline for mouse users */.mouse-user *:focus { outline: none;}
/* Re-enable focus outline for keyboard users */.keyboard-user *:focus { outline: 1px solid #444444; outline-offset: -1px;}
/* Utility classes for consistent spacing and typography */.mono { font-family: "JetBrains Mono", "SF Mono", "Monaco", "Cascadia Code", "Roboto Mono", monospace;}
.uppercase { text-transform: uppercase;}
.letter-spacing-sm { letter-spacing: 0.5px;}
.letter-spacing-md { letter-spacing: 1px;}
.letter-spacing-lg { letter-spacing: 1.5px;}
.letter-spacing-xl { letter-spacing: 2px;}
/* Text colors */.text-primary { color: #ffffff;}
.text-secondary { color: #cccccc;}
.text-muted { color: #888888;}
.text-subtle { color: #666666;}
.text-disabled { color: #444444;}
.text-accent { color: #00ff41;}
.text-warning { color: #ffaa00;}
.text-error { color: #ff4444;}
/* Background colors */.bg-primary { background: #000000;}
.bg-secondary { background: #0a0a0a;}
.bg-tertiary { background: #111111;}
.bg-quaternary { background: #1a1a1a;}
/* Border colors */.border-primary { border-color: #1a1a1a;}
.border-secondary { border-color: #222222;}
.border-tertiary { border-color: #333333;}
.border-accent { border-color: #00ff41;}
/* Accessibility improvements */@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }}
/* High contrast mode support */@media (prefers-contrast: high) { :root { --text-primary: #ffffff; --text-secondary: #ffffff; --bg-primary: #000000; --border-primary: #ffffff; }}
/* Print styles */@media print { body::before { display: none; }
* { background: white !important; color: black !important; box-shadow: none !important; }}