Module:Navbox timeline/styles.css: Difference between revisions
AZMindroma (talk | contribs) From Wikipedia (https://en.wikipedia.org/wiki/Module:Navbox_timeline/styles.css) |
AZMindroma (talk | contribs) No edit summary |
||
| Line 33: | Line 33: | ||
.timeline-year { | .timeline-year { | ||
background-color: #F0F0F0; | background-color: #F0F0F0; | ||
color:inherit; | color: inherit; | ||
font-weight: normal; | |||
} | |||
/* Month-specific styling */ | |||
.timeline-month { | |||
background-color: #F8F8F8; | |||
color: inherit; | |||
font-weight: normal; | |||
font-size: 0.85em; | |||
padding: 0 0.1em; | |||
border-left: 1px solid #E0E0E0; | |||
} | |||
.timeline-month:first-child { | |||
border-left: none; | |||
} | } | ||
| Line 41: | Line 55: | ||
font-weight: normal; | font-weight: normal; | ||
padding: 0 1em; | padding: 0 1em; | ||
vertical-align: middle; | |||
} | } | ||
.timeline-blank { | .timeline-blank { | ||
background-color: #E0E0E0; | background-color: #E0E0E0; | ||
color: inherit; | |||
position: relative; | |||
} | } | ||
.timeline-item { | .timeline-item { | ||
background-color: #C0C0C0; | background-color: #C0C0C0; | ||
color: inherit; | |||
font-weight: bold; | |||
position: relative; | |||
vertical-align: middle; | |||
} | } | ||
| Line 56: | Line 75: | ||
.timeline-year, | .timeline-year, | ||
.timeline-item { | .timeline-item { | ||
padding: 0 0.25em; | padding: 0.2em 0.25em; | ||
} | |||
/* Hover effects for better interactivity */ | |||
.timeline-item:hover { | |||
background-color: #B0B0B0; | |||
cursor: pointer; | |||
} | |||
/* Responsive adjustments */ | |||
@media (max-width: 768px) { | |||
.timeline-month { | |||
font-size: 0.7em; | |||
padding: 0 0.05em; | |||
} | |||
.timeline-decade, | |||
.timeline-year, | |||
.timeline-item { | |||
padding: 0.1em 0.15em; | |||
font-size: 0.9em; | |||
} | |||
} | |||
/* Better text wrapping for long timeline items */ | |||
.timeline-item { | |||
word-wrap: break-word; | |||
overflow-wrap: break-word; | |||
hyphens: auto; | |||
} | |||
/* Visual hierarchy improvements */ | |||
.timeline-decade { | |||
font-weight: bold; | |||
background-color: #E8E8E8; | |||
} | |||
.timeline-year { | |||
background-color: #F0F0F0; | |||
} | |||
.timeline-month { | |||
background-color: #F8F8F8; | |||
} | |||
/* 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; | |||
} | } | ||