StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-15 02:24:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #222 from StarCitizenTools/dev

Browse source 
Minor fixes and improvements
This commit is contained in:
alistair3149 2021-01-15 20:29:44 -05:00 committed by GitHub
parent 93124edb2c 8e1b1a1493
commit dee8b01d47
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 284 additions and 256 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
includes/templates/Drawer.mustache
View file

@ -3,16 +3,14 @@
}}
<input
type="checkbox"
id="mw-drawer-button"
class="mw-checkbox-hack"
role="button"
title="{{msg-citizen-drawer-toggle}}"
aria-labelledby="mw-drawer-button-label"
aria-controls="mw-drawer">
id="mw-drawer-checkbox"
class="mw-checkbox-hack-checkbox">
<label
id="mw-drawer-button-label"
class="screen-reader-text"
for="mw-drawer-button">
id="mw-drawer-button"
class="mw-checkbox-hack-button"
for="mw-drawer-checkbox"
role="button"
aria-controls="mw-drawer">
{{msg-citizen-drawer-toggle}}
</label>
<div id="mw-drawer-button-icon">
@ -20,16 +18,16 @@
<div id="mw-drawer-button-icon-2" class="mw-drawer-button-icon-div"></div>
<div id="mw-drawer-button-icon-3" class="mw-drawer-button-icon-div"></div>
</div>
<nav id="mw-drawer-menu">
<section id="mw-drawer-menu-logo" role="banner">
<nav id="mw-drawer">
<section id="mw-drawer-logo" role="banner">
{{>Logo}}
</section>
<section id="mw-drawer-menu-main">
<section id="mw-drawer-main">
{{#data-portals-first}}{{>Menu}}{{/data-portals-first}}
{{#array-portals-rest}}{{>Menu}}{{/array-portals-rest}}
{{#data-portals-languages}}{{>Menu}}{{/data-portals-languages}}
</section>
<section id="mw-drawer-menu-user" class="mw-user-links">
<section id="mw-drawer-user" class="mw-user-links">
{{#data-personal-menu}}{{>Menu}}{{/data-personal-menu}}
</section>
</nav>

1
includes/templates/Header.mustache
View file

@ -3,7 +3,6 @@
string msg-citizen-header-search-toggle tooltip for search toggle
}}
<header class="mw-header">
<div id="mw-header-background"></div>
{{#data-drawer}}{{>Drawer}}{{/data-drawer}}
<div class="mw-header-tools">
{{#data-extratools}}{{>Menu}}{{/data-extratools}}

17
includes/templates/SearchBox.mustache
View file

@ -10,16 +10,15 @@
}}
<input
type="checkbox"
id="search-toggle"
class="mw-checkbox-hack"
role="button"
title="{{msg-citizen-search-toggle-shortcut}}"
aria-labelledby="search-toggle-label"
aria-controls="searchform">
id="search-checkbox"
class="mw-checkbox-hack-checkbox">
<label
id="search-toggle-label"
class="screen-reader-text"
for="search-toggle">
id="search-toggle"
class="mw-checkbox-hack-button"
for="search-checkbox"
role="button"
title="{{msg-citizen-search-toggle-shortcut}}"
aria-controls="searchform">
{{msg-citizen-search-toggle}}
</label>
<div id="search-toggle-icon">

5
resources/skins.citizen.styles.theme/skins.citizen.styles.theme.less
View file

@ -1,8 +1,9 @@
@import '../variables.less';
.mw-theme-toggle {
width: @icon-box-size + @margin-side;
height: @header-height;
width: var( --width-button-base );
height: var( --height-header );
padding: 0;
border: 0;
background-color: transparent;
background-position: center;

186
resources/skins.citizen.styles/Drawer.less
View file

@ -1,24 +1,21 @@
#mw-drawer {
&-button {
&-icon {
display: flex;
overflow: hidden;
width: @icon-size;
height: @icon-size;
flex-direction: column;
align-items: center;
justify-content: center;
margin: (@header-height - @icon-size) / 2 @icon-padding (@header-height - @icon-size) / 2 (@icon-margin * 2 + @margin-side * 2) / 2;
&-1 {
transform-origin: 0 0;
}
&-2 {
transform-origin: 0 100%;
}
}
position: fixed;
z-index: 4;
top: 0;
display: flex;
width: @drawer-width;
max-width: 100vw; // in case if someone has super small screen
height: 100%;
flex-direction: column;
background-color: var( --background-color-dp-16 );
border-radius: 0 @border-radius-large @border-radius-large 0;
transform: translate3d( -110%, 0, 0 ); // shadow bleeding with 100%
transform-origin: 0 0;
transition: @transition-transform;
will-change: transform; // help with performance
.boxshadow(3);
&-checkbox {
&:checked {
// Transform all the slices of the button into a crossmark
~ #mw-drawer-button-icon {
@ -31,29 +28,52 @@
// Reflect line
&-2 {
/* @noflip */
transform: rotate( -45deg ) translate( -2px, 6px );
transform: rotate( -45deg ) translate3d( -2px, 6px, 0 );
}
// Hide line
&-3 {
/* @noflip */
transform: rotate( 45deg ) translate( -5px, -7px );
transform: rotate( 45deg ) translate3d( -5px, -7px, 0 );
}
}
}
// Show drawer
~ #mw-drawer-menu {
~ #mw-drawer {
transform: none;
will-change: unset;
}
}
}
&-button {
width: var( --width-button-corner );
height: var( --height-header );
&-icon {
display: flex;
overflow: hidden;
width: var( --size-icon );
height: var( --size-icon );
flex-direction: column;
margin: ~'calc( ( var( --height-header ) - var( --size-icon ) ) / 2 ) var( --padding-page )';
place-content: center;
&-1 {
transform-origin: 0 0;
}
&-2 {
transform-origin: 0 100%;
}
}
&:hover {
~ #mw-drawer-button-icon {
#mw-drawer-button-icon {
&-1 {
transform: translate( -50%, 0 );
transform: translate3d( -50%, 0, 0 );
}
}
@ -76,79 +96,59 @@
}
}
&-menu {
position: fixed;
z-index: 4;
top: 0;
display: flex;
width: @drawer-width;
max-width: 100vw; // in case if someone has super small screen
height: 100%;
flex-direction: column;
background-color: var( --background-color-dp-16 );
border-radius: 0 @border-radius-large @border-radius-large 0;
transform: translate( -110%, 0 ); // shadow bleeding with 100%
transform-origin: 0 0;
transition: @transition-transform;
will-change: transform; // help with performance
.boxshadow(3);
&-logo {
padding: var( --height-header ) var( --padding-page ) 10px var( --padding-page );
border-bottom: 1px solid var( --border-color-base );
}
&-logo {
display: flex;
flex-direction: column;
padding: @header-height @margin-side @margin-side / 2 @margin-side;
border-bottom: 1px solid var( --border-color-base );
&-main {
overflow: auto;
flex-grow: 1;
padding: @margin-side / 2 0;
overscroll-behavior: contain;
h3 {
padding: @margin-side / 2 @margin-side;
margin: @margin-side / 2 0 0 0;
color: var( --color-base--subtle );
font-size: inherit;
font-weight: normal;
letter-spacing: 0.75px;
}
}
&-main {
overflow: auto;
flex-grow: 1;
padding: @margin-side / 2 0;
overscroll-behavior: contain;
&-main,
&-user {
font-size: @ui-menu-text;
h3 {
padding: @margin-side / 2 @margin-side;
margin: @margin-side / 2 0 0 0;
color: var( --color-base--subtle );
font-size: inherit;
font-weight: normal;
letter-spacing: 0.75px;
a {
.menu-item-link;
align-items: center;
justify-content: space-between;
padding: @padding-menu-item-big;
&:after {
.resource-loader-list-icon;
display: block;
margin-left: @icon-padding;
background-size: contain;
opacity: var( --opacity-icon-base );
transition: @transition-opacity-quick;
}
}
&-main,
&-user {
font-size: @ui-menu-text;
a {
.menu-item-link;
align-items: center;
justify-content: space-between;
padding: @padding-menu-item-big;
&:hover {
.menu-item-link-hover;
&:after {
.resource-loader-list-icon;
display: block;
margin-left: @icon-padding;
background-size: contain;
opacity: var( --opacity-icon-base );
transition: @transition-opacity-quick;
opacity: var( --opacity-icon-base--hover );
}
}
&:hover {
.menu-item-link-hover;
&:active {
.menu-item-link-active;
&:after {
opacity: var( --opacity-icon-base--hover );
}
}
&:active {
.menu-item-link-active;
&:after {
opacity: var( --opacity-icon-base--active );
}
&:after {
opacity: var( --opacity-icon-base--active );
}
}
}
@ -178,8 +178,6 @@
border-top: 1px solid var( --border-color-base );
#pt-userpage {
margin-bottom: @margin-side / 2;
a {
flex-direction: row-reverse;
justify-content: flex-end;
@ -188,7 +186,7 @@
width: @icon-box-size;
height: @icon-box-size;
margin: 0;
margin-right: @margin-side;
margin-right: 16px;
}
}
@ -233,13 +231,11 @@
.skin-citizen-dark {
#mw-drawer {
&-menu {
&-main,
&-user {
a {
&:after {
filter: invert( 1 );
}
&-main,
&-user {
a {
&:after {
filter: invert( 1 );
}
}
}

8
resources/skins.citizen.styles/Footer.less
View file

@ -5,7 +5,7 @@
display: flex;
max-width: @footer-width;
align-items: center;
padding: 12px @margin-side;
padding: 12px var( --padding-page );
margin: 0 auto;
}
@ -64,7 +64,7 @@
display: flex;
max-width: @footer-width;
flex-direction: column;
padding: 0 @margin-side;
padding: 0 var( --padding-page );
margin: 0 auto;
}
@ -78,7 +78,7 @@
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: @margin-side / 2 @margin-side;
padding: @margin-side / 2 var( --padding-page );
margin: 0 auto;
}
}
@ -100,7 +100,7 @@
li a {
display: block;
padding: @margin-side / 2 @margin-side;
padding: @margin-side / 2 var( --padding-page );
}
}

17
resources/skins.citizen.styles/Header.less
View file

@ -1,10 +1,13 @@
.mw-header {
--width-button-base: ~'calc(var(--size-icon) + var(--padding-page))';
--width-button-corner: ~'calc(var(--size-icon) + var(--padding-page) * 2)';
position: fixed;
z-index: 10;
top: 0;
right: 0;
left: 0;
display: flex;
width: 100%;
height: @header-height;
height: var( --height-header );
justify-content: space-between;
&-tools {
@ -20,15 +23,13 @@
display: block;
margin: 0;
}
}
#mw-header {
&-background {
&:before {
position: absolute;
z-index: -1;
right: 0;
left: 0;
box-shadow: 0 0 50px @header-height var( --background-color-dp-00 );
box-shadow: 0 0 50px var( --height-header ) var( --background-color-dp-00 );
content: '';
}
}
@ -36,7 +37,7 @@
#p-personal-extra {
ul {
display: flex;
height: 56px;
height: var( --height-header );
align-items: center;
}
}

162
resources/skins.citizen.styles/Searchbox.less
View file

@ -3,6 +3,80 @@
}
#search {
&-checkbox {
&:checked {
~ #searchform {
z-index: 10;
opacity: 1;
pointer-events: auto; // clickable
#searchInput {
width: @search-bar-width;
}
}
~ #search-toggle-icon {
#search-toggle-icon {
&-2 {
border-color: transparent;
}
&-1 {
height: 14px;
transform: translate3d( -5px, -7px, 0 ) rotate( 135deg );
}
&-3 {
opacity: 1;
}
}
&:hover {
border-color: @base-0;
#search-toggle-icon-3 {
opacity: 0;
}
}
}
&:hover {
~ #search-toggle-icon {
#search-toggle-icon {
&-1 {
height: 12px;
transform: translate3d( -5px, -7px, 0 ) rotate( 135deg );
}
&-2 {
border-color: transparent;
}
&-3 {
height: 12px;
}
&-1,
&-3 {
background-color: var( --background-color-icon--hover );
}
}
}
}
&:active {
~ #search-toggle-icon {
#search-toggle-icon {
&-1,
&-3 {
background-color: var( --background-color-icon--active );
}
}
}
}
}
}
&form {
position: absolute;
z-index: -1; // not interactable
@ -53,13 +127,15 @@
&-toggle {
z-index: 21; // override to be on top of the form
right: 0; // align checkbox with icon
width: var( --width-button-corner );
height: var( --height-header );
&-icon {
position: relative;
z-index: 20; // stay on top of search form
display: flex;
width: @icon-box-size + @margin-side + @icon-padding;
height: @header-height;
width: var( --width-button-corner );
height: var( --height-header );
align-items: center;
justify-content: center;
transition: @transition-transform-quick, @transition-height-quick, @transition-opacity-quick, @transition-border-color-quick;
@ -67,7 +143,7 @@
&-1 {
top: 7px;
left: 12px;
height: 10px;
height: 7px;
transform: rotate( -45deg );
}
@ -97,85 +173,13 @@
}
}
&:checked {
~ #searchform {
z-index: 10;
opacity: 1;
pointer-events: auto; // clickable
#searchInput {
width: @search-bar-width;
}
}
~ #search-toggle-icon {
#search-toggle-icon {
&-2 {
border-color: transparent;
}
&-1 {
height: 14px;
transform: translate( -5px, -7px ) rotate( 135deg );
}
&-3 {
opacity: 1;
}
}
&:hover {
border-color: @base-0;
#search-toggle-icon-3 {
opacity: 0;
}
}
}
&:hover {
~ #search-toggle-icon {
#search-toggle-icon {
&-1 {
height: 12px;
transform: translate( -5px, -7px ) rotate( 135deg );
}
&-2 {
border-color: transparent;
}
&-3 {
height: 12px;
}
&-1,
&-3 {
background-color: var( --background-color-icon--hover );
}
}
}
}
&:active {
~ #search-toggle-icon {
#search-toggle-icon {
&-1,
&-3 {
background-color: var( --background-color-icon--active );
}
}
}
}
}
&:hover {
~ #search-toggle-icon {
#search-toggle-icon {
&-1 {
height: 6px;
background-color: var( --background-color-icon--hover );
transform: translate( 2px, 2px ) rotate( -45deg );
transform: translate3d( 2px, 2px, 0 ) rotate( -45deg );
}
&-2 {
@ -259,7 +263,7 @@
~ #search-toggle-icon {
#search-toggle-icon {
&-1 {
transform: translate( -5px, -7px ) rotate( -135deg );
transform: translate3d( -5px, -7px, 0 ) rotate( -135deg );
}
}
}
@ -268,7 +272,7 @@
~ #search-toggle-icon {
#search-toggle-icon {
&-1 {
transform: translate( -5px, -7px ) rotate( -135deg );
transform: translate3d( -5px, -7px, 0 ) rotate( -135deg );
}
}
}
@ -279,7 +283,7 @@
~ #search-toggle-icon {
#search-toggle-icon {
&-1 {
transform: translate( 2px, 2px ) rotate( 45deg );
transform: translate3d( 2px, 2px, 0 ) rotate( 45deg );
}
}
}

