/** * Copyright (c) 2014 The xterm.js authors. All rights reserved. * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License) * https://github.com/chjj/term.js * @license MIT * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. * * Originally forked from (with the author's permission): * Fabrice Bellard's javascript vt100 for jslinux: * http://bellard.org/jslinux/ * Copyright (c) 2011 Fabrice Bellard * The original design remains. The terminal itself * has been extended to include xterm CSI codes, among * other features. */.xterm{cursor:text;position:relative;user-select:none;-ms-user-select:none;-webkit-user-select:none}.xterm.focus,.xterm:focus{outline:none}.xterm .xterm-helpers{position:absolute;top:0;z-index:5}.xterm .xterm-helper-textarea{padding:0;border:0;margin:0;position:absolute;opacity:0;left:-9999em;top:0;width:0;height:0;z-index:-5;white-space:nowrap;overflow:hidden;resize:none}.xterm .composition-view{background:#000;color:#fff;display:none;position:absolute;white-space:nowrap;z-index:1}.xterm .composition-view.active{display:block}.xterm .xterm-viewport{background-color:#000;overflow-y:scroll;cursor:default;position:absolute;right:0;left:0;top:0;bottom:0}.xterm .xterm-screen{position:relative}.xterm .xterm-screen canvas{position:absolute;left:0;top:0}.xterm .xterm-scroll-area{visibility:hidden}.xterm-char-measure-element{display:inline-block;visibility:hidden;position:absolute;top:0;left:-9999em;line-height:normal}.xterm.enable-mouse-events{cursor:default}.xterm.xterm-cursor-pointer,.xterm .xterm-cursor-pointer{cursor:pointer}.xterm.column-select.focus{cursor:crosshair}.xterm .xterm-accessibility,.xterm .xterm-message{position:absolute;left:0;top:0;bottom:0;right:0;z-index:10;color:transparent}.xterm .live-region{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.xterm-dim{opacity:.5}.xterm-underline{text-decoration:underline}.xterm-strikethrough{text-decoration:line-through}.xterm-screen .xterm-decoration-container .xterm-decoration{z-index:6;position:absolute}.xterm-decoration-overview-ruler{z-index:7;position:absolute;top:0;right:0;pointer-events:none}.xterm-decoration-top{z-index:2;position:relative} /* Tilted menu bigger */ .st-menu{ font-size: 1.1rem; /* bump font up */ padding: .5rem 1rem; /* more padding inside */ min-width: 180px; /* ensure a decent width */ } /* make links fill the width */ .st-menu a{ padding: 10px 14px; /* larger clickable area */ font-size: 1rem; /* adjust text size */ } /* ----- AMBER UI SKIN FOR RANGE + SELECT ----- */ :root{ --ui-track:#2a1d10; --ui-track-edge:#8a5b1b; --ui-track-glow:rgba(255,191,77,.25); --ui-thumb:#ffbf4d; --ui-thumb-edge:#8a5b1b; --ui-thumb-glow:rgba(255,191,77,.55); --ui-focus:rgba(255,191,77,.6); } /* Base control look override */ input, select, button{ background:#0f0b06; color:var(--neon); border:1px solid var(--edge); border-radius:10px; padding:8px 10px; box-shadow:0 0 10px rgba(255,191,77,.15) inset, 0 0 6px transparent; outline:none; } input:focus, select:focus, button:focus{ box-shadow: 0 0 10px rgba(255,191,77,.15) inset, 0 0 0 2px var(--ui-focus); } /* ===== Range Slider ===== */ input[type="range"]{ -webkit-appearance:none; appearance:none; width:180px; height:24px; background:transparent; padding:0; margin:6px 0; } /* Track (WebKit/Chromium) */ input[type="range"]::-webkit-slider-runnable-track{ height:8px; border-radius:999px; background: linear-gradient(180deg, var(--ui-track), #1d140b); border:1px solid var(--ui-track-edge); box-shadow: 0 0 14px var(--ui-track-glow) inset, 0 0 18px var(--glowB); } /* Thumb (WebKit/Chromium) */ input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:18px; height:18px; margin-top:-6px; /* centers thumb on 8px track */ border-radius:50%; background: radial-gradient(circle at 35% 35%, #fff2d0 0%, var(--ui-thumb) 40%, #d49b3c 70%); border:1px solid var(--ui-thumb-edge); box-shadow: 0 0 10px var(--ui-thumb-glow), 0 0 2px #000 inset; cursor:pointer; } input[type="range"]::-webkit-slider-thumb:hover{ box-shadow: 0 0 14px var(--ui-thumb-glow), 0 0 2px #000 inset; } /* Track (Firefox) */ input[type="range"]::-moz-range-track{ height:8px; border-radius:999px; background: linear-gradient(180deg, var(--ui-track), #1d140b); border:1px solid var(--ui-track-edge); box-shadow: 0 0 14px var(--ui-track-glow) inset, 0 0 18px var(--glowB); } /* Progress fill (Firefox) */ input[type="range"]::-moz-range-progress{ height:8px; border-radius:999px; background: linear-gradient(180deg, #3b2a14, #25190d); border:1px solid var(--ui-track-edge); } /* Thumb (Firefox) */ input[type="range"]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background: radial-gradient(circle at 35% 35%, #fff2d0 0%, var(--ui-thumb) 40%, #d49b3c 70%); border:1px solid var(--ui-thumb-edge); box-shadow: 0 0 10px var(--ui-thumb-glow), 0 0 2px #000 inset; cursor:pointer; } /* Disabled state */ input[type="range"]:disabled{ filter:grayscale(.5) opacity(.6); cursor:not-allowed; } /* ===== Select (custom arrow, amber) ===== */ select{ -webkit-appearance:none; appearance:none; padding-right:34px; /* room for arrow */ background: #0f0b06 linear-gradient(180deg, rgba(255,191,77,.08), rgba(255,191,77,.02)) padding-box, /* little amber caret using inline SVG */ url('data:image/svg+xml;utf8,\ ') no-repeat right 10px center / 14px 14px; } select:hover{ box-shadow:0 0 18px rgba(255,191,77,.25) inset; } select:disabled{ opacity:.6; cursor:not-allowed; } /* Make control labels feel a tad brighter on focus */ .control-row:has(input:focus), .control-row:has(select:focus){ filter: drop-shadow(0 0 6px var(--glowA)); }