Refactor navbar
This commit is contained in:
parent
a2243ca668
commit
8a73a8ff78
5 changed files with 186 additions and 230 deletions
|
@ -170,56 +170,17 @@ header {
|
|||
}
|
||||
|
||||
#user-links {
|
||||
display: inline;
|
||||
float: right;
|
||||
color: #5c5954;
|
||||
|
||||
.anon {
|
||||
margin-top: 1em;
|
||||
padding-right: 10px;
|
||||
display: inline-flex;
|
||||
min-height: 100%;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
li {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
& > ul {
|
||||
display: block;
|
||||
margin: 0;
|
||||
|
||||
& > li > span {
|
||||
height: 36px;
|
||||
padding-top: 8px;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-top: 2px solid $theme_color;
|
||||
color: black;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
margin: -2.75px;
|
||||
}
|
||||
|
||||
& > img {
|
||||
vertical-align: middle;
|
||||
border-radius: $widget_border_radius;
|
||||
display: inline;
|
||||
margin: 2px 6px 0 5px;
|
||||
}
|
||||
|
||||
& > span {
|
||||
vertical-align: middle;
|
||||
display: inline;
|
||||
margin-top: 11px;
|
||||
margin-right: 9px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
text-align: center;
|
||||
padding: 4px;
|
||||
margin-right: 1em;
|
||||
gap: 5px;
|
||||
&:hover {
|
||||
color: black;
|
||||
border-radius: 2px;
|
||||
border: 0.5px solid black;
|
||||
cursor: pointer;
|
||||
padding: 3.5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -280,14 +241,12 @@ nav {
|
|||
}
|
||||
|
||||
a, button {
|
||||
display: inline-block;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
color: black;
|
||||
padding: 13px 7px;
|
||||
height: 18px;
|
||||
border-top: 2px solid transparent;
|
||||
border-bottom: 2px solid transparent;
|
||||
font-weight: bold;
|
||||
font-size: initial;
|
||||
|
||||
|
@ -306,7 +265,6 @@ nav {
|
|||
// color: #FFF;
|
||||
border-top: 2px solid $theme_color;
|
||||
color: $theme_color;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.nav-expand {
|
||||
|
@ -368,16 +326,6 @@ nav {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-divider {
|
||||
width: 1px;
|
||||
vertical-align: middle;
|
||||
padding-left: 3px;
|
||||
display: inline-block;
|
||||
height: 32px;
|
||||
margin-right: 10px;
|
||||
border-right: 3px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
|
@ -541,26 +489,6 @@ noscript #noscript {
|
|||
flex: 1 1 1px;
|
||||
}
|
||||
|
||||
#user-links {
|
||||
height: 100%;
|
||||
padding-right: 1em;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
height: 100%;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#page-container {
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
|
@ -610,14 +538,13 @@ math {
|
|||
|
||||
#navicon {
|
||||
transition-duration: 0.25s;
|
||||
display: block;
|
||||
line-height: 26px;
|
||||
display: flex;
|
||||
font-size: 2em;
|
||||
color: $widget_black;
|
||||
padding: 0 0.25em;
|
||||
margin: 4px 0.25em;
|
||||
white-space: nowrap;
|
||||
float: left;
|
||||
flex-grow: 1;
|
||||
|
||||
&.hover {
|
||||
color: #4db7fe;
|
||||
|
@ -647,6 +574,8 @@ math {
|
|||
a {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
padding: 7px 13px;
|
||||
|
||||
.nav-expand {
|
||||
float: right;
|
||||
|
@ -669,25 +598,13 @@ math {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
#user-links {
|
||||
& > ul > li {
|
||||
& > a > span {
|
||||
padding-top: 4px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
& > ul {
|
||||
left: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media not all and (max-width: 760px) {
|
||||
@media(min-width: 800px) {
|
||||
#nav-list {
|
||||
display: inline !important;
|
||||
display: flex !important;
|
||||
gap: 1.5em;
|
||||
flex-grow: 1;
|
||||
|
||||
li {
|
||||
&.home-menu-item {
|
||||
|
@ -758,20 +675,6 @@ math {
|
|||
background: lightgray;
|
||||
}
|
||||
|
||||
.navbar-icons {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
float: left;
|
||||
margin-right: 0.3em;
|
||||
|
||||
.navbar-icon {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
}
|
||||
.navbar-icon {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.unread_boxes {
|
||||
background-color: red;
|
||||
color: white;
|
||||
|
@ -879,18 +782,32 @@ select {
|
|||
z-index: 9999;
|
||||
}
|
||||
|
||||
.nav-right-text {
|
||||
font-weight: normal;
|
||||
font-size: small;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.anon {
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
padding-right: 1em;
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 799px) {
|
||||
#user-links, .anon {
|
||||
padding-right: 0.5em;
|
||||
.nav-fa-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 800px) {
|
||||
.anon {
|
||||
padding-right: 1em;
|
||||
}
|
||||
.navbar-icons {
|
||||
margin-top: 6px;
|
||||
.normal-text {
|
||||
font-weight: normal;
|
||||
font-size: small;
|
||||
text-align: left;
|
||||
}
|
||||
#page-container {
|
||||
background: #f1f2f2;
|
||||
|
@ -960,12 +877,6 @@ input::placeholder{
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.normal-text {
|
||||
font-weight: normal;
|
||||
font-size: small;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-fa-icon {
|
||||
i {
|
||||
margin-right: 0.1em;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue