primereact 10.4.0 → 10.5.0

package/resources/themes/soho-dark/theme.css

@@ -10,7 +10,7 @@
   --text-color: rgba(255, 255, 255, 0.87);
   --text-color-secondary: rgba(255, 255, 255, 0.6);
   --primary-color: #b19df7;
-  --primary-color-text: hsl(234, 15%, 13%);
+  --primary-color-text: hsl(234deg, 15%, 13%);
   --surface-0: #1d1e27;
   --surface-50: #34343d;
   --surface-100: #4a4b52;
@@ -434,6 +434,12 @@
   .p-calendar.p-invalid.p-component > .p-inputtext {
     border-color: #ff9a9a;
   }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+    border-color: #b19df7;
+  }
   .p-datepicker {
     padding: 0.5rem;
     background: #282936;
@@ -642,7 +648,8 @@
     box-shadow: 0 0 0 1px #e0d8fc;
   }
   @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
+    .p-datepicker table th,
+    .p-datepicker table td {
       padding: 0;
     }
   }
@@ -748,7 +755,7 @@
   }
   .p-checkbox .p-checkbox-box .p-checkbox-icon {
     transition-duration: 0.2s;
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
     font-size: 14px;
   }
   .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
@@ -762,7 +769,7 @@
   .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
     border-color: #9378f4;
     background: #9378f4;
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
   }
   .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
     border-color: #b19df7;
@@ -776,7 +783,7 @@
   .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
     border-color: #9378f4;
     background: #9378f4;
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
   }
   .p-checkbox.p-invalid > .p-checkbox-box {
     border-color: #ff9a9a;
@@ -793,26 +800,69 @@
   .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
     background: #9378f4;
   }
-  .p-chips .p-chips-multiple-container {
-    padding: 0.375rem 0.75rem;
-    gap: 0.5rem;
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
   }
-  .p-chips .p-chips-multiple-container:not(.p-disabled):hover {
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
     border-color: #b19df7;
   }
-  .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus {
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 1px #e0d8fc;
     border-color: #b19df7;
   }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.375rem 0.75rem;
+    outline-color: transparent;
+  }
   .p-chips .p-chips-multiple-container .p-chips-token {
     padding: 0.375rem 0.75rem;
     margin-right: 0.5rem;
-    background: rgba(177, 157, 247, 0.16);
+    background: #3e4053;
     color: rgba(255, 255, 255, 0.87);
     border-radius: 16px;
   }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #4c4d5f;
+    color: rgba(255, 255, 255, 0.87);
+  }
   .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon {
     margin-left: 0.5rem;
   }
@@ -845,11 +895,90 @@
   .p-colorpicker-overlay-panel {
     box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   }
+  .p-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
   .p-dropdown {
     background: #1d1e27;
     border: 1px solid #3e4053;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-dropdown:not(.p-disabled):hover {
     border-color: #b19df7;
@@ -860,6 +989,18 @@
     box-shadow: 0 0 0 1px #e0d8fc;
     border-color: #b19df7;
   }
+  .p-dropdown.p-variant-filled {
+    background: #3e4053;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #3e4053;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #3e4053;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
   .p-dropdown.p-dropdown-clearable .p-dropdown-label {
     padding-right: 1.75rem;
   }
@@ -870,7 +1011,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -912,13 +1053,6 @@
     right: 0.75rem;
     color: rgba(255, 255, 255, 0.6);
   }
-  .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter {
-    padding-right: 3.5rem;
-    margin-right: -3.5rem;
-  }
-  .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon {
-    right: 2.5rem;
-  }
   .p-dropdown-panel .p-dropdown-items {
     padding: 0.75rem 0;
   }
@@ -931,14 +1065,28 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
     color: #b19df7;
     background: rgba(177, 157, 247, 0.16);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(177, 157, 247, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(255, 255, 255, 0.03);
   }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
     padding: 0.75rem 1.25rem;
@@ -951,18 +1099,6 @@
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
   }
