diff --git a/templates/widgets/navbar/navbar.lucius b/templates/widgets/navbar/navbar.lucius index 8dde8fbc5..c80900934 100644 --- a/templates/widgets/navbar/navbar.lucius +++ b/templates/widgets/navbar/navbar.lucius @@ -58,11 +58,10 @@ /* links */ .navbar__link-wrapper { - position: relative; display: flex; flex-direction: column; justify-content: flex-end; - align-items: flex-start; + align-items: center; height: 80px; min-width: 90px; color: var(--color-lightwhite); @@ -71,14 +70,17 @@ &:hover { color: var(--color-lightwhite); + + .navbar__link-icon { + opacity: 1; + } } } .navbar__link-icon { - position: absolute; - right: 4px; - top: 4px; - opacity: 0.3; + opacity: 0.7; + transition: opacity 0.2s ease; + margin-bottom: 7px; } .navbar__link-label { @@ -90,7 +92,7 @@ @media (min-width: 769px) { .navbar__link-wrapper { - border: 1px solid var(--color-lmu-box-border); + border: 1px solid rgba(255, 255, 255, 0.7); } } @@ -106,6 +108,11 @@ .navbar__link-label { padding: 0 7px; } + + .navbar__link-icon { + transform: scale(0.65); + margin-bottom: 0; + } } /* navbar list */ @@ -142,21 +149,6 @@ &:not(.navbar__list-item--favorite) + .navbar__list-item { margin-left: 12px; } - - .fas { - height: 20px; - margin-left: 8px; - } -} - -@media (max-width: 768px) { - - .navbar__list-item { - - .fas { - margin-left: 0; - } - } } @media (max-width: 500px) {