source ⟩ hypertext ⟩ admin ⟩ stats ⟩ stats.css

:root {
	--background: #f2edf4;
	--text: #332836;
	--accent: #508;
}

body {
	background-color: #280044;
}

main {
	max-inline-size: 80ch;

	background-color: var(--background);
	box-shadow: 0 0 5em black;
}

h1 {
	margin-block-start: 0;

	font-weight: normal;
	letter-spacing: 0.25ch;
	text-transform: uppercase;
}

h2 {
	margin-block: 0 1ch;

	color: #615565;
	font-size: 1em;
	font-weight: normal;
}

#main-panel {
	margin-block-end: 1ch;

	& #daily-views {
		display: flex;
		align-items: stretch;

		& .day-bar {
			display: grid;
			flex-basis: 100%;
			flex-grow: 1;
			grid-template-rows: 1fr calc(10rem * var(--bar-size)) auto;

			text-align: center;

			& .view-count {
				align-self: end;
				
				color: var(--accent);
			}

			& .view-bar {
				margin-inline-end: 0.5ch;

				background-color: var(--accent);
				border-radius: 0.5ch;
			}
			
			&:last-child .view-bar {
				margin-inline-end: 0;
			}

			& .day-label {
				border-block-start: 1px solid #615565;
			}
		}
	}
}

#two-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1ch;

	& table {
		inline-size: 100%;

		tr {
			background-color: #d7b6ff88;

			&:nth-child(even) {
				background-color: #cc9dff88;
			}

			& td {
				padding-block: 0.25ch;
				padding-inline: 1ch;

				&:first-child {
					max-inline-size: 30ch;
					overflow-x: hidden;

					text-overflow: ellipsis;
				}
			}
		}
	}
}