jquery.terminal.css

/*!
 *       __ _____                     ________                              __
 *      / // _  /__ __ _____ ___ __ _/__  ___/__ ___ ______ __ __  __ ___  / /
 *  __ / // // // // // _  // _// // / / // _  // _//     // //  \/ // _ \/ /
 * /  / // // // // // ___// / / // / / // ___// / / / / // // /\  // // / /__
 * \___//____ \\___//____//_/ _\_  / /_//____//_/ /_/ /_//_//_/ /_/ \__\_\___/
 *           \/              /____/                              version DEV
 * http://terminal.jcubic.pl
 *
 * This file is part of jQuery Terminal.
 *
 * Copyright (c) 2011-2021 Jakub Jankiewicz <https://jcubic.pl/me>
 * Released under the MIT license
 *
 * Date: Tue, 21 Sep 2021 15:37:39 +0000
 */

.terminal .terminal-output .format, .cmd .format,
.cmd-prompt, .cmd-prompt div {
    display: inline-block;
}
.terminal h1, .terminal h2, .terminal h3, .terminal h4, .terminal h5, .terminal h6, .terminal pre, .cmd {
    margin: 0;
}
.cmd .cmd-clipboard {
    position: absolute !important;
    left: -16px !important;
    top: 0 !important;
    width: 16px !important;
    height: 16px !important;
    background: transparent !important;
    border: none !important;
    color: transparent !important;
    outline: none !important;
    padding: 0 !important;
    resize: none !important;
    z-index: 1000 !important;
    overflow: hidden !important;
    white-space: pre !important;
    text-indent: -9999em !important; /* better cursor hiding for Safari and IE */
    top: calc(var(--cursor-line, 0) * var(--size, 1) * 14px) !important;
}

