change header

This commit is contained in:
Luna D. 2024-07-02 21:35:38 +02:00
parent c9846820ff
commit 038d74d17c
No known key found for this signature in database
GPG key ID: 4B1C63448394F688
5 changed files with 56 additions and 7 deletions

View file

@ -22,8 +22,8 @@ $font-family-heading: $font-family-base;
--block-header-height: 2rem;
/* Navbar */
--navbar-size: 4rem;
--navbar-secondary-size: 2.25rem;
--navbar-size: 3rem;
--navbar-secondary-size: 2.5rem;
--navbar-input-size: 2rem;
--navbar-input-width: 18vw;
--navbar-input-max-width: 22rem;

View file

@ -1,3 +1,35 @@
@define-mixin dropdown-type $type {
.dropdown--$(type) .dropdown__content {
background: var(--$(type)-muted-color);
border-color: var(--$(type)-border-color);
}
.dropdown--$(type) .dropdown__text {
background: var(--$(type)-muted-color);
border-color: var(--$(type)-border-color);
}
.dropdown--$(type) .dropdown__item:hover .dropdown__text {
background: var(--$(type)-color);
}
.dropdown--$(type) .dropdown__icon {
background: var(--$(type)-dark-color);
}
.dropdown--$(type) .dropdown__item:hover .dropdown__icon {
background: var(--$(type)-color);
}
.dropdown--$(type) .dropdown__separator {
border-color: var(--$(type)-border-color);
}
.dropdown--$(type) .dropdown__link:hover {
background: var(--$(type)-color);
}
}
.dropdown {
position: relative;
display: inline-block;
@ -68,3 +100,10 @@
.dropdown__link:hover {
background: var(--primary-color);
}
@mixin dropdown-type secondary;
@mixin dropdown-type success;
@mixin dropdown-type warning;
@mixin dropdown-type danger;
@mixin dropdown-type information;
@mixin dropdown-type special;

View file

@ -2,6 +2,7 @@ nav.header__staff {
display: flex;
line-height: var(--navbar-secondary-size);
border-radius: var(--border-radius-outer);
margin: auto;
}
.header__counter__admin {
@ -25,6 +26,14 @@ nav.header__staff {
border-radius: var(--border-radius-outer);
}
.header--secondary__admin-links .header__link {
color: var(--text-color) !important;
}
.header--secondary__admin-links .header__link:hover {
color: var(--danger-link-color) !important;
}
@mixin if-mobile {
.header--secondary__admin-links {
justify-content: center;

View file

@ -5,12 +5,13 @@ header {
font-size: var(--font-header-size);
gap: var(--padding-large);
align-items: center;
background: var(--primary-color);
}
.header__link {
@mixin animated-transition;
position: relative;
color: var(--text-color) !important;
color: var(--text-light-color) !important;
}
.header__link:hover {
@ -58,6 +59,7 @@ header {
}
/* Old style counter */
/* todo: remove */
.header__counter--simple {
display: inline-flex;
padding: 0 var(--padding-small);
@ -98,8 +100,8 @@ header {
.nav-container {
display: flex;
flex-flow: column;
gap: var(--padding-normal);
padding: 0 var(--padding-normal);
flex-wrap: wrap;
}
@ -107,7 +109,6 @@ nav.header__secondary {
display: flex;
flex: 1 0 auto;
line-height: var(--navbar-secondary-size);
border-radius: var(--border-radius-outer);
padding: 0 var(--padding-large);
font-size: var(--font-header-size);
gap: var(--padding-large);

View file

@ -1,6 +1,6 @@
.header--secondary__admin-links.js-staff-action
= if manages_users?(@conn) do
.dropdown.hidden--mobile
.dropdown.dropdown--danger.hidden--mobile
a.header__link title="Admin"
i.fa.fa-bars>
i.fa.fa-caret-down
@ -108,7 +108,7 @@
= @dnp_entry_count
= if manages_bans?(@conn) do
.dropdown.hidden--mobile
.dropdown.dropdown--danger.hidden--mobile
a.header__link title="Bans"
i.fa.fa-gavel>
span