✍️ Trello design tweaks by KABA

/* ==UserStyle==
@name         ✍️ Trello design tweaks
@version      20250301.22.38
@namespace    https://userstyles.world/user/KABA
@description  Design tweaks.
@author       KABA
@license      No License
==/UserStyle== */

@-moz-document domain("trello.com") {
/* Domain */

/*
	NOTE: Highlight style for identification
	outline: solid #f003;
*/


/* - Base */
:root {
	--gutter-x: 8dvw / 360 * 100;
	--bs-1: color-mix(in hsl, #0000, var(--gray--base)  8%);
	--bs-2: color-mix(in hsl, #0000, var(--gray--base) 16%);
	--box-shadow:
		var(--bs-1) 0 1px 1px,
		var(--bs-2) 0 0   1px;

	&[data-color-mode="light"][data-theme~="light:light"] {
		--gray--base: #091e42;
		--ds-background-neutral: color-mix(in hsl, #0000, var(--gray--base) 4%);
	}
}


/* - Components */

/* -- Cards */
/* [data-testid="list"] {} */
[data-testid="list-cards"] { row-gap: 7px }
[data-testid="list-header"] {
	/* Hide filter count label */
	[role="presentation"] + * { display: none }
}
[data-testid="trello-card"] {
	--ds-shadow-raised: var(--box-shadow);
}

/* -- Modal of Task */
#layer-manager-card-back {
	/* Modal card wrapper */
	[data-elevation] {
		--my: min(1.5rem, var(--gutter-x));
		margin-block: var(--my);

		/* Adjust container padding for 751px - 800px */
		> [role="dialog"] {
			max-width: calc(100dvw - var(--my));
		}
	}

	/* Check list */
	.LieesRzehtmWbc {
		margin-top: 1em;

		label,
		[role="button"] { padding-block: 0 }
	}

	/* Markdown Contents */
	.ak-renderer-document,
	.ProseMirror {
		line-height: calc(22 / 14);

		h1, h2, h3, h4 {
			&:not(:last-child) { margin-bottom: .5em }
		}
		p { line-height: unset }
		> p,
		blockquote > p {
			&:not(:first-child) { margin-top: .5em }
		}
		> :is(ul, ol) {
			&:not(:first-child) { margin-top: .5em }
			&:not(:last-child)  { margin-bottom: .5em }
		}
		blockquote {
			display: revert;
			margin-block: .75em;

			&:first-child { margin-top: 4px }
			&:last-child  { margin-bottom: 4px }
		}
	}

	/* Input fields */
	.akEditor {
		border-radius: 8px;
		box-shadow: var(--box-shadow);
	}

	/* Message bubble */
	.c3OsZHKSpXeMAD > input,
	.OKlwSQ0FyvrPMg { --ds-shadow-raised: var(--box-shadow) }
	[data-testid="description-content-area"],
	.ak-editor-content-area { padding: 12px 14px }
	[data-testid="comment-container"] > * > * { padding: 8px 14px }
	[data-testid="description-content-area"] {
		border-radius: 8px;
		box-shadow: var(--box-shadow);
		background: #fff;
	}
}
}