From 2c34c5230b4db42f5acc9b9fb16eac4760450584 Mon Sep 17 00:00:00 2001 From: Shuanglei Tao Date: Wed, 22 Feb 2017 23:45:40 +0800 Subject: [PATCH] Add padding for terminal container --- html/css/app.css | 59 +++++++++++++++++++++++++++++++++--------------- src/index.html | 2 +- 2 files changed, 42 insertions(+), 19 deletions(-) diff --git a/html/css/app.css b/html/css/app.css index 1766e54..170c67c 100644 --- a/html/css/app.css +++ b/html/css/app.css @@ -1,31 +1,54 @@ -body, #terminal-container { - position: absolute; +html, body { height: 100%; - width: 100%; + min-height: 100%; margin: 0; - padding: 0; - font-size:15px; - font-variant-ligatures: none; - -webkit-font-smoothing: antialiased; + overflow: hidden; +} + +#terminal-container { + width: auto; + height: 100%; + margin: 0 auto; + padding: 5px 0 0 8px; background-color: #101010; } .terminal { background-color: #101010; color: #f0f0f0; - font-family: "DejaVu Sans Mono",Menlo,Consolas,"Liberation Mono",Courier,monospace; - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - width: auto; - height: auto; + font-size: 10pt; + font-family: Menlo,Consolas,"DejaVu Sans Mono","Liberation Mono",Courier,monospace; + font-variant-ligatures: none; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; } .terminal .xterm-viewport { - background-color: #101010; - overflow-x: hidden; + background-color: rgba(121, 121, 121, 0); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + transition: background-color 800ms linear; +} + +.terminal .xterm-viewport::-webkit-scrollbar { + width: 10px; +} + +.terminal .xterm-viewport::-webkit-scrollbar-track { + opacity: 0; +} + +.terminal .xterm-viewport::-webkit-scrollbar-thumb { + background-color: rgba(121, 121, 121, 0.4); +} + +.terminal .xterm-viewport::-webkit-scrollbar-thumb:hover { + transition: opacity 0ms linear; + background-color: rgba(100, 100, 100, .7); +} + +.terminal .xterm-viewport::-webkit-scrollbar-thumb:window-inactive { + background-color: inherit; } .terminal .terminal-cursor { @@ -47,4 +70,4 @@ body, #terminal-container { background-color: transparent; color: #f0f0f0; } -} \ No newline at end of file +} diff --git a/src/index.html b/src/index.html index 056f1bc..910a38f 100644 --- a/src/index.html +++ b/src/index.html @@ -6,7 +6,7 @@ ttyd - Terminal - + -- 2.43.4