Template:Jam occurrence timeline/styles.css

/* The top portion that displays details about the selected/active item */
.tl-slider-container-mask {
    background-color: var(--background-color-base, #fff);
    color: var(--color-base, #202122);
}
@media screen {
	html.skin-theme-clientpref-night .tl-slider-container-mask {
        background-color: var(--background-color-base, #101418);
        color: var(--color-base, #fff);
    }
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .tl-slider-container-mask {
        background-color: var(--background-color-base, #101418);
        color: var(--color-base, #fff);
    }
}

.tl-text-content p {
    color: var(--color-base, #202122);
}
@media screen {
	html.skin-theme-clientpref-night .tl-text-content p {
        color: var(--color-base, #fff);
    }
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .tl-text-content p {
        color: var(--color-base, #fff);
    }
}

.tl-text-content p a {
    color: var(--color-progressive,#36c);
}

.tl-text-content p a:visited {
    color: var(--color-visited,#6a60b0)
}


/* ------------------------------------------------------------------------------------ */
/* The arrows on either side of the details/slider view, used to navigate between items */

.tl-slidenav-icon {
    color: var(--color-base, #202122);
}
@media screen {
	html.skin-theme-clientpref-night .tl-slidenav-icon {
        color: var(--color-base, #fff);
    }
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .tl-slidenav-icon {
        color: var(--color-base, #fff);
    }
}


/* ------------------------------------------------------------------------------------ */
/* The background of the main "timeline" part with all the items shown */

.tl-timenav {
    background-color: var(--background-color-neutral-subtle, #f8f9fa);
    border-top-color: var(--border-color-base, #a2a9b1);
}
@media screen {
	html.skin-theme-clientpref-night .tl-timenav {
        background-color: var(--background-color-neutral-subtle, #202122);
        border-top-color: var(--border-color-base, #fff);
    }
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .tl-timenav {
        background-color: var(--background-color-neutral-subtle, #202122);
        border-top-color: var(--border-color-base, #fff);
    }
}


/* ------------------------------------------------------------------------------------ */
/* The main bar shown for each timeline item */

.tl-timemarker .tl-timemarker-content-container {
    background-color: var(--background-color-neutral, #eaecf0);
    color: var(--color-base, #202122);
    border: 1px solid var(--border-color-muted, #dadde3);
}
@media screen {
	html.skin-theme-clientpref-night .tl-timemarker .tl-timemarker-content-container {
        background-color: var(--background-color-neutral, #27292d);
        color: var(--color-base, #eaecf0);
        border: 1px solid var(--border-color-muted, #404244);
    }
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .tl-timemarker .tl-timemarker-content-container {
        background-color: var(--background-color-neutral, #27292d);
        color: var(--color-base, #eaecf0);
        border: 1px solid var(--border-color-muted, #404244);
    }
}

.tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline {
    color: inherit;
}


/* ------------------------------------------------------------------------------------ */
/* Same as above (the main bar shown for a timeline item) except this is the for the "active"/selected item */

.tl-timemarker.tl-timemarker-active .tl-timemarker-content-container {
    background-color: var(--background-color-base, #fff);
    color: var(--color-base, #202122);
}
@media screen {
	html.skin-theme-clientpref-night .tl-timemarker.tl-timemarker-active .tl-timemarker-content-container {
        background-color: var(--background-color-base, #101418);
        color: var(--color-base, #eaecf0);
    }
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .tl-timemarker.tl-timemarker-active .tl-timemarker-content-container {
        background-color: var(--background-color-base, #101418);
        color: var(--color-base, #eaecf0);
    }
}

.tl-timemarker.tl-timemarker-active .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline {
    color: inherit;
}


/* ------------------------------------------------------------------------------------ */
/* The borders on either side of the shaded area underneath each timeline item */

.tl-timemarker .tl-timemarker-line-left, .tl-timemarker .tl-timemarker-line-right {
    border-left-color: var(--border-color-muted, #dadde3);
}

@media screen {
	html.skin-theme-clientpref-night .tl-timemarker .tl-timemarker-line-left, html.skin-theme-clientpref-night .tl-timemarker .tl-timemarker-line-right {
        border-left-color: var(--border-color-muted, #dadde3);
    }
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .tl-timemarker .tl-timemarker-line-left, html.skin-theme-clientpref-os .tl-timemarker .tl-timemarker-line-right {
        border-left-color: var(--border-color-muted, #dadde3);
    }
}




/* ------------------------------------------------------------------------------------ */
/* The strip at the bottom with month & year markers */

.tl-timeaxis-background {
    background-color: var(--background-color-base, #fff);
}
@media screen {
	html.skin-theme-clientpref-night .tl-timeaxis-background {
        background-color: var(--background-color-base, #101418);
    }
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .tl-timeaxis-background {
        background-color: var(--background-color-base, #101418);
    }
}

/* ------------------------------------------------------------------------------------ */
/* The small box at the bottom left that says "TimelineJS" */

@media screen {
	html.skin-theme-clientpref-night .tl-attribution {
        background-color: rgba(0, 0, 0, 0.85);
    }
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .tl-attribution {
        background-color: rgba(0, 0, 0, 0.85);
    }
}


/* ------------------------------------------------------------------------------------ */
/* The four navigation buttons at the left side */

@media screen {
	html.skin-theme-clientpref-night .tl-menubar-button {
        background-color: rgba(69, 69, 69, 0.9);
    }
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .tl-menubar-button {
        background-color: rgba(69, 69, 69, 0.9);
    }
}