mirror of
https://github.com/philomena-dev/philomena.git
synced 2025-01-19 22:27:59 +01:00
change header
This commit is contained in:
parent
c9846820ff
commit
038d74d17c
5 changed files with 56 additions and 7 deletions
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue