grayscale/dist/scales.css

220 lines
5.0 KiB
CSS

: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));
}