/* 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); } /* * 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: emerald family centered on #11CD86 */ /* Unfold uses these vars as raw colors (e.g. `background-color: var(--color-primary-600)`). */ --color-primary-50: rgb(236, 253, 245); --color-primary-100: rgb(209, 250, 229); --color-primary-200: rgb(167, 243, 208); --color-primary-300: rgb(110, 231, 183); --color-primary-400: rgb(52, 211, 153); --color-primary-500: rgb(17, 205, 134); /* #11CD86 */ --color-primary-600: rgb(5, 150, 105); --color-primary-700: rgb(4, 120, 87); --color-primary-800: rgb(6, 95, 70); --color-primary-900: rgb(6, 78, 59); --color-primary-950: rgb(2, 44, 34); } @media (prefers-color-scheme: dark) { :root:not([data-theme]), :root[data-theme="auto"] { --color-primary-50: rgb(236, 253, 245); --color-primary-100: rgb(209, 250, 229); --color-primary-200: rgb(167, 243, 208); --color-primary-300: rgb(110, 231, 183); --color-primary-400: rgb(52, 211, 153); --color-primary-500: rgb(17, 205, 134); --color-primary-600: rgb(5, 150, 105); --color-primary-700: rgb(4, 120, 87); --color-primary-800: rgb(6, 95, 70); --color-primary-900: rgb(6, 78, 59); --color-primary-950: rgb(2, 44, 34); } } #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; } /* 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); } :root.dark .bg-primary-600\/10, :root[data-theme="dark"] .bg-primary-600\/10 { background-color: rgba(5, 150, 105, 0.1); } @supports (color: color-mix(in srgb, red, transparent)) { .bg-primary-600\/10, :root.dark .bg-primary-600\/10, :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 */ :root.dark .dark\:bg-green-500\/20 { background-color: rgba(34, 197, 94, 0.2); } :root.dark .dark\:bg-red-500\/20 { background-color: rgba(239, 68, 68, 0.2); } /* Dark mode text colors for semantic badges */ :root.dark .dark\:text-green-400 { color: rgb(74, 222, 128); } :root.dark .dark\:text-red-400 { color: rgb(248, 113, 113); } /* Dark mode hover border colors */ :root.dark .dark\:hover\:border-primary-500\/50:hover { border-color: rgba(17, 205, 134, 0.5); } @supports (color: color-mix(in srgb, red, transparent)) { :root.dark .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); } /* Fix for dashboard row hover in dark mode */ :root.dark .product-item:hover, :root.dark .recipe-item:hover, :root.dark .feedback-item:hover { background-color: rgba(255, 255, 255, 0.02); }