Implemented cryptomining, although its extremely bad optimized.
This commit is contained in:
+539
@@ -0,0 +1,539 @@
|
||||
/* Pixelify Sans loaded from Google Fonts in index.html */
|
||||
|
||||
/* Self-hosted Minecraftia font with font-display: swap for better performance */
|
||||
@font-face {
|
||||
font-family: 'Minecraftia';
|
||||
src: url('/fonts/Minecraftia.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Dark Reader extension compatibility - prevent it from breaking our styles */
|
||||
html[data-darkreader-mode="dynamic"],
|
||||
html[data-darkreader-scheme="dark"] {
|
||||
/* Force our own background */
|
||||
background-color: #000 !important;
|
||||
}
|
||||
|
||||
/* Tell Dark Reader to leave our app alone */
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
/* Matrix Green Theme - ALL colors are green-based */
|
||||
--background: 0 0% 0%;
|
||||
--foreground: 0 0% 100%;
|
||||
|
||||
--card: 0 0% 0%;
|
||||
--card-foreground: 120 100% 50%;
|
||||
|
||||
--popover: 0 0% 5%;
|
||||
--popover-foreground: 120 100% 50%;
|
||||
|
||||
--primary: 120 100% 50%;
|
||||
--primary-foreground: 0 0% 0%;
|
||||
|
||||
--secondary: 120 100% 15%;
|
||||
--secondary-foreground: 120 100% 50%;
|
||||
|
||||
--muted: 120 20% 10%;
|
||||
--muted-foreground: 120 30% 60%;
|
||||
|
||||
--accent: 120 100% 50%;
|
||||
--accent-foreground: 0 0% 0%;
|
||||
|
||||
--destructive: 120 100% 50%;
|
||||
--destructive-foreground: 0 0% 0%;
|
||||
|
||||
--border: 120 100% 50%;
|
||||
--input: 120 100% 25%;
|
||||
--ring: 120 100% 50%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
|
||||
/* Custom Matrix Variables */
|
||||
--glow-color: 120 100% 50%;
|
||||
--scanline-color-1: 120 100% 50%;
|
||||
--scanline-color-2: 120 100% 50%;
|
||||
|
||||
--sidebar-background: 0 0% 0%;
|
||||
--sidebar-foreground: 120 100% 50%;
|
||||
--sidebar-primary: 120 100% 50%;
|
||||
--sidebar-primary-foreground: 0 0% 0%;
|
||||
--sidebar-accent: 120 100% 15%;
|
||||
--sidebar-accent-foreground: 120 100% 50%;
|
||||
--sidebar-border: 120 100% 50%;
|
||||
--sidebar-ring: 120 100% 50%;
|
||||
}
|
||||
|
||||
/* Red Theme Variant - ALL colors are red-based */
|
||||
.red-theme {
|
||||
--card-foreground: 0 100% 50%;
|
||||
|
||||
--popover-foreground: 0 100% 50%;
|
||||
|
||||
--primary: 0 100% 50%;
|
||||
--primary-foreground: 0 0% 0%;
|
||||
|
||||
--secondary: 0 100% 15%;
|
||||
--secondary-foreground: 0 100% 50%;
|
||||
|
||||
--muted: 0 20% 10%;
|
||||
--muted-foreground: 0 30% 60%;
|
||||
|
||||
--accent: 0 100% 50%;
|
||||
--accent-foreground: 0 0% 0%;
|
||||
|
||||
--destructive: 0 100% 50%;
|
||||
--destructive-foreground: 0 0% 0%;
|
||||
|
||||
--border: 0 100% 50%;
|
||||
--input: 0 100% 25%;
|
||||
--ring: 0 100% 50%;
|
||||
|
||||
--glow-color: 0 100% 50%;
|
||||
--scanline-color-1: 0 100% 50%;
|
||||
--scanline-color-2: 0 100% 50%;
|
||||
|
||||
--sidebar-foreground: 0 100% 50%;
|
||||
--sidebar-primary: 0 100% 50%;
|
||||
--sidebar-accent: 0 100% 15%;
|
||||
--sidebar-accent-foreground: 0 100% 50%;
|
||||
--sidebar-border: 0 100% 50%;
|
||||
--sidebar-ring: 0 100% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
font-family: 'Pixelify Sans', monospace;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: 'Minecraftia', 'Pixelify Sans', monospace;
|
||||
}
|
||||
|
||||
/* Ensure text selection follows theme */
|
||||
::selection {
|
||||
background: hsl(var(--primary) / 0.3);
|
||||
color: hsl(var(--primary));
|
||||
}
|
||||
|
||||
/* Ensure focus rings follow theme */
|
||||
*:focus {
|
||||
outline-color: hsl(var(--primary));
|
||||
}
|
||||
|
||||
*:focus-visible {
|
||||
outline-color: hsl(var(--primary));
|
||||
}
|
||||
|
||||
/* Links should follow theme */
|
||||
a {
|
||||
color: hsl(var(--primary));
|
||||
}
|
||||
}
|
||||
|
||||
/* CRT Scanline Effect - Visible but not overwhelming */
|
||||
/* Dark Reader compatibility: use explicit colors and isolation */
|
||||
.crt {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.crt::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background:
|
||||
linear-gradient(
|
||||
hsl(var(--scanline-color-1) / 0.08) 50%,
|
||||
transparent 50%
|
||||
),
|
||||
linear-gradient(
|
||||
90deg,
|
||||
hsl(var(--scanline-color-2) / 0.04),
|
||||
transparent,
|
||||
hsl(var(--scanline-color-2) / 0.04)
|
||||
);
|
||||
z-index: 100;
|
||||
background-size: 100% 3px, 4px 100%;
|
||||
pointer-events: none;
|
||||
/* Chromium compatibility */
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
/* Force GPU acceleration */
|
||||
transform: translateZ(0);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.crt::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
opacity: 0;
|
||||
z-index: 101;
|
||||
pointer-events: none;
|
||||
animation: flicker 0.15s infinite;
|
||||
/* Chromium compatibility */
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
/* CRT screen curvature and vignette */
|
||||
.crt > *:first-child::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: radial-gradient(
|
||||
ellipse at center,
|
||||
transparent 0%,
|
||||
transparent 60%,
|
||||
rgba(0, 0, 0, 0.4) 100%
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
@-webkit-keyframes flicker {
|
||||
0% { opacity: 0.27861; }
|
||||
5% { opacity: 0.34769; }
|
||||
10% { opacity: 0.23604; }
|
||||
15% { opacity: 0.90626; }
|
||||
20% { opacity: 0.18128; }
|
||||
25% { opacity: 0.83891; }
|
||||
30% { opacity: 0.65583; }
|
||||
35% { opacity: 0.67807; }
|
||||
40% { opacity: 0.26559; }
|
||||
45% { opacity: 0.84693; }
|
||||
50% { opacity: 0.96019; }
|
||||
55% { opacity: 0.08594; }
|
||||
60% { opacity: 0.20313; }
|
||||
65% { opacity: 0.71988; }
|
||||
70% { opacity: 0.53455; }
|
||||
75% { opacity: 0.37288; }
|
||||
80% { opacity: 0.71428; }
|
||||
85% { opacity: 0.70419; }
|
||||
90% { opacity: 0.7003; }
|
||||
95% { opacity: 0.36108; }
|
||||
100% { opacity: 0.24387; }
|
||||
}
|
||||
|
||||
@keyframes flicker {
|
||||
0% { opacity: 0.27861; }
|
||||
5% { opacity: 0.34769; }
|
||||
10% { opacity: 0.23604; }
|
||||
15% { opacity: 0.90626; }
|
||||
20% { opacity: 0.18128; }
|
||||
25% { opacity: 0.83891; }
|
||||
30% { opacity: 0.65583; }
|
||||
35% { opacity: 0.67807; }
|
||||
40% { opacity: 0.26559; }
|
||||
45% { opacity: 0.84693; }
|
||||
50% { opacity: 0.96019; }
|
||||
55% { opacity: 0.08594; }
|
||||
60% { opacity: 0.20313; }
|
||||
65% { opacity: 0.71988; }
|
||||
70% { opacity: 0.53455; }
|
||||
75% { opacity: 0.37288; }
|
||||
80% { opacity: 0.71428; }
|
||||
85% { opacity: 0.70419; }
|
||||
90% { opacity: 0.7003; }
|
||||
95% { opacity: 0.36108; }
|
||||
100% { opacity: 0.24387; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes blink {
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes glow-pulse {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 20px hsl(var(--glow-color) / 0.4), 0 0 40px hsl(var(--glow-color) / 0.2);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 30px hsl(var(--glow-color) / 0.6), 0 0 60px hsl(var(--glow-color) / 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glow-pulse {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 20px hsl(var(--glow-color) / 0.4), 0 0 40px hsl(var(--glow-color) / 0.2);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 30px hsl(var(--glow-color) / 0.6), 0 0 60px hsl(var(--glow-color) / 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes text-glow {
|
||||
0%, 100% {
|
||||
text-shadow: 0 0 10px hsl(var(--glow-color) / 0.8), 0 0 20px hsl(var(--glow-color) / 0.4);
|
||||
}
|
||||
50% {
|
||||
text-shadow: 0 0 15px hsl(var(--glow-color) / 1), 0 0 30px hsl(var(--glow-color) / 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes text-glow {
|
||||
0%, 100% {
|
||||
text-shadow: 0 0 10px hsl(var(--glow-color) / 0.8), 0 0 20px hsl(var(--glow-color) / 0.4);
|
||||
}
|
||||
50% {
|
||||
text-shadow: 0 0 15px hsl(var(--glow-color) / 1), 0 0 30px hsl(var(--glow-color) / 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom Matrix Scrollbar */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: hsl(var(--primary) / 0.5) hsl(var(--background));
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: hsl(var(--background));
|
||||
border-left: 1px solid hsl(var(--primary) / 0.2);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
hsl(var(--primary) / 0.3) 0%,
|
||||
hsl(var(--primary) / 0.6) 50%,
|
||||
hsl(var(--primary) / 0.3) 100%
|
||||
);
|
||||
border: 1px solid hsl(var(--primary) / 0.5);
|
||||
box-shadow:
|
||||
0 0 8px hsl(var(--primary) / 0.4),
|
||||
inset 0 0 4px hsl(var(--primary) / 0.2);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
hsl(var(--primary) / 0.5) 0%,
|
||||
hsl(var(--primary) / 0.8) 50%,
|
||||
hsl(var(--primary) / 0.5) 100%
|
||||
);
|
||||
box-shadow:
|
||||
0 0 12px hsl(var(--primary) / 0.6),
|
||||
inset 0 0 6px hsl(var(--primary) / 0.3);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: hsl(var(--background));
|
||||
}
|
||||
|
||||
/* Utility classes - with webkit prefixes for Chromium compatibility */
|
||||
.text-glow {
|
||||
text-shadow: 0 0 10px hsl(var(--glow-color) / 0.8), 0 0 20px hsl(var(--glow-color) / 0.4);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.text-glow-strong {
|
||||
text-shadow: 0 0 15px hsl(var(--glow-color) / 1), 0 0 30px hsl(var(--glow-color) / 0.6), 0 0 45px hsl(var(--glow-color) / 0.3);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.box-glow {
|
||||
box-shadow: 0 0 20px hsl(var(--glow-color) / 0.4), 0 0 40px hsl(var(--glow-color) / 0.2);
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.box-glow-strong {
|
||||
box-shadow: 0 0 30px hsl(var(--glow-color) / 0.6), 0 0 60px hsl(var(--glow-color) / 0.3);
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.animate-glow-pulse {
|
||||
animation: glow-pulse 2s ease-in-out infinite;
|
||||
-webkit-animation: glow-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-text-glow {
|
||||
animation: text-glow 2s ease-in-out infinite;
|
||||
-webkit-animation: text-glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Custom Matrix Crosshair Cursor - Only on non-touch devices */
|
||||
@media (pointer: fine) {
|
||||
.matrix-cursor,
|
||||
.matrix-cursor * {
|
||||
cursor: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* On touch devices, use default cursor */
|
||||
@media (pointer: coarse) {
|
||||
.matrix-cursor,
|
||||
.matrix-cursor * {
|
||||
cursor: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.matrix-cursor-crosshair {
|
||||
position: fixed;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/* Crosshair lines */
|
||||
.matrix-cursor-crosshair::before,
|
||||
.matrix-cursor-crosshair::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: hsl(var(--primary));
|
||||
box-shadow: 0 0 6px hsl(var(--primary)), 0 0 12px hsl(var(--primary) / 0.5);
|
||||
}
|
||||
|
||||
/* Vertical line */
|
||||
.matrix-cursor-crosshair::before {
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: hsl(var(--primary)) !important;
|
||||
box-shadow: 0 0 6px hsl(var(--primary)), 0 0 12px hsl(var(--primary) / 0.5);
|
||||
}
|
||||
|
||||
/* Horizontal line */
|
||||
.matrix-cursor-crosshair::after {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: hsl(var(--primary)) !important;
|
||||
box-shadow: 0 0 6px hsl(var(--primary)), 0 0 12px hsl(var(--primary) / 0.5);
|
||||
}
|
||||
|
||||
/* Center dot */
|
||||
.matrix-cursor-dot {
|
||||
position: fixed;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: hsl(var(--primary));
|
||||
pointer-events: none;
|
||||
z-index: 10000;
|
||||
box-shadow: 0 0 8px hsl(var(--primary)), 0 0 16px hsl(var(--primary) / 0.6);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
|
||||
.matrix-cursor-dot.hovering {
|
||||
transform: translate(-50%, -50%) scale(2);
|
||||
}
|
||||
|
||||
/* Moving Scanline - Only active when CRT is on */
|
||||
@keyframes scanline-move {
|
||||
0% {
|
||||
top: -10%;
|
||||
}
|
||||
100% {
|
||||
top: 110%;
|
||||
}
|
||||
}
|
||||
|
||||
.crt .moving-scanline {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 8px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
transparent 0%,
|
||||
hsl(var(--primary) / 0.1) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 102;
|
||||
animation: scanline-move 4s linear infinite;
|
||||
}
|
||||
|
||||
/* Hide moving scanline when CRT is disabled */
|
||||
.moving-scanline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.crt .moving-scanline {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Glitch Text Effect */
|
||||
.glitch-active {
|
||||
animation: glitch 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes glitch {
|
||||
0%, 100% {
|
||||
transform: translate(0);
|
||||
filter: none;
|
||||
}
|
||||
20% {
|
||||
transform: translate(-2px, 2px);
|
||||
filter: hue-rotate(90deg);
|
||||
}
|
||||
40% {
|
||||
transform: translate(2px, -2px);
|
||||
filter: hue-rotate(-90deg);
|
||||
}
|
||||
60% {
|
||||
transform: translate(-2px, -2px);
|
||||
filter: hue-rotate(180deg);
|
||||
}
|
||||
80% {
|
||||
transform: translate(2px, 2px);
|
||||
filter: hue-rotate(-180deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Konami Code Easter Egg Effect */
|
||||
.konami-active {
|
||||
animation: konami-flash 0.5s ease-in-out 3;
|
||||
}
|
||||
|
||||
@keyframes konami-flash {
|
||||
0%, 100% {
|
||||
filter: none;
|
||||
}
|
||||
50% {
|
||||
filter: invert(1) hue-rotate(180deg);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user