Implement avatar rendering logic: add custom tags, template, and styles; update base.html integration and revamp member filter and list designs.

theme/static_src/src/styles.css

@@ -5,7 +5,42 @@
 
 @import "tailwindcss";
 
-@plugin "daisyui";
+@plugin "daisyui" {
+}
+
+@plugin "daisyui/theme" {
+    name: "light";
+    default: true;
+    prefersdark: true;
+    --color-base-100: oklch(100% 0 0);
+    --color-base-200: oklch(98% 0 0);
+    --color-base-300: oklch(95% 0 0);
+    --color-base-content: oklch(21% 0.006 285.885);
+    --color-primary: oklch(45% 0.24 277.023);
+    --color-primary-content: oklch(93% 0.034 272.788);
+    --color-secondary: oklch(65% 0.241 354.308);
+    --color-secondary-content: oklch(94% 0.028 342.258);
+    --color-accent: oklch(77% 0.152 181.912);
+    --color-accent-content: oklch(38% 0.063 188.416);
+    --color-neutral: oklch(14% 0.005 285.823);
+    --color-neutral-content: oklch(92% 0.004 286.32);
+    --color-info: oklch(74% 0.16 232.661);
+    --color-info-content: oklch(29% 0.066 243.157);
+    --color-success: oklch(76% 0.177 163.223);
+    --color-success-content: oklch(37% 0.077 168.94);
+    --color-warning: oklch(82% 0.189 84.429);
+    --color-warning-content: oklch(41% 0.112 45.904);
+    --color-error: oklch(71% 0.194 13.428);
+    --color-error-content: oklch(27% 0.105 12.094);
+    --radius-selector: 0.5rem;
+    --radius-field: 0.5rem;
+    --radius-box: 0.5rem;
+    --size-selector: 0.25rem;
+    --size-field: 0.25rem;
+    --border: 1px;
+    --depth: 0;
+    --noise: 0;
+}
 
 /**
   * A catch-all path to Django template files, JavaScript, and Python files
@@ -21,57 +56,45 @@
     --font-sans: Open Sans, Noto Sans, Barlow Semi Condensed, Ubuntu, Fira Sans, Catamaran, Cabin, Roboto, sans-serif;
 }
 
-@layer utilities {
+@source inline("input-{xs,sm,md,lg,xl}");
 
+@layer components {
+    h1.page-title {
+        @apply text-3xl font-bold;
+        @apply mb-12;
 
-    /*.navbar-small {
+        & > svg {
+            @apply mr-2;
+        }
     }
 
-    .navbar-small > div {
-        @apply py-2;
+    div.action_bar {
+        @apply flex flex-col lg:flex-row;
+        @apply items-center;
+
+        & > .filter {
+            @apply grow w-full;
+        }
+
+        & > .filter > form {
+            @apply flex flex-col lg:flex-row gap-2;
+            @apply items-end;
+            @apply w-full;
+        }
+
+        & > .filter > form > div > button {
+            @apply btn btn-outline btn-xs;
+            @apply grow;
+        }
+
+        & > .add {
+            @apply my-6 lg:my-0;
+            @apply w-full lg:w-fit shrink-0;
+            @apply flex flex-row flex-wrap gap-2;
+        }
+
+        & > .add > a {
+            @apply min-w-fit lg:w-fit;
+        }
     }
-
-    .navbar-small h1 {
-        @apply text-lg;
-    }
-
-    .navbar-small > div img {
-        @apply max-h-8;
-    }
-
-    .navbar-small nav {
-        @apply text-base;
-    }
-
-    .navbar-small nav div.avatar > div {
-        @apply w-6;
-        @apply text-xs;
-    }*/
-
-/*    #sidebar {
-        @apply flex flex-row gap-4 lg:flex-col;
-        @apply lg:min-w-64;
-        @apply mx-auto lg:mx-0;
-    }
-
-    !* Each section is a group, stacked title + items *!
-    #sidebar > div.section {
-        @apply flex flex-col gap-2;
-    }
-
-    !* Title stays simple, click/hover target *!
-    #sidebar > div.section > div.section-title {
-        @apply cursor-pointer;
-    }
-
-    !* Items: - small: hidden by default, show on hover - large: flex as in your original design *!
-    #sidebar > div.section > div.section-items {
-        @apply hidden group-hover:flex flex-col gap-2;
-        @apply bg-red-600;
-        @apply lg:flex;
-    }
-
-    #sidebar > div.section.open > div.section-items {
-        @apply flex;
-    }*/
 }