Style scrollbar and top scroll button

_includes/top-scroll-button.html

@@ -1,3 +1,5 @@
 <a href="javascript:scrollUp()" class="top-scroll-button">
+    <div class="top-scroll-button-image-container">
         <img alt="Scroll to top" src="/images/up-arrow.png">
+    </div>
 </a>

_site/2019/03/06/a-possible-autism-anorexia-link-has-been-found-so-what-are-we-doing-about-it.html

@@ -243,7 +243,9 @@
   </footer>
 </div>
             <a href="javascript:scrollUp()" class="top-scroll-button">
+    <div class="top-scroll-button-image-container">
         <img alt="Scroll to top" src="/images/up-arrow.png">
+    </div>
 </a>
 
         </div>

_site/2019/03/06/are-the-roads-around-your-home-and-school-safe.html

@@ -255,7 +255,9 @@
   </footer>
 </div>
             <a href="javascript:scrollUp()" class="top-scroll-button">
+    <div class="top-scroll-button-image-container">
         <img alt="Scroll to top" src="/images/up-arrow.png">
+    </div>
 </a>
 
         </div>

_site/2019/03/06/book-week-real-life-issues-inspire-sarah-govett.html

@@ -250,7 +250,9 @@
   </footer>
 </div>
             <a href="javascript:scrollUp()" class="top-scroll-button">
+    <div class="top-scroll-button-image-container">
         <img alt="Scroll to top" src="/images/up-arrow.png">
+    </div>
 </a>
 
         </div>

_site/2019/03/06/could-sky-high-aims-bring-reading-down.html

@@ -255,7 +255,9 @@
   </footer>
 </div>
             <a href="javascript:scrollUp()" class="top-scroll-button">
+    <div class="top-scroll-button-image-container">
         <img alt="Scroll to top" src="/images/up-arrow.png">
+    </div>
 </a>
 
         </div>

_site/2019/03/06/finished-product.html

@@ -231,7 +231,9 @@
   </footer>
 </div>
             <a href="javascript:scrollUp()" class="top-scroll-button">
+    <div class="top-scroll-button-image-container">
         <img alt="Scroll to top" src="/images/up-arrow.png">
+    </div>
 </a>
 
         </div>

_site/2019/03/06/student-survey-shows-rosa-parks-is-most-inspirational-woman-ever.html

@@ -248,7 +248,9 @@
   </footer>
 </div>
             <a href="javascript:scrollUp()" class="top-scroll-button">
+    <div class="top-scroll-button-image-container">
         <img alt="Scroll to top" src="/images/up-arrow.png">
+    </div>
 </a>
 
         </div>

_site/2019/03/06/tennis-club-needs-to-relocate-as-redevelopment-plans-are-called-out.html

@@ -269,7 +269,9 @@ Others objected to the planning application by expressing fears of the damaging
   </footer>
 </div>
             <a href="javascript:scrollUp()" class="top-scroll-button">
+    <div class="top-scroll-button-image-container">
         <img alt="Scroll to top" src="/images/up-arrow.png">
+    </div>
 </a>
 
         </div>

_site/2019/03/06/video-games-virtual-fantasy-or-a-virtual-prison.html

@@ -271,7 +271,9 @@ Well of course the most effective and most common method experienced by Reading
   </footer>
 </div>
             <a href="javascript:scrollUp()" class="top-scroll-button">
+    <div class="top-scroll-button-image-container">
         <img alt="Scroll to top" src="/images/up-arrow.png">
+    </div>
 </a>
 
         </div>

_site/2019/03/06/what-is-in-the-patients-best-interest.html

@@ -282,7 +282,9 @@ It is standard protocol in the NHS that doctors must consult with the patient an
   </footer>
 </div>
             <a href="javascript:scrollUp()" class="top-scroll-button">
+    <div class="top-scroll-button-image-container">
         <img alt="Scroll to top" src="/images/up-arrow.png">
+    </div>
 </a>
 
         </div>

_site/2019/03/06/whats-next-for-reading-prison.html

@@ -276,7 +276,9 @@ Under the plan, the main theatre would operate on a commercial basis with the re
   </footer>
 </div>
             <a href="javascript:scrollUp()" class="top-scroll-button">
+    <div class="top-scroll-button-image-container">
         <img alt="Scroll to top" src="/images/up-arrow.png">
+    </div>
 </a>
 
         </div>

_site/2019/03/06/young-reporter-team-ready-to-go.html

@@ -233,7 +233,9 @@
   </footer>
 </div>
             <a href="javascript:scrollUp()" class="top-scroll-button">
+    <div class="top-scroll-button-image-container">
         <img alt="Scroll to top" src="/images/up-arrow.png">
