_infobar.scss

@use "sass:math";

// The whole infobar is wrapped in a blockquote at the start of the sidebar
// All the !important in this file is to pverride the resets the comment face
// code puts on certain types of links; they're all there for a reason

$dropdown-shadow: 0 0 4px #AAA;
$dropdown-shadow-nightmode: 0 0 4px #000;

$infobar-height: 45px;
$infobar-padding-horizontal: $base-spacing;

$infobar-button-height: 30px;
$infobar-button-padding-horizontal: $base-spacing;
$infobar-button-border-radius: $base-border-radius;

$infobar-dropdown-border-width: $base-spacing-small;
$infobar-dropdown-border-color: $primary-color;
$infobar-dropdown-border-radius: $base-border-radius;

$info-entry-count: 5; // number of entries you have
$info-entry-period: 5s; // time for a single entry to be displayed
$info-entry-transition-period: 0.5s; // time for the transition between entries
$hover-delay: 150ms; // delay before dropdowns trigger

$infobar-padding-vertical: math.div($infobar-height - $infobar-button-height, 2);
$infobar-total-animation-period: ($info-entry-period + $info-entry-transition-period) * $info-entry-count;

// Make room for the infobar at the top of the page
body > .content {
	padding-top: $infobar-height;
}

// The infobar itself resides in a blockquote at the very top of the sidebar
.side .md > :first-child {
	position: absolute;
	top: $header-height;
	left: 0;
	right: $sidebar-width;
	height: $infobar-height;
	margin: 0;
	border: 0;
	padding: 0 0 0 $infobar-padding-horizontal;
	display: flex;
	align-items: center;
	font-size: 14px;

	// Dropdowns appear over the "Welcome to Reddit" banner and comment field
	// placeholder when logged out
	z-index: 3;

	// Dropdowns
	> p {
		margin: 0;
		padding: 0;
		height: $infobar-button-height;
		line-height: $infobar-button-height;
		position: relative;
		z-index: 1; // appear above the other things

		// Sub-headings
		strong {
			display: block;
			line-height: 25px;
			padding: 0 10px;
			border-bottom: 1px solid #EEE;
		}

		// All links in dropdowns
		a {
			display: block !important;
			width: auto !important;
			height: auto !important;
			padding: 0 $infobar-button-padding-horizontal;
			white-space: nowrap;
			transition: 0s;
		}

		// Top-level links get styles on hover
		&:hover > a {
			background: #6a9de6 !important;
			color: #FFF !important;
			border-radius: $infobar-button-border-radius;
			position: relative !important;
			z-index: 2;
			@include nightmode {
				background: $primary-color-nightmode !important;
			}
		}

		// Top-level dropdowns get little indicators
		> a:not(:only-child)::after {
			display: inline-block;
			content: "";
			width: 5px;
			height: 5px;
			margin-left: 7px;
			border-right: 2px solid currentcolor;
			border-bottom: 2px solid currentcolor;
			transform: rotate(45deg) translate(-2px, -2px);
		}

		// The dropdown content
		em {
			position: absolute;
			top: $infobar-button-height - $infobar-dropdown-border-width; // TODO
			background: #FFF;
			white-space: nowrap;
			display: block;
			font-style: normal;
			border-radius: 0 0 $infobar-dropdown-border-radius $infobar-dropdown-border-radius;
			transition: visibility 0s;
			visibility: hidden;
		}

		&:hover em {
			transition-delay: $hover-delay;
			visibility: visible;
			border-top: $infobar-dropdown-border-width solid $infobar-dropdown-border-color;
			box-shadow: $dropdown-shadow;
			@include nightmode {
				border-color: $primary-color-nightmode;
			}
		}
	}

	// Scrolling announcements banner, which is a nested blockquote
	blockquote {
		order: 1;
		flex: 0 1 100%;
		align-self: stretch;
		margin: 0 0 0 $infobar-padding-horizontal;
		padding: 0 $infobar-padding-horizontal;
		display: flex;
		flex-direction: column;
		border-left: 1px solid #EEE;
		position: relative;
		overflow: hidden;
		height: $infobar-height;
		transition: 0s;

		@include nightmode {
			border-color: #0f0f0f;
		}

		&:hover {
			transition-delay: $hover-delay;
			height: $infobar-height * $info-entry-count;
			background: #FFF;
			border-color: #DDD;
			border-bottom: 1px solid #DDD;
			border-bottom-left-radius: 5px;
			box-shadow: $dropdown-shadow;
		}

		// Entries may or may not be inside links, so we duplicate some styles
		p {
			flex: 0 0 $infobar-height;
			margin: 0;
			line-height: 1.3;
			animation: reorder $infobar-total-animation-period infinite;

			// Allow custom labels to be positioned relative to the individual
			// link rather than the page
			position: relative;
		}

		p,
		p > a {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			align-self: stretch;
		}

		&:hover p {
			// Border between items
			box-shadow: 0 1px #EEE;

			// Animation freezing
			animation-play-state: paused;
			margin-top: 0 !important;

			@include nightmode {
				box-shadow: 0 1px #000;
			}
		}

		// For small text on the second line of the announcement
		em {
			font-size: smaller;
			opacity: 0.8;
			color: #000;

			@include nightmode {
				color: #FFF;
			}
		}

		// Each thing has its own delay offset
		@for $i from 2 through $info-entry-count {
			p:nth-child(#{$i}) {
				animation-delay: ($info-entry-period + $info-entry-transition-period) * ($i - 1);
			}
		}

		// LIVE label for AMA announcements
		[href$="#live"] {
			padding-left: 45px;

			&::after {
				content: "LIVE";
				padding: 2px 0;
				border: 1px solid currentcolor;
				color: #ce223e;
				border-radius: 5px;
				position:absolute;
				left: 0;
				font-size: x-small;
				width: 30px;
				text-align: center;
			}
		}
	}

	// Misc nightmode styles
	@include nightmode {
		> p:hover em,
		blockquote:hover {
			background: #2f2f2f;
			box-shadow: $dropdown-shadow-nightmode;
		}
	}
}

