contentmatcher/static/style.css

312 lines
4.5 KiB
CSS

/* variables */
:root {
--txt-width: 60ch;
--foreground: #333333;
--background: #eeeeee;
--dimm: 0.7;
--green: #00d090;
--orange: #f08010;
--yellow: #f0c060;
--red: #f05030;
--blue: #4080a0;
}
/* normalize */
* {
box-sizing: border-box;
}
input {
background: none;
border: none;
border-bottom: solid var(--foreground) 1px;
font-size: 1rem;
}
input:focus {
outline: none;
}
button,
input[type^=submit] {
cursor: pointer;
border: none;
background: none;
font-size: 1rem;
}
.yes,
.green{
color: var(--green);
}
.maybe,
.yellow {
color: var(--yellow);
}
.no,
.orange {
color: var(--orange);
}
.delete,
.red {
color: var(--red);
}
.share,
.blue {
color: var(--blue);
}
html {
padding: 0;
margin: 0;
font-family: sans-serif;
/* font-size: clamp(16px, calc(1vw + 1vh + 0.5vmin), 22px); */
font-size: calc(0.1rem + 1vw + 1vh + 0.5vmin);
line-height: 1.25;
color: var(--foreground);
background-color: var(--background);
}
/* layout */
body {
margin: 0;
height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
}
body>* {
padding: 0.5rem;
background-color: var(--background);
}
/* header */
body>header {
border-bottom: thin solid var(--foreground);
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"title navigation";
}
body>header>h1,
body>header>nav {
display: flex;
gap: 0.5rem;
}
body>header>h1 {
grid-area: title;
}
body>header>nav {
grid-area: navigation;
}
body>header * {
margin: 0;
font-size: 1rem;
font-weight: normal;
text-decoration: none;
color: var(--foreground);
}
/* main */
body>main {
overflow: scroll;
}
/* footer */
body>footer {
border-top: thin solid var(--foreground);
}
body>footer * {
margin: 0;
font-size: 0.5rem;
}
/* deck */
#deck article {
max-width: 100%;
max-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
#deck article>main {
overflow: scroll;
}
/* matches */
#matches table {
width: 100%;
}
#matches table tr {
display: grid;
grid-template-columns: 1fr 1fr auto;
border-bottom: thin solid var(--foreground);
}
#matches table tr td:last-child {
text-align: right;
}
/* upload */
#upload form {
height: 100%;
display: grid;
grid-template-rows: 1fr auto;
}
#upload input[type^=file] {
display: none;
}
.dropzone {
cursor: pointer;
}
/* settings */
/* TODO: arrows */
#settings form {
display: grid;
grid-template-columns: auto auto;
grid-gap: 0.5rem;
}
#settings form input[type=submit] {
grid-column: 1 / -1;
}
/* instructions */
#instructions article h1,
#instructions article h2,
#instructions article h3,
#instructions article h4,
#instructions article h5,
#instructions article h6 {
font-size: 1rem;
font-weight: normal;
border-bottom: thin solid var(--foreground);
}
/* login, register */
#login>main,
#register>main {
place-self: center;
}
#login form {
display: grid;
grid-template-areas:
"user-label user-input"
"pass-label pass-input"
"login login";
grid-gap: 0.5rem;
align-items: center;
}
#register form {
display: grid;
grid-template-areas:
"user-label user-input"
"pass-label pass-input"
"mail-label mail-input"
"login login";
grid-gap: 0.5rem;
align-items: center;
}
#login form>input[type=text],
#login form>input[type=password],
#register form>input[type=text],
#register form>input[type=password],
#register form>input[type=email] {
}
#login form>input:focus,
#register form>input:focus {
outline: none;
}
#login form>input[type^="submit"],
#register form>input[type^="submit"] {
grid-area: login;
place-self: center;
align-self: center;
}
/* menu */
#menu form {
display: grid;
grid-template-columns: auto;
grid-gap: 0.5rem;
justify-items: start;
}
#content>form {
display: grid;
grid-template-rows: 1fr;
}
/* flash */
.flashes {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: none;
max-width: var(--txt-width);
list-style: none;
}
.flashes li {
animation: 3s 2s forwards fadeout;
}
@keyframes fadeout {
from {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
}
}
#buttonContainer {
display: grid;
grid-auto-flow: column;
grid-template-columns: repeat(5, 1fr);
}
#buttonContainer>button:hover {
/* background-color: black!important; */
}
button[value^="Yes"] {
background-color: var(--green);
}
button[value^="No"] {
background-color: var(--orange);
}
button[value^="Maybe"] {
background-color: var(--yellow);
}
button[value^="Delete"] {
background-color: var(--red);
}
button[value^="Share"] {
background-color: var(--blue);
}