83 lines
2.3 KiB
CSS
83 lines
2.3 KiB
CSS
/*
|
|
* 📺 MUTHUR-6000 CRT Monitor Simulation Stylesheet
|
|
* For use with VS Code via the "Custom UI Style" extension.
|
|
* This file adds scanlines, screen curvature, phosphor flickering, and neon text glows.
|
|
*/
|
|
|
|
/* 1. Editor & Integrated Terminal Text Neon Phosphor Glow */
|
|
.monaco-editor .mtk,
|
|
.editor-container .view-line span,
|
|
.pane-body.integrated-terminal .xterm-rows {
|
|
text-shadow: 0 0 3px currentColor, 0 0 8px currentColor;
|
|
}
|
|
|
|
/* Integrated Terminal Block Cursor Phosphor Glow */
|
|
.pane-body.integrated-terminal .xterm-cursor {
|
|
box-shadow: 0 0 8px currentColor !important;
|
|
background: currentColor !important;
|
|
}
|
|
|
|
/* 2. Optimized CRT Phosphor Flicker (Animates only the overlay's opacity to prevent full-DOM repaint lag) */
|
|
@keyframes crt-flicker {
|
|
0% { opacity: 0.82; }
|
|
50% { opacity: 0.95; }
|
|
100% { opacity: 0.82; }
|
|
}
|
|
|
|
@keyframes cursor-blink {
|
|
to { visibility: hidden; }
|
|
}
|
|
|
|
/* 3. Physical Interlaced Scanlines Overlay (Locked to the topmost monaco-workbench frame) */
|
|
.monaco-workbench::after {
|
|
content: " ";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0; left: 0; bottom: 0; right: 0;
|
|
background: repeating-linear-gradient(
|
|
rgba(18, 16, 16, 0) 0px,
|
|
rgba(18, 16, 16, 0) 3px,
|
|
rgba(0, 0, 0, 0.24) 3px,
|
|
rgba(0, 0, 0, 0.24) 6px
|
|
);
|
|
background-size: 100% 6px;
|
|
z-index: 99999; /* Float on top of the entire panels layout */
|
|
pointer-events: none; /* Make click-through completely safe */
|
|
animation: crt-flicker 0.15s infinite; /* GPU-accelerated opacity sweep */
|
|
}
|
|
|
|
/* 4. Physical Cathode-Ray Vignette & Curved Bezel Shadow (Radial shadow on top of monaco-workbench) */
|
|
.monaco-workbench::before {
|
|
content: " ";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0; left: 0; bottom: 0; right: 0;
|
|
background: radial-gradient(
|
|
circle,
|
|
transparent 78%,
|
|
rgba(0, 0, 0, 0.80) 100%
|
|
);
|
|
z-index: 100000;
|
|
pointer-events: none;
|
|
opacity: 1.0;
|
|
box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.95) !important;
|
|
border-radius: 16px;
|
|
border: 1px solid rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* 5. Terminal-style Blinking Cursor */
|
|
.monaco-editor .cursor {
|
|
animation: cursor-blink 1s steps(2, start) infinite !important;
|
|
}
|
|
|
|
/* 6. Active Tab Phosphor Excitation */
|
|
.tab.active {
|
|
box-shadow: inset 0 0 10px currentColor;
|
|
}
|
|
|
|
/* 7. Rounded Screen Corners (CRT Curvature simulation) */
|
|
.monaco-workbench {
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
}
|