Module:Navbox timeline/styles.css: Difference between revisions
AZMindroma (talk | contribs) No edit summary |
AZMindroma (talk | contribs) Horizontal scrolling |
||
| Line 2: | Line 2: | ||
width: 100%; | width: 100%; | ||
border-collapse: collapse; | border-collapse: collapse; | ||
table-layout: fixed | table-layout: auto; /* Changed from fixed */ | ||
} | } | ||
.timeline-wrapper-cell { | .timeline-wrapper-cell { | ||
padding: 0; | padding: 0; | ||
overflow: auto; | overflow-x: auto; /* Enable horizontal scrolling */ | ||
overflow-y: visible; | |||
max-width: 100vw; /* Prevent viewport overflow */ | |||
} | } | ||
.timeline-table { | .timeline-table { | ||
width: 100%; | min-width: 100%; /* Allow table to be wider than container */ | ||
border-collapse: collapse; | border-collapse: collapse; | ||
text-align: center; | text-align: center; | ||
white-space: nowrap; /* Prevent text wrapping */ | |||
} | } | ||
| Line 35: | Line 38: | ||
color: inherit; | color: inherit; | ||
font-weight: normal; | font-weight: normal; | ||
min-width: 50px; | |||
} | |||
.timeline-decade { | |||
min-width: 80px; | |||
font-weight: bold; | |||
background-color: #E8E8E8; | |||
} | } | ||
| Line 42: | Line 52: | ||
color: inherit; | color: inherit; | ||
font-weight: normal; | font-weight: normal; | ||
font-size: 0. | font-size: 0.75em; | ||
padding: 0 0. | padding: 0.1em 0.2em; | ||
border-left: 1px solid #E0E0E0; | border-left: 1px solid #E0E0E0; | ||
min-width: 30px; | |||
} | } | ||
| Line 70: | Line 81: | ||
position: relative; | position: relative; | ||
vertical-align: middle; | vertical-align: middle; | ||
font-size: 0.9em; | |||
min-width: 40px; | |||
word-wrap: break-word; | |||
overflow-wrap: break-word; | |||
hyphens: auto; | |||
} | } | ||
| Line 82: | Line 98: | ||
background-color: #B0B0B0; | background-color: #B0B0B0; | ||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
| Line 137: | Line 117: | ||
.timeline-year[colspan] { | .timeline-year[colspan] { | ||
border-bottom: 2px solid #C0C0C0; | border-bottom: 2px solid #C0C0C0; | ||
} | |||
/* Responsive adjustments */ | |||
@media (max-width: 768px) { | |||
.timeline-month { | |||
font-size: 0.7em; | |||
padding: 0 0.05em; | |||
min-width: 25px; | |||
} | |||
.timeline-decade, | |||
.timeline-year, | |||
.timeline-item { | |||
padding: 0.1em 0.15em; | |||
font-size: 0.9em; | |||
} | |||
.timeline-year { | |||
min-width: 40px; | |||
} | |||
.timeline-decade { | |||
min-width: 60px; | |||
} | |||
.timeline-wrapper-cell { | |||
max-width: calc(100vw - 20px); | |||
} | |||
} | } | ||