-  .p-input-filled .p-dropdown {
-    background: #3e4053;
-  }
-  .p-input-filled .p-dropdown:not(.p-disabled):hover {
-    background-color: #3e4053;
-  }
-  .p-input-filled .p-dropdown:not(.p-disabled).p-focus {
-    background-color: #3e4053;
-  }
-  .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext {
-    background-color: transparent;
-  }
   .p-inputgroup-addon {
     background: #282936;
     color: rgba(255, 255, 255, 0.6);
@@ -1160,11 +1296,40 @@
     font-size: 1.25rem;
     padding: 0.9375rem 0.9375rem;
   }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
   .p-listbox {
     background: #282936;
     color: rgba(255, 255, 255, 0.87);
     border: 1px solid #3e4053;
     border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
   }
   .p-listbox .p-listbox-header {
     padding: 0.75rem 1.25rem;
@@ -1184,6 +1349,7 @@
   }
   .p-listbox .p-listbox-list {
     padding: 0.75rem 0;
+    outline: 0 none;
   }
   .p-listbox .p-listbox-list .p-listbox-item {
     margin: 0;
@@ -1193,15 +1359,16 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
   .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
     color: #b19df7;
     background: rgba(177, 157, 247, 0.16);
   }
-  .p-listbox .p-listbox-list .p-listbox-item:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #e0d8fc;
-  }
   .p-listbox .p-listbox-list .p-listbox-item-group {
     margin: 0;
     padding: 0.75rem 1.25rem;
@@ -1214,10 +1381,27 @@
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
   }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(177, 157, 247, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
   .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(255, 255, 255, 0.03);
   }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+    border-color: #b19df7;
+  }
   .p-listbox.p-invalid {
     border-color: #ff9a9a;
   }
@@ -1248,11 +1432,100 @@
     color: #b19df7;
     background: rgba(177, 157, 247, 0.16);
   }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
   .p-multiselect {
     background: #1d1e27;
     border: 1px solid #3e4053;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
     border-radius: 6px;
+    outline-color: transparent;
   }
   .p-multiselect:not(.p-disabled):hover {
     border-color: #b19df7;
@@ -1263,8 +1536,14 @@
     box-shadow: 0 0 0 1px #e0d8fc;
     border-color: #b19df7;
   }
-  .p-multiselect.p-multiselect-clearable .p-multiselect-label {
-    padding-right: 1.75rem;
+  .p-multiselect.p-variant-filled {
+    background: #3e4053;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #3e4053;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #3e4053;
   }
   .p-multiselect .p-multiselect-label {
     padding: 0.75rem 0.75rem;
@@ -1290,22 +1569,12 @@
     border-top-right-radius: 6px;
     border-bottom-right-radius: 6px;
   }
-  .p-multiselect .p-multiselect-clear-icon {
-    color: rgba(255, 255, 255, 0.6);
-    right: 3rem;
-  }
   .p-multiselect.p-invalid.p-component {
     border-color: #ff9a9a;
   }
   .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
     padding: 0.375rem 0.75rem;
   }
-  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label {
-    padding: 0.75rem 0.75rem;
-  }
-  .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label {
-    padding-right: 1.75rem;
-  }
   .p-multiselect-panel {
     background: #282936;
     color: rgba(255, 255, 255, 0.87);
@@ -1322,9 +1591,6 @@
     border-top-right-radius: 6px;
     border-top-left-radius: 6px;
   }
-  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container {
-    margin: 0 0.5rem;
-  }
   .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
     padding-right: 1.75rem;
   }
@@ -1332,7 +1598,11 @@
     right: 0.75rem;
     color: rgba(255, 255, 255, 0.6);
   }
+  .p-multiselect-panel .p-multiselect-header .p-checkbox {
+    margin-right: 0.5rem;
+  }
   .p-multiselect-panel .p-multiselect-header .p-multiselect-close {
+    margin-left: 0.5rem;
     width: 2rem;
     height: 2rem;
     color: rgba(255, 255, 255, 0.6);
@@ -1363,19 +1633,23 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
   .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
     color: #b19df7;
     background: rgba(177, 157, 247, 0.16);
   }
-  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(177, 157, 247, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(255, 255, 255, 0.03);
   }
-  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #e0d8fc;
-  }
   .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
     margin-right: 0.5rem;
   }
@@ -1391,15 +1665,6 @@
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
   }
-  .p-input-filled .p-multiselect {
-    background: #3e4053;
-  }
-  .p-input-filled .p-multiselect:not(.p-disabled):hover {
-    background-color: #3e4053;
-  }
-  .p-input-filled .p-multiselect:not(.p-disabled).p-focus {
-    background-color: #3e4053;
-  }
   .p-password.p-invalid.p-component > .p-inputtext {
     border-color: #ff9a9a;
   }
