me/bbc-young-reporter
1
0
Fork 0
mirror of https://github.com/mgrove36/bbc-young-reporter.git synced 2026-03-03 11:27:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Style scrollbar and top scroll button

Browse Source
This commit is contained in:
Matthew Grove
2020-03-10 09:18:36 +00:00
parent 00c89d770b
commit f9c7175cfa
17 changed files with 183 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
css/article-page.css
View File

@@ -67,4 +67,45 @@ iframe {
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;
}

85
css/global.css
View File

@@ -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;
}