Refactor styles in styles.css: fix margin typo, improve focus/hover effects, and standardize dropdown styling with updated colors and shadows.

TeamForge/settings.py

@@ -43,6 +43,7 @@ INSTALLED_APPS = [
     "django.contrib.sessions",
     "django.contrib.messages",
     "django.contrib.staticfiles",
+    "waffle",
     "constance",
     "tailwind",
     "django_filters",
@@ -62,6 +63,7 @@ MIDDLEWARE = [
     "django.contrib.messages.middleware.MessageMiddleware",
     "django.middleware.clickjacking.XFrameOptionsMiddleware",
     "django_htmx.middleware.HtmxMiddleware",
+    "waffle.middleware.WaffleMiddleware",
 ]
 
 ROOT_URLCONF = "TeamForge.urls"

pyproject.toml

@@ -12,6 +12,7 @@ dependencies = [
     "django-htmx>=1.27.0",
     "django-phonenumber-field[phonenumbers]>=8.4.0",
     "django-tailwind[cookiecutter,honcho]>=4.4.2",
+    "django-waffle>=5.0.0",
     "pillow>=12.1.0",
     "psycopg2-binary>=2.9.11",
     "python-decouple>=3.8",

theme/static_src/src/styles.css

@@ -226,7 +226,7 @@
 .choices[data-type*=text] .choices__button {
     position: relative;
     display: inline-block;
-    margin: 0-4px 0 2px;
+    margin: 0 -4px 0 2px;
     padding-left: 16px;
     background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
     background-size: 8px;
@@ -253,26 +253,16 @@
     border-radius: var(--radius-field);
     font-size: 14px;
     min-height: 44px;
-    overflow: hidden
+    overflow: hidden;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
 }
 
-
 .is-focused .choices__inner,
 .is-open .choices__inner {
     border-color: var(--color-base-content);
-    isolation: isolate;
-    border-radius: var(--radius-field);
+    box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
 }
 
-.is-focused {
-    border: 2px solid var(--color-base-content);
-    border-radius: calc(var(--radius-field) * 2);
-    margin: -2px;
-    padding: 2px; /* adjust offset */
-}
-
-
-
 .is-open .choices__inner {
     border-radius: var(--radius-field);
 }
@@ -281,6 +271,13 @@
     border-radius: var(--radius-field);
 }
 
+.is-focused {
+    border: 0;
+    margin: 0;
+    padding: 0;
+    outline: 0;
+}
+
 .choices__list {
     margin: 0;
     padding-left: 0;
@@ -344,16 +341,16 @@
 .choices__list--dropdown,
 .choices__list[aria-expanded] {
     display: none;
-    z-index: 1;
+    z-index: 10;
     position: absolute;
     width: 100%;
-    background-color: var(--color-base-100);
-    border: 1px solid #ddd;
+    border: 1px solid color-mix(in oklab, var(--color-base-content) 20%, #0000);
     top: 100%;
-    margin-top: 3px;
+    margin-top: 0.25rem;
     border-radius: var(--radius-field);
     overflow: hidden;
-    word-break: break-all
+    word-break: break-all;
+    box-shadow: 0 10px 25px color-mix(in oklab, var(--color-base-content) 12%, transparent)
 }
 
 .is-active.choices__list--dropdown,
@@ -363,7 +360,7 @@
 
 .is-open .choices__list--dropdown,
 .is-open .choices__list[aria-expanded] {
-    border-color: #b7b7b7
+    border-color: color-mix(in oklab, var(--color-base-content) 20%, #0000)
 }
 
 .is-flipped .choices__list--dropdown,
@@ -371,8 +368,8 @@
     top: auto;
     bottom: 100%;
     margin-top: 0;
-    margin-bottom: -1px;
-    border-radius: .25rem .25rem 0 0
+    margin-bottom: 0.25rem;
+    border-radius: var(--radius-field)
 }
 
 .choices__list--dropdown .choices__list,
@@ -387,8 +384,9 @@
 .choices__list--dropdown .choices__item,
 .choices__list[aria-expanded] .choices__item {
     position: relative;
-    padding: 10px;
-    font-size: 14px
+    padding: 10px 12px;
+    font-size: 14px;
+    color: var(--color-base-content)
 }
 
 [dir=rtl] .choices__list--dropdown .choices__item,
@@ -396,7 +394,7 @@
     text-align: right
 }
 
-@media (min-width:640px) {
+@media (min-width: 640px) {
 
     .choices__list--dropdown .choices__item--selectable[data-select-text],
     .choices__list[aria-expanded] .choices__item--selectable[data-select-text] {
@@ -430,7 +428,7 @@
 
 .choices__list--dropdown .choices__item--selectable.is-highlighted,
 .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
-    background-color: var(--color-base-100)
+    background-color: color-mix(in oklab, var(--color-primary) 10%, var(--color-base-100))
 }
 
 .choices__list--dropdown .choices__item--selectable.is-highlighted::after,
@@ -473,7 +471,8 @@
 
 .choices__button:focus,
 .choices__input:focus {
-    outline: 0
+    outline: 0;
+    box-shadow: none;
 }
 
 .choices__input {

uv.lock

@@ -318,6 +318,18 @@ honcho = [
     { name = "honcho" },
 ]
 
+[[package]]
+name = "django-waffle"
+version = "5.0.0"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "django" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/22/e1/6f533da0d4ac89f427dfd9410e39bfc14ae3a23335ecd549d76be4b2a834/django_waffle-5.0.0.tar.gz", hash = "sha256:62f9d00eedf68dafb82657beab56e601bddedc1ea1ccfef91d83df8658708509", size = 37761, upload-time = "2025-06-12T07:38:54.895Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/7a/d2/6f0d664bd35a3fdd0403655c7c32ec290704923f11541ef356b180cd8fbf/django_waffle-5.0.0-py3-none-any.whl", hash = "sha256:3312851d9d926b76b9e90712355781700a383b82b5bf2b61e1f1be97532c0f3d", size = 48137, upload-time = "2025-06-12T07:38:53.698Z" },
+]
+
 [[package]]
 name = "honcho"
 version = "2.0.0"
@@ -701,6 +713,7 @@ dependencies = [
     { name = "django-htmx" },
     { name = "django-phonenumber-field", extra = ["phonenumbers"] },
     { name = "django-tailwind", extra = ["cookiecutter", "honcho"] },
+    { name = "django-waffle" },
     { name = "pillow" },
     { name = "psycopg2-binary" },
     { name = "python-decouple" },
@@ -723,6 +736,7 @@ requires-dist = [
     { name = "django-htmx", specifier = ">=1.27.0" },
     { name = "django-phonenumber-field", extras = ["phonenumbers"], specifier = ">=8.4.0" },
     { name = "django-tailwind", extras = ["cookiecutter", "honcho"], specifier = ">=4.4.2" },
+    { name = "django-waffle", specifier = ">=5.0.0" },
     { name = "pillow", specifier = ">=12.1.0" },
     { name = "psycopg2-binary", specifier = ">=2.9.11" },
     { name = "python-decouple", specifier = ">=3.8" },