mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-24 22:35:45 +00:00
feat: rewrite core MW gallery styles
This commit is contained in:
parent
8971eed653
commit
74fe701036
|
@ -202,7 +202,7 @@ a {
|
|||
figcaption,
|
||||
.thumbcaption {
|
||||
margin: @content-margin-top / 2 0 0;
|
||||
color: @base-30;
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
.thumb {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue