[beast: 38/70] EBEAST: adjust webkit-scrollbar to match dark theme

From: Tim Janik <timj src gnome org>
To: commits-list gnome org
Cc:
Subject: [beast: 38/70] EBEAST: adjust webkit-scrollbar to match dark theme
Date: Tue, 28 Mar 2017 23:24:54 +0000 (UTC)
commit 3a9afabe615f0c44f93e5f681f6cfba5c135e76e
Author: Tim Janik <timj gnu org>
Date:   Sun Mar 5 23:52:47 2017 +0100

    EBEAST: adjust webkit-scrollbar to match dark theme
    
    Signed-off-by: Tim Janik <timj gnu org>

 ebeast/app.less   |   19 ++++++++++++++++---
 ebeast/index.html |    2 +-
 2 files changed, 17 insertions(+), 4 deletions(-)
---
diff --git a/ebeast/app.less b/ebeast/app.less
index bfd24ce..40141a7 100644
--- a/ebeast/app.less
+++ b/ebeast/app.less
@@ -24,14 +24,27 @@ BrowserWindowDefaults               { ; /* used by main.js */
                                  backgroundColor:          @theme-background; /* #rrggbb needed */
                                  defaultFontSize:          14;              /* int needed */
                                  defaultMonospaceFontSize: 13;              /* int needed */ }
-html                           { font-family: sans; height: 100%; width: 100%; }
-body                           { font: inherit; padding: 0; margin: 0; color: @theme-foreground;
-                                 overflow: hidden; width: 100vw; height: 100vh;
+html                           { width: 100vw; height: 100vh; font-family: sans; }
+body                           { width: 100%; height: 100%; overflow: hidden; font: inherit;
+                                 padding: 0; margin: 0; color: @theme-foreground;
                                  background-color: @theme-background;
                                  background-image: @panel-background-lg; }
 body.window-inactive           { color: fade(@theme-foreground, 80%); }
 *                              { box-sizing: border-box; text-overflow: ellipsis; }
 
+/* == Scrollbars == */
+::-webkit-scrollbar            { height: 5px; width: 5px; background: #000; }
+::-webkit-scrollbar-corner     { background: rgba(0, 0, 0, 0); }
+::-webkit-scrollbar-track      { background-size: 2px 2px;
+                                 background-image: linear-gradient(45deg,
+                                                                   #111 0%, #444 50%,
+                                                                   #333 50%, #aaa 100%); }
+::-webkit-scrollbar-thumb      { background: @glow-control; -webkit-border-radius: 0.1ex;
+                                 -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75); }
+::-webkit-scrollbar-thumb:window-inactive      { background: #333;
+                                                 /* background: fade(@glow-control, 20%); */
+                                                 -webkit-box-shadow: none; }
+
 /* == Resets == */
 input, textarea, keygen, select,
 button                         { font: inherit; }
diff --git a/ebeast/index.html b/ebeast/index.html
index 5132406..cf4a22d 100644
--- a/ebeast/index.html
+++ b/ebeast/index.html
@@ -11,7 +11,7 @@
 </head>
 <body>
 
-  <div style="margin: 1em auto; display: table">
+  <div style="margin: 1em auto; overflow: auto; max-height: 100%; max-width: 100%;">
     <h1 style="float:right; margin-top: 0">BEAST/BSE</h1>
     <style>
      table.version-table th { text-align: right; padding-right: .5em; }
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]