MediaWiki:Navbar.css: Difference between revisions
From The Seven Sages of Rome
No edit summary |
No edit summary |
||
| (39 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* Base navbar styling */ | |||
#mw-navigation { | #mw-navigation { | ||
z-index: 999; | z-index: 999; | ||
background-color: #FCFCFA !important; | |||
padding: 0.5rem 2rem !important; | |||
} | |||
- | |||
@media (max-width: 799px){ | |||
#mw-navigation { | |||
z-index: 999; | |||
background-color: #FCFCFA !important; | |||
padding: 0.5rem 0.5rem !important; | |||
} | |||
} | |||
/* Top tier navbar styling */ | |||
.navbar-top { | |||
background-color: #FCFCFA !important; | |||
border-bottom: 1px solid #e5e7eb; | |||
padding: 0.5rem 2rem; | |||
z-index: 1000; | |||
} | |||
.navbar-top .navbar-collapse { | |||
align-items: end !important; | |||
} | |||
#mv-navigation > .navbar-collapse > .navbar-nav > div:nth-child(2) > a { | |||
font-weight: 800 !important; | |||
} | |||
@media (max-width: 799px){ | |||
.navbar-top { | |||
padding: 0.5rem 0.5rem; | |||
} | |||
} | |||
.navbar-top .navbar-brand { | |||
font-family: 'Playfair Display', Georgia, serif; | |||
font-size: 1.25rem; | |||
font-weight: 400; | |||
color: #000000; | |||
} | |||
.navbar-top .nav-link { | |||
color: black !important; | |||
padding: 0.5rem 1rem; | |||
text-decoration: none; | |||
} | |||
.navbar-top .nav-link:hover { | |||
color: black !important; | |||
font-weight: 600 !important; | |||
} | |||
.navbar-top .nav-link:active { | |||
color: black !important; | |||
background: transparent !important; | |||
font-weight: 600 !important; | |||
} | |||
/* Second tier navbar (main MediaWiki navbar) - white background with borders */ | |||
.sticky-top:not(.navbar-top) { | |||
background-color: #FCFCFA !important; | |||
border-bottom: 1px solid #e5e7eb; | |||
top: 0; | |||
z-index: 998; | |||
} | |||
.p-navbar { | |||
background-color: #FCFCFA !important; | |||
} | |||
.p-navbar.scrolled { | |||
border-bottom: 1px solid #e5e7eb; | |||
} | } | ||
| Line 16: | Line 85: | ||
} | } | ||
/* Custom navbar breakpoint */ | .p-navbar .nav-link:active { | ||
color: black !important; | |||
background: transparent !important; | |||
font-weight: 600 !important; | |||
} | |||
.p-navbar .navbar-toggler, | |||
.navbar-top .navbar-toggler { | |||
color: rgb(0, 0, 0) !important; | |||
border-color: rgba(0, 0, 0, 0.5) !important; | |||
} | |||
/* Custom navbar breakpoint - ONLY for second tier navbar */ | |||
@media (min-width: 1350px){ | @media (min-width: 1350px){ | ||
.navbar-expand-custom { | .sticky-top:not(.navbar-top).navbar-expand-custom { | ||
flex-direction: row; | flex-direction: row; | ||
flex-wrap: nowrap; | flex-wrap: nowrap; | ||
justify-content: flex-start; | justify-content: flex-start; | ||
} | } | ||
.navbar-expand-custom .navbar-nav { | .sticky-top:not(.navbar-top).navbar-expand-custom .navbar-nav { | ||
flex-direction: row; | flex-direction: row; | ||
} | } | ||
.navbar-expand-custom .dropdown-menu { | .sticky-top:not(.navbar-top).navbar-expand-custom .dropdown-menu { | ||
position: absolute; | position: absolute; | ||
} | } | ||
.navbar-expand-custom .nav-link { | .sticky-top:not(.navbar-top).navbar-expand-custom .nav-link { | ||
padding-right: .5rem; | padding-right: .5rem; | ||
padding-left: .5rem; | padding-left: .5rem; | ||
} | } | ||
.navbar-expand-custom > .container { | .sticky-top:not(.navbar-top).navbar-expand-custom > .container { | ||
flex-wrap: nowrap; | flex-wrap: nowrap; | ||
} | } | ||
.navbar-expand-custom .navbar-collapse { | .sticky-top:not(.navbar-top).navbar-expand-custom .navbar-collapse { | ||
display: flex!important; | display: flex !important; | ||
flex-basis: auto; | flex-basis: auto; | ||
} | } | ||
.navbar-expand-custom .navbar-toggler { | .sticky-top:not(.navbar-top).navbar-expand-custom .navbar-toggler { | ||
display: none; | display: none; | ||
} | } | ||
} | |||
/* Apply consistent padding to both navbars */ | |||
.navbar-top .container, | |||
.navbar-horizontal .container { | |||
padding-left: 2rem; | |||
padding-right: 2rem; | |||
} | |||
@media (max-width: 799px){ | |||
.navbar-top .container, | |||
.navbar-horizontal .container { | |||
padding-left: 0.5rem; | |||
padding-right: 0.5rem; | |||
} | |||
} | |||
#mw-navigation .navbar-nav.right .nav-item:nth-of-type(2) > .nav-link { | |||
font-weight: 600; | |||
} | } | ||
Latest revision as of 13:27, 13 January 2026
/* Base navbar styling */
#mw-navigation {
z-index: 999;
background-color: #FCFCFA !important;
padding: 0.5rem 2rem !important;
}
@media (max-width: 799px){
#mw-navigation {
z-index: 999;
background-color: #FCFCFA !important;
padding: 0.5rem 0.5rem !important;
}
}
/* Top tier navbar styling */
.navbar-top {
background-color: #FCFCFA !important;
border-bottom: 1px solid #e5e7eb;
padding: 0.5rem 2rem;
z-index: 1000;
}
.navbar-top .navbar-collapse {
align-items: end !important;
}
#mv-navigation > .navbar-collapse > .navbar-nav > div:nth-child(2) > a {
font-weight: 800 !important;
}
@media (max-width: 799px){
.navbar-top {
padding: 0.5rem 0.5rem;
}
}
.navbar-top .navbar-brand {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.25rem;
font-weight: 400;
color: #000000;
}
.navbar-top .nav-link {
color: black !important;
padding: 0.5rem 1rem;
text-decoration: none;
}
.navbar-top .nav-link:hover {
color: black !important;
font-weight: 600 !important;
}
.navbar-top .nav-link:active {
color: black !important;
background: transparent !important;
font-weight: 600 !important;
}
/* Second tier navbar (main MediaWiki navbar) - white background with borders */
.sticky-top:not(.navbar-top) {
background-color: #FCFCFA !important;
border-bottom: 1px solid #e5e7eb;
top: 0;
z-index: 998;
}
.p-navbar {
background-color: #FCFCFA !important;
}
.p-navbar.scrolled {
border-bottom: 1px solid #e5e7eb;
}
.p-navbar .nav-link {
color: black !important;
}
.p-navbar .nav-link:hover {
color: black !important;
font-weight: 600 !important;
}
.p-navbar .nav-link:active {
color: black !important;
background: transparent !important;
font-weight: 600 !important;
}
.p-navbar .navbar-toggler,
.navbar-top .navbar-toggler {
color: rgb(0, 0, 0) !important;
border-color: rgba(0, 0, 0, 0.5) !important;
}
/* Custom navbar breakpoint - ONLY for second tier navbar */
@media (min-width: 1350px){
.sticky-top:not(.navbar-top).navbar-expand-custom {
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
.sticky-top:not(.navbar-top).navbar-expand-custom .navbar-nav {
flex-direction: row;
}
.sticky-top:not(.navbar-top).navbar-expand-custom .dropdown-menu {
position: absolute;
}
.sticky-top:not(.navbar-top).navbar-expand-custom .nav-link {
padding-right: .5rem;
padding-left: .5rem;
}
.sticky-top:not(.navbar-top).navbar-expand-custom > .container {
flex-wrap: nowrap;
}
.sticky-top:not(.navbar-top).navbar-expand-custom .navbar-collapse {
display: flex !important;
flex-basis: auto;
}
.sticky-top:not(.navbar-top).navbar-expand-custom .navbar-toggler {
display: none;
}
}
/* Apply consistent padding to both navbars */
.navbar-top .container,
.navbar-horizontal .container {
padding-left: 2rem;
padding-right: 2rem;
}
@media (max-width: 799px){
.navbar-top .container,
.navbar-horizontal .container {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
}
#mw-navigation .navbar-nav.right .nav-item:nth-of-type(2) > .nav-link {
font-weight: 600;
}