Joe Julian
175 lines
2.5 KiB
CSS
175 lines
2.5 KiB
CSS
:root {
|
|
color-scheme: light;
|
|
--ink: #214f44;
|
|
--ink-soft: #4d6d66;
|
|
--surface: #fffdfa;
|
|
--surface-2: #f2f7f3;
|
|
--line: #d7e3dc;
|
|
--accent: #255f4a;
|
|
--accent-soft: #dfeee6;
|
|
--warn: #9f5f0e;
|
|
--error: #9f2f2f;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font: 14px/1.4 "Noto Sans", "Liberation Sans", sans-serif;
|
|
color: var(--ink);
|
|
background:
|
|
radial-gradient(circle at top right, #ecf5ef, transparent 38%),
|
|
linear-gradient(180deg, #f8fbf8, #eef4f0);
|
|
}
|
|
|
|
body.popup {
|
|
min-width: 360px;
|
|
}
|
|
|
|
.surface {
|
|
padding: 16px;
|
|
}
|
|
|
|
.topbar {
|
|
display: flex;
|
|
align-items: start;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 22px;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 14px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
margin-bottom: 8px;
|
|
color: var(--ink-soft);
|
|
}
|
|
|
|
.subtle {
|
|
color: var(--ink-soft);
|
|
}
|
|
|
|
.status-card {
|
|
padding: 12px 14px;
|
|
border-radius: 12px;
|
|
border: 1px solid var(--line);
|
|
background: var(--surface);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.status-card[data-tone="ready"] {
|
|
border-color: #c5dccf;
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
.status-card[data-tone="warning"] {
|
|
border-color: #e4d0ae;
|
|
background: #fbf4e7;
|
|
}
|
|
|
|
.status-card[data-tone="error"] {
|
|
border-color: #e4bcbc;
|
|
background: #fcf1f1;
|
|
}
|
|
|
|
.match-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.match-row,
|
|
button,
|
|
.link-button {
|
|
appearance: none;
|
|
border: 0;
|
|
border-radius: 12px;
|
|
background: var(--surface);
|
|
color: var(--ink);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.match-row {
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 12px 14px;
|
|
border: 1px solid var(--line);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.match-row:hover,
|
|
button:hover,
|
|
.link-button:hover {
|
|
background: var(--surface-2);
|
|
}
|
|
|
|
.match-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: start;
|
|
text-align: left;
|
|
}
|
|
|
|
.quality {
|
|
font-size: 12px;
|
|
color: var(--ink-soft);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.settings {
|
|
max-width: 720px;
|
|
margin: 0 auto;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.settings-form {
|
|
display: grid;
|
|
gap: 16px;
|
|
}
|
|
|
|
label {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
input,
|
|
textarea {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
color: var(--ink);
|
|
font: inherit;
|
|
}
|
|
|
|
button,
|
|
.link-button {
|
|
padding: 10px 14px;
|
|
background: var(--accent);
|
|
color: #fff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
justify-content: end;
|
|
}
|