🪛 Added darkmode and fixed coding standards
This commit is contained in:
RJ
223
app/globals.css
223
app/globals.css
@@ -1,5 +1,37 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--color-*: initial;
|
||||
}
|
||||
|
||||
@variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
/* Light mode colors */
|
||||
--bg-primary: 241 245 249;
|
||||
--bg-secondary: 226 232 240;
|
||||
--bg-tertiary: 203 213 225;
|
||||
--text-primary: 15 23 42;
|
||||
--text-secondary: 51 65 85;
|
||||
--text-muted: 100 116 139;
|
||||
--border-primary: 203 213 225;
|
||||
--border-subtle: 226 232 240;
|
||||
}
|
||||
|
||||
.dark {
|
||||
/* Dark mode colors - INDUSTRIAL */
|
||||
--bg-primary: 24 24 27;
|
||||
--bg-secondary: 15 23 42;
|
||||
--bg-tertiary: 30 41 59;
|
||||
--text-primary: 241 245 249;
|
||||
--text-secondary: 203 213 225;
|
||||
--text-muted: 100 116 139;
|
||||
--border-primary: 71 85 105;
|
||||
--border-subtle: 30 41 59;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.scrollbar-hide {
|
||||
-ms-overflow-style: none;
|
||||
@@ -11,21 +43,99 @@
|
||||
|
||||
/* Industrial/Terminal aesthetic utilities */
|
||||
.grid-bg {
|
||||
background-image: url('/grid.svg');
|
||||
background-image:
|
||||
linear-gradient(rgba(100, 116, 139, 0.1) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(100, 116, 139, 0.1) 1px, transparent 1px);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
|
||||
/* Noise texture */
|
||||
.noise-bg {
|
||||
background-image: url('/noise.svg');
|
||||
opacity: 0.03;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Scanline effect */
|
||||
.scanline {
|
||||
background: repeating-linear-gradient(
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
transparent,
|
||||
transparent 2px,
|
||||
rgba(0, 0, 0, 0.3) 2px,
|
||||
rgba(0, 0, 0, 0.3) 4px
|
||||
transparent 0%,
|
||||
rgba(6, 182, 212, 0.1) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
background-size: 100% 3px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.scanline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent 0%,
|
||||
rgba(6, 182, 212, 0.05) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
animation: scanline 8s linear infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* CRT screen curvature effect */
|
||||
.crt-effect {
|
||||
animation: flicker 0.15s infinite;
|
||||
}
|
||||
|
||||
/* Glitch text effect */
|
||||
.glitch-text {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.glitch-text::before,
|
||||
.glitch-text::after {
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.glitch-text.active::before {
|
||||
color: #06b6d4;
|
||||
animation: glitch-1 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
|
||||
transform: translate(-2px, -2px);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.glitch-text.active::after {
|
||||
color: #10b981;
|
||||
animation: glitch-2 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
|
||||
transform: translate(2px, 2px);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@keyframes glitch-1 {
|
||||
0%, 100% { clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); transform: translate(0); }
|
||||
20% { clip-path: polygon(0 15%, 100% 15%, 100% 65%, 0 65%); }
|
||||
40% { clip-path: polygon(0 30%, 100% 30%, 100% 70%, 0 70%); }
|
||||
60% { clip-path: polygon(0 5%, 100% 5%, 100% 60%, 0 60%); }
|
||||
80% { clip-path: polygon(0 25%, 100% 25%, 100% 40%, 0 40%); }
|
||||
}
|
||||
|
||||
@keyframes glitch-2 {
|
||||
0%, 100% { clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); transform: translate(0); }
|
||||
20% { clip-path: polygon(0 70%, 100% 70%, 100% 95%, 0 95%); }
|
||||
40% { clip-path: polygon(0 40%, 100% 40%, 100% 85%, 0 85%); }
|
||||
60% { clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%); }
|
||||
80% { clip-path: polygon(0 50%, 100% 50%, 100% 90%, 0 90%); }
|
||||
}
|
||||
|
||||
/* Grayscale filter with instant toggle */
|
||||
@@ -36,4 +146,105 @@
|
||||
.grayscale-0 {
|
||||
filter: grayscale(0%);
|
||||
}
|
||||
|
||||
/* Cyberpunk Glitch Effect for Button */
|
||||
.glitch-btn {
|
||||
position: relative;
|
||||
animation: glitch 300ms cubic-bezier(.25, .46, .45, .94);
|
||||
}
|
||||
|
||||
.glitch-layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0.8;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
|
||||
}
|
||||
|
||||
.glitch-layer:first-of-type {
|
||||
animation: glitch-1 300ms cubic-bezier(.25, .46, .45, .94);
|
||||
color: rgb(6 182 212); /* cyan-500 */
|
||||
transform: translate(-2px, 0);
|
||||
clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
|
||||
}
|
||||
|
||||
.glitch-layer:last-of-type {
|
||||
animation: glitch-2 300ms cubic-bezier(.25, .46, .45, .94);
|
||||
color: rgb(16 185 129); /* emerald-500 */
|
||||
transform: translate(2px, 0);
|
||||
clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
|
||||
}
|
||||
|
||||
@keyframes glitch-1 {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0);
|
||||
clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
|
||||
}
|
||||
25% {
|
||||
transform: translate(-3px, 2px);
|
||||
clip-path: polygon(0 10%, 100% 10%, 100% 45%, 0 45%);
|
||||
}
|
||||
50% {
|
||||
transform: translate(3px, -2px);
|
||||
clip-path: polygon(0 20%, 100% 20%, 100% 55%, 0 55%);
|
||||
}
|
||||
75% {
|
||||
transform: translate(-2px, -1px);
|
||||
clip-path: polygon(0 5%, 100% 5%, 100% 40%, 0 40%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glitch-2 {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0);
|
||||
clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
|
||||
}
|
||||
25% {
|
||||
transform: translate(3px, -2px);
|
||||
clip-path: polygon(0 55%, 100% 55%, 100% 90%, 0 90%);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-3px, 2px);
|
||||
clip-path: polygon(0 45%, 100% 45%, 100% 80%, 0 80%);
|
||||
}
|
||||
75% {
|
||||
transform: translate(2px, 1px);
|
||||
clip-path: polygon(0 60%, 100% 60%, 100% 95%, 0 95%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Border Pulse Animation */
|
||||
.border-pulse {
|
||||
animation: pulse-border 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Screen Flicker Effect */
|
||||
body.screen-flicker {
|
||||
animation: flicker 150ms ease-in-out;
|
||||
}
|
||||
|
||||
body.screen-flicker::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(6, 182, 212, 0.1);
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
animation: flicker 150ms ease-in-out;
|
||||
}
|
||||
|
||||
/* CRT Noise Texture */
|
||||
@supports (filter: url('#noise')) {
|
||||
.noise-bg {
|
||||
filter: url('#noise');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user