.cmd span.cmd-end-line,
.cmd span.cmd-end-line span,
.cmd div.cmd-end-line span[data-text]:last-child,
.cmd div.cmd-end-line span[data-text]:last-child span,
.cmd textarea,
.cmd .cursor + span:empty {
    -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 {
    position: relative;
    line-height: initial;
    overflow-y: auto;
}
terminal.terminal-temp {
    visibility: hidden;
}
.terminal {
    contain: content;
}
body.terminal {
    min-height: 100vh;
    height: 100%;
}
html {
    height: 100%;
}
body.terminal, body.full-screen-terminal {
    margin: 0;
    height: 100%;
}
body.full-screen-terminal .terminal {
    height: 100%;
}
.terminal > div.terminal-fill {
    min-height: 100%;
    height: 100%;
}
.terminal > .terminal-resizer, .terminal > .terminal-font .terminal-resizer {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
    height: 100% !important;
    border: none !important;
    padding: 0 !important;
    width: 100% !important;
}
.cmd {
    padding: 0;
    position: relative;
    width: 100%;
    z-index: 300;
}
.terminal .cmd, .terminal .cmd div {
    background: transparent !important;
}
.terminal a[tabindex="1000"],
.terminal a[tabindex="1000"]:active,
.terminal a[tabindex="1000"]:focus {
    outline: none;
}
.terminal .inverted, .cmd.cmd.cmd .inverted,
.terminal .terminal-inverted, .cmd.cmd.cmd .cmd-inverted {
    background-color: #aaa !important;
    color: #000 !important;
}
.terminal .terminal-output > :not(.raw) a[href], .cmd a[href] {
    color: #0F60FF;
    color: var(--link-color, #0F60FF);
    cursor: pointer;
}
.cmd a[href]:not(.terminal-inverted),
.terminal .terminal-output > :not(.raw) a[href]:not(.terminal-inverted) {
    --color: var(--link-color, #0F60FF);
}
.terminal .terminal-output > :not(.raw) a[href].terminal-inverted {
    background: var(--color, #ccc);
}
.terminal .terminal-output > :not(.raw) a[href]:hover, .cmd a[href]:hover {
    background-color: #0F60FF;
    background-color: var(--link-color, #0F60FF) !important;
    color: #000;
    color: var(--background, #000) !important;
    text-decoration: none;
}
.terminal .terminal-output > :not(.raw) a[href] span,
.cmd a[href] span {
    /*
     * shorter and simple solution
     * it's hard to overwrite long :not selector (:not(a span) don't work)
     */
    color: #0F60FF !important;
    --color: var(--link-color, #0F60FF);
    color: var(--link-color, #0F60FF) !important;
    text-decoration: underline;
}

.terminal .terminal-output > :not(.raw) a[href]:hover span,
.cmd a[href]:hover span {
    background-color: #0F60FF !important;
    background-color: var(--link-color, #0F60FF) !important;
    color: #000 !important;
    color: var(--background, #000) !important;
    text-decoration: none;
}
.cmd .cmd-cursor {
    display: inline-block;
}
.cmd .cmd-cursor-line > span,
.cmd .cmd-cursor-line img {
    display: inline-block;
}
.cmd .cmd-cursor.cmd-blink > span[data-text]:not(.emoji):not(.fa):not(.far):not(.fas) span,
.cmd .cmd-cursor.cmd-blink a,
.cmd .cmd-cursor.cmd-blink .fa,
.cmd .cmd-cursor.cmd-blink .far,
.cmd .cmd-cursor.cmd-blink .fas,
.cmd .cmd-cursor .emoji {
        -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 .cmd-inverted {
    box-shadow: -2px 0 0 -1px #aaa;
    box-shadow: -2px 0 0 -1px var(--original-color, #aaa);
}
.terminal, .terminal .terminal-output > div > div, .cmd .cmd-prompt {
    display: block;
    height: auto;
}
.terminal .terminal-output > div:not(.raw) div {
    white-space: nowrap;
}
.cmd .cmd-prompt > span, .cmd .cmd-prompt:empty {
    float: left;
}
.cmd [data-text] span, .terminal [data-text] span {
    display: inline-block;
}
.terminal-ouput span[style*="width"] {
    min-height: 14px;
    min-height: calc(var(--size, 1) * 14px);
}
.terminal .terminal-output > :not(.raw) > div, .cmd div {
    line-height: calc((var(--size) * 14px) + 1px);
}
.cmd .cmd-prompt span.fa::before,
.cmd .cmd-prompt span.fab::before,
.cmd .cmd-prompt span.fad::before,
.cmd .cmd-prompt span.fal::before,
.cmd .cmd-prompt span.far::before,
.cmd .cmd-prompt span.fas {
    position: relative;
    top: 2px;
}
.terminal,
.terminal-output > :not(.raw),
.terminal-output > :not(.raw) span:not(.fas):not(.far):not(.fa),
.terminal-output > :not(.raw) a,
.cmd,
.cmd span:not(.fas):not(.far):not(.fa) {
    font-family: monospace;
    font-family: var(--font, monospace);
}
.terminal,
.cmd {
    font-size: 12px;
}
.terminal-output > div:not(.raw) div::before {
    content: '\0200B';
    width: 0;
    float: left;
    display: block;
}
.terminal, terminal-output > div:not(.raw) div > span:not(.token):not(.inverted):not(.terminal-inverted):not(.cmd-inverted):not(.terminal-error):not(.emoji),
.cmd span[data-text]:not(.cmd-inverted):not(.token):not(.emoji) {
    color: #aaa;
    background-color: #000;
}
.terminal span[data-text] span, .cmd span[data-text] span {
    text-decoration: inherit;
}

.terminal .ansi > div {
    line-height: 13px !important;
    line-height: calc(var(--size, 1) * 13px) !important;
}
.cmd span.cmd-prompt, .cmd .cmd-prompt span {
    background-color: transparent !important;
}
.terminal-output .emoji, .cmd .emoji {
    height: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    color: transparent;
    position: relative;
}
.terminal .terminal-output .fa span,
.terminal .terminal-output .fas span,
.terminal .terminal-output .far span,
.cmd .fa span,
.cmd .fas span,
.cmd .far span {
    background: transparent !important;
    color: transparent !important;
    clip: rect(1px,1px,1px,1px);
    position: absolute;
}
.terminal-output .emoji,
.terminal-output .emoji span,
.cmd .emoji, .cmd .emoji span {
    display: inline-block;
    width: 2ch;
}
.terminal, .cmd {
    box-sizing: border-box;
}
.cmd .cmd-cursor span:not(.token):not(.inverted) {
    color: inherit;
    background-color: inherit;
}
.cmd .emoji.emoji.emoji.emoji, .cmd .emoji.emoji.emoji.emoji span {
    color: transparent;
    background-color: transparent;
}
.cmd .cmd-cursor * {
    background-color: transparent;
}
.terminal span[style*="width"] span,
.cmd span[style*="width"] span {
    width: inherit;
}
.cmd div {
    clear: both;
}
.cmd .cmd-prompt + div {
    clear: right;
}
terminal .terminal-output > div {
    margin-top: -1px;
}
.terminal-output > div.raw > div * {
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.terminal .terminal-font {
    position: absolute;
    float: left;
    font-size: inherit;
    line-height: inherit;
    top: -100%;
    left: 0;
    margin-bottom: 1px;
}
.cmd > span:not(.cmd-prompt) {
    float: left;
}
.cmd .cmd-prompt span.cmd-line {
    display: block;
    float: none;
}
.terminal table {
    border-collapse: collapse;
}
.terminal td {
    border: 1px solid #aaa;
}
.cmd span[data-text]:not(.emoji):not(.fa):not(.fas):not(.far) span {
    background-color: inherit;
    color: inherit;
}
/* fix for underline on middle line */
.cmd [role="presentation"].cmd-cursor-line {
    position: relative;
    z-index: 100;
}
/* prompt above cursor line */
.cmd .cmd-prompt {
    position: relative;
    z-index: 200;
}
.cmd [role="presentation"]:not(.cmd-cursor-line) {
    overflow: hidden;
}
/*
 * 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);
}
.cmd a[href] {
    --original-color: var(--link-color, #0F60FF);
}
/* DEFAULT ANIMATION */
@-webkit-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;
        /* original background is set in emoji that need different style */
        color: inherit;
        color: var(--original-background, var(--original-color, #aaa));
    }
}
@-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;
        color: var(--original-background, var(--original-color, #aaa));
    }
}
@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;
        color: var(--original-background, var(--original-color, #aaa));
    }
}
/* GLOW ANIMATION */
@-webkit-keyframes terminal-glow {
    0%, 50% {
        background-color: #aaa;
        background-color: var(--original-color, #aaa);
        color: #000;
        color: var(--background, #000);
        box-shadow: 0 0 3px #aaa;
        -webkit-box-shadow: 0 0 3px var(--color, #aaa);
        box-shadow: 0 0 3px var(--color, #aaa);
    }
    50.1%, 100% {
        background-color: inherit;
        color: inherit;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
}
@-moz-keyframes terminal-glow {
    0%, 50% {
        background-color: #aaa;
        background-color: var(--original-color, #aaa);
        color: #000;
        color: var(--background, #000);
        box-shadow: 0 0 3px #aaa;
        -moz-box-shadow: 0 0 3px var(--color, #aaa);
        box-shadow: 0 0 3px var(--color, #aaa);
    }
    50.1%, 100% {
        background-color: inherit;
        color: inherit;
        -moz-box-shadow: none;
        box-shadow: none;
    }
}
@keyframes terminal-glow {
    0%, 50% {
        background-color: #aaa;
        background-color: var(--original-color, #aaa);
        color: #000;
        color: var(--background, #000);
        box-shadow: 0 0 3px #aaa;
        box-shadow: 0 0 3px var(--color, #aaa);
    }
    50.1%, 100% {
        background-color: inherit;
        color: inherit;
        box-shadow: none;
    }
}
/* BAR ANIMATION */
@-webkit-keyframes terminal-bar {
  0%, 50% {
      box-shadow: -2px 0 0 -1px #aaa;
      box-shadow: -2px 0 0 -1px var(--original-color, #aaa);
  }
  50.1%, 100% {
      box-shadow: none;
  }
}
@-moz-keyframes terminal-bar {
  0%, 50% {
      box-shadow: -2px 0 0 -1px #aaa;
      box-shadow: -2px 0 0 -1px var(--original-color, #aaa);
  }
  50.1%, 100% {
      box-shadow: none;
  }
}
@keyframes terminal-bar {
  0%, 50% {
      box-shadow: -2px 0 0 -1px #aaa;
      box-shadow: -2px 0 0 -1px var(--original-color, #aaa);
  }
  50.1%, 100% {
      box-shadow: none;
  }
}
/* UNDERLINE ANIMATION */
@-webkit-keyframes terminal-underline {
  0%, 50% {
      box-shadow: 0 2px 0 #aaa;
      box-shadow: 0 2px 0 var(--original-color, #aaa);
  }
  50.1%, 100% {
      box-shadow: none;
  }
}
@-moz-keyframes terminal-underline {
  0%, 50% {
      box-shadow: 0 2px 0 #aaa;
      box-shadow: 0 2px 0 var(--original-color, #aaa);
  }
  50.1%, 100% {
      box-shadow: none;
  }
}
@keyframes terminal-underline {
  0%, 50% {
      box-shadow: 0 2px 0 #aaa;
      box-shadow: 0 2px 0 var(--original-color, #aaa);
  }
  50.1%, 100% {
      box-shadow: none;
  }
}
.underline-animation .cmd .cmd-cursor.cmd-blink > span[data-text]:not(.emoji):not(.fa):not(.far):not(.fas) span,
.underline-animation .cmd .cmd-cursor.cmd-blink a,
.underline-animation .cmd .cmd-cursor.cmd-blink .fa,
.underline-animation .cmd .cmd-cursor.cmd-blink .far,
.underline-animation .cmd .cmd-cursor.cmd-blink .fas,
.underline-animation .cmd .cmd-cursor .emoji {
    -webkit-animation-name: terminal-underline;
       -moz-animation-name: terminal-underline;
        -ms-animation-name: terminal-underline;
            animation-name: terminal-underline;
}
.glow-animation .cmd .cmd-cursor.cmd-blink > span[data-text]:not(.emoji):not(.fa):not(.far):not(.fas) span,
.glow-animation .cmd .cmd-cursor.cmd-blink a,
.glow-animation .cmd .cmd-cursor.cmd-blink .fa,
.glow-animation .cmd .cmd-cursor.cmd-blink .far,
.glow-animation .cmd .cmd-cursor.cmd-blink .fas,
.glow-animation .cmd .cmd-cursor .emoji {
    -webkit-animation-name: terminal-glow;
       -moz-animation-name: terminal-glow;
        -ms-animation-name: terminal-glow;
            animation-name: terminal-glow;
}
.bar-animation .cmd .cmd-cursor.cmd-blink > span[data-text]:not(.emoji):not(.fa):not(.far):not(.fas) span,
.bar-animation .cmd .cmd-cursor.cmd-blink a,
.bar-animation .cmd .cmd-cursor.cmd-blink .fa,
.bar-animation .cmd .cmd-cursor.cmd-blink .far,
.bar-animation .cmd .cmd-cursor.cmd-blink .fas,
.bar-animation .cmd .cmd-cursor .emoji {
    -webkit-animation-name: terminal-bar;
       -moz-animation-name: terminal-bar;
        -ms-animation-name: terminal-bar;
            animation-name: terminal-bar;
}
/*
   Internet Explorer & Edge *, Safari ≤ 6
   source: https://w3reign.com/internet-explorer-edge-css-hacks/
*/


@supports (-ms-ime-align:auto) {
    .cmd .cmd-clipboard {
        margin-left: -9999px;
    }
    @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 .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::-moz-selection,
.terminal .terminal-output div div::-moz-selection,
.terminal .terminal-output div div a::-moz-selection,
.terminal .terminal-output span[data-text]::-moz-selection,
.terminal .terminal-output span[data-text]:not(.far):not(.fa):not(.fas) span::-moz-selection,
.terminal .terminal-output .raw div::-moz-selection,
.cmd span[data-text]::-moz-selection,
.cmd span[data-text]:not(.far):not(.fa):not(.fas) 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::selection,
.terminal .terminal-output div div::selection,
.terminal .terminal-output div div a::selection,
.terminal .terminal-output span[data-text]::selection,
.terminal .terminal-output span[data-text]:not(.far):not(.fa):not(.fas) span::selection,
.terminal .terminal-output .raw div::selection,
.cmd span[data-text]:not(.far):not(.fa):not(.fas) 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-output .emoji::-moz-selection,
.terminal-output .emoji span::-moz-selection,
.cmd .emoji::-moz-selection,
.cmd .emoji span::-moz-selection,
.cmd textarea::-moz-selection {
    background-color: transparent !important;
    color: transparent !important;
}
.terminal-output .emoji::selection,
.terminal-output .emoji span::selection,
.cmd .emoji span::selection,
.cmd .emoji::selection,
.cmd textarea::selection {
    background-color: transparent !important;
    color: transparent !important;
}

.terminal .terminal-output > :not(.raw) .terminal-error,
.terminal .terminal-output > :not(.raw) .terminal-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 .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, .cmd-editable {
    padding: 10px;
}
.cmd-editable {
    padding-top: 0;
}
/* padding added as margin to .cmd to fix FireFox bug see: https://stackoverflow.com/q/29986977/387194 */
.terminal {
    padding-bottom: 0;
    /* conditionals in CSS ref: https://www.kizu.ru/conditions-for-css-variables/ */
    /* --glow: 0; */
    text-shadow: 0 0 calc(var(--glow) * 5px) var(--color, #ccc);
}
.terminal .terminal-output > :not(.raw) .error,
.terminal .terminal-output > :not(.raw) .error * {
    text-shadow: 0 0 calc(var(--glow) * 5px) var(--color);
}
.terminal .terminal-output > :not(.raw) a[href] {
    text-shadow: 0 0 calc(var(--glow) * 5px) var(--color);
}
.terminal .cmd {
    margin-bottom: 10px;
    position: relative;
}
.terminal .partial, .terminal .partial > div {
    display: inline-block;
}
@supports (--css: variables) {
    .terminal,
    .terminal-output > :not(.raw) span[data-text]:not(.token):not(.inverted):not(.terminal-inverted):not(.cmd-inverted):not(.terminal-error):not(.emoji),
    .terminal-output > :not(.raw) a,
    .terminal-output > :not(.raw) div,
    .cmd,
    .cmd span[data-text]:not(.cmd-inverted):not(.token):not(.emoji),
    .cmd div {
        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-output > :not(.raw) span,
    .terminal-output > :not(.raw) a,
    .terminal-output > :not(.raw) div,
    .cmd,
    .cmd span,
    .cmd div {
        font-size: calc(var(--size, 1) * 12px);
    }
    .terminal-output .emoji, .cmd .emoji {
        height: calc(var(--size, 1) * 12px);
    }
    .cmd .clipboard {
        top: calc(var(--size, 1) * 14 * var(--cursor-line, 0) * 1px);
    }
    .terminal .inverted, .cmd.cmd.cmd .inverted, .cmd.cmd.cmd .cmd-inverted {
        background-color: var(--color, #aaa) !important;
        color: var(--background, #000) !important;
    }
    .cmd .cmd-cursor.cmd-blink {
        color: var(--color, #aaa);
        background-color: var(--background, #000);
    }
    .cmd .cmd-cursor.cmd-blink > span[data-text]:not(.emoji):not(.fa):not(.far):not(.fas) span,
    .cmd .cmd-cursor.cmd-blink a,
    .cmd .cmd-cursor.cmd-blink .fa,
    .cmd .cmd-cursor.cmd-blink .far,
    .cmd .cmd-cursor.cmd-blink .fas,
    .cmd .cmd-cursor.cmd-blink .emoji {
        -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;
        --original-background: inherit;
    }
    .cmd .cmd-cursor.cmd-blink .emoji span {
        color: transparent;
        background: transparent;
    }
    .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::-moz-selection,
    .terminal .terminal-output div div::-moz-selection,
    .terminal .terminal-output div div a::-moz-selection,
    .terminal .terminal-output span[data-text]::-moz-selection,
    /*
     * font icons (fontawesome) don't render selection we make emoji the same becuase,
     * selection on emoji looks weird
     */
    .terminal .terminal-output span[data-text]:not(.far):not(.fa):not(.fas):not(.emoji) span::-moz-selection,
    .terminal .terminal-output .raw div::-moz-selection,
    .cmd span[data-text]:not(.far):not(.fa):not(.fas):not(.emoji) span::-moz-selection {
        background-color: var(--color, #aaa);
        color: var(--background, #000);
    }
    .terminal .terminal-output div div a::-moz-selection {
        background-color: var(--link-color, rgba(15, 96, 255, 0.99)) !important;
        color: var(--background, #000) !important;
    }
    .terminal .terminal-output div div a:hover::-moz-selection {
        background-color: var(--link-color, rgba(2, 50, 144, 0.99)) !important;
    }
    .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::selection,
    .terminal .terminal-output div div::selection,
    .terminal .terminal-output div div a::selection,
    .terminal .terminal-output span[data-text]:not(.emoji)::selection,
    .terminal .terminal-output span[data-text]:not(.far):not(.fa):not(.fas):not(.emoji) span::selection,
    .terminal .terminal-output .raw div::selection,
    .cmd span[data-text]:not(.far):not(.fa):not(.fas):not(.emoji) span::selection {
        background-color: var(--color, rgba(170, 170, 170, 0.99)) !important;
        color: var(--background, #000) !important;
    }
    .terminal .terminal-output div div a::selection {
        background-color: var(--link-color, rgba(15, 96, 255, 0.99)) !important;
        color: var(--background, #000) !important;
    }
    .terminal .terminal-output div div a:hover::selection {
        background-color: var(--link-color, rgba(2, 50, 144, 0.99)) !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,
    .cmd span[data-text]::selection {
        background-color: rgba(170, 170, 170, 0.99);
        color: #000;
    }
}
/* PrismJS style overwrites */
.terminal .token.token,
.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;
}
/* FireFox hack
@supports (-moz-animation: foo) {
    .terminal,
    .terminal .terminal-output > :not(.raw) span,
    .terminal .terminal-output > :not(.raw) a,
    .terminal .terminal-output > :not(.raw) div,
    .cmd,
    .cmd span,
    .cmd div {
        line-height: calc(var(--size, 1) * 13px);
    }
}
*/
/* style for autocomplete menu */
.cmd .cursor-wrapper ul {
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;
    position: absolute;
    top: 14px;
    left: 0;
}
.cmd .cursor-wrapper li {
    cursor: pointer;
    white-space: nowrap;
}
.cmd .cursor-wrapper li:hover {
    background: #aaa;
    color: #000;
}
.cursor-wrapper {
    position: relative;
}
/* images */
.terminal-output div[style*="100%;"] {
    overflow: hidden;
}
.terminal-output img {
    display: block;
}
.cmd img {
    height: 14px;
    height: calc(var(--size, 1) * 14px);
    border: 1px solid transparent;
}
.cmd-cursor img {
    border-color: #ccc;
    border-color: var(--color, #ccc);
}
.terminal-output svg.terminal-broken-image {
    height: calc(var(--size, 1) * 14px);
}
.terminal-output svg.terminal-broken-image use {
    fill: var(--color, #ccc);
}
.terminal-error {
    --color: var(--error-color);
}
.terminal-glow {
    --animation: terminal-glow;
}
.terminal-glow span[data-text],
.terminal-glow .cmd-prompt > span,
.terminal-glow a[data-text],
.terminal-glow [data-text] span,
.terminal-glow .terminal-output > div span,
.terminal-glow .terminal-output > div a[href] {
    text-shadow: 1px 1px 5px #ccc;
    text-shadow: 1px 1px 5px var(--color, #ccc);
}
/* is_bottom detection */
.terminal-scroll-marker {
    position: relative;
    height: 1px;
    margin-top: -1px;
    z-index: 100;
}
.terminal-scroll-marker div {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
}
.terminal-less {
    touch-action: none;
    overscroll-behavior-y: contain;
}
/*
 * mobile scroll fix, with help from StackOverflow
 * https://stackoverflow.com/a/60535925/387194
 */
.terminal-mobile.terminal-less .terminal-wrapper {
    pointer-events: none;
}
.terminal-mobile.terminal-less .terminal-output a, .cmd-editable {
    pointer-events: visible;
}
.cmd-editable::before {
    content: attr(data-cmd-prompt);
    display: inline-block;
}
.cmd-editable {
    position: absolute;
    top: 0;
    top: calc(var(--terminal-y, var(--cmd-y, 0)) + var(--terminal-scroll, 0) * 1px);
    right: 0;
    left: 0;
    bottom: 0;
    bottom: calc(var(--terminal-scroll, 0) * -1px);
    z-index: 500;
    color: transparent;
    background: transparent;
    opacity: 0.01;
}
.terminal::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background: var(--background, #000);
}
.terminal::-webkit-scrollbar-thumb {
    background: var(--color, #aaa);
}
.terminal::-webkit-scrollbar-thumb:hover {
    background: var(--color, #aaa);
}
.terminal {
    scrollbar-color: #aaa #000;
    scrollbar-color: var(--color, #aaa) var(--background, #000);
    scrollbar-width: thin;
}
.cmd .token {
    --original-color: var(--color);
}
.terminal .terminal-blink, .cmd .terminal-blink {
    animation: terminal-ansi-blink 1s steps(2, start) infinite;
    -webkit-animation: terminal-ansi-blink 1s steps(2, start) infinite;
}
@keyframes terminal-ansi-blink {
    to {
        color: var(--background);
    }
}
@-webkit-keyframes terminal-ansi-blink {
    to {
        color: var(--background);
     }
}