瀏覽代碼

Scrollbar

Carlo Piovesan 2 年之前
父節點
當前提交
e71bbc97a5
共有 2 個文件被更改,包括 23 次插入1 次删除
  1. 2 1
      index.html
  2. 21 0
      scrollbar.css

+ 2 - 1
index.html

@@ -37,6 +37,7 @@
     <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" id="us-fonts-css" href="https://fonts.googleapis.com/css?family=Montserrat%3A300%2C400%2C500%2C600%2C700&amp;display=swap&amp;ver=6.0.2" media="all">
     <link rel="stylesheet" href="./xterm/xterm.css" />
+    <link rel="stylesheet" href="./scrollbar.css" />
     <script>
         window.networkInterface = {};
     </script>
@@ -156,7 +157,7 @@
     <div style="flex-grow:0; flex-shrink: 0; height:1px; width: 100%; background-color: white;">
     </div>
     <main style="display: flex; flex-direction: row; justify-content: space-between; margin:0; height:100%;">
-      <div style="flex-grow:1; height:100%;display:inline-block;margin:0;" id="console">
+      <div style="flex-grow:1; height:100%;display:inline-block;margin:0;" class="scrollbar" id="console">
       </div>
 
     </main>

+ 21 - 0
scrollbar.css

@@ -0,0 +1,21 @@
+.scrollbar {
+  scrollbar-color: #777 #0000;
+}
+
+.scrollbar *::-webkit-scrollbar {
+  height: 6px;
+  width: 6px;
+  background-color: #0000;
+}
+
+/* Add a thumb */
+.scrollbar *::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  height: 6px;
+  width: 6px;
+    background: #777;
+}
+
+.scrollbar *::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}