gomuks/web/src/ui/roomlist/RoomList.css

div.room-list-wrapper {
	contain: strict;
	grid-area: roomlist;
	background: var(--room-list-background);
	box-sizing: border-box;
	overflow: hidden;
	scrollbar-color: var(--room-list-scrollbar-color);
	display: grid;
	grid-template:
		"spacebar search" 3.5rem
		"spacebar roomlist" 1fr
		/ 3rem    1fr;
}

div.room-list {
	background-color: var(--room-list-background-overlay);
	overflow-y: auto;
	grid-area: roomlist;
}

div.space-bar {
	background-color: var(--space-list-background-overlay);
	grid-area: spacebar;
	overflow: auto;
	scrollbar-width: none;

	> div.space-entry {
		width: 2rem;
		height: 2rem;
		padding: .25rem;
		margin: .25rem;
		border-radius: .25rem;
		cursor: var(--clickable-cursor);

		&:hover, &:focus {
			background-color: var(--room-list-entry-hover-color);
		}

		&.active {
			background-color: var(--room-list-entry-selected-color);
		}

		> svg {
			width: 100%;
			height: 100%;
		}

		> img.avatar {
			border-radius: 0;
			clip-path: url(#squircle);
			width: 100%;
			height: 100%;
		}

		> div.room-entry-unreads {
			z-index: 2;
			height: 0;
			width: 0;
			margin-left: auto;
			position: relative;

			> div.unread-count {
				position: absolute;
				/* This positioning doesn't feel very precise, but it looks correct enough */
				margin-top: .75rem;
				margin-right: .25rem;
			}
		}
	}
}

div.room-search-wrapper {
	width: 100%;
	display: flex;
	align-items: center;
	height: 3.5rem;
	background-color: var(--room-list-search-background-overlay);
	grid-area: search;

	> input {
		padding: 0 0 0 1rem;
		height: 3rem;
		box-sizing: border-box;
		border: none;
		outline: none;
		background-color: transparent;
		flex: 1;
	}

	> button {
		height: 2.5rem;
		width: 2.5rem;
		border-radius: 0;
		color: var(--text-color) !important;
	}
}

div.room-entry {
	width: 100%;
	display: flex;
	gap: .25rem;
	user-select: none;
	cursor: var(--clickable-cursor);
	height: 3rem;
	padding: var(--room-list-padding) 0;
	contain-intrinsic-height: calc(3rem + var(--room-list-padding) * 2);
	content-visibility: auto;
	contain: strict;

	&:hover, &:focus {
		background-color: var(--room-list-entry-hover-color);
	}

	&.active {
		background-color: var(--room-list-entry-selected-color);
	}

	> div.room-entry-left {
		height: 3rem;
		width: 3rem;

		> img.room-avatar {
			margin: .25rem;
		}
	}

	> div.room-entry-right {
		width: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		justify-content: space-around;

		> div.room-name {
			font-weight: bold;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		> div.message-preview {
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;

			> span.sender-name {
				display: block;
				max-width: 6rem;
				overflow: hidden;
			}

			> span.preview-text {
				display: block;
			}
		}
	}
}

div.room-entry-unreads {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	margin-right: .25rem;

	> div.unread-count {
		--unread-count-size: 1rem;
		--unread-count-padding-inline: calc(var(--unread-count-size)/4);
		--unread-count-padding-block: calc(var(--unread-count-size)/8);

		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: var(--unread-count-size);
		color: var(--unread-counter-text-color);
		user-select: none;

		background-color: var(--unread-counter-message-bg);
		height: var(--unread-count-size);
		min-width: calc(var(--unread-count-size) - 2*(var(--unread-count-padding-inline) - var(--unread-count-padding-block)));

		line-height: 1;
		font-size: .75em;

		padding-inline: var(--unread-count-padding-inline);
		padding-block: var(--unread-count-padding-block);

		&.big {
			--unread-count-size: 1.5rem;
			font-size: 1em;
			font-weight: bold;
		}

		&.marked-unread {
			background-color: var(--unread-counter-marked-unread-bg);
		}

		&.notified {
			background-color: var(--unread-counter-notification-bg);
		}

		&.highlighted {
			background-color: var(--unread-counter-highlight-bg);
		}

		&.space {
			--unread-count-size: .75rem;
			background-color: var(--space-unread-counter-message-bg);

			&.notified {
				background-color: var(--space-unread-counter-notification-bg);
			}

			&.highlighted {
				background-color: var(--space-unread-counter-highlight-bg);
			}
		}
	}
}

img.avatar {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	object-fit: cover;

	&.small {
		width: 1rem;
		height: 1rem;
	}

	&.large {
		width: 5rem;
		height: 5rem;
	}
}