Template:Vertical thumbnail/styles.css: Difference between revisions
Content deleted Content added
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:..." |
No edit summary |
||
| (2 intermediate revisions by the same user not shown) | |||
Line 1:
/*
.vertical-thumb {
vertical-align: top;
width:
padding: 0
background: transparent !important;
border: 0;
Line 15:
.vertical-thumb--align-right { text-align: right; }
/* The Square Image Container (Padding Hack) */
.vertical-thumb__imgwrap {
width: 100%;
height:
padding-bottom: 100%; /* This forces the height to match the width (1:1) */
position: relative; /* Necessary for the absolute image inside */
overflow: hidden;
margin-bottom: 8px;
background-color: #f8f9fa;
border-radius: 4px;
}
/* Ensure the image fills the square correctly */
.vertical-thumb__imgwrap img
.vertical-thumb__imgwrap .mw-file-element {
position: absolute;
top: 0;
left: 0;
display: block;
object-fit: cover; /* Keeps the aspect ratio of the photo itself */
▲ max-width: 100%;
▲ max-height: 100%;
}
/* Unified
.vertical-thumb__content {
font-size: 0.85em;
line-height: 1.
color: #202122;
word-wrap: break-word;
}
.vertical-thumb__content a {
font-weight: bold;
text-decoration: none;
color: #0645ad;
}
| |||