scrolling viewer sections

1 files changed, 28 insertions, 2 deletions

diff --git a/animism-align/frontend/app/views/viewer/sections/sections.css b/animism-align/frontend/app/views/viewer/sections/sections.css
index a94b712..0ca84a2 100644
--- a/animism-align/frontend/app/views/viewer/sections/sections.css
+++ b/animism-align/frontend/app/views/viewer/sections/sections.css
@@ -8,7 +8,6 @@
   background: black;
   color: white;
   display: block;
-  white-space: nowrap;
   transition: transform 0.2s;
   transform: translateZ(0) translateY(25rem);
   border-top: 1px solid #fff;
@@ -17,10 +16,37 @@
   transform: translateZ(0) translateY(0);
 }
 .checklist-open .viewer-sections {
-  transform: translateZ(0) translateY(calc(3rem - 100vh));
+  transform: translateZ(0) translateY(calc(3rem - 100vh - 4px));
   z-index: 20;
 }
 
+/* scrolling part */
+
+.viewer-sections .viewer-sections-scroll {
+  width: 100%;
+  white-space: nowrap;
+  overflow-y: auto;
+}
+.viewer-sections-scroll::-webkit-scrollbar {
+  cursor: pointer;
+  user-select: none;
+  height: 4px
+}
+.viewer-sections-scroll::-webkit-scrollbar-button {
+  display: block;
+  width: 0;
+  height: 0;
+}
+.viewer-sections-scroll::-webkit-scrollbar-track-piece {
+  background:rgba(211,211,211,0.8);
+}
+.viewer-sections-scroll::-webkit-scrollbar-thumb {
+  display: block;
+  background: #000;
+}
+
+/* clickable section indicators */
+
 .viewer-sections .viewer-section {
   display: inline-flex;
   white-space: normal;