mirror of
https://github.com/samsonjs/vibetunnel.git
synced 2026-03-28 09:55:53 +00:00
1a08d4603a
- Removed lint_output.txt from git tracking - Added lint_output.txt to .gitignore to prevent future commits 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
475 lines
12 KiB
CSS
475 lines
12 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Fira Code Variable Font */
|
|
@font-face {
|
|
font-family: 'Fira Code';
|
|
font-style: normal;
|
|
font-weight: 300 700;
|
|
font-display: swap;
|
|
src:
|
|
url('/fonts/FiraCode-VF.woff2') format('woff2-variations'),
|
|
url('/fonts/FiraCode-VF.ttf') format('truetype-variations');
|
|
font-variation-settings: 'wght' 400;
|
|
}
|
|
|
|
/* Hack Nerd Font */
|
|
@font-face {
|
|
font-family: 'Hack Nerd Font Mono';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url('/fonts/HackNerdFontMono-Regular.ttf') format('truetype');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Hack Nerd Font Mono';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: url('/fonts/HackNerdFontMono-Bold.ttf') format('truetype');
|
|
}
|
|
|
|
/* Override Tailwind's font-mono to use Hack Nerd Font */
|
|
.font-mono {
|
|
font-family:
|
|
'Hack Nerd Font Mono', 'Fira Code', ui-monospace, SFMono-Regular, 'SF Mono', Consolas,
|
|
'Liberation Mono', Menlo, monospace !important;
|
|
}
|
|
|
|
/* Mobile scroll and touch behavior fixes */
|
|
html,
|
|
body {
|
|
overscroll-behavior: none;
|
|
touch-action: pan-x pan-y;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* Prevent pull-to-refresh on mobile */
|
|
body {
|
|
overscroll-behavior-y: contain;
|
|
}
|
|
|
|
/* Terminal-specific touch handling */
|
|
.xterm {
|
|
touch-action: pan-y;
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
.xterm .xterm-viewport {
|
|
touch-action: pan-y;
|
|
overscroll-behavior-y: contain;
|
|
}
|
|
|
|
/* Fix XTerm text span touch scrolling issues */
|
|
.xterm .xterm-rows span {
|
|
touch-action: pan-y;
|
|
}
|
|
|
|
.xterm .xterm-screen {
|
|
touch-action: pan-y;
|
|
}
|
|
|
|
/* More aggressive fix for session cards (read-only snapshots) */
|
|
.session-preview .xterm .xterm-rows span {
|
|
pointer-events: none;
|
|
touch-action: pan-y;
|
|
}
|
|
|
|
/* Terminal container scroll prevention */
|
|
#terminal-container {
|
|
touch-action: pan-y;
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
/* Session cards - prevent pull-to-refresh */
|
|
.session-card {
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
/* App header - prevent pull-to-refresh when scrolling starts from header */
|
|
.app-header {
|
|
overscroll-behavior: none;
|
|
touch-action: pan-x pan-y;
|
|
}
|
|
|
|
/* XTerm terminal styling */
|
|
.xterm {
|
|
padding: 0 !important;
|
|
font-family:
|
|
'Hack Nerd Font Mono', 'Fira Code', ui-monospace, SFMono-Regular, 'SF Mono', Consolas,
|
|
'Liberation Mono', Menlo, monospace !important;
|
|
font-variant-ligatures: none;
|
|
font-feature-settings:
|
|
'liga' 0,
|
|
'clig' 0,
|
|
'calt' 0;
|
|
text-rendering: optimizeSpeed;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* Terminal character specific styling */
|
|
.terminal-char {
|
|
font-variant-ligatures: none;
|
|
font-feature-settings: 'liga' 0;
|
|
white-space: pre;
|
|
}
|
|
|
|
/* Terminal text decoration support */
|
|
.terminal-char.bold {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.terminal-char.italic {
|
|
font-style: italic;
|
|
}
|
|
|
|
.terminal-char.underline {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.terminal-char.dim {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.terminal-char.strikethrough {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.terminal-char.overline {
|
|
text-decoration: overline;
|
|
}
|
|
|
|
/* Cursor styling */
|
|
.terminal-char.cursor {
|
|
animation: blink 1s infinite;
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%,
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
51%,
|
|
100% {
|
|
opacity: 0.3;
|
|
}
|
|
}
|
|
|
|
.xterm .xterm-viewport {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* Ensure terminal container has proper size */
|
|
#terminal-player,
|
|
#interactive-terminal {
|
|
min-height: 480px;
|
|
min-width: 640px;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Terminal focus indicator */
|
|
.terminal-focused {
|
|
box-shadow: 0 0 0 2px #00ff00;
|
|
border-color: #00ff00 !important;
|
|
}
|
|
|
|
/* Keyboard capture indicator */
|
|
.keyboard-capture-indicator {
|
|
position: fixed;
|
|
top: 10px;
|
|
right: 10px;
|
|
background: rgba(0, 255, 0, 0.1);
|
|
border: 1px solid #00ff00;
|
|
color: #00ff00;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
/* Force XTerm terminal to fit within session card bounds */
|
|
.session-preview .xterm {
|
|
min-width: unset !important;
|
|
min-height: unset !important;
|
|
max-width: 100% !important;
|
|
max-height: 100% !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.session-preview .xterm .xterm-screen {
|
|
max-width: 100% !important;
|
|
max-height: 100% !important;
|
|
}
|
|
|
|
.session-preview .xterm .xterm-viewport {
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.xterm .xterm-helper-textarea {
|
|
opacity: 0 !important;
|
|
}
|
|
|
|
/* XTerm 256-color palette - Complete */
|
|
:root {
|
|
--terminal-color-0: #000000;
|
|
--terminal-color-1: #800000;
|
|
--terminal-color-2: #008000;
|
|
--terminal-color-3: #808000;
|
|
--terminal-color-4: #000080;
|
|
--terminal-color-5: #800080;
|
|
--terminal-color-6: #008080;
|
|
--terminal-color-7: #c0c0c0;
|
|
--terminal-color-8: #808080;
|
|
--terminal-color-9: #ff0000;
|
|
--terminal-color-10: #00ff00;
|
|
--terminal-color-11: #ffff00;
|
|
--terminal-color-12: #0000ff;
|
|
--terminal-color-13: #ff00ff;
|
|
--terminal-color-14: #00ffff;
|
|
--terminal-color-15: #ffffff;
|
|
--terminal-color-16: #000000;
|
|
--terminal-color-17: #00005f;
|
|
--terminal-color-18: #000087;
|
|
--terminal-color-19: #0000af;
|
|
--terminal-color-20: #0000d7;
|
|
--terminal-color-21: #0000ff;
|
|
--terminal-color-22: #005f00;
|
|
--terminal-color-23: #005f5f;
|
|
--terminal-color-24: #005f87;
|
|
--terminal-color-25: #005faf;
|
|
--terminal-color-26: #005fd7;
|
|
--terminal-color-27: #005fff;
|
|
--terminal-color-28: #008700;
|
|
--terminal-color-29: #00875f;
|
|
--terminal-color-30: #008787;
|
|
--terminal-color-31: #0087af;
|
|
--terminal-color-32: #0087d7;
|
|
--terminal-color-33: #0087ff;
|
|
--terminal-color-34: #00af00;
|
|
--terminal-color-35: #00af5f;
|
|
--terminal-color-36: #00af87;
|
|
--terminal-color-37: #00afaf;
|
|
--terminal-color-38: #00afd7;
|
|
--terminal-color-39: #00afff;
|
|
--terminal-color-40: #00d700;
|
|
--terminal-color-41: #00d75f;
|
|
--terminal-color-42: #00d787;
|
|
--terminal-color-43: #00d7af;
|
|
--terminal-color-44: #00d7d7;
|
|
--terminal-color-45: #00d7ff;
|
|
--terminal-color-46: #00ff00;
|
|
--terminal-color-47: #00ff5f;
|
|
--terminal-color-48: #00ff87;
|
|
--terminal-color-49: #00ffaf;
|
|
--terminal-color-50: #00ffd7;
|
|
--terminal-color-51: #00ffff;
|
|
--terminal-color-52: #5f0000;
|
|
--terminal-color-53: #5f005f;
|
|
--terminal-color-54: #5f0087;
|
|
--terminal-color-55: #5f00af;
|
|
--terminal-color-56: #5f00d7;
|
|
--terminal-color-57: #5f00ff;
|
|
--terminal-color-58: #5f5f00;
|
|
--terminal-color-59: #5f5f5f;
|
|
--terminal-color-60: #5f5f87;
|
|
--terminal-color-61: #5f5faf;
|
|
--terminal-color-62: #5f5fd7;
|
|
--terminal-color-63: #5f5fff;
|
|
--terminal-color-64: #5f8700;
|
|
--terminal-color-65: #5f875f;
|
|
--terminal-color-66: #5f8787;
|
|
--terminal-color-67: #5f87af;
|
|
--terminal-color-68: #5f87d7;
|
|
--terminal-color-69: #5f87ff;
|
|
--terminal-color-70: #5faf00;
|
|
--terminal-color-71: #5faf5f;
|
|
--terminal-color-72: #5faf87;
|
|
--terminal-color-73: #5fafaf;
|
|
--terminal-color-74: #5fafd7;
|
|
--terminal-color-75: #5fafff;
|
|
--terminal-color-76: #5fd700;
|
|
--terminal-color-77: #5fd75f;
|
|
--terminal-color-78: #5fd787;
|
|
--terminal-color-79: #5fd7af;
|
|
--terminal-color-80: #5fd7d7;
|
|
--terminal-color-81: #5fd7ff;
|
|
--terminal-color-82: #5fff00;
|
|
--terminal-color-83: #5fff5f;
|
|
--terminal-color-84: #5fff87;
|
|
--terminal-color-85: #5fffaf;
|
|
--terminal-color-86: #5fffd7;
|
|
--terminal-color-87: #5fffff;
|
|
--terminal-color-88: #870000;
|
|
--terminal-color-89: #87005f;
|
|
--terminal-color-90: #870087;
|
|
--terminal-color-91: #8700af;
|
|
--terminal-color-92: #8700d7;
|
|
--terminal-color-93: #8700ff;
|
|
--terminal-color-94: #875f00;
|
|
--terminal-color-95: #875f5f;
|
|
--terminal-color-96: #875f87;
|
|
--terminal-color-97: #875faf;
|
|
--terminal-color-98: #875fd7;
|
|
--terminal-color-99: #875fff;
|
|
--terminal-color-100: #878700;
|
|
--terminal-color-101: #87875f;
|
|
--terminal-color-102: #878787;
|
|
--terminal-color-103: #8787af;
|
|
--terminal-color-104: #8787d7;
|
|
--terminal-color-105: #8787ff;
|
|
--terminal-color-106: #87af00;
|
|
--terminal-color-107: #87af5f;
|
|
--terminal-color-108: #87af87;
|
|
--terminal-color-109: #87afaf;
|
|
--terminal-color-110: #87afd7;
|
|
--terminal-color-111: #87afff;
|
|
--terminal-color-112: #87d700;
|
|
--terminal-color-113: #87d75f;
|
|
--terminal-color-114: #87d787;
|
|
--terminal-color-115: #87d7af;
|
|
--terminal-color-116: #87d7d7;
|
|
--terminal-color-117: #87d7ff;
|
|
--terminal-color-118: #87ff00;
|
|
--terminal-color-119: #87ff5f;
|
|
--terminal-color-120: #87ff87;
|
|
--terminal-color-121: #87ffaf;
|
|
--terminal-color-122: #87ffd7;
|
|
--terminal-color-123: #87ffff;
|
|
--terminal-color-124: #af0000;
|
|
--terminal-color-125: #af005f;
|
|
--terminal-color-126: #af0087;
|
|
--terminal-color-127: #af00af;
|
|
--terminal-color-128: #af00d7;
|
|
--terminal-color-129: #af00ff;
|
|
--terminal-color-130: #af5f00;
|
|
--terminal-color-131: #af5f5f;
|
|
--terminal-color-132: #af5f87;
|
|
--terminal-color-133: #af5faf;
|
|
--terminal-color-134: #af5fd7;
|
|
--terminal-color-135: #af5fff;
|
|
--terminal-color-136: #af8700;
|
|
--terminal-color-137: #af875f;
|
|
--terminal-color-138: #af8787;
|
|
--terminal-color-139: #af87af;
|
|
--terminal-color-140: #af87d7;
|
|
--terminal-color-141: #af87ff;
|
|
--terminal-color-142: #afaf00;
|
|
--terminal-color-143: #afaf5f;
|
|
--terminal-color-144: #afaf87;
|
|
--terminal-color-145: #afafaf;
|
|
--terminal-color-146: #afafd7;
|
|
--terminal-color-147: #afafff;
|
|
--terminal-color-148: #afd700;
|
|
--terminal-color-149: #afd75f;
|
|
--terminal-color-150: #afd787;
|
|
--terminal-color-151: #afd7af;
|
|
--terminal-color-152: #afd7d7;
|
|
--terminal-color-153: #afd7ff;
|
|
--terminal-color-154: #afff00;
|
|
--terminal-color-155: #afff5f;
|
|
--terminal-color-156: #afff87;
|
|
--terminal-color-157: #afffaf;
|
|
--terminal-color-158: #afffd7;
|
|
--terminal-color-159: #afffff;
|
|
--terminal-color-160: #d70000;
|
|
--terminal-color-161: #d7005f;
|
|
--terminal-color-162: #d70087;
|
|
--terminal-color-163: #d700af;
|
|
--terminal-color-164: #d700d7;
|
|
--terminal-color-165: #d700ff;
|
|
--terminal-color-166: #d75f00;
|
|
--terminal-color-167: #d75f5f;
|
|
--terminal-color-168: #d75f87;
|
|
--terminal-color-169: #d75faf;
|
|
--terminal-color-170: #d75fd7;
|
|
--terminal-color-171: #d75fff;
|
|
--terminal-color-172: #d78700;
|
|
--terminal-color-173: #d7875f;
|
|
--terminal-color-174: #d78787;
|
|
--terminal-color-175: #d787af;
|
|
--terminal-color-176: #d787d7;
|
|
--terminal-color-177: #d787ff;
|
|
--terminal-color-178: #d7af00;
|
|
--terminal-color-179: #d7af5f;
|
|
--terminal-color-180: #d7af87;
|
|
--terminal-color-181: #d7afaf;
|
|
--terminal-color-182: #d7afd7;
|
|
--terminal-color-183: #d7afff;
|
|
--terminal-color-184: #d7d700;
|
|
--terminal-color-185: #d7d75f;
|
|
--terminal-color-186: #d7d787;
|
|
--terminal-color-187: #d7d7af;
|
|
--terminal-color-188: #d7d7d7;
|
|
--terminal-color-189: #d7d7ff;
|
|
--terminal-color-190: #d7ff00;
|
|
--terminal-color-191: #d7ff5f;
|
|
--terminal-color-192: #d7ff87;
|
|
--terminal-color-193: #d7ffaf;
|
|
--terminal-color-194: #d7ffd7;
|
|
--terminal-color-195: #d7ffff;
|
|
--terminal-color-196: #ff0000;
|
|
--terminal-color-197: #ff005f;
|
|
--terminal-color-198: #ff0087;
|
|
--terminal-color-199: #ff00af;
|
|
--terminal-color-200: #ff00d7;
|
|
--terminal-color-201: #ff00ff;
|
|
--terminal-color-202: #ff5f00;
|
|
--terminal-color-203: #ff5f5f;
|
|
--terminal-color-204: #ff5f87;
|
|
--terminal-color-205: #ff5faf;
|
|
--terminal-color-206: #ff5fd7;
|
|
--terminal-color-207: #ff5fff;
|
|
--terminal-color-208: #ff8700;
|
|
--terminal-color-209: #ff875f;
|
|
--terminal-color-210: #ff8787;
|
|
--terminal-color-211: #ff87af;
|
|
--terminal-color-212: #ff87d7;
|
|
--terminal-color-213: #ff87ff;
|
|
--terminal-color-214: #ffaf00;
|
|
--terminal-color-215: #ffaf5f;
|
|
--terminal-color-216: #ffaf87;
|
|
--terminal-color-217: #ffafaf;
|
|
--terminal-color-218: #ffafd7;
|
|
--terminal-color-219: #ffafff;
|
|
--terminal-color-220: #ffd700;
|
|
--terminal-color-221: #ffd75f;
|
|
--terminal-color-222: #ffd787;
|
|
--terminal-color-223: #ffd7af;
|
|
--terminal-color-224: #ffd7d7;
|
|
--terminal-color-225: #ffd7ff;
|
|
--terminal-color-226: #ffff00;
|
|
--terminal-color-227: #ffff5f;
|
|
--terminal-color-228: #ffff87;
|
|
--terminal-color-229: #ffffaf;
|
|
--terminal-color-230: #ffffd7;
|
|
--terminal-color-231: #ffffff;
|
|
--terminal-color-232: #080808;
|
|
--terminal-color-233: #121212;
|
|
--terminal-color-234: #1c1c1c;
|
|
--terminal-color-235: #262626;
|
|
--terminal-color-236: #303030;
|
|
--terminal-color-237: #3a3a3a;
|
|
--terminal-color-238: #444444;
|
|
--terminal-color-239: #4e4e4e;
|
|
--terminal-color-240: #585858;
|
|
--terminal-color-241: #626262;
|
|
--terminal-color-242: #6c6c6c;
|
|
--terminal-color-243: #767676;
|
|
--terminal-color-244: #808080;
|
|
--terminal-color-245: #8a8a8a;
|
|
--terminal-color-246: #949494;
|
|
--terminal-color-247: #9e9e9e;
|
|
--terminal-color-248: #a8a8a8;
|
|
--terminal-color-249: #b2b2b2;
|
|
--terminal-color-250: #bcbcbc;
|
|
--terminal-color-251: #c6c6c6;
|
|
--terminal-color-252: #d0d0d0;
|
|
--terminal-color-253: #dadada;
|
|
--terminal-color-254: #e4e4e4;
|
|
--terminal-color-255: #eeeeee;
|
|
}
|