Rolling Lounge Wiki

Module:Navbox timeline/styles.css: Difference between revisions

← Older editNewer edit →
Horizontal scrolling
No edit summary
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;
}
}
}
}
Retrieved from "https://wiki.rollinglounge.net/wiki/Module:Navbox_timeline/styles.css"