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

feat(core): ✨ add icon to back to top link

Browse source
This commit is contained in:
alistair3149 2022-10-19 15:55:28 -04:00
parent bc1dd38a12
commit 48173b6eb8
No known key found for this signature in database
3 changed files with 30 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
resources/skins.citizen.icons/backToTop.svg Normal file
View file

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="svg2" x="0" y="0" style="enable-background:new 0 0 20 20" version="1.1" viewBox="0 0 20 20">
<path id="path1" d="M1 3h18V1H1v2z"/>
<path id="path2" d="M5 11h4v8h2v-8h4l-5-6-5 6z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 294 B

25
resources/skins.citizen.styles/TableOfContents.less
View file

@ -8,6 +8,23 @@
gap: var( --space-sm ); gap: var( --space-sm );
} }
&__top {
&:before {
content: "";
width: 0.875rem;
height: 0.875rem;
opacity: var( --opacity-icon-base );
}
&:hover:before {
opacity: var( --opacity-icon-base--hover );
}
&:active:before {
opacity: var( --opacity-icon-base--hover );
}
}
&__header { &__header {
color: var( --color-base--subtle ); color: var( --color-base--subtle );
letter-spacing: 0.75px; letter-spacing: 0.75px;
@ -35,6 +52,7 @@
&__link { &__link {
display: flex; display: flex;
gap: var( --space-sm );
padding-top: var( --space-sm ); padding-top: var( --space-sm );
padding-bottom: var( --space-sm ); padding-bottom: var( --space-sm );
border-radius: var( --border-radius--small ); border-radius: var( --border-radius--small );
@ -61,7 +79,6 @@
width: 3px; width: 3px;
flex-shrink: 0; flex-shrink: 0;
border-radius: 1000px; border-radius: 1000px;
margin-right: var( --space-sm );
margin-left: -2px; margin-left: -2px;
} }
@ -91,6 +108,12 @@
} }
} }
.skin-citizen-dark {
.citizen-toc__top:before {
filter: invert( 1 );
}
}
@media ( min-width: @width-breakpoint-desktop ) { @media ( min-width: @width-breakpoint-desktop ) {
.citizen-toc { .citizen-toc {
grid-area: toc; grid-area: toc;

1
skin.json
View file

@ -276,6 +276,7 @@
"selector": "{name}", "selector": "{name}",
"defaultColor": "#000", "defaultColor": "#000",
"images": { "images": {
".citizen-toc__top:before": "resources/skins.citizen.icons/backToTop.svg",
".toctogglelabel:before": { ".toctogglelabel:before": {
"file": { "file": {
"ltr": "resources/skins.citizen.icons/toc-ltr.svg", "ltr": "resources/skins.citizen.icons/toc-ltr.svg",