Merge pull request #1 from rhamilto/jwforres-xterm

Adding styling for scrollbar
kubernetes-ui · Jul 11, 2017 · 17d7720 · 17d7720
2 parents 251d090 + 1672a13
commit 17d7720
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 2 deletions.
diff --git a/container-terminal.css b/container-terminal.css
@@ -11,7 +11,7 @@ kubernetes-container-terminal .terminal {
     outline: medium none;
     border: 3px solid black;
     line-height: 1em;
-    display: inline-block;    
+    display: inline-block;
 }
 
 @media (min-width: 568px) {
@@ -43,6 +43,30 @@ kubernetes-container-terminal .terminal .xterm-viewport {
     overflow-y: auto;
 }
 
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar {
+  height: 10px;
+  overflow: visible;
+  width: 15px;
+}
+
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar-thumb {
+    background-color: rgba(255,255,255,.25);
+    box-shadow: inset 1px 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(255,255,255,.07);
+}
+
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar-thumb:active,
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(255,255,255,.35);
+}
+
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar-track {
+  background: transparent;
+}
+
 /* https://github.com/patternfly/patternfly/pull/135 */
 .spinner-white {
     border-bottom: 4px solid rgba(255, 255, 255, 0.25) !important;

diff --git a/dist/container-terminal.css b/dist/container-terminal.css
@@ -11,7 +11,7 @@ kubernetes-container-terminal .terminal {
     outline: medium none;
     border: 3px solid black;
     line-height: 1em;
-    display: inline-block;    
+    display: inline-block;
 }
 
 @media (min-width: 568px) {
@@ -43,6 +43,30 @@ kubernetes-container-terminal .terminal .xterm-viewport {
     overflow-y: auto;
 }
 
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar {
+  height: 10px;
+  overflow: visible;
+  width: 15px;
+}
+
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar-thumb {
+    background-color: rgba(255,255,255,.25);
+    box-shadow: inset 1px 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(255,255,255,.07);
+}
+
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar-thumb:active,
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(255,255,255,.35);
+}
+
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar-track {
+  background: transparent;
+}
+
 /* https://github.com/patternfly/patternfly/pull/135 */
 .spinner-white {
     border-bottom: 4px solid rgba(255, 255, 255, 0.25) !important;