@@ -1450,7 +1715,7 @@
     width: 12px;
     height: 12px;
     transition-duration: 0.2s;
-    background-color: hsl(234, 15%, 13%);
+    background-color: hsl(234deg, 15%, 13%);
   }
   .p-radiobutton .p-radiobutton-box.p-highlight {
     border-color: #b19df7;
@@ -1459,7 +1724,7 @@
   .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     border-color: #9378f4;
     background: #9378f4;
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
   }
   .p-radiobutton.p-invalid > .p-radiobutton-box {
     border-color: #ff9a9a;
@@ -1530,20 +1795,20 @@
   .p-selectbutton .p-button.p-highlight {
     background: #b19df7;
     border-color: #b19df7;
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
   }
   .p-selectbutton .p-button.p-highlight .p-button-icon-left,
   .p-selectbutton .p-button.p-highlight .p-button-icon-right {
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
   }
   .p-selectbutton .p-button.p-highlight:hover {
     background: #a28af5;
     border-color: #a28af5;
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
   }
   .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
   .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
   }
   .p-selectbutton.p-invalid > .p-button {
     border-color: #ff9a9a;
@@ -1726,26 +1991,26 @@
   .p-togglebutton.p-button.p-highlight {
     background: #b19df7;
     border-color: #b19df7;
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
   }
   .p-togglebutton.p-button.p-highlight .p-button-icon-left,
   .p-togglebutton.p-button.p-highlight .p-button-icon-right {
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
   }
   .p-togglebutton.p-button.p-highlight:hover {
     background: #a28af5;
     border-color: #a28af5;
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
   }
   .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left,
   .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right {
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
   }
   .p-togglebutton.p-button.p-invalid > .p-button {
     border-color: #ff9a9a;
   }
   .p-button {
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
     background: #b19df7;
     border: 1px solid #b19df7;
     padding: 0.75rem 1.25rem;
@@ -1755,12 +2020,12 @@
   }
   .p-button:not(:disabled):hover {
     background: #a28af5;
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
     border-color: #a28af5;
   }
   .p-button:not(:disabled):active {
     background: #9378f4;
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
     border-color: #9378f4;
   }
   .p-button.p-button-outlined {
@@ -1842,7 +2107,7 @@
     height: 1rem;
     line-height: 1rem;
     color: #b19df7;
-    background-color: hsl(234, 15%, 13%);
+    background-color: hsl(234deg, 15%, 13%);
   }
   .p-button.p-button-raised {
     box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
@@ -2884,10 +3149,6 @@
     border: 0 none;
     padding: 0;
   }
-  .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div {
-    border: solid #3e4053;
-    border-width: 0 0 1px 0;
-  }
   .p-dataview .p-dataview-footer {
     background: #282936;
     color: rgba(255, 255, 255, 0.87);
@@ -3617,7 +3878,7 @@
     border-radius: 50%;
     width: 1rem;
     height: 1rem;
-    background-color: hsl(234, 15%, 13%);
+    background-color: hsl(234deg, 15%, 13%);
   }
   .p-timeline .p-timeline-event-connector {
     background-color: #3e4053;
@@ -4054,7 +4315,7 @@
   }
   .p-overlaypanel .p-overlaypanel-close {
     background: #b19df7;
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
     width: 2rem;
     height: 2rem;
     transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
@@ -4065,7 +4326,7 @@
   }
   .p-overlaypanel .p-overlaypanel-close:enabled:hover {
     background: #a28af5;
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
   }
   .p-overlaypanel:after {
     border: solid transparent;
@@ -5879,7 +6140,7 @@
   }
   .p-tag {
     background: #b19df7;
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
     font-size: 0.75rem;
     font-weight: 700;
     padding: 0.25rem 0.4rem;
@@ -5935,7 +6196,7 @@
     background: #b19df7;
   }
   .p-progressbar .p-progressbar-label {
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
     line-height: 1.5rem;
   }
   .p-terminal {
@@ -5951,7 +6212,7 @@
   }
   .p-badge {
     background: #b19df7;
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
     font-size: 0.75rem;
     font-weight: 700;
     min-width: 1.5rem;
@@ -5992,7 +6253,7 @@
   }
   .p-tag {
     background: #b19df7;
-    color: hsl(234, 15%, 13%);
+    color: hsl(234deg, 15%, 13%);
     font-size: 0.75rem;
     font-weight: 700;
     padding: 0.25rem 0.4rem;