Module:Navbox timeline/styles.css - Revision history

AZMindroma at 19:16, 15 October 2025

2025-10-15T19:16:00Z

@@ Line 114: / Line 114: @@
 	background-color: #B0B0B0;
 	cursor: pointer;
+}

AZMindroma at 17:55, 9 June 2025

2025-06-09T17:55:27Z

← Older revision		Revision as of 17:55, 9 June 2025
Line 2:		Line 2:
	width: 100%;		width: 100%;
	border-collapse: collapse;		border-collapse: collapse;
	table-layout: fixed; ~~/* Keep this fixed for the wrapper */~~		table-layout: fixed;
	max-width: 100%;		max-width: 100%;
	}		}
Line 8:		Line 8:
	.timeline-wrapper-cell {		.timeline-wrapper-cell {
	padding: 0;		padding: 0;
	overflow-x: auto; ~~/* Enable horizontal scrolling */~~		overflow-x: auto;
	overflow-y: visible;		overflow-y: visible;
	width: 100%;		width: 100%;
Line 16:		Line 16:

	.timeline-table {		.timeline-table {
	width: auto; ~~/* Let it expand naturally */~~		width: auto;
	min-width: 800px; ~~/* Set a reasonable minimum */~~		min-width: 800px;
	border-collapse: collapse;		border-collapse: collapse;
	text-align: center;		text-align: center;
Line 24:		Line 24:
	}		}

	~~/* Force the navbox to respect width constraints */~~
	.navbox.timeline-container {		.navbox.timeline-container {
	max-width: 100%;		max-width: 100%;
Line 37:		Line 36:
	max-width: 100%;		max-width: 100%;
	overflow-x: auto;		overflow-x: auto;
	display: block; ~~/* This is key - makes it behave like a div */~~		display: block;
	}		}

Line 69:		Line 68:
	}		}

			/* Ultra-compact month styling */
	.timeline-month {		.timeline-month {
	background-color: #F8F8F8;		background-color: #F8F8F8;
	color: inherit;		color: inherit;
	font-weight: normal;		font-weight: normal;
	font-size: 0.~~75em~~;		font-size: 0.7em; /* Smaller font */
	padding: 0.1em 0.~~2em~~;		padding: 0.1em 0.1em; /* Minimal padding */
	border-left: 1px solid #E0E0E0;		border-left: 1px solid #E0E0E0;
	min-width: ~~30px~~;		min-width: 18px; /* Very compact width */
			max-width: 20px; /* Prevent expansion */
			width: 18px; /* Fixed width */
			line-height: 1; /* Compact line height */
	}		}

Line 116:		Line 119:
	@media (max-width: 768px) {		@media (max-width: 768px) {
	.timeline-table {		.timeline-table {
	min-width: 600px; ~~/* Smaller minimum for mobile */~~		min-width: 600px;
	}		}

	.timeline-month {		.timeline-month {
	font-size: 0.~~7em~~;		font-size: 0.65em; /* Even smaller on mobile */
	padding: 0 0.05em;		padding: 0.05em 0.05em; /* Minimal padding */
	min-width: ~~25px~~;		min-width: 16px; /* Smaller minimum */
			max-width: 16px;
			width: 16px;
	}		}

Line 142:		Line 147:
	.timeline-label {		.timeline-label {
	min-width: 80px;		min-width: 80px;
			}
			}

			/* Additional compactness for months */
			@media (max-width: 480px) {
			.timeline-month {
			font-size: 0.6em;
			padding: 0.05em;
			min-width: 14px;
			max-width: 14px;
			width: 14px;
	}		}
	}		}

AZMindroma at 17:49, 9 June 2025

2025-06-09T17:49:58Z

← Older revision		Revision as of 17:49, 9 June 2025
Line 2:		Line 2:
	width: 100%;		width: 100%;
	border-collapse: collapse;		border-collapse: collapse;
	table-layout: ~~auto~~; /* ~~Changed from~~ fixed */		table-layout: fixed; /* Keep this fixed for the wrapper */
			max-width: 100%;
	}		}

Line 9:		Line 10:
	overflow-x: auto; /* Enable horizontal scrolling */		overflow-x: auto; /* Enable horizontal scrolling */
	overflow-y: visible;		overflow-y: visible;
	max-width: ~~100vw~~; ~~/* Prevent viewport overflow */~~		width: 100%;
			max-width: 100%;
			box-sizing: border-box;
	}		}

	.timeline-table {		.timeline-table {
	min-width: ~~100%~~; /* ~~Allow table to be wider than container~~ */		width: auto; /* Let it expand naturally */
			min-width: 800px; /* Set a reasonable minimum */
	border-collapse: collapse;		border-collapse: collapse;
	text-align: center;		text-align: center;
	white-space: nowrap; /* ~~Prevent text wrapping~~ */		white-space: nowrap;
			table-layout: auto;
			}

			/* Force the navbox to respect width constraints */
			.navbox.timeline-container {
			max-width: 100%;
			overflow: hidden;
			}

			.navbox .timeline-wrapper {
			max-width: 100%;
			}

			.navbox .timeline-wrapper-cell {
			max-width: 100%;
			overflow-x: auto;
			display: block; /* This is key - makes it behave like a div */
	}		}

Line 39:		Line 60:
	font-weight: normal;		font-weight: normal;
	min-width: 50px;		min-width: 50px;
			padding: 0.2em 0.25em;
	}		}

Line 47:		Line 69:
	}		}

	~~/* Month-specific styling */~~
	.timeline-month {		.timeline-month {
	background-color: #F8F8F8;		background-color: #F8F8F8;
Line 67:		Line 88:
	padding: 0 1em;		padding: 0 1em;
	vertical-align: middle;		vertical-align: middle;
			min-width: 100px;
	}		}

