Wuffesan at 20:23, 11 June 2025

2025-06-11T20:23:13Z

← Older revision		Revision as of 13:23, 11 June 2025
Line 34:		Line 34:
	display: block;		display: block;
	padding: 3px;		padding: 3px;
	background: #~~E900FF~~;		background: #431010;
	border-radius: 10px;		border-radius: 10px;
	width: ~~76px~~; ~~/* was 70px */~~		width: 70px;
	height: ~~85px~~; ~~/* was 78px */~~		height: 70px;
	}		}

Line 222:		Line 222:
	/* Mini Card */		/* Mini Card */
	.mini-card .card-body {		.mini-card .card-body {
	width: ~~48px~~;		width: 42px;
	height: ~~54px~~;		height: 42px;
	}		}

Wuffesan: Created page with " .card-container { display: -webkit-inline-flex; display: inline-flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; position: relative; vertical-align: top; text-align: center; gap: 2px; margin: 2px; } .card-wrapper { position: relative; } .card-link a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; font-size: 0; } .card-link .mw-selflink { display: none; } .card-body { displ..."

2025-06-11T20:19:55Z

Created page with " .card-container { display: -webkit-inline-flex; display: inline-flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; position: relative; vertical-align: top; text-align: center; gap: 2px; margin: 2px; } .card-wrapper { position: relative; } .card-link a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; font-size: 0; } .card-link .mw-selflink { display: none; } .card-body { displ..."

New page

.card-container {
display: -webkit-inline-flex;
display: inline-flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
position: relative;
vertical-align: top;
text-align: center;
gap: 2px;
margin: 2px;
}

.card-wrapper {
position: relative;
}

.card-link a {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-size: 0;
}

.card-link .mw-selflink {
display: none;
}

.card-body {
display: block;
padding: 3px;
background: #E900FF;
border-radius: 10px;
width: 76px; /* was 70px */
height: 85px; /* was 78px */
}

.card-image-container {
width: 70px;
height: 70px;
background: #000;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
padding: 0;
margin: 0;
}

.card-image-container img {
width: 100%; /* Force image to fill the container's width */
height: 100%; /* Force image to fill the container's height */
object-fit: none; /* No object-fit, image will stretch */
margin: 0;
padding: 0;
display: block;
}

.card-image-container figure {
position: relative; /* Removed absolute positioning */
top: 0;
bottom: 0;
margin: 0;
padding: 0;
}

/* Hide unknown images */
.card-image-container a.new {
display: -webkit-flex;
display: flex;
height: 67px !important;
width: 67px;
background-image: url(https://wiki.zombiepanicsource.com/images/4/4a/Item_Unknown.png);
background-size: cover;
background-position: center;
font-size: 0;
}

.card-label {
display: block;
background: #000;
color: #fff;
line-height: 1em;
font-size: 12px; /* was 13px */
font-weight: 500; /* was bold */
padding: 3px;
border-radius: 10px;
text-align: center;
margin-top: 3px;
width: 70px; /* was 55px */
box-sizing: border-box;
}
.card-label a {
color: #fff;
}

.card-caption {
width: 70px;
line-height: 1;
font-size: 12px;
hyphens: auto;
overflow-wrap: break-word;
}

/* Notice labels */
.card-notice-label {
z-index: 1;
color: #FCFC1E;
line-height: normal;
bottom: 2px;
right: 2px;
position: absolute;
font-size: 10px;
filter: drop-shadow(0 0 2px #000000);
pointer-events: none;
padding: 2px 5px 2px 5px;
text-shadow: 1px 1px black, -1px -1px black, -1px 1px black, 1px -1px black;
font-family: 'ZZZ Web Font';
font-style: italic;
}

.card-modifier {
pointer-events: none;
position: absolute;
top: 0;
transform: translateX(-26%) translateY(-30%);
}

.card-list-container {
/*display: -webkit-inline-flex;*/
/*display: inline-flex;*/
/*-webkit-flex-wrap: wrap;*/
/*flex-wrap: wrap;*/
text-align: left;
}
.card-list-container.card-vertical-list {
-webkit-flex-direction: column;
flex-direction: column;
}
.card-list-container.card-vertical-list > .card-container {
margin-bottom: 5px;
}

/* Card Icons - Agent Specific */
.card-icon-rank {
position: absolute;
top: 5px;
left: 5px;
line-height: 0; /* prevent contents from being vertically displaced by line height */
z-index: 1;
border-radius: 50%; /* Makes it a circle */
background-color: var(--theme-accent-label-color);
}

/* Move attribute icon to top right unless Mindscape Cinema value is present */
.card-body:not(.card-with-cinema) .card-icon-attribute {
left: unset;
right: 5px;
top: 5px;
}

.card-icon-attribute {
position: absolute;
top: 30px;
left: 5px;
line-height: 0; /* prevent contents from being vertically displaced by line height */
border-radius: 50%; /* Makes it a circle */
background-color: var(--theme-accent-label-color);
z-index: 1;
}

.card-icon-specialty {
position: absolute;
bottom: 15px;
left: 5px;
line-height: 0; /* prevent contents from being vertically displaced by line height */
z-index: 1;
border-radius: 50%; /* Makes it a circle */
background-color: var(--theme-accent-label-color);
}

/* Card Icons */
.card-icon {
position: absolute;
top: 5px;
left: 5px;
line-height: 0; /* prevent contents from being vertically displaced by line height */
z-index: 1;
border-radius: 50%; /* Makes it a circle */
background-color: var(--theme-accent-label-color);
}

.card-icon-right {
position: absolute;
top: 5px;
right: 5px;
line-height: 0; /* prevent contents from being vertically displaced by line height */
border-radius: 50%; /* Makes it a circle */
background-color: var(--theme-accent-label-color);
}

.card-icon-bottom-left {
position: absolute;
bottom: 17px;
left: 1px;
line-height: 0; /* prevent contents from being vertically displaced by line height */
}

.card-icon-bottom-right {
position: absolute;
bottom: 17px;
right: 1px;
line-height: 0; /* prevent contents from being vertically displaced by line height */
}

/* Mini Card */
.mini-card .card-body {
width: 48px;
height: 54px;
}

.mini-card .card-image-container {
width: 42px;
height: 42px;
}

.mini-card .card-body:not(.card-enemy) .card-image-container img {
width: 44px;
height: 44px;
}

.mini-card .card-label {
width: 48px;
font-size: 11px
}
.mini-card .card-caption {
width: 48px;
}

MediaWiki:Card.css - Revision history

Wuffesan at 20:23, 11 June 2025