8
resources/skins.citizen.styles/common/common.less
View file

@ -3,7 +3,7 @@
*/
html {
scroll-behavior: smooth; // not supported by IE, Edge, Safari, and Opera, use JQuery as fallback
scroll-padding-top: @header-height + @margin-side; // fixed header offset, supported by major browsers
scroll-padding-top: ~'var(--height-header) + 20px'; // fixed header offset, supported by major browsers
}
html,
@ -78,7 +78,7 @@ textarea {
}
fieldset {
padding: @content-margin-top / 2 @margin-side;
padding: @content-margin-top / 2 20px;
border: 1px solid var( --border-color-base );
margin: @content-margin-top 0;
}
@ -187,8 +187,8 @@ a {
.mw-body,
.parsoid-body {
min-height: 80vh; // avoid footer being in the middle of the page
padding: 0 @margin-side;
margin-top: @header-height + @margin-side;
padding: 0 var( --padding-page );
margin-top: ~'calc(var( --height-header ) + 20px)';
direction: ltr;
}

8
resources/skins.citizen.styles/common/content.less
View file

@ -109,7 +109,7 @@
left: 0;
display: flex;
margin: 0;
transform: ~'translateX(calc(-100% - @{margin-side}))';
transform: ~'translateX(calc(-100% - var( --padding-page )))';
a {
.resource-loader-icon-link-small;
@ -227,7 +227,7 @@
> div.floatright,
> table.floatright {
width: 100vw;
margin: 0.6rem -@margin-side !important;
margin: ~'0.6rem calc(-1 * var( --padding-page )) !important';
clear: none;
float: unset;
}
@ -244,7 +244,7 @@
> table.floatleft,
> table.floatright {
padding: 0 @margin-side;
padding: 0 var( --padding-page );
}
}
}
@ -266,7 +266,7 @@
}
> table.floatnone {
padding: 0 @margin-side;
padding: 0 var( --padding-page );
}
}
}

