From db95220ca0a4170bdde531dc7aae24040f6ee286 Mon Sep 17 00:00:00 2001 From: Rogerio Amorim Date: Thu, 18 Jan 2024 14:52:24 -0300 Subject: [PATCH] add changeset --- playgrounds/demo/demo.css | 249 +------------------------------------- 1 file changed, 3 insertions(+), 246 deletions(-) diff --git a/playgrounds/demo/demo.css b/playgrounds/demo/demo.css index 5cfdeb0dd6..75bfe42014 100644 --- a/playgrounds/demo/demo.css +++ b/playgrounds/demo/demo.css @@ -1,246 +1,3 @@ -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%); -} +h1 { + font-family: 'Cairo'; +} \ No newline at end of file