grayscale/dist/grayscale.css

246 lines
4.9 KiB
CSS

/* Grayscale CSS v:0.8.3 | MIT LICENSE | https://github.com/n2geoff/grayscale */
:root {
--Hsl: 207;
--hSl: 50%;
--hsL: 50%;
--theme: hsl(var(--Hsl), var(--hSl), var(--hsL));
--font: Arial, Helvetica, san-serif;
--line: 1.5;
--weight: 400;
--size: 20px;
--radius: 0rem;
--space: 1rem;
}
[data-theme="light"],:root:not([data-theme="dark"]) {
--light: hsl(var(--Hsl), var(--hSl), calc(var(--hsL) + 35%));
--dark: hsl(var(--Hsl), var(--hSl), calc(var(--hsL) - 35%));
--gray: hsl(var(--Hsl), 15%, 75%);
--hint: hsl(var(--Hsl), 35%, 70%);
--bg: hsl(var(--Hsl), 0%, 95%);
--fg: hsl(var(--Hsl), 0%, 5%);
}
[data-theme="dark"] {
--light: hsl(var(--Hsl), var(--hSl), calc(var(--hsL) - 35%));
--dark: hsl(var(--Hsl), var(--hSl), calc(var(--hsL) + 35%));
--gray: hsl(var(--Hsl), 15%, 15%);
--hint: hsl(var(--Hsl), 35%, 30%);
--bg: hsl(var(--Hsl), 50%, 5%);
--fg: hsl(var(--Hsl), 20%, 90%);
}
*,*:before,*:after {
box-sizing: border-box;
}
html,body {
background: var(--bg);
color: var(--fg);
margin: 0;
padding: 0;
font-family: var(--font);
font-size: var(--size);
letter-spacing: 0.0625em;
font-weight: var(--weight);
line-height: var(--line);
box-sizing: border-box;
padding: 0;
}
::placeholder,small {
color: var(--hint);
}
:disabled::placeholder,small {
color: hsl(0, 0%, 50%);
}
img,embed,iframe,object,audio,video {
height: auto;
max-width: 100%;
border: none;
}
main {
margin: 0 auto;
padding: var(--space);
height: 100vh;
max-width: 1140px;
}
ul,ol,li {
margin: 0 calc(var(--space) *.72);
padding: 0
}
table {
background-color: var(--bg);
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
thead {
background: var(--theme);
}
th {
text-align: left;
color: var(--dark);
}
th,td {
padding: calc(var(--space) / 2);
border-bottom: 1px solid var(--theme);
}
a {
color: var(--theme);
}
a:hover {
color: var(--fg);
}
blockquote {
margin: var(--space) 0;
border-left: calc(var(--space) / 2) solid var(--dark);
background: hsl(var(--Hsl) var(--hSl) var(--hsL));
color: var(--bg);
padding: var(--space);
}
code {
color: var(--light);
background: var(--dark);
margin: 0 calc(var(--space) / 4);
padding: 0 calc(var(--space) / 4);
}
pre>code {
display: block;
padding: var(--space);
width: 100%;
}
hr {
color: var(--theme);
border: 1px solid;
}
h1,h2,h3,h4,h5,h6 {
margin: var(--space) 0;
text-transform: capitalize;
}
h1 {
font-size: calc(var(--size) * 2);
color: var(--dark);
}
h2 {
color: var(--theme);
}
h3 {
border-bottom: 1px solid var(--theme);
}
section {
margin-bottom: var(--space);
}
article {
padding: var(--space);
background-color: var(--light);
}
label {
font-size: var(--size);
font-weight: 600;
text-transform: capitalize;
color: var(--fg);
margin: 0 calc(var(--size) / 2);
}
input {
display: block;
outline: none;
box-sizing: border-box;
font-size: var(--size);
background-color: var(--bg);
color: var(--fg);
width: 100%;
height: calc(var(--size) * 3);
border: 1px solid var(--theme);
border-radius: var(--radius);
padding: clamp(.5rem, var(--space), 2rem);
margin-bottom: var(--space);
margin-right: var(--space);
}
input:disabled {
background: var(--gray);
color: var(--bg);
cursor: not-allowed;
}
select:focus,textarea:focus,input:focus {
border: 2px solid var(--theme);
}
input[type="checkbox"],input[type="radio"] {
display: inline-block;
padding: 0;
margin: 0;
width: calc(var(--size) * .8);
height: calc(var(--size) * .8);
}
button,input[type="submit"],input[type="reset"],select,textarea {
display: inline-block;
outline: none;
font-family: var(--font);
font-size: var(--size);
height: calc(var(--size) * 3);
width: 100%;
border: 1px solid var(--theme);
color: var(--theme);
background-color: var(--bg);
border-radius: var(--radius);
padding: 0 var(--space);
margin-bottom: var(--space);
cursor: pointer;
}
input[type="submit"],input[type="reset"] {
background-color: var(--theme);
color: var(--bg);
}
select {
background: var(--bg) no-repeat 100%;
color: var(--fg);
padding: clamp(.5rem, var(--space), 2rem);
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) * 6rem);
padding: clamp(.5rem, var(--space), 2rem);
cursor: text;
color: var(--fg);
}
.grid {
display: grid;
gap: var(--space);
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
}