20
resources/skins.citizen.styles/common/hacks.less
View file

@ -5,15 +5,17 @@ a.feedlink {
// CSS checkbox hack
.mw-checkbox-hack {
position: absolute;
z-index: 8;
display: block;
width: @icon-box-size + @margin-side + @icon-padding;
height: @header-height;
margin: 0;
cursor: pointer;
opacity: 0;
-webkit-touch-callout: none;
&-checkbox {
display: none;
}
&-button {
position: absolute;
z-index: 8;
overflow: hidden;
cursor: pointer;
text-indent: -999px;
}
}
.screen-reader-text {

7
resources/skins.citizen.styles/common/rootvariables.less
View file

@ -60,6 +60,13 @@
--opacity-icon-base--hover: @opacity-icon-base--hover;
--opacity-icon-base--active: @opacity-icon-base--active;
/* Size */
--size-icon: @size-icon;
--height-header: @height-header;
/* Paddings */
--padding-page: @padding-page;
/* Border Colors */
--border-color-base: @border-color-base;
--border-color-base--lighter: @border-color-base--lighter;

47
resources/variables.less
View file

@ -45,23 +45,6 @@
@color-accent-30--darken: #26437f;
/**
* Dark theme color palette
* Background color is used instead of shadow to show elevation
* and hierarchy in dark theme
* See https://material.io/design/color/dark-theme.html#properties
*/
@dark-color-base0: #131a21; // Surface color
@dark-color-base10: #1f262c; // 5% white overlay
@dark-color-base20: #242a31; // 7% white overlay
@dark-color-base30: #262c32; // 8% white overlay
@dark-color-base40: #282f35; // 9% white overlay
@dark-color-base50: #2d3339; // 11% white overlay
@dark-color-base60: #30363c; // 12% white overlay
@dark-color-base70: #343a40; // 14% white overlay
@dark-color-base80: #363c42; // 15% white overlay
@dark-color-base90: #393f45; // 16% white overlay
/* Background Colors */
@background-color-dp-00: @color-base100;
@background-color-dp-01: @color-base100;
@ -78,7 +61,7 @@
@background-color-framed--hover: @color-base100;
@background-color-framed--active: @color-base70;
@background-color-input: rgba( 255, 255, 255, 0.2 );
@background-color-input: rgba( 255, 255, 255, 0.5 );
@background-color-icon: rgba( 0, 0, 0, 0.4 );
@background-color-icon--hover: rgba( 0, 0, 0, 0.6 );
@ -115,6 +98,15 @@
@opacity-icon-base--hover: 0.6;
@opacity-icon-base--active: 0.8;
/* == Box Model properties == */
/* `--*size` variables are used for `*width` & `*height` properties. */
@size-icon: 20px;
@height-header: 56px;
/* Paddings */
@padding-page: 20px;
/* Border */
/* Border Colors */
@border-color-base: rgba( 0, 0, 0, 0.05 );
@border-color-base--lighter: rgba( 0, 0, 0, 0.02 );
@ -123,6 +115,23 @@
@border-color-input: @border-color-base;
@border-color-input--hover: rgba( 0, 0, 0, 0.4 );
/**
* Dark theme color palette
* Background color is used instead of shadow to show elevation
* and hierarchy in dark theme
* See https://material.io/design/color/dark-theme.html#properties
*/
@dark-color-base0: #131a21; // Surface color
@dark-color-base10: #1f262c; // 5% white overlay
@dark-color-base20: #242a31; // 7% white overlay
@dark-color-base30: #262c32; // 8% white overlay
@dark-color-base40: #282f35; // 9% white overlay
@dark-color-base50: #2d3339; // 11% white overlay
@dark-color-base60: #30363c; // 12% white overlay
@dark-color-base70: #343a40; // 14% white overlay
@dark-color-base80: #363c42; // 15% white overlay
@dark-color-base90: #393f45; // 16% white overlay
/* Background Colors */
@dark-background-color-dp-00: @dark-color-base0;
@dark-background-color-dp-01: @dark-color-base10;
@ -139,7 +148,7 @@
@dark-background-color-framed--hover: @dark-color-base30;
@dark-background-color-framed--active: @dark-color-base0;
@dark-background-color-input: rgba( 0, 0, 0, 0.2 );
@dark-background-color-input: rgba( 0, 0, 0, 0.5 );
@dark-background-color-icon: rgba( 255, 255, 255, 0.4 );
@dark-background-color-icon--hover: rgba( 255, 255, 255, 0.6 );

16
skinStyles/extensions/Echo/ext.echo.styles.badge.less
View file

@ -11,18 +11,20 @@
&-notice {
.mw-echo-notifications-badge {
top: 0;
width: @icon-box-size + @icon-padding;
height: @header-height;
width: var( --width-button-base );
height: var( --height-header );
margin: 0;
background-position: center;
background-repeat: no-repeat;
opacity: 0.4;
opacity: var( --opacity-icon-base );
transition: @transition-opacity-quick, @transition-transform-quick;
&:hover,
&:focus,
&:hover {
opacity: var( --opacity-icon-base--hover ) !important; // override all styles
}
&:active {
opacity: 0.6 !important; // override all styles
opacity: var( --opacity-icon-base--active ) !important;
}
// Badge tweaks
@ -32,7 +34,7 @@
}
&.mw-echo-notifications-badge-all-read {
opacity: 0.3; // 0.75 * 0.4 = 0.3
opacity: var( --opacity-base--disabled );
}
}
}

4
skinStyles/extensions/UniversalLanguageSelector/ext.uls.pt.less
View file

@ -9,8 +9,8 @@
#pt-uls a.uls-trigger,
#pt-uls a.uls-trigger:before {
display: block;
width: @icon-box-size + @icon-padding;
height: @header-height;
width: var( --width-button-base );
height: var( --height-header );
padding: 0 !important;
background-position: center;
background-size: @icon-box-size;

10
skinStyles/extensions/VisualEditor/ext.visualEditor.less
View file

@ -28,6 +28,10 @@
.ve-ui {
&-toolbar {
> .oo-ui-toolbar-bar {
background-color: var( --background-color-dp-00 );
}
&-floating {
z-index: 4;
}
@ -115,6 +119,12 @@
// 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-init-mw-desktopArticleTarget {
&-toolbar {
&.ve-ui-toolbar-floating > .oo-ui-toolbar-bar {