593 lines
11 KiB
CSS
593 lines
11 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;
|
|
}
|
|
|
|
/* Keep Payload's own color tokens aligned with the light admin surface. The
|
|
previous theme could leave the content area pale while retaining white text
|
|
from dark mode, which made headings and descriptions effectively invisible. */
|
|
html,
|
|
html[data-theme="light"],
|
|
html[data-theme="dark"] {
|
|
--theme-bg: var(--anouma-cream);
|
|
--theme-input-bg: var(--anouma-paper);
|
|
--theme-text: var(--anouma-ink);
|
|
--theme-elevation-0: var(--anouma-paper);
|
|
--theme-elevation-50: #fbf7f4;
|
|
--theme-elevation-100: #f1e9e4;
|
|
--theme-elevation-150: var(--anouma-line);
|
|
--theme-elevation-200: #d7c9c1;
|
|
--theme-elevation-300: #b9aaa8;
|
|
--theme-elevation-400: #8b7b81;
|
|
--theme-elevation-500: #776870;
|
|
--theme-elevation-600: #66505f;
|
|
--theme-elevation-700: #51404b;
|
|
--theme-elevation-800: var(--anouma-ink);
|
|
--theme-elevation-900: #211a1e;
|
|
--theme-elevation-950: #171216;
|
|
--theme-elevation-1000: #100c0f;
|
|
--font-body: "Anouma Admin", Inter, ui-sans-serif, system-ui, sans-serif;
|
|
--font-mono: "SFMono-Regular", Consolas, monospace;
|
|
background: var(--anouma-cream);
|
|
color: var(--anouma-ink);
|
|
color-scheme: light;
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
body,
|
|
#app,
|
|
.template-default,
|
|
.template-default__wrap,
|
|
.collection-list,
|
|
.collection-list__wrap,
|
|
.collection-edit,
|
|
.dashboard,
|
|
.dashboard__wrap {
|
|
color: var(--anouma-ink);
|
|
}
|
|
|
|
/* 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);
|
|
color: var(--anouma-plum);
|
|
}
|
|
|
|
.app-header a,
|
|
.app-header button,
|
|
.step-nav a,
|
|
.step-nav span,
|
|
.step-nav label {
|
|
color: var(--anouma-plum);
|
|
}
|
|
|
|
.app-header svg,
|
|
.step-nav svg {
|
|
color: var(--anouma-plum);
|
|
fill: currentColor;
|
|
}
|
|
|
|
.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,
|
|
.list-header__title,
|
|
.list-header__title h1,
|
|
.document-fields__label {
|
|
color: var(--anouma-ink);
|
|
font-size: clamp(26px, 3vw, 38px);
|
|
font-weight: 600;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
|
|
.list-header,
|
|
.list-header__content,
|
|
.collection-list__sub-header,
|
|
.list-controls,
|
|
.no-results,
|
|
.no-results h3,
|
|
.no-results p,
|
|
.collection-list__table-wrap,
|
|
.document-fields,
|
|
.document-fields__main,
|
|
.field-type,
|
|
.field-type__wrap,
|
|
.label-wrapper,
|
|
.field-label,
|
|
.field-label label,
|
|
.field-description,
|
|
.description {
|
|
color: var(--anouma-ink);
|
|
}
|
|
|
|
.list-header__title,
|
|
.list-header__title a,
|
|
.list-header__title button,
|
|
.list-header__actions,
|
|
.list-controls button,
|
|
.list-controls a {
|
|
color: var(--anouma-ink);
|
|
}
|
|
|
|
.list-header__title-actions .btn--style-secondary,
|
|
.list-header__actions .btn--style-secondary,
|
|
.list-controls .btn--style-subtle {
|
|
--color: var(--anouma-ink);
|
|
--hover-color: var(--anouma-ink);
|
|
--bg-color: var(--anouma-paper);
|
|
--hover-bg: #f1e9e4;
|
|
--btn-border: 1px solid var(--anouma-line);
|
|
--hover-btn-border: 1px solid var(--anouma-mauve);
|
|
}
|
|
|
|
.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 {
|
|
--color: #fff;
|
|
--bg-color: var(--anouma-mauve);
|
|
--hover-bg: var(--anouma-plum);
|
|
}
|
|
|
|
input,
|
|
textarea,
|
|
select,
|
|
.rs__control {
|
|
background: var(--anouma-paper) !important;
|
|
border-color: #d7c9c1;
|
|
border-radius: 4px;
|
|
color: var(--anouma-ink) !important;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
.upload,
|
|
.file-field,
|
|
.upload-field-card,
|
|
.upload__dropzoneContent,
|
|
.dropzone,
|
|
.bulk-upload--add-files,
|
|
.bulk-upload--file-manager {
|
|
color: var(--anouma-ink);
|
|
}
|
|
|
|
.upload,
|
|
.file-field,
|
|
.bulk-upload--add-files,
|
|
.bulk-upload--file-manager,
|
|
.file-field__filename,
|
|
.file-field__remote-file,
|
|
.upload-field-card {
|
|
background: var(--anouma-paper);
|
|
border-color: var(--anouma-line);
|
|
}
|
|
|
|
.upload__dragAndDropText,
|
|
.upload__orText,
|
|
.bulk-upload--add-files__dragAndDropText,
|
|
.file-field__filename,
|
|
.file-field__remote-file,
|
|
.upload-field-card__filename,
|
|
.upload-field-card__meta {
|
|
color: var(--anouma-plum);
|
|
}
|
|
|
|
.upload a,
|
|
.upload button,
|
|
.file-field button,
|
|
.bulk-upload--add-files button,
|
|
.bulk-upload--file-manager button {
|
|
color: var(--anouma-ink);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.collections {
|
|
color: var(--anouma-ink);
|
|
}
|
|
|
|
.collections__group {
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.collections__label {
|
|
color: var(--anouma-ink) !important;
|
|
font-size: 20px;
|
|
font-weight: 650;
|
|
letter-spacing: -0.015em;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.collections__card-list {
|
|
gap: 10px;
|
|
}
|
|
|
|
.collections .card {
|
|
background: var(--anouma-paper) !important;
|
|
border: 1px solid var(--anouma-line);
|
|
border-radius: 5px;
|
|
box-shadow: 0 8px 22px rgb(52 44 49 / 5%);
|
|
color: var(--anouma-ink) !important;
|
|
min-height: 64px;
|
|
}
|
|
|
|
.collections .card:hover {
|
|
border-color: var(--anouma-mauve);
|
|
}
|
|
|
|
.collections .card__title {
|
|
color: var(--anouma-ink) !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.collections .card__actions .btn {
|
|
color: var(--anouma-mauve);
|
|
}
|
|
|
|
textarea::placeholder,
|
|
input::placeholder {
|
|
color: #8b7b81;
|
|
opacity: 1;
|
|
}
|
|
|
|
.anouma-admin-back {
|
|
align-items: center;
|
|
border: 1px solid var(--anouma-line);
|
|
border-radius: 4px;
|
|
color: var(--anouma-plum);
|
|
display: inline-flex;
|
|
font-size: 13px;
|
|
font-weight: 650;
|
|
padding: 8px 12px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.anouma-admin-back:hover,
|
|
.anouma-admin-back:focus-visible {
|
|
background: var(--anouma-paper);
|
|
border-color: var(--anouma-mauve);
|
|
color: var(--anouma-ink);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|