/*! * __ _____ ________ __ * / // _ /__ __ _____ ___ __ _/__ ___/__ ___ ______ __ __ __ ___ / / * __ / // // // // // _ // _// // / / // _ // _// // // \/ // _ \/ / * / / // // // // // ___// / / // / / // ___// / / / / // // /\ // // / /__ * \___//____ \\___//____//_/ _\_ / /_//____//_/ /_/ /_//_//_/ /_/ \__\_\___/ * \/ /____/ version 1.23.2 * http://terminal.jcubic.pl * * This file is part of jQuery Terminal. * * Copyright (c) 2011-2018 Jakub Jankiewicz * Released under the MIT license * * Date: Tue, 18 Sep 2018 14:16:36 +0000 */ .terminal .terminal-output .format, .cmd .format, .cmd .prompt, .cmd .prompt div, .terminal .terminal-output div div{ display: inline-block; } .terminal h1, .terminal h2, .terminal h3, .terminal h4, .terminal h5, .terminal h6, .terminal pre, .cmd { margin: 0; } .terminal h1, .terminal h2, .terminal h3, .terminal h4, .terminal h5, .terminal h6 { line-height: 1.2em; } /* .cmd .mask { width: 10px; height: 11px; background: black; z-index: 100; } */ .cmd .clipboard { position: absolute; left: -16px; top: 0; width: 16px; height: 16px; /* this seems to work after all on Android */ /*left: -99999px; clip: rect(1px,1px,1px,1px); /* on desktop textarea appear when paste */ /* opacity is needed for Edge and IE opacity: 0.01; filter: alpha(opacity = 0.01); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.01);*/ background-color: transparent; border: none; color: transparent; outline: none; padding: 0; resize: none; z-index: 1000; overflow: hidden; white-space: pre; text-indent: -9999em; /* better cursor hiding for Safari and IE */ } .cmd .noselect, .cmd [role="presentation"]:not(.cursor-line) > span:last-child, .cmd .cursor-line > span:last-child > span:last-child { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } .terminal img, .terminal audio, .terminal object, .terminal canvas { cursor: default; } .terminal .error { color: #f00; } .terminal { position: relative; /*overflow: hidden;*/ overflow-y: auto; /* overflow-x: hidden; */ } .terminal { contain: content; } body.terminal { min-height: 100vh; height: 100%; } body.terminal { margin: 0; } .terminal > div { min-height: 100%; } .terminal > .resizer, .terminal > .font .resizer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; pointer-events: none; z-index: -1; height: 100%; border: none; padding: 0; width: 100% } .cmd { padding: 0; position: relative; float: left; } .terminal a[tabindex="1000"], .terminal a[tabindex="1000"]:active, .terminal a[tabindex="1000"]:focus { outline: none; } .terminal .inverted, .cmd .inverted { background-color: #aaa; color: #000; } .cmd .cursor { display: inline-block; position: relative; height: 14px; min-width: 1ch; /* box-sizing: border-box; */ } .cmd .cursor span span { border-bottom: 3px solid transparent; margin-bottom: -3px; background-clip: content-box; border-left: 1px solid transparent; position: absolute; top: 0; margin-left: -1px; background-color: inherit; color: inherit; } .cmd .cursor-line > span { display: inline-block; float: left; } .cmd .cursor.blink span span { -webkit-animation: terminal-blink 1s infinite linear; -moz-animation: terminal-blink 1s infinite linear; -ms-animation: terminal-blink 1s infinite linear; animation: terminal-blink 1s infinite linear; } .bar.terminal .inverted, .bar.cmd .inverted { border-left-color: #aaa; } .terminal .terminal-output div div, .cmd .prompt { display: block; line-height: 14px; height: auto; } .terminal .terminal-output > div:not(.raw) div { white-space: nowrap; } .cmd .prompt > span { float: left; } .terminal, .terminal-wrapper *, .cmd, .cmd * { font-family: monospace; /*font-family: FreeMono, monospace; this don't work on Android */ color: #aaa; background-color: #000; font-size: 12px; line-height: 14px; } .terminal, .cmd { box-sizing: border-box; cursor: text; } .cmd .cursor span:not(.token) { color: inherit; background-color: inherit; } .cmd .cursor * { background-color: transparent; } .cmd div { clear: both; min-height: 14px; } .cmd .prompt + div { clear: right; } .terminal-output > div > div { min-height: 14px; } terminal .terminal-output > div { margin-top: -1px; } .terminal-output > div.raw > div * { overflow-wrap: break-word; word-wrap: break-word; } .terminal .font { position: absolute; float: left; font-size: inherit; line-height: inherit; top: -100%; left: 0; margin-bottom: 1px; } .terminal .terminal-output div span { display: inline-block; } .cmd > span:not(.prompt) { float: left; } .cmd .prompt span.line { display: block; float: none; } .terminal table { border-collapse: collapse; } .terminal td { border: 1px solid #aaa; } .cmd span[data-text] span { background-color: inherit; color: inherit; } /* * this is set so animation can select original color as backgound for cursor * so span can have --color for selection */ .cmd { --original-color: var(--color, #aaa); } @-webkit-keyframes terminal-blink { 0%, 50% { background-color: #bbb; background-color: var(--original-color, #bbb); color: #000; color: var(--background, #000); } 50.1%, 100% { background-color: inherit; color: inherit; } } @-ms-keyframes terminal-blink { 0%, 50% { background-color: #bbb; background-color: var(--original-color, #bbb); color: #000; color: var(--background, #000); } 50.1%, 100% { background-color: inherit; color: inherit; } } @-moz-keyframes terminal-blink { 0%, 50% { background-color: #aaa; background-color: var(--original-color, #aaa); color: #000; color: var(--background, #000); } 50.1%, 100% { background-color: inherit; color: inherit; } } @keyframes terminal-blink { 0%, 50% { background-color: #aaa; background-color: var(--original-color, #aaa); color: #000; color: var(--background, #000); } 50.1%, 100% { background-color: inherit; color: inherit; } } @-webkit-keyframes terminal-bar { 0%, 50% { border-left-color: #aaa; border-left-color: var(--color, #aaa); } 50.1%, 100% { border-left-color: #000; border-left-color: var(--background, #000); } } @-ms-keyframes terminal-bar { 0%, 50% { border-left-color: #aaa; border-left-color: var(--color, #aaa); } 50.1%, 100% { border-left-color: #000; border-left-color: var(--background, #000); } } @-moz-keyframes terminal-bar { 0%, 50% { border-left-color: #aaa; border-left-color: var(--color, #aaa); } 50.1%, 100% { border-left-color: #000; border-left-color: var(--background, #000); } } @keyframes terminal-bar { 0%, 50% { border-left-color: #aaa; border-left-color: var(--color, #aaa); } 50.1%, 100% { border-left-color: #000; border-left-color: var(--background, #000); } } @-webkit-keyframes terminal-underline { 0%, 50% { border-left: none; border-bottom-color: #aaa; border-bottom-color: var(--color, #aaa); line-height: 12px; line-height: calc(var(--size, 1) * 12px); } 50.1%, 100% { border-left: none; border-bottom-color: #000; border-bottom-color: var(--background, #000); line-height: 12px; line-height: calc(var(--size, 1) * 12px); } } @-ms-keyframes terminal-underline { 0%, 50% { border-left: none; border-bottom-color: #aaa; border-bottom-color: var(--color, #aaa); line-height: 12px; line-height: calc(var(--size, 1) * 12px); } 50.1%, 100% { border-left: none; border-bottom-color: #000; border-bottom-color: var(--background, #000); line-height: 12px; line-height: calc(var(--size, 1) * 12px); } } @-moz-keyframes terminal-underline { 0%, 50% { border-left: none; border-bottom-color: #aaa; border-bottom-color: var(--color, #aaa); line-height: 12px; line-height: calc(var(--size, 1) * 12px); } 50.1%, 100% { border-left: none; border-bottom-color: #000; border-bottom-color: var(--background, #000); line-height: 12px; line-height: calc(var(--size, 1) * 12px); } } @keyframes terminal-underline { 0%, 50% { border-left: none; border-bottom-color: #aaa; border-bottom-color: var(--color, #aaa); line-height: 12px; line-height: calc(var(--size, 1) * 12px); } 50.1%, 100% { border-left: none; border-bottom-color: #000; border-bottom-color: var(--background, #000); line-height: 12px; line-height: calc(var(--size, 1) * 12px); } } /* Internet Explorer & Edge *, Safari ≤ 6 source: https://w3reign.com/internet-explorer-edge-css-hacks/ */ .underline-animation .cursor.blink span span { margin-top: 2px; border-left: none; margin-left: 0; -webkit-animation-name: terminal-underline; -moz-animation-name: terminal-underline; -ms-animation-name: terminal-underline; animation-name: terminal-underline; } .bar-animation .cursor.blink span span { -webkit-animation-name: terminal-bar; -moz-animation-name: terminal-bar; -ms-animation-name: terminal-bar; animation-name: terminal-bar; } @supports (-ms-ime-align:auto) { .cmd .clipboard { margin-left: -9999px; } .underline-animation .cursor.blink span span { margin-top: 0; } @keyframes terminal-blink { 0%, 50% { background-color: var(--original-color, #aaa); color: var(--background, #000); } 50.1%, 100% { background-color: var(--background, #000); color: var(--original-color, #aaa); } } @keyframes terminal-bar { 0%, 50% { border-left-color: var(--color, #aaa); } 50.1%, 100% { border-left-color: var(--background, #000); } } @keyframes terminal-underline { 0%, 50% { border-bottom-color: var(--color, #aaa); line-height: 12px; line-height: calc(var(--size, 1) * 12px); } 50.1%, 100% { border-bottom-color: var(--background, #000); line-height: 12px; line-height: calc(var(--size, 1) * 12px); } } } /* IE hack Edge one don't work in IE11 */ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .cmd .clipboard { margin-left: -9999px; } .underline-animation .cursor.blink span span { margin-top: 1px; } @-ms-keyframes terminal-blink { 0%, 50% { background-color: #aaa; color: #000; } 50.1%, 100% { background-color: #000; color: #aaa; } } } .terminal h1::-moz-selection, .terminal h2::-moz-selection, .terminal h3::-moz-selection, .terminal h4::-moz-selection, .terminal h5::-moz-selection, .terminal h6::-moz-selection, .terminal pre::-moz-selection, .terminal td::-moz-selection, .terminal .terminal-output div div::-moz-selection, .terminal .terminal-output div span::-moz-selection, .terminal .terminal-output div div a::-moz-selection, .terminal .terminal-output .raw div::-moz-selection, .cmd div::-moz-selection, .cmd > span::-moz-selection, .cmd > span span::-moz-selection, .cmd > div::-moz-selection, .cmd > div span::-moz-selection, .cmd .prompt span::-moz-selection { background-color: #aaa; color: #000; } /* this don't work in Chrome .terminal tr td::-moz-selection { border-color: #000; } .terminal tr td::selection { border-color: #000; } */ .terminal h1::selection, .terminal h2::selection, .terminal h3::selection, .terminal h4::selection, .terminal h5::selection, .terminal h6::selection, .terminal pre::selection, .terminal td::selection, .terminal .terminal-output div div::selection, .terminal .terminal-output div div a::selection, .terminal .terminal-output div span::selection, .terminal .terminal-output .raw div::selection, .cmd div::selection, .cmd > span::selection, .cmd > span span::selection, .cmd > div::selection, .cmd > div span::selection, .cmd .prompt span::selection { /* * use rgba to fix transparent selection in chrome * http://stackoverflow.com/questions/7224445/css3-selection-behaves-differently-in-ff-chrome */ background-color: rgba(170, 170, 170, 0.99); color: #000; } .terminal .terminal-output div.error, .terminal .terminal-output div.error * { color: red; color: var(--error-color, red); } .tilda { position: fixed; top: 0; left: 0; width: 100%; z-index: 1100; } .ui-dialog-content .terminal { width: 100%; height: 100%; box-sizing: border-box; } .ui-dialog .ui-dialog-content.dterm { padding: 0; } .clear { clear: both; } .terminal a { color: #0F60FF; color: var(--link-color, #0F60FF); } .terminal a:hover { background-color: #0F60FF; background-color: var(--link-color, #0F60FF); color: var(--background, #000); text-decoration: none; } .terminal .terminal-fill { position: absolute; left: 0; top: -100%; width: 100%; height: 100%; margin: 1px 0 0; border: none; opacity: 0.01; pointer-events: none; box-sizing: border-box; } .terminal, .terminal .terminal-fill { padding: 10px; } @supports (--css: variables) { .terminal, .terminal-wrapper *, .cmd, .cmd * { color: var(--color, #aaa); background-color: var(--background, #000); } .terminal span[style*="--length"] { /* * default value for char-width taken from Google Chrome for default font * to silence warning in webpack #371 */ width: calc(var(--length, 1) * var(--char-width, 7.23438) * 1px); display: inline-block; } .terminal, .terminal *, .cmd, .cmd * { font-size: calc(var(--size, 1) * 12px); line-height: calc(var(--size, 1) * 14px); } .terminal .terminal-output > div > div { min-height: calc(var(--size, 1) * 14px); } .terminal .inverted, .cmd .inverted { background-color: var(--color, #aaa); color: var(--background, #000); } .cmd div { min-height: calc(var(--size, 1) * 14px); } .cmd .cursor.blink { color: var(--color, #aaa); background-color: var(--background, #000); } .cmd .cursor.blink span span { -webkit-animation: var(--animation, terminal-blink) 1s infinite linear; -moz-animation: var(--animation, terminal-blink) 1s infinite linear; -ms-animation: var(--animation, terminal-blink) 1s infinite linear; animation: var(--animation, terminal-blink) 1s infinite linear; } .cmd .cursor { height: calc(var(--size, 1) * 14px); min-width: calc(var(--char-width, 7.23438) * 1px); } .terminal h1::-moz-selection, .terminal h2::-moz-selection, .terminal h3::-moz-selection, .terminal h4::-moz-selection, .terminal h5::-moz-selection, .terminal h6::-moz-selection, .terminal pre::-moz-selection, .terminal td::-moz-selection, .terminal .terminal-output div div::-moz-selection, .terminal .terminal-output div span::-moz-selection, .terminal .terminal-output div div a::-moz-selection, .cmd div::-moz-selection, .cmd > span::-moz-selection, .cmd > span span::-moz-selection, .cmd > div::-moz-selection, .cmd > div span::-moz-selection, .cmd .prompt span::-moz-selection { background-color: var(--color, #aaa); color: var(--background, #000); } .terminal h1::selection, .terminal h2::selection, .terminal h3::selection, .terminal h4::selection, .terminal h5::selection, .terminal h6::selection, .terminal pre::selection, .terminal td::selection, .terminal .terminal-output div div::selection, .terminal .terminal-output div div a::selection, .terminal .terminal-output div span::selection, .cmd div::selection, .cmd > span::selection, .cmd > span span::selection, .cmd > div::selection, .cmd > div span::selection, .cmd .prompt span::selection { background-color: var(--color, rgba(170, 170, 170, 0.99)); color: var(--background, #000) !important; } } /* * overwrite css variables that don't work with selection in Edge */ @supports (-ms-ime-align:auto) { .terminal h1::selection, .terminal h2::selection, .terminal h3::selection, .terminal h4::selection, .terminal h5::selection, .terminal h6::selection, .terminal pre::selection, .terminal td::selection, .terminal .terminal-output div div::selection, .terminal .terminal-output div div a::selection, .terminal .terminal-output div span::selection, .cmd div::selection, .cmd > span::selection, .cmd > span span::selection, .cmd > div::selection, .cmd > div span::selection, .cmd .prompt span::selection { background-color: rgba(170, 170, 170, 0.99); color: #000; } } /* PrismJS style overwrites */ .terminal .token.operator, .terminal .token.entity, .terminal .token.variable, .terminal .token.url, .terminal .token.string, .terminal .style .token.string, .terminal .token.token, .cmd .token.operator, .cmd .token.entity, .cmd .token.variable, .cmd .token.url, .cmd .token.string, .cmd .style .token.string, .cmd .token.token { background-color: inherit; }