Template:GameContent/NavTables.css - Revision history

Lightning266 at 06:36, 13 October 2025

2025-10-13T06:36:32Z

← Older revision		Revision as of 06:36, 13 October 2025
Line 1:		Line 1:

	~~/* Main container for all sections */~~
	.content-container {		.content-container {
	display: flex;		display: flex;
	flex-wrap: wrap;		flex-wrap: wrap;
	gap: 10px;		gap: 10px;
			padding: 10px;
	border: 1px solid #ccc;		border: 1px solid #ccc;
	border-radius: 10px;		border-radius: 10px;
	~~margin: 0;~~
	background-color: #f9f9f9;		background-color: #f9f9f9;
	~~padding: 10px;~~
	}		}

	~~/* Each section/box */~~
	.content-box {		.content-box {
	flex: 1 1 22%;		flex: 1 1 22%;
Line 20:		Line 16:
	border-radius: 10px;		border-radius: 10px;
	background-color: #f9f9f9;		background-color: #f9f9f9;
			box-sizing: border-box;
			}

			/* Make tables responsive inside boxes */
			.table-wrapper {
			overflow-x: auto;
	}		}

	~~/* Tables inside each box */~~		.table {
	.~~content-box~~ table {		width: 100%;
	border-spacing: 0;		border-spacing: 0;
	~~width: 100%;~~
	}		}

	~~/* Table headers and cells */~~		.table th,
	.~~content-box~~ th,		.table td {
	.~~content-box~~ td {
	padding: 5px;		padding: 5px;
	border-bottom: 1px solid #ccc;		border-bottom: 1px solid #ccc;
	}

	~~.content-box th {~~
	text-align: left;		text-align: left;
	}		}

	.~~content-box td:last-child {~~		.table th img,
	~~text-align: right;~~		.table td img {
	}

	~~/* Icons in headers and cells */~~
	~~.content-box~~ th img,
	.~~content-box~~ td img {
	width: 25px;		width: 25px;
	}		}

	~~/* Larger padding for special links/images */~~		/* Mobile: stack boxes vertically */
	~~.content-box .large-padding {~~
	~~padding: 10px;~~
	}

	/* Mobile ~~layout~~: stack ~~sections~~ vertically */
	@media screen and (max-width: 768px) {		@media screen and (max-width: 768px) {
	.content-container {		.content-container {
	flex-direction: column;		flex-direction: column;
	}		}

	.content-box {		.content-box {
	flex: 1 1 100%;		flex: 1 1 100%;

Lightning266: New

2025-10-13T06:20:12Z

New

← Older revision		Revision as of 06:20, 13 October 2025
Line 1:		Line 1:

	~~__CONTENTMODEL__ Sanitized CSS~~		/* Main container for all sections */
	/* Main container */		.content-container {
	.container {
	display: flex;		display: flex;
	flex-wrap: wrap;		flex-wrap: wrap;
Line 8:		Line 7:
	border: 1px solid #ccc;		border: 1px solid #ccc;
	border-radius: 10px;		border-radius: 10px;
	margin: ~~0px~~;		margin: 0;
	background-color: #f9f9f9;		background-color: #f9f9f9;
	padding: 10px;		padding: 10px;
	}		}

	/* Each ~~table container~~ */		/* Each section/box */
	.~~table~~-~~container~~ {		.content-box {
	flex: 1 1 22%;		flex: 1 1 22%;
			min-width: 200px;
	padding: 5px;		padding: 5px;
	~~min-width: 200px;~~
	border: 1px solid #ccc;		border: 1px solid #ccc;
	border-radius: 10px;		border-radius: 10px;
Line 23:		Line 22:
	}		}

	/* ~~Table styling~~ */		/* Tables inside each box */
	.table {		.content-box table {
	border-spacing: 0;		border-spacing: 0;
	width: 100%;		width: 100%;
	}		}

	/* Table ~~header~~ */		/* Table headers and cells */
	.~~table~~ th {		.content-box th,
	~~border~~-~~bottom: 1px solid;~~		.content-box td {
	~~text-align: left;~~
	padding: 5px;		padding: 5px;
			border-bottom: 1px solid #ccc;
	}		}

	~~/* Table cell */~~		.content-box th {
	.~~table td~~ {		text-align: left;
	~~padding~~: ~~5px~~;
	}		}

	~~/* Table header icons */~~		.content-box td:last-child {
	.~~table th img~~ {		text-align: right;
	~~width~~: ~~25px~~;
	}		}

	/* ~~Specific padding adjustments for elements~~ */		/* Icons in headers and cells */
	.~~table~~ .~~table~~-~~header~~ img {		.content-box th img,
			.content-box td img {
	width: 25px;		width: 25px;
	}		}

	~~.table .item-icon img {~~		/* Larger padding for special links/images */
	~~width: 25px;~~		.content-box .large-padding {
	}

	/* Larger padding for ~~specific~~ links or images */
	.~~table~~ .large-padding {
	padding: 10px;		padding: 10px;
	}		}

	~~/* Desktop/tablet default */~~		/* Mobile layout: stack sections vertically */
	~~.navtables-container {~~
	~~display: flex;~~
	~~flex-wrap: wrap;~~
	~~gap: 10px;~~
	~~border: 1px solid #ccc;~~
	~~border-radius: 10px;~~
	~~background-color: #f9f9f9;~~
	~~padding: 10px;~~
	}

	~~/* Each box */~~
	~~.navtables-section {~~
	~~flex: 1 1 22%;~~
	~~min-width: 200px;~~
	~~padding: 5px;~~
	~~border: 1px solid #ccc;~~
	~~border-radius: 10px;~~
	~~background-color: #f9f9f9;~~
	}

	/* Mobile layout */
	@media screen and (max-width: 768px) {		@media screen and (max-width: 768px) {
	.~~navtables~~-container {		.content-container {
	flex-direction: column;		flex-direction: column;
	}		}
			.content-box {
	.~~navtables~~-~~section~~ {		flex: 1 1 100%;
	flex: 1 1 100%;		width: 100%;
	width: 100%;		}
	}
	}		}

Lightning266: Test

2025-10-13T06:15:05Z

Test

New page

__CONTENTMODEL__ Sanitized CSS
/* Main container */
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
border: 1px solid #ccc;
border-radius: 10px;
margin: 0px;
background-color: #f9f9f9;
padding: 10px;
}

/* Each table container */
.table-container {
flex: 1 1 22%;
padding: 5px;
min-width: 200px;
border: 1px solid #ccc;
border-radius: 10px;
background-color: #f9f9f9;
}

/* Table styling */
.table {
border-spacing: 0;
width: 100%;
}

/* Table header */
.table th {
border-bottom: 1px solid;
text-align: left;
padding: 5px;
}

/* Table cell */
.table td {
padding: 5px;
}

/* Table header icons */
.table th img {
width: 25px;
}

/* Specific padding adjustments for elements */
.table .table-header img {
width: 25px;
}

.table .item-icon img {
width: 25px;
}

/* Larger padding for specific links or images */
.table .large-padding {
padding: 10px;
}

/* Desktop/tablet default */
.navtables-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
border: 1px solid #ccc;
border-radius: 10px;
background-color: #f9f9f9;
padding: 10px;
}

/* Each box */
.navtables-section {
flex: 1 1 22%;
min-width: 200px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 10px;
background-color: #f9f9f9;
}

/* Mobile layout */
@media screen and (max-width: 768px) {
.navtables-container {
flex-direction: column;
}

.navtables-section {
flex: 1 1 100%;
width: 100%;
}
}