From be4c13aacdfffdb72b4a3a980c3be7957a19cf7d Mon Sep 17 00:00:00 2001
From: Egor Tensin <Egor.Tensin@gmail.com>
Date: Tue, 5 Apr 2022 13:57:04 +0200
Subject: shell: style scrollbars

---
 _posts/2022-03-21-shell.md        |  3 ++-
 assets/css/jekyll-theme/shell.css | 18 ++++++++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/_posts/2022-03-21-shell.md b/_posts/2022-03-21-shell.md
index 340d0b5..d48be62 100644
--- a/_posts/2022-03-21-shell.md
+++ b/_posts/2022-03-21-shell.md
@@ -50,7 +50,8 @@ AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
 
 {% include jekyll-theme/shell.html cmd=cmd1 out=out1 %}
 
-This is ugly though, so please don't do that.
+This has the potential to look rather ugly due to scrollbars though, so please
+don't do that.
 
 Commands don't necessarily have to have output:
 
diff --git a/assets/css/jekyll-theme/shell.css b/assets/css/jekyll-theme/shell.css
index 215d610..e68543b 100644
--- a/assets/css/jekyll-theme/shell.css
+++ b/assets/css/jekyll-theme/shell.css
@@ -50,3 +50,21 @@
 .shell-out {
   border-width: 0 0 thin 0;
 }
+
+/* Scrollbars. */
+/* Firefox: */
+.shell * {
+  scrollbar-width: thin;
+  scrollbar-color: #ccc #f0f0f0;
+}
+/* Chrome: */
+.shell *::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+.shell *::-webkit-scrollbar-track {
+  background: #f0f0f0;
+}
+.shell *::-webkit-scrollbar-thumb {
+  background: #ccc;
+}
-- 
cgit v1.2.3