/* NERFSCRIPTS — additions on top of the leno spook stylesheet. Reuses the ghost palette: --ghost-green / --ghost-blue / --ghost-purple. */ a { color: var(--ghost-blue); } /* Ghost logo sits in the header next to the title (spook.css animates it). */ .ghost-logo { width:52px; height:52px; } /* Sky background: spook.css puts it on with background-attachment:fixed, which mobile browsers ignore and which leaves grey below the fold on long, scrolling pages. Move the image onto the already position:fixed overlay pseudo-element so it reliably covers the whole viewport everywhere. */ html, body { background-color:#04070b; } body { background-image:none !important; } body::before { background: linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,20,40,0.50) 100%), url('Leno_Sky.png') center center / cover no-repeat !important; } /* ---- top nav / buttons ---- */ .topnav { display:flex; gap:10px; align-items:center; flex-wrap:wrap; background:var(--card-bg); border:1px solid var(--border-glow); border-radius:10px; padding:8px 12px; backdrop-filter:blur(10px); } .topnav .who { color:#9fb3c8; font-size:.8rem; letter-spacing:1px; margin-right:6px; } .topnav .who b { color:var(--ghost-green); font-weight:400; } .btn { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:8px; cursor:pointer; font-family:'Share Tech Mono', monospace; font-size:.85rem; letter-spacing:1px; text-decoration:none; color:#e0e0e0; background:rgba(0,255,136,0.05); border:1px solid rgba(0,255,136,0.25); transition:all .25s ease; } .btn:hover { background:rgba(0,255,136,0.15); border-color:var(--ghost-green); color:var(--ghost-green); } .btn:disabled, .btn.disabled { opacity:.4; cursor:not-allowed; } .btn-go { background:rgba(0,255,136,0.10); border-color:rgba(0,255,136,.5); color:var(--ghost-green); } .btn-go:hover { background:rgba(0,255,136,0.20); box-shadow:0 0 16px rgba(0,255,136,.35); } .btn-stop { background:rgba(255,71,87,.08); border-color:rgba(255,71,87,.5); color:#ff7585; } .btn-stop:hover { background:rgba(255,71,87,.18); border-color:#ff4757; color:#ff8a96; box-shadow:0 0 16px rgba(255,71,87,.3); } /* ---- login ---- */ .login-wrap { position:relative; z-index:1; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; } .login-box { width:100%; max-width:380px; } .login-title { font-family:'Orbitron',sans-serif; font-weight:900; font-size:clamp(1.05rem,5.5vw,1.6rem); letter-spacing:2px; text-align:center; line-height:1.15; max-width:100%; overflow-wrap:break-word; background:linear-gradient(90deg,var(--ghost-green),var(--ghost-blue)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .login-title span { color:var(--ghost-purple); -webkit-text-fill-color:var(--ghost-purple); } .login-sub { text-align:center; color:#7f95a8; font-size:.8rem; letter-spacing:2px; margin:6px 0 22px; } /* ---- forms ---- */ .form-group { margin-bottom:16px; } .form-group label { display:block; color:#9fb3c8; font-size:.78rem; letter-spacing:1px; margin-bottom:7px; text-transform:uppercase; } input[type=email], input[type=password], input[type=text] { width:100%; padding:12px 14px; border-radius:8px; font-family:'Share Tech Mono',monospace; font-size:1rem; background:rgba(0,0,0,.35); border:1px solid rgba(0,255,136,.25); color:#e0e0e0; } input:focus { outline:none; border-color:var(--ghost-green); box-shadow:0 0 12px rgba(0,255,136,.25); } .error { background:rgba(255,71,87,.12); border:1px solid #ff4757; color:#ff8a96; padding:11px 14px; border-radius:8px; margin-bottom:16px; font-size:.85rem; } .okmsg { background:rgba(0,255,136,.1); border:1px solid var(--ghost-green); color:var(--ghost-green); padding:11px 14px; border-radius:8px; margin-bottom:16px; font-size:.85rem; } /* ---- tabs ---- */ .tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; background:var(--card-bg); border:1px solid var(--border-glow); border-radius:10px; padding:12px; backdrop-filter:blur(10px); } .tab { display:flex; align-items:center; gap:9px; padding:11px 16px; border-radius:8px; cursor:pointer; background:rgba(0,255,136,.05); border:1px solid rgba(0,255,136,.2); color:#cdd9e4; font-family:'Share Tech Mono',monospace; font-size:.85rem; letter-spacing:1px; transition:all .25s ease; } .tab:hover { background:rgba(0,255,136,.13); border-color:var(--ghost-green); color:var(--ghost-green); } .tab.active { background:rgba(0,255,136,.2); border-color:var(--ghost-green); color:var(--ghost-green); box-shadow:0 0 15px rgba(0,255,136,.3); } .tab .ico { font-size:1rem; } .tabpanel { display:none; } .tabpanel.active { display:block; } /* ---- script panel layout ---- */ .panel-grid { display:grid; grid-template-columns:minmax(280px,360px) 1fr; gap:20px; align-items:start; } @media (max-width:920px){ .panel-grid { grid-template-columns:1fr; } } .badge { display:inline-block; padding:3px 9px; border-radius:20px; font-size:.65rem; letter-spacing:1px; text-transform:uppercase; } .badge.low { background:rgba(0,255,136,.12); color:var(--ghost-green); border:1px solid rgba(0,255,136,.4); } .badge.medium { background:rgba(255,165,2,.12); color:#ffb84d; border:1px solid rgba(255,165,2,.4); } .badge.high { background:rgba(255,71,87,.12); color:#ff8a96; border:1px solid rgba(255,71,87,.4); } .purpose { color:#c3d0db; font-size:.9rem; line-height:1.55; margin:4px 0 16px; } .subhead { font-family:'Orbitron',sans-serif; font-size:.72rem; letter-spacing:2px; text-transform:uppercase; color:var(--ghost-purple); margin:16px 0 8px; } .explist { list-style:none; } .explist li { position:relative; padding:6px 0 6px 20px; font-size:.85rem; color:#cdd9e4; line-height:1.45; border-bottom:1px solid rgba(255,255,255,.06); } .explist li::before { content:'▸'; position:absolute; left:0; color:var(--ghost-green); } .explist.warn li::before { content:'⚠'; color:#ffb84d; } /* ---- key/value meta ---- */ .kv { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.07); font-size:.82rem; } .kv:last-child { border-bottom:none; } .kv-k { color:#7f95a8; } .kv-v { color:var(--ghost-blue); text-align:right; word-break:break-all; } /* ---- controls + terminal ---- */ .controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; background:var(--card-bg); border:1px solid var(--border-glow); border-radius:10px; padding:12px; backdrop-filter:blur(10px); } .run-state { display:flex; align-items:center; gap:9px; margin-left:auto; font-size:.8rem; color:#9fb3c8; } .run-state .label { letter-spacing:1px; } .state-idle { color:#7f95a8; } .state-run { color:var(--ghost-green); } .state-done { color:var(--ghost-blue); } .state-fail { color:#ff8a96; } .term-card { padding:0; overflow:hidden; } .term-bar { display:flex; align-items:center; gap:8px; padding:9px 14px; background:rgba(0,0,0,.45); border-bottom:1px solid var(--border-glow); } .term-bar .dot { width:11px; height:11px; border-radius:50%; } .term-bar .r { background:#ff5f56; } .term-bar .y { background:#ffbd2e; } .term-bar .g { background:#27c93f; } .term-bar .name { margin-left:8px; color:#8aa0b2; font-size:.78rem; letter-spacing:1px; } .terminal { height:62vh; height:62dvh; min-height:360px; max-width:100%; padding:8px 6px 4px 10px; background:#05080c; } .xterm { height:100%; } /* Stop any wide child (notably the xterm canvas) from blowing the page width. Grid/flex items default to min-width:auto and won't shrink below their content — this is what pushes the layout off-screen on a phone. */ html { overflow-x:hidden; overflow-y:scroll; scrollbar-gutter:stable; } .panel-grid > *, .dashboard > * { min-width:0; } .card, .term-card, .terminal, .xterm { max-width:100%; } /* ---- mobile / portrait ---- */ @media (max-width:768px) { html, body { max-width:100%; overflow-x:hidden; } .container { padding:12px 10px; max-width:100%; } .header { flex-direction:column; align-items:stretch; text-align:center; gap:10px; margin-bottom:16px; } .logo-section { justify-content:center; } .ghost-logo { width:42px; height:42px; } .topnav { width:100%; justify-content:center; flex-wrap:wrap; gap:8px; } .topnav .who { width:100%; text-align:center; margin:0 0 2px; } .topnav .btn { flex:1 1 auto; justify-content:center; } /* Script tabs: a 2-column grid of full-width chips. Always fits portrait, never scrolls sideways, and every script is one tap away. */ .tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; overflow:visible; } .tab { width:100%; padding:10px 12px; font-size:.8rem; line-height:1.25; } .tab .ico, .tab .status-dot { flex-shrink:0; } /* Everything stacks to a single column */ .panel-grid { grid-template-columns:1fr; gap:14px; } /* Controls: the three buttons share a row, status drops below full-width */ .controls { gap:8px; } .controls .btn { flex:1 1 28%; justify-content:center; padding:11px 6px; } .run-state { margin-left:0; width:100%; justify-content:center; order:3; } .term-card { border-radius:8px; } .term-bar .name { display:none; } .terminal { height:56vh; height:56dvh; min-height:280px; padding:6px 4px 4px 6px; } .card { padding:14px; } .purpose { font-size:.86rem; } .kv { font-size:.8rem; gap:8px; } .kv-v { max-width:62%; } }