This commit is contained in:
parent
7de1f65ab8
commit
b0fbf3d31c
|
|
@ -1,220 +0,0 @@
|
||||||
:root {
|
|
||||||
--theme-h: 207;
|
|
||||||
--theme-s: 50%;
|
|
||||||
--theme-l: 50%;
|
|
||||||
|
|
||||||
--theme: hsl(var(--theme-h), var(--theme-s), var(--theme-l));
|
|
||||||
--muted: hsl(var(--theme-h), 15%, 15%);
|
|
||||||
|
|
||||||
--font-family: sans-serif, "Roboto";
|
|
||||||
--line-height: 1.5;
|
|
||||||
--font-weight: 400;
|
|
||||||
--font-size: 20px;
|
|
||||||
--border-color: var(--theme);
|
|
||||||
--border-radius: 0rem;
|
|
||||||
--border-width: 1px;
|
|
||||||
--spacing: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-theme="light"],
|
|
||||||
:root:not([data-theme="dark"]) {
|
|
||||||
--theme-light: hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) + 35%));
|
|
||||||
--theme-dark: hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) - 35%));
|
|
||||||
|
|
||||||
--background: hsl(var(--theme-h), 0%, 95%);
|
|
||||||
--foreground: hsl(var(--theme-h), 0%, 5%);
|
|
||||||
|
|
||||||
--muted: hsl(var(--theme-h), 15%, 75%);
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-theme="dark"] {
|
|
||||||
--theme-light: hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) - 35%));
|
|
||||||
--theme-dark: hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) + 35%));
|
|
||||||
|
|
||||||
--background: hsl(var(--theme-h), 50%, 5%);
|
|
||||||
--foreground: hsl(var(--theme-h), 20%, 90%);
|
|
||||||
}
|
|
||||||
|
|
||||||
*, *:before, *:after { box-sizing: border-box; }
|
|
||||||
|
|
||||||
html,body {
|
|
||||||
background: var(--background);
|
|
||||||
color: var(--foreground);
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: var(--font-family);
|
|
||||||
font-size: var(--font-size);
|
|
||||||
font-weight: var(--font-weight);
|
|
||||||
line-height: var(--line-height);
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
img,embed,iframe,object,audio,video {
|
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
margin: calc((100vh / 25) * 1.5) calc((100vw / 25) * 1.5);
|
|
||||||
padding: var(--spacing);
|
|
||||||
height:100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
background-color: var(--background);
|
|
||||||
border-collapse: collapse;
|
|
||||||
border-spacing: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody {
|
|
||||||
border-top: 2px solid var(--theme);
|
|
||||||
border-top: 2px solid var(--theme);
|
|
||||||
}
|
|
||||||
|
|
||||||
th {text-align: left;color: var(--theme-dark)}
|
|
||||||
|
|
||||||
th, td {
|
|
||||||
padding: calc(var(--spacing) / 2);
|
|
||||||
border-bottom: 1px solid var(--theme)
|
|
||||||
}
|
|
||||||
|
|
||||||
a {color: var(--theme)}
|
|
||||||
a:hover {color: var(--foreground)}
|
|
||||||
|
|
||||||
blockquote {
|
|
||||||
margin: var(--spacing) 0;
|
|
||||||
border-left: calc(var(--spacing) / 2) solid var(--theme-dark);
|
|
||||||
background: hsl(var(--theme-h) var(--theme-s) var(--theme-l));
|
|
||||||
color: var(--background);
|
|
||||||
padding: var(--spacing);
|
|
||||||
}
|
|
||||||
|
|
||||||
pre, code, kbd {
|
|
||||||
font-family: monospace;
|
|
||||||
display: inline-block;
|
|
||||||
white-space: pre;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
margin: 0 calc(var(--spacing) / 4);
|
|
||||||
padding: 0 calc(var(--spacing) / 4);
|
|
||||||
background: var(--background);
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
color: var(--theme);
|
|
||||||
border: 1px solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,h2,h3,h4,h5,h6 {text-transform: capitalize;}
|
|
||||||
h1 {font-size: calc(var(--font-size) * 2); color: var(--theme-dark)}
|
|
||||||
h2 {color: var(--theme)}
|
|
||||||
h3 {border-bottom: 1px solid var(--theme);}
|
|
||||||
|
|
||||||
small {color: var(--muted)}
|
|
||||||
|
|
||||||
section {
|
|
||||||
margin-bottom: var(--spacing);
|
|
||||||
}
|
|
||||||
|
|
||||||
article {
|
|
||||||
padding: var(--spacing);
|
|
||||||
background-color: var(--theme-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
font-size: var(--font-size);
|
|
||||||
font-weight: 600;
|
|
||||||
text-transform: capitalize;
|
|
||||||
color: var(--foreground);
|
|
||||||
margin: 0 calc(var(--spacing) / 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
display: block;
|
|
||||||
outline: none;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-size: var(--font-size);
|
|
||||||
background-color: var(--background);
|
|
||||||
color: var(--foreground);
|
|
||||||
width: 100%;
|
|
||||||
height: calc(var(--font-size) * 3);
|
|
||||||
border: 1px solid var(--theme);
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
padding: var(--spacing);
|
|
||||||
margin-bottom: var(--spacing);
|
|
||||||
margin-right: var(--spacing);
|
|
||||||
}
|
|
||||||
|
|
||||||
input:disabled {
|
|
||||||
background: var(--muted);
|
|
||||||
color: var(--background);
|
|
||||||
cursor:not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="checkbox"],
|
|
||||||
input[type="radio"] {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
width: var(--spacing);
|
|
||||||
height: var(--spacing);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="submit"] {
|
|
||||||
font-size: var(--font-size);
|
|
||||||
height: calc(var(--font-size) * 3);
|
|
||||||
padding: var(--spacing) calc(var(--spacing) / 2);
|
|
||||||
margin: var(--spacing) 0;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="submit"] {
|
|
||||||
background-color: var(--theme);
|
|
||||||
color: var(--background);
|
|
||||||
}
|
|
||||||
|
|
||||||
button, select, textarea {
|
|
||||||
display: inline-block;
|
|
||||||
outline: none;
|
|
||||||
font-family: var(--font-family);
|
|
||||||
font-size: var(--font-size);
|
|
||||||
height: calc(var(--font-size) * 3);
|
|
||||||
width: 100%;
|
|
||||||
border: 1px solid var(--theme);
|
|
||||||
color: var(--theme);
|
|
||||||
background-color: var(--background);
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
padding: var(--spacing);
|
|
||||||
margin-bottom: var(--spacing);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
select {
|
|
||||||
background: var(--background) no-repeat 100%;
|
|
||||||
color: var(--foreground);
|
|
||||||
appearance: none;
|
|
||||||
background-size: 1ex;
|
|
||||||
background-origin: content-box;
|
|
||||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='%23555'><polygon points='0,0 60,0 30,40'/></svg>");
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
overflow: auto;
|
|
||||||
resize: vertical;
|
|
||||||
border: 1px solid var(--theme);
|
|
||||||
height: calc(var(--line-height) * 6rem);
|
|
||||||
cursor: text;
|
|
||||||
color: var(--foreground);
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid {
|
|
||||||
display: grid;
|
|
||||||
gap: var(--spacing);
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue