Improved the compatibility in Firefox.
This commit is contained in:
parent
63f665525e
commit
a589831812
2 changed files with 47 additions and 42 deletions
|
@ -43,7 +43,6 @@
|
|||
</li> <!-- .nav-item -->
|
||||
{% endfor %}
|
||||
|
||||
<span class="cursor"></span>
|
||||
</ul> <!-- ul.nav.flex-column -->
|
||||
|
||||
</div><!-- #nav-wrap -->
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
/*!
|
||||
* The main styles.
|
||||
* © 2018-2019 Cotes Chung
|
||||
|
@ -7,6 +6,7 @@
|
|||
|
||||
html, body {
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Solved jumping scrollbar */
|
||||
|
@ -46,7 +46,6 @@ body {
|
|||
|
||||
#sidebar .nav-item {
|
||||
height: 20%;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
#sidebar .nav-link {
|
||||
|
@ -70,47 +69,53 @@ body {
|
|||
display: -ms-flexbox;
|
||||
}
|
||||
|
||||
.cursor {
|
||||
background: #fcfcfc;
|
||||
#sidebar ul > li.active:nth-child(1) ~ li:last-child::after,
|
||||
#sidebar ul > li.nav-item:nth-child(1):hover ~ li:last-child::after {
|
||||
top: calc(-400% + (26px / 2));
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#sidebar ul > li.active:nth-child(2) ~ li:last-child::after,
|
||||
#sidebar ul > li.nav-item:nth-child(2):hover ~ li:last-child::after {
|
||||
top: calc(-300% + (26px / 2));
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#sidebar ul > li.active:nth-child(3) ~ li:last-child::after,
|
||||
#sidebar ul > li.nav-item:nth-child(3):hover ~ li:last-child::after {
|
||||
top: calc(-200% + (26px / 2));
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#sidebar ul > li.active:nth-child(4) ~ li:last-child::after,
|
||||
#sidebar ul > li.nav-item:nth-child(4):hover ~ li:last-child::after {
|
||||
top: calc(-100% + (26px / 2));
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#sidebar ul > li.active:nth-child(5):last-child::after,
|
||||
#sidebar ul > li.nav-item:nth-child(5):last-child:hover::after {
|
||||
top: calc(26px / 2);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#sidebar ul > li:last-child > a {
|
||||
margin-right: -3px;
|
||||
max-width: calc(100% - 3px);
|
||||
}
|
||||
|
||||
#sidebar ul > li:last-child::after {
|
||||
visibility: hidden;
|
||||
content: "";
|
||||
position: relative;
|
||||
display: none;
|
||||
top: 0;
|
||||
left: 98.5%;
|
||||
width: 3px;
|
||||
height: 10%;
|
||||
-webkit-transition: top 0.5s ease;
|
||||
-moz-transition: top 0.5s ease;
|
||||
transition: top 0.5s ease;
|
||||
}
|
||||
|
||||
#sidebar ul>li.active:nth-child(1)~.cursor,
|
||||
#sidebar ul>li.nav-item:nth-child(1):hover~.cursor {
|
||||
top: -95%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#sidebar ul>li.active:nth-child(2)~.cursor,
|
||||
#sidebar ul>li.nav-item:nth-child(2):hover~.cursor {
|
||||
top: -75%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#sidebar ul>li.active:nth-child(3)~.cursor,
|
||||
#sidebar ul>li.nav-item:nth-child(3):hover~.cursor {
|
||||
top: -55%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#sidebar ul>li.active:nth-child(4)~.cursor,
|
||||
#sidebar ul>li.nav-item:nth-child(4):hover~.cursor {
|
||||
top: -35%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#sidebar ul>li.active:nth-child(5)~.cursor,
|
||||
#sidebar ul>li.nav-item:nth-child(5):hover~.cursor {
|
||||
top: -15%;
|
||||
display: block;
|
||||
height: 26px;
|
||||
background: #fcfcfc;;
|
||||
pointer-events: none;
|
||||
-webkit-transition: top .5s ease;
|
||||
-moz-transition: top .5s ease;
|
||||
-o-transition: top .5s ease;
|
||||
transition: top .5s ease;
|
||||
}
|
||||
|
||||
#nav-wrap {
|
||||
|
@ -996,6 +1001,7 @@ a.tag:hover {
|
|||
}
|
||||
|
||||
#archives .date {
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue