mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-15 02:24:04 +00:00
Merge pull request #524 from StarCitizenTools/rc
Citizen 2.0.0 beta release
This commit is contained in:
alistair3149
GitHub
commit
6e1a862073
|
|
@ -1,3 +1,3 @@
|
|||
{
|
||||
"extends": ["@commitlint/config-conventional"]
|
||||
}
|
||||
"extends": [ "@commitlint/config-conventional" ]
|
||||
}
|
||||
|
|
|
|||
2
.github/workflows/mediawiki.yml
vendored
2
.github/workflows/mediawiki.yml
vendored
|
|
@ -113,7 +113,7 @@ jobs:
|
|||
git config --global user.email "github-actions@users.noreply.github.com"
|
||||
git remote set-url origin "https://x-access-token:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git"
|
||||
git add .
|
||||
git commit -am "ci: lint code to MediaWiki standards" -m "Check commit and GitHub actions for more details"
|
||||
git commit -am "ci: 👷 lint code to MediaWiki standards" -m "Check commit and GitHub actions for more details"
|
||||
git pull --rebase
|
||||
git push
|
||||
else
|
||||
|
|
|
|||
4
.husky/prepare-commit-msg
Normal file
4
.husky/prepare-commit-msg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
#!/usr/bin/env sh
|
||||
. "$(dirname -- "$0")/_/husky.sh"
|
||||
|
||||
npx devmoji -e --lint
|
||||
|
|
@ -1,14 +1,14 @@
|
|||
{
|
||||
"extends": [
|
||||
"stylelint-config-idiomatic-order",
|
||||
"stylelint-config-wikimedia"
|
||||
],
|
||||
"rules": {
|
||||
"font-weight-notation": null,
|
||||
"selector-max-id": null,
|
||||
"no-descending-specificity": null,
|
||||
"declaration-no-important": null,
|
||||
"unit-disallowed-list": null,
|
||||
"declaration-property-unit-disallowed-list": null
|
||||
}
|
||||
}
|
||||
{
|
||||
"extends": [
|
||||
"stylelint-config-idiomatic-order",
|
||||
"stylelint-config-wikimedia"
|
||||
],
|
||||
"rules": {
|
||||
"font-weight-notation": null,
|
||||
"selector-max-id": null,
|
||||
"no-descending-specificity": null,
|
||||
"declaration-no-important": null,
|
||||
"unit-disallowed-list": null,
|
||||
"declaration-property-unit-disallowed-list": null
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ module.exports = {
|
|||
// On non-unix systems the linebreaks will be normalized to LF (unix) only at git commit,
|
||||
// assuming `core.autocrlf` is 'true' (default) or 'input'.
|
||||
js2svg: {
|
||||
indent: "\t",
|
||||
pretty: true,
|
||||
indent: '\t',
|
||||
pretty: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
{
|
||||
"bumpFiles": [
|
||||
{
|
||||
"filename": "skin.json",
|
||||
"type": "json"
|
||||
},
|
||||
{
|
||||
"filename": "package.json",
|
||||
"type": "json"
|
||||
},
|
||||
{
|
||||
"filename": "package-lock.json",
|
||||
"type": "json"
|
||||
}
|
||||
]
|
||||
}
|
||||
{
|
||||
"bumpFiles": [
|
||||
{
|
||||
"filename": "skin.json",
|
||||
"type": "json"
|
||||
},
|
||||
{
|
||||
"filename": "package.json",
|
||||
"type": "json"
|
||||
},
|
||||
{
|
||||
"filename": "package-lock.json",
|
||||
"type": "json"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
59
CHANGELOG.md
59
CHANGELOG.md
|
|
@ -2,6 +2,65 @@
|
|||
|
||||
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
||||
|
||||
## [2.0.0-beta.0](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/compare/v2.0.0-alpha.2...v2.0.0-beta.0) (2022-10-02)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **core:** ✨ smaller footer wordmark size on mobile ([c551225](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/c551225ec7a9be273a0d21eacba72644827836d1))
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **skinStyles:** 🐛 incorrect VE dark mode background ([9388b92](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/9388b92b2715031395e88f6872fa8c304efc0d9f)), closes [#489](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/issues/489) [#525](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/issues/525)
|
||||
|
||||
## [2.0.0-alpha.2](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/compare/v2.0.0-alpha.1...v2.0.0-alpha.2) (2022-10-01)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **core:** ✨ collapse page tool text below desktop ([6aee9f8](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/6aee9f8e03c21c3230d8015da154048160211639))
|
||||
* **core:** ✨ move catlinks to body footer ([9de7a1d](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/9de7a1d4b2d41911b9f8f2a738c6695efa06fcf2))
|
||||
* **core:** ✨ move footer info into body footer ([aaad2bb](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/aaad2bb92ae079240da9625bb121c9d8a31fc4c0))
|
||||
* **core:** ✨ move sitenotice out of mw-body ([61e8d05](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/61e8d053c450b581e4bcbca7363a8560e7759499))
|
||||
* **core:** ✨ page actions should take full width with toc ([9532aa4](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/9532aa4906caf9b03a2bf3d84083b6f04a5bba1c))
|
||||
* **core:** ✨ redesign site footer ([4902ae7](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/4902ae76ab2b88018072dfcfc71756960f94388a))
|
||||
* **core:** ✨ strict selector for category links ([6b47c86](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/6b47c86c70a14172006dd9cf43415036639d86d2))
|
||||
* **core:** ✨ tweak body footer styles ([bf66c60](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/bf66c60f3d5f83fa5aac8649c115748740fb3790))
|
||||
* **core:** ✨ tweak footer wiki name color ([2e8c98b](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/2e8c98b755ff0b42e165728e412127f64a01ecc4))
|
||||
* **core:** ✨ use space unit for drawer ([607c3f2](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/607c3f22b2d83bd5589c5749c5a7993ae50566c4))
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **core:** 🐛 incorrect color for footer site description ([bdc58fd](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/bdc58fdeaf2dcaf7968f849de979fef23d5ad07c))
|
||||
* **core:** 🐛 incorrect CSS variable name ([17907ea](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/17907ead6ded49c7eec8420f7878504b3d182496))
|
||||
|
||||
## [2.0.0-alpha.1](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/compare/v2.0.0-alpha.0...v2.0.0-alpha.1) (2022-09-30)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **core:** ✨ add extra page padding on desktop view ([87d1918](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/87d19187707da7d31207a7134b46759fca0985b4))
|
||||
* **core:** ✨ add jump to top link to sticky header ([5be20a2](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/5be20a256c3d3080b697f79422c852eeeae12cd7))
|
||||
* **core:** ✨ add sticky body header ([e72d7c0](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/e72d7c00a3449424b427ca5a153074e13617cd6a))
|
||||
* **core:** ✨ more responsive layout for sticky header ([9b1325b](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/9b1325bcb8b20b1ec74756fbb55c654a269a5eb7))
|
||||
* **core:** ✨ move fluid sticky transition ([f3e4332](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/f3e4332e615fdee1c00120e0868193212ca09831))
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **core:** 🐛 mitigate ToC overlap in various max width ([0058081](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/00580810ecb52589e4e5dc0c83e65c54bf441890))
|
||||
* **core:** 🐛 sticky header should not trigger in edit mode ([639c378](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/639c3787213f62e1644a26e6e03d5a08187d50a0))
|
||||
* **core:** 🐛 wiki name wrapping in drawer ([20ed41e](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/20ed41ec2c4a5155a7edc0c8c525e6a6cf543e45))
|
||||
|
||||
## [2.0.0-alpha.0](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/compare/v1.17.9...v2.0.0-alpha.0) (2022-09-30)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **core:** redesign site header ([#521](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/issues/521)) ([6de95d4](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/6de95d4fec06ec7da8c0249f4c18acbec71d31cb))
|
||||
|
||||
### [1.17.9](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/compare/v1.17.8...v1.17.9) (2022-09-28)
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
# Citizen
|
||||
[](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/graphs/contributors)  [](https://www.gnu.org/licenses/gpl-3.0) [](https://www.mediawiki.org)
|
||||
[](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/graphs/contributors)  [](https://www.gnu.org/licenses/gpl-3.0) [](https://www.mediawiki.org)
|
||||
|
||||
Citizen is a responsive skin for [MediaWiki](https://www.mediawiki.org) built by the [Star Citizen Wiki](https://starcitizen.tools) team. Although it is specifically built for the Star Citizen Wiki, the skin is designed to be flexible to run on any Mediawiki installation that is **1.35.2 or higher**. Due to resource constraints, we might not be able to provide full support for setups that are vastly different than us, but please feel free to submit patches or bug report!
|
||||
|
||||
Live demo can be seen at the [Star Citizen Wiki](https://starcitizen.tools), more avaliable [here](https://wikiapiary.com/wiki/Skin:Citizen).
|
||||
|
||||
If you are looking for the old design, [click here](https://github.com/StarCitizenTools/mediawiki-skins-Citizen/releases/tag/v1.17.9) for the the last 1.X release.
|
||||
|
||||
## Notable features
|
||||
- **Fully responsive skin**: Responsive and able to adapt to different screen sizes. 📱💻🖥️
|
||||
- **Light/dark mode support**: Switch between light and dark mode. ***Require JS*** ☀️🌙
|
||||
|
|
|
|||
|
|
@ -19,6 +19,9 @@
|
|||
"citizen-sitestats-images-label": "files",
|
||||
"citizen-sitestats-users-label": "users",
|
||||
"citizen-sitestats-edits-label": "edits",
|
||||
"citizen-page-info-copyright": "Copyright",
|
||||
"citizen-page-info-credits": "Credits",
|
||||
"citizen-page-info-lastmod": "Last modified",
|
||||
"citizen-footer-desc": "Edit this text on [[MediaWiki:Citizen-footer-desc]]",
|
||||
"citizen-footer-tagline": "Edit this text on [[MediaWiki:Citizen-footer-tagline]]",
|
||||
"citizen-action-addsection": "Add topic",
|
||||
|
|
|
|||
|
|
@ -20,6 +20,9 @@
|
|||
"citizen-sitestats-images-label": "Label for the file statistics",
|
||||
"citizen-sitestats-users-label": "Label for the user statistics",
|
||||
"citizen-sitestats-edits-label": "Label for the edit statistics",
|
||||
"citizen-page-info-copyright": "Label for the copyright message",
|
||||
"citizen-page-info-credits": "Label for the article credits message",
|
||||
"citizen-page-info-lastmod": "Label for the last modified message",
|
||||
"citizen-footer-desc": "Default text for the site footer decription. Add the language code to the end of the link if not en (e.g. MediaWiki:Citizen-footer-description/de for German).",
|
||||
"citizen-footer-tagline": "Default text for the site footer tagline. Add the language code to the end of the link if not en (e.g. MediaWiki:Citizen-footer-tagline/de for German).",
|
||||
"citizen-action-addsection": "Used in the Citizen skin. See for example {{canonicalurl:Talk:Main_Page|useskin=vector}}\n{{Identical|Add topic}}. Same as vector-action-addsection in Vector skin.",
|
||||
|
|
|
|||
|
|
@ -41,13 +41,7 @@ final class Footer extends Partial {
|
|||
$footerLinks = $skin->getFooterLinksPublic();
|
||||
$msg = [ 'desc', 'tagline' ];
|
||||
|
||||
// Get last modified message
|
||||
if ( $footerLinks['info']['lastmod'] && isset( $footerLinks['info']['lastmod'] ) ) {
|
||||
$data['html-lastmodified'] = $footerLinks['info']['lastmod'];
|
||||
unset( $footerLinks['info']['lastmod'] );
|
||||
}
|
||||
|
||||
// Get messages
|
||||
// Get site footer messages
|
||||
foreach ( $msg as $key ) {
|
||||
$data["msg-citizen-footer-$key"] = $skin->msg( "citizen-footer-$key" )
|
||||
->inContentLanguage()->parse();
|
||||
|
|
@ -64,6 +58,8 @@ final class Footer extends Partial {
|
|||
$items[] = [
|
||||
'id' => "$rowId-$key",
|
||||
'html' => $link,
|
||||
// This is not great, need to reimplemented when we move to 1.39
|
||||
'label' => $skin->msg( "citizen-page-info-$key" )
|
||||
];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -125,12 +125,12 @@ class SkinCitizen extends SkinMustache {
|
|||
'data-notifications' => $header->getNotifications(),
|
||||
'data-personal-menu' => $header->buildPersonalMenu(),
|
||||
'data-search-box' => $header->buildSearchProps(),
|
||||
'html-citizen-jumptotop' => $this->msg( 'citizen-jumptotop' )->text() . ' [home]',
|
||||
],
|
||||
'data-pagetools' => $tools->buildPageTools( $parentData ),
|
||||
'data-citizen-footer' => $footer->getFooterData(),
|
||||
// HTML strings
|
||||
'html-title-heading--formatted' => $pageTitle->buildTitle( $parentData, $title ),
|
||||
'html-citizen-jumptotop' => $this->msg( 'citizen-jumptotop' )->text() . ' [home]',
|
||||
'html-body-content--formatted' => $bodycontent->buildBodyContent(),
|
||||
'html-tagline' => $tagline->getTagline(),
|
||||
];
|
||||
|
|
|
|||
42
package-lock.json
generated
42
package-lock.json
generated
|
|
@ -1,14 +1,15 @@
|
|||
{
|
||||
"name": "mediawiki-skins-Citizen",
|
||||
"version": "1.17.9",
|
||||
"version": "2.0.0-beta.0",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"version": "1.17.9",
|
||||
"version": "2.0.0-beta.0",
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^17.1.2",
|
||||
"@commitlint/config-conventional": "^17.1.0",
|
||||
"devmoji": "^2.3.0",
|
||||
"eslint-config-wikimedia": "0.23.0",
|
||||
"grunt-banana-checker": "0.10.0",
|
||||
"husky": "^8.0.1",
|
||||
|
|
@ -1793,6 +1794,20 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/devmoji": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/devmoji/-/devmoji-2.3.0.tgz",
|
||||
"integrity": "sha512-ErQdYUsE7tKxqDzQzRos6fKWaRIFUOJvMkQODq9iYDI3o5X6nxD78XEdGNYaW5AaJW4uxj+XQTkCuJkV86Qg6g==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"chalk": "^4.1.1",
|
||||
"commander": "7.2.0",
|
||||
"ts-interface-checker": "1.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"devmoji": "bin/devmoji.js"
|
||||
}
|
||||
},
|
||||
"node_modules/diff": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
|
||||
|
|
@ -5596,6 +5611,12 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/ts-interface-checker": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-1.0.0.tgz",
|
||||
"integrity": "sha512-yUeWbFBDiwPodNqrqpvQpGWheL6PvNu2/pVAb9yy2vzdkkflCgwVA4U2akByPCXzYTum3/5/nB92yKuiLpSo/Q==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/ts-node": {
|
||||
"version": "10.9.1",
|
||||
"resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
|
||||
|
|
@ -7356,6 +7377,17 @@
|
|||
"integrity": "sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==",
|
||||
"dev": true
|
||||
},
|
||||
"devmoji": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/devmoji/-/devmoji-2.3.0.tgz",
|
||||
"integrity": "sha512-ErQdYUsE7tKxqDzQzRos6fKWaRIFUOJvMkQODq9iYDI3o5X6nxD78XEdGNYaW5AaJW4uxj+XQTkCuJkV86Qg6g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chalk": "^4.1.1",
|
||||
"commander": "7.2.0",
|
||||
"ts-interface-checker": "1.0.0"
|
||||
}
|
||||
},
|
||||
"diff": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
|
||||
|
|
@ -10220,6 +10252,12 @@
|
|||
"integrity": "sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==",
|
||||
"dev": true
|
||||
},
|
||||
"ts-interface-checker": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-1.0.0.tgz",
|
||||
"integrity": "sha512-yUeWbFBDiwPodNqrqpvQpGWheL6PvNu2/pVAb9yy2vzdkkflCgwVA4U2akByPCXzYTum3/5/nB92yKuiLpSo/Q==",
|
||||
"dev": true
|
||||
},
|
||||
"ts-node": {
|
||||
"version": "10.9.1",
|
||||
"resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
"devDependencies": {
|
||||
"@commitlint/cli": "^17.1.2",
|
||||
"@commitlint/config-conventional": "^17.1.0",
|
||||
"devmoji": "^2.3.0",
|
||||
"eslint-config-wikimedia": "0.23.0",
|
||||
"grunt-banana-checker": "0.10.0",
|
||||
"husky": "^8.0.1",
|
||||
|
|
@ -29,5 +30,5 @@
|
|||
"stylelint-config-wikimedia": "0.13.1",
|
||||
"svgo": "2.8.0"
|
||||
},
|
||||
"version": "1.17.9"
|
||||
"version": "2.0.0-beta.0"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -57,6 +57,47 @@
|
|||
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: var( --header-card-maxheight );
|
||||
margin: var( --space-sm );
|
||||
overscroll-behavior: contain;
|
||||
user-select: none;
|
||||
.citizen-card();
|
||||
.citizen-card-hide( bottom @position );
|
||||
|
||||
@media ( min-width: @width-breakpoint-tablet ) {
|
||||
& when ( @position = left ) {
|
||||
right: unset;
|
||||
}
|
||||
|
||||
& when ( @position = right ) {
|
||||
left: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@media ( min-width: @width-breakpoint-desktop ) {
|
||||
right: unset;
|
||||
left: 100%;
|
||||
& when ( @position = left ) {
|
||||
top: 0;
|
||||
bottom: unset;
|
||||
.citizen-card-hide( top left );
|
||||
}
|
||||
|
||||
& when ( @position = right ) {
|
||||
bottom: 0;
|
||||
.citizen-card-hide( bottom left );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// To hide objects, but keep them accessible for screen-readers
|
||||
.hidden() {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
|
||||
<title>
|
||||
history
|
||||
</title>
|
||||
<path fill="#fff" d="M11.424 0C6.686 0 2.857 3.806 2.857 8.5H0l3.71 3.68.066.136L7.62 8.5H4.76c0-3.65 2.986-6.61 6.667-6.61 3.68 0 6.665 2.96 6.665 6.61 0 3.65-2.985 6.61-6.666 6.61a6.668 6.668 0 0 1-4.71-1.94l-1.35 1.337A8.553 8.553 0 0 0 11.426 17C16.16 17 20 13.194 20 8.5S16.162 0 11.424 0zm-1.037 5v4.524l3.904 2.298.66-1.1-3.192-1.877V5H10.39z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 520 B |
8
resources/skins.citizen.icons/shared/close.svg
Normal file
8
resources/skins.citizen.icons/shared/close.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 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,18 +159,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
@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 );
|
||||
|
|
|
|||
|
|
@ -63,17 +63,17 @@ function bindCloseOnUnload() {
|
|||
* @return {void}
|
||||
*/
|
||||
function onTitleHidden( document ) {
|
||||
const title = document.getElementById( 'firstHeading' );
|
||||
const title = document.getElementById( 'citizen-body-header-sticky-sentinel' );
|
||||
|
||||
if ( title ) {
|
||||
const scrollObserver = require( './scrollObserver.js' );
|
||||
|
||||
const observer = scrollObserver.initScrollObserver(
|
||||
() => {
|
||||
document.body.classList.add( 'citizen-title--hidden' );
|
||||
document.body.classList.add( 'citizen-body-header--sticky' );
|
||||
},
|
||||
() => {
|
||||
document.body.classList.remove( 'citizen-title--hidden' );
|
||||
document.body.classList.remove( 'citizen-body-header--sticky' );
|
||||
}
|
||||
);
|
||||
observer.observe( title );
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
top: 100%;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
max-height: ~'calc( 100vh - var( --height-header ) )';
|
||||
max-height: var( --header-card-maxheight );
|
||||
box-sizing: border-box;
|
||||
padding-top: 0.75rem;
|
||||
margin-top: -0.75rem;
|
||||
|
|
|
|||
|
|
@ -169,7 +169,7 @@ function getSuggestions( searchQuery ) {
|
|||
matchedTitle = cleanup( matchedTitle );
|
||||
|
||||
// eslint thinks it is an array
|
||||
// eslint-disable-next-line no-restricted-syntax
|
||||
|
||||
return !( title.includes( matchedTitle ) || matchedTitle.includes( title ) );
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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 - 10rem )'; // 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,16 +240,29 @@
|
|||
|
||||
@media ( max-width: @width-breakpoint-mobile ) {
|
||||
.toc {
|
||||
max-width: ~'calc(100vw - var( --padding-page ) * 2)';
|
||||
max-width: ~'calc(100vw - var( --space-sm ) * 2)';
|
||||
}
|
||||
}
|
||||
|
||||
@media ( min-width: @width-breakpoint-desktop-wide ) {
|
||||
.citizen-toc-enabled {
|
||||
.mw-body-header,
|
||||
.citizen-body {
|
||||
margin-right: ~'max( var( --margin-layout ), 0 )';
|
||||
margin-left: ~'max( var( --margin-layout ), var( --width-toc ) )';
|
||||
.citizen-body,
|
||||
.mw-body-footer {
|
||||
// Reserve space for ToC
|
||||
padding-right: var( --width-toc );
|
||||
}
|
||||
}
|
||||
|
||||
.citizen-animations-ready {
|
||||
.toc {
|
||||
transition: @transition-transform;
|
||||
}
|
||||
}
|
||||
|
||||
.citizen-body-header--sticky {
|
||||
.toc {
|
||||
transform: translateY( 3rem );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
.catlinks {
|
||||
margin-top: @content-margin-top * 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
clear: both;
|
||||
gap: var( --space-lg );
|
||||
line-height: 1.2;
|
||||
|
||||
.mw-normal-catlinks {
|
||||
|
|
@ -15,8 +17,6 @@
|
|||
|
||||
.mw-normal-catlinks,
|
||||
.mw-hidden-catlinks {
|
||||
padding: @content-margin-top 0;
|
||||
|
||||
> a {
|
||||
display: block;
|
||||
color: var( --color-base--subtle );
|
||||
|
|
@ -34,10 +34,10 @@
|
|||
gap: 0.375rem;
|
||||
letter-spacing: 0; // hidden-catlink title does not have a selector
|
||||
|
||||
li {
|
||||
> li {
|
||||
display: block;
|
||||
|
||||
a {
|
||||
> a {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid var( --border-color-base--darker );
|
||||
|
|
|
|||
29
resources/skins.citizen.styles/ContentFooter.less
Normal file
29
resources/skins.citizen.styles/ContentFooter.less
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
.mw-body-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: var( --space-lg ) 0;
|
||||
gap: var( --space-lg );
|
||||
}
|
||||
|
||||
.page-info {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var( --space-lg );
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var( --space-sm );
|
||||
}
|
||||
|
||||
&__label {
|
||||
color: var( --color-base--subtle );
|
||||
font-size: @ui-menu-text;
|
||||
letter-spacing: 0.75px;
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: var( --color-base--subtle );
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,24 +1,16 @@
|
|||
.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 );
|
||||
padding: var( --space-sm ) 0;
|
||||
.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( --space-md );
|
||||
border-bottom: 1px solid var( --border-color-base );
|
||||
gap: 1.25rem;
|
||||
gap: var( --space-md );
|
||||
}
|
||||
|
||||
// Keep aspect ratio
|
||||
|
|
@ -28,8 +20,11 @@
|
|||
}
|
||||
|
||||
&__siteinfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var( --space-xs );
|
||||
|
||||
.mw-logo-wordmark {
|
||||
margin-top: 0.375rem;
|
||||
color: var( --color-base--emphasized );
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
|
@ -39,9 +34,9 @@
|
|||
display: grid;
|
||||
max-width: 92vw;
|
||||
justify-content: center;
|
||||
padding: 0.625rem 0.625rem 1.25rem 0.625rem; // TODO: Replace with space token
|
||||
padding: var( --space-sm ) var( --space-md );
|
||||
font-size: 0.875rem; // TODO: Make this a variable
|
||||
gap: 0.625rem; // TODO: Replace with space token
|
||||
gap: var( --space-sm );
|
||||
grid-template-columns: repeat( auto-fit, 15rem );
|
||||
|
||||
a {
|
||||
|
|
@ -97,18 +92,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media ( max-width: @width-breakpoint-tablet ) {
|
||||
.citizen-drawer {
|
||||
&__card {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&__header {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media ( min-width: @width-breakpoint-tablet ) {
|
||||
.citizen-drawer {
|
||||
&__logo img {
|
||||
|
|
@ -119,13 +102,17 @@
|
|||
&__siteinfo {
|
||||
.mw-logo-wordmark {
|
||||
font-size: 2rem;
|
||||
// Sometimes long wiki name will wrap when the menu is too small
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media ( min-width: @width-breakpoint-desktop-wide ) {
|
||||
.citizen-drawer__menu {
|
||||
max-width: 1200px; // So that it doesn't span too wide
|
||||
@media ( min-width: @width-breakpoint-desktop ) {
|
||||
.citizen-drawer {
|
||||
&__header {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,50 +1,54 @@
|
|||
.last-modified-bar {
|
||||
background: @color-footer-background-60;
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
max-width: @footer-width;
|
||||
align-items: center;
|
||||
padding: 12px var( --padding-page );
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: @icon-padding;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
opacity: var( --opacity-icon-base );
|
||||
}
|
||||
|
||||
&-text {
|
||||
a {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mw-footer {
|
||||
background: @color-footer-background-50;
|
||||
.citizen-footer {
|
||||
padding-top: var( --space-xl );
|
||||
padding-bottom: var( --space-xl );
|
||||
margin-top: var( --space-xl );
|
||||
// Reserve space for header
|
||||
margin-bottom: var( --header-size );
|
||||
background-color: var( --color-surface-2 );
|
||||
clear: both;
|
||||
color: @color-footer-text;
|
||||
color: var( --color-base--subtle );
|
||||
direction: ltr;
|
||||
font-size: @ui-menu-text;
|
||||
line-height: 1.4;
|
||||
font-size: 0.875rem;
|
||||
|
||||
a,
|
||||
a.external {
|
||||
color: @color-footer-link;
|
||||
&__container {
|
||||
max-width: var( --width-layout--extended );
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: @color-footer-link-active;
|
||||
text-decoration: none;
|
||||
&__content,
|
||||
&__bottom {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: var( --space-md ) 0;
|
||||
gap: var( --space-md );
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid var( --border-color-base );
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
&__siteinfo {
|
||||
display: flex;
|
||||
max-width: 90ch;
|
||||
flex-direction: column;
|
||||
gap: var( --space-sm );
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
line-height: var( --line-height );
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var( --color-base--emphasized );
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -57,63 +61,34 @@
|
|||
}
|
||||
|
||||
#footer {
|
||||
&-content {
|
||||
display: flex;
|
||||
max-width: @footer-width;
|
||||
flex-direction: column;
|
||||
padding: 0 var( --padding-page );
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
margin-top: @margin-side * 1.5;
|
||||
background-color: @color-footer-background-40;
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
max-width: @footer-width;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: @margin-side / 2 var( --padding-page );
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-sitetitle {
|
||||
margin: @margin-side * 2.5 0 @margin-side / 2 0;
|
||||
color: #f8f9fa;
|
||||
font-size: 20px;
|
||||
color: var( --color-base--emphasized );
|
||||
font-size: 1.25rem;
|
||||
|
||||
img.mw-logo-wordmark {
|
||||
width: auto;
|
||||
height: 20px;
|
||||
height: 54px;
|
||||
filter: invert( 1 ) hue-rotate( 180deg );
|
||||
}
|
||||
}
|
||||
|
||||
&-desc {
|
||||
margin: @margin-side / 2 0;
|
||||
}
|
||||
|
||||
&-places {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -@margin-side !important;
|
||||
|
||||
li a {
|
||||
display: block;
|
||||
padding: @margin-side / 2 var( --padding-page );
|
||||
ul {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
margin-top: @margin-side / 2;
|
||||
font-size: 12px;
|
||||
opacity: 0.5;
|
||||
a {
|
||||
display: block;
|
||||
padding: var( --space-sm ) var( --space-md );
|
||||
border-radius: var( --border-radius--small );
|
||||
|
||||
li {
|
||||
margin: @margin-side / 2 0;
|
||||
&:hover {
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var( --background-color-quiet--active );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -123,7 +98,10 @@
|
|||
|
||||
&-icons {
|
||||
display: flex;
|
||||
margin: 0 -@margin-side / 2;
|
||||
|
||||
ul {
|
||||
gap: var( --space-sm );
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex; // Horizontally aligned with there are two icons in the same li
|
||||
|
|
@ -132,7 +110,16 @@
|
|||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media ( min-width: @width-breakpoint-desktop ) {
|
||||
.citizen-footer {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#footer-sitetitle {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,32 +1,19 @@
|
|||
.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;
|
||||
--header-card-maxheight: ~'calc( 100vh - var( --header-size ) - var( --space-md ) )';
|
||||
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 +22,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 +38,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 +81,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 +96,8 @@
|
|||
&__start,
|
||||
&__end {
|
||||
display: flex;
|
||||
flex-direction: var( --header-direction );
|
||||
gap: var( --space-xs );
|
||||
}
|
||||
|
||||
&__start {
|
||||
|
|
@ -114,37 +105,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 +112,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.citizen-title--hidden {
|
||||
.citizen-header {
|
||||
&__title {
|
||||
&--site {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&--page {
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.skin-citizen-dark {
|
||||
.citizen-header__button {
|
||||
&Icon,
|
||||
|
|
@ -179,8 +125,9 @@
|
|||
#p-notifications {
|
||||
ul {
|
||||
display: flex;
|
||||
height: var( --height-header );
|
||||
flex-direction: var( --header-direction );
|
||||
align-items: center;
|
||||
gap: var( --space-xs );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -198,12 +145,17 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
&:hover {
|
||||
background-color: none;
|
||||
color: var( --color-base );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media ( min-width: @width-breakpoint-desktop ) {
|
||||
.citizen-header {
|
||||
--header-direction: column;
|
||||
--header-card-maxheight: ~'calc( 100vh - var( --space-sm ) * 2 )';
|
||||
top: 0;
|
||||
right: unset;
|
||||
left: 0;
|
||||
border-top: 0;
|
||||
border-right: 1px solid var( --border-color-base );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -307,7 +307,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media ( min-width: @width-breakpoint-tablet ) {
|
||||
@media ( max-width: @width-breakpoint-tablet ) {
|
||||
.page-actions {
|
||||
&__item {
|
||||
position: unset;
|
||||
}
|
||||
|
||||
&__card {
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media ( min-width: @width-breakpoint-desktop ) {
|
||||
.page-actions {
|
||||
position: relative;
|
||||
margin-right: 0;
|
||||
|
|
@ -324,19 +337,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media ( max-width: @width-breakpoint-tablet ) {
|
||||
.page-actions {
|
||||
&__item {
|
||||
position: unset;
|
||||
}
|
||||
|
||||
&__card {
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Reset hover styles if it is a touch device
|
||||
// This is dumb but hover:hover overrides active states
|
||||
@media ( hover: none ) {
|
||||
|
|
|
|||
|
|
@ -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 );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -154,14 +146,3 @@
|
|||
.citizen-card-transition();
|
||||
}
|
||||
}
|
||||
|
||||
@media ( max-width: @width-breakpoint-tablet ) {
|
||||
.citizen-personalMenu {
|
||||
&__card {
|
||||
position: fixed;
|
||||
top: var( --height-header );
|
||||
right: var( --padding-page );
|
||||
left: var( --padding-page );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
87
resources/skins.citizen.styles/Stickyheader.less
Normal file
87
resources/skins.citizen.styles/Stickyheader.less
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
#citizen-body-header-sticky-sentinel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ve-activated,
|
||||
.action-edit {
|
||||
// HACK: So sticky header will never trigger in edit action
|
||||
#citizen-body-header-sticky-sentinel {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.citizen-body-header--sticky {
|
||||
.mw-body-header {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
align-items: center;
|
||||
padding-bottom: var( --space-md );
|
||||
border-bottom: 1px solid var( --border-color-base );
|
||||
background-color: var( --color-surface-0 );
|
||||
|
||||
.mw-indicators {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.page-heading {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.firstHeading {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.citizen-jumptotop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-radius: var( --border-radius--small );
|
||||
margin: ~'calc( var( --space-sm ) * -1 )';
|
||||
|
||||
&:hover {
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var( --background-color-quiet--active );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media ( max-width: @width-breakpoint-tablet ), ( max-height: 800px ) {
|
||||
.citizen-body-header--sticky {
|
||||
#siteSub {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page-actions {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media ( min-width: @width-breakpoint-desktop-wide ) {
|
||||
.citizen-body-header--sticky {
|
||||
.citizen-toc-enabled {
|
||||
.page-actions {
|
||||
transform: translateX( var( --width-toc ) );
|
||||
}
|
||||
}
|
||||
|
||||
.toc {
|
||||
transform: translateY( 3rem );
|
||||
|
||||
@media ( max-height: 800px ) {
|
||||
transform: translateY( 2rem ) !important; // Somehow need this idk why
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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,19 @@
|
|||
|
||||
html {
|
||||
/* Size */
|
||||
--height-header: @height-header;
|
||||
--header-size: @header-size;
|
||||
--width-layout: @width-layout;
|
||||
--width-layout--extended: ~'calc( var( --width-layout ) * 1.5 )';
|
||||
--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;
|
||||
|
|
|
|||
|
|
@ -3,12 +3,18 @@
|
|||
.mw-body,
|
||||
.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,
|
||||
.citizen-footer {
|
||||
padding-right: var( --padding-page );
|
||||
padding-left: var( --padding-page );
|
||||
}
|
||||
|
||||
.mw-body-header,
|
||||
.citizen-body {
|
||||
.citizen-body,
|
||||
.mw-body-footer {
|
||||
max-width: var( --width-layout );
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
|
|
@ -19,9 +25,10 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
padding-top: @content-margin-top;
|
||||
padding-top: var( --space-md );
|
||||
margin-top: var( --space-xl );
|
||||
margin-bottom: @content-margin-top * 2;
|
||||
gap: @content-margin-top;
|
||||
gap: var( --space-lg );
|
||||
}
|
||||
|
||||
.page-heading {
|
||||
|
|
@ -44,35 +51,6 @@ a.image {
|
|||
}
|
||||
}
|
||||
|
||||
#mw-data-after-content {
|
||||
padding-bottom: var( --padding-page );
|
||||
background: var( --color-surface-0 );
|
||||
}
|
||||
|
||||
.mw-footer,
|
||||
#mw-data-after-content {
|
||||
position: relative;
|
||||
margin-top: var( --padding-page );
|
||||
|
||||
// Footer spacer
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: ~'calc( var( --padding-page ) * -2 )';
|
||||
right: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
height: ~'calc( var( --padding-page ) * 2 )';
|
||||
background: var( --color-surface-0 );
|
||||
content: '';
|
||||
-webkit-mask-image: linear-gradient( 0deg, #000, transparent );
|
||||
mask-image: linear-gradient( 0deg, #000, transparent );
|
||||
}
|
||||
}
|
||||
|
||||
#mw-data-after-content + .mw-footer {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media ( min-width: @width-breakpoint-tablet ) {
|
||||
div.tleft,
|
||||
figure.mw-halign-left,
|
||||
|
|
@ -100,6 +78,23 @@ a.image {
|
|||
}
|
||||
}
|
||||
|
||||
@media ( min-width: @width-breakpoint-desktop ) {
|
||||
.mw-body,
|
||||
.parsoid-body,
|
||||
.citizen-footer {
|
||||
padding-right: ~'calc( var( --padding-page ) * 2 )';
|
||||
padding-left: ~'calc( var( --padding-page ) * 2 )';
|
||||
}
|
||||
|
||||
#siteNotice,
|
||||
.mw-body,
|
||||
.parsoid-body,
|
||||
.citizen-footer {
|
||||
// Reserve space for header
|
||||
margin-left: var( --header-size );
|
||||
}
|
||||
}
|
||||
|
||||
/* Wider page width for certain namespaces */
|
||||
@media ( min-width: @width-breakpoint-desktop-wide ) {
|
||||
// 1 - Special, 6 - File, 14 - Category
|
||||
|
|
@ -107,7 +102,7 @@ a.image {
|
|||
&--1,
|
||||
&-6,
|
||||
&-14 {
|
||||
--width-layout: @width-breakpoint-desktop-wide - @padding-page * 2;
|
||||
--width-layout: var( --width-layout--extended );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,9 @@
|
|||
@import 'Pagetools.less';
|
||||
@import 'Menu.less';
|
||||
@import 'Catlinks.less';
|
||||
@import 'ContentFooter.less';
|
||||
@import 'Footer.less';
|
||||
@import 'Stickyheader.less';
|
||||
}
|
||||
|
||||
@media print {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
@ -339,7 +342,6 @@
|
|||
*/
|
||||
@html-font-size: 100%;
|
||||
@margin-side: 20px;
|
||||
@footer-width: 1290px;
|
||||
@icon-size: 1.125rem; // 18px, TODO: Replace this var
|
||||
@icon-box-size: @icon-size + @icon-margin * 2;
|
||||
@icon-margin: 3px;
|
||||
|
|
|
|||
11
skin.json
11
skin.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "Citizen",
|
||||
"version": "1.17.9",
|
||||
"version": "2.0.0-beta.0",
|
||||
"author": [
|
||||
"[https://www.mediawiki.org/wiki/User:Alistair3149 Alistair3149]",
|
||||
"[https://www.mediawiki.org/wiki/User:Octfx Octfx]",
|
||||
|
|
@ -33,7 +33,6 @@
|
|||
"skins.citizen.icons.n",
|
||||
"skins.citizen.icons.t",
|
||||
"skins.citizen.icons.pt",
|
||||
"skins.citizen.icons.footer",
|
||||
"skins.citizen.icons.badges",
|
||||
"skins.citizen.icons.sitestats"
|
||||
],
|
||||
|
|
@ -275,6 +274,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",
|
||||
|
|
@ -441,13 +441,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"skins.citizen.icons.footer": {
|
||||
"class": "ResourceLoaderImageModule",
|
||||
"selector": ".last-modified-bar-icon",
|
||||
"images": {
|
||||
"lastmod": "resources/skins.citizen.icons.footer/history_white.svg"
|
||||
}
|
||||
},
|
||||
"skins.citizen.icons.sections": {
|
||||
"class": "ResourceLoaderImageModule",
|
||||
"selector": ".section-indicator",
|
||||
|
|
|
|||
|
|
@ -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 );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
@import '../../../resources/variables.less';
|
||||
|
||||
.read-more-container {
|
||||
max-width: ~'calc( @{footer-width} + var( --padding-page ) * 2 )';
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
@ -103,6 +108,10 @@
|
|||
|
||||
&-targetWidget {
|
||||
border-color: var( --border-color-input );
|
||||
|
||||
&:not( .oo-ui-pendingElement-pending ) {
|
||||
background: var( --color-surface-1 );
|
||||
}
|
||||
}
|
||||
|
||||
&-overlay {
|
||||
|
|
@ -113,6 +122,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
&-expandableContent {
|
||||
&-fade {
|
||||
background: linear-gradient( to right, rgba( 255, 255, 255, 0 ) 0, var( --color-surface-1 ) 90% );
|
||||
}
|
||||
|
||||
&-toggle {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&-mwSaveDialog {
|
||||
&-summary {
|
||||
background-color: transparent;
|
||||
|
|
@ -146,8 +165,27 @@
|
|||
}
|
||||
}
|
||||
|
||||
&-mwTransclusionDialog-addParameterFieldset .ve-ui-mwParameterSearchWidget {
|
||||
border-color: var( --border-color-base );
|
||||
&-mwTransclusion {
|
||||
&Dialog-addParameterFieldset .ve-ui-mwParameterSearchWidget {
|
||||
border-color: var( --border-color-base );
|
||||
}
|
||||
|
||||
&Outline {
|
||||
&ButtonWidget {
|
||||
&.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
&.oo-ui-optionWidget-selected .oo-ui-buttonElement-button {
|
||||
background-color: var( --background-color-primary--active );
|
||||
}
|
||||
}
|
||||
|
||||
&TemplateWidget-sticky {
|
||||
background-color: var( --color-surface-1 );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--mwParameterResultWidget {
|
||||
|
|
@ -181,15 +219,21 @@
|
|||
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;
|
||||
}
|
||||
|
||||
&-floating {
|
||||
.ve-init-mw-desktopArticleTarget-toolbarPlaceholder-bar {
|
||||
background: var( --color-surface-0 );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -197,12 +241,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 +327,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
|
||||
|
|
|
|||
9
templates/ContentFooter.mustache
Normal file
9
templates/ContentFooter.mustache
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{{!
|
||||
|
||||
}}
|
||||
<footer class="mw-body-footer">
|
||||
{{{html-categories}}}
|
||||
{{#data-citizen-footer}}
|
||||
{{#data-citizen-info}}{{>ContentFooter__item}}{{/data-citizen-info}}
|
||||
{{/data-citizen-footer}}
|
||||
</footer>
|
||||
8
templates/ContentFooter__item.mustache
Normal file
8
templates/ContentFooter__item.mustache
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<div class="page-info">
|
||||
{{#array-items}}
|
||||
<section id="{{id}}" class="page-info__item">
|
||||
<div class="page-info__label">{{label}}</div>
|
||||
<div class="page-info__text">{{{html}}}</div>
|
||||
</section>
|
||||
{{/array-items}}
|
||||
</div>
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
"featured article". An empty array if none are defined.
|
||||
string html-title-heading--formatted
|
||||
string html-tagline
|
||||
string html-citizen-jumptotop Jump to top title text
|
||||
}}
|
||||
<header class="mw-body-header">
|
||||
<div class="page-heading">
|
||||
|
|
@ -11,6 +12,8 @@
|
|||
{{>Indicators}}
|
||||
</div>
|
||||
<div id="siteSub">{{html-tagline}}</div>
|
||||
<a href="#top" class="citizen-jumptotop" title="{{html-citizen-jumptotop}}"></a>
|
||||
</div>
|
||||
{{>PageTools}}
|
||||
</header>
|
||||
</header>
|
||||
<div id="citizen-body-header-sticky-sentinel"></div>
|
||||
|
|
@ -16,25 +16,18 @@
|
|||
string msg-citizen-footer-tagline
|
||||
}}
|
||||
|
||||
<footer class="mw-footer" {{{html-user-language-attributes}}}>
|
||||
{{#html-lastmodified}}
|
||||
<div class="last-modified-bar">
|
||||
<div class="last-modified-bar-content">
|
||||
<div class="last-modified-bar-icon"></div>
|
||||
<div class="last-modified-bar-text">{{{.}}}</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/html-lastmodified}}
|
||||
<div id="footer-content">
|
||||
<h2 id="footer-sitetitle" class="mw-wiki-title">{{>Wordmark}}</h2>
|
||||
<p id="footer-desc">{{{msg-citizen-footer-desc}}}</p>
|
||||
{{#data-citizen-places}}{{>Footer__row}}{{/data-citizen-places}}
|
||||
{{#data-citizen-info}}{{>Footer__row}}{{/data-citizen-info}}
|
||||
</div>
|
||||
<div id="footer-bottom">
|
||||
<div id="footer-bottom-content">
|
||||
<footer class="mw-footer citizen-footer" {{{html-user-language-attributes}}}>
|
||||
<div class="citizen-footer__container">
|
||||
<section class="citizen-footer__content">
|
||||
<div class="citizen-footer__siteinfo">
|
||||
<div id="footer-sitetitle" class="mw-wiki-title">{{>Wordmark}}</div>
|
||||
<p id="footer-desc">{{{msg-citizen-footer-desc}}}</p>
|
||||
</div>
|
||||
{{#data-citizen-places}}{{>Footer__row}}{{/data-citizen-places}}
|
||||
</section>
|
||||
<section class="citizen-footer__bottom">
|
||||
<div id="footer-tagline">{{{msg-citizen-footer-tagline}}}</div>
|
||||
{{#data-citizen-icons}}{{>Footer__row}}{{/data-citizen-icons}}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
@ -1,24 +1,15 @@
|
|||
{{!
|
||||
string link-mainpage link to the main page
|
||||
string msg-citizen-drawer-toggle The label used by the drawer button.
|
||||
string html-citizen-jumptotop Jump to top title text
|
||||
string msg-citizen-drawer-toggle The label used by the drawer button
|
||||
}}
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -11,16 +11,16 @@
|
|||
}}
|
||||
|
||||
{{#data-header}}{{>Header}}{{/data-header}}
|
||||
<div id="siteNotice">{{{html-site-notice}}}</div>
|
||||
<main class="mw-body {{#toc-enabled}}citizen-toc-enabled{{/toc-enabled}}" id="content">
|
||||
<div id="siteNotice">{{{html-site-notice}}}</div>
|
||||
{{>ContentHeader}}
|
||||
<div id="bodyContent" class="citizen-body">
|
||||
<div id="contentSub"{{{html-user-language-attributes}}}>{{{html-subtitle}}}</div>
|
||||
{{#html-undelete-link}}<div id="contentSub2">{{{html-undelete-link}}}</div>{{/html-undelete-link}}
|
||||
{{{html-user-message}}}
|
||||
{{{html-body-content--formatted}}}
|
||||
{{{html-categories}}}
|
||||
</div>
|
||||
{{>ContentFooter}}
|
||||
</main>
|
||||
{{{html-after-content}}}
|
||||
{{#data-citizen-footer}}{{>Footer}}{{/data-citizen-footer}}
|
||||
|
|
|
|||
Loading…
Reference in a new issue