lib.itmens/common/static/scss/_header.scss

174 lines
4 KiB
SCSS
Raw Normal View History

2023-05-26 16:14:07 -04:00
body {
&>header.container-fluid {
padding: 0px;
2023-05-26 16:14:07 -04:00
&>nav {
ul.nav-logo {
margin-left: var(--pico-nav-link-spacing-horizontal);
}
.nav-search form {
margin-bottom: 0px;
}
details.dropdown summary:not([role]) {
border-color: transparent;
background-color: transparent;
}
ul {
min-width: -webkit-max-content;
min-width: -moz-max-content;
}
ul li a.current {
font-weight: bold;
color: var(--pico-primary);
}
.nav-search,
.nav-search li {
width: 100%;
}
.nav-search select {
max-width: max-content;
}
.nav-search input[type="submit"] {
2023-12-01 22:12:45 -05:00
background-color: var(--pico-primary-background);
border-color: var(--pico-primary-background);
2023-05-26 16:14:07 -04:00
padding-left: calc(var(--pico-nav-link-spacing-horizontal)*2);
padding-right: calc(var(--pico-nav-link-spacing-horizontal)*2);
}
.nav-logo img {
max-height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 - var(--pico-nav-link-spacing-horizontal) * 2);
}
/* Dark color scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
.nav-logo img {
filter: brightness(100%) grayscale(100%) invert(20%);
}
}
/* Dark color scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
.nav-logo img [data-theme="dark"] {
filter: brightness(100%) grayscale(100%) invert(20%);
}
.unhide {
display: unset !important;
}
.nav-dropdown summary {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.nav-dropdown summary::after {
height: calc(1rem * var(--pico-line-height, 1.5) + 8px) !important;
}
.nav-dropdown {
2023-06-08 23:37:50 -04:00
margin-right: 0rem !important;
// this fixes positioning in iOS 14 and lower but will break in other browsers and iOS 15+
// details.dropdown {
// display: block !important;
// }
2023-05-26 16:14:07 -04:00
ul li a {
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal) !important
}
}
.avatar {
display: inline;
img {
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2 - var(--pico-border-width) * 2);
width: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2 - var(--pico-border-width) * 2);
}
}
}
}
2023-06-09 09:36:18 -04:00
//pack for small phones like iPhone 5s
2023-06-08 23:37:50 -04:00
@media (max-width: 320px) {
.nav-dropdown {
li {
padding-left: 0;
padding-right: 0;
summary {
padding: 0 !important;
}
2023-06-08 23:37:50 -04:00
details.dropdown summary::after {
width: 0;
}
}
}
}
2023-05-26 16:14:07 -04:00
@media (max-width: 768px) {
body>header {
position: sticky;
top: 0px;
background: var(--pico-background-color);
z-index: 999;
box-shadow: var(--pico-box-shadow);
}
2023-05-26 16:14:07 -04:00
nav {
display: flex;
flex-flow: row wrap;
}
2023-05-26 16:14:07 -04:00
.nav-search {
order: 999;
display: none;
2024-05-29 21:34:34 -04:00
min-width: unset !important;
li {
padding: 0px;
padding-bottom: 4px;
select {
max-width: 6em !important;
}
input[type="submit"] {
padding-left: calc(var(--pico-nav-link-spacing-horizontal)*1);
padding-right: calc(var(--pico-nav-link-spacing-horizontal)*1);
}
}
2023-05-26 16:14:07 -04:00
}
2024-05-29 21:34:34 -04:00
.nav-links li.small-only {
font-size: 150%;
a {
color: var(--pico-secondary);
}
2023-05-26 16:14:07 -04:00
}
2024-05-29 21:34:34 -04:00
.nav-dropdown {
li {
padding-left: 0;
padding-right: 0;
2024-05-29 21:34:34 -04:00
summary {
padding: 0 !important;
}
}
2023-05-26 16:14:07 -04:00
}
2024-05-29 21:34:34 -04:00
/*
2023-05-26 16:14:07 -04:00
.nav-dropdown::after {
flex-basis: 100%;
width: 0;
}
2024-05-29 21:34:34 -04:00
*/
}
}