Template:Vertical thumbnail/styles.css - Revision history

Wikilah admin at 13:15, 4 January 2026

2026-01-04T13:15:52Z

← Older revision		Revision as of 21:15, 4 January 2026
Line 3:		Line 3:
	vertical-align: top;		vertical-align: top;
	width: 170px;		width: 170px;
	padding: 0 30px ~~30px~~ 0;		padding: 0 30px 20px 0;
	background: transparent !important;		background: transparent !important;
	border: 0;		border: 0;

Wikilah admin at 13:04, 4 January 2026

2026-01-04T13:04:41Z

← Older revision		Revision as of 21:04, 4 January 2026
Line 2:		Line 2:
	.vertical-thumb {		.vertical-thumb {
	vertical-align: top;		vertical-align: top;
	width: ~~150px~~;		width: 170px;
	padding: 0 ~~15px~~ ~~20px~~ 0;		padding: 0 30px 30px 0;
	background: transparent !important;		background: transparent !important;
	border: 0;		border: 0;

Wikilah admin at 12:58, 4 January 2026

2026-01-04T12:58:09Z

← Older revision		Revision as of 20:58, 4 January 2026
Line 1:		Line 1:
	/* ~~Base~~ ~~card~~ ~~style~~ */		/* Container for the entire card */
	.vertical-thumb {		.vertical-thumb {
	vertical-align: top;		vertical-align: top;
	width: 150px;		width: 150px;
	padding: 0 ~~20px~~ 20px 0;		padding: 0 15px 20px 0;
	background: transparent !important;		background: transparent !important;
	border: 0;		border: 0;
Line 15:		Line 15:
	.vertical-thumb--align-right { text-align: right; }		.vertical-thumb--align-right { text-align: right; }

			/* The Square Image Container (Padding Hack) */
	.vertical-thumb__imgwrap {		.vertical-thumb__imgwrap {
	width: 100%;		width: 100%;
	height: ~~130px~~;		height: 0;
			padding-bottom: 100%; /* This forces the height to match the width (1:1) */
	display: flex;
			position: relative; /* Necessary for the absolute image inside */
	align-items: center;
	justify-content: center; /* Centered image within the wrapper */
	overflow: hidden;		overflow: hidden;
	margin-bottom: 8px;		margin-bottom: 8px;
			background-color: #f8f9fa;
			border-radius: 4px;
	}		}

			/* Ensure the image fills the square correctly */
	.vertical-thumb__imgwrap img {		.vertical-thumb__imgwrap img,
			.vertical-thumb__imgwrap .mw-file-element {
			position: absolute;
			top: 0;
			left: 0;
		⚫	width: 100%;
		⚫	height: 100%;
	display: block;		display: block;
			object-fit: cover; /* Keeps the aspect ratio of the photo itself */
⚫	~~max-~~width: 100%;
⚫	~~max-~~height: 100%;
	width: auto;
	height: auto;
	}		}

	/* Unified ~~Text~~ Area */		/* Unified Content Area */
	.vertical-thumb__content {		.vertical-thumb__content {
	font-size: 0.85em;		font-size: 0.85em;
	line-height: 1.2;		line-height: 1.3;
	color: #202122;		color: #202122;
			word-wrap: break-word;
	}		}

	/* Styling the wikitext links within the content */
	.vertical-thumb__content a {		.vertical-thumb__content a {
	font-weight: bold;		font-weight: bold;
	text-decoration: none;		text-decoration: none;
	color: #0645ad; ~~/* Standard MediaWiki link color */~~		color: #0645ad;
	}		}

Wikilah admin: Created page with "/* Base card style / .vertical-thumb { vertical-align: top; width: 150px; padding: 0 20px 20px 0; background: transparent !important; border: 0; box-sizing: border-box; display: inline-block; } / Alignment Modifier Classes */ .vertical-thumb--align-center { text-align: center; } .vertical-thumb--align-left { text-align: left; } .vertical-thumb--align-right { text-align: right; } .vertical-thumb__imgwrap { width: 100%; height: 130px; display:..."

2026-01-04T12:45:53Z

Created page with "Base card style: .vertical-thumb { vertical-align: top; width: 150px; padding: 0 20px 20px 0; background: transparent !important; border: 0; box-sizing: border-box; display: inline-block; } Alignment Modifier Classes: .vertical-thumb--align-center { text-align: center; } .vertical-thumb--align-left { text-align: left; } .vertical-thumb--align-right { text-align: right; } .vertical-thumb__imgwrap { width: 100%; height: 130px; display:..."

New page

/* Base card style */
.vertical-thumb {
vertical-align: top;
width: 150px;
padding: 0 20px 20px 0;
background: transparent !important;
border: 0;
box-sizing: border-box;
display: inline-block;
}

/* Alignment Modifier Classes */
.vertical-thumb--align-center { text-align: center; }
.vertical-thumb--align-left { text-align: left; }
.vertical-thumb--align-right { text-align: right; }

.vertical-thumb__imgwrap {
width: 100%;
height: 130px;
display: flex;
align-items: center;
justify-content: center; /* Centered image within the wrapper */
overflow: hidden;
margin-bottom: 8px;
}

.vertical-thumb__imgwrap img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}

/* Unified Text Area */
.vertical-thumb__content {
font-size: 0.85em;
line-height: 1.2;
color: #202122;
}

/* Styling the wikitext links within the content */
.vertical-thumb__content a {
font-weight: bold;
text-decoration: none;
color: #0645ad; /* Standard MediaWiki link color */
}

.vertical-thumb__content a:hover {
text-decoration: underline;
}