384 lines
6.7 KiB
CSS
384 lines
6.7 KiB
CSS
@font-face {
|
|
font-family: "Anouma Admin";
|
|
src: url("/fonts/baar-antropos.ttf") format("truetype");
|
|
font-display: swap;
|
|
font-style: normal;
|
|
font-weight: 100 900;
|
|
}
|
|
|
|
:root {
|
|
--anouma-ink: #342c31;
|
|
--anouma-plum: #66505f;
|
|
--anouma-mauve: #8b616d;
|
|
--anouma-rose: #d19ca1;
|
|
--anouma-cream: #f7f2ed;
|
|
--anouma-paper: #fffdfb;
|
|
--anouma-line: #e4d9d2;
|
|
--font-body: "Anouma Admin", Inter, ui-sans-serif, system-ui, sans-serif;
|
|
--font-mono: "SFMono-Regular", Consolas, monospace;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
background: var(--anouma-cream);
|
|
color: var(--anouma-ink);
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
body,
|
|
button,
|
|
input,
|
|
textarea,
|
|
select {
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
/* The left navigation is intentionally dark and quiet. Content stays light. */
|
|
.nav {
|
|
background: var(--anouma-ink);
|
|
border-right: 1px solid #4b3f46;
|
|
color: #f8f2ed;
|
|
}
|
|
|
|
.nav__header {
|
|
border-bottom: 1px solid #4b3f46;
|
|
padding: 24px 20px 20px;
|
|
}
|
|
|
|
.nav__header a,
|
|
.nav__header button {
|
|
color: #fffaf6;
|
|
}
|
|
|
|
.nav__links {
|
|
padding: 18px 12px;
|
|
}
|
|
|
|
.nav-group {
|
|
margin: 0 0 18px;
|
|
}
|
|
|
|
.nav-group__label,
|
|
.nav-group__toggle {
|
|
color: #bdaeb4;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.nav-group__label {
|
|
padding: 0 10px 8px;
|
|
}
|
|
|
|
.nav__link {
|
|
border-radius: 4px;
|
|
color: #f8f2ed;
|
|
font-size: 14px;
|
|
margin: 2px 0;
|
|
min-height: 38px;
|
|
padding: 9px 10px;
|
|
}
|
|
|
|
.nav__link:hover,
|
|
.nav__link:focus-visible,
|
|
.nav__link.active {
|
|
background: #4c3d47;
|
|
color: #fff;
|
|
}
|
|
|
|
.nav__link.active {
|
|
box-shadow: inset 3px 0 0 var(--anouma-rose);
|
|
}
|
|
|
|
.nav__controls {
|
|
border-top: 1px solid #4b3f46;
|
|
padding: 14px 12px;
|
|
}
|
|
|
|
.app-header,
|
|
.step-nav {
|
|
background: var(--anouma-paper);
|
|
border-bottom: 1px solid var(--anouma-line);
|
|
}
|
|
|
|
.template-default__wrap,
|
|
.dashboard__wrap,
|
|
.collection-list__wrap,
|
|
.edit-view__wrap {
|
|
background: var(--anouma-cream);
|
|
}
|
|
|
|
.template-default__wrap {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.dashboard__header,
|
|
.collection-list__header,
|
|
.edit-view__header {
|
|
border-bottom: 1px solid var(--anouma-line);
|
|
margin-bottom: 26px;
|
|
padding-bottom: 18px;
|
|
}
|
|
|
|
.dashboard__header h1,
|
|
.collection-list__header h1,
|
|
.edit-view__header h1 {
|
|
color: var(--anouma-ink);
|
|
font-size: clamp(26px, 3vw, 38px);
|
|
font-weight: 600;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
|
|
.card,
|
|
.dashboard__card,
|
|
.table-wrap,
|
|
.collection-list__table-wrap,
|
|
.field-type,
|
|
.document-fields__main {
|
|
border-color: var(--anouma-line);
|
|
}
|
|
|
|
.card,
|
|
.dashboard__card,
|
|
.table-wrap {
|
|
border-radius: 6px;
|
|
box-shadow: 0 8px 24px rgb(52 44 49 / 4%);
|
|
}
|
|
|
|
.btn {
|
|
border-radius: 4px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.btn--style-primary {
|
|
--bg-color: var(--anouma-mauve);
|
|
--hover-bg: var(--anouma-plum);
|
|
}
|
|
|
|
input,
|
|
textarea,
|
|
select,
|
|
.rs__control {
|
|
border-color: #d7c9c1;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus,
|
|
.rs__control--is-focused {
|
|
border-color: var(--anouma-mauve);
|
|
box-shadow: 0 0 0 2px rgb(139 97 109 / 12%);
|
|
}
|
|
|
|
.field-label,
|
|
.field-label label {
|
|
color: var(--anouma-plum);
|
|
font-weight: 650;
|
|
}
|
|
|
|
.description,
|
|
.field-description {
|
|
color: #7b6b72;
|
|
}
|
|
|
|
.table thead th,
|
|
.table th {
|
|
background: #f1e9e4;
|
|
color: var(--anouma-plum);
|
|
font-size: 11px;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.table tbody tr:hover {
|
|
background: #fbf7f4;
|
|
}
|
|
|
|
.anouma-admin-welcome {
|
|
background: var(--anouma-paper);
|
|
border: 1px solid var(--anouma-line);
|
|
border-left: 4px solid var(--anouma-mauve);
|
|
border-radius: 6px;
|
|
box-shadow: 0 12px 32px rgb(52 44 49 / 5%);
|
|
margin: 0 0 28px;
|
|
padding: 28px;
|
|
}
|
|
|
|
.anouma-admin-welcome__intro {
|
|
max-width: 680px;
|
|
}
|
|
|
|
.anouma-admin-eyebrow {
|
|
color: var(--anouma-mauve);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.16em;
|
|
margin: 0 0 8px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.anouma-admin-welcome h1 {
|
|
color: var(--anouma-ink);
|
|
font-size: clamp(25px, 3vw, 36px);
|
|
font-weight: 600;
|
|
letter-spacing: -0.03em;
|
|
margin: 0;
|
|
}
|
|
|
|
.anouma-admin-welcome__intro > p:last-child {
|
|
color: #776870;
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
margin: 10px 0 0;
|
|
}
|
|
|
|
.anouma-admin-quicklinks {
|
|
display: grid;
|
|
gap: 10px;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
margin-top: 26px;
|
|
}
|
|
|
|
.anouma-admin-quicklink {
|
|
background: #faf5f1;
|
|
border: 1px solid var(--anouma-line);
|
|
border-radius: 4px;
|
|
color: var(--anouma-ink);
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 154px;
|
|
padding: 16px;
|
|
text-decoration: none;
|
|
transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
|
|
}
|
|
|
|
.anouma-admin-quicklink:hover,
|
|
.anouma-admin-quicklink:focus-visible {
|
|
background: #fffaf7;
|
|
border-color: var(--anouma-mauve);
|
|
color: var(--anouma-ink);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.anouma-admin-quicklink__number {
|
|
color: var(--anouma-rose);
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.anouma-admin-quicklink__kicker {
|
|
color: var(--anouma-mauve);
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.anouma-admin-quicklink strong {
|
|
font-size: 17px;
|
|
font-weight: 650;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.anouma-admin-quicklink > span:last-child {
|
|
color: #7b6b72;
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.anouma-custom-nav-item,
|
|
.anouma-custom-nav-action {
|
|
margin: 0 0 6px;
|
|
padding: 0;
|
|
}
|
|
|
|
.anouma-custom-nav-link,
|
|
.anouma-custom-nav-button {
|
|
align-items: center;
|
|
border: 1px solid #5a4a55;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
font-size: 13px;
|
|
font-weight: 650;
|
|
gap: 10px;
|
|
min-height: 38px;
|
|
padding: 8px 10px;
|
|
text-decoration: none;
|
|
width: 100%;
|
|
}
|
|
|
|
.anouma-custom-nav-link {
|
|
color: #fffaf6;
|
|
}
|
|
|
|
.anouma-custom-nav-link:hover,
|
|
.anouma-custom-nav-link:focus-visible {
|
|
background: #4c3d47;
|
|
border-color: #7d6371;
|
|
color: #fff;
|
|
}
|
|
|
|
.anouma-custom-nav-link__icon {
|
|
color: var(--anouma-rose);
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
}
|
|
|
|
.anouma-custom-nav-button {
|
|
background: var(--anouma-mauve);
|
|
border-color: var(--anouma-mauve);
|
|
color: #fff;
|
|
cursor: pointer;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.anouma-custom-nav-button:hover,
|
|
.anouma-custom-nav-button:focus-visible {
|
|
background: var(--anouma-plum);
|
|
border-color: var(--anouma-plum);
|
|
}
|
|
|
|
.anouma-custom-nav-button:disabled {
|
|
cursor: wait;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.anouma-custom-nav-input {
|
|
background: #fffaf6;
|
|
border: 1px solid #d7c9c1;
|
|
border-radius: 3px;
|
|
color: var(--anouma-ink);
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
margin-top: 6px;
|
|
padding: 6px 7px;
|
|
width: 100%;
|
|
}
|
|
|
|
.anouma-custom-nav-error {
|
|
color: #f1b5b5;
|
|
font-size: 11px;
|
|
line-height: 1.4;
|
|
margin: 6px 0 0;
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.anouma-admin-quicklinks {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.anouma-admin-welcome {
|
|
padding: 20px;
|
|
}
|
|
|
|
.anouma-admin-quicklinks {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|