From 74fe70103679ef7b92e18390c4e147e73fc3a76f Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Fri, 5 Mar 2021 13:43:11 -0500
Subject: [PATCH] feat: rewrite core MW gallery styles

---
 .../skins.citizen.styles/common/common.less   |   2 +-
 .../common/rootvariables.less                 |   2 +
 resources/variables.less                      |   4 +-
 .../mediawiki.page.gallery.styles.less        | 121 +++++++++++-------
 4 files changed, 78 insertions(+), 51 deletions(-)

diff --git a/resources/skins.citizen.styles/common/common.less b/resources/skins.citizen.styles/common/common.less
index 1ec9fbca..3eee1266 100644
--- a/resources/skins.citizen.styles/common/common.less
+++ b/resources/skins.citizen.styles/common/common.less
@@ -202,7 +202,7 @@ a {
 figcaption,
 .thumbcaption {
 	margin: @content-margin-top / 2 0 0;
-	color: @base-30;
+	color: var( --color-base--subtle );
 }
 
 .thumb {
diff --git a/resources/skins.citizen.styles/common/rootvariables.less b/resources/skins.citizen.styles/common/rootvariables.less
index 0b81507e..3a91078c 100644
--- a/resources/skins.citizen.styles/common/rootvariables.less
+++ b/resources/skins.citizen.styles/common/rootvariables.less
@@ -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;
diff --git a/resources/variables.less b/resources/variables.less
index 65a504fc..ecf2b588 100644
--- a/resources/variables.less
+++ b/resources/variables.less
@@ -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;
diff --git a/skinStyles/mediawiki/mediawiki.page.gallery.styles.less b/skinStyles/mediawiki/mediawiki.page.gallery.styles.less
index 535c43ca..9066ce33 100644
--- a/skinStyles/mediawiki/mediawiki.page.gallery.styles.less
+++ b/skinStyles/mediawiki/mediawiki.page.gallery.styles.less
@@ -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;
+		}
 	}
 }