philomena/assets/css/views/header.css

173 lines
3.5 KiB
CSS
Raw Normal View History

2023-11-23 22:20:02 +01:00
header {
display: flex;
2023-11-23 17:07:49 +01:00
line-height: var(--navbar-size);
2024-04-17 16:52:50 +02:00
padding: 0 var(--padding-large);
2023-11-23 17:07:49 +01:00
font-size: var(--font-header-size);
2023-11-23 22:20:02 +01:00
gap: var(--padding-large);
align-items: center;
2024-07-02 21:35:38 +02:00
background: var(--primary-color);
2023-11-23 17:07:49 +01:00
}
2023-11-23 22:20:02 +01:00
.header__link {
2024-05-20 23:57:10 +02:00
@mixin animated-transition;
position: relative;
2024-07-02 21:35:38 +02:00
color: var(--text-light-color) !important;
2023-11-23 22:20:02 +01:00
}
2023-11-23 17:07:49 +01:00
2024-05-20 23:57:10 +02:00
.header__link:hover {
@mixin animated-transition;
color: var(--primary-link-color) !important;
}
2023-11-23 22:20:02 +01:00
.header__link--user {
display: flex;
align-items: center;
gap: var(--padding-normal);
2023-11-23 17:07:49 +01:00
}
2023-11-23 22:20:02 +01:00
.header__logo {
2024-05-20 22:30:41 +02:00
font-size: var(--font-h2-size);
2023-11-23 17:07:49 +01:00
}
2023-11-23 22:20:02 +01:00
.header__search {
display: flex;
flex-wrap: nowrap;
align-items: center;
2023-11-23 22:20:02 +01:00
border: 0;
border-radius: var(--border-radius-inner);
background: var(--primary-muted-color);
height: var(--navbar-input-size);
2023-11-23 17:07:49 +01:00
}
2023-11-23 22:20:02 +01:00
.header__search > button {
background: 0;
border: 0;
2023-11-23 17:07:49 +01:00
}
.header__counter {
position: absolute;
background: var(--danger-color);
border-radius: 100%;
min-width: var(--number-badge-size);
line-height: var(--number-badge-size);
font-size: var(--number-badge-size);
font-weight: bold;
padding: var(--number-badge-padding);
text-align: center;
top: var(--number-badge-header-vertical-offset);
left: var(--number-badge-header-horizontal-offset);
}
/* Old style counter */
2024-07-02 21:35:38 +02:00
/* todo: remove */
.header__counter--simple {
display: inline-flex;
padding: 0 var(--padding-small);
line-height: inherit;
text-align: center;
background: var(--primary-muted-color);
}
2023-11-23 17:07:49 +01:00
.header__input {
@mixin animated-transition;
2023-11-23 17:07:49 +01:00
height: var(--navbar-input-size);
font-size: var(--font-size);
2023-11-23 22:20:02 +01:00
background: 0;
2023-11-23 17:07:49 +01:00
border: 0;
}
2023-11-23 22:20:02 +01:00
.header__input--text {
width: var(--navbar-input-width);
max-width: var(--navbar-input-max-width);
2023-11-23 17:07:49 +01:00
}
2023-11-23 22:20:02 +01:00
.header__search__button {
display: flex;
align-items: center;
height: var(--navbar-input-size);
color: var(--text-color) !important;
padding: 0 var(--padding-normal);
2023-11-23 17:07:49 +01:00
}
2023-11-23 22:20:02 +01:00
.header__search__button:hover {
background: var(--primary-color);
cursor: pointer;
2023-11-23 17:07:49 +01:00
}
2023-11-23 22:20:02 +01:00
.header__filter-form {
padding: 0 var(--padding-normal);
2023-11-23 17:07:49 +01:00
}
.nav-container {
display: flex;
2024-07-02 21:35:38 +02:00
flex-flow: column;
gap: var(--padding-normal);
flex-wrap: wrap;
}
2023-11-23 22:20:02 +01:00
nav.header__secondary {
display: flex;
flex: 1 0 auto;
2023-11-23 22:20:02 +01:00
line-height: var(--navbar-secondary-size);
2024-04-17 16:52:50 +02:00
padding: 0 var(--padding-large);
2023-11-23 22:20:02 +01:00
font-size: var(--font-header-size);
gap: var(--padding-large);
align-items: center;
background: var(--primary-color);
}
nav.header__secondary .fa,
nav.header__staff .fa {
display: inline-flex;
text-align: center;
font-size: var(--font-small-icon-size);
width: var(--font-small-icon-size);
height: var(--font-small-icon-size);
margin-right: var(--padding-tiny);
}
nav.header__secondary .header__link {
color: var(--text-light-color) !important;
2023-11-23 17:07:49 +01:00
}
2024-05-20 23:57:10 +02:00
nav.header__secondary .header__link:hover {
color: var(--primary-link-color) !important;
}
2023-11-23 22:20:02 +01:00
nav.dropdown__content {
line-height: var(--navbar-secondary-size);
2023-11-23 17:07:49 +01:00
}
2024-05-20 21:25:43 +02:00
i.favicon-home {
background-image: url("/favicon.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
min-width: 1em;
height: 1em;
display: inline-block;
}
@mixin if-mobile {
2023-11-23 22:20:02 +01:00
header {
gap: var(--padding-normal);
flex-wrap: wrap;
margin-bottom: var(--padding-normal);
2024-04-17 16:52:50 +02:00
padding: 0 var(--padding-normal);
2023-11-23 22:20:02 +01:00
}
nav.header__secondary {
display: none;
}
form.header__search {
width: 100%;
order: 1;
}
.header__input--text {
width: 100% !important;
max-width: 100% !important;
}
2023-11-23 17:07:49 +01:00
}