accrete 0.0.149__py3-none-any.whl → 0.0.151__py3-none-any.whl

accrete/contrib/ui/static/css/accrete.scss

@@ -1,34 +1,33 @@
-@import "../bulma/css/bulma.css";
+@import "../bulma/css/bulma.min.css";
 
 :root {
   --bulma-body-size: .9em;
   --bulma-navbar-height: 40px;
-  --bulma-menu-item-selected-h: --bulma-success-h;
-  --accrete-detail-width: 500px;
+  --bulma-menu-item-selected-h: var(--bulma-primary-h);
+  --accrete-detail-width: 35em;
+  --bulma-primary-h: 153.28deg;
+  --bulma-primary-s: 52.89%;
+  --bulma-primary-l: 52.55%;
   --accrete-action-panel-width: 320px;
-  --bulma-input-icon-focus-color: var(--bulma-success);
-  --bulma-input-arrow: var(--bulma-success);
-  --bulma-arrow-color: var(--bulma-success);
-  --bulma-menu-nested-list-margin: .5em 0 0.5em 0.75em;
-  --bulma-navbar-burger-color: var(--bulma-success);
+  --bulma-input-arrow: var(--bulma-primary);
+  --bulma-arrow-color: var(--bulma-primary);
   --accrete-hover-color: #F0F2F4;
-
 }
 
 html[data-theme='light'] {
-  --bulma-menu-item-h: var(--bulma-success-h);
-  --bulma-menu-item-s: var(--bulma-success-s);
-  --bulma-menu-item-l: var(--bulma-success-l);
-  --bulma-menu-item-background-l: 50%;
-  --bulma-menu-item-color-l: 10%;
-  --bulma-navbar-burger-color: var(--bulma-success);
-  --bulma-input-disabled-border-color: var(--bulma-input-border-color) !important;
-  --accrete-hover-color: #F0F2F4;
+  //--bulma-menu-item-h: var(--bulma-success-h);
+  //--bulma-menu-item-s: var(--bulma-success-s);
+  //--bulma-menu-item-l: var(--bulma-success-l);
+  //--bulma-menu-item-background-l: 50%;
+  //--bulma-menu-item-color-l: 10%;
+  //--bulma-navbar-burger-color: var(--bulma-success);
+  //--bulma-input-disabled-border-color: var(--bulma-input-border-color) !important;
+  //--accrete-hover-color: #F0F2F4;
 }
 
 html[data-theme='dark'] {
-  --bulma-navbar-burger-color: var(--bulma-success);
-  --bulma-input-disabled-border-color: var(--bulma-input-border-color) !important;
+  //--bulma-navbar-burger-color: var(--bulma-success);
+  //--bulma-input-disabled-border-color: var(--bulma-input-border-color) !important;
   --accrete-hover-color: #1E2128;
 
   .button.is-light {
@@ -78,21 +77,22 @@ a {
   border-left-color: transparent;
 }
 
-.input {
-  border-top: none;
-  border-right: none;
-  border-left: none;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-  box-shadow: none;
-  font-weight: bold;
-}
+//.input {
+//  border-top: none;
+//  border-right: none;
+//  border-left: none;
+//  border-top-left-radius: 0;
+//  border-top-right-radius: 0;
+//  border-bottom-right-radius: 0;
+//  border-bottom-left-radius: 0;
+//  box-shadow: none;
+//  //box-shadow: inset 0 -10px 10px -16px #000000;
+//  font-weight: bold;
+//}
 
 .input:focus, .input:focus-within {
   box-shadow: none;
-  border-bottom: 1px solid var(--bulma-success);
+  border: 1px solid var(--bulma-primary);
   //border-color: var(--bulma-success);
 }
 
@@ -110,7 +110,7 @@ textarea {
 }
 
 textarea:focus {
-    border-color: var(--bulma-success) !important;
+    border-color: var(--bulma-primary) !important;
 }
 
 .is-small.textarea, .is-small.input {
@@ -118,29 +118,52 @@ textarea:focus {
   font-size: var(--bulma-size-small);
 }
 
+td:first-child > .input {
+  //border-top-left-radius: var(--bulma-radius);
+  //border-bottom-left-radius: var(--bulma-radius);
+
+  //border-right: 0;
+  //border-top: none!important;
+  //border-right: none!important;
+  //border-bottom: none!important;
+  //border-left: none!important;
+}
+
+td:last-child > .input {
+  //border-top-right-radius: var(--bulma-radius);
+  //border-bottom-right-radius: var(--bulma-radius);
+
+  //border-right: 0;
+  //border-top: none!important;
+  //border-right: none!important;
+  //border-bottom: none!important;
+  //border-left: none!important;
+}
+
 td > .input, td * .input, td * select, td * .select {
-  border-top: none!important;
-  border-right: none!important;
-  border-bottom: none!important;
-  border-left: none!important;
+  //border-top: none!important;
+  //border-right: none!important;
+  //border-bottom: none!important;
+  //border-left: none!important;
+  border-radius: 0;
 }
 
 td:has(.input:focus) {
-  border-bottom: 1px solid var(--bulma-success)!important;
+  //border-bottom: 1px solid var(--bulma-primary)!important;
 }
 
 select {
-    border-top: transparent !important;
-    border-right: transparent !important;
-    border-left: transparent !important;
-    border-radius: 0 !important;
+    //border-top: transparent !important;
+    //border-right: transparent !important;
+    //border-left: transparent !important;
+    //border-radius: 0 !important;
     box-shadow: none !important;
-    font-weight: bold;
+    //font-weight: bold;
 }
 
 select:focus {
   box-shadow: none;
-  border-bottom: 1px solid var(--bulma-success)!important;
+  border: 1px solid var(--bulma-primary)!important;
 }
 
 #detail-container {
@@ -195,7 +218,7 @@ select:focus {
 }
 
 .list-entry > .box:hover, .box.selected {
-  box-shadow: 0 0 5px 2px var(--bulma-success);
+  box-shadow: 0 0 5px 2px var(--bulma-primary);
 }
 
 .helptext {
@@ -234,12 +257,12 @@ select:focus {
     border-top: 1px solid var(--bulma-grey-light);
   }
 
-  table.can-compact * tr.is-success {
-    background-color: var(--bulma-success);
+  table.can-compact * tr.is-primary {
+    background-color: var(--bulma-primary);
   }
 
-  table.can-compact * tr.is-success:hover {
-    background-color: var(--bulma-success)!important;
+  table.can-compact * tr.is-primary:hover {
+    background-color: var(--bulma-primary)!important;
   }
 
   table.can-compact > thead {
@@ -258,8 +281,6 @@ select:focus {
 @media screen and (min-width: 769px) {
   .modal-card {
     max-width: 100%;
-    //min-width: var(--bulma-modal-content-width);
-    //width: unset;
   }
 }
 
@@ -305,11 +326,11 @@ select:focus {
 }
 
 .menu-list a.is-active, .menu-list a.is-selected, .menu-list button.is-active, .menu-list button.is-selected, .menu-list .menu-item.is-active, .menu-list .menu-item.is-selected {
-  --bulma-menu-item-h: var(--bulma-success-h);
-  --bulma-menu-item-s: var(--bulma-success-s);
-  --bulma-menu-item-l: var(--bulma-success-l);
-  --bulma-menu-item-background-l: var(--bulma-success-l);
-  --bulma-menu-item-color-l: var(--bulma-success-invert-l);
+  --bulma-menu-item-h: var(--bulma-primary-h);
+  --bulma-menu-item-s: var(--bulma-primary-s);
+  --bulma-menu-item-l: var(--bulma-primary-l);
+  --bulma-menu-item-background-l: var(--bulma-primary-l);
+  --bulma-menu-item-color-l: var(--bulma-primary-invert-l);
 }
 
 .hoverable *:hover {

accrete/contrib/ui/templates/django/forms/widgets/input.html

@@ -1 +1 @@
-<input class="{% if widget.type != 'checkbox' %}input{% endif %}" type="{{ widget.type }}" name="{{ widget.name }}" autocomplete="off" {% if widget.value != None %} value="{{ widget.value|stringformat:'s' }}"{% endif %}{% include "django/forms/widgets/attrs.html" %}>
+<input class="{% if widget.type != 'checkbox' and widget.type != 'radio' %}input{% endif %}" type="{{ widget.type }}" name="{{ widget.name }}" autocomplete="off" {% if widget.value != None %} value="{{ widget.value|stringformat:'s' }}"{% endif %}{% include "django/forms/widgets/attrs.html" %}>

accrete/contrib/ui/templates/ui/custom_theme.html

@@ -0,0 +1,19 @@
+<style>
+    :root {
+        --bulma-primary-h: {{ primary.h }}deg;
+        --bulma-primary-s: {{ primary.s }}%;
+        --bulma-primary-l: {{ primary.l }}%;
+        --bulma-success-h: {{ success.h }}deg;
+        --bulma-success-s: {{ success.s }}%;
+        --bulma-success-l: {{ success.l }}%;
+        --bulma-link-h: {{ link.h }}deg;
+        --bulma-link-s: {{ link.s }}%;
+        --bulma-link-l: {{ link.l }}%;
+        --bulma-warning-h: {{ warning.h }}deg;
+        --bulma-warning-s: {{ warning.s }}%;
+        --bulma-warning-l: {{ warning.l }}%;
+        --bulma-danger-h: {{ danger.h }}deg;
+        --bulma-danger-s: {{ danger.s }}%;
+        --bulma-danger-l: {{ danger.l }}%;
+    }
+</style>

accrete/contrib/ui/templates/ui/layout.html

@@ -4,17 +4,17 @@
 {% load partials %}
 {% load ui %}
 
-<html lang="en" style="overflow: hidden" {% block theme %}{% if request.user.theme %}data-theme="{{ request.user.theme }}"{% endif %}{% endblock %}>
+<html lang="en" style="overflow: hidden;" {% block theme %}{% if request.user.theme %}data-theme="{{ request.user.theme }}"{% endif %}{% endblock %}>
 
 <head>
     {% block head %}
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         {% include 'ui/favicon.html' %}
-        <link rel="stylesheet" type="text/css" href="{% static "css/accrete.css" %}?v=0.0.144">
+        <link rel="stylesheet" type="text/css" href="{% static "css/accrete.css" %}?v=0.0.151">
         <link rel="stylesheet" type="text/css" href="{% static "css/icons.css" %}">
         <link rel="stylesheet" type="text/css" href="{% static "css/fa.css" %}">
-
+        {% custom_theme request.user %}
         <script src="{% static "js/filter.js" %}" type="text/javascript"></script>
         <script src="{% static "js/htmx.min.js" %}" defer type="text/javascript"></script>
         <script src="{% static "js/alpine-focus-3.14.9.js" %}" defer type="text/javascript"></script>
@@ -51,7 +51,7 @@
 <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' data-tenant-id="{{ tenant.id }}" hx-boost="true" hx-history="false"
       x-data="{ showPanel: false, openPanel() { if(window.innerWidth >= 1216) {this.showPanel = true}  } }"
 >
-    <nav id="navbar" class="navbar is-success is-fixed-top" role="navigation" aria-label="main navigation">
+    <nav id="navbar" class="navbar is-primary is-fixed-top" role="navigation" aria-label="main navigation">
         <div class="navbar-brand">
             {% if has_panel %}
                 <div class="navbar-item is-hidden-widescreen pr-2" x-on:click.stop="$dispatch('toggle-panel')">
@@ -131,7 +131,7 @@
                 <div id="message" class="" style="position: fixed; top: calc(var(--bulma-navbar-height) + 5px); left: 50%; transform: translateX(-50%); z-index: 999">
                     {% for message in messages %}
                         <div class="mb-2" style="min-width: 330px; max-width: 330px" x-data="{ show: false }" x-show="show" x-cloak="" x-init="show = true; setTimeout(() => show = false, 4000)" x-transition.duration.200ms>
-                            <div class="notification is-light has-text-centered {{ message|message_class }}" style="box-shadow: 2px 2px 5px">
+                            <div class="notification is-light has-text-centered" style="box-shadow: 2px 2px 5px">
                                 {{ message }}
                             </div>
                         </div>
@@ -148,9 +148,9 @@
                     <div id="overview-container" class="table-container is-flex is-flex-grow-1 is-flex-direction-column mb-0" x-bind:class="showContentRight ? 'is-hidden-mobile' : ''">
                         <div id="overview-header">
                             <div class="is-flex is-justify-content-space-between is-flex-wrap-wrap {% if is_centered %}container{% endif %}">
-                                    <div class="is-flex is-flex-wrap-wrap is-flex-grow-5 is-align-self-center py-2 header-items">
+                                    <div class="is-flex is-flex-wrap-wrap is-flex-grow-5 is-align-self-center py-2 mx-1 header-items">
                                         {% block overview_header %}
-                                            <div class="ml-0" style="align-self: center">
+                                            <div class="" style="align-self: center">
                                                 <p class="title is-5">{{ title }}</p>
                                             </div>
                                             {% if header_template %}{% include header_template %}{% endif %}
@@ -197,9 +197,9 @@
                             </section>
                         </div>
                     </div>
-                
+
                     <div id="detail-container" x-show="showContentRight" {% if show_content_right != 'true' %}style="display: none;"{% endif %}
-                             x-transition:enter.duration.200ms x-transition:leave.duration.50ms
+                         x-transition:enter.duration.200ms x-transition:leave.duration.50ms
                     >
                         <div id="detail-indicator" class="htmx-indicator">
                             <progress class="progress is-success" max="100"></progress>

accrete/contrib/ui/templates/ui/list.html

@@ -8,8 +8,8 @@
             {% partialdef entry inline=True %}
                 <div id="list-entry-{{ instance.pk }}" class="list-entry cell pb-0" style="height: {{ column_height }}">
                     <div class="box p-3"
-                         style="word-break: break-word; height: 100%; overflow-y: auto; {% if instance.get_absolute_url %}cursor:pointer;{% endif %}"
-                         {% if instance.get_absolute_url %}
+                         style="word-break: break-word; height: 100%; overflow-y: auto; {% if instance.get_absolute_url and detail_enabled %}cursor:pointer;{% endif %}"
+                         {% if instance.get_absolute_url and detail_enabled %}
                             hx-get="{{ instance.get_absolute_url }}{% querystring %}" hx-swap="none" hx-indicator="#detail-indicator" hx-replace-url="{% querystring detail=instance.pk %}"
                             x-on:click="$dispatch('unselect-list-entry'); selected = true; $nextTick(() => { $el.scrollIntoView({block: 'nearest'}) });" x-bind:class="selected ? 'selected' : ''"
                          {% endif %}

accrete/contrib/ui/templates/ui/message.html

@@ -4,8 +4,8 @@
     {% for message in messages %}
         <div hx-swap-oob="{% if append %}beforeend:#message{% else %}innerHTML:#message{% endif %}">
             <div class="mb-2" style="min-width: 340px; max-width: 340px" x-data="{ show: false }" x-show="show" x-cloak="" x-init="show = true; {% if not persistent %}setTimeout(() => show = false, 4000){% endif %}" x-transition.duration.200ms>
-                <div class="notification is-light has-text-centered {{ message|message_class }}" style="box-shadow: 2px 2px 5px">
-                    {% if persistent %}<button class="delete" x-on:click="show = false;"></button>{% endif %}
+                <div class="notification has-text-centered " style="box-shadow: 2px 2px 5px">
+                    <button class="delete" x-on:click="show = false;"></button>
                     {{ message }}
                 </div>
             </div>

accrete/contrib/ui/templates/ui/modal.html

@@ -1,13 +1,13 @@
 {% load i18n %}
 {% load ui %}
 
-<div hx-swap-oob="{% if is_update %}outerHTML:#{{ modal_id }}{% else %}beforeend:body{% endif %}">
-    <div id="{{ modal_id }}" x-data="{showModal: false, close() {$dispatch('close-modal-{{ modal_id }}')} }" x-ref="modal" class="modal is-active is-justify-content-flex-start"
+<div hx-swap-oob="{% if is_update %}innerHTML:#{{ modal_id }}{% else %}beforeend:body{% endif %}">
+    <div id="{{ modal_id }}" x-data="{showModal: false, close() {$dispatch('close-modal-{{ modal_id }}')} }" x-ref="modal" x-trap="true" class="modal is-active is-justify-content-flex-start"
          style="padding-top: calc(var(--bulma-navbar-height) + 20px); padding-bottom: 40px;"
          @close-modal-{{ modal_id }}.window="showModal = false; setTimeout(() => $refs.modal.remove(), 200);"
          @close-modals.window="showModal = false; setTimeout(() => $refs.modal.remove(), 200);"
          {% if not is_blocking %}@keyup.escape.window="if (! $refs.{{ modal_id|xrefsave }}Indicator.classList.contains('htmx-request')) {$dispatch('close-modal-{{ modal_id }}')}"{% endif %}
-         {% if is_blocking %}{% endif %}hx-indicator="#{{ modal_id }}-indicator" hx-disabled-elt="#{{ modal_id }}-background"
+         hx-indicator="#{{ modal_id }}-indicator" hx-disabled-elt="#{{ modal_id }}-background"
     >
         <button id="{{ modal_id }}-background" class="modal-background" {% if not is_blocking %}@click="$dispatch('close-modal-{{ modal_id }}')"{% endif %} style="cursor: default"></button>
 

accrete/contrib/ui/templates/ui/table.html

@@ -5,7 +5,7 @@
 <table id="content-table" class="table can-compact is-fullwidth is-hoverable is-narrow my-0" hx-indicator=".htmx-indicator" x-data="">
     <thead style="position: sticky; top: 0; z-index: 10; background-color: var(--bulma-scheme-main)">
         <tr>
-            <th>{{ instance_label }}</th>
+            {% if instance_label %}<th>{{ instance_label }}</th>{% endif %}
             {% for field in fields %}
                 <th style="text-align: {{ page.object_list|table_alignment:field }}">{{ page.object_list|verbose_field_name:field }}</th>
             {% endfor %}
@@ -20,14 +20,14 @@
                         hx-get="{{ instance.get_absolute_url }}{% querystring %}" hx-swap="none"
                         hx-replace-url="{% querystring detail=instance.pk %}"
                         x-data="{selected: false}" @unselect-tr.window="selected = false"
-                        x-on:click="$dispatch('unselect-tr'); selected = true; $nextTick(() => { $el.scrollIntoView( {block: 'nearest'} ) });" x-bind:class="selected ? 'is-success' : ''"
+                        x-on:click="$dispatch('unselect-tr'); selected = true; $nextTick(() => { $el.scrollIntoView( {block: 'nearest'} ) });" x-bind:class="selected ? 'is-primary' : ''"
                     {% endif %}
                 >
                     {% partialdef td inline=True %}
-                        <td>{{ instance }}</td>
+                        {% if instance_label %}<td>{{ instance }}</td>{% endif %}
                         {% for field in fields %}
                             <td style="text-align: {{ instance|table_alignment:field }}">
-                                <span class="">
+                                <span>
                                     <span class="responsive-heading has-text-weight-light" style="margin-right: .2rem">{{ instance|verbose_field_name:field }}:</span>
                                     {{ instance|table_display:field|default_if_none:'' }}
                                 </span>
@@ -72,4 +72,4 @@
      {% endif %}
 >
 </div>
-<progress id="endless-scroll-indicator" class="htmx-indicator progress is-small is-success" max="100">15%</progress>
+<progress id="endless-scroll-indicator" class="htmx-indicator progress is-small is-primary" max="100">15%</progress>

accrete/contrib/ui/templates/ui/templatetags/field.html

@@ -1,27 +1,66 @@
 {% load ui %}
 {% load partials %}
 
+{#{% partialdef form_field %}#}
+{#    <label class="label mt-2 mb-5">#}
+{#        {{ field.label }}#}
+{#        {{ field }}#}
+{#        <span class="has-text-danger is-size-6">{{ field.errors }}</span>#}
+{#        <span class="helptext is-size-7">{{ field.help_text }}</span>#}
+{#        <span class="helptext is-size-7">{% if label %}{{ label }}{% else %}{{ field.help_text|default_if_falsy:field.label }}{% endif %}</span>#}
+{#    </label>#}
+{#{% endpartialdef %}#}
+
+{#{% partialdef form_field %}#}
+{#    <label class="label mt-2 mb-5" style="border: 1px solid; border-radius: var(--bulma-radius);">#}
+{#        <span style="justify-content: left" class="is-fullwidth button is-static helptext is-size-7 {% if field.field.required %}has-text-weight-bold{% endif %}">{% if label %}{{ label }}{% else %}{{ field.help_text|default_if_falsy:field.label }}{% endif %}</span>#}
+{#        {{ field }}#}
+{#        <span class="has-text-danger is-size-6">{{ field.errors }}Testmessage</span>#}
+{##}
+{#    </label>#}
+{#{% endpartialdef %}#}
+
 {% partialdef form_field %}
-    <label class="label mt-2 mb-5">
-        {{ field }}
+    <div class="mb-5">
+        <label class="label mb-0 {% if field.field.required %}has-text-weight-medium{% endif %}" for="{{ field.id_for_label }}">{{ field.label }}</label>
+        <div class="field has-addons mb-0">
+            {% if icon %}
+                <p class="control">
+                    <button tabindex="-1" type="button" class="button is-static"><span class="icon"><i class="{{ icon }}"></i></span></button>
+                </p>
+            {% endif %}
+            <div class="control is-expanded">{{ field }}</div>
+        </div>
         <span class="has-text-danger is-size-6">{{ field.errors }}</span>
-        <span class="helptext {% if field.field.required %}has-text-weight-bold{% endif %}">{% if label %}{{ label }}{% else %}{{ field.help_text|default_if_falsy:field.label }}{% endif %}</span>
-    </label>
+        <span class="helptext is-size-7">{{ field.help_text|default_if_falsy:'' }}</span>
+    </div>
 {% endpartialdef %}
 
 {% partialdef textarea %}
     <label class="label mt-2 mb-5">
-        <span class="helptext {% if field.field.required %}has-text-weight-bold{% endif %}">{% if label %}{{ label }}{% else %}{{ field.help_text|default_if_falsy:field.label }}{% endif %}</span>
+        <span class="{% if field.field.required %}has-text-weight-normal{% endif %}">{{ field.label }}</span>
         <span class="has-text-danger is-size-6">{{ field.errors }}</span>
         {{ field }}
     </label>
 {% endpartialdef %}
 
 {% partialdef model_field %}
-    <label class="label mt-2 mb-5">
-        <span class="field has-addons mb-0">
-            <span class="control input has-text-weight-normal">{{ value|default_if_none:'' }}</span>
-        </span>
-        <span class="helptext {% if required %}has-text-weight-bold{% endif %}">{{ label }}</span>
-    </label>
+{#    <label class="label mt-2 mb-5">#}
+{#        <span class="field has-addons mb-0">#}
+{#            <span class="control input has-text-weight-bold">{{ value|default_if_none:'' }}</span>#}
+{#        </span>#}
+{#        <span class="helptext">{{ label }}</span>#}
+{#    </label>#}
+    <div class="mb-5">
+        <label class="label mb-0 {% if field.field.required %}has-text-weight-bold{% endif %}" for="{{ field.id_for_label }}">{{ label }}</label>
+        <div class="field has-addons mb-0">
+            {% if icon %}
+                <p class="control">
+                    <button tabindex="-1" type="button" class="button is-static"><span class="icon"><i class="{{ icon }}"></i></span></button>
+                </p>
+            {% endif %}
+            <div class="control input is-expanded">{{ value|default_if_none:'' }}</div>
+        </div>
+        <span class="helptext is-size-7">{{ field.help_text|default_if_falsy:'' }}</span>
+    </div>
 {% endpartialdef %}

accrete/contrib/ui/templates/ui/widgets/date_weekday.html

@@ -0,0 +1,10 @@
+{% load ui %}
+
+<div class="field has-addons mb-0">
+    <p class="control">
+        <p class="control"><a class="button is-static" style="height: 100%; border-top-left-radius: var(--bulma-radius-medium); border-bottom-left-radius: var(--bulma-radius-medium);">{{ widget.value|weekday:'' }}</a></p>
+    </p>
+    <p class="control is-expanded">
+        <input class="{% if widget.type != 'checkbox' %}input{% endif %} is-fullwidth" name="{{ widget.name }}" type="{{ widget.type }}"{% if widget.value != None %} value="{{ widget.value|stringformat:'s' }}"{% endif %} {% include "django/forms/widgets/attrs.html" %}>
+    </p>
+</div>

accrete/contrib/ui/templates/ui/widgets/model_search_select.html

@@ -11,12 +11,13 @@
     >
     <input id="id_{{ widget.name }}_display" class="input" type="text" readonly x-ref="inputDisplay" value="{{ widget.value_display }}" aria-label="inputDisplay"
            style="padding-right: 30px"
+           {% include "django/forms/widgets/attrs.html" %}
            x-on:keydown="if (!open && [38, 40].includes($event.keyCode)) {}; if (![9, 27, 38, 40].includes($event.keyCode)) {$refs.searchInput.focus();}"
            x-on:click.stop="if (open) {open = false; } else {open = true; $refs.searchInput.focus()}"
     >
-    <div style="position: relative; top: 1.5rem; z-index: 90;">
-        <div x-show="open" x-effect="if (open) {$nextTick(() => { $refs.dropdownContent.scrollIntoView(true) });}" x-cloak="" class="box pt-1 px-3 mb-2" x-ref="dropdownContent" tabindex="-1" x-transition style="position: absolute; width: 100%">
-            <input id="id_{{ widget.name }}_search" type="search" autocomplete="off" class="input mb-2" x-ref="searchInput" aria-label="search"
+    <div style="position: relative; top: .5rem; z-index: 90;">
+        <div x-show="open" x-effect="if (open) {$nextTick(() => { $refs.dropdownContent.scrollIntoView(true) });}" x-cloak="" class="box pt-3 px-3 mb-2" x-ref="dropdownContent" tabindex="-1" x-transition style="position: absolute; width: 100%">
+            <input id="id_{{ widget.name }}_search" type="search" autocomplete="off" class="input my-2" x-ref="searchInput" aria-label="search"
                    name="{{ widget.search_parameter }}"
                    placeholder="{% translate 'Type to search' %}"
                    hx-get="{{ widget.search_url }}"

accrete/contrib/ui/templates/ui/widgets/model_search_select_multi.html

@@ -10,8 +10,8 @@
             <option selected value="{{ obj.pk }}"></option>
         {% endfor %}
     </select>
-    <div id="{{ widget.attrs.id }}_display" class="input select py-1 pl-1" tabindex="0" x-ref="inputDisplay" aria-label="inputDisplay"
-         style="padding-right: 30px; border-radius: 0; border-top: 0; border-right:0; border-left: 0; min-height: var(--bulma-control-height); height: fit-content; width: 100%"
+    <div id="{{ widget.attrs.id }}_display" class="input select py-1" tabindex="0" x-ref="inputDisplay" aria-label="inputDisplay"
+         style="padding-right: 30px; min-height: var(--bulma-control-height); height: fit-content; width: 100%"
          x-on:keydown="if (![9, 27, 38, 40].includes($event.keyCode)) {$refs.searchInput.focus();}"
          x-on:click.stop="if (!$event.target.classList.contains('delete')) {if (open) {open = false; } else {open = true; $refs.searchInput.focus();}}"
     >
@@ -33,8 +33,8 @@
             {% endfor %}
         </div>
     </div>
-    <div style="position: relative; top: 1.5rem; z-index: 9">
-        <div x-show="open" x-effect="if (open) {$nextTick(() => { $refs.dropdownContent.scrollIntoView(true) });}" class="box pt-1 px-3 mb-2" x-ref="dropdownContent" x-cloak="" tabindex="-1" x-transition style="position: absolute; width: 100%">
+    <div style="position: relative; top: .5rem; z-index: 9">
+        <div x-show="open" x-effect="if (open) {$nextTick(() => { $refs.dropdownContent.scrollIntoView(true) });}" class="box pt-3 px-3 mb-2" x-ref="dropdownContent" x-cloak="" tabindex="-1" x-transition style="position: absolute; width: 100%">
             <input id="id_{{ widget.uuid }}_search" type="search" autocomplete="off" class="input mb-2" x-ref="searchInput" aria-label="search"
                    name="{{ widget.search_parameter }}"
                    placeholder="{% translate 'Type to search' %}"
@@ -42,6 +42,7 @@
                    hx-trigger="input changed delay:300ms, search"
                    hx-target="#id_{{ widget.uuid }}_dropdown_items"
                    hx-swap="innerHTML"
+                   style="border-radius: var(--bulma-radius)"
                    x-on:keydown="if (![9, 27, 38, 40].includes($event.keyCode)) {$refs.searchInput.focus();}"
                    @change.stop=""
             >

accrete/contrib/ui/templatetags/ui.py

@@ -2,16 +2,22 @@ import logging
 import re
 from datetime import datetime, date, timedelta
 
+from django.contrib.auth import get_user_model
 from django.utils.translation import gettext_lazy as _
 from django import template
-from django.db.models import Manager, DecimalField, IntegerField, FloatField, Model
+from django.db.models import (
+    Manager, DecimalField, IntegerField, FloatField, Model, Q
+)
 from django.apps import apps
 from django.template.loader import render_to_string
 from django.utils.safestring import mark_safe
 from django.forms import widgets
+from accrete.contrib.ui.models import Theme
+from accrete.tenant import get_tenant
 
 _logger = logging.getLogger(__name__)
 register = template.Library()
+User = get_user_model()
 
 
 @register.simple_tag(name='combine_templates')
@@ -130,9 +136,11 @@ def timedelta_cast(td: timedelta, code: str) -> str | None:
 
 
 @register.filter(name='weekday')
-def datetime_to_weekday(dt: datetime|date, default=None) -> str:
+def datetime_to_weekday(dt: datetime|date|str, default=None) -> str:
     if dt is None:
         return default
+    if isinstance(dt, str):
+        dt = datetime.strptime(dt, '%Y-%m-%d')
     mapping = {
         1: _('Mon'),
         2: _('Tue'),
@@ -151,11 +159,17 @@ def x_ref_save(param: str):
 
 
 @register.filter(name='wrap_form_field')
-def wrap_form_fields(field, label=None):
+def wrap_form_fields(field, icon=None):
     if isinstance(field.field.widget, widgets.Textarea):
-        html = render_to_string('ui/templatetags/field.html#textarea', {'field': field, 'label': label})
+        html = render_to_string(
+            'ui/templatetags/field.html#textarea',
+            {'field': field, 'icon': None}
+        )
         return mark_safe(html)
-    html = render_to_string('ui/templatetags/field.html#form_field', {'field': field, 'label': label})
+    html = render_to_string(
+        'ui/templatetags/field.html#form_field',
+        {'field': field, 'icon': icon}
+    )
     return mark_safe(html)
 
 
@@ -179,3 +193,21 @@ def default_if_falsy(value, default):
     if bool(value):
         return value
     return default
+
+
+@register.simple_tag(name='custom_theme')
+def custom_theme(user: User) -> str:
+    if user.is_anonymous:
+        return ''
+    tenant = get_tenant()
+    tenant_theme = Theme.objects.filter(
+        tenant=tenant, tenant__isnull=False
+    ).first()
+    if tenant_theme and tenant_theme.force_tenant_theme:
+        return mark_safe(tenant_theme.theme_markup)
+    if user.theme == 'custom':
+        theme = Theme.objects.filter(user=user).first()
+        return theme and mark_safe(theme.theme_markup) or ''
+    if user.theme == 'preset' and tenant_theme:
+        return mark_safe(tenant_theme.theme_markup)
+    return ''