543 lines
11 KiB
CSS
543 lines
11 KiB
CSS
:root {
|
|
--font-family-primary: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
--font-family-monospace: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
|
|
--survey-radius: 8px;
|
|
}
|
|
|
|
:root,
|
|
html[data-theme="light"] {
|
|
color-scheme: light;
|
|
--primary: #0f766e;
|
|
--secondary: #2563eb;
|
|
--accent: #0f766e;
|
|
--primary-fg: #ffffff;
|
|
|
|
--body-bg: #f4f7fb;
|
|
--body-fg: #172033;
|
|
--body-quiet-color: #64748b;
|
|
--body-medium-color: #475569;
|
|
--body-loud-color: #0f172a;
|
|
|
|
--header-bg: #102033;
|
|
--header-color: #ffffff;
|
|
--header-branding-color: #ffffff;
|
|
--header-link-color: #dbeafe;
|
|
|
|
--breadcrumbs-bg: #172a3f;
|
|
--breadcrumbs-fg: #dbeafe;
|
|
--breadcrumbs-link-fg: #ffffff;
|
|
|
|
--link-fg: #0f766e;
|
|
--link-hover-color: #2563eb;
|
|
--link-selected-fg: #0f766e;
|
|
|
|
--hairline-color: #e2e8f0;
|
|
--border-color: #cbd5e1;
|
|
--darkened-bg: #eef3f8;
|
|
--selected-bg: #e2f5f2;
|
|
--selected-row: #ecfdf5;
|
|
|
|
--button-fg: #ffffff;
|
|
--button-bg: #0f766e;
|
|
--button-hover-bg: #115e59;
|
|
--default-button-bg: #2563eb;
|
|
--default-button-hover-bg: #1d4ed8;
|
|
--close-button-bg: #475569;
|
|
--close-button-hover-bg: #334155;
|
|
--delete-button-bg: #dc2626;
|
|
--delete-button-hover-bg: #b91c1c;
|
|
--object-tools-fg: #ffffff;
|
|
--object-tools-bg: #0f766e;
|
|
--object-tools-hover-bg: #115e59;
|
|
|
|
--message-success-bg: #dcfce7;
|
|
--message-warning-bg: #fef3c7;
|
|
--message-error-bg: #fee2e2;
|
|
--error-fg: #b91c1c;
|
|
|
|
--survey-surface: #ffffff;
|
|
--survey-surface-muted: #f8fafc;
|
|
--survey-input-bg: #ffffff;
|
|
--survey-input-border: #cbd5e1;
|
|
--survey-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
|
|
--survey-focus: rgba(37, 99, 235, 0.18);
|
|
}
|
|
|
|
html[data-theme="dark"] {
|
|
color-scheme: dark;
|
|
--primary: #0f766e;
|
|
--secondary: #3b82f6;
|
|
--accent: #2dd4bf;
|
|
--primary-fg: #f8fafc;
|
|
|
|
--body-bg: #0b1020;
|
|
--body-fg: #e5edf7;
|
|
--body-quiet-color: #9aa8ba;
|
|
--body-medium-color: #cbd5e1;
|
|
--body-loud-color: #ffffff;
|
|
|
|
--header-bg: #0b1020;
|
|
--header-color: #f8fafc;
|
|
--header-branding-color: #ffffff;
|
|
--header-link-color: #cbd5e1;
|
|
|
|
--breadcrumbs-bg: #111827;
|
|
--breadcrumbs-fg: #cbd5e1;
|
|
--breadcrumbs-link-fg: #ffffff;
|
|
|
|
--link-fg: #5eead4;
|
|
--link-hover-color: #93c5fd;
|
|
--link-selected-fg: #7dd3fc;
|
|
|
|
--hairline-color: #243044;
|
|
--border-color: #334155;
|
|
--darkened-bg: #111827;
|
|
--selected-bg: #172033;
|
|
--selected-row: #12342f;
|
|
|
|
--button-fg: #ffffff;
|
|
--button-bg: #0f766e;
|
|
--button-hover-bg: #0d9488;
|
|
--default-button-bg: #2563eb;
|
|
--default-button-hover-bg: #1d4ed8;
|
|
--close-button-bg: #334155;
|
|
--close-button-hover-bg: #475569;
|
|
--delete-button-bg: #dc2626;
|
|
--delete-button-hover-bg: #b91c1c;
|
|
--object-tools-fg: #ffffff;
|
|
--object-tools-bg: #0f766e;
|
|
--object-tools-hover-bg: #0d9488;
|
|
|
|
--message-success-bg: #064e3b;
|
|
--message-warning-bg: #78350f;
|
|
--message-error-bg: #7f1d1d;
|
|
--error-fg: #fca5a5;
|
|
|
|
--survey-surface: #111827;
|
|
--survey-surface-muted: #0f172a;
|
|
--survey-input-bg: #0b1220;
|
|
--survey-input-border: #475569;
|
|
--survey-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
|
|
--survey-focus: rgba(59, 130, 246, 0.28);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme="light"]),
|
|
html[data-theme="auto"] {
|
|
color-scheme: dark;
|
|
--primary: #0f766e;
|
|
--secondary: #3b82f6;
|
|
--accent: #2dd4bf;
|
|
--primary-fg: #f8fafc;
|
|
--body-bg: #0b1020;
|
|
--body-fg: #e5edf7;
|
|
--body-quiet-color: #9aa8ba;
|
|
--body-medium-color: #cbd5e1;
|
|
--body-loud-color: #ffffff;
|
|
--header-bg: #0b1020;
|
|
--header-color: #f8fafc;
|
|
--header-branding-color: #ffffff;
|
|
--header-link-color: #cbd5e1;
|
|
--breadcrumbs-bg: #111827;
|
|
--breadcrumbs-fg: #cbd5e1;
|
|
--breadcrumbs-link-fg: #ffffff;
|
|
--link-fg: #5eead4;
|
|
--link-hover-color: #93c5fd;
|
|
--link-selected-fg: #7dd3fc;
|
|
--hairline-color: #243044;
|
|
--border-color: #334155;
|
|
--darkened-bg: #111827;
|
|
--selected-bg: #172033;
|
|
--selected-row: #12342f;
|
|
--button-fg: #ffffff;
|
|
--button-bg: #0f766e;
|
|
--button-hover-bg: #0d9488;
|
|
--default-button-bg: #2563eb;
|
|
--default-button-hover-bg: #1d4ed8;
|
|
--close-button-bg: #334155;
|
|
--close-button-hover-bg: #475569;
|
|
--delete-button-bg: #dc2626;
|
|
--delete-button-hover-bg: #b91c1c;
|
|
--object-tools-fg: #ffffff;
|
|
--object-tools-bg: #0f766e;
|
|
--object-tools-hover-bg: #0d9488;
|
|
--message-success-bg: #064e3b;
|
|
--message-warning-bg: #78350f;
|
|
--message-error-bg: #7f1d1d;
|
|
--error-fg: #fca5a5;
|
|
--survey-surface: #111827;
|
|
--survey-surface-muted: #0f172a;
|
|
--survey-input-bg: #0b1220;
|
|
--survey-input-border: #475569;
|
|
--survey-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
|
|
--survey-focus: rgba(59, 130, 246, 0.28);
|
|
}
|
|
}
|
|
|
|
html,
|
|
body {
|
|
background: var(--body-bg);
|
|
}
|
|
|
|
body {
|
|
color: var(--body-fg);
|
|
font-family: var(--font-family-primary);
|
|
}
|
|
|
|
#container,
|
|
.main {
|
|
background: var(--body-bg);
|
|
}
|
|
|
|
#header {
|
|
background: var(--header-bg);
|
|
border-bottom: 1px solid var(--border-color);
|
|
box-shadow: none;
|
|
min-height: 64px;
|
|
}
|
|
|
|
#branding h1,
|
|
#branding h1 a:link,
|
|
#branding h1 a:visited,
|
|
#site-name,
|
|
#site-name a:link,
|
|
#site-name a:visited {
|
|
color: var(--header-branding-color);
|
|
font-weight: 800;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
#user-tools,
|
|
#user-tools a,
|
|
#logout-form button {
|
|
color: var(--header-link-color);
|
|
}
|
|
|
|
div.breadcrumbs {
|
|
background: var(--breadcrumbs-bg);
|
|
border: 0;
|
|
color: var(--breadcrumbs-fg);
|
|
}
|
|
|
|
div.breadcrumbs a {
|
|
color: var(--breadcrumbs-link-fg);
|
|
}
|
|
|
|
#content {
|
|
padding: 28px;
|
|
}
|
|
|
|
.module,
|
|
.inline-group,
|
|
.submit-row,
|
|
#changelist,
|
|
.paginator,
|
|
fieldset.module.aligned,
|
|
#content-related,
|
|
#changelist-filter {
|
|
background: var(--survey-surface);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--survey-radius);
|
|
box-shadow: var(--survey-shadow);
|
|
color: var(--body-fg);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.module h2,
|
|
.module caption,
|
|
.inline-group h2,
|
|
#changelist-filter h2 {
|
|
background: var(--survey-surface-muted);
|
|
border-bottom: 1px solid var(--hairline-color);
|
|
color: var(--body-loud-color);
|
|
font-size: 0.86rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0;
|
|
line-height: 1.35;
|
|
text-transform: none;
|
|
}
|
|
|
|
.module table,
|
|
#changelist table {
|
|
background: var(--survey-surface);
|
|
}
|
|
|
|
table thead th,
|
|
thead th,
|
|
tfoot td {
|
|
background: var(--survey-surface-muted);
|
|
border-bottom: 1px solid var(--hairline-color);
|
|
color: var(--body-medium-color);
|
|
}
|
|
|
|
td,
|
|
th {
|
|
border-bottom-color: var(--hairline-color);
|
|
}
|
|
|
|
tr.row1,
|
|
tbody tr {
|
|
background: var(--survey-surface);
|
|
}
|
|
|
|
tr.row2,
|
|
tbody tr:nth-child(even) {
|
|
background: var(--survey-surface-muted);
|
|
}
|
|
|
|
tbody tr:hover,
|
|
tbody tr:focus-within {
|
|
background: var(--selected-row);
|
|
}
|
|
|
|
.form-row,
|
|
.aligned .form-row {
|
|
border-bottom-color: var(--hairline-color);
|
|
padding: 14px 12px;
|
|
}
|
|
|
|
label,
|
|
.aligned label,
|
|
.required label,
|
|
td,
|
|
th,
|
|
.module p,
|
|
.module ul,
|
|
.module ol {
|
|
color: var(--body-fg);
|
|
}
|
|
|
|
.help,
|
|
p.help,
|
|
form p.help,
|
|
div.help,
|
|
form div.help,
|
|
div.help li,
|
|
.quiet,
|
|
.small,
|
|
.mini,
|
|
.helptext,
|
|
.datetime span,
|
|
.timezonewarning,
|
|
.deletelink-box {
|
|
color: var(--body-quiet-color);
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="email"],
|
|
input[type="number"],
|
|
input[type="password"],
|
|
input[type="url"],
|
|
input[type="search"],
|
|
input[type="tel"],
|
|
textarea,
|
|
select,
|
|
.vTextField,
|
|
.vURLField,
|
|
.vIntegerField,
|
|
.vBigIntegerField,
|
|
.vForeignKeyRawIdAdminField,
|
|
.vDateField,
|
|
.vTimeField {
|
|
background: var(--survey-input-bg);
|
|
border: 1px solid var(--survey-input-border);
|
|
border-radius: 6px;
|
|
box-shadow: none;
|
|
color: var(--body-fg);
|
|
min-height: 36px;
|
|
}
|
|
|
|
input[type="checkbox"],
|
|
input[type="radio"] {
|
|
accent-color: var(--accent);
|
|
}
|
|
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
border-color: var(--secondary);
|
|
box-shadow: 0 0 0 3px var(--survey-focus);
|
|
outline: none;
|
|
}
|
|
|
|
select option {
|
|
background: var(--survey-input-bg);
|
|
color: var(--body-fg);
|
|
}
|
|
|
|
.button,
|
|
input[type="submit"],
|
|
input[type="button"],
|
|
.submit-row input,
|
|
a.button {
|
|
border-radius: 6px;
|
|
font-weight: 750;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
input[type="submit"],
|
|
input[type="button"],
|
|
.submit-row input.default,
|
|
.button.default {
|
|
background: var(--default-button-bg);
|
|
color: var(--button-fg);
|
|
}
|
|
|
|
input[type="submit"]:hover,
|
|
input[type="button"]:hover,
|
|
.submit-row input.default:hover,
|
|
.button.default:hover {
|
|
background: var(--default-button-hover-bg);
|
|
}
|
|
|
|
.object-tools a,
|
|
.object-tools a:link,
|
|
.object-tools a:visited {
|
|
background: var(--object-tools-bg);
|
|
border-radius: 6px;
|
|
color: var(--object-tools-fg);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.object-tools a:hover {
|
|
background: var(--object-tools-hover-bg);
|
|
color: var(--object-tools-fg);
|
|
}
|
|
|
|
.submit-row {
|
|
background: var(--survey-surface-muted);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
.submit-row a.deletelink,
|
|
.submit-row a.deletelink:link,
|
|
.submit-row a.deletelink:visited {
|
|
background: var(--delete-button-bg);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.submit-row a.deletelink:hover {
|
|
background: var(--delete-button-hover-bg);
|
|
}
|
|
|
|
#changelist-filter {
|
|
border-left: 1px solid var(--border-color);
|
|
}
|
|
|
|
#changelist-filter a,
|
|
#changelist-filter details > summary {
|
|
color: var(--body-medium-color);
|
|
}
|
|
|
|
#changelist-filter li.selected a,
|
|
#changelist-filter a:hover {
|
|
color: var(--link-fg);
|
|
}
|
|
|
|
#toolbar,
|
|
#changelist-search,
|
|
#changelist .actions {
|
|
background: var(--survey-surface-muted);
|
|
border-color: var(--hairline-color);
|
|
}
|
|
|
|
.paginator {
|
|
color: var(--body-medium-color);
|
|
}
|
|
|
|
.messagelist li {
|
|
border-radius: var(--survey-radius);
|
|
box-shadow: var(--survey-shadow);
|
|
color: var(--body-loud-color);
|
|
}
|
|
|
|
ul.messagelist li.success {
|
|
background-color: var(--message-success-bg);
|
|
}
|
|
|
|
ul.messagelist li.warning {
|
|
background-color: var(--message-warning-bg);
|
|
}
|
|
|
|
ul.messagelist li.error {
|
|
background-color: var(--message-error-bg);
|
|
}
|
|
|
|
.selector,
|
|
.selector-available,
|
|
.selector-chosen,
|
|
.selector-available h2,
|
|
.selector-chosen h2,
|
|
.calendarbox,
|
|
.clockbox,
|
|
.related-widget-wrapper-link,
|
|
.datetimeshortcuts a {
|
|
background: var(--survey-surface);
|
|
border-color: var(--border-color);
|
|
color: var(--body-fg);
|
|
}
|
|
|
|
.calendar td,
|
|
.calendar th,
|
|
.calendar caption,
|
|
.clockbox h2 {
|
|
background: var(--survey-surface);
|
|
color: var(--body-fg);
|
|
}
|
|
|
|
.calendar td.selected a,
|
|
.calendar td a:hover {
|
|
background: var(--selected-row);
|
|
}
|
|
|
|
body.login {
|
|
background: var(--body-bg);
|
|
}
|
|
|
|
body.login #container {
|
|
background: var(--body-bg);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
body.login #content {
|
|
background: var(--survey-surface);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--survey-radius);
|
|
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
|
|
margin-top: 48px;
|
|
padding: 28px;
|
|
}
|
|
|
|
body.login #content-main,
|
|
body.login form,
|
|
body.login .form-row {
|
|
background: transparent;
|
|
}
|
|
|
|
body.login .form-row {
|
|
border-bottom: 0;
|
|
padding: 0 0 18px;
|
|
}
|
|
|
|
body.login .submit-row {
|
|
background: transparent;
|
|
border: 0;
|
|
margin: 8px 0 0;
|
|
padding: 0;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
#content {
|
|
padding: 18px 12px;
|
|
}
|
|
|
|
.module,
|
|
.inline-group,
|
|
.submit-row,
|
|
#changelist,
|
|
#content-related,
|
|
#changelist-filter {
|
|
border-radius: 6px;
|
|
}
|
|
}
|