A;adido Wotlk Futura Implementacion y Varios arreglos en js

static/admin/css/widgets.css

@@ -1,23 +1,23 @@
 /* SELECTOR (FILTER INTERFACE) */
 
 .selector {
-    width: 800px;
-    float: left;
     display: flex;
+    flex-grow: 1;
+    gap: 0 10px;
 }
 
 .selector select {
-    width: 380px;
     height: 17.2em;
     flex: 1 0 auto;
+    overflow: scroll;
+    width: 100%;
 }
 
 .selector-available, .selector-chosen {
-    width: 380px;
     text-align: center;
-    margin-bottom: 5px;
     display: flex;
     flex-direction: column;
+    flex: 1 1;
 }
 
 .selector-available h2, .selector-chosen h2 {
@@ -41,7 +41,7 @@
 }
 
 .selector-chosen h2 {
-    background: var(--primary);
+    background: var(--secondary);
     color: var(--header-link-color);
 }
 
@@ -58,6 +58,7 @@
     font-size: 0.625rem;
     margin: 0;
     text-align: left;
+    display: flex;
 }
 
 .selector .selector-filter label,
@@ -72,9 +73,12 @@
     min-width: auto;
 }
 
+.selector-filter input {
+    flex-grow: 1;
+}
+
 .selector .selector-available input,
 .selector .selector-chosen input {
-    width: 320px;
     margin-left: 8px;
 }
 
@@ -83,7 +87,7 @@
     width: 22px;
     background-color: var(--selected-bg);
     border-radius: 10px;
-    margin: 0 5px;
+    margin: 0;
     padding: 0;
     transform: translateY(-17px);
 }
@@ -147,7 +151,7 @@ a.selector-chooseall, a.selector-clearall {
     display: inline-block;
     height: 16px;
     text-align: left;
-    margin: 1px auto 3px;
+    margin: 0 auto;
     overflow: hidden;
     font-weight: bold;
     line-height: 16px;
@@ -447,7 +451,7 @@ span.clearable-file-input label {
 }
 
 .calendar td.selected a {
-    background: var(--primary);
+    background: var(--secondary);
     color: var(--button-fg);
 }
 
@@ -515,36 +519,26 @@ span.clearable-file-input label {
     background: url(../img/calendar-icons.svg) 0 0 no-repeat;
 }
 
-.calendarbox .calendarnav-previous:focus,
-.calendarbox .calendarnav-previous:hover {
-    background-position: 0 -15px;
-}
-
 .calendarnav-next {
     right: 10px;
-    background: url(../img/calendar-icons.svg) 0 -30px no-repeat;
-}
-
-.calendarbox .calendarnav-next:focus,
-.calendarbox .calendarnav-next:hover {
-    background-position: 0 -45px;
+    background: url(../img/calendar-icons.svg) 0 -15px no-repeat;
 }
 
 .calendar-cancel {
     margin: 0;
     padding: 4px 0;
     font-size: 0.75rem;
-    background: #eee;
+    background: var(--close-button-bg);
     border-top: 1px solid var(--border-color);
-    color: var(--body-fg);
+    color: var(--button-fg);
 }
 
 .calendar-cancel:focus, .calendar-cancel:hover {
-    background: #ddd;
+    background: var(--close-button-hover-bg);
 }
 
 .calendar-cancel a {
-    color: black;
+    color: var(--button-fg);
     display: block;
 }
 
@@ -575,26 +569,21 @@ ul.timelist, .timelist li {
 
 /* RELATED WIDGET WRAPPER */
 .related-widget-wrapper {
-    float: left;       /* display properly in form rows with multiple fields */
-    overflow: hidden;  /* clear floated contents */
+    display: flex;
+    gap: 0 10px;
+    flex-grow: 1;
+    flex-wrap: wrap;
+    margin-bottom: 5px;
 }
 
 .related-widget-wrapper-link {
-    opacity: 0.3;
+    opacity: .6;
+    filter: grayscale(1);
 }
 
 .related-widget-wrapper-link:link {
-    opacity: .8;
-}
-
-.related-widget-wrapper-link:link:focus,
-.related-widget-wrapper-link:link:hover {
     opacity: 1;
-}
-
-select + .related-widget-wrapper-link,
-.related-widget-wrapper-link + .related-widget-wrapper-link {
-    margin-left: 7px;
+    filter: grayscale(0);
 }
 
 /* GIS MAPS */