151 lines
2.4 KiB
SCSS
151 lines
2.4 KiB
SCSS
|
|
.btn:focus {
|
|
box-shadow: 0 0 0 0.1rem var(--navbar-btn-hover-outline-color);
|
|
}
|
|
|
|
.navbar {
|
|
background-color: var(--navbar-bg-color);
|
|
|
|
.navbar-nav {
|
|
.nav-item {
|
|
&.search {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.side-nav-toggle {
|
|
cursor: pointer;
|
|
margin-left: 0.8125rem;
|
|
font-size: 1.2rem;
|
|
|
|
i {
|
|
color: var(--navbar-fa-icon-color);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
&:hover {
|
|
i {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-item:not(.search) {
|
|
display: unset;
|
|
opacity: 0.8;
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
// On Really small screens, hide the server settings wheel and show it in nav
|
|
// TODO: Look into doing this with bootstrap 5 (and moving to _utilities.scss)
|
|
.xs-only {
|
|
display: none;
|
|
}
|
|
|
|
.not-xs-only {
|
|
display: inherit;
|
|
}
|
|
|
|
@media only screen and (max-width:300px) {
|
|
.xs-only {
|
|
display: inherit;
|
|
}
|
|
|
|
.not-xs-only {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.nav-item.dropdown {
|
|
position: unset;
|
|
}
|
|
|
|
.navbar-brand {
|
|
font-family: var(--brand-font-family);
|
|
font-weight: bold;
|
|
margin: 0 2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.logo-icon {
|
|
align-items: center;
|
|
align-self: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 1.5rem;
|
|
width: 1.5rem;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.logo {
|
|
vertical-align: text-top;
|
|
max-height: 1.75rem;
|
|
line-height: 2.0625rem;
|
|
margin-left: 0.3125rem;
|
|
}
|
|
|
|
.phone-hidden {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.focus-visible:focus {
|
|
visibility: visible;
|
|
color: var(--nav-header-text-color);
|
|
}
|
|
|
|
.ng-autocomplete {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.primary-text {
|
|
color: var(--nav-header-text-color);
|
|
border: none;
|
|
}
|
|
|
|
.search-result {
|
|
width: 1.5rem;
|
|
margin-top: 0.3125rem;
|
|
}
|
|
|
|
.scroll-to-top:hover {
|
|
animation: MoveUpDown 1s linear infinite;
|
|
}
|
|
|
|
.text-light {
|
|
color: var(--search-result-text-lite-color) !important;
|
|
}
|
|
|
|
/* small devices (phones, 650px and down) */
|
|
@media only screen and (max-width:650px) {
|
|
:host ::ng-deep {
|
|
.navbar-nav {
|
|
.nav-item.search {
|
|
.ng-autocomplete {
|
|
input {
|
|
font-size: 1rem !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.navbar-nav {
|
|
width: 0;
|
|
}
|
|
|
|
.navbar-brand {
|
|
margin: 0 1rem 0 1rem;
|
|
|
|
.logo-icon {
|
|
margin: unset;
|
|
}
|
|
}
|
|
}
|