Improve CMS media uploads and admin styling
This commit is contained in:
+128
-9
@@ -18,6 +18,36 @@
|
||||
--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);
|
||||
@@ -33,6 +63,18 @@ 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);
|
||||
@@ -138,13 +180,56 @@ select {
|
||||
|
||||
.dashboard__header h1,
|
||||
.collection-list__header h1,
|
||||
.edit-view__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,
|
||||
@@ -167,6 +252,7 @@ select {
|
||||
}
|
||||
|
||||
.btn--style-primary {
|
||||
--color: #fff;
|
||||
--bg-color: var(--anouma-mauve);
|
||||
--hover-bg: var(--anouma-plum);
|
||||
}
|
||||
@@ -175,8 +261,10 @@ input,
|
||||
textarea,
|
||||
select,
|
||||
.rs__control {
|
||||
background: var(--anouma-paper) !important;
|
||||
border-color: #d7c9c1;
|
||||
border-radius: 4px;
|
||||
color: var(--anouma-ink) !important;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
@@ -198,6 +286,45 @@ select:focus,
|
||||
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;
|
||||
@@ -253,14 +380,6 @@ select:focus,
|
||||
color: var(--anouma-mauve);
|
||||
}
|
||||
|
||||
textarea,
|
||||
input,
|
||||
select,
|
||||
.rs__control {
|
||||
background: var(--anouma-paper) !important;
|
||||
color: var(--anouma-ink) !important;
|
||||
}
|
||||
|
||||
textarea::placeholder,
|
||||
input::placeholder {
|
||||
color: #8b7b81;
|
||||
|
||||
Reference in New Issue
Block a user