+    </div>
 </a>
 
         </div>

_site/css/article-page.css

@@ -68,3 +68,44 @@ iframe {
         height: calc(93.5vw / 16 * 9);
     }
 }
+
+/* scroll-to-top button */
+.top-scroll-button {
+    width: 50px;
+    height: 50px;
+    -webkit-border-radius: 50%;
+    -moz-border-radius: 50%;
+    border-radius: 50%;
+    position: fixed;
+    right: 20px;
+    bottom: 20px;
+    background-color: #273967;
+    display: none;
+    -webkit-transition-duration: 0.25s;
+    -moz-transition-duration: 0.25s;
+    -o-transition-duration: 0.25s;
+    transition-duration: 0.25s;
+}
+.top-scroll-button-image-container {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.top-scroll-button img {
+    width: 35px;
+    height: auto;
+    position: relative;
+    bottom: 2px;
+    -webkit-transition-duration: 0.25s;
+    -moz-transition-duration: 0.25s;
+    -o-transition-duration: 0.25s;
+    transition-duration: 0.25s;
+}
+.top-scroll-button:hover, .top-scroll-button:focus {
+    background-color: #1C2E56;
+}
+.top-scroll-button:hover img {
+    bottom: 5px;
+}

_site/css/global.css

@@ -1,19 +1,3 @@
-html {
-    height: 100%;
-}
-html, body, .mdc-drawer-app-content {
-    display: flex;
-    flex-direction: column;
-}
-.footer-container, .mdc-drawer-app-content, body {
-    flex-grow: 1;
-}
-
-
-
-
-
-
 /* change theme */
 :root {
     --mdc-theme-primary: #253a67;
@@ -27,7 +11,6 @@ body {
     background-color: var(--mdc-theme-primary);
     color: #ffffff;
 }
-
 .mdc-drawer {
     background-color: var(--mdc-theme-background);
 }
@@ -47,6 +30,26 @@ body {
 a {
     color: var(--mdc-theme-secondary);
 }
+
+/* style scrollbars */
+body::-webkit-scrollbar, .mdc-drawer__content::-webkit-scrollbar {
+    width: 11px;
+}
+body, .mdc-drawer__content {
+    --scrollbar-thumb-color: #555555;
+    --scrollbar-track-color: #262829;
+    --scrollbar-border-color: #444444;
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-track-color) var(--scrollbar-thumb-color);
+}
+body::-webkit-scrollbar-track, .mdc-drawer__content::-webkit-scrollbar-track {
+    background: var(--scrollbar-track-color);
+}
+body::-webkit-scrollbar-thumb, .mdc-drawer__content::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb-color);
+    border: 1px solid var(--scrollbar-border-color);
+}
+
 /* navbar buttons */
 .mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label, .mdc-list-item--activated .mdc-list-item__text, .mdc-drawer .mdc-list-item--activated .mdc-list-item__graphic {
     color: var(--mdc-theme-secondary);
@@ -73,6 +76,18 @@ a {
     padding-top: 41px;
 }
 
+/* expand grey bar in footer to bottom of page */
+html {
+    height: 100%;
+}
+html, body, .mdc-drawer-app-content {
+    display: flex;
+    flex-direction: column;
+}
+.footer-container, .mdc-drawer-app-content, body {
+    flex-grow: 1;
+}
+
 /* make content display properly */
 .mdc-list-group h3 {
     margin: 20px 16px auto 16px;
@@ -180,39 +195,3 @@ footer img {
     color: var(--mdc-theme-secondary);
     text-decoration: none;
 }
-
-/* scroll-to-top button */
-.top-scroll-button {
-    width: 50px;
-    height: 50px;
-    text-align: center;
-    font-size: 25px;
-    -webkit-border-radius: 50%;
-    -moz-border-radius: 50%;
-    border-radius: 50%;
-    position: fixed;
-    right: 20px;
-    bottom: 20px;
-    background-color: #273967;
-    display: none;
-    -webkit-transition-duration: 0.25s;
-    -moz-transition-duration: 0.25s;
-    -o-transition-duration: 0.25s;
-    transition-duration: 0.25s;
-}
-.top-scroll-button img {
-    position: relative;
-    top: 7px;
-    width: 35px;
-    height: auto;
-    -webkit-transition-duration: 0.25s;
-    -moz-transition-duration: 0.25s;
-    -o-transition-duration: 0.25s;
-    transition-duration: 0.25s;
-}
-.top-scroll-button:hover, .top-scroll-button:focus {
-    background-color: #1C2E56;
-}
-.top-scroll-button:hover img {
-    top: 3px;
-}

css/article-page.css

@@ -68,3 +68,44 @@ iframe {
         height: calc(93.5vw / 16 * 9);
     }
 }
+
+/* scroll-to-top button */
+.top-scroll-button {
+    width: 50px;
+    height: 50px;
+    -webkit-border-radius: 50%;
+    -moz-border-radius: 50%;
+    border-radius: 50%;
+    position: fixed;
+    right: 20px;
+    bottom: 20px;
+    background-color: #273967;
+    display: none;
+    -webkit-transition-duration: 0.25s;
+    -moz-transition-duration: 0.25s;
+    -o-transition-duration: 0.25s;
+    transition-duration: 0.25s;
+}
+.top-scroll-button-image-container {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.top-scroll-button img {
+    width: 35px;
+    height: auto;
+    position: relative;
+    bottom: 2px;
+    -webkit-transition-duration: 0.25s;
+    -moz-transition-duration: 0.25s;
+    -o-transition-duration: 0.25s;
+    transition-duration: 0.25s;
+}
+.top-scroll-button:hover, .top-scroll-button:focus {
+    background-color: #1C2E56;
+}
+.top-scroll-button:hover img {
+    bottom: 5px;
+}

css/global.css

@@ -1,19 +1,3 @@
-html {
-    height: 100%;
-}
-html, body, .mdc-drawer-app-content {
-    display: flex;
-    flex-direction: column;
-}
-.footer-container, .mdc-drawer-app-content, body {
-    flex-grow: 1;
-}
-
-
-
-
-
-
 /* change theme */
 :root {
     --mdc-theme-primary: #253a67;
@@ -27,7 +11,6 @@ body {
     background-color: var(--mdc-theme-primary);
     color: #ffffff;
 }
-
 .mdc-drawer {
     background-color: var(--mdc-theme-background);
 }
@@ -47,6 +30,26 @@ body {
 a {
     color: var(--mdc-theme-secondary);
 }
+
+/* style scrollbars */
+body::-webkit-scrollbar, .mdc-drawer__content::-webkit-scrollbar {
+    width: 11px;
+}
+body, .mdc-drawer__content {
+    --scrollbar-thumb-color: #555555;
+    --scrollbar-track-color: #262829;
+    --scrollbar-border-color: #444444;
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-track-color) var(--scrollbar-thumb-color);
+}
+body::-webkit-scrollbar-track, .mdc-drawer__content::-webkit-scrollbar-track {
+    background: var(--scrollbar-track-color);
+}
+body::-webkit-scrollbar-thumb, .mdc-drawer__content::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb-color);
+    border: 1px solid var(--scrollbar-border-color);
+}
+
 /* navbar buttons */
 .mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label, .mdc-list-item--activated .mdc-list-item__text, .mdc-drawer .mdc-list-item--activated .mdc-list-item__graphic {
     color: var(--mdc-theme-secondary);
@@ -73,6 +76,18 @@ a {
     padding-top: 41px;
 }
 
+/* expand grey bar in footer to bottom of page */
+html {
+    height: 100%;
+}
+html, body, .mdc-drawer-app-content {
+    display: flex;
+    flex-direction: column;
+}
+.footer-container, .mdc-drawer-app-content, body {
+    flex-grow: 1;
+}
+
 /* make content display properly */
 .mdc-list-group h3 {
     margin: 20px 16px auto 16px;
@@ -180,39 +195,3 @@ footer img {
     color: var(--mdc-theme-secondary);
     text-decoration: none;
 }
-
-/* scroll-to-top button */
-.top-scroll-button {
-    width: 50px;
-    height: 50px;
-    text-align: center;
-    font-size: 25px;
-    -webkit-border-radius: 50%;
-    -moz-border-radius: 50%;
-    border-radius: 50%;
-    position: fixed;
-    right: 20px;
-    bottom: 20px;
-    background-color: #273967;
-    display: none;
-    -webkit-transition-duration: 0.25s;
-    -moz-transition-duration: 0.25s;
-    -o-transition-duration: 0.25s;
-    transition-duration: 0.25s;
-}
-.top-scroll-button img {
-    position: relative;
-    top: 7px;
-    width: 35px;
-    height: auto;
-    -webkit-transition-duration: 0.25s;
-    -moz-transition-duration: 0.25s;
-    -o-transition-duration: 0.25s;
-    transition-duration: 0.25s;
-}
-.top-scroll-button:hover, .top-scroll-button:focus {
-    background-color: #1C2E56;
-}
-.top-scroll-button:hover img {
-    top: 3px;
-}

images/.~lock (copy).up-arrow.png#

@@ -0,0 +1 @@
+,matthew,m36-pavilion,10.03.2020 09:14,file:///home/matthew/.config/libreoffice/4;