ui: (pf4) fix navbar

passbook/core/templates/base/page.html

@@ -25,8 +25,8 @@
             </a>
         </div>
         <div class="pf-c-page__header-nav">
-            <nav class="pf-c-nav" aria-label="Nav">
+            <nav class="pf-c-nav pf-m-horizontal" aria-label="Nav">
-                <ul class="pf-c-nav__horizontal-list ws-top-nav">
+                <ul class="pf-c-nav__list ws-top-nav">
                     <li class="pf-c-nav__item"><a class="pf-c-nav__link {% is_active_url 'passbook_core:overview' %}"
                             href="{% url 'passbook_core:overview' %}">{% trans 'Access' %}</a></li>
                     {% if user.is_superuser %}

passbook/static/static/passbook/pf.css

@@ -198,120 +198,6 @@ input[data-is-monospace] {
     font-family: monospace;
 }
 
-
-.ws-page-header {
-    background-color: #151515;
-    min-height: auto
-}
-
-@media (min-width: 992px) {
-    .ws-page-header .pf-c-page__header-nav {
-        margin-left:12px
-    }
-}
-
-.ws-page-header .pf-c-nav__scroll-button {
-    outline-offset: -4px;
-    height: 100%;
-    top: 0
-}
-
-.ws-page-header .pf-c-nav__horizontal-list .pf-c-nav__item {
-    margin-right: 0
-}
-
-.ws-page-header .pf-c-nav__horizontal-list .pf-c-nav__link {
-    padding-top: 22px;
-    padding-right: var(--pf-global--spacer--md);
-    padding-left: var(--pf-global--spacer--md);
-    color: var(--pf-global--Color--light-100)
-}
-
-@media (max-width: 991px) {
-    .ws-page-header .pf-c-nav__horizontal-list .pf-c-nav__link {
-        padding-top:10px
-    }
-}
-
-.ws-page-header .pf-c-nav__horizontal-list .pf-c-nav__link:after {
-    top: 0!important;
-    height: 4px
-}
-
-.ws-page-header .pf-c-nav__horizontal-list .pf-c-nav__link:active,.ws-page-header .pf-c-nav__horizontal-list .pf-c-nav__link:hover {
-    -webkit-transition: .5s;
-    transition: .5s
-}
-
-.ws-page-header .pf-c-nav__horizontal-list .pf-c-nav__link.pf-m-current,.ws-page-header .pf-c-nav__horizontal-list .pf-c-nav__link:active,.ws-page-header .pf-c-nav__horizontal-list .pf-c-nav__link:hover {
-    background-color: var(--pf-global--BackgroundColor--light-100);
-    color: #151515!important;
-    font-weight: var(--pf-global--FontWeight--normal)
-}
-
-.ws-page-header li a:after {
-    content: "";
-    position: absolute;
-    left: 50%!important;
-    bottom: 0;
-    -webkit-transform: translateX(-50%) scaleX(0);
-    transform: translateX(-50%) scaleX(0);
-    -webkit-transform-origin: 50% 50%;
-    transform-origin: 50% 50%;
-    width: 100%;
-    height: 1px;
-    background-color: var(--pf-global--BackgroundColor--light-100);
-    color: #151515!important;
-    -webkit-transition: -webkit-transform .25s;
-    transition: -webkit-transform .25s;
-    transition: transform .25s;
-    transition: transform .25s,-webkit-transform .25s
-}
-
-.ws-page-header li a:hover:after {
-    -webkit-transform: translateX(-50%) scaleX(1);
-    transform: translateX(-50%) scaleX(1)
-}
-
-.ws-page-header li a.pf-m-current:after {
-    left: 0!important;
-    -webkit-transform: none;
-    transform: none
-}
-
-.ws-page-sidebar#page-sidebar {
-    color: #fff;
-    box-shadow: none
-}
-
-.ws-page-sidebar .pf-c-nav {
-    margin-top: 16px
-}
-
-.pf-site-search {
-    padding: 0 0 2px;
-    width: 150px;
-    background: transparent;
-    -webkit-transition: .25s;
-    transition: .25s
-}
-
-.ws-page-header .pf-c-page__header-brand-toggle {
-    display: none;
-    visibility: hidden
-}
-
-@media (max-width: 768px) {
-    .pf-site-search {
-        width:100px
-    }
-
-    .ws-page-header .pf-c-page__header-brand-toggle {
-        display: block;
-        visibility: visible
-    }
-}
-
 /* Form with user */
 .form-control-static {
     display: flex;