Change header into vertical header for large screen and bottom header for small screen.
这个提交包含在：
alistair3149
GitHub
父节点
c5ff5dd57f
当前提交
6de95d4fec
|
|
@ -57,6 +57,46 @@
|
|||
transition: @transition-transform, @transition-opacity--transform, @transition-visibility--transform;
|
||||
}
|
||||
|
||||
// Header card popups
|
||||
.citizen-header-card( @position ) {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
min-width: 16rem;
|
||||
max-height: ~'calc( 100vh - var( --space-sm ) * 2 )';
|
||||
margin: var( --space-sm );
|
||||
overscroll-behavior: contain;
|
||||
user-select: none;
|
||||
.citizen-card();
|
||||
.citizen-card-hide( bottom @position );
|
||||
}
|
||||
|
||||
.citizen-header-card-tablet( @position ) {
|
||||
& when ( @position = left ) {
|
||||
right: unset;
|
||||
}
|
||||
|
||||
& when ( @position = right ) {
|
||||
left: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.citizen-header-card-desktop( @position ) {
|
||||
& when ( @position = top ) {
|
||||
top: 0;
|
||||
bottom: unset;
|
||||
}
|
||||
|
||||
& when ( @position = bottom ) {
|
||||
bottom: 0;
|
||||
}
|
||||
right: unset;
|
||||
left: 100%;
|
||||
.citizen-card-hide( @position left );
|
||||
}
|
||||
|
||||
// To hide objects, but keep them accessible for screen-readers
|
||||
.hidden() {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<title>
|
||||
close
|
||||
</title>
|
||||
<path d="m4.34 2.93 12.73 12.73-1.41 1.41L2.93 4.35z"/>
|
||||
<path d="M17.07 4.34 4.34 17.07l-1.41-1.41L15.66 2.93z"/>
|
||||
</svg>
|
||||
|
之后 宽度: | 高度: | 大小: 273 B |
|
|
@ -77,12 +77,7 @@
|
|||
|
||||
// TODO: unify the dropdown menu style somewhere
|
||||
&-panel {
|
||||
position: absolute;
|
||||
top: var( --height-header );
|
||||
right: 1.25rem;
|
||||
left: 1.25rem;
|
||||
.citizen-card;
|
||||
.citizen-card-hide( top right );
|
||||
.citizen-header-card( right );
|
||||
.citizen-card-transition();
|
||||
|
||||
&.citizen-pref-panel--active {
|
||||
|
|
@ -164,20 +159,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media ( min-width: @width-breakpoint-tablet ) {
|
||||
#citizen-pref {
|
||||
position: relative;
|
||||
|
||||
&-panel {
|
||||
right: 0;
|
||||
left: unset;
|
||||
min-width: 20rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media ( hover: hover ) {
|
||||
.citizen-pref:hover .citizen-pref__button:after {
|
||||
transform: rotate3d( 0, 0, 1, 90deg );
|
||||
}
|
||||
}
|
||||
|
||||
@media ( min-width: @width-breakpoint-tablet ) {
|
||||
#citizen-pref-panel {
|
||||
.citizen-header-card-tablet( right );
|
||||
}
|
||||
}
|
||||
|
||||
@media ( min-width: @width-breakpoint-desktop ) {
|
||||
#citizen-pref-panel {
|
||||
.citizen-header-card-desktop( bottom );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
top: 100%;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
max-height: ~'calc( 100vh - var( --height-header ) )';
|
||||
max-height: ~'calc( 100vh - var( --header-size ) )';
|
||||
box-sizing: border-box;
|
||||
padding-top: 0.75rem;
|
||||
margin-top: -0.75rem;
|
||||
|
|
|
|||
|
|
@ -14,9 +14,7 @@
|
|||
font-display: swap;
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
/* stylelint-disable font-weight-notation */
|
||||
font-weight: 100 900;
|
||||
/* stylelint-enable font-weight-notation */
|
||||
src: url( '@{font-directory}RobotoVF-latin.woff2' ) format( 'woff2-variations' );
|
||||
unicode-range: U+0000-00FF;
|
||||
}
|
||||
|
|
@ -25,9 +23,7 @@
|
|||
font-display: swap;
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
/* stylelint-disable font-weight-notation */
|
||||
font-weight: 100 900;
|
||||
/* stylelint-enable font-weight-notation */
|
||||
src: url( '@{font-directory}Roboto-ItalicVF-latin.woff2' ) format( 'woff2-variations' );
|
||||
unicode-range: U+0000-00FF;
|
||||
}
|
||||
|
|
@ -37,9 +33,7 @@
|
|||
font-display: swap;
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
/* stylelint-disable font-weight-notation */
|
||||
font-weight: 100 900;
|
||||
/* stylelint-enable font-weight-notation */
|
||||
src: url( '@{font-directory}RobotoVF-latinexta.woff2' ) format( 'woff2-variations' );
|
||||
unicode-range: U+0100-017F;
|
||||
}
|
||||
|
|
@ -48,9 +42,7 @@
|
|||
font-display: swap;
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
/* stylelint-disable font-weight-notation */
|
||||
font-weight: 100 900;
|
||||
/* stylelint-enable font-weight-notation */
|
||||
src: url( '@{font-directory}Roboto-ItalicVF-latinexta.woff2' ) format( 'woff2-variations' );
|
||||
unicode-range: U+0100-017F;
|
||||
}
|
||||
|
|
@ -60,9 +52,7 @@
|
|||
font-display: swap;
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
/* stylelint-disable font-weight-notation */
|
||||
font-weight: 100 900;
|
||||
/* stylelint-enable font-weight-notation */
|
||||
src: url( '@{font-directory}RobotoVF-latinextb.woff2' ) format( 'woff2-variations' );
|
||||
unicode-range: U+0180-024F, U+0259;
|
||||
}
|
||||
|
|
@ -71,9 +61,7 @@
|
|||
font-display: swap;
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
/* stylelint-disable font-weight-notation */
|
||||
font-weight: 100 900;
|
||||
/* stylelint-enable font-weight-notation */
|
||||
src: url( '@{font-directory}Roboto-ItalicVF-latinextb.woff2' ) format( 'woff2-variations' );
|
||||
unicode-range: U+0180-024F, U+0259;
|
||||
}
|
||||
|
|
@ -83,9 +71,7 @@
|
|||
font-display: swap;
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
/* stylelint-disable font-weight-notation */
|
||||
font-weight: 100 900;
|
||||
/* stylelint-enable font-weight-notation */
|
||||
src: url( '@{font-directory}RobotoVF-greek.woff2' ) format( 'woff2-variations' );
|
||||
unicode-range: U+0370-03FF, U+1F4D;
|
||||
}
|
||||
|
|
@ -94,9 +80,7 @@
|
|||
font-display: swap;
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
/* stylelint-disable font-weight-notation */
|
||||
font-weight: 100 900;
|
||||
/* stylelint-enable font-weight-notation */
|
||||
src: url( '@{font-directory}Roboto-ItalicVF-greek.woff2' ) format( 'woff2-variations' );
|
||||
unicode-range: U+0370-03FF, U+1F4D;
|
||||
}
|
||||
|
|
@ -106,9 +90,7 @@
|
|||
font-display: swap;
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
/* stylelint-disable font-weight-notation */
|
||||
font-weight: 100 900;
|
||||
/* stylelint-enable font-weight-notation */
|
||||
src: url( '@{font-directory}RobotoVF-cyrillic.woff2' ) format( 'woff2-variations' );
|
||||
unicode-range: U+0400-052F;
|
||||
}
|
||||
|
|
@ -117,9 +99,7 @@
|
|||
font-display: swap;
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
/* stylelint-disable font-weight-notation */
|
||||
font-weight: 100 900;
|
||||
/* stylelint-enable font-weight-notation */
|
||||
src: url( '@{font-directory}Roboto-ItalicVF-cyrillic.woff2' ) format( 'woff2-variations' );
|
||||
unicode-range: U+0400-052F;
|
||||
}
|
||||
|
|
@ -129,9 +109,7 @@
|
|||
font-display: swap;
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
/* stylelint-disable font-weight-notation */
|
||||
font-weight: 100 900;
|
||||
/* stylelint-enable font-weight-notation */
|
||||
src: url( '@{font-directory}RobotoVF-latinextadd.woff2' ) format( 'woff2-variations' );
|
||||
unicode-range: U+1E00-1EFF;
|
||||
}
|
||||
|
|
@ -140,9 +118,7 @@
|
|||
font-display: swap;
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
/* stylelint-disable font-weight-notation */
|
||||
font-weight: 100 900;
|
||||
/* stylelint-enable font-weight-notation */
|
||||
src: url( '@{font-directory}Roboto-ItalicVF-latinextadd.woff2' ) format( 'woff2-variations' );
|
||||
unicode-range: U+1E00-1EFF;
|
||||
}
|
||||
|
|
@ -160,9 +136,7 @@
|
|||
font-display: swap;
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
/* stylelint-disable font-weight-notation */
|
||||
font-weight: 100 900;
|
||||
/* stylelint-enable font-weight-notation */
|
||||
src: url( '@{font-directory}RobotoVF-spec.woff2' ) format( 'woff2-variations' );
|
||||
unicode-range: U+02B0-02FF, U+2000-22F;
|
||||
}
|
||||
|
|
@ -171,9 +145,7 @@
|
|||
font-display: swap;
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
/* stylelint-disable font-weight-notation */
|
||||
font-weight: 100 900;
|
||||
/* stylelint-enable font-weight-notation */
|
||||
src: url( '@{font-directory}Roboto-ItalicVF-spec.woff2' ) format( 'woff2-variations' );
|
||||
unicode-range: U+02B0-02FF, U+2000-22F;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
.mw-theme-toggle {
|
||||
width: var( --width-button-base );
|
||||
height: var( --height-header );
|
||||
height: var( --header-size );
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@
|
|||
|
||||
.toc {
|
||||
position: fixed;
|
||||
top: ~'calc( var( --height-header ) + 1.2rem )'; // align with .mw-body-header
|
||||
left: var( --padding-page );
|
||||
top: 3rem;
|
||||
right: var( --space-sm );
|
||||
width: 100%;
|
||||
max-width: ~'calc( var( --width-toc ) - var( --padding-page ) * 2 )';
|
||||
max-width: ~'calc( var( --width-toc ) - var( --space-sm ) * 2 )';
|
||||
color: var( --color-base--subtle );
|
||||
font-size: 0.875rem;
|
||||
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
z-index: 2;
|
||||
display: block;
|
||||
overflow: visible auto;
|
||||
max-height: ~'calc( 100vh - var( --height-header ) - 3rem )'; // Somehow it works
|
||||
max-height: ~'calc( 100vh - var( --header-size ) - 3rem )'; // Somehow it works
|
||||
padding-right: 0.75rem;
|
||||
margin: 0.6rem 0 0 0;
|
||||
font-weight: 450;
|
||||
|
|
@ -120,12 +120,13 @@
|
|||
}
|
||||
|
||||
&label {
|
||||
--label-position: ~'calc( var( --width-toc ) - 20px )';
|
||||
--label-position: ~'calc( var( --width-toc ) - var( --space-sm ) )';
|
||||
position: fixed;
|
||||
left: var( --label-position );
|
||||
right: var( --label-position );
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 0 var( --border-radius--medium ) var( --border-radius--medium ) 0;
|
||||
border-bottom-left-radius: var( --border-radius--medium );
|
||||
border-top-left-radius: var( --border-radius--medium );
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
.citizen-card( false );
|
||||
|
|
@ -158,12 +159,12 @@
|
|||
// This is needed to prevent ToC popping up on mobile
|
||||
&checkbox:not( :checked ) {
|
||||
~ .toctitle .toctogglelabel {
|
||||
transform: translateX( ~'calc( var( --label-position ) * -1 )' );
|
||||
transform: translateX( ~'var( --label-position )' );
|
||||
}
|
||||
|
||||
~ .toctitle h2,
|
||||
~ ul {
|
||||
transform: translateX( -120% );
|
||||
transform: translateX( 120% );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -171,8 +172,8 @@
|
|||
&title h2 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
width: ~'calc( 100% - var( --padding-page ) * 2 )';
|
||||
padding: 1rem var( --padding-page );
|
||||
width: ~'calc( 100% - var( --space-md ) * 2 )';
|
||||
padding: 1rem var( --space-md );
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
|
|
@ -191,9 +192,9 @@
|
|||
|
||||
> ul {
|
||||
display: block !important; // So that animation is visible
|
||||
max-height: ~'calc( 100vh - var( --height-header ) * 3 )';
|
||||
padding: 2.6rem var( --padding-page ) 1rem var( --padding-page ); // hardcoded for now
|
||||
border-radius: var( --border-radius--medium ) 0 var( --border-radius--medium ) var( --border-radius--medium );
|
||||
max-height: ~'calc( 100vh - var( --header-size ) * 3 )';
|
||||
padding: 2.6rem var( --space-md ) 1rem var( --space-md ); // hardcoded for now
|
||||
border-radius: 0 var( --border-radius--medium ) var( --border-radius--medium ) var( --border-radius--medium );
|
||||
margin-top: 0;
|
||||
pointer-events: auto;
|
||||
.citizen-card( false );
|
||||
|
|
@ -202,21 +203,7 @@
|
|||
&togglelabel,
|
||||
&title h2,
|
||||
> ul {
|
||||
opacity: 0;
|
||||
transition: @transition-opacity;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
// Show toc button when title is hidden
|
||||
.citizen-title--hidden {
|
||||
.toc {
|
||||
&togglelabel,
|
||||
&title h2,
|
||||
> ul {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -243,7 +230,7 @@
|
|||
|
||||
@media ( max-width: @width-breakpoint-tablet ) {
|
||||
.toc {
|
||||
right: 0;
|
||||
right: var( --space-sm );
|
||||
|
||||
> ul {
|
||||
max-height: 60vh;
|
||||
|
|
@ -253,7 +240,7 @@
|
|||
|
||||
@media ( max-width: @width-breakpoint-mobile ) {
|
||||
.toc {
|
||||
max-width: ~'calc(100vw - var( --padding-page ) * 2)';
|
||||
max-width: ~'calc(100vw - var( --space-sm ) * 2)';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -261,9 +248,14 @@
|
|||
.citizen-toc-enabled {
|
||||
.mw-body-header,
|
||||
.citizen-body {
|
||||
margin-right: ~'max( var( --margin-layout ), 0 )';
|
||||
margin-left: ~'max( var( --margin-layout ), var( --width-toc ) )';
|
||||
// Reserve space for ToC
|
||||
padding-right: var( --width-toc );
|
||||
}
|
||||
}
|
||||
|
||||
.toc {
|
||||
right: unset;
|
||||
left: ~'calc( 50vw + var( --width-layout ) / 2 - var( --width-toc ) / 2 + var( --space-md ) * 3 )';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,13 @@
|
|||
.citizen-drawer {
|
||||
&__card {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
max-height: ~'calc(100vh - var( --margin-header ) * 2 )';
|
||||
margin: var( --margin-header ) var( --padding-header );
|
||||
overscroll-behavior: contain;
|
||||
user-select: none;
|
||||
will-change: transform;
|
||||
.citizen-card();
|
||||
.citizen-card-hide( top left );
|
||||
.citizen-header-card( left );
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var( --size-button--header ) var( --padding-page ) 0.8rem; // TODO: Replace with space token
|
||||
justify-content: center;
|
||||
padding: var( --header-button-size ) var( --padding-page ) 0.8rem; // TODO: Replace with space token
|
||||
border-bottom: 1px solid var( --border-color-base );
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
|
@ -97,20 +88,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media ( max-width: @width-breakpoint-tablet ) {
|
||||
.citizen-drawer {
|
||||
&__card {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&__header {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media ( min-width: @width-breakpoint-tablet ) {
|
||||
.citizen-drawer {
|
||||
&__card {
|
||||
.citizen-header-card-tablet( left );
|
||||
}
|
||||
|
||||
&__logo img {
|
||||
// Bigger logo
|
||||
height: 5rem;
|
||||
|
|
@ -124,6 +107,18 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media ( min-width: @width-breakpoint-desktop ) {
|
||||
.citizen-drawer {
|
||||
&__card {
|
||||
.citizen-header-card-desktop( top );
|
||||
}
|
||||
|
||||
&__header {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media ( min-width: @width-breakpoint-desktop-wide ) {
|
||||
.citizen-drawer__menu {
|
||||
max-width: 1200px; // So that it doesn't span too wide
|
||||
|
|
|
|||
|
|
@ -1,32 +1,18 @@
|
|||
.citizen-header {
|
||||
--size-button--header: ~'calc( var( --height-header ) - 1rem )';
|
||||
--size-icon--header: 1.25rem;
|
||||
--margin-header: 0.5rem;
|
||||
--padding-header: ~'calc( var( --padding-page ) / 2 )';
|
||||
--size-dialog-min--header: 16rem;
|
||||
--header-icon-size: ~'calc( var( --header-button-size ) / 2 )';
|
||||
--header-button-size: ~'calc( var( --header-size ) - var( --space-sm ) * 2 )';
|
||||
--header-direction: row;
|
||||
position: fixed;
|
||||
z-index: @z-index-site-header;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
height: var( --height-header );
|
||||
justify-content: space-between;
|
||||
padding: 0 var( --padding-header );
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: ~'calc( var( --height-header ) / -2 )';
|
||||
left: 0;
|
||||
background: var( --color-surface-0 );
|
||||
content: '';
|
||||
-webkit-mask-image: linear-gradient( 180deg, #000, transparent );
|
||||
mask-image: linear-gradient( 180deg, #000, transparent );
|
||||
pointer-events: none;
|
||||
}
|
||||
flex-direction: var( --header-direction );
|
||||
padding: var( --space-sm );
|
||||
border-top: 1px solid var( --border-color-base );
|
||||
background-color: var( --color-surface-0 );
|
||||
gap: var( --space-xs );
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
|
|
@ -35,8 +21,8 @@
|
|||
|
||||
&__button {
|
||||
display: grid;
|
||||
width: var( --size-button--header );
|
||||
height: var( --size-button--header );
|
||||
width: var( --header-button-size );
|
||||
height: var( --header-button-size );
|
||||
border-radius: var( --border-radius--small );
|
||||
place-items: center;
|
||||
|
||||
|
|
@ -51,14 +37,14 @@
|
|||
// Pure CSS icons
|
||||
&Icon {
|
||||
overflow: hidden; // Sometimes CSS animation can clip
|
||||
width: var( --size-icon--header );
|
||||
height: var( --size-icon--header );
|
||||
width: var( --header-icon-size );
|
||||
height: var( --header-icon-size );
|
||||
}
|
||||
|
||||
// Background image icons
|
||||
&--icon:after {
|
||||
width: var( --size-icon--header );
|
||||
height: var( --size-icon--header );
|
||||
width: var( --header-icon-size );
|
||||
height: var( --header-icon-size );
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
|
|
@ -94,8 +80,10 @@
|
|||
z-index: -1; // Inner element should be behind menu and search
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: var( --header-direction );
|
||||
flex-grow: 1;
|
||||
justify-content: space-between;
|
||||
gap: var( --space-xs );
|
||||
|
||||
.mw-checkbox-hack-checkbox:checked {
|
||||
~ .citizen-header__button {
|
||||
|
|
@ -107,6 +95,8 @@
|
|||
&__start,
|
||||
&__end {
|
||||
display: flex;
|
||||
flex-direction: var( --header-direction );
|
||||
gap: var( --space-xs );
|
||||
}
|
||||
|
||||
&__start {
|
||||
|
|
@ -114,37 +104,6 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
&__title {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
height: var( --size-button--header );
|
||||
align-items: center;
|
||||
padding: 0 0.5rem;
|
||||
border-radius: var( --border-radius--small );
|
||||
color: var( --color-base--emphasized );
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
|
||||
> div {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var( --background-color-quiet--active );
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
&--page {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Reset
|
||||
ul {
|
||||
margin: 0;
|
||||
|
|
@ -152,20 +111,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.citizen-title--hidden {
|
||||
.citizen-header {
|
||||
&__title {
|
||||
&--site {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&--page {
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.skin-citizen-dark {
|
||||
.citizen-header__button {
|
||||
&Icon,
|
||||
|
|
@ -179,8 +124,9 @@
|
|||
#p-notifications {
|
||||
ul {
|
||||
display: flex;
|
||||
height: var( --height-header );
|
||||
flex-direction: var( --header-direction );
|
||||
align-items: center;
|
||||
gap: var( --space-xs );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -198,12 +144,16 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
&:hover {
|
||||
background-color: none;
|
||||
color: var( --color-base );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media ( min-width: @width-breakpoint-desktop ) {
|
||||
.citizen-header {
|
||||
--header-direction: column;
|
||||
top: 0;
|
||||
right: unset;
|
||||
left: 0;
|
||||
border-top: 0;
|
||||
border-right: 1px solid var( --border-color-base );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,7 @@
|
|||
.citizen-personalMenu {
|
||||
position: relative; // anchor card
|
||||
|
||||
&__card {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
overflow: hidden; // rounded corner
|
||||
min-width: var( --size-dialog-min--header );
|
||||
font-size: 0.875rem;
|
||||
.citizen-card;
|
||||
.citizen-card-hide( top right );
|
||||
.citizen-header-card( right );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -155,13 +147,18 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media ( max-width: @width-breakpoint-tablet ) {
|
||||
@media ( min-width: @width-breakpoint-tablet ) {
|
||||
.citizen-personalMenu {
|
||||
&__card {
|
||||
position: fixed;
|
||||
top: var( --height-header );
|
||||
right: var( --padding-page );
|
||||
left: var( --padding-page );
|
||||
.citizen-header-card-tablet( right );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media ( min-width: @width-breakpoint-desktop ) {
|
||||
.citizen-personalMenu {
|
||||
&__card {
|
||||
.citizen-header-card-desktop( bottom );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,21 +2,19 @@
|
|||
|
||||
.citizen-search {
|
||||
--width-search-bar: @width-search-bar;
|
||||
--height-search-bar: ~'calc( var( --height-header ) - var( --margin-header ) * 2 )';
|
||||
--height-search-bar: var( --header-button-size );
|
||||
|
||||
&__card {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 100%;
|
||||
display: flex;
|
||||
width: var( --width-search-bar );
|
||||
max-width: ~'calc(100vw - var( --padding-page ) )';
|
||||
height: var( --height-search-bar );
|
||||
padding-right: var( --size-button--header ); // reserve space for close button
|
||||
margin: var( --margin-header ) var( --padding-header );
|
||||
margin: var( --space-sm );
|
||||
gap: 0.25rem;
|
||||
.citizen-card();
|
||||
.citizen-card-hide( top right, X, false );
|
||||
.citizen-card-hide( top left, X, false );
|
||||
|
||||
/**
|
||||
* Loading indicator for searchbox
|
||||
|
|
@ -123,25 +121,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
// MAGIC
|
||||
// TODO: Don't hardcode this
|
||||
@media ( max-width: ( @width-search-bar + 60px ) ) {
|
||||
@media ( max-width: @width-breakpoint-desktop ) {
|
||||
.citizen-search__card {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
width: auto;
|
||||
|
||||
&:before {
|
||||
position: fixed;
|
||||
z-index: -1; // Behind form
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
background: rgba( 0, 0, 0, 0.7 );
|
||||
content: '';
|
||||
}
|
||||
|
||||
// Remove searchbox open animation on mobile
|
||||
// But keep suggestion animation
|
||||
// So user can get to search instantly
|
||||
|
|
@ -149,4 +136,29 @@
|
|||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
#citizen-search__checkbox:checked {
|
||||
+ .citizen-search__card {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
// HACK: Click overlay to dismiss search bar
|
||||
~ .citizen-search__button {
|
||||
.citizen-search__buttonIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#citizen-search__buttonCheckbox {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
background-color: var( --background-color-overlay );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@
|
|||
|
||||
&:hover {
|
||||
> .citizen-search__buttonIcon {
|
||||
transform: scale( 0.8 );
|
||||
transform: scale( 0.85 );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* Framework
|
||||
*/
|
||||
html {
|
||||
scroll-padding-top: ~'calc( var( --height-header ) + 20px )'; // fixed header offset, supported by major browsers
|
||||
scroll-padding-top: var( --space-md );
|
||||
}
|
||||
|
||||
html,
|
||||
|
|
|
|||
|
|
@ -71,10 +71,18 @@
|
|||
|
||||
html {
|
||||
/* Size */
|
||||
--height-header: @height-header;
|
||||
--header-size: @header-size;
|
||||
--width-layout: @width-layout;
|
||||
--line-height: @line-height;
|
||||
|
||||
/* Spacing */
|
||||
--space-unit: @space-unit;
|
||||
--space-xs: ~'calc( 0.25 * var( --space-unit ) )';
|
||||
--space-sm: ~'calc( 0.5 * var( --space-unit ) )';
|
||||
--space-md: ~'var( --space-unit )';
|
||||
--space-lg: ~'calc( 1.5 * var( --space-unit ) )';
|
||||
--space-xl: ~'calc( 2 * var( --space-unit ) )';
|
||||
|
||||
/* Margin */
|
||||
--margin-layout: ~'calc( ( 100vw - var( --width-layout ) ) / 2 )';
|
||||
|
||||
|
|
|
|||
|
|
@ -24,16 +24,16 @@
|
|||
border-radius: 0 0 var( --border-radius--large ) var( --border-radius--large );
|
||||
// Animates the progress-bar.
|
||||
animation: progress-bar
|
||||
/* duration */ 1200ms
|
||||
/* timing function */ linear
|
||||
/* delay */ 500ms
|
||||
/* iteration count */ infinite
|
||||
/* fill direction */ alternate;
|
||||
1200ms
|
||||
linear
|
||||
500ms
|
||||
infinite
|
||||
alternate;
|
||||
// Add a progress-bar to the loading indicator,
|
||||
// but only show it animating after 1 second of loading.
|
||||
background: /*image*/ linear-gradient( 90deg, var( --color-primary ) 0%, var( --color-primary ) 100% )
|
||||
/* position / size*/ -10% 0 ~'/' 0 var( --height-progress-bar )
|
||||
/* repeat */ no-repeat,transparent;
|
||||
-10% 0 ~'/' 0 var( --height-progress-bar )
|
||||
no-repeat,transparent;
|
||||
// Placeholder text
|
||||
content: 'loading';
|
||||
text-overflow: ellipsis;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,13 @@
|
|||
.parsoid-body {
|
||||
min-height: 80vh; // avoid footer being in the middle of the page
|
||||
padding: 0 var( --padding-page );
|
||||
margin-top: var( --height-header );
|
||||
}
|
||||
|
||||
.mw-body,
|
||||
.parsoid-body,
|
||||
.mw-footer {
|
||||
// Reserve space for header
|
||||
margin-bottom: var( --header-size );
|
||||
}
|
||||
|
||||
.mw-body-header,
|
||||
|
|
@ -20,6 +26,7 @@
|
|||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
padding-top: @content-margin-top;
|
||||
margin-top: var( --space-xl );
|
||||
margin-bottom: @content-margin-top * 2;
|
||||
gap: @content-margin-top;
|
||||
}
|
||||
|
|
@ -100,6 +107,16 @@ a.image {
|
|||
}
|
||||
}
|
||||
|
||||
@media ( min-width: @width-breakpoint-desktop ) {
|
||||
// Reserve space for header
|
||||
.mw-body,
|
||||
.parsoid-body,
|
||||
.mw-footer {
|
||||
margin-bottom: 0;
|
||||
margin-left: var( --header-size );
|
||||
}
|
||||
}
|
||||
|
||||
/* Wider page width for certain namespaces */
|
||||
@media ( min-width: @width-breakpoint-desktop-wide ) {
|
||||
// 1 - Special, 6 - File, 14 - Category
|
||||
|
|
|
|||
|
|
@ -32,6 +32,9 @@
|
|||
/* Extra wide desktop breakpoint */
|
||||
@width-breakpoint-desktop-extrawide: 2000px;
|
||||
|
||||
/* == Spacing == */
|
||||
@space-unit: 1rem;
|
||||
|
||||
/* == Colors == */
|
||||
/* Base theme */
|
||||
@diff-hoverstate: 2;
|
||||
|
|
@ -198,7 +201,7 @@
|
|||
/* `--*size` variables are used for `*width` & `*height` properties. */
|
||||
@size-icon: 1.25rem;
|
||||
// Not in the header section it is also used outside of header
|
||||
@height-header: 3.5rem;
|
||||
@header-size: 3.5rem;
|
||||
@width-layout: @width-breakpoint-desktop - 2 * @padding-page;
|
||||
@width-toc: @width-breakpoint-desktop-wide - @width-breakpoint-desktop;
|
||||
|
||||
|
|
|
|||
|
|
@ -275,6 +275,7 @@
|
|||
"rtl": "resources/skins.citizen.icons/toc-rtl.svg"
|
||||
}
|
||||
},
|
||||
".toctogglecheckbox:checked ~ .toctitle .toctogglelabel:before": "resources/skins.citizen.icons/shared/close.svg",
|
||||
"#citizen-personalMenu__buttonCheckbox:after": "resources/skins.citizen.icons/shared/userAvatar.svg",
|
||||
".citizen-search__icon:after": "resources/skins.citizen.icons/shared/search.svg",
|
||||
".citizen-search__random:after": "resources/skins.citizen.icons/shared/random.svg",
|
||||
|
|
|
|||
|
|
@ -12,14 +12,14 @@
|
|||
#pt-notifications-alert &,
|
||||
#pt-notifications-notice & {
|
||||
top: 0;
|
||||
width: var( --size-button--header );
|
||||
height: var( --size-button--header );
|
||||
width: var( --header-button-size );
|
||||
height: var( --header-button-size );
|
||||
box-sizing: content-box;
|
||||
border-radius: var( --border-radius--small );
|
||||
margin: 0;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: var( --size-icon--header );
|
||||
background-size: var( --header-icon-size );
|
||||
opacity: var( --opacity-icon-base );
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -10,8 +10,6 @@
|
|||
|
||||
.mw-echo-ui-notificationBadgeButtonPopupWidget {
|
||||
&-popup {
|
||||
margin-top: 8px; // align with other menus
|
||||
box-shadow: var( --box-shadow-dialog );
|
||||
filter: none; // disable filter drop shadow
|
||||
|
||||
> .oo-ui-popupWidget-popup {
|
||||
|
|
|
|||
|
|
@ -9,13 +9,34 @@
|
|||
*/
|
||||
|
||||
@import '../../../resources/variables.less';
|
||||
@import '../../../resources/mixins.less';
|
||||
|
||||
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
|
||||
top: unset !important;
|
||||
bottom: var( --header-size ) !important;
|
||||
margin: var( --space-sm );
|
||||
box-shadow: var( --box-shadow-dialog );
|
||||
}
|
||||
|
||||
@media ( min-width: @width-breakpoint-tablet ) {
|
||||
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
|
||||
// .citizen-header-card-tablet( right );
|
||||
}
|
||||
}
|
||||
|
||||
@media ( min-width: @width-breakpoint-desktop ) {
|
||||
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
|
||||
bottom: 0 !important;
|
||||
left: var( --header-size ) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* mw.echo.ui.mobile.less */
|
||||
@media all and ( max-width: 720px ) {
|
||||
.mw-echo-ui-overlay {
|
||||
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
|
||||
right: var( --padding-page );
|
||||
left: var( --padding-page ) !important;
|
||||
right: 0 !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -24,6 +45,10 @@
|
|||
.mw-echo-ui-overlay {
|
||||
position: fixed; // Header is fixed
|
||||
z-index: @z-index-overlay; // Higher than header
|
||||
// The notification button is always bottom-aligned
|
||||
// Setting a top value will break the 0 height hack used in the original
|
||||
top: unset;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/* mw.echo.ui.NotificationItemWidget.less */
|
||||
|
|
|
|||
|
|
@ -29,7 +29,6 @@
|
|||
|
||||
/* "No more" link */
|
||||
.flow-no-more,
|
||||
/* "Undo" moderation link */
|
||||
.flow-undo {
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@
|
|||
// Responsive
|
||||
@media ( max-width: @width-breakpoint-tablet ) {
|
||||
.uls-menu {
|
||||
top: var( --height-header ) !important;
|
||||
top: var( --header-size ) !important;
|
||||
right: var( --padding-page ) !important;
|
||||
left: var( --padding-page ) !important;
|
||||
overflow: auto;
|
||||
|
|
|
|||
|
|
@ -29,8 +29,9 @@
|
|||
overflow: visible;
|
||||
}
|
||||
|
||||
// Reset VE disabled style to allow page action buttons to work
|
||||
.mw-body-header {
|
||||
margin-top: ~'calc( 46px - var( --space-xl ) )'; // Trim extra spacing
|
||||
// Reset VE disabled style to allow page action buttons to work
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
user-select: auto;
|
||||
|
|
@ -50,6 +51,10 @@
|
|||
.mw-footer {
|
||||
z-index: 2; // Fix collision with VE elements
|
||||
}
|
||||
|
||||
.toc {
|
||||
display: none; // Hide ToC
|
||||
}
|
||||
}
|
||||
|
||||
.skin-citizen {
|
||||
|
|
@ -181,11 +186,11 @@
|
|||
margin-right: var( --padding-page--negative );
|
||||
margin-left: var( --padding-page--negative );
|
||||
|
||||
&.ve-ui-toolbar-floating > .oo-ui-toolbar-bar {
|
||||
top: 56px; // Fixed under header
|
||||
}
|
||||
|
||||
&Placeholder {
|
||||
height: 46px; // Correspond to VE toolbar height in Citizen
|
||||
border-bottom: 1px solid var( --border-color-base );
|
||||
margin: 0 var( --padding-page--negative );
|
||||
|
||||
&-bar {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
|
|
@ -197,12 +202,6 @@
|
|||
// Make toolbar more smaller screen friendly
|
||||
// Well at least I did by best
|
||||
@media ( max-width: 800px ) {
|
||||
.ve-activated {
|
||||
.mw-header {
|
||||
background-color: transparent; // Because header is taller than toolbar
|
||||
}
|
||||
}
|
||||
|
||||
.ve-ui-toolbar {
|
||||
> .oo-ui-toolbar-bar {
|
||||
display: flex;
|
||||
|
|
@ -289,6 +288,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
// HACK: Temp fix for mobile toolbar, will revisit when we move to 1.39+
|
||||
.ve-ui-toolbar .oo-ui-toolbar-after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.skin-citizen-dark {
|
||||
.oo-ui-iconElement-icon.mw-widget-titleOptionWidget-hasImage {
|
||||
filter: none; // fix inverted image
|
||||
|
|
|
|||
|
|
@ -4,21 +4,13 @@
|
|||
string html-citizen-jumptotop Jump to top title text
|
||||
}}
|
||||
<header class="mw-header citizen-header">
|
||||
{{#data-search-box}}{{>Search}}{{/data-search-box}}
|
||||
{{#data-drawer}}{{>Drawer}}{{/data-drawer}}
|
||||
<div class="citizen-header__inner">
|
||||
<div class="citizen-header__start">
|
||||
<a href="{{link-mainpage}}" class="citizen-header__title citizen-header__title--site">{{>Wordmark}}</a>
|
||||
<a
|
||||
href="#top"
|
||||
class="citizen-header__title citizen-header__title--page"
|
||||
title="{{html-citizen-jumptotop}}">
|
||||
<div>{{{html-title}}}</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="citizen-header__start"></div>
|
||||
<div class="citizen-header__end">
|
||||
{{#data-notifications}}{{>Menu}}{{/data-notifications}}
|
||||
{{#data-personal-menu}}{{>PersonalMenu}}{{/data-personal-menu}}
|
||||
</div>
|
||||
</div>
|
||||
{{#data-search-box}}{{>Search}}{{/data-search-box}}
|
||||
</header>
|
||||
|
|
|
|||
正在加载...
在新工单中引用