547 lines
15 KiB
CSS
Executable File
547 lines
15 KiB
CSS
Executable File
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@font-face {
|
|
font-family: 'VT323';
|
|
src: url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
|
|
}
|
|
|
|
@layer utilities {
|
|
.typing-effect {
|
|
border-right: 2px solid #00FF00;
|
|
animation: cursor-blink 1s step-end infinite;
|
|
}
|
|
|
|
.tv-frame {
|
|
@apply rounded-[50px] p-8;
|
|
background: linear-gradient(145deg, #4a4a4a, #2a2a2a);
|
|
box-shadow:
|
|
20px 20px 60px #1a1a1a,
|
|
-20px -20px 60px #3a3a3a,
|
|
inset 0 2px 20px rgba(255, 255, 255, 0.1);
|
|
border: 12px solid #1a1a1a;
|
|
border-radius: 50px;
|
|
transform: perspective(1200px) rotateX(2deg);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Wood texture overlay */
|
|
.tv-frame::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -12px;
|
|
left: -12px;
|
|
right: -12px;
|
|
bottom: -12px;
|
|
background:
|
|
linear-gradient(145deg, #3a3a3a, #1a1a1a),
|
|
url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23232323' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
|
|
border-radius: 60px;
|
|
z-index: -1;
|
|
mix-blend-mode: overlay;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* TV frame highlights */
|
|
.tv-frame::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 40%;
|
|
background:
|
|
linear-gradient(
|
|
180deg,
|
|
rgba(255, 255, 255, 0.15) 0%,
|
|
rgba(255, 255, 255, 0.05) 40%,
|
|
transparent 100%
|
|
);
|
|
border-radius: 40px 40px 0 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Small scratches and noise texture */
|
|
.tv-frame-texture {
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
|
opacity: 0.05;
|
|
mix-blend-mode: overlay;
|
|
pointer-events: none;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
/* TV body edge shadow */
|
|
.tv-frame-edge {
|
|
position: absolute;
|
|
inset: -1px;
|
|
border-radius: 51px;
|
|
background: linear-gradient(145deg, #1a1a1a, #000000);
|
|
z-index: -2;
|
|
box-shadow:
|
|
0 10px 30px rgba(0, 0, 0, 0.8),
|
|
0 30px 60px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
/* TV frame knobs */
|
|
.tv-knob {
|
|
@apply absolute w-10 h-10 rounded-full;
|
|
background: linear-gradient(135deg, #4a4a4a, #1a1a1a);
|
|
box-shadow:
|
|
inset 2px 2px 5px rgba(255, 255, 255, 0.15),
|
|
inset -2px -2px 5px rgba(0, 0, 0, 0.7),
|
|
0 3px 6px rgba(0, 0, 0, 0.6),
|
|
0 1px 2px rgba(0, 0, 0, 0.9);
|
|
border: 1px solid #0a0a0a;
|
|
position: relative;
|
|
transform-style: preserve-3d;
|
|
transform: translateZ(2px);
|
|
}
|
|
|
|
.tv-knob::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 3px;
|
|
right: 3px;
|
|
bottom: 3px;
|
|
border-radius: 50%;
|
|
background: repeating-conic-gradient(
|
|
from 0deg,
|
|
#2a2a2a 0deg 30deg,
|
|
#3a3a3a 30deg 60deg
|
|
);
|
|
box-shadow:
|
|
inset 0 0 5px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.tv-knob::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 40%;
|
|
height: 3px;
|
|
background: #111;
|
|
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* Enhanced Screen Container with Glass Effect */
|
|
.tv-screen-container {
|
|
background: #000;
|
|
box-shadow:
|
|
inset 0 0 50px rgba(0, 0, 0, 0.6),
|
|
inset 0 0 100px rgba(0, 0, 0, 0.4);
|
|
transform: perspective(1000px) rotateX(1deg);
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(0, 80, 0, 0.2);
|
|
}
|
|
|
|
/* Enhanced Convex Screen Effect */
|
|
.tv-screen-convex {
|
|
content: '';
|
|
background: radial-gradient(
|
|
ellipse at center,
|
|
transparent 0%,
|
|
rgba(0, 0, 0, 0) 60%,
|
|
rgba(0, 0, 0, 0.4) 100%
|
|
);
|
|
border-radius: 50% / 10%;
|
|
pointer-events: none;
|
|
z-index: 40;
|
|
position: relative;
|
|
}
|
|
|
|
.tv-screen-convex::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: radial-gradient(
|
|
circle at 30% 20%,
|
|
rgba(255, 255, 255, 0.1) 0%,
|
|
rgba(255, 255, 255, 0.05) 25%,
|
|
transparent 50%
|
|
);
|
|
border-radius: inherit;
|
|
}
|
|
|
|
/* Glass Reflections */
|
|
.glass-reflection {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
125deg,
|
|
transparent 0%,
|
|
transparent 40%,
|
|
rgba(255, 255, 255, 0.07) 42%,
|
|
rgba(255, 255, 255, 0.01) 50%,
|
|
transparent 52%,
|
|
transparent 100%
|
|
);
|
|
z-index: 41;
|
|
pointer-events: none;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.glass-reflection-2 {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
-30deg,
|
|
transparent 0%,
|
|
transparent 65%,
|
|
rgba(255, 255, 255, 0.05) 67.5%,
|
|
rgba(255, 255, 255, 0.02) 70%,
|
|
transparent 72.5%,
|
|
transparent 100%
|
|
);
|
|
z-index: 42;
|
|
pointer-events: none;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
/* Corner light shine effect */
|
|
.corner-shine {
|
|
position: absolute;
|
|
top: -10%;
|
|
left: -10%;
|
|
width: 30%;
|
|
height: 30%;
|
|
background: radial-gradient(
|
|
circle at center,
|
|
rgba(255, 255, 255, 0.15) 0%,
|
|
rgba(255, 255, 255, 0.05) 40%,
|
|
transparent 70%
|
|
);
|
|
border-radius: 50%;
|
|
z-index: 42;
|
|
pointer-events: none;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Chromatic aberration effect */
|
|
.chromatic-aberration {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 43;
|
|
pointer-events: none;
|
|
box-shadow:
|
|
inset 1px 0 0 rgba(255, 0, 0, 0.05),
|
|
inset -1px 0 0 rgba(0, 255, 255, 0.05);
|
|
mix-blend-mode: screen;
|
|
}
|
|
|
|
/* Scan Lines Effect - Enhanced */
|
|
.scan-lines {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 44;
|
|
pointer-events: none;
|
|
background: repeating-linear-gradient(
|
|
to bottom,
|
|
rgba(0, 0, 0, 0) 0px,
|
|
rgba(0, 0, 0, 0) 1px,
|
|
rgba(0, 0, 0, 0.1) 1px,
|
|
rgba(0, 0, 0, 0.1) 2px
|
|
);
|
|
mix-blend-mode: overlay;
|
|
}
|
|
|
|
/* White Noise Overlay */
|
|
.white-noise {
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0.02;
|
|
z-index: 39;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='5.5' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' fill='%23ffffff'/%3E%3C/svg%3E");
|
|
pointer-events: none;
|
|
mix-blend-mode: overlay;
|
|
}
|
|
|
|
/* Improved Screen Glare */
|
|
.screen-glare {
|
|
@apply absolute inset-0 pointer-events-none;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent 0%,
|
|
rgba(255, 255, 255, 0.02) 40%,
|
|
rgba(255, 255, 255, 0.05) 50%,
|
|
rgba(255, 255, 255, 0.02) 60%,
|
|
transparent 100%
|
|
);
|
|
animation: horizontal-glare 8s linear infinite;
|
|
opacity: 0.3;
|
|
z-index: 45;
|
|
}
|
|
|
|
/* Skeuomorphic Terminal Button */
|
|
.terminal-button {
|
|
@apply relative w-full py-3 px-6 font-mono text-lg
|
|
transition-all duration-150 select-none;
|
|
font-family: 'VT323', 'Courier New', monospace;
|
|
color: #4AFF4A;
|
|
text-shadow: 0 0 8px rgba(74, 255, 74, 0.5);
|
|
background: linear-gradient(to bottom,
|
|
#003300 0%,
|
|
#002200 40%,
|
|
#001800 100%);
|
|
border-radius: 6px;
|
|
border-top: 1px solid #005500;
|
|
border-left: 1px solid #004400;
|
|
border-right: 1px solid #001100;
|
|
border-bottom: 1px solid #001100;
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
|
inset 0 0 8px rgba(0, 255, 0, 0.1),
|
|
0 1px 0 rgba(255, 255, 255, 0.05),
|
|
0 -1px 0 rgba(0, 0, 0, 0.5),
|
|
0 2px 4px rgba(0, 0, 0, 0.3);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.terminal-button-selected {
|
|
@apply text-[110%] font-bold;
|
|
color: #7FFF7F;
|
|
text-shadow: 0 0 12px rgba(74, 255, 74, 0.8);
|
|
background: linear-gradient(to bottom,
|
|
#004000 0%,
|
|
#003300 40%,
|
|
#002200 100%);
|
|
box-shadow:
|
|
inset 0 1px 10px rgba(0, 0, 0, 0.6),
|
|
inset 0 0 8px rgba(0, 255, 0, 0.25),
|
|
0 1px 0 rgba(0, 255, 0, 0.05),
|
|
0 2px 4px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.terminal-button::before {
|
|
content: '';
|
|
@apply absolute top-0 left-0 right-0 h-[1px] opacity-40;
|
|
background: linear-gradient(90deg,
|
|
transparent 0%,
|
|
rgba(0, 255, 0, 0.8) 50%,
|
|
transparent 100%
|
|
);
|
|
}
|
|
|
|
.terminal-button:hover {
|
|
color: #7FFF7F;
|
|
text-shadow: 0 0 8px rgba(74, 255, 74, 0.8);
|
|
background: linear-gradient(to bottom,
|
|
#003800 0%,
|
|
#002800 40%,
|
|
#001E00 100%);
|
|
}
|
|
|
|
.terminal-button:active {
|
|
@apply transform scale-[0.98];
|
|
background: linear-gradient(to bottom,
|
|
#001E00 0%,
|
|
#002800 60%,
|
|
#003000 100%);
|
|
box-shadow:
|
|
inset 0 1px 10px rgba(0, 0, 0, 0.5),
|
|
inset 0 0 8px rgba(0, 80, 0, 0.2);
|
|
}
|
|
|
|
/* Skeuomorphic screen effect */
|
|
.screen-content {
|
|
background-color: rgba(0, 17, 0, 0.95);
|
|
background-image:
|
|
linear-gradient(0deg,
|
|
rgba(0, 20, 0, 1) 0%,
|
|
rgba(0, 27, 0, 1) 100%),
|
|
radial-gradient(
|
|
circle at center,
|
|
rgba(0, 40, 0, 1) 0%,
|
|
rgba(0, 20, 0, 1) 100%
|
|
);
|
|
background-blend-mode: screen;
|
|
box-shadow:
|
|
inset 0 0 30px rgba(0, 0, 0, 0.8),
|
|
inset 0 0 80px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
/* Vertical separator with emboss effect */
|
|
.vertical-separator {
|
|
width: 2px;
|
|
background: linear-gradient(
|
|
to right,
|
|
rgba(0, 0, 0, 0.3),
|
|
rgba(0, 255, 0, 0.15),
|
|
rgba(0, 0, 0, 0.3)
|
|
);
|
|
position: relative;
|
|
border-radius: 1px;
|
|
}
|
|
|
|
/* Terminal text input with skeuomorphic effect */
|
|
.terminal-input {
|
|
background: rgba(0, 10, 0, 0.7);
|
|
border: 1px solid rgba(0, 50, 0, 0.3);
|
|
border-bottom: 1px solid rgba(0, 100, 0, 0.2);
|
|
border-right: 1px solid rgba(0, 70, 0, 0.2);
|
|
box-shadow:
|
|
inset 0 1px 5px rgba(0, 0, 0, 0.5),
|
|
inset 0 0 10px rgba(0, 0, 0, 0.3),
|
|
0 0 0 1px rgba(0, 30, 0, 0.1);
|
|
color: #4AFF4A;
|
|
text-shadow: 0 0 5px rgba(74, 255, 74, 0.5);
|
|
caret-color: #4AFF4A;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Rest of existing styles remain unchanged */
|
|
.glare-effect {
|
|
@apply absolute inset-0 pointer-events-none;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent 0%,
|
|
rgba(74, 255, 74, 0.1) 25%,
|
|
rgba(74, 255, 74, 0.1) 75%,
|
|
transparent 100%
|
|
);
|
|
animation: glare 3s ease-in-out infinite;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
/* Cyberpunk theme styles */
|
|
.cyberpunk-theme .terminal-button {
|
|
border-color: rgba(147, 51, 234, 0.3);
|
|
background: linear-gradient(to bottom,
|
|
#25002A 0%,
|
|
#1A001F 40%,
|
|
#120016 100%);
|
|
color: #df6cfc;
|
|
text-shadow: 0 0 8px rgba(147, 51, 234, 0.5);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
|
inset 0 0 8px rgba(147, 51, 234, 0.1),
|
|
0 1px 0 rgba(255, 255, 255, 0.05),
|
|
0 -1px 0 rgba(0, 0, 0, 0.5),
|
|
0 2px 4px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.cyberpunk-theme .terminal-button-selected {
|
|
color: #FF00FF;
|
|
text-shadow: 0 0 12px rgba(147, 51, 234, 0.8);
|
|
background: linear-gradient(to bottom,
|
|
#3A0040 0%,
|
|
#2A0030 40%,
|
|
#1F0024 100%);
|
|
box-shadow:
|
|
inset 0 1px 10px rgba(0, 0, 0, 0.6),
|
|
inset 0 0 8px rgba(147, 51, 234, 0.25),
|
|
0 1px 0 rgba(147, 51, 234, 0.05),
|
|
0 2px 4px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.cyberpunk-theme .terminal-button::before {
|
|
background: linear-gradient(90deg,
|
|
transparent 0%,
|
|
rgba(147, 51, 234, 0.8) 50%,
|
|
transparent 100%
|
|
);
|
|
}
|
|
|
|
.cyberpunk-theme .typing-effect {
|
|
border-right-color: #df6cfc;
|
|
}
|
|
|
|
.cyberpunk-theme input {
|
|
color: #df6cfc;
|
|
}
|
|
|
|
.cyberpunk-theme .screen-content {
|
|
background-color: rgba(17, 0, 17, 0.95);
|
|
background-image:
|
|
linear-gradient(0deg,
|
|
rgba(20, 0, 20, 1) 0%,
|
|
rgba(27, 0, 27, 1) 100%),
|
|
radial-gradient(
|
|
circle at center,
|
|
rgba(40, 0, 40, 1) 0%,
|
|
rgba(20, 0, 20, 1) 100%
|
|
);
|
|
}
|
|
}
|
|
|
|
@keyframes cursor-blink {
|
|
from, to { border-color: transparent }
|
|
50% { border-color: #00FF00 }
|
|
}
|
|
|
|
@keyframes glare {
|
|
0% {
|
|
transform: translateX(-200%);
|
|
}
|
|
100% {
|
|
transform: translateX(200%);
|
|
}
|
|
}
|
|
|
|
@keyframes horizontal-glare {
|
|
from {
|
|
transform: translateX(-200%);
|
|
}
|
|
to {
|
|
transform: translateX(200%);
|
|
}
|
|
}
|
|
|
|
/* Custom scrollbar with skeuomorphic design */
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: linear-gradient(to right, #001100, #002200, #001100);
|
|
border-radius: 5px;
|
|
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(to right, #003300, #00AA00, #003300);
|
|
border-radius: 5px;
|
|
border: 1px solid rgba(0, 0, 0, 0.3);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
|
0 1px 3px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: linear-gradient(to right, #004400, #00CC00, #004400);
|
|
}
|
|
|
|
/* Custom Scrollbar - Enhanced */
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 10px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: linear-gradient(to right, rgba(0, 20, 0, 0.3), rgba(0, 51, 0, 0.3), rgba(0, 20, 0, 0.3));
|
|
border-radius: 5px;
|
|
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(to right, #003300, #00AA00, #003300);
|
|
border-radius: 5px;
|
|
border: 1px solid rgba(0, 0, 0, 0.3);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
|
0 1px 3px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background: linear-gradient(to right, #004400, #00CC00, #004400);
|
|
} |