diff --git a/src/app/components/app-terminal/app-terminal.component.html b/src/app/components/app-terminal/app-terminal.component.html index a250c31c3..a33890bbf 100644 --- a/src/app/components/app-terminal/app-terminal.component.html +++ b/src/app/components/app-terminal/app-terminal.component.html @@ -1 +1 @@ -
+ diff --git a/src/app/styles/dracula-ansi.scss b/src/app/styles/dracula-ansi.scss deleted file mode 100644 index 0b53d0947..000000000 --- a/src/app/styles/dracula-ansi.scss +++ /dev/null @@ -1,130 +0,0 @@ -.dracula-ansi-theme { - - .ansi-black-fg { - color: #282a36; - } - - .ansi-red-fg { - color: #ff5555; - } - - .ansi-green-fg { - color: #50fa7b; - } - - .ansi-yellow-fg { - color: #f1fa8c; - } - - .ansi-blue-fg { - color: #8be9fd; - } - - .ansi-magenta-fg { - color: #bd93f9; - } - - .ansi-cyan-fg { - color: #8be9fd; - } - - .ansi-white-fg { - color: #f8f8f2; - } - - .ansi-bright-black-fg { - color: #282a36; - } - - .ansi-bright-red-fg { - color: #ff5555; - } - - .ansi-bright-green-fg { - color: #50fa7b; - } - - .ansi-bright-yellow-fg { - color: #f1fa8c; - } - - .ansi-bright-blue-fg { - color: #8be9fd; - } - - .ansi-bright-magenta-fg { - color: #bd93f9; - } - - .ansi-bright-cyan-fg { - color: #8be9fd; - } - - .ansi-bright-white-fg { - color: #f8f8f2; - } - - .ansi-black-bg { - background-color: #282a36; - } - - .ansi-red-bg { - background-color: #ff5555; - } - - .ansi-green-bg { - background-color: #50fa7b; - } - - .ansi-yellow-bg { - background-color: #f1fa8c; - } - - .ansi-blue-bg { - background-color: #8be9fd; - } - - .ansi-magenta-bg { - background-color: #bd93f9; - } - - .ansi-cyan-bg { - background-color: #8be9fd; - } - - .ansi-white-bg { - background-color: #f8f8f2; - } - - .ansi-bright-black-bg { - background-color: #282a36; - } - - .ansi-bright-red-bg { - background-color: #ff5555; - } - - .ansi-bright-green-bg { - background-color: #50fa7b; - } - - .ansi-bright-yellow-bg { - background-color: #f1fa8c; - } - - .ansi-bright-blue-bg { - background-color: #8be9fd; - } - - .ansi-bright-magenta-bg { - background-color: #bd93f9; - } - - .ansi-bright-cyan-bg { - background-color: #8be9fd; - } - - .ansi-bright-white-bg { - background-color: #f8f8f2; - } -} diff --git a/src/app/styles/terminal.sass b/src/app/styles/terminal.sass index aa210205a..d4561c551 100644 --- a/src/app/styles/terminal.sass +++ b/src/app/styles/terminal.sass @@ -1,20 +1,20 @@ -@import 'dracula-ansi' +@import 'terminal/material-dark-ansi' +@import 'terminal/batman-ansi' .window-terminal-container position: relative display: block - color: #f8f8f2 + color: #e5e5e5 margin: 0 font-family: monaco, monospace font-size: 12px padding: 0 height: 400px - background: darken(#282a36, 10) + background: #111111 border-radius: 4px box-shadow: 1px 2px 10px rgba($background, 0.7) border: 1px solid $divider - overflow-x: hidden - overflow-y: scroll + overflow: hidden &.large height: 700px diff --git a/src/app/styles/terminal/batman-ansi.scss b/src/app/styles/terminal/batman-ansi.scss new file mode 100644 index 000000000..8a259f7d8 --- /dev/null +++ b/src/app/styles/terminal/batman-ansi.scss @@ -0,0 +1,66 @@ +.batman-ansi-theme { + + .ansi-black-fg, .ansi-black-bg { + color: #1b1d1e; + } + + .ansi-red-fg, .ansi-red-bg { + color: #e6dc44; + } + + .ansi-green-fg, .ansi-green-bg { + color: #c8be46; + } + + .ansi-yellow-fg, .ansi-yellow-bg { + color: #f4fd22; + } + + .ansi-blue-fg, .ansi-blue-bg { + color: #737174; + } + + .ansi-magenta-fg, .ansi-magenta-bg { + color: #747271; + } + + .ansi-cyan-fg, .ansi-cyan-bg { + color: #62605f; + } + + .ansi-white-fg, .ansi-white-bg { + color: #c6c5bf; + } + + .ansi-bright-black-fg, .ansi-bright-black-bg { + color: #505354; + } + + .ansi-bright-red-fg, .ansi-bright-red-bg { + color: #fff78e; + } + + .ansi-bright-green-fg, .ansi-bright-green-bg { + color: #fff27d; + } + + .ansi-bright-yellow-fg, .ansi-bright-yellow-bg { + color: #feed6c; + } + + .ansi-bright-blue-fg, .ansi-bright-blue-bg { + color: #919495; + } + + .ansi-bright-magenta-fg, .ansi-bright-magenta-bg { + color: #9a9a9d; + } + + .ansi-bright-cyan-fg, .ansi-bright-cyan-bg { + color: #a3a3a6; + } + + .ansi-bright-white-fg, .ansi-bright-white-bg { + color: #dadbd6; + } +} diff --git a/src/app/styles/terminal/material-dark-ansi.scss b/src/app/styles/terminal/material-dark-ansi.scss new file mode 100644 index 000000000..b890455b0 --- /dev/null +++ b/src/app/styles/terminal/material-dark-ansi.scss @@ -0,0 +1,66 @@ +.material-dark-ansi-theme { + + .ansi-black-fg, .ansi-black-bg { + color: #212121; + } + + .ansi-red-fg, .ansi-red-bg { + color: #b7141f; + } + + .ansi-green-fg, .ansi-green-bg { + color: #457b24; + } + + .ansi-yellow-fg, .ansi-yellow-bg { + color: #f6981e; + } + + .ansi-blue-fg, .ansi-blue-bg { + color: #134eb2; + } + + .ansi-magenta-fg, .ansi-magenta-bg { + color: #560088; + } + + .ansi-cyan-fg, .ansi-cyan-bg { + color: #0e717c; + } + + .ansi-white-fg, .ansi-white-bg { + color: #efefef; + } + + .ansi-bright-black-fg, .ansi-bright-black-bg { + color: #424242; + } + + .ansi-bright-red-fg, .ansi-bright-red-bg { + color: #e83b3f; + } + + .ansi-bright-green-fg, .ansi-bright-green-bg { + color: #7aba3a; + } + + .ansi-bright-yellow-fg, .ansi-bright-yellow-bg { + color: #ffea2e; + } + + .ansi-bright-blue-fg, .ansi-bright-blue-bg { + color: #54a4f3; + } + + .ansi-bright-magenta-fg, .ansi-bright-magenta-bg { + color: #aa4dbc; + } + + .ansi-bright-cyan-fg, .ansi-bright-cyan-bg { + color: #26bbd1; + } + + .ansi-bright-white-fg, .ansi-bright-white-bg { + color: #d9d9d9; + } +}