makes user page better.

This commit is contained in:
2023-10-12 23:27:49 -07:00
parent d9fec54062
commit 1e4dabfa07
7 changed files with 166 additions and 73 deletions

View File

@@ -78,20 +78,35 @@
}
.select2 {
@apply text-xs !important;
.choices {
@apply border-0 !important;
}
.select2-dropdown {
@apply p-2 mb-6 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 text-xs !important;
.choices__list--multiple {
}
.choices__inner {
@apply bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:bg-gray-700 p-1 !important;
}
.select2-selection__choice {
@apply bg-primary-100 dark:bg-primary-700 text-gray-900 dark:text-gray-200 !important;
.choices__inner .choices__input {
@apply m-0 bg-gray-50 dark:bg-gray-700 dark:text-white !important;
}
.choices__inner .choices__item {
@apply bg-green-300 text-green-800 dark:bg-green-900 dark:text-green-300 text-xs font-medium px-2 py-0.5 rounded whitespace-nowrap border-gray-400 !important;
}
.choices__list--dropdown {
@apply bg-white rounded-lg shadow dark:bg-gray-700 !important;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted {
@apply bg-green-300 text-green-800 dark:bg-green-900 dark:text-green-300 !important;
}
.choices[data-type*="select-multiple"] .choices__button {
@apply border-gray-500 focus:ring-blue-500 focus:border-blue-500 !important;
}
.select2-search {
@apply h-4 !important;
}
.select2-selection {
@apply py-2.5 !important;
.choices__inner .choices__item:focus-within {
@apply bg-green-500 border-gray-500 ring-blue-500 border-blue-500 !important;
}

View File

@@ -2484,34 +2484,37 @@ input:checked + .toggle-bg {
min-height: calc(100vh - 4em);
}
.select2 {
font-size: 0.75rem !important;
line-height: 1rem !important;
.choices {
border-width: 0px !important;
}
.select2-dropdown {
margin-bottom: 1.5rem !important;
.choices__list--multiple {
}
.choices__inner {
display: block !important;
width: 100% !important;
border-radius: 0.5rem !important;
border-width: 1px !important;
--tw-border-opacity: 1 !important;
border-color: rgb(209 213 219 / var(--tw-border-opacity)) !important;
--tw-bg-opacity: 1 !important;
background-color: rgb(249 250 251 / var(--tw-bg-opacity)) !important;
padding: 0.5rem !important;
font-size: 0.75rem !important;
line-height: 1rem !important;
padding: 0.25rem !important;
font-size: 0.875rem !important;
line-height: 1.25rem !important;
--tw-text-opacity: 1 !important;
color: rgb(17 24 39 / var(--tw-text-opacity)) !important;
}
.select2-dropdown:focus {
.choices__inner:focus {
--tw-border-opacity: 1 !important;
border-color: rgb(0 156 234 / var(--tw-border-opacity)) !important;
--tw-ring-opacity: 1 !important;
--tw-ring-color: rgb(0 156 234 / var(--tw-ring-opacity)) !important;
}
:is(.dark .select2-dropdown) {
:is(.dark .choices__inner) {
--tw-border-opacity: 1 !important;
border-color: rgb(75 85 99 / var(--tw-border-opacity)) !important;
--tw-bg-opacity: 1 !important;
@@ -2520,44 +2523,109 @@ input:checked + .toggle-bg {
color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}
:is(.dark .select2-dropdown)::-moz-placeholder {
:is(.dark .choices__inner)::-moz-placeholder {
--tw-placeholder-opacity: 1 !important;
color: rgb(156 163 175 / var(--tw-placeholder-opacity)) !important;
}
:is(.dark .select2-dropdown)::placeholder {
:is(.dark .choices__inner)::placeholder {
--tw-placeholder-opacity: 1 !important;
color: rgb(156 163 175 / var(--tw-placeholder-opacity)) !important;
}
:is(.dark .select2-dropdown:focus) {
:is(.dark .choices__inner:focus) {
--tw-border-opacity: 1 !important;
border-color: rgb(0 156 234 / var(--tw-border-opacity)) !important;
--tw-ring-opacity: 1 !important;
--tw-ring-color: rgb(0 156 234 / var(--tw-ring-opacity)) !important;
}
.select2-selection__choice {
.choices__inner .choices__input {
margin: 0px !important;
--tw-bg-opacity: 1 !important;
background-color: rgb(228 240 213 / var(--tw-bg-opacity)) !important;
--tw-text-opacity: 1 !important;
color: rgb(17 24 39 / var(--tw-text-opacity)) !important;
background-color: rgb(249 250 251 / var(--tw-bg-opacity)) !important;
}
:is(.dark .select2-selection__choice) {
:is(.dark .choices__inner .choices__input) {
--tw-bg-opacity: 1 !important;
background-color: rgb(73 109 28 / var(--tw-bg-opacity)) !important;
background-color: rgb(55 65 81 / var(--tw-bg-opacity)) !important;
--tw-text-opacity: 1 !important;
color: rgb(229 231 235 / var(--tw-text-opacity)) !important;
color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}
.select2-search {
height: 1rem !important;
.choices__inner .choices__item {
white-space: nowrap !important;
border-radius: 0.25rem !important;
--tw-border-opacity: 1 !important;
border-color: rgb(156 163 175 / var(--tw-border-opacity)) !important;
--tw-bg-opacity: 1 !important;
background-color: rgb(175 211 130 / var(--tw-bg-opacity)) !important;
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
padding-top: 0.125rem !important;
padding-bottom: 0.125rem !important;
font-size: 0.75rem !important;
line-height: 1rem !important;
font-weight: 500 !important;
--tw-text-opacity: 1 !important;
color: rgb(48 72 18 / var(--tw-text-opacity)) !important;
}
.select2-selection {
padding-top: 0.625rem !important;
padding-bottom: 0.625rem !important;
:is(.dark .choices__inner .choices__item) {
--tw-bg-opacity: 1 !important;
background-color: rgb(24 36 9 / var(--tw-bg-opacity)) !important;
--tw-text-opacity: 1 !important;
color: rgb(175 211 130 / var(--tw-text-opacity)) !important;
}
.choices__list--dropdown {
border-radius: 0.5rem !important;
--tw-bg-opacity: 1 !important;
background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
:is(.dark .choices__list--dropdown) {
--tw-bg-opacity: 1 !important;
background-color: rgb(55 65 81 / var(--tw-bg-opacity)) !important;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted {
--tw-bg-opacity: 1 !important;
background-color: rgb(175 211 130 / var(--tw-bg-opacity)) !important;
--tw-text-opacity: 1 !important;
color: rgb(48 72 18 / var(--tw-text-opacity)) !important;
}
:is(.dark .choices__list--dropdown .choices__item--selectable.is-highlighted) {
--tw-bg-opacity: 1 !important;
background-color: rgb(24 36 9 / var(--tw-bg-opacity)) !important;
--tw-text-opacity: 1 !important;
color: rgb(175 211 130 / var(--tw-text-opacity)) !important;
}
.choices[data-type*="select-multiple"] .choices__button {
--tw-border-opacity: 1 !important;
border-color: rgb(107 114 128 / var(--tw-border-opacity)) !important;
}
.choices[data-type*="select-multiple"] .choices__button:focus {
--tw-border-opacity: 1 !important;
border-color: rgb(0 156 234 / var(--tw-border-opacity)) !important;
--tw-ring-opacity: 1 !important;
--tw-ring-color: rgb(0 156 234 / var(--tw-ring-opacity)) !important;
}
.choices__inner .choices__item:focus-within {
border-color: rgb(107 114 128 / var(--tw-border-opacity)) !important;
--tw-border-opacity: 1 !important;
border-color: rgb(0 156 234 / var(--tw-border-opacity)) !important;
--tw-bg-opacity: 1 !important;
background-color: rgb(121 181 46 / var(--tw-bg-opacity)) !important;
--tw-ring-opacity: 1 !important;
--tw-ring-color: rgb(0 156 234 / var(--tw-ring-opacity)) !important;
}
.hover\:scale-105:hover {