mirror of https://github.com/sveltejs/svelte
Rogerio Amorim
3 years ago
parent
ab8c66d10c
commit
db95220ca0
@ -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';
|
||||
}
|
||||
Loading…
Reference in new issue