/* Cooklist Unfold Admin overrides * Precision Evergreen token layer: fonts, radii, motion, and dark-mode primary override. */ /* Fonts */ @import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;700&family=DM+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap"); :root { /* Typography */ --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif; --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Ensure Unfold/Tailwind uses our families */ --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); /* Precision Evergreen radius scale */ --radius-xs: 4px; /* rounded-xs */ --border-radius: 6px; /* rounded-default */ --radius-md: 10px; /* rounded-md */ /* Motion */ --ease-snap: cubic-bezier(0.16, 1, 0.3, 1); --ease-smooth: cubic-bezier(0.23, 1, 0.32, 1); --default-transition-timing-function: var(--ease-snap); --ease-in-out: var(--ease-snap); /* Dark-mode shared tokens (single source for explicit dark + auto dark). */ --admin-dark-primary-600-tint: rgba(45, 78, 63, 0.1); --admin-dark-success-bg: rgba(61, 114, 87, 0.28); --admin-dark-danger-bg: rgba(239, 68, 68, 0.2); --admin-dark-danger-text: rgb(248, 113, 113); --admin-dark-text-default: var(--color-font-default-dark); --admin-dark-text-important: var(--color-font-important-dark); --admin-dark-hover-border-primary: rgba(60, 102, 82, 0.5); --admin-dark-row-hover-bg: rgba(255, 255, 255, 0.02); /* Changelist action checkbox tokens. */ --admin-checkbox-neutral: rgb(107, 114, 128); --admin-checkbox-neutral-hover: rgb(75, 85, 99); --admin-checkbox-checkmark: rgb(241, 245, 249); --admin-checkbox-focus: rgb(148, 163, 184); } /* * Unfold uses the `.dark` class on `` (i.e. :root.dark) for dark mode. * Standard Django admin uses `data-theme="dark"` on :root. */ :root.dark, :root[data-theme="dark"] { /* Dark mode primary: restrained evergreen accents for black-led surfaces */ /* Unfold uses these vars as raw colors (e.g. `background-color: var(--color-primary-600)`). */ --color-primary-50: rgb(233, 242, 238); --color-primary-100: rgb(209, 224, 216); --color-primary-200: rgb(169, 195, 182); --color-primary-300: rgb(130, 164, 148); --color-primary-400: rgb(93, 132, 114); --color-primary-500: rgb(60, 102, 82); --color-primary-600: rgb(45, 78, 63); --color-primary-700: rgb(34, 60, 48); --color-primary-800: rgb(25, 46, 36); --color-primary-900: rgb(18, 34, 26); --color-primary-950: rgb(11, 20, 15); } @media (prefers-color-scheme: dark) { :root:not([data-theme]), :root[data-theme="auto"] { --color-primary-50: rgb(233, 242, 238); --color-primary-100: rgb(209, 224, 216); --color-primary-200: rgb(169, 195, 182); --color-primary-300: rgb(130, 164, 148); --color-primary-400: rgb(93, 132, 114); --color-primary-500: rgb(60, 102, 82); --color-primary-600: rgb(45, 78, 63); --color-primary-700: rgb(34, 60, 48); --color-primary-800: rgb(25, 46, 36); --color-primary-900: rgb(18, 34, 26); --color-primary-950: rgb(11, 20, 15); } } /* Use neutral gray for changelist action checkboxes instead of primary green. */ :is(input[type="checkbox"].action-toggle, input[type="checkbox"].action-select, input[type="checkbox"][name="_selected_action"]) { border-color: var(--admin-checkbox-neutral) !important; } :is(input[type="checkbox"].action-toggle, input[type="checkbox"].action-select, input[type="checkbox"][name="_selected_action"]):checked { background-color: var(--admin-checkbox-neutral) !important; border-color: var(--admin-checkbox-neutral) !important; color: var(--admin-checkbox-checkmark) !important; } :is(input[type="checkbox"].action-toggle, input[type="checkbox"].action-select, input[type="checkbox"][name="_selected_action"]):checked:hover { border-color: var(--admin-checkbox-neutral-hover) !important; background-color: var(--admin-checkbox-neutral-hover) !important; } :is(input[type="checkbox"].action-toggle, input[type="checkbox"].action-select, input[type="checkbox"][name="_selected_action"]):checked::after { color: var(--admin-checkbox-checkmark) !important; } :is(input[type="checkbox"].action-toggle, input[type="checkbox"].action-select, input[type="checkbox"][name="_selected_action"]):focus { outline-color: var(--admin-checkbox-focus) !important; } #result_list { font-size: 13px; } .field-product_category { min-width: 400px; } /* Vertically center collapsed fieldset headers */ fieldset.collapse h2, fieldset.module.collapse h2, details summary h2, .inline-group h2 { display: flex; align-items: center; min-height: 44px; } :root[data-theme="light"] .inline-group h2.bg-base-100, :root[data-theme="light"] fieldset.collapse h2.bg-base-100, :root[data-theme="light"] fieldset.module.collapse h2.bg-base-100, :root[data-theme="light"] details:not([open]) summary h2.bg-base-100 { background-color: var(--ctp-context-bg, var(--color-base-200, #f7f7f4)); border-color: var(--ctp-context-detail-border, var(--color-base-300, #d5e1da)); } @media (prefers-color-scheme: light) { :root[data-theme="auto"]:not(.dark) .inline-group h2.bg-base-100, :root[data-theme="auto"]:not(.dark) fieldset.collapse h2.bg-base-100, :root[data-theme="auto"]:not(.dark) fieldset.module.collapse h2.bg-base-100, :root[data-theme="auto"]:not(.dark) details:not([open]) summary h2.bg-base-100, :root:not([data-theme]):not(.dark) .inline-group h2.bg-base-100, :root:not([data-theme]):not(.dark) fieldset.collapse h2.bg-base-100, :root:not([data-theme]):not(.dark) fieldset.module.collapse h2.bg-base-100, :root:not([data-theme]):not(.dark) details:not([open]) summary h2.bg-base-100 { background-color: var(--ctp-context-bg, var(--color-base-200, #f7f7f4)); border-color: var(--ctp-context-detail-border, var(--color-base-300, #d5e1da)); } } /* Make pagination links show pointer cursor */ .paginator a, .paginator span.this-page, nav[aria-label="Pagination"] a, nav[aria-label="Pagination"] button { cursor: pointer; } /* Fix object-tools button spacing and alignment */ .object-tools { display: flex; align-items: center; gap: 8px; } .object-tools li { list-style: none; margin: 0; } /* Tailwind utility classes for dashboard */ /* Font weight utilities */ .font-extrabold { font-weight: 800; } /* Sizing utilities */ .w-2\.5 { width: 0.625rem; /* 10px */ } .h-2\.5 { height: 0.625rem; /* 10px */ } .w-3 { width: 0.75rem; /* 12px */ } .h-3 { height: 0.75rem; /* 12px */ } /* Spacing utilities */ .px-1\.5 { padding-left: 0.375rem; /* 6px */ padding-right: 0.375rem; /* 6px */ } .py-0\.5 { padding-top: 0.125rem; /* 2px */ padding-bottom: 0.125rem; /* 2px */ } .mt-1\.5 { margin-top: 0.375rem; /* 6px */ } /* Background colors */ .bg-green-500 { background-color: rgb(34, 197, 94); } .bg-red-500 { background-color: rgb(239, 68, 68); } /* Background with opacity */ .bg-primary-600\/10 { /* Fallback without `color-mix` support */ background-color: rgba(21, 61, 45, 0.1); } :is(:root.dark, :root[data-theme="dark"]) .bg-primary-600\/10 { background-color: var(--admin-dark-primary-600-tint); } @supports (color: color-mix(in srgb, red, transparent)) { .bg-primary-600\/10, :is(:root.dark, :root[data-theme="dark"]) .bg-primary-600\/10 { background-color: color-mix(in srgb, var(--color-primary-600) 10%, transparent); } } /* Dark mode background colors for semantic badges */ :is(:root.dark, :root[data-theme="dark"]) .dark\:bg-green-500\/20 { background-color: var(--admin-dark-success-bg); } :is(:root.dark, :root[data-theme="dark"]) .dark\:bg-red-500\/20 { background-color: var(--admin-dark-danger-bg); } /* Dark mode text colors for semantic badges */ :is(:root.dark, :root[data-theme="dark"]) .dark\:text-green-400 { color: var(--admin-dark-text-default); } :is(:root.dark, :root[data-theme="dark"]) .dark\:text-red-400 { color: var(--admin-dark-danger-text); } /* * Light mode text policy: * ensure text-primary-* classes resolve to a visible dark evergreen. */ :root:not(.dark):not([data-theme="dark"]) :is( [class^="text-primary-"], [class*=" text-primary-"] ) { color: var(--color-font-important-light, #0F291E); } /* * Dark mode text policy: * keep readable text in white/grey, reserving evergreen for non-text accents. */ :is(:root.dark, :root[data-theme="dark"]) :is( [class^="text-primary-"], [class*=" text-primary-"], [class^="dark:text-primary-"], [class*=" dark:text-primary-"], [class^="dark:text-green-"], [class*=" dark:text-green-"] ) { color: var(--admin-dark-text-default); } :is(:root.dark, :root[data-theme="dark"]) :is( [class^="dark:hover:text-primary-"]:hover, [class*=" dark:hover:text-primary-"]:hover ) { color: var(--admin-dark-text-important); } /* Dark mode hover border colors */ :is(:root.dark, :root[data-theme="dark"]) .dark\:hover\:border-primary-500\/50:hover { border-color: var(--admin-dark-hover-border-primary); } @supports (color: color-mix(in srgb, red, transparent)) { :is(:root.dark, :root[data-theme="dark"]) .dark\:hover\:border-primary-500\/50:hover { border-color: color-mix(in srgb, var(--color-primary-500) 50%, transparent); } } @media (prefers-color-scheme: dark) { :is(:root:not([data-theme]), :root[data-theme="auto"]) .dark\:bg-green-500\/20 { background-color: var(--admin-dark-success-bg); } :is(:root:not([data-theme]), :root[data-theme="auto"]) .dark\:bg-red-500\/20 { background-color: var(--admin-dark-danger-bg); } :is(:root:not([data-theme]), :root[data-theme="auto"]) .dark\:text-green-400 { color: var(--admin-dark-text-default); } :is(:root:not([data-theme]), :root[data-theme="auto"]) .dark\:text-red-400 { color: var(--admin-dark-danger-text); } :is(:root:not([data-theme]), :root[data-theme="auto"]) :is( [class^="text-primary-"], [class*=" text-primary-"], [class^="dark:text-primary-"], [class*=" dark:text-primary-"], [class^="dark:text-green-"], [class*=" dark:text-green-"] ) { color: var(--admin-dark-text-default); } :is(:root:not([data-theme]), :root[data-theme="auto"]) :is( [class^="dark:hover:text-primary-"]:hover, [class*=" dark:hover:text-primary-"]:hover ) { color: var(--admin-dark-text-important); } :is(:root:not([data-theme]), :root[data-theme="auto"]) .dark\:hover\:border-primary-500\/50:hover { border-color: var(--admin-dark-hover-border-primary); } @supports (color: color-mix(in srgb, red, transparent)) { :is(:root:not([data-theme]), :root[data-theme="auto"]) .dark\:hover\:border-primary-500\/50:hover { border-color: color-mix(in srgb, var(--color-primary-500) 50%, transparent); } } } /* Border radius utilities */ .rounded-bl-full { border-bottom-left-radius: 9999px; } /* Ring utilities */ .ring-2 { box-shadow: 0 0 0 2px currentColor; } .ring-green-100 { --tw-ring-color: rgb(220, 252, 231); box-shadow: 0 0 0 2px var(--tw-ring-color); } .ring-green-900 { --tw-ring-color: rgb(20, 83, 45); box-shadow: 0 0 0 2px var(--tw-ring-color); } .ring-red-100 { --tw-ring-color: rgb(254, 226, 226); box-shadow: 0 0 0 2px var(--tw-ring-color); } .ring-red-900 { --tw-ring-color: rgb(127, 29, 29); box-shadow: 0 0 0 2px var(--tw-ring-color); } .ring-gray-100 { --tw-ring-color: rgb(243, 244, 246); box-shadow: 0 0 0 2px var(--tw-ring-color); } .ring-gray-800 { --tw-ring-color: rgb(31, 41, 55); box-shadow: 0 0 0 2px var(--tw-ring-color); } /* Make sidebar nav link hover text darker in light mode. * Unfold uses `hover:text-primary-600` which is too faint; override to important weight. */ :root:not(.dark):not([data-theme="dark"]) :is( [class*="hover\:text-primary-"]:hover ) { color: var(--color-font-important-light, #0F291E); } /* Fix for dashboard row hover in dark mode */ :is(:root.dark, :root[data-theme="dark"]) :is(.product-item:hover, .recipe-item:hover, .feedback-item:hover) { background-color: var(--admin-dark-row-hover-bg); } @media (prefers-color-scheme: dark) { :is(:root:not([data-theme]), :root[data-theme="auto"]) :is(.product-item:hover, .recipe-item:hover, .feedback-item:hover) { background-color: var(--admin-dark-row-hover-bg); } }