MediaWiki:Common.css - Revision history

Dweller at 23:09, 31 May 2025

2025-05-31T23:09:27Z

← Older revision		Revision as of 18:09, 31 May 2025
Line 40:		Line 40:
	box-shadow: 0 0px 0px rgba(0, 0, 0, 0);		box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
	transition: box-shadow 0.25s ease-in-out, transform 0.2s ease-in-out, border-color 0.2s ease;		transition: box-shadow 0.25s ease-in-out, transform 0.2s ease-in-out, border-color 0.2s ease;
			}

			.tiny-card {
			height: 65px;
	}		}

	.short-card {		.short-card {
	height: ~~150px~~;		height: 200px;
	}		}

2025-05-31T15:20:10Z

2025-05-31T15:18:22Z

← Older revision		Revision as of 10:18, 31 May 2025
Line 31:		Line 31:
	.card {		.card {
	flex: 0 0 200px;		flex: 0 0 200px;
	height: 360px; ~~/* ✨ Set to match your visual target */~~		height: 360px;
	display: flex;		display: flex;
	flex-direction: column;		flex-direction: column;
Line 41:		Line 41:
	box-shadow: 0 0px 0px rgba(0, 0, 0, 0);		box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
	transition: box-shadow 0.25s ease-in-out, transform 0.2s ease-in-out, border-color 0.2s ease;		transition: box-shadow 0.25s ease-in-out, transform 0.2s ease-in-out, border-color 0.2s ease;
			}

			.short-card {
			height: 200px;
	}		}

2025-05-31T15:08:50Z

2025-05-30T22:37:35Z

← Older revision		Revision as of 17:37, 30 May 2025
Line 123:		Line 123:
	overflow-wrap: anywhere;		overflow-wrap: anywhere;
	flex-grow: 1;		flex-grow: 1;
	~~transition~~: ~~color 0.3s ease, opacity~~ 0.~~3s ease~~;		opacity: 0.8;
	opacity: 0.9;		transition: opacity 0.3s ease;
	}		}

2025-05-30T22:36:37Z

← Older revision		Revision as of 17:36, 30 May 2025
Line 40:		Line 40:
	overflow: hidden;		overflow: hidden;
	box-shadow: 0 0px 0px rgba(0, 0, 0, 0);		box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
	transition: box-shadow 0.25s ease-in-out, transform 0.2s ease-in-out, border-color 0.3s ease;		transition: box-shadow 0.25s ease-in-out, transform 0.2s ease-in-out, border-color 0.2s ease;
	}		}

Line 70:		Line 70:
	max-width: 100%;		max-width: 100%;
	object-fit: contain;		object-fit: contain;
	transition: transform 0.4s ease;		transition: transform 0.2s ease;
	}		}

2025-05-30T22:35:55Z

← Older revision		Revision as of 17:35, 30 May 2025
Line 40:		Line 40:
	overflow: hidden;		overflow: hidden;
	box-shadow: 0 0px 0px rgba(0, 0, 0, 0);		box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
	transition: box-shadow 0.25s ease-in-out, transform 0.2s ease-in-out;		transition: box-shadow 0.25s ease-in-out, transform 0.2s ease-in-out, border-color 0.3s ease;
	}		}

Line 46:		Line 46:
	transform: translateY(-3px);		transform: translateY(-3px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
			border-color: var(--card-link);
	}		}

Line 52:		Line 53:
	height: 160px;		height: 160px;
	overflow: hidden;		overflow: hidden;
			position: relative;
	display: flex;		display: flex;
	align-items: center;		align-items: center;
Line 68:		Line 70:
	max-width: 100%;		max-width: 100%;
	object-fit: contain;		object-fit: contain;
			transition: transform 0.4s ease;
			}

			.card:hover .image-wrapper img {
			transform: scale(1.05);
			}

			.image-wrapper::after {
			content: "";
			position: absolute;
			inset: 0;
			background-color: rgba(0, 0, 0, 0);
			transition: background-color 0.3s ease;
			pointer-events: none;
			}

			.card:hover .image-wrapper::after {
			background-color: rgba(0, 0, 0, 0.05);
	}		}

Line 102:		Line 122:
	white-space: normal;		white-space: normal;
	overflow-wrap: anywhere;		overflow-wrap: anywhere;
	flex-grow: 1; ~~/* ← this is key */~~		flex-grow: 1;
			transition: color 0.3s ease, opacity 0.3s ease;
			opacity: 0.9;
			}

			.card:hover .card-description {
			opacity: 1;
	}		}

2025-05-30T22:31:25Z

2025-05-30T22:25:52Z

← Older revision		Revision as of 17:25, 30 May 2025
Line 31:		Line 31:
	.card {		.card {
	flex: 0 0 200px;		flex: 0 0 200px;
	height: ~~auto~~; /* ~~ensure it sizes naturally~~ */		height: 360px; /* ✨ Set to match your visual target */
	display: flex;		display: flex;
	flex-direction: column;		flex-direction: column;
	background: var(--card-bg);		background: var(--card-bg);
	color: var(--card-text);		color: var(--card-text);
	border: 1px solid var(--border-color-base); ~~/* ← Outline here */~~		border: 1px solid var(--border-color-base);
	border-radius: 10px;		border-radius: 10px;
	overflow: hidden;		overflow: hidden;
Line 75:		Line 75:
	padding: 0.8rem;		padding: 0.8rem;
	gap: 0.5rem;		gap: 0.5rem;
			flex: 1; /* Take up remaining space below image */
	}		}

Line 86:		Line 87:
	word-wrap: break-word;		word-wrap: break-word;
	overflow: hidden;		overflow: hidden;
	max-height: calc(1.3em * 2); /* ~~Max~~ 2 lines */		max-height: calc(1.3em * 2); /* Clamp to 2 lines */
			flex-shrink: 0;
	}		}

Line 100:		Line 102:
	white-space: normal;		white-space: normal;
	overflow-wrap: anywhere;		overflow-wrap: anywhere;
			flex-grow: 1; /* ← this is key */
	}		}

	.card-readmore {		.card-readmore {
	text-align: right;		text-align: right;
	margin-top: 0; /* ← ~~remove~~ the ~~"push"~~ */		margin-top: auto; /* ← pins it to the bottom */
	~~padding~~-~~top~~: 0.~~25rem~~; ~~/* optional slight breathing room */~~		font-size: 0.85rem;
	}		}

2025-05-30T22:23:29Z

← Older revision		Revision as of 17:23, 30 May 2025
Line 75:		Line 75:
	padding: 0.8rem;		padding: 0.8rem;
	gap: 0.5rem;		gap: 0.5rem;
	~~height: 100%;~~
	}		}

Line 101:		Line 100:
	white-space: normal;		white-space: normal;
	overflow-wrap: anywhere;		overflow-wrap: anywhere;
	~~flex-shrink: 0;~~
	}		}

	.card-readmore {		.card-readmore {
	~~margin-top: auto;~~
	text-align: right;		text-align: right;
			margin-top: 0; /* ← remove the "push" */
			padding-top: 0.25rem; /* optional slight breathing room */
	}		}