Navbar fixes (#1466)

* Fix onion position in mobile navbar

* Show nav hover highlight only on desktop

* Fix navbar icon color
This commit is contained in:
Dennis Reimann
2020-04-15 17:13:58 +02:00
committed by GitHub
parent 03458efea4
commit 00d1c4ebcc
3 changed files with 26 additions and 16 deletions

View File

@@ -39,7 +39,7 @@
}
<!-- Navigation -->
<nav class='navbar navbar-expand-lg navbar-dark fixed-top @additionalStyle' id="mainNav">
<nav class='navbar navbar-expand-lg fixed-top @additionalStyle' id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="~/">
<svg class="logo" viewBox="0 0 192 84" xmlns="http://www.w3.org/2000/svg"><g><path d="M5.206 83.433a4.86 4.86 0 01-4.859-4.861V5.431a4.86 4.86 0 119.719 0v73.141a4.861 4.861 0 01-4.86 4.861" fill="#CEDC21" class="logo-brand-light"/><path d="M5.209 83.433a4.862 4.862 0 01-2.086-9.253L32.43 60.274 2.323 38.093a4.861 4.861 0 015.766-7.826l36.647 26.999a4.864 4.864 0 01-.799 8.306L7.289 82.964a4.866 4.866 0 01-2.08.469" fill="#51B13E" class="logo-brand-medium"/><path d="M5.211 54.684a4.86 4.86 0 01-2.887-8.774L32.43 23.73 3.123 9.821a4.861 4.861 0 014.166-8.784l36.648 17.394a4.86 4.86 0 01.799 8.305l-36.647 27a4.844 4.844 0 01-2.878.948" fill="#CEDC21" class="logo-brand-light"/><path d="M10.066 31.725v20.553L24.01 42.006z" fill="#1E7A44" class="logo-brand-dark"/><path d="M10.066 5.431A4.861 4.861 0 005.206.57 4.86 4.86 0 00.347 5.431v61.165h9.72V5.431h-.001z" fill="#CEDC21" class="logo-brand-light"/><path d="M74.355 41.412c3.114.884 4.84 3.704 4.84 7.238 0 5.513-3.368 8.082-7.955 8.082H60.761V27.271h9.259c4.504 0 7.997 2.146 7.997 7.743 0 2.821-1.179 5.43-3.662 6.398m-4.293-.716c3.324 0 6.018-1.179 6.018-5.724 0-4.586-2.776-5.808-6.145-5.808h-7.197v11.531h7.324v.001zm1.052 14.099c3.366 0 6.06-1.768 6.06-6.145 0-4.713-3.072-6.144-6.901-6.144h-7.534v12.288h8.375v.001zM98.893 27.271v1.81h-8.122v27.651h-1.979V29.081h-8.123v-1.81zM112.738 26.85c5.01 0 9.554 2.524 10.987 8.543h-1.895c-1.348-4.923-5.303-6.732-9.134-6.732-6.944 0-10.605 5.681-10.605 13.341 0 8.08 3.661 13.256 10.646 13.256 4.125 0 7.828-1.85 9.26-7.279h1.895c-1.264 6.271-6.229 9.174-11.154 9.174-7.87 0-12.583-5.808-12.583-15.15 0-8.966 4.969-15.153 12.583-15.153M138.709 27.271c5.091 0 8.795 3.326 8.795 9.764 0 6.06-3.704 9.722-8.795 9.722h-7.746v9.976h-1.935V27.271h9.681zm0 17.549c3.745 0 6.816-2.397 6.816-7.827 0-5.429-2.947-7.869-6.816-7.869h-7.746V44.82h7.746zM147.841 56.732v-.255l11.741-29.29h.885l11.615 29.29v.255h-2.062l-3.322-8.501H153.27l-3.324 8.501h-2.105zm12.164-26.052l-6.059 15.697h12.078l-6.019-15.697zM189.551 27.271h2.104v.293l-9.176 16.92v12.248h-2.02V44.484l-9.216-16.961v-.252h2.147l3.997 7.492 4.043 7.786h.04l4.081-7.786z" class="logo-brand-text"/></g></svg>
@@ -51,14 +51,12 @@
</a>
@if (env.OnionUrl != null)
{
<span>
<a class="onion" href="@env.OnionUrl" target="_blank">
<img src="~/img/icons/onion.svg" width="26" height="32" />
</a>
</span>
<a class="onion" href="@env.OnionUrl" target="_blank">
<img src="~/img/icons/onion.svg" width="26" height="32" />
</a>
}
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<svg class="navbar-toggler-icon" viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">

View File

@@ -47,10 +47,20 @@ a {
transition-property: background, color;
}
.navbar-dark .navbar-brand,
.navbar-dark .navbar-brand:hover,
.navbar-dark .navbar-brand:focus {
color: inherit ;
.navbar .onion {
margin-right: auto;
}
.navbar-brand,
.navbar-brand:hover,
.navbar-brand:focus {
color: inherit;
}
.navbar-toggler {
color: inherit;
border-color: inherit;
opacity: .5;
}
/* Admin Sidebar Navigation */

View File

@@ -127,12 +127,14 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
background: var(--btcpay-header-bg);
}
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus,
#mainNav .navbar-nav > li.nav-item > a.nav-link:hover {
border-bottom-color: var(--btcpay-header-color-link-accent);
}
header.masthead::before,
.service-box img {
filter: hue-rotate(318deg);
}
@media (min-width: 992px) {
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus,
#mainNav .navbar-nav > li.nav-item > a.nav-link:hover {
border-bottom-color: var(--btcpay-header-color-link-accent);
}
}