popup.css

/*
 * Explicit widths for popup contents
 */

.card,
.loading-indicator {
	width: 360px;
}

.stream-list {
	/*
	 * Must be assigned as a maximum width, and rely on intrinsic width of its
	 * inner content. Setting an explicit width would cause horizontal overflow
	 * in Firefox.
	 *
	 * See: https://bugzilla.mozilla.org/show_bug.cgi?id=1395025
	 */
	max-width: 360px;
}

/*
 * Toolbar
 */

.toolbar {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	border-bottom: 1px solid var(--sl-border-color);
}

.toolbar__search {
	flex-basis: 100%;
}

.toolbar__controls {
	position: relative;
	background: var(--sl-button-background-color);
	flex-shrink: 0;
	border-left: 1px solid var(--sl-border-color);
}

.toolbar__controls .icon-button {
	padding: 6px 4px;
}

.toolbar__controls .icon-button:active {
	background-color: var(--sl-button-background-color-active);
}

.toolbar__controls .icon-button:focus {
	background-color: var(--sl-button-background-color-focus);
}

.toolbar__controls .icon-button:first-child {
	padding-left: 8px;
}

.toolbar__controls .icon-button:last-child {
	padding-right: 8px;
}

.toolbar__search-input {
	display: block;
	width: 100%;
	padding: 7px 9px;
	border: none;
	border-radius: 0;
	font-size: 0.8rem;
	color: var(--sl-font-color);
}

.toolbar__search-input::placeholder {
	opacity: 0.7;
	color: var(--sl-font-color-faded);
}

.toolbar__search-input:focus {
	outline: none;
}

/*
 * Stream List
 */

.stream-list__list {
	list-style-type: none;
	margin: 0;
	padding-left: 0;
}

/*
 * Token Errors
 */

.token-errors.notice {
	margin: 0;
	border-width: 0;
	border-bottom-width: 1px;
}

/*
 * Stream
 */

.stream {
	display: flex;
	align-items: center;
	padding: 8px;
	color: currentColor;
	border-bottom: 1px solid var(--sl-border-color);
}

.stream-list__item:last-child .stream {
	border-bottom-width: 0;
}

.stream-list__item.is-hovered .stream {
	background-color: var(--sl-button-background-color-focus);
}

.stream:focus {
	outline: none;
}

.stream:active {
	background-color: var(--sl-button-background-color-active);
}

.stream__avatar-provider {
	position: relative;
	flex-shrink: 0;
	width: 40px;
	margin-right: 8px;
	padding: 4px;
}

.stream__avatar {
	display: block;
	width: 100%;
	border-radius: 50%;
}

.stream__provider {
	position: absolute;
	top: 0;
	left: 0;
}

.stream__login-activity {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	flex-shrink: 1;
	/*
	 * The explicit width should be enough to occupy the fullest possible width
	 * of the stream list, relying on flex resizing to shrink as necessary. An
	 * alternative could be to assign a width such that the sum total of the
	 * stream item would occupy the same width as the stream list maximum, but
	 * considering that the viewer count can fluctuate the width of its label,
	 * this is not deterministic.
	 */
	width: 360px;
}

.stream__login {
	font-weight: bold;
}

.stream__activity {
	font-size: 0.8rem;
	color: var(--sl-font-color-faded);
}

.stream__viewers {
	display: flex;
	margin-left: 8px;
	align-items: center;
	flex-shrink: 0;
	align-self: flex-start;
	font-size: 0.8rem;
	color: var(--sl-font-color-faded);
}

.stream__viewers::before {
	content: '';
	width: 8px;
	height: 8px;
	margin-right: 4px;
	border-radius: 50%;
	background-color: #e91916;
}