From cfc71c05dcd9b2dde988d75e901d8e2eea33879f Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Tue, 31 May 2022 19:37:09 -0400
Subject: [PATCH] feat(core): use default MW gallery styles

It seems that a lot of wiki admins prefer the default wiki gallery styles over
the Citizen defined one. Let's not change the gallery behavior too much in the
skin.

Closes: #413, #467
---
 .../mediawiki.page.gallery.styles.less        | 142 ++++--------------
 1 file changed, 27 insertions(+), 115 deletions(-)

diff --git a/skinStyles/mediawiki/mediawiki.page.gallery.styles.less b/skinStyles/mediawiki/mediawiki.page.gallery.styles.less
index 7f268585..011670cf 100644
--- a/skinStyles/mediawiki/mediawiki.page.gallery.styles.less
+++ b/skinStyles/mediawiki/mediawiki.page.gallery.styles.less
@@ -3,125 +3,37 @@
  * https://starcitizen.tools
 */
 
-@import '../../resources/variables.less';
-@import '../../resources/mixins.less';
+// Sync with caption styles
+div.gallerytext {
+	color: var( --color-base--subtle );
+	font-size: 0.8125rem;
+	font-style: italic;
 
-@gallery-clutter: 2px;
-
-.skin-citizen {
-	ul.gallery {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: center;
-		padding: 0;
-		margin: @content-margin-top -@gallery-clutter;
+	p {
+		margin: 0.4rem 0; // reset default style
 	}
+}
 
-	ul.mw-gallery {
-		&-packed,
-		&-packed-hover,
-		&-packed-overlay {
-			text-align: left;
+ul.mw-gallery-packed-hover li.gallerybox:hover div.gallerytextwrapper,
+ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper,
+ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapper {
+	background: var( --background-color-overlay );
+}
 
-			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: transparent;
-					transition: @transition-background;
-				}
-			}
-		}
-
-		&-packed-hover,
-		&-packed-overlay {
-			div.thumb {
-				/* Gallary text background */
-				&:after {
-					position: absolute;
-					right: 0;
-					bottom: 0;
-					left: 0;
-					display: block;
-					height: 60%;
-					border-radius: 0 0 var( --border-radius--small ) var( --border-radius--small );
-					content: '';
-				}
-			}
-
-			div.gallerytextwrapper {
-				border-radius: var( --border-radius--small );
-			}
-
-			div.gallerytext {
-				color: #a2a9b1; // color-base50
-			}
-		}
-
-		&-packed-hover li.gallerybox:hover,
-		&-packed-overlay li.gallerybox {
-			div.thumb:after {
-				background: linear-gradient( to top, #000, transparent );
-			}
-
-			div.gallerytextwrapper:hover {
-				/* Prevent overflow with long caption */
-				overflow: hidden;
-				max-height: 90%;
-				background: #000;
-			}
-		}
-
-		&-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: var( --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;
+/* Slideshow */
+ul.gallery.mw-gallery-slideshow {
+	.gallerybox {
+		&.slideshow-current {
+			background: var( --color-surface-2 );
 		}
 	}
 }
+
+@media screen {
+	li.gallerybox div.thumb {
+		overflow: hidden; // quick hack for rounded corner
+		border-color: transparent;
+		background-color: var( --color-surface-2 );
+		border-radius: var( --border-radius--small );
+	}
+}