rsuite 5.76.2 → 6.0.0-canary-20250103

package/Uploader/styles/index.css

@@ -1,3 +1,8 @@
+/**
+  * Map mixin
+  * @param {string} @size-name - The size name
+  * @param {string} @suffix - The suffix
+  */
 :root,
 .rs-theme-light {
   --rs-gray-0: #fff;
@@ -362,42 +367,29 @@
 }
 /* stylelint-disable */
 *[class*='rs-'] {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
 }
 *[class*='rs-']::before,
 *[class*='rs-']::after {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
 }
 .rs-btn {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
   display: inline-flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  align-items: center;
+  justify-content: center;
   margin-bottom: 0;
   font-weight: normal;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
   white-space: nowrap;
-  -webkit-transition: color 0.15s ease-out, background-color 0.15s ease-out;
   transition: color 0.15s ease-out, background-color 0.15s ease-out;
-  border: none;
   border: var(--rs-btn-default-border, none);
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   text-decoration: none;
-  color: #343434;
   color: var(--rs-btn-default-text);
-  background-color: #f7f7fa;
   background-color: var(--rs-btn-default-bg);
   border-radius: 6px;
   font-size: 14px;
@@ -407,7 +399,6 @@
   position: relative;
 }
 .rs-theme-high-contrast .rs-btn {
-  -webkit-transition: none;
   transition: none;
 }
 .rs-btn-ghost.rs-btn {
@@ -433,7 +424,6 @@
 }
 .rs-btn-icon-with-text.rs-btn.rs-btn-icon-placement-left > .rs-icon {
   left: 0;
-  border-right: none;
   border-right: var(--rs-btn-default-border, none);
 }
 .rs-btn-icon-with-text.rs-btn.rs-btn-icon-placement-right {
@@ -441,43 +431,35 @@
 }
 .rs-btn-icon-with-text.rs-btn.rs-btn-icon-placement-right > .rs-icon {
   right: 0;
-  border-left: none;
   border-left: var(--rs-btn-default-border, none);
 }
 .rs-btn:focus-visible {
-  outline: 3px solid rgb(from #3498ff r g b / 25%);
   outline: 3px solid var(--rs-color-focus-ring);
 }
 .rs-theme-high-contrast .rs-btn:focus-visible {
   outline-offset: 2px;
 }
-.rs-btn:hover,
-.rs-btn:focus {
+.rs-btn:hover {
   color: var(--rs-btn-default-hover-text);
-  background-color: #e5e5ea;
   background-color: var(--rs-btn-default-hover-bg);
   text-decoration: none;
 }
 .rs-btn:active,
 .rs-btn.rs-btn-active {
-  color: #121212;
   color: var(--rs-btn-default-active-text);
-  background-color: #d9d9d9;
   background-color: var(--rs-btn-default-active-bg);
 }
 .rs-btn:disabled,
 .rs-btn.rs-btn-disabled {
   cursor: not-allowed;
-  color: #717273;
   color: var(--rs-btn-default-disabled-text);
-  background-color: #f7f7fa;
   background-color: var(--rs-btn-default-disabled-bg);
 }
 .rs-theme-high-contrast .rs-btn:disabled,
 .rs-theme-high-contrast .rs-btn.rs-btn-disabled {
   border-color: var(--rs-btn-default-disabled-boreder-color);
 }
-@media not all and (min-resolution: 0.001dpcm) {
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
   .rs-btn {
     /* stylelint-disable */
     -webkit-mask-image: -webkit-radial-gradient(white, black);
@@ -493,31 +475,22 @@
   margin-left: 5px;
 }
 .rs-btn-primary {
-  color: #fff;
   color: var(--rs-btn-primary-text);
-  background-color: #3498ff;
   background-color: var(--rs-btn-primary-bg);
   border: none;
 }
-.rs-btn-primary:hover,
-.rs-btn-primary:focus {
-  color: #fff;
+.rs-btn-primary:hover {
   color: var(--rs-btn-primary-text);
-  background-color: #2589f5;
   background-color: var(--rs-btn-primary-hover-bg);
 }
 .rs-btn-primary:active,
 .rs-btn-primary.rs-btn-active {
-  color: #fff;
   color: var(--rs-btn-primary-text);
-  background-color: #1675e0;
   background-color: var(--rs-btn-primary-active-bg);
 }
 .rs-btn-primary:disabled,
 .rs-btn-primary.rs-btn-disabled {
-  color: #fff;
   color: var(--rs-btn-primary-text);
-  background-color: #3498ff;
   background-color: var(--rs-btn-primary-bg);
   opacity: 0.3;
 }
@@ -526,28 +499,21 @@
   border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 .rs-btn-subtle {
-  color: #343434;
   color: var(--rs-btn-subtle-text);
   background-color: transparent;
   border: none;
 }
-.rs-btn-subtle:hover,
-.rs-btn-subtle:focus {
-  color: #343434;
+.rs-btn-subtle:hover {
   color: var(--rs-btn-subtle-hover-text);
-  background-color: #e5e5ea;
   background-color: var(--rs-btn-subtle-hover-bg);
 }
 .rs-btn-subtle:active,
 .rs-btn-subtle.rs-btn-active {
-  color: #121212;
   color: var(--rs-btn-subtle-active-text);
-  background-color: #e5e5ea;
   background-color: var(--rs-btn-subtle-active-bg);
 }
 .rs-btn-subtle:disabled,
 .rs-btn-subtle.rs-btn-disabled {
-  color: #b6b7b8;
   color: var(--rs-btn-subtle-disabled-text);
   background: none;
 }
@@ -556,27 +522,22 @@
   border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 .rs-btn-link {
-  color: #1675e0;
   color: var(--rs-btn-link-text);
   background-color: transparent;
   border: none;
 }
-.rs-btn-link:hover,
-.rs-btn-link:focus {
-  color: #0a5dc2;
+.rs-btn-link:hover {
   color: var(--rs-btn-link-hover-text);
   background-color: transparent;
   text-decoration: underline;
 }
 .rs-btn-link:active,
 .rs-btn-link.rs-btn-active {
-  color: #004299;
   color: var(--rs-btn-link-active-text);
   background-color: transparent;
 }
 .rs-btn-link:disabled,
 .rs-btn-link.rs-btn-disabled {
-  color: #0a5dc2;
   color: var(--rs-btn-link-hover-text);
   background-color: transparent;
   text-decoration: none;
@@ -587,42 +548,29 @@
   border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 .rs-btn-ghost {
-  color: #1675e0;
   color: var(--rs-btn-ghost-text);
   background-color: transparent;
-  border: 1px solid #1675e0;
   border: 1px solid var(--rs-btn-ghost-border);
 }
-.rs-btn-ghost:hover,
-.rs-btn-ghost:focus {
-  color: #0a5dc2;
+.rs-btn-ghost:hover {
   color: var(--rs-btn-ghost-hover-text);
   background-color: transparent;
-  border-color: #0a5dc2;
   border-color: var(--rs-btn-ghost-hover-border);
-  -webkit-box-shadow: 0 0 0 1px #0a5dc2;
-  -webkit-box-shadow: 0 0 0 1px var(--rs-btn-ghost-hover-border);
-          box-shadow: 0 0 0 1px #0a5dc2;
-          box-shadow: 0 0 0 1px var(--rs-btn-ghost-hover-border);
+  box-shadow: 0 0 0 1px var(--rs-btn-ghost-hover-border);
 }
 .rs-btn-ghost:active,
 .rs-btn-ghost.rs-btn-active {
-  color: #004299;
   color: var(--rs-btn-ghost-active-text);
   background-color: transparent;
-  border-color: #004299;
   border-color: var(--rs-btn-ghost-active-border);
 }
 .rs-btn-ghost:disabled,
 .rs-btn-ghost.rs-btn-disabled {
-  color: #1675e0;
   color: var(--rs-btn-ghost-text);
   background-color: transparent;
   opacity: 0.3;
-  border-color: #1675e0;
   border-color: var(--rs-btn-ghost-border);
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
 }
 .rs-theme-high-contrast .rs-btn-ghost:disabled,
 .rs-theme-high-contrast .rs-btn-ghost.rs-btn-disabled {
@@ -1034,7 +982,6 @@
 }
 .rs-btn-icon-with-text.rs-btn-lg.rs-btn-icon-placement-left > .rs-icon {
   left: 0;
-  border-right: none;
   border-right: var(--rs-btn-default-border, none);
 }
 .rs-btn-icon-with-text.rs-btn-lg.rs-btn-icon-placement-right {
@@ -1042,7 +989,6 @@
 }
 .rs-btn-icon-with-text.rs-btn-lg.rs-btn-icon-placement-right > .rs-icon {
   right: 0;
-  border-left: none;
   border-left: var(--rs-btn-default-border, none);
 }
 .rs-btn-md {
@@ -1073,7 +1019,6 @@
 }
 .rs-btn-icon-with-text.rs-btn-md.rs-btn-icon-placement-left > .rs-icon {
   left: 0;
-  border-right: none;
   border-right: var(--rs-btn-default-border, none);
 }
 .rs-btn-icon-with-text.rs-btn-md.rs-btn-icon-placement-right {
@@ -1081,7 +1026,6 @@
 }
 .rs-btn-icon-with-text.rs-btn-md.rs-btn-icon-placement-right > .rs-icon {
   right: 0;
-  border-left: none;
   border-left: var(--rs-btn-default-border, none);
 }
 .rs-btn-sm {
@@ -1112,7 +1056,6 @@
 }
 .rs-btn-icon-with-text.rs-btn-sm.rs-btn-icon-placement-left > .rs-icon {
   left: 0;
-  border-right: none;
   border-right: var(--rs-btn-default-border, none);
 }
 .rs-btn-icon-with-text.rs-btn-sm.rs-btn-icon-placement-right {
@@ -1120,7 +1063,6 @@
 }
 .rs-btn-icon-with-text.rs-btn-sm.rs-btn-icon-placement-right > .rs-icon {
   right: 0;
-  border-left: none;
   border-left: var(--rs-btn-default-border, none);
 }
 .rs-btn-xs {
@@ -1151,7 +1093,6 @@
 }
 .rs-btn-icon-with-text.rs-btn-xs.rs-btn-icon-placement-left > .rs-icon {
   left: 0;
-  border-right: none;
   border-right: var(--rs-btn-default-border, none);
 }
 .rs-btn-icon-with-text.rs-btn-xs.rs-btn-icon-placement-right {
@@ -1159,7 +1100,6 @@
 }
 .rs-btn-icon-with-text.rs-btn-xs.rs-btn-icon-placement-right > .rs-icon {
   right: 0;
-  border-left: none;
   border-left: var(--rs-btn-default-border, none);
 }
 .rs-btn-block {
@@ -1194,49 +1134,32 @@
   height: 16px;
 }
 .rs-btn-loading > .rs-btn-spin::before {
-  border: 3px solid rgb(from #f7f7fa r g b / 80%);
   border: 3px solid var(--rs-loader-ring);
 }
 .rs-btn-primary.rs-btn-loading > .rs-btn-spin::before {
   border-color: rgba(248, 247, 250, 0.3);
 }
 .rs-theme-high-contrast .rs-btn-primary.rs-btn-loading > .rs-btn-spin::before {
-  border-color: rgb(from #f7f7fa r g b / 30%);
   border-color: var(--rs-loader-ring-inverse);
 }
 .rs-btn-loading > .rs-btn-spin::after {
   border-width: 3px;
-  border-color: #939393 transparent transparent;
   border-color: var(--rs-loader-rotor) transparent transparent;
   border-style: solid;
-  -webkit-animation: buttonSpin 0.6s infinite linear;
-          animation: buttonSpin 0.6s infinite linear;
+  animation: buttonSpin 0.6s infinite linear;
 }
 .rs-btn-primary.rs-btn-loading > .rs-btn-spin::after {
   border-top-color: #fff;
 }
 .rs-theme-high-contrast .rs-btn-primary.rs-btn-loading > .rs-btn-spin::after {
-  border-top-color: #fff;
   border-top-color: var(--rs-loader-rotor-inverse);
 }
-@-webkit-keyframes buttonSpin {
-  from {
-    -webkit-transform: rotate(0);
-            transform: rotate(0);
-  }
-  to {
-    -webkit-transform: rotate(360deg);
-            transform: rotate(360deg);
-  }
-}
 @keyframes buttonSpin {
   from {
-    -webkit-transform: rotate(0);
-            transform: rotate(0);
+    transform: rotate(0);
   }
   to {
-    -webkit-transform: rotate(360deg);
-            transform: rotate(360deg);
+    transform: rotate(360deg);
   }
 }
 .rs-uploader-trigger input[type='file'] {
@@ -1259,7 +1182,6 @@
 .rs-uploader-file-item-icon-reupload {
   cursor: pointer;
   margin-left: 10px;
-  color: #343434;
   color: var(--rs-text-primary);
   font-size: 12px;
 }
@@ -1273,28 +1195,20 @@
 .rs-uploader-text .rs-uploader-file-item {
   padding: 8px 30px 8px 36px;
   position: relative;
-  -webkit-transition: 0.3s linear background-color;
   transition: 0.3s linear background-color;
 }
 .rs-uploader-text .rs-uploader-file-item:hover {
-  background-color: #f7f7fa;
   background-color: var(--rs-uploader-item-hover-bg);
 }
 .rs-uploader-text .rs-uploader-file-item-icon-wrapper {
   position: absolute;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
   display: inline-flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   top: 8px;
   left: 12px;
   width: 20px;
   height: 20px;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
 }
 .rs-uploader-text .rs-uploader-file-item-icon-loading .rs-uploader-file-item-icon {
   width: 18px;
@@ -1315,30 +1229,21 @@
   border-radius: 50%;
 }
 .rs-uploader-text .rs-uploader-file-item-icon-loading .rs-uploader-file-item-icon::before {
-  border: 3px solid rgb(from #f7f7fa r g b / 80%);
   border: 3px solid var(--rs-loader-ring);
 }
 .rs-uploader-text .rs-uploader-file-item-icon-loading .rs-uploader-file-item-icon::after {
   border-width: 3px;
   border-style: solid;
-  border-color: #939393 transparent transparent;
   border-color: var(--rs-loader-rotor) transparent transparent;
-  -webkit-animation: loaderSpin 0.6s infinite linear;
-          animation: loaderSpin 0.6s infinite linear;
+  animation: loaderSpin 0.6s infinite linear;
 }
 .rs-uploader-text .rs-uploader-file-item-icon-loading .rs-uploader-file-item-icon > svg {
   display: none;
 }
 .rs-uploader-text .rs-uploader-file-item-content {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-  color: #343434;
+  justify-content: space-between;
   color: var(--rs-text-primary);
-  -webkit-transition: color 0.3s;
   transition: color 0.3s;
 }
 .rs-uploader-text .rs-uploader-file-item-title {
@@ -1346,22 +1251,15 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 100%;
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
+  flex: 1 1 auto;
 }
 .rs-uploader-text .rs-uploader-file-item-size {
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
-  color: #717273;
+  flex: 0 0 auto;
   color: var(--rs-text-secondary);
   padding: 0 8px;
 }
 .rs-uploader-text .rs-uploader-file-item-status {
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
+  flex: 0 0 auto;
 }
 .rs-uploader-text .rs-uploader-file-item-status > a {
   text-decoration: none;
@@ -1376,7 +1274,6 @@
   font-size: 14px;
   top: 12px;
   right: 12px;
-  color: #717273;
   color: var(--rs-text-secondary);
   cursor: pointer;
   padding: 0;
@@ -1396,14 +1293,11 @@
 }
 .rs-uploader-text .rs-uploader-file-item-progress-bar {
   height: 2px;
-  background-color: #3498ff;
   background-color: var(--rs-primary-500);
-  -webkit-transition: width 0.3s ease-in-out;
   transition: width 0.3s ease-in-out;
 }
 .rs-uploader-text .rs-uploader-file-item-has-error .rs-uploader-file-item-content,
 .rs-uploader-text .rs-uploader-file-item-has-error .rs-uploader-file-item-title {
-  color: #f44336;
   color: var(--rs-state-error);
 }
 .rs-uploader-picture {
@@ -1418,40 +1312,28 @@
   clear: both;
 }
 .rs-uploader-picture .rs-uploader-trigger-btn {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
   display: inline-flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  align-items: center;
+  justify-content: center;
   margin-bottom: 0;
   font-weight: normal;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
   white-space: nowrap;
-  -webkit-transition: color 0.15s ease-out, background-color 0.15s ease-out;
   transition: color 0.15s ease-out, background-color 0.15s ease-out;
-  border: none;
   border: var(--rs-btn-default-border, none);
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   text-decoration: none;
-  color: #343434;
   color: var(--rs-btn-default-text);
-  background-color: #f7f7fa;
   background-color: var(--rs-btn-default-bg);
   font-size: 14px;
   line-height: 20px;
   padding: 8px 12px;
   overflow: hidden;
   position: relative;
-  color: #343434;
   color: var(--rs-btn-subtle-text);
   background-color: transparent;
   border: none;
@@ -1459,13 +1341,11 @@
   height: 66px;
   margin: 0;
   padding: 0;
-  border: 2px dotted #e5e5ea;
   border: 2px dotted var(--rs-border-primary);
   border-radius: 6px;
   margin-top: 10px;
 }
 .rs-theme-high-contrast .rs-uploader-picture .rs-uploader-trigger-btn {
-  -webkit-transition: none;
   transition: none;
 }
 .rs-btn-ghost.rs-uploader-picture .rs-uploader-trigger-btn {
@@ -1491,7 +1371,6 @@
 }
 .rs-btn-icon-with-text.rs-uploader-picture .rs-uploader-trigger-btn.rs-btn-icon-placement-left > .rs-icon {
   left: 0;
-  border-right: none;
   border-right: var(--rs-btn-default-border, none);
 }
 .rs-btn-icon-with-text.rs-uploader-picture .rs-uploader-trigger-btn.rs-btn-icon-placement-right {
@@ -1499,66 +1378,52 @@
 }
 .rs-btn-icon-with-text.rs-uploader-picture .rs-uploader-trigger-btn.rs-btn-icon-placement-right > .rs-icon {
   right: 0;
-  border-left: none;
   border-left: var(--rs-btn-default-border, none);
 }
 .rs-uploader-picture .rs-uploader-trigger-btn:focus-visible {
-  outline: 3px solid rgb(from #3498ff r g b / 25%);
   outline: 3px solid var(--rs-color-focus-ring);
 }
 .rs-theme-high-contrast .rs-uploader-picture .rs-uploader-trigger-btn:focus-visible {
   outline-offset: 2px;
 }
-.rs-uploader-picture .rs-uploader-trigger-btn:hover,
-.rs-uploader-picture .rs-uploader-trigger-btn:focus {
+.rs-uploader-picture .rs-uploader-trigger-btn:hover {
   color: var(--rs-btn-default-hover-text);
-  background-color: #e5e5ea;
   background-color: var(--rs-btn-default-hover-bg);
   text-decoration: none;
 }
 .rs-uploader-picture .rs-uploader-trigger-btn:active,
 .rs-uploader-picture .rs-uploader-trigger-btn.rs-btn-active {
-  color: #121212;
   color: var(--rs-btn-default-active-text);
-  background-color: #d9d9d9;
   background-color: var(--rs-btn-default-active-bg);
 }
 .rs-uploader-picture .rs-uploader-trigger-btn:disabled,
 .rs-uploader-picture .rs-uploader-trigger-btn.rs-btn-disabled {
   cursor: not-allowed;
-  color: #717273;
   color: var(--rs-btn-default-disabled-text);
-  background-color: #f7f7fa;
   background-color: var(--rs-btn-default-disabled-bg);
 }
 .rs-theme-high-contrast .rs-uploader-picture .rs-uploader-trigger-btn:disabled,
 .rs-theme-high-contrast .rs-uploader-picture .rs-uploader-trigger-btn.rs-btn-disabled {
   border-color: var(--rs-btn-default-disabled-boreder-color);
 }
-@media not all and (min-resolution: 0.001dpcm) {
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
   .rs-uploader-picture .rs-uploader-trigger-btn {
     /* stylelint-disable */
     -webkit-mask-image: -webkit-radial-gradient(white, black);
     /* stylelint-enable */
   }
 }
-.rs-uploader-picture .rs-uploader-trigger-btn:hover,
-.rs-uploader-picture .rs-uploader-trigger-btn:focus {
-  color: #343434;
+.rs-uploader-picture .rs-uploader-trigger-btn:hover {
   color: var(--rs-btn-subtle-hover-text);
-  background-color: #e5e5ea;
   background-color: var(--rs-btn-subtle-hover-bg);
 }
 .rs-uploader-picture .rs-uploader-trigger-btn:active,
 .rs-uploader-picture .rs-uploader-trigger-btn.rs-btn-active {
-  color: #121212;
   color: var(--rs-btn-subtle-active-text);
-  background-color: #e5e5ea;
   background-color: var(--rs-btn-subtle-active-bg);
 }
 .rs-uploader-picture .rs-uploader-trigger-btn:disabled,
 .rs-uploader-picture .rs-uploader-trigger-btn.rs-btn-disabled {
-  color: #b6b7b8;
   color: var(--rs-btn-subtle-disabled-text);
   background: none;
 }
@@ -1567,7 +1432,6 @@
   border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 .rs-uploader-picture .rs-uploader-trigger.rs-uploader-trigger-disabled .rs-uploader-trigger-btn {
-  color: #343434 !important;
   color: var(--rs-btn-subtle-text) !important;
   background-color: transparent !important;
 }
@@ -1585,7 +1449,6 @@
   width: 66px;
   height: 66px;
   overflow: hidden;
-  background-color: #d9d9d9;
   background-color: var(--rs-uploader-item-bg);
   border-radius: 6px;
   position: relative;
@@ -1622,24 +1485,13 @@
   height: 66px;
   text-align: center;
   z-index: 3;
-  background-color: rgb(from #fff r g b / 80%);
   background-color: var(--rs-uploader-overlay-bg);
   cursor: default;
-  color: #f44336;
   color: var(--rs-state-error);
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 .rs-uploader-picture .rs-uploader-file-item-status > span {
   white-space: nowrap;
@@ -1651,7 +1503,6 @@
   display: none;
 }
 .rs-uploader-picture .rs-uploader-file-item-btn-remove {
-  color: #717273;
   color: var(--rs-text-secondary);
   cursor: pointer;
   position: absolute;
@@ -1661,23 +1512,15 @@
   height: 24px;
   line-height: 24px;
   text-align: center;
-  background-color: rgb(from #fff r g b / 80%);
   background-color: var(--rs-uploader-overlay-bg);
   border-radius: 50%;
   visibility: hidden;
   opacity: 0;
-  -webkit-transition: 0.2s opacity;
   transition: 0.2s opacity;
   z-index: 4;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  align-items: center;
+  justify-content: center;
   padding-top: 0;
 }
 .rs-uploader-picture .rs-uploader-file-item-btn-remove:hover,
@@ -1693,7 +1536,6 @@
   width: 66px;
   height: 66px;
   line-height: 66px;
-  background-color: rgb(from #fff r g b / 80%);
   background-color: var(--rs-uploader-overlay-bg);
   position: absolute;
   top: 0;
@@ -1722,16 +1564,13 @@
   border-radius: 50%;
 }
 .rs-uploader-picture .rs-uploader-file-item-icon-loading .rs-uploader-file-item-icon::before {
-  border: 3px solid rgb(from #f7f7fa r g b / 80%);
   border: 3px solid var(--rs-loader-ring);
 }
 .rs-uploader-picture .rs-uploader-file-item-icon-loading .rs-uploader-file-item-icon::after {
   border-width: 3px;
   border-style: solid;
-  border-color: #939393 transparent transparent;
   border-color: var(--rs-loader-rotor) transparent transparent;
-  -webkit-animation: loaderSpin 0.6s infinite linear;
-          animation: loaderSpin 0.6s infinite linear;
+  animation: loaderSpin 0.6s infinite linear;
 }
 .rs-uploader-picture .rs-uploader-file-item-icon-loading .rs-uploader-file-item-icon > svg {
   display: none;
@@ -1746,15 +1585,12 @@
   padding-left: 50px;
   margin-top: 10px;
   padding-right: 30px;
-  border: 1px solid #e5e5ea;
   border: 1px solid var(--rs-border-primary);
   border-radius: 6px;
   overflow: hidden;
-  -webkit-transition: 0.3s linear background-color;
   transition: 0.3s linear background-color;
 }
 .rs-uploader-picture-text .rs-uploader-file-item:hover {
-  background-color: #f7f7fa;
   background-color: var(--rs-uploader-item-hover-bg);
 }
 .rs-uploader-picture-text .rs-uploader-file-item-icon-wrapper {
@@ -1768,7 +1604,6 @@
   height: 50px;
   vertical-align: middle;
   text-align: center;
-  background-color: #e5e5ea;
   background-color: var(--rs-border-primary);
   overflow: hidden;
   border-radius: 6px 0 0 6px;
@@ -1796,7 +1631,6 @@
   display: block;
 }
 .rs-uploader-picture-text .rs-uploader-file-item-content .rs-uploader-file-item-title {
-  color: #343434;
   color: var(--rs-text-primary);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1804,26 +1638,18 @@
   width: 100%;
 }
 .rs-uploader-picture-text .rs-uploader-file-item-content .rs-uploader-file-item-size {
-  color: #717273;
   color: var(--rs-text-secondary);
 }
 .rs-uploader-picture-text .rs-uploader-file-item-btn-remove {
   position: absolute;
   top: 0;
   right: 12px;
-  color: #717273;
   color: var(--rs-text-secondary);
   cursor: pointer;
   height: 50px;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  align-items: center;
+  justify-content: center;
   padding: 0;
 }
 .rs-uploader-picture-text .rs-uploader-file-item-btn-remove:hover,
@@ -1839,9 +1665,7 @@
 }
 .rs-uploader-picture-text .rs-uploader-file-item-progress-bar {
   height: 2px;
-  background-color: #3498ff;
   background-color: var(--rs-primary-500);
-  -webkit-transition: width 0.3s ease-in-out;
   transition: width 0.3s ease-in-out;
 }
 .rs-uploader-picture-text .rs-uploader-file-item-icon-loading {
@@ -1852,7 +1676,6 @@
   width: 50px;
   height: 50px;
   z-index: 1;
-  background-color: #e5e5ea;
   background-color: var(--rs-border-primary);
   text-align: center;
   line-height: 50px;
@@ -1878,16 +1701,13 @@
   border-radius: 50%;
 }
 .rs-uploader-picture-text .rs-uploader-file-item-icon-loading .rs-uploader-file-item-icon::before {
-  border: 3px solid rgb(from #f7f7fa r g b / 80%);
   border: 3px solid var(--rs-loader-ring);
 }
 .rs-uploader-picture-text .rs-uploader-file-item-icon-loading .rs-uploader-file-item-icon::after {
   border-width: 3px;
   border-style: solid;
-  border-color: #939393 transparent transparent;
   border-color: var(--rs-loader-rotor) transparent transparent;
-  -webkit-animation: loaderSpin 0.6s infinite linear;
-          animation: loaderSpin 0.6s infinite linear;
+  animation: loaderSpin 0.6s infinite linear;
 }
 .rs-uploader-picture-text .rs-uploader-file-item-icon-loading .rs-uploader-file-item-icon > svg {
   display: none;
@@ -1898,19 +1718,15 @@
 .rs-uploader-picture-text .rs-uploader-file-item-has-error .rs-uploader-file-item-title,
 .rs-uploader-picture-text .rs-uploader-file-item-has-error .rs-uploader-file-item-status {
   display: block;
-  color: #f44336;
   color: var(--rs-state-error);
 }
 .rs-uploader-draggable .rs-uploader-trigger-customize .rs-uploader-trigger-btn {
   display: block;
-  background: #fff;
   background: var(--rs-uploader-dnd-bg);
-  border: 1px dashed #e5e5ea;
   border: 1px dashed var(--rs-uploader-dnd-border);
 }
 .rs-uploader-draggable .rs-uploader-trigger.rs-uploader-trigger-customize:not(.rs-uploader-trigger-disabled) .rs-uploader-trigger-btn:hover,
 .rs-uploader-draggable .rs-uploader-trigger-drag-over .rs-uploader-trigger-btn.rs-uploader-trigger-customize {
-  border-color: #3498ff;
   border-color: var(--rs-uploader-dnd-hover-border);
 }
 .rs-uploader-draggable .rs-uploader-trigger-disabled {