User:Irukaza/common.css

	ul.gallery {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
	}


			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-quick;
		}

			div.thumb {
				/* Gallary text background */
				&:after {
					position: absolute;
					right: 0;
					bottom: 0;
					left: 0;
					display: block;
					height: 60%;
					border-radius: 0 0 @border-radius-small @border-radius-small;
					content: '';
				}
			}

			div.gallerytextwrapper {
				border-radius: @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: @border-radius-small;
		}
	}