From d040b3b8939001f33da8ed7eb94c360037ef77fa Mon Sep 17 00:00:00 2001
From: bruno <bruno.charest@gmail.com>
Date: Thu, 4 Aug 2022 01:03:03 -0400
Subject: [PATCH] ajout scrollbar colone de gauche

---
 public/css/styles.css | 141 +++++++++++++++++++++++++++++++++++++-----
 tmpl/website.tmpl     |  14 +++--
 2 files changed, 134 insertions(+), 21 deletions(-)

diff --git a/public/css/styles.css b/public/css/styles.css
index e2c61c9..b1931f7 100755
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -47,10 +47,21 @@ body {
 .column {
   float: left;
   padding: 10px;
-  height: calc(100vh - var(--header-height)); 
+  height: calc(100vh - var(--header-height));
   /* flex: 50%; */
-  width: 100%; 
+  width: 100%;
 }
+
+.column .scrollbar {
+  /* margin-left: 30px; */
+  /* float: left; */
+  height: 950px;
+  /* width: 300px; */
+  background: #fff;
+  overflow-y: scroll;
+  /* margin-bottom: 25px; */
+}
+
 .left {
   width: 25%;
 }
@@ -58,6 +69,7 @@ body {
 .right {
   width: 75%;
 }
+
 .row {
   display: flex;
   width: 100%;
@@ -134,7 +146,7 @@ body {
   height: 90px;
 }
 
-.sidebar .channel-logo > img {
+.sidebar .channel-logo>img {
   width: 100%;
   height: 100%;
 }
@@ -259,22 +271,119 @@ body {
   width: 100%;
 }
 
-/* .svg-icon {
-  width: 2em;
-  height: 2em;
+.force-overflow {
+  min-height: 450px;
 }
 
-.svg-icon:hover {
-  fill: var(--animation-duration);
+.scrollbar-primary::-webkit-scrollbar {
+  width: 12px;
+  background-color: #F5F5F5;
 }
 
-.svg-icon path,
-.svg-icon polygon,
-.svg-icon rect {
-  fill: #4691f6;
+.scrollbar-primary::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: #4285F4;
 }
 
-.svg-icon circle {
-  stroke: #4691f6;
-  stroke-width: 1;
-} */
+.scrollbar-danger::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: #F5F5F5;
+  border-radius: 10px;
+}
+
+.scrollbar-danger::-webkit-scrollbar {
+  width: 12px;
+  background-color: #F5F5F5;
+}
+
+.scrollbar-danger::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: #ff3547;
+}
+
+.scrollbar-warning::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: #F5F5F5;
+  border-radius: 10px;
+}
+
+.scrollbar-warning::-webkit-scrollbar {
+  width: 12px;
+  background-color: #F5F5F5;
+}
+
+.scrollbar-warning::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: #FF8800;
+}
+
+.scrollbar-success::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: #F5F5F5;
+  border-radius: 10px;
+}
+
+.scrollbar-success::-webkit-scrollbar {
+  width: 12px;
+  background-color: #F5F5F5;
+}
+
+.scrollbar-success::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: #00C851;
+}
+
+.scrollbar-info::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: #F5F5F5;
+  border-radius: 10px;
+}
+
+.scrollbar-info::-webkit-scrollbar {
+  width: 12px;
+  background-color: #F5F5F5;
+}
+
+.scrollbar-info::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: #33b5e5;
+}
+
+.scrollbar-default::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: #F5F5F5;
+  border-radius: 10px;
+}
+
+.scrollbar-default::-webkit-scrollbar {
+  width: 12px;
+  background-color: #F5F5F5;
+}
+
+.scrollbar-default::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: #2BBBAD;
+}
+
+.scrollbar-secondary::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: #F5F5F5;
+  border-radius: 10px;
+}
+
+.scrollbar-secondary::-webkit-scrollbar {
+  width: 12px;
+  background-color: #F5F5F5;
+}
+
+.scrollbar-secondary::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: #aa66cc;
+}
\ No newline at end of file
diff --git a/tmpl/website.tmpl b/tmpl/website.tmpl
index ca0a0f2..5e3ea0d 100644
--- a/tmpl/website.tmpl
+++ b/tmpl/website.tmpl
@@ -146,11 +146,15 @@
             </aside>
             <div class="row">
                 <div class="column left">
-                    # var title = templ_title("NOTEBOOKS")
-                    ${title}
-                    # for i in all_notebooks.title:
-                    <p> ${i} </p>
-                    # end for
+                    <div class="scrollbar scrollbar-primary">
+                        <div class="force-overflow">
+                            # var title = templ_title("NOTEBOOKS")
+                            ${title}
+                            # for i in all_notebooks.title:
+                            <p> ${i} </p>
+                            # end for
+                        </div>
+                    </div>
                 </div>
                 <div class="column right" style="background-color:#bbb;">
                     <h2>Column 2</h2>