Template:Gallery/styles.css: Difference between revisions

Template page
(Created page with ".template-gallery { margin-top: var( --space-md ); display: flex; overflow: auto; gap: var( --space-xs ); } .template-gallery a.mw-file-description { display: block; border-radius: var( --border-radius--small ); overflow: hidden; } .template-gallery a.mw-file-description img { transition: transform 250ms ease; } .template-gallery a.mw-file-description:hover img { transform: scale(1.1); } .template-gallery video { max-width: none !important; max...")
 
No edit summary
 
Line 1: Line 1:
.template-gallery {
@media all and (max-width: 720px) {
margin-top: var( --space-md );
.mod-gallery {
display: flex;
width: 100% !important;
overflow: auto;
}
gap: var( --space-xs );
}
}
 
.mod-gallery {
.template-gallery a.mw-file-description {
display: table;
display: block;
    border-radius: var( --border-radius--small );
    overflow: hidden;
}
}
 
.mod-gallery-default {
.template-gallery a.mw-file-description img {
background: transparent;
    transition: transform 250ms ease;
margin-top: 4px;
}
}
 
.mod-gallery-center {
.template-gallery a.mw-file-description:hover img {
margin-left: auto;
    transform: scale(1.1);
margin-right: auto;
}
}
 
.mod-gallery-left {
.template-gallery video {
float: left;
max-width: none !important;
}
max-height: 120px !important;
.mod-gallery-right {
    width: auto !important;
float: right;
    overflow: hidden;
}
    border-radius: var( --border-radius--small );
.mod-gallery-none {
float: none;
}
.mod-gallery-collapsible {
width: 100%;
}
.mod-gallery .title,
.mod-gallery .main,
.mod-gallery .footer {
display: table-row;
}
.mod-gallery .title > div {
display: table-cell;
padding-bottom: 2px;
text-align: center;
font-weight: bold;
}
.mod-gallery .main > div {
display: table-cell;
}
.mod-gallery .gallerytext>:not(p) {
margin:.5em 0;
}
.mod-gallery .gallerytext>:not(p)+:not(p) {
margin-top:-.5em;
}
.mod-gallery .gallerytext {
line-height: 1.375em;
}
.mod-gallery .footer > div {
display: table-cell;
padding-bottom: 0.5em;
text-align: right;
font-size: 80%;
line-height: 1em;
}
.mod-gallery .title > div *,
.mod-gallery .footer > div * {
overflow: visible;
}
.mod-gallery .gallerybox img {
background: none !important;
}
.mod-gallery .bordered-images .thumb img {
outline: solid #eaecf0 1px;
}
.mod-gallery .whitebg .thumb {
background: #fff !important;
}
}

Latest revision as of 10:18, 14 October 2023

@media all and (max-width: 720px) {
	.mod-gallery {
		width: 100% !important;
	}
}
.mod-gallery {
	display: table;
}
.mod-gallery-default {
	background: transparent;
	margin-top: 4px;
}
.mod-gallery-center {
	margin-left: auto;
	margin-right: auto;
}
.mod-gallery-left {
	float: left;
}
.mod-gallery-right {
	float: right;
}
.mod-gallery-none {
	float: none;
}
.mod-gallery-collapsible {
	width: 100%;
}
.mod-gallery .title,
.mod-gallery .main,
.mod-gallery .footer {
	display: table-row;
}
.mod-gallery .title > div {
	display: table-cell;
	padding-bottom: 2px;
	text-align: center;
	font-weight: bold;
}
.mod-gallery .main > div {
	display: table-cell;
}
.mod-gallery .gallerytext>:not(p) {
	margin:.5em 0;
}
.mod-gallery .gallerytext>:not(p)+:not(p) {
	margin-top:-.5em;
}
.mod-gallery .gallerytext {
	line-height: 1.375em;
}
.mod-gallery .footer > div {
	display: table-cell;
	padding-bottom: 0.5em;
	text-align: right;
	font-size: 80%;
	line-height: 1em;
}
.mod-gallery .title > div *,
.mod-gallery .footer > div * {
	overflow: visible;
}
.mod-gallery .gallerybox img {
	background: none !important;
}
.mod-gallery .bordered-images .thumb img {
	outline: solid #eaecf0 1px;
}
.mod-gallery .whitebg .thumb {
	background: #fff !important;
}