Line 72:		Line 94:
	background-color: #E0E0E0;		background-color: #E0E0E0;
	color: inherit;		color: inherit;
	~~position: relative;~~
	}		}

Line 79:		Line 100:
	color: inherit;		color: inherit;
	font-weight: bold;		font-weight: bold;
	~~position: relative;~~
	vertical-align: middle;		vertical-align: middle;
	font-size: 0.9em;		font-size: 0.9em;
	min-width: 40px;		min-width: 40px;
			padding: 0.2em 0.25em;
	word-wrap: break-word;		word-wrap: break-word;
	overflow-wrap: break-word;		overflow-wrap: break-word;
	~~hyphens: auto;~~
	}

	~~.timeline-decade,~~
	~~.timeline-year,~~
	~~.timeline-item {~~
	~~padding: 0.2em 0.25em;~~
	}		}

	~~/* Hover effects for better interactivity */~~
	.timeline-item:hover {		.timeline-item:hover {
	background-color: #B0B0B0;		background-color: #B0B0B0;
	cursor: pointer;		cursor: pointer;
	}

	~~/* Add subtle gradients for better visual appeal */~~
	~~.timeline-item {~~
	~~background: linear-gradient(to bottom, #C8C8C8, #B8B8B8);~~
	}

	~~.timeline-item:hover {~~
	~~background: linear-gradient(to bottom, #B8B8B8, #A8A8A8);~~
	}

	~~/* Improve borders for month view */~~
	~~.timeline-table .timeline-month + .timeline-month {~~
	~~border-left: 1px solid #D0D0D0;~~
	}

	~~/* Add visual separation between years when showing months */~~
	~~.timeline-year[colspan] {~~
	~~border-bottom: 2px solid #C0C0C0;~~
	}		}

	/* Responsive adjustments */		/* Responsive adjustments */
	@media (max-width: 768px) {		@media (max-width: 768px) {
			.timeline-table {
			min-width: 600px; /* Smaller minimum for mobile */
			}

	.timeline-month {		.timeline-month {
	font-size: 0.7em;		font-size: 0.7em;
Line 142:		Line 140:
	}		}

	.timeline-~~wrapper-cell~~ {		.timeline-label {
	~~max~~-width: ~~calc(100vw - 20px)~~;		min-width: 80px;
	}		}
	}		}

AZMindroma: Horizontal scrolling

2025-06-09T17:31:14Z

Horizontal scrolling

@@ Line 2: / Line 2: @@
 	width: 100%;
 	border-collapse: collapse;
-	table-layout: fixed;
+	table-layout: auto; /* Changed from fixed */
+}
 .timeline-wrapper-cell {
 	padding: 0;
-	overflow: auto;
+	overflow-x: auto; /* Enable horizontal scrolling */
+}
 .timeline-table {
-	width: 100%;
+	min-width: 100%; /* Allow table to be wider than container */
 	border-collapse: collapse;
 	text-align: center;
+}
@@ Line 35: / Line 38: @@
 	color: inherit;
 	font-weight: normal;
+}
@@ Line 42: / Line 52: @@
 	color: inherit;
 	font-weight: normal;
-	font-size: 0.85em;
+	font-size: 0.75em;
-	padding: 0 0.1em;
+	padding: 0.1em 0.2em;
 	border-left: 1px solid #E0E0E0;
+}
@@ Line 70: / Line 81: @@
 	position: relative;
 	vertical-align: middle;
+}
@@ Line 82: / Line 98: @@
 	background-color: #B0B0B0;
 	cursor: pointer;
+}
@@ Line 137: / Line 117: @@
 .timeline-year[colspan] {
 	border-bottom: 2px solid #C0C0C0;
+}

AZMindroma at 17:21, 9 June 2025

2025-06-09T17:21:46Z

@@ Line 33: / Line 33: @@
 .timeline-year {
 	background-color: #F0F0F0;
-	color:inherit;
+	color: inherit;
-    font-weight: normal;
+	font-weight: normal;
+}
@@ Line 41: / Line 55: @@
 	font-weight: normal;
 	padding: 0 1em;
+}
 .timeline-blank {
 	background-color: #E0E0E0;
-    color:inherit;
+	color: inherit;
+}
 .timeline-item {
 	background-color: #C0C0C0;
-    color:inherit;
+	color: inherit;
+}
@@ Line 56: / Line 75: @@
 .timeline-year,
 .timeline-item {
-	padding: 0 0.25em;
+	padding: 0.2em 0.25em;
+}

AZMindroma: From Wikipedia (https://en.wikipedia.org/wiki/Module:Navbox_timeline/styles.css)

2025-06-04T20:51:06Z

From Wikipedia (https://en.wikipedia.org/wiki/Module:Navbox_timeline/styles.css)

New page

.timeline-wrapper {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}

.timeline-wrapper-cell {
padding: 0;
overflow: auto;
}

.timeline-table {
width: 100%;
border-collapse: collapse;
text-align: center;
}

.timeline-row > * {
border-style: solid;
border-color: #FDFDFD;
border-width: 2px 2px 0 0;
}

.timeline-row:first-child > * {
border-top-width: 0;
}

.timeline-row > :last-child {
border-right-width: 0;
}

.timeline-decade,
.timeline-year {
background-color: #F0F0F0;
color:inherit;
font-weight: normal;
}

.timeline-label {
text-align: center;
font-weight: normal;
padding: 0 1em;
}

.timeline-blank {
background-color: #E0E0E0;
color:inherit;
}

.timeline-item {
background-color: #C0C0C0;
color:inherit;
}

.timeline-decade,
.timeline-year,
.timeline-item {
padding: 0 0.25em;
}