MediaWiki:Common.css - Revision history

IT at 18:20, 3 April 2024

2024-04-03T18:20:08Z

← Older revision		Revision as of 18:20, 3 April 2024
Line 97:		Line 97:
	.card-description-text {		.card-description-text {
	left: 14%; /* Centering the box horizontally, adjust as necessary */		left: 14%; /* Centering the box horizontally, adjust as necessary */
	top: 56%;		top: 53%;
	width: 70%;		width: 70%;
			font-size: 0.98em;
	}		}

IT at 18:18, 3 April 2024

2024-04-03T18:18:39Z

← Older revision		Revision as of 18:18, 3 April 2024
Line 85:		Line 85:
	left: 11%;		left: 11%;
	width: 75%;		width: 75%;
	min-height: ~~30px~~;		min-height: 35px;
	color: white;		color: white;
	text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);		text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);

IT at 18:17, 3 April 2024

2024-04-03T18:17:38Z

← Older revision		Revision as of 18:17, 3 April 2024
Line 85:		Line 85:
	left: 11%;		left: 11%;
	width: 75%;		width: 75%;
			min-height: 30px;
	color: white;		color: white;
	text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);		text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);

IT at 18:16, 3 April 2024

2024-04-03T18:16:42Z

← Older revision		Revision as of 18:16, 3 April 2024
Line 82:		Line 82:

	.card-name-text {		.card-name-text {
	top: 40.5%; /* Adjust these values based on your layout */		top: 39.5%; /* Adjust these values based on your layout */
	left: 11%;		left: 11%;
	width: 75%;		width: 75%;
Line 88:		Line 88:
	text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);		text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
	font-size: 1.25em;		font-size: 1.25em;
			line-height: 1.2;
			display: flex;
			align-items: center;
			justify-content: center;
	}		}

IT at 16:00, 3 April 2024

2024-04-03T16:00:03Z

@@ Line 94: / Line 94: @@
 top: 56%;
 width: 70%;
+}

IT at 15:12, 3 April 2024

2024-04-03T15:12:39Z

