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

feat: rewrite core MW gallery styles

Browse source
This commit is contained in:
alistair3149 2021-03-05 13:43:11 -05:00
parent 8971eed653
commit 74fe701036
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C
4 changed files with 78 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -202,7 +202,7 @@ a {
figcaption,
.thumbcaption {
margin: @content-margin-top / 2 0 0;
color: @base-30;
color: var( --color-base--subtle );
}
.thumb {

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

@ -22,6 +22,7 @@
--background-color-dp-24: @background-color-dp-24;
--background-color-overlay: @background-color-overlay;
--background-color-overlay--lighter: @background-color-overlay--lighter;
--background-color-framed: @background-color-framed;
--background-color-framed--hover: @background-color-framed--hover;
@ -103,6 +104,7 @@ html {
--background-color-dp-24: @dark-background-color-dp-24;
--background-color-overlay: @dark-background-color-overlay;
--background-color-overlay--lighter: @dark-background-color-overlay--lighter;
--background-color-framed: @dark-background-color-framed;
--background-color-framed--hover: @dark-background-color-framed--hover;

4
resources/variables.less
View file

@ -85,6 +85,7 @@
@background-color-dp-24: @color-base100;
@background-color-overlay: rgba( 255, 255, 255, 0.95 ); //base100 95% opacity
@background-color-overlay--lighter: rgba( 255, 255, 255, 0.8 );
@background-color-framed: @color-base90;
@background-color-framed--hover: @color-base100;
@ -176,7 +177,8 @@
@dark-background-color-dp-16: @dark-color-base80;
@dark-background-color-dp-24: @dark-color-base90;
@dark-background-color-overlay: rgba( 19, 26, 33, 0.95 ); //base0 95% opacity
@dark-background-color-overlay: rgba( 19, 26, 33, 0.95 ); //base0 95% opacity
@dark-background-color-overlay--lighter: rgba( 19, 26, 33, 0.8 ); //base0 95% opacity
@dark-background-color-framed: @dark-color-base10;
@dark-background-color-framed--hover: @dark-color-base30;

121
skinStyles/mediawiki/mediawiki.page.gallery.styles.less
View file

@ -6,59 +6,82 @@
@import '../../resources/variables.less';
@import '../../resources/mixins.less';
ul.gallery {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 0;
margin: @content-margin-top @negative-margin @content-margin-top * 2 !important;
}
@gallery-clutter: 2px;
li.gallerybox {
display: block;
margin: 2px;
}
li.gallerybox div.thumb {
margin: 0;
}
li.gallerybox,
li.gallerybox > div {
width: fit-content !important;
height: auto !important;
}
li.gallerybox,
li.gallerybox div,
li.gallerybox a.image,
li.gallerybox a.image img {
transition: @transition-width, @transition-height;
}
div.gallerytext {
display: none;
}
@media only screen and ( max-width: @screen2 ) {
.skin-citizen {
ul.gallery {
overflow: hidden; // Hack to avoid viewpoint move
margin: @content-margin-top 0 @content-margin-top * 2 !important;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 0;
margin: @content-margin-top -@gallery-clutter;
}
li.gallerybox,
li.gallerybox div,
li.gallerybox a.image,
li.gallerybox a.image img {
width: 100vw !important;
height: auto !important;
transition: none; // Performance tweaks
}
}
ul.mw-gallery {
&-packed,
&-packed-hover,
&-packed-overlay {
text-align: left;
@media only screen and ( max-width: @screen1 ) {
ul.gallery {
margin: @content-margin-top -@margin-side @content-margin-top * 2 !important;
div.thumb img {
width: 100% !important; // fill empty space
height: auto;
}
li.gallerybox {
flex-grow: 1;
margin: @gallery-clutter;
div.gallerytextwrapper {
right: 0;
width: auto !important; // fill empty space
margin: 0;
background: var( --background-color-overlay--lighter );
}
}
}
&-traditional,
&-nolines {
margin-right: -@gallery-clutter * 2;
margin-left: -@gallery-clutter * 2;
li.gallerybox {
margin: @gallery-clutter * 2;
}
}
}
li.gallerybox {
display: block;
> div {
width: 100% !important; // fill empty space
height: auto;
}
div.thumb {
overflow: hidden; // for border radius
width: 100% !important; // fill empty space
height: auto;
border-color: var( --border-color-base );
margin: 0;
background-color: var( --background-color-framed );
border-radius: @border-radius-small;
}
}
div.gallerytext {
padding: @content-margin-top / 2 0;
color: var( --color-base-subtle );
font-size: @content-caption-size;
p {
margin-top: 0;
}
a.image {
display: inline;
}
}
}