From c05f49f1cd5683b868c82e453a76aec185bcbe01 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 2 Oct 2020 15:19:17 +0200 Subject: refactor viewer sections list, share, subscribe, subscription form --- .../app/views/viewer/sections/sections.css | 68 +++++++++++++++------- 1 file changed, 46 insertions(+), 22 deletions(-) (limited to 'animism-align/frontend/app/views/viewer/sections/sections.css') diff --git a/animism-align/frontend/app/views/viewer/sections/sections.css b/animism-align/frontend/app/views/viewer/sections/sections.css index 4858d7a..b357efe 100644 --- a/animism-align/frontend/app/views/viewer/sections/sections.css +++ b/animism-align/frontend/app/views/viewer/sections/sections.css @@ -4,13 +4,13 @@ position: absolute; bottom: 0; left: 0; + height: 22rem; width: 100%; background: black; color: white; display: block; transition: transform 0.2s; transform: translateZ(0) translateY(25rem); - border-top: 1px solid #fff; } .nav-open .viewer-sections { transform: translateZ(0) translateY(0); @@ -19,15 +19,46 @@ transform: translateZ(0) translateY(calc(3rem - 100vh)); z-index: 20; } + +/* sections nav */ + .sections-nav { z-index: 22; + border-top: 1px solid white; + background: black; +} +.sections-nav.viewer-nav > .nav-row { + z-index: 24; + background: black; + padding: 0; +} +.sections-nav .link { + position: relative; + height: 3rem; + padding: 0.25rem 1rem 0.25rem 0.25rem; +} +.sections-nav .subscribe-link { + border-right: 1px solid white; +} +.sections-nav .share-link { + border-right: 1px solid white; +} +.sections-nav .footnotes-link { + border-left: 1px solid white; +} +.sections-nav .transcript-link { + padding-left: 1rem; + border-left: 1px solid white; } /* scrolling part */ .viewer-sections .viewer-sections-scroll { + position: absolute; + top: 0; + left: 0; width: 100%; - height: 22rem; + height: 19rem; white-space: nowrap; overflow-x: scroll; overflow-y: hidden; @@ -35,25 +66,6 @@ .checklist-open .viewer-sections .viewer-sections-scroll { overflow-x: hidden; } -.viewer-sections-scroll::-webkit-scrollbar { - cursor: pointer; - user-select: none; - height: 4px; - width: 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 */ @@ -128,4 +140,16 @@ left: 0; height: 3px; background: #fff; -} \ No newline at end of file +} + +/* Boxes that emerge from the nav */ + +.nav-return { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + position: relative; + left: -0.5rem; + padding: 0.5rem 0 0.2rem 0; +} -- cgit v1.2.3-70-g09d2