undo demo.css change

Author: rogeriolaa

playgrounds/demo/demo.css

@@ -1,3 +1,246 @@
-h1 {
-	font-family: 'Cairo';
-}
+body {
+	--bg-1: hsl(0, 0%, 100%);
+	--bg-2: hsl(206, 20%, 90%);
+	--bg-3: hsl(206, 20%, 80%);
+	--fg-1: hsl(0, 0%, 13%);
+	--fg-2: hsl(0, 0%, 20%);
+	--fg-2: hsl(0, 0%, 30%);
+	--link: hsl(208, 77%, 47%);
+	--link-hover: hsl(208, 77%, 55%);
+	--link-active: hsl(208, 77%, 40%);
+	--border-radius: 4px;
+	--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+		'Open Sans', 'Helvetica Neue', sans-serif;
+	--font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono',
+		monospace;
+	background: var(--bg-1);
+	color: var(--fg-1);
+	font-family: var(--font);
+	line-height: 1.5;
+	margin: 1rem;
+	height: calc(100vh - 2rem);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-weight: normal;
+	font-variant-numeric: tabular-nums;
+	line-height: 1.1;
+}
+
+:is(h1, h2, h3, h4, h5, h6, p) {
+	margin: 1rem 0.1rem;
+}
+
+label {
+	margin: 0.5rem 0.1rem;
+}
+
+:is(h1, h2, h3, h4, h5, h6, p, label):first-child {
+	margin-top: 0;
+}
+
+:is(h1, h2, h3, h4, h5, h6, p, label):last-child {
+	margin-bottom: 0;
+}
+
+a {
+	color: var(--link);
+}
+
+a:hover {
+	color: var(--link-hover);
+}
+
+a:active {
+	color: var(--link-active);
+}
+
+label {
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+}
+
+label input {
+	margin: 0;
+}
+
+button,
+input,
+select {
+	font-family: inherit;
+	font-size: inherit;
+}
+
+button {
+	background: var(--link);
+	color: var(--bg-1);
+	padding: 0.5rem 1rem;
+	border: none;
+	border-radius: var(--border-radius);
+}
+
+button:hover {
+	background: var(--link-hover);
+}
+
+button:active {
+	background: var(--link-active);
+}
+
+:is(button, button:hover, button:active):disabled {
+	background: var(--link);
+	filter: grayscale(1);
+	opacity: 0.4;
+}
+
+input,
+textarea,
+select {
+	padding: 0.5rem;
+	border: 1px solid var(--bg-2);
+	border-radius: var(--border-radius);
+	box-sizing: border-box;
+}
+
+input,
+textarea {
+	background: var(--bg-1);
+}
+
+select:not([multiple]) {
+	background: var(--bg-2);
+}
+
+textarea {
+	font-family: var(--font-mono);
+	font-size: 0.9rem;
+}
+
+form {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	align-items: baseline;
+}
+
+ul:has(li):has(form) {
+	list-style: none;
+	padding: 0;
+}
+
+li form {
+	flex-direction: row;
+	gap: 0.5rem;
+	margin: 0.5rem 0;
+}
+
+nav {
+	position: relative;
+	display: flex;
+	gap: 1em;
+	padding: 1em;
+	background: var(--bg-2);
+	z-index: 2;
+	margin: 0 0 1em 0;
+	border-radius: var(--border-radius);
+}
+
+nav a {
+	text-decoration: none;
+}
+
+nav a[aria-current='true'] {
+	border-bottom: 2px solid;
+}
+
+ul:has(form) {
+	list-style: none;
+	padding: 0;
+}
+
+progress {
+	margin: 0.5rem 0;
+}
+
+progress:first-child {
+	margin-top: 0;
+}
+
+progress:lsat-child {
+	margin-bottom: 0;
+}
+
+.error {
+	color: red;
+}
+
+code {
+	background: var(--bg-2);
+	font-family: var(--font-mono);
+	font-size: 0.9em;
+	padding: 0.15rem 0.3rem;
+	border-radius: var(--border-radius);
+}
+
+ul.todos {
+	padding: 0;
+}
+
+ul.todos li:not(:has(> form)),
+ul.todos li form {
+	position: relative;
+	display: flex;
+	align-items: center;
+	padding: 0.5em 0.5em 0.5em 1em;
+	margin: 0 0 0.5em 0;
+	gap: 0.5em;
+	border-radius: 5px;
+	user-select: none;
+	background: var(--bg-1);
+	filter: drop-shadow(2px 3px 6px rgba(0, 0, 0, 0.1));
+	transition:
+		filter 0.2s,
+		opacity 0.2s;
+}
+
+ul.todos .done {
+	filter: none;
+	opacity: 0.4;
+}
+
+ul.todos button {
+	border: none;
+	background-color: transparent;
+	background-repeat: no-repeat;
+	background-position: 50% 50%;
+	background-size: 1rem 1rem;
+	cursor: pointer;
+	width: 3em;
+	height: 3em;
+	margin: -0.5em -0.5em -0.5em 0;
+	aspect-ratio: 1;
+	opacity: 0.5;
+	transition: opacity 0.2s;
+}
+
+ul.todos button:hover {
+	opacity: 1;
+}
+
+body.dark {
+	--bg-1: hsl(0, 0%, 18%);
+	--bg-2: hsl(0, 0%, 30%);
+	--bg-3: hsl(0, 0%, 40%);
+	--fg-1: hsl(0, 0%, 90%);
+	--fg-2: hsl(0, 0%, 70%);
+	--fg-3: hsl(0, 0%, 60%);
+	--link: hsl(206, 96%, 72%);
+	--link-hover: hsl(206, 96%, 78%);
+	--link-active: hsl(206, 96%, 64%);
+}