source ⟩ hypertext ⟩ admin ⟩ planter ⟩ dashboard.css

body {
	display: grid;
	grid-template-columns: 12.5rem minmax(0, 1fr);
	gap: 1rem;
	padding: 1rem;
}

#tabs {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.tab {
	display: flex;
	text-decoration: none;
	gap: 1ch;
	padding: 0.5ch 1ch;
	border-radius: 0.5rem;
	align-items: center;
}
.tab-icon,
.new-post .icon {
	font-size: 1.5rem;
}
.tab.hollow:not(:focus, :hover) {
	padding: calc(0.5ch - 0.125em) calc(1ch - 0.125em);
}

a.button.new-post {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1ch;

	padding: 0.5ch 1.5ch;

	color: var(--dark);
	text-decoration: none;

	background-color: var(--accent);
	border-radius: 0.5rem;
}

.table-container {
	overflow-inline: auto;
}

table {
	inline-size: 100%;
	border-collapse: collapse;
}
th {
	text-align: start;
}
td,
th {
	padding-block: 0.5rem;
	padding-inline: 1rem;
}
th.numeric,
td.numeric {
	font-variant-numeric: tabular-nums lining-nums;
	text-align: right;
}
thead tr {
	background-color: var(--dark-3);
}
tbody tr {
	background-color: var(--dark-2);
}
tbody tr:nth-child(even) {
	background-color: var(--dark-3);
}

td.has-button {
	max-inline-size: fit-content;
}

.posts-title {
	display: grid;
}
table a {
	text-decoration: none;
	color: var(--accent);
}
.posts-title > a {
	font-weight: bold;
}
.posts-title .icon {
	transform: translateY(0.2em);
	display: inline-block;
}
.posts-language {
	white-space: nowrap;
}
table a:hover,
table a:focus {
	text-decoration: underline;
}

td.comments-shown {
	text-align: center;
}

td.comments-from > * {
	display: block;
}

td.comments-from > strong {
	white-space: nowrap;
}

pre.comments-comment-content {
	max-block-size: 3.5em;
	overflow-block: hidden;
	font-size: 0.9em;
	white-space: pre-wrap;
}

td.comments-date {
	white-space: nowrap;
}

h1 {
	margin-block-start: 0;
}

h2 {
	font-weight: normal;
}

img.flag {
	display: inline;
	height: 1.5ex;
	border: 1px solid var(--light);
	border-radius: 2px;
}

/* dashboard.css | https://new.satyrs.eu/x/planter/dashboard.css */

@media screen and (max-width: 800px) {
	body {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: 1fr auto;
		gap: 0;
		block-size: 100vb;
		padding: 0;
	}

	#tabs {
		flex-direction: row;
		gap: 0;
		grid-row: 2 / 3;
	}

	.tab {
		display: grid;
		gap: 0;

		padding: 0;
		border-radius: 0;
		flex: 1 1 0;
		text-align: center;
	}
	.tab.hollow:not(:focus, :hover),
	.tab.hollow {
		padding: 0;
		border: none;
	}

	.tab-icon,
	.new-post .icon {
		font-size: 2em;
	}

	h1 {
		margin-block-start: 1em;
	}

	body > main:nth-child(2) {
		overflow-block: auto;
	}

	h1,
	h2 {
		margin-inline-start: 1.5rem;
	}

	.tab-label {
		font-size: 0.9em;
	}
}