// Small screen styles
@media (max-width: 1300px) {
	body > .content {
		// The infobar sections are stacked on top of each other with a 1px border between them,
		// the content needs to make room
		padding-top: 2 * $infobar-height + 1px;
	}

	.side .md > :first-child {
		flex-wrap: wrap;
		
		// Wrapped flex containers can't use flexbox to vertically align within a wrapped row, so
		// we add padding to the top of the container and margin to the element in the second row
		padding-top: $infobar-padding-vertical;
		
		blockquote {
			flex: 1 1 100%;
			margin-top: $infobar-padding-vertical;
			margin-left: -$infobar-padding-horizontal; // alignment with other text
			padding: 0 $infobar-padding-horizontal + $infobar-button-padding-horizontal;
			border-left: 0;
			border-top: 1px solid #EEE;
			text-align: center;
		}
	}
}

// Each item sets a negative offset on itself to scroll to the next item, then
// moves itself to the end of the list and slowly moves back up to the top.
@keyframes reorder {
	$fraction-per-entry: math.div(100%, $info-entry-count);
	$entry-visible-transition-ratio: math.div($info-entry-period, $info-entry-period + $info-entry-transition-period);

	0%,
	#{$entry-visible-transition-ratio * $fraction-per-entry} {
		margin-top: 0;
		order: 0;
	}

	@for $i from 1 through $info-entry-count {
		@if $i == 1 {
			#{$fraction-per-entry - 0.001%} {
				margin-top: -$infobar-height;
				order: 0;
			}
		} @else {
			#{$fraction-per-entry * ($i - 1)},
			#{$fraction-per-entry * $i - 0.001%} {
				order: $info-entry-count - $i + 1;
				@if $i == 2 {
					margin-top: 0;
				}
			}
		}
	}

	to {
		order: 0;
		margin-top: 0;
	}
}