bernard/TeamForge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Bernard Siebens
2026-04-12 10:37:16 +02:00
parent 95e46fe727
commit 3d94b9b2d8
1 changed files with 26 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
theme/static_src/src/styles.css
View File

@@ -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 {