← Older revision		Revision as of 15:12, 3 April 2024
Line 74:		Line 74:

	.card-cost-text {		.card-cost-text {
	top: 2~~.65~~%; /* Position from the top */		top: 2%; /* Position from the top */
	left: 6.5%; /* Position from the left */		left: 6.5%; /* Position from the left */
	color: white;		color: white;

IT at 15:05, 3 April 2024

2024-04-03T15:05:23Z

← Older revision		Revision as of 15:05, 3 April 2024
Line 82:		Line 82:

	.card-name-text {		.card-name-text {
	top: 42%; /* Adjust these values based on your layout */		top: 40.5%; /* Adjust these values based on your layout */
	left: 12%;		left: 11%;
	width: 75%;		width: 75%;
	color: white;		color: white;
	text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);		text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
			font-size: 1.25em;
	}		}

IT at 15:00, 3 April 2024

2024-04-03T15:00:20Z

← Older revision		Revision as of 15:00, 3 April 2024
Line 32:		Line 32:
	}		}

	.card-frame {		.card-frame img {
	z-index: 1; /* Ensures the frame is at the bottom */		z-index: 1; /* Ensures the frame is at the bottom */
	width: 95%; /* Adjust to fit the container or as needed */		width: 95%; /* Adjust to fit the container or as needed */
Line 40:		Line 40:
	}		}

	.card-main-art {		.card-main-art img {
	z-index: 2; /* Above the frame */		z-index: 2; /* Above the frame */
	width: 78%; /* Adjust based on your needs */		width: 78%; /* Adjust based on your needs */
Line 49:		Line 49:


	.card-banner {		.card-banner img {
	z-index: 3; /* Ensures the banner is at the top */		z-index: 3; /* Ensures the banner is at the top */
	width: 90%; /* Adjust based on your needs */		width: 90%; /* Adjust based on your needs */
Line 57:		Line 57:
	}		}

	.card-cost {		.card-cost img {
	z-index: 3; /* Ensures the banner is at the top */		z-index: 3; /* Ensures the banner is at the top */
	height: auto; /* Maintain aspect ratio */		height: auto; /* Maintain aspect ratio */

IT at 14:44, 3 April 2024

2024-04-03T14:44:39Z

← Older revision		Revision as of 14:44, 3 April 2024
Line 20:		Line 20:
	}		}

	.~~cards~~-container {		.card-container {
	~~display~~: ~~flex~~; /* ~~Use flexbox~~ to ~~layout cards horizontally~~ */		position: relative;
	~~flex-wrap~~: ~~wrap~~; /* ~~Allow cards~~ to ~~wrap to the next line~~ */		width: 300px; /* Adjust to match your desired container width */
			height: 450px; /* Adjust to match your desired container height */
	}		}

	.card {		.card-container img {
	position: ~~relative~~;		position: absolute;
	~~width~~: ~~300px~~; ~~/* Adjust width as needed */~~		top: 0;
	~~height~~: ~~400px~~; ~~/* Adjust height as needed */~~		left: 0;
	~~margin: 10px; /* Adjust margin between cards */~~
	}		}

	.card-frame {		.card-frame {
	width: ~~100~~%;		z-index: 1; /* Ensures the frame is at the bottom */
	height: ~~100~~%;		width: 95%; /* Adjust to fit the container or as needed */
	~~object~~-~~fit~~: ~~cover~~; /* ~~Ensure~~ the frame ~~fills the container~~ */		height: 95%; /* Adjust to fit the container or as needed */
			padding-left: 5%;
			padding-top: 5%;
			}

			.card-main-art {
			z-index: 2; /* Above the frame */
			width: 78%; /* Adjust based on your needs */
			padding-left: 13.5%;
			height: auto;
			transform: translateY(-4%);
	}		}

	.card-~~overlay~~ {
	~~position~~: ~~absolute~~;		.card-banner {
	~~top~~: 0;		z-index: 3; /* Ensures the banner is at the top */
	~~left~~: 0;		width: 90%; /* Adjust based on your needs */
	~~width~~: ~~100~~%;		height: auto; /* Maintain aspect ratio */
	~~height~~: ~~100~~%;		padding-top: 57%;
			padding-left: 7.4%;
	}		}

	.card-~~art~~ {		.card-cost {
	~~width~~: ~~100%~~;		z-index: 3; /* Ensures the banner is at the top */
	height: ~~100%~~;		height: auto; /* Maintain aspect ratio */
	~~background~~-~~size~~: ~~cover~~;		}

			.card-text-box {
			position: absolute;
			padding: 10px;
			border-radius: 5px;
			z-index: 4;
			font-family: Arial, Helvetica, sans-serif;
			font-weight: bold;
			text-align: center;
			/* Add more common styles here */
	}		}

	.card-text {		.card-cost-text {
	~~position~~: ~~absolute~~;		top: 2.65%; /* Position from the top */
	~~bottom: 0;~~		left: 6.5%; /* Position from the left */
	left: 0;		color: white;
	~~width: 100~~%;		text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
	~~padding~~: ~~10px~~;		font-size: 1.5em;
	~~background~~-~~color~~: rgba(~~255~~, ~~255~~, ~~255~~, 0.8); ~~/* Background color with transparency */~~
	}		}

	.card-text h2 {		.card-name-text {
	~~margin~~: 0;		top: 42%; /* Adjust these values based on your layout */
			left: 12%;
			width: 75%;
			color: white;
			text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);

	}		}

	.card-text p {		.card-description-text {
	~~margin~~: ~~5px 0~~;		left: 14%; /* Centering the box horizontally, adjust as necessary */
			top: 56%;
			width: 70%;
	}		}

IT at 20:54, 2 April 2024

2024-04-02T20:54:13Z

@@ Line 18: / Line 18: @@
      width: 100%;
+   }
+}