source ⟩ hypertext ⟩ admin ⟩ planter ⟩ editor.css

/* Form */

form#editor {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-rows: auto 1fr;
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	align-items: stretch;
	gap: 1rem;

	block-size: 100vb;
	max-inline-size: 60em;
	margin-inline: auto;
	padding: 1em;

	accent-color: var(--accent);
	color-scheme: dark;
}

.writer {
	grid-area: 1 / 1 / 3 / 2;
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 1rem;
}

input#editor-title {
	padding-block: 0.5rem;
	padding-inline: 1rem;

	color: var(--dark);
	font-family: var(--draft);
	font-size: 2rem;

	background-color: var(--light);
	border-radius: 0;
}

textarea#editor-contents {
	padding-block: 0.667rem;
	padding-inline: 1rem;

	color: var(--dark);
	font-family: var(--draft);

	background-color: var(--light);
	border-radius: 0;
	scrollbar-color: var(--dark) var(--light);
	scrollbar-width: thin;
}

div.sidebar {
	grid-area: 1 / 2 / 2 / 3;

	display: flex;
	flex-direction: column;
	gap: 1ch;
}

div.save-publish {
	display: flex;
	gap: 1ch;

	inline-size: 100%;
}

div.save-publish > * {
	flex-basis: 50%;
	flex-grow: 1;
	padding-block: 0.667rem;
	transition: all 0.25s;
}

div.value-grid {
	display: grid;
	grid-template-columns: max-content 1fr;
	grid-template-rows: auto;
	align-items: center;
	gap: 1ch;
}

div.value-grid :is(input, select, button) {
	padding-block: 0.5ch;
	padding-inline: 1rem;
}

div.checkbox {
	grid-column: 1 / 3;

	display: flex;
	align-items: center;
	justify-content: space-between;
}

div.checkbox label {
	flex-grow: 1;
}

div.checkbox input {
	block-size: 1.5em;
	inline-size: 1.5em;
}

/* Media controls */

.media-file-selector {
	display: grid;
	grid-area: 2 / 2 / 3 / 3;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 1ch;

	max-block-size: 100%;
	padding: 1ch;
	overflow-y: auto;

	background-color: var(--dark-2);
	border-radius: 0.5rem;

	scrollbar-color: var(--dark-2) var(--dark-3);
	scrollbar-width: thin;
}

.media-file-selector figure {
	margin: 0;
}

.media-file-selector figure button {
	aspect-ratio: 1 / 1;
	inline-size: 100%;

	background-position: center;
	background-size: cover;

	opacity: 0.667;

	transition: opacity 0.25s;
}

.media-file-selector figure button:is(:hover, :focus) {
	opacity: 1;
}

.media-file-selector figure.new-file button {
	border: 0.125rem solid var(--accent);
	background-color: var(--dark-3);
}

.media-file-selector figure.misc-media button {
	background-color: var(--dark-3);
}

.media-file-selector figure:is(.new-file, .misc-media) button span {
	display: block;

	font-size: 3em;
}

.media-file-selector figure figcaption {
	max-inline-size: 100%;
	margin-block-start: 0.125rem;
	overflow-x: hidden;

	font-size: 0.9em;
}

/* Tabs */

nav#tabs {
	display: none;
	grid-row: 2 / 3;
}

button.tab,
a.tab {
	display: grid;
	flex-basis: 0;
	flex-grow: 1;
	border-radius: 0;
}

.tab.enabled {
	background-color: var(--dark);
}

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

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

/* Mobile display */

/* newpost.css | https://new.satyrs.eu/x/planter/newpost.css */
@media screen and (max-width: 800px) {
	body {
		block-size: 100vb;
		max-block-size: 100vb;
		min-block-size: none;
		display: grid;
		grid-template-rows: minmax(0, 1fr) auto auto;
	}

	form#editor {
		display: block;
		block-size: auto;
		inline-size: 100%;
		max-inline-size: none;
	}

	div.sidebar {
		display: none;
	}

	.media-file-selector {
		display: none;
	}

	.writer {
		block-size: 100%;
	}

	nav#tabs {
		display: flex;
	}
}