ajout scrollbar colone de gauche

public/css/styles.css

@@ -51,6 +51,17 @@ body {
   /* flex: 50%; */
   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%;
@@ -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,12 +146,16 @@
             </aside>
             <div class="row">
                 <div class="column left">
+                    <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>
                     <p>Some text..</p>