css.toolbar.css Maven / Gradle / Ivy
body {
margin-top: 50px;
}
nav.navbar {
height: 50px;
line-height: 1;
font-size: 24px;
font-family: var(--font-family-toolbar-details);
background-color: var(--toolbar);
box-shadow: 0 0 6px;
}
nav.navbar-dark * {
color: var(--toolbar-entry);
transition: color .2s ease-out;
}
nav.navbar-dark a:hover *, nav.navbar-dark a:focus * {
color: var(--toolbar-active);
}
nav.navbar a:hover {
text-decoration: none;
}
nav.navbar a {
cursor: pointer;
}
.navbar-brand {
margin-right: auto;
margin-left: auto;
font-size: inherit;
display: flex;
align-items: center;
}
.navbar-brand .project-logo {
display: none;
height: 40px;
margin-right: 7px;
}
.navbar-brand .project-details * {
margin: 0;
line-height: inherit;
}
.navbar-brand .project-details h1 {
font-size: 1em;
font-family: var(--font-family-toolbar-main);
font-weight: var(--font-weight-toolbar-main);
}
.navbar-brand .project-details h2 {
font-size: 0.5em;
margin-top: 2px;
font-weight: var(--font-weight-toolbar-details);
}
#search-api-input {
color: initial;
width: 10em;
}
#searchbar {
display: none;
}
#searchbar.shown {
display: initial;
margin-left: auto;
margin-right: auto;
}
#searchbar.shown + .navbar-brand {
display: none;
}
#search-icon {
margin-left: .5em;
}
@media (min-width: 420px) {
.navbar-brand .project-logo {
display: inline;
}
}
@media (min-width: 768px) {
#search-icon, #searchbar.shown {
margin-left: 1em;
margin-right: initial;
}
#searchbar.shown + .navbar-brand {
display: flex;
}
}
@media (min-width: 1200px) {
#searchbar.shown {
position: absolute;
margin-left: 4em;
}
}