Set overflows to auto and applied webkit styles to all scrollbars (#187)
diff --git a/landing-pages/site/assets/scss/_roadmap.scss b/landing-pages/site/assets/scss/_roadmap.scss
index c559949..5995236 100644
--- a/landing-pages/site/assets/scss/_roadmap.scss
+++ b/landing-pages/site/assets/scss/_roadmap.scss
@@ -54,7 +54,7 @@
max-width: 270px;
min-width: 270px;
width: 100%;
- overflow-y: scroll;
+ overflow-y: auto;
padding-top: 12px;
padding-left: 15px;
padding-bottom: 30px;
@@ -64,10 +64,6 @@
&::-webkit-scrollbar {
-webkit-appearance: none;
-
- &:vertical {
- width: 9px;
- }
}
&::-webkit-scrollbar-thumb {
@@ -76,6 +72,9 @@
background-color: rgba(0, 0, 0, .5);
}
+ &::-webkit-scrollbar:vertical {
+ width: 9px;
+ }
&__inner {
position: static;
@@ -205,13 +204,27 @@
position: sticky;
top: 163px;
overflow-x: hidden;
- overflow-y: scroll;
+ overflow-y: auto;
width: 280px;
height: fit-content;
max-height: calc(100vh - 163px);
font-size: 14px;
line-height: 1.43;
+ &::-webkit-scrollbar {
+ -webkit-appearance: none;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ border-radius: 8px;
+ border: 2px solid white;
+ background-color: rgba(0, 0, 0, .5);
+ }
+
+ &::-webkit-scrollbar:vertical {
+ width: 9px;
+ }
+
ul, ol {
padding: 0;
list-style: none none;
diff --git a/landing-pages/site/assets/scss/_video.scss b/landing-pages/site/assets/scss/_video.scss
index b79369d..192582a 100644
--- a/landing-pages/site/assets/scss/_video.scss
+++ b/landing-pages/site/assets/scss/_video.scss
@@ -57,9 +57,9 @@
}
.video-list-wrapper {
- overflow-y: scroll;
+ overflow-y: auto;
max-height: 403px;
- max-width: 365px;
+ max-width: 370px;
width: 100%;
margin-left: 40px;
@@ -67,6 +67,21 @@
max-width: unset;
margin-left: 0;
}
+
+ &::-webkit-scrollbar {
+ -webkit-appearance: none;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ border-radius: 8px;
+ border: 2px solid white;
+ background-color: rgba(0, 0, 0, .5);
+ }
+
+ &::-webkit-scrollbar:vertical {
+ width: 9px;
+ }
+
}
.video-list {
@@ -87,6 +102,10 @@
vertical-align: middle;
}
+ &--icon-container {
+ display: flex;
+ }
+
&:hover, &.active {
#{$item}--title {
font-weight: 500;
diff --git a/landing-pages/site/layouts/partials/video-section.html b/landing-pages/site/layouts/partials/video-section.html
index 7de7997..ae86889 100644
--- a/landing-pages/site/layouts/partials/video-section.html
+++ b/landing-pages/site/layouts/partials/video-section.html
@@ -31,9 +31,11 @@
{{ $videosLen := len .Site.Data.videos }}
{{ range $i, $e := sort .Site.Data.videos "date" }}
<a href="#{{ $e.videoID }}" class="video-list__item">
- {{ with resources.Get "icons/play-icon.svg" }}
- {{ .Content | safeHTML }}
- {{ end }}
+ <div class="video-list__item--icon-container">
+ {{ with resources.Get "icons/play-icon.svg" }}
+ {{ .Content | safeHTML }}
+ {{ end }}
+ </div>
<span class="video-list__item--title">{{ $e.title }}</span>
</a>
{{ end }}
