Page Menu
Home
WickedGov Phorge
Search
Configure Global Search
Log In
Files
F5974672
Header.less
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Flag For Later
Award Token
Size
4 KB
Referenced Files
None
Subscribers
None
Header.less
View Options
.
citizen-header
{
--header-icon-size
:
~
'calc( var( --header-button-size ) / 2 )'
;
--header-button-size
:
~
'calc( var( --header-size ) - var( --space-xs ) * 2 )'
;
position
:
fixed
;
top
:
var
(
--header-inset-block-start
);
right
:
var
(
--header-inset-inline-end
);
bottom
:
var
(
--header-inset-block-end
);
left
:
var
(
--header-inset-inline-start
);
z-index
:
@
z-index
-
fixed
;
display
:
flex
;
flex-direction
:
var
(
--header-direction
);
gap
:
var
(
--space-xxs
);
padding
:
~
'var( --space-xs ) max( env( safe-area-inset-right ), var( --space-xs ) ) max( env( safe-area-inset-bottom ), var( --space-xs ) ) max( env( safe-area-inset-left ), var( --space-xs ) )'
;
background-color
:
var
(
--color-surface-0
);
border-color
:
var
(
--border-color-base
);
border-style
:
solid
;
border-width
:
0
;
border-block-start-width
:
var
(
--header-border-block-start-width
);
border-block-end-width
:
var
(
--header-border-block-end-width
);
border-inline-start-width
:
var
(
--header-border-inline-start-width
);
border-inline-end-width
:
var
(
--header-border-inline-end-width
);
&__item
{
display
:
flex
;
align-items
:
center
;
}
&
__button
{
display
:
grid
;
place-items
:
center
;
width
:
var
(
--header-button-size
);
height
:
var
(
--header-button-size
);
contain
:
strict
;
border-radius
:
var
(
--border-radius-base
);
//
Pure
CSS
icons
&Icon
{
width
:
var
(
--header-icon-size
);
height
:
var
(
--header-icon-size
);
contain
:
strict
;
overflow
:
hidden
;
//
Sometimes
CSS
animation
can
clip
opacity
:
var
(
--opacity-icon-base
);
filter
:
var
(
--filter-invert
);
transition
:
var
(
--transition-hover
);
transition-property
:
transform
,
opacity
;
}
&
Icon
,
.
citizen-ui-icon
{
margin
:
auto
;
}
&
:
hover
{
background-color
:
var
(
--background-color-button-quiet--hover
);
.citizen-header__buttonIcon
{
opacity
:
var
(
--opacity-icon-base--hover
);
}
}
&
:
active
{
background-color
:
var
(
--background-color-button-quiet--active
);
.citizen-header__buttonIcon
{
opacity
:
var
(
--opacity-icon-base--selected
);
}
}
//
Disable
default
padding
when
menu
item
is
used
as
header
button
.
citizen-menu
.
mw-list-item
&
{
padding
:
0
;
}
}
&
__logo
{
padding
:
0
var
(
--space-xs
)
0
0
;
margin
:
0
var
(
--space-xxs
);
border
:
0
solid
var
(
--border-color-subtle
);
border-right-width
:
var
(
--border-width-base
);
img
{
margin
:
auto
;
}
.
citizen-ui-icon
{
position
:
absolute
;
inset
:
0
;
}
}
&
__inner
{
display
:
flex
;
flex-grow
:
1
;
flex-direction
:
var
(
--header-direction
);
gap
:
var
(
--space-xxs
);
justify-content
:
space-between
;
min-width
:
0
;
overflow-x
:
auto
;
}
&
__start
,
&
__end
{
display
:
flex
;
flex-shrink
:
0
;
//
let
_inner
handle
the
overflow
flex-direction
:
var
(
--header-direction
);
gap
:
var
(
--space-xxs
);
//
Hide
top-level
menu
header
labels
>
.citizen-menu
>
.citizen-menu__heading
{
.mixin-citizen-screen-reader-only
;
}
}
&
__start
{
align-items
:
center
;
min-width
:
0
;
}
.
citizen-dropdown
{
&-summary
{
display
:
grid
;
place-items
:
center
;
width
:
var
(
--header-button-size
);
height
:
var
(
--header-button-size
);
contain
:
strict
;
border-radius
:
var
(
--border-radius-base
);
}
}
}
//
Notifications
#
p-notifications
{
ul
{
display
:
flex
;
flex-direction
:
var
(
--header-direction
);
gap
:
var
(
--space-xxs
);
align-items
:
center
;
}
}
.
client-nojs
{
//
Hide
preferences
button
completely
when
JS
is
not
supported
//
Since
it
won't
do
anything
.citizen-preferences
{
display
:
none
;
}
}
//
Reset
hover
styles
if
it
is
a
touch
device
//
This
is
dumb
but
hover
:
hover
overrides
active
states
@
media
(
hover
:
none
)
{
.
citizen-header
{
&__button
{
&:hover
{
background-color
:
transparent
;
.citizen-header__buttonIcon
{
opacity
:
var
(
--opacity-icon-base
);
}
}
}
}
}
@
media
(
min-width
:
@
min-width-breakpoint-desktop
)
{
.
citizen-header
{
inset-block
:
var
(
--header-inset-block-start
)
var
(
--header-inset-block-end
);
inset-inline
:
var
(
--header-inset-inline-start
)
var
(
--header-inset-inline-end
);
border-block-start-width
:
var
(
--header-border-block-start-width
);
border-block-end-width
:
var
(
--header-border-block-end-width
);
border-inline-start-width
:
var
(
--header-border-inline-start-width
);
border-inline-end-width
:
var
(
--header-border-inline-end-width
);
.citizen-header-position-left
&__logo,
.citizen-header-position-right
&__logo
{
padding
:
0
0
var
(
--space-xs
)
0
;
margin
:
var
(
--space-xxs
)
0
;
border-right
:
0
;
border-bottom-width
:
var
(
--border-width-base
);
}
}
}
File Metadata
Details
Attached
Mime Type
text/plain
Expires
Sat, Oct 3, 17:37 (1 d, 23 h)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
bf/f0/39fc5067242c0c9db7bbc88d3b05
Default Alt Text
Header.less (4 KB)
Attached To
Mode
rMWPROD MediaWiki Production
Attached
Detach File
Event Timeline
Log In to Comment