ajout scrollbar colone de gauche

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 {
+.force-overflow {
-  width: 2em;
+  min-height: 450px;
-  height: 2em;
 }
 
-.svg-icon:hover {
+.scrollbar-primary::-webkit-scrollbar {
-  fill: var(--animation-duration);
+  width: 12px;
+  background-color: #F5F5F5;
 }
 
-.svg-icon path,
+.scrollbar-primary::-webkit-scrollbar-thumb {
-.svg-icon polygon,
+  border-radius: 10px;
-.svg-icon rect {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
-  fill: #4691f6;
+  background-color: #4285F4;
 }
 
-.svg-icon circle {
+.scrollbar-danger::-webkit-scrollbar-track {
-  stroke: #4691f6;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
-  stroke-width: 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;
+}

tmpl/website.tmpl

@@ -146,11 +146,15 @@
             </aside>
             <div class="row">
                 <div class="column left">
-                    # var title = templ_title("NOTEBOOKS")
+                    <div class="scrollbar scrollbar-primary">
-                    ${title}
+                        <div class="force-overflow">
-                    # for i in all_notebooks.title:
+                            # var title = templ_title("NOTEBOOKS")
-                    <p> ${i} </p>
+                            ${title}
-                    # end for
+                            # 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>