311 lines
4.4 KiB
CSS
311 lines
4.4 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-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);
|
|
}
|