Commit 09fe3565 authored by DiabloPC 's avatar DiabloPC
Browse files

Scroll_To_Top pure css

parent 734f8cac
......@@ -56,6 +56,14 @@
<div id="brd-about">
<!-- forum_about -->
</div>
<div class="scrolltop-wrap">
<a href="#" role="button" aria-label="Scroll to top">
<svg height="48" viewBox="0 0 48 48" width="48" height="48px" xmlns="http://www.w3.org/2000/svg">
<path id="scrolltop-bg" d="M0 0h48v48h-48z"></path>
<path id="scrolltop-arrow" d="M14.83 30.83l9.17-9.17 9.17 9.17 2.83-2.83-12-12-12 12z"></path>
</svg>
</a>
</div>
<!-- forum_debug -->
</div>
</div>
......
......@@ -32,6 +32,10 @@ select {
font-size: 14px;
}
body {
position: relative;
}
p {
line-height: 1.3;
}
......@@ -2422,8 +2426,8 @@ label,
#brd-navlinks .isactive a,
.main-menu .active a,
.admin-menu .active a {
color: #fff;
background: #2a6ab8
font-weight: 900;
color: fff;
}
#brd-admod #alert a {
......
......@@ -3,7 +3,7 @@
@lfr-background-dark: rgba(218,218,223,255);
@lfr-background-middle: rgba(245,245,250,255);
@lfr-background-subhead: -webkit-linear-gradient(bottom, rgba(58,73,92,255) 0, rgba(218,218,223,255) 2px, rgba(218,218,223,255) 100%);
@lfr-base-color: rgba(97,136,162,255);
@lfr-base-color: rgba(45, 111, 186, 1);
@lfr-border-color: rgba(47,61,99,255);
@lfr-border-size: 1px;
......
html {
scroll-behavior: smooth;
}
body {
margin: 0 auto 0 auto;
font-size: @lfr-all-zoom * 14pt;
position: relative !important;
}
.scrolltop-wrap {
box-sizing: border-box;
position: absolute;
top: 12rem;
right: 2rem;
bottom: 0;
opacity: 0.5;
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: all 0.5s;
#scrolltop-bg {
fill: @lfr-base-color;
}
#scrolltop-arrow {
fill: white;
}
a:hover {
#scrolltop-bg {
fill: @lfr-base-color;
}
}
a {
position: fixed;
position: -webkit-sticky;
position: sticky;
top: -5rem;
width: 3rem;
height: 3rem;
margin-bottom: -5rem;
-webkit-transform: translateY(100vh);
transform: translateY(100vh);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
display: inline-block;
text-decoration: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: all;
outline: none;
overflow: hidden;
svg {
display: block;
border-radius: 5px;
width: 100%;
height: 100%;
}
#scrolltop-arrow {
-webkit-transform-origin: center;
transform-origin: center;
}
}
}
@supports (-moz-appearance: meterbar) {
.scrolltop-wrap {
clip: rect(0, 3rem, auto, 0);
}
}
.scrolltop-wrap:hover {
opacity: 1;
}
a {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment