sparta-ui 3.48.0 → 3.49.1

package/lib/{plusCashier → sdkBaoxue}/index.css

@@ -112,7 +112,7 @@ table {
 }
 *::-webkit-scrollbar-thumb {
   border-radius: 10px;
-  background-color: #eaeaea;
+  background-color: #363738;
 }
 
 a {
@@ -131,30 +131,30 @@ button {
 }
 
 input::-webkit-input-placeholder {
-  color: #bfbfbf;
+  color: rgba(255, 255, 255, 0.4);
 }
 
 input::-moz-placeholder {
-  color: #bfbfbf;
+  color: rgba(255, 255, 255, 0.4);
 }
 
 input::-ms-input-placeholder {
-  color: #bfbfbf;
+  color: rgba(255, 255, 255, 0.4);
 }
 
 input::placeholder {
-  color: #bfbfbf;
+  color: rgba(255, 255, 255, 0.4);
 }
 
 /* 更改光标颜色 */
 input, textarea {
-  caret-color: #e8292c; /* 将光标颜色设置为红色 */
+  caret-color: #d83024; /* 将光标颜色设置为红色 */
 }
 
 /* stylelint-disable */
 @font-face {
   font-family: "sparta-icons"; /* Project id 4871700 */
-  src: url(~sparta-ui/lib/plusCashier/font/iconfont.woff2) format("woff2"), url(~sparta-ui/lib/plusCashier/font/iconfont.woff) format("woff"), url(~sparta-ui/lib/plusCashier/font/iconfont.ttf) format("truetype");
+  src: url(~sparta-ui/lib/sdkBaoxue/font/iconfont.woff2) format("woff2"), url(~sparta-ui/lib/sdkBaoxue/font/iconfont.woff) format("woff"), url(~sparta-ui/lib/sdkBaoxue/font/iconfont.ttf) format("truetype");
 }
 .sparta-icons {
   font-family: "sparta-icons" !important;
@@ -407,6 +407,69 @@ input, textarea {
   -webkit-animation-name: toast-fade-out-up;
           animation-name: toast-fade-out-up;
 }
+/* Transition
+-------------------------- */
+/* Colors
+-------------------------- */
+/* Shadow
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Scrollbar
+-------------------------- */
+/* Border
+-------------------------- */
+/* Button
+-------------------------- */
+/* PasswordInput
+-------------------------- */
+/* Input
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Option
+-------------------------- */
+/* Form
+-------------------------- */
+/* Modal
+-------------------------- */
+/* Toast
+-------------------------- */
+/* Confirm
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Break-point
+-------------------------- */
+.sp-radio__wrap .sp-radio__inner::after {
+  width: 12px;
+  height: 12px;
+}
+
+.sp-input .sp-input__inner {
+  background-color: transparent;
+}
+.sp-input .sp-input__clear.sp-icon-close-bold {
+  color: #14181d;
+  background-color: rgba(255, 255, 255, 0.4);
+}
+
+.sp-modal-wrap .sp-modal-content {
+  border: 1px solid #4d4d4d;
+  -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+          box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.sp-select .sp-icon-close-bold,
+.sp-select .sp-icon-arrow-down-bold {
+  color: rgba(255, 255, 255, 0.6);
+}
 @charset "UTF-8";
 /* Transition
 -------------------------- */
@@ -519,10 +582,10 @@ input, textarea {
   display: inline-block;
   white-space: nowrap;
   cursor: pointer;
-  background: #ffe9e6;
-  border: 1px solid #eaeaea;
-  border-color: #ffe9e6;
-  color: #e8292c;
+  background: transparent;
+  border: 1px solid #4d4d4d;
+  border-color: #3172d9;
+  color: #3172d9;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -548,13 +611,13 @@ input, textarea {
   margin-left: 10px;
 }
 .sp-button:hover {
-  background-color: #fbe1de;
+  background-color: transparent;
 }
 .sp-button:active, .sp-button:active:focus {
-  background-color: #fbe1de;
+  background-color: transparent;
 }
 .sp-button:focus {
-  background-color: #ffe9e6;
+  background-color: transparent;
 }
 .sp-button::-moz-focus-inner {
   border: 0;
@@ -564,32 +627,33 @@ input, textarea {
   font-size: 14px;
 }
 .sp-button.is--plain {
-  border-color: #e8292c;
-  background-color: #fff;
+  color: rgba(255, 255, 255, 0.8);
+  border-color: #4d4d4d;
+  background-color: transparent;
 }
 .sp-button.is--plain:hover {
-  background: #ffe9e6;
-  color: #e8292c;
+  background: rgba(255, 255, 255, 0.05);
+  color: rgba(255, 255, 255, 0.8);
   opacity: 1;
 }
 .sp-button.is--plain:active, .sp-button.is--plain:active:focus {
-  background-color: #fbe1de;
+  background-color: rgba(255, 255, 255, 0.1);
   opacity: 1;
 }
 .sp-button.is--plain:focus {
-  background-color: #fff;
+  background-color: transparent;
 }
 .sp-button.is--disabled, .sp-button.is--disabled:hover, .sp-button.is--disabled:focus {
-  color: #fff;
+  color: rgba(255, 255, 255, 0.4);
   cursor: not-allowed;
   background-image: none;
-  background-color: #f6aaab;
-  border-color: #f6aaab;
+  background-color: #254e8e;
+  border-color: #254e8e;
 }
 .sp-button.is--disabled.is--plain, .sp-button.is--disabled.is--plain:hover, .sp-button.is--disabled.is--plain:focus {
-  background-color: #fff;
-  border-color: #ededed;
-  color: #bfbfbf;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: #4d4d4d;
+  color: rgba(255, 255, 255, 0.4);
   opacity: 1;
 }
 .sp-button.is--loading {
@@ -610,77 +674,77 @@ input, textarea {
 .sp-button.is--plain.is--loading {
   position: relative;
   pointer-events: none;
-  color: rgba(232, 41, 44, 0.5);
+  color: rgba(49, 114, 217, 0.5);
 }
 .sp-button--primary {
-  background-color: #e8292c;
-  border-color: #e8292c;
+  background-color: #3172d9;
+  border-color: #3172d9;
   color: #fff;
 }
 .sp-button--primary:hover {
-  background-color: #d71b1e;
-  border-color: #d71b1e;
+  background-color: #2c67c4;
+  border-color: #2c67c4;
 }
 .sp-button--primary:focus, .sp-button--primary:active {
-  background-color: #e8292c;
-  border-color: #e8292c;
+  background-color: #3172d9;
+  border-color: #3172d9;
 }
 .sp-button--primary:active, .sp-button--primary:active:focus {
-  background-color: #d71b1e;
-  border-color: #d71b1e;
+  background-color: #285cad;
+  border-color: #285cad;
 }
 .sp-button--primary:focus {
-  background-color: #e8292c;
-  border-color: #e8292c;
+  background-color: #3172d9;
+  border-color: #3172d9;
 }
 .sp-button--info {
-  background-color: #909399;
-  border-color: #909399;
-  color: #fff;
+  background-color: transparent;
+  border-color: #3172d9;
+  color: #3172d9;
 }
 .sp-button--info:hover {
-  background-color: #a6a9ad;
-  border-color: #a6a9ad;
+  background-color: transparent;
+  border-color: #3172d9;
 }
 .sp-button--info:focus, .sp-button--info:active {
-  background-color: #a6a9ad;
-  border-color: #a6a9ad;
+  background-color: transparent;
+  border-color: #3172d9;
 }
 .sp-button--info:active, .sp-button--info:active:focus {
-  background-color: #82848a;
-  border-color: #82848a;
+  background-color: transparent;
+  border-color: #3172d9;
 }
 .sp-button--info:focus {
-  background-color: #a6a9ad;
-  border-color: #a6a9ad;
+  background-color: transparent;
+  border-color: #3172d9;
 }
 .sp-button--info.is--plain {
-  border-color: #eaeaea;
-  color: #808080;
-  background-color: #fff;
+  border-color: #3172d9;
+  color: #3172d9;
+  background-color: transparent;
 }
 .sp-button--info.is--plain:hover {
-  background-color: #f7f7f7;
-  border-color: #eaeaea;
-  color: #808080;
+  background-color: rgba(255, 255, 255, 0.05);
+  border-color: #3172d9;
+  color: #3172d9;
 }
 .sp-button--info.is--plain:focus, .sp-button--info.is--plain:active {
-  background-color: #f7f7f7;
-  border-color: #eaeaea;
-  color: #808080;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: #3172d9;
+  color: #3172d9;
 }
 .sp-button--info.is--plain:active, .sp-button--info.is--plain:active:focus {
-  background-color: #f7f7f7;
-  border-color: #eaeaea;
-  color: #808080;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: #3172d9;
+  color: #3172d9;
 }
 .sp-button--info.is--plain:focus {
-  background-color: #f7f7f7;
-  border-color: #eaeaea;
-  color: #808080;
+  border-color: #3172d9;
+  color: #3172d9;
+  background-color: transparent;
 }
 .sp-button--info.is--plain.is--loading {
-  color: #bfbfbf;
+  color: rgba(255, 255, 255, 0.4);
 }
 .sp-button--medium {
   min-width: 108px;
@@ -703,7 +767,7 @@ input, textarea {
 .sp-button--text {
   border-color: transparent;
   background: transparent;
-  color: #1167dc;
+  color: #63a6ff;
   padding: 0;
   min-width: auto;
   height: auto;
@@ -712,22 +776,22 @@ input, textarea {
 .sp-button--text:hover {
   border-color: transparent;
   background-color: transparent;
-  color: #1062d1;
+  color: #63a6ff;
 }
 .sp-button--text:active, .sp-button--text:active:focus {
   border-color: transparent;
   background-color: transparent;
-  color: #0f5dc7;
+  color: #1167dc;
 }
 .sp-button--text:focus {
   background-color: transparent;
   border-color: transparent;
-  color: #1167dc;
+  color: #63a6ff;
 }
 .sp-button--text.is--disabled, .sp-button--text.is--disabled:hover, .sp-button--text.is--disabled:focus {
   border-color: transparent;
   background-color: transparent;
-  color: #bfbfbf;
+  color: rgba(255, 255, 255, 0.4);
 }
 @charset "UTF-8";
 /* Transition
@@ -787,25 +851,25 @@ input, textarea {
           box-sizing: border-box;
   width: 100%;
   font-size: inherit;
-  color: #1a1a1a;
-  background-color: #fff;
+  color: #fff;
+  background-color: transparent;
   background-image: none;
-  border: 1px solid #eaeaea;
+  border: 1px solid #4d4d4d;
   border-radius: 6px;
   -webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
   transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 .sp-textarea .sp-textarea__inner::-webkit-input-placeholder {
-  color: #bfbfbf;
+  color: rgba(255, 255, 255, 0.4);
 }
 .sp-textarea .sp-textarea__inner::-moz-placeholder {
-  color: #bfbfbf;
+  color: rgba(255, 255, 255, 0.4);
 }
 .sp-textarea .sp-textarea__inner::-ms-input-placeholder {
-  color: #bfbfbf;
+  color: rgba(255, 255, 255, 0.4);
 }
 .sp-textarea .sp-textarea__inner::placeholder {
-  color: #bfbfbf;
+  color: rgba(255, 255, 255, 0.4);
 }
 .sp-textarea .sp-textarea__inner:hover {
   border-color: #ccc;
@@ -817,29 +881,29 @@ input, textarea {
           box-shadow: none;
 }
 .sp-textarea .sp-textarea.is--disabled .sp-textarea__inner {
-  background-color: #ededed;
-  border-color: #eaeaea;
-  color: #bfbfbf;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: #4d4d4d;
+  color: rgba(255, 255, 255, 0.4);
   cursor: not-allowed;
 }
 .sp-textarea .sp-textarea.is--disabled .sp-textarea__inner::-webkit-input-placeholder {
-  color: #bfbfbf;
+  color: rgba(255, 255, 255, 0.4);
 }
 .sp-textarea .sp-textarea.is--disabled .sp-textarea__inner::-moz-placeholder {
-  color: #bfbfbf;
+  color: rgba(255, 255, 255, 0.4);
 }
 .sp-textarea .sp-textarea.is--disabled .sp-textarea__inner::-ms-input-placeholder {
-  color: #bfbfbf;
+  color: rgba(255, 255, 255, 0.4);
 }
 .sp-textarea .sp-textarea.is--disabled .sp-textarea__inner::placeholder {
-  color: #bfbfbf;
+  color: rgba(255, 255, 255, 0.4);
 }
 .sp-textarea .sp-textarea.is--readonly .sp-textarea__inner {
-  background-color: #f7f7f7;
-  color: #1a1a1a;
+  background-color: rgba(255, 255, 255, 0.1);
+  color: #fff;
 }
 .sp-textarea .sp-textarea.is--readonly .sp-textarea__inner:hover, .sp-textarea .sp-textarea.is--readonly .sp-textarea__inner:focus {
-  border: 1px solid #eaeaea;
+  border: 1px solid #4d4d4d;
   -webkit-box-shadow: none;
           box-shadow: none;
 }
@@ -849,7 +913,7 @@ input, textarea {
   bottom: 7px;
   right: 10px;
   font-size: inherit;
-  color: #bfbfbf;
+  color: rgba(255, 255, 255, 0.4);
   line-height: 1.5;
   outline: none;
   padding: 0 10px;
@@ -876,7 +940,7 @@ input, textarea {
   height: 18px;
   border-radius: 50%;
   color: #fff;
-  background-color: #ccc;
+  background-color: rgba(255, 255, 255, 0.6);
   font-size: 12px;
   line-height: 18px;
   cursor: pointer;
@@ -889,10 +953,10 @@ input, textarea {
   background-color: #fff;
   background-image: none;
   border-radius: 6px;
-  border: 1px solid #eaeaea;
+  border: 1px solid #4d4d4d;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  color: #1a1a1a;
+  color: #fff;
   display: inline-block;
   font-size: inherit;
   height: 44px;
@@ -907,16 +971,16 @@ input, textarea {
   /* 去掉搜狗浏览器密码软盘 */
 }
 .sp-input__inner::-webkit-input-placeholder {
-  color: #bfbfbf;
+  color: rgba(255, 255, 255, 0.4);
 }
 .sp-input__inner::-moz-placeholder {
-  color: #bfbfbf;
+  color: rgba(255, 255, 255, 0.4);
 }
 .sp-input__inner::-ms-input-placeholder {
-  color: #bfbfbf;
+  color: rgba(255, 255, 255, 0.4);
 }
 .sp-input__inner::placeholder {
-  color: #bfbfbf;
+  color: rgba(255, 255, 255, 0.4);
 }
 .sp-input__inner:hover {
   border-color: #ccc;
@@ -949,7 +1013,7 @@ input, textarea {
   top: 0;
   width: 36px;
   text-align: center;
-  color: #bfbfbf;
+  color: rgba(255, 255, 255, 0.4);
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
   pointer-events: none;
@@ -964,7 +1028,7 @@ input, textarea {
   top: 0;
   width: 36px;
   text-align: center;
-  color: #bfbfbf;
+  color: rgba(255, 255, 255, 0.4);
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
@@ -993,32 +1057,32 @@ input, textarea {
           box-shadow: none;
 }
 .sp-input.is--disabled .sp-input__inner {
-  background-color: #ededed;
-  border-color: #eaeaea;
-  color: #bfbfbf;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: #4d4d4d;
+  color: rgba(255, 255, 255, 0.4);
   cursor: not-allowed;
 }
 .sp-input.is--disabled .sp-input__inner::-webkit-input-placeholder {
-  color: #bfbfbf;
+  color: rgba(255, 255, 255, 0.4);
 }
 .sp-input.is--disabled .sp-input__inner::-moz-placeholder {
-  color: #bfbfbf;
+  color: rgba(255, 255, 255, 0.4);
 }
 .sp-input.is--disabled .sp-input__inner::-ms-input-placeholder {
-  color: #bfbfbf;
+  color: rgba(255, 255, 255, 0.4);
 }
 .sp-input.is--disabled .sp-input__inner::placeholder {
-  color: #bfbfbf;
+  color: rgba(255, 255, 255, 0.4);
 }
 .sp-input.is--disabled .sp-input__icon {
   cursor: not-allowed;
 }
 .sp-input.is--readonly .sp-input__inner {
-  background-color: #f7f7f7;
-  color: #1a1a1a;
+  background-color: rgba(255, 255, 255, 0.1);
+  color: #fff;
 }
 .sp-input.is--readonly .sp-input__inner:hover, .sp-input.is--readonly .sp-input__inner:focus {
-  border: 1px solid #eaeaea;
+  border: 1px solid #4d4d4d;
   -webkit-box-shadow: none;
           box-shadow: none;
 }
@@ -1063,7 +1127,7 @@ input, textarea {
   top: 0;
   bottom: 0;
   font-size: inherit;
-  color: #bfbfbf;
+  color: rgba(255, 255, 255, 0.4);
   line-height: 44px;
   outline: none;
   padding: 0 10px;
@@ -1090,12 +1154,12 @@ input, textarea {
   display: table-cell;
 }
 .sp-input-group__append, .sp-input-group__prepend {
-  background-color: #fff;
+  background-color: transparent;
   color: #808080;
   vertical-align: middle;
   display: table-cell;
   position: relative;
-  border: 1px solid #eaeaea;
+  border: 1px solid #4d4d4d;
   border-radius: 6px;
   padding: 0 10px;
   width: 1px;
@@ -1180,12 +1244,12 @@ input, textarea {
   bottom: 46px;
   left: 0;
   right: 0;
-  background-color: #f3f3f3;
+  background-color: rgba(255, 255, 255, 0.1);
   border-radius: 6px;
   font-size: 16px;
   line-height: 22px;
   font-weight: 600;
-  color: #1a1a1a;
+  color: #fff;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   padding: 7px 10px;
@@ -1247,13 +1311,13 @@ input, textarea {
   line-height: 20px;
   font-size: 16px;
   margin-left: 6px;
-  color: #1a1a1a;
+  color: #fff;
 }
 .sp-radio__wrap {
   position: relative;
   cursor: pointer;
   font-size: 0;
-  color: #1a1a1a;
+  color: #fff;
   margin-right: 40px;
   line-height: 20px;
   height: 20px;
@@ -1285,8 +1349,8 @@ input, textarea {
   display: inline-block;
   width: 100%;
   height: 100%;
-  background-color: #fff;
-  border: 1px solid #ccc;
+  background-color: transparent;
+  border: 1px solid #66696d;
   border-radius: 50%;
   vertical-align: middle;
   -webkit-transition: opacity;
@@ -1305,7 +1369,7 @@ input, textarea {
           transform: translate(-50%, -50%);
   width: 6px;
   height: 6px;
-  background-color: #fff;
+  background-color: #3172d9;
   border-top: 0;
   border-left: 0;
   border-radius: 50%;
@@ -1314,25 +1378,25 @@ input, textarea {
   transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 .sp-radio__wrap.is--checked .sp-radio__inner {
-  border-color: #e8292c;
-  background-color: #e8292c;
+  border-color: #3172d9;
+  background-color: transparent;
 }
 .sp-radio__wrap.is--checked .sp-radio__inner::after {
   opacity: 1;
 }
 .sp-radio__wrap.is--disabled .sp-radio__inner {
-  border-color: #ccc;
-  background-color: #ededed;
+  border-color: #66696d;
+  background-color: transparent;
 }
 .sp-radio__wrap.is--disabled {
   cursor: not-allowed;
-  color: #bfbfbf;
+  color: rgba(255, 255, 255, 0.4);
 }
 .sp-radio__wrap.is--disabled .sp-radio__text {
-  color: #bfbfbf;
+  color: rgba(255, 255, 255, 0.4);
 }
 .sp-radio__wrap.is--disabled.is--checked .sp-radio__inner::after {
-  background: #ccc;
+  background: #66696d;
 }
 /* Transition
 -------------------------- */
@@ -1449,24 +1513,24 @@ input, textarea {
   line-height: 1.2;
 }
 .sp-toast-error {
-  background-color: rgba(0, 0, 0, 0.8);
-  border-color: #fff;
-  color: #fff;
+  background-color: #252627;
+  border-color: rgba(255, 255, 255, 0.8);
+  color: rgba(255, 255, 255, 0.8);
 }
 .sp-toast-success {
-  background-color: rgba(0, 0, 0, 0.8);
-  border-color: #fff;
-  color: #fff;
+  background-color: #252627;
+  border-color: rgba(255, 255, 255, 0.8);
+  color: rgba(255, 255, 255, 0.8);
 }
 .sp-toast-warning {
-  background-color: rgba(0, 0, 0, 0.8);
-  border-color: #fff;
-  color: #fff;
+  background-color: #252627;
+  border-color: rgba(255, 255, 255, 0.8);
+  color: rgba(255, 255, 255, 0.8);
 }
 .sp-toast-info {
-  background-color: rgba(0, 0, 0, 0.8);
-  border-color: #fff;
-  color: #fff;
+  background-color: #252627;
+  border-color: rgba(255, 255, 255, 0.8);
+  color: rgba(255, 255, 255, 0.8);
 }
 @charset "UTF-8";
 /* Transition
@@ -1538,7 +1602,7 @@ input, textarea {
   vertical-align: middle;
   float: left;
   font-size: 14px;
-  color: #808080;
+  color: rgba(255, 255, 255, 0.72);
   line-height: 44px;
   padding-right: 30px;
   -webkit-box-sizing: border-box;
@@ -1555,7 +1619,7 @@ input, textarea {
   margin-left: 8px;
 }
 .sp-form-item__label__tip .sp-icon-ques {
-  color: #ccc;
+  color: rgba(255, 255, 255, 0.6);
   font-size: 16px;
 }
 .sp-form-item__label__tip .sp-popup-tip__modal {
@@ -1590,7 +1654,7 @@ input, textarea {
 .sp-form-item__content__tip {
   font-size: 14px;
   line-height: 1.5;
-  color: #ccc;
+  color: rgba(255, 255, 255, 0.6);
   padding-top: 3px;
 }
 .sp-form-item__content .sp-upload {
@@ -1637,7 +1701,7 @@ input, textarea {
   padding-top: 0;
 }
 .sp-form-item__error {
-  color: #f90b0b;
+  color: #fa5b5b;
   font-size: 14px;
   line-height: 20px;
   padding: 3px 0 6px;
@@ -1677,10 +1741,10 @@ input, textarea {
   border-bottom: 6px solid rgba(0, 0, 0, 0.85);
 }
 .sp-form-item.is--error .sp-form-item__label {
-  color: #1a1a1a;
+  color: rgba(255, 255, 255, 0.72);
 }
 .sp-form-item.is--error .sp-input__inner, .sp-form-item.is--error .sp-input__inner:focus, .sp-form-item.is--error .sp-date-picker.is--range, .sp-form-item.is--error .sp-date-picker.is--range:focus, .sp-form-item.is--error .sp-textarea__inner, .sp-form-item.is--error .sp-textarea__inner:focus {
-  border-color: #e8292c;
+  border-color: #ff4d4f;
 }
 .sp-form-item.is--error .sp-input__inner:focus, .sp-form-item.is--error .sp-date-picker.is--range:focus, .sp-form-item.is--error .sp-textarea__inner:focus {
   -webkit-box-shadow: none;
@@ -1692,7 +1756,7 @@ input, textarea {
           box-shadow: none;
 }
 .sp-form-item.is--error .sp-password-input__item {
-  border-color: #e8292c;
+  border-color: #ff4d4f;
 }
 .sp-form-item.is--error .sp-password-input__item.is--focus {
   -webkit-box-shadow: none;
@@ -1702,18 +1766,18 @@ input, textarea {
   border-color: transparent;
 }
 .sp-form-item.is--error .sp-input__validateIcon {
-  color: #e8292c;
+  color: #ff4d4f;
 }
 .sp-form-item.is--error .sp-select__input-box {
-  border-color: #e8292c;
+  border-color: #ff4d4f;
 }
 .sp-form-item.is--error .sp-select.isFocus .sp-select__input-box {
-  border-color: #e8292c;
+  border-color: #ff4d4f;
   -webkit-box-shadow: none;
           box-shadow: none;
 }
 .sp-form-item.is--error .sp-time-select__range {
-  border-color: #e8292c;
+  border-color: #ff4d4f;
   -webkit-box-shadow: none;
           box-shadow: none;
 }
@@ -1776,7 +1840,7 @@ input, textarea {
   -webkit-transform: translate(-50%, -50%);
       -ms-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
-  background: #fff;
+  background: #252627;
   border-radius: 10px;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -1786,7 +1850,7 @@ input, textarea {
   font-size: 16px;
   line-height: 22px;
   font-weight: 600;
-  color: #1a1a1a;
+  color: #fff;
 }
 .sp-modal-wrap .sp-modal-content .sp-modal__head__close {
   position: absolute;
@@ -1799,12 +1863,12 @@ input, textarea {
 }
 .sp-modal-wrap .sp-modal-content .sp-modal__head__close .sp-icon-close {
   font-size: 16px;
-  color: #999;
+  color: rgba(255, 255, 255, 0.6);
   font-weight: bold;
   line-height: 1;
 }
 .sp-modal-wrap .sp-modal-content .sp-modal__body {
-  color: #1a1a1a;
+  color: #fff;
   font-size: 14px;
   line-height: 20px;
   overflow-y: auto;
@@ -1825,7 +1889,7 @@ input, textarea {
   right: 0;
   bottom: 0;
   left: 0;
-  background: rgba(41, 41, 51, 0.6);
+  background: rgba(2, 2, 2, 0.6);
 }
 /* Transition
 -------------------------- */
@@ -1871,7 +1935,7 @@ input, textarea {
   position: fixed;
   left: 50%;
   top: 50%;
-  width: 680px;
+  width: 520px;
   -webkit-transform: translate(-50%, -50%);
       -ms-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
@@ -1889,9 +1953,9 @@ input, textarea {
   font-size: 14px;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  background-color: rgba(0, 0, 0, 0.8);
-  border-color: rgba(0, 0, 0, 0.8);
-  color: #fff;
+  background-color: #252627;
+  border-color: #4d4d4d;
+  color: rgba(255, 255, 255, 0.8);
 }
 /* Transition
 -------------------------- */
@@ -1935,7 +1999,7 @@ input, textarea {
 -------------------------- */
 .sp-confirm__body {
   font-size: 16px;
-  color: #808080;
+  color: rgba(255, 255, 255, 0.8);
   line-height: 1.5;
   padding: 12px 0 28px;
 }
@@ -1953,7 +2017,7 @@ input, textarea {
   padding-bottom: 20px;
 }
 .sp-confirm__foot .sp-button {
-  min-width: 174px;
+  min-width: 173px;
   height: 40px;
   font-size: 16px;
   line-height: 1;
@@ -2040,7 +2104,7 @@ input, textarea {
   position: relative;
   height: 44px;
   width: 44px;
-  border: 1px solid #eaeaea;
+  border: 1px solid #4d4d4d;
   line-height: 44px;
   font-size: 18px;
   text-align: center;
@@ -2049,7 +2113,7 @@ input, textarea {
   margin-right: 6px;
   -webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
   transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
-  background-color: #fff;
+  background-color: transparent;
 }
 .sp-password-input__item:last-child {
   margin-right: 0;
@@ -2079,7 +2143,7 @@ input, textarea {
   left: 50%;
   width: 8px;
   height: 8px;
-  background-color: #1a1a1a;
+  background-color: #fff;
   border-radius: 100%;
   -webkit-transform: translate(-50%, -50%);
       -ms-transform: translate(-50%, -50%);
@@ -2096,7 +2160,7 @@ input, textarea {
   width: 2px;
   height: 50%;
   content: "";
-  background-color: #e8292c;
+  background-color: #d83024;
   -webkit-animation-name: coruscate;
           animation-name: coruscate;
   -webkit-animation-duration: 1s;
@@ -2186,16 +2250,18 @@ to {
 .sp-popup-tip__wrap {
   font-size: 14px;
   line-height: 1.5;
-  color: #fff;
+  color: rgba(255, 255, 255, 0.8);
   text-align: left;
   margin-top: 16px;
-  padding: 15px 20px;
+  padding: 14px 20px;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  border-radius: 8px;
-  background-color: rgba(0, 0, 0, 0.85);
+  border-radius: 6px;
+  -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+          box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  background-color: #252627;
 }
-.sp-popup-tip__wrap::before {
+.sp-popup-tip__wrap::before, .sp-popup-tip__wrap::after {
   position: absolute;
   top: -12px;
   content: "";
@@ -2207,24 +2273,32 @@ to {
   height: 0;
   border-left: 8px solid transparent;
   border-right: 8px solid transparent;
-  border-bottom: 12px solid rgba(0, 0, 0, 0.85);
+  border-bottom: 12px solid #4d4d4d;
+}
+.sp-popup-tip__wrap::after {
+  top: -11px;
+  border-bottom: 12px solid #252627;
 }
 .sp-popup-tip__wrap.arrow--bottom {
   margin-bottom: 14px;
 }
-.sp-popup-tip__wrap.arrow--bottom::before {
+.sp-popup-tip__wrap.arrow--bottom::before, .sp-popup-tip__wrap.arrow--bottom::after {
   top: auto;
   bottom: -12px;
   border: none;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
-  border-top: 12px solid rgba(0, 0, 0, 0.85);
+  border-top: 12px solid #4d4d4d;
+}
+.sp-popup-tip__wrap.arrow--bottom::after {
+  bottom: -11px;
+  border-top: 12px solid #252627;
 }
 .sp-popup-tip__wrap.arrow--left {
   margin-left: 14px;
   margin-bottom: 17px;
 }
-.sp-popup-tip__wrap.arrow--left::before {
+.sp-popup-tip__wrap.arrow--left::before, .sp-popup-tip__wrap.arrow--left::after {
   position: absolute;
   content: "";
   width: 0;
@@ -2237,13 +2311,17 @@ to {
   left: -12px;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
-  border-right: 12px solid rgba(0, 0, 0, 0.85);
+  border-right: 12px solid #848181;
+}
+.sp-popup-tip__wrap.arrow--left::after {
+  left: -11px;
+  border-right: 12px solid #252627;
 }
 .sp-popup-tip__wrap.arrow--right {
   margin-right: 13px;
   margin-bottom: 16px;
 }
-.sp-popup-tip__wrap.arrow--right::before {
+.sp-popup-tip__wrap.arrow--right::before, .sp-popup-tip__wrap.arrow--right::after {
   position: absolute;
   content: "";
   width: 0;
@@ -2257,7 +2335,11 @@ to {
   right: -12px;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
-  border-left: 12px solid rgba(0, 0, 0, 0.85);
+  border-left: 12px solid #848181;
+}
+.sp-popup-tip__wrap.arrow--right::after {
+  right: -11px;
+  border-left: 12px solid #252627;
 }
 .sp-popup-tip__wrap a,
 .sp-popup-tip__wrap i {
@@ -2266,6 +2348,11 @@ to {
 .sp-popup-tip__wrap a {
   cursor: pointer;
 }
+.sp-popup-tip__popup {
+  border: 1px solid #4d4d4d;
+  -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+          box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
 @charset "UTF-8";
 /* Transition
 -------------------------- */
@@ -2325,15 +2412,15 @@ to {
   cursor: not-allowed;
 }
 .sp-select.is--disabled .sp-select__prepend, .sp-select.is--disabled input, .sp-select.is--disabled .sp-select__center, .sp-select.is--disabled .sp-select__input-box .sp-select__prepend, .sp-select.is--disabled .sp-select__input-box input, .sp-select.is--disabled .sp-select__input-box .sp-select__center {
-  background-color: #ededed;
+  background-color: rgba(255, 255, 255, 0.1);
   color: #ccc;
 }
 .sp-select.is--readonly .sp-select__prepend, .sp-select.is--readonly input, .sp-select.is--readonly .sp-select__center, .sp-select.is--readonly .sp-select__input-box .sp-select__prepend, .sp-select.is--readonly .sp-select__input-box input, .sp-select.is--readonly .sp-select__input-box .sp-select__center {
-  background-color: #f7f7f7;
-  color: #1a1a1a;
+  background-color: rgba(255, 255, 255, 0.1);
+  color: #fff;
 }
 .sp-select.is--disabled .sp-select__input-box:hover, .sp-select.is--readonly .sp-select__input-box:hover {
-  border-color: #eaeaea;
+  border-color: #4d4d4d;
 }
 .sp-select__prepend {
   display: table-cell;
@@ -2345,7 +2432,7 @@ to {
       -ms-user-select: none;
           user-select: none;
   padding-left: 10px;
-  color: #ccc;
+  color: rgba(255, 255, 255, 0.6);
 }
 .sp-select__prepend i {
   font-size: 14px;
@@ -2360,20 +2447,20 @@ to {
   border-spacing: 0;
   width: 100%;
   min-height: 44px;
-  background-color: #fff;
+  background-color: transparent;
   background-image: none;
   border-radius: 6px;
-  border: 1px solid #eaeaea;
+  border: 1px solid #4d4d4d;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: inline-table;
-  color: #1a1a1a;
+  color: #fff;
   -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
   transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
   overflow: hidden;
 }
 .sp-select__input-box .sp-select__input {
-  background-color: white;
+  background-color: transparent;
 }
 .sp-select__input-box .sp-select__input-placeholder {
   position: absolute;
@@ -2385,7 +2472,7 @@ to {
   z-index: 10;
   margin: 0;
   line-height: 42px;
-  color: #bfbfbf;
+  color: rgba(255, 255, 255, 0.4);
   overflow: hidden;
 }
 .sp-select__input-box .sp-select__input,
@@ -2480,7 +2567,7 @@ to {
   border-bottom-right-radius: 0;
 }
 .sp-select .sp-selectInput__show {
-  background-color: #fff;
+  background-color: transparent;
 }
 .sp-select.isFocus .sp-select__input-box {
   border-color: #ccc;
@@ -2499,8 +2586,8 @@ to {
   display: table-cell;
   width: 1px;
   border-left: none;
-  background-color: #fff;
-  color: #ccc;
+  background-color: transparent;
+  color: rgba(255, 255, 255, 0.6);
   vertical-align: middle;
   padding: 0 10px;
   white-space: nowrap;
@@ -2511,16 +2598,16 @@ to {
   font-size: 12px;
 }
 .sp-select.isFocus .sp-select__suffix {
-  background-color: #fff;
-  color: #ccc;
-  border-color: #fff;
+  background-color: transparent;
+  color: rgba(255, 255, 255, 0.6);
+  border-color: transparent;
 }
 .is--disabled .sp-select__suffix {
   color: #c7cbd1;
-  background-color: #ededed;
+  background-color: rgba(255, 255, 255, 0.1);
 }
 .is--readonly .sp-select__suffix {
-  background-color: #f7f7f7;
+  background-color: rgba(255, 255, 255, 0.1);
 }
 .sp-select.is-group-multiple .sp-select__input-box .sp-tag-box {
   line-height: 1.2;
@@ -2554,13 +2641,13 @@ to {
   overflow: auto;
   margin: 4px 0;
   padding: 5px 0;
-  border: 1px solid #eaeaea;
+  border: 1px solid #484343;
   border-radius: 6px;
-  -webkit-box-shadow: 0 2px 10px 0 rgba(0, 53, 111, 0.1);
-          box-shadow: 0 2px 10px 0 rgba(0, 53, 111, 0.1);
+  -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+          box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  background-color: #fff;
+  background-color: #252627;
 }
 .sp-select-list-emptyText {
   text-align: center;
@@ -2624,7 +2711,7 @@ to {
   transition: background-color 0.1s;
 }
 .sp-option-group > .sp-checkbox__wrap:hover {
-  background-color: #fbfbfb;
+  background-color: #2c2d2e;
 }
 .sp-option-group--is-group-multi {
   border-top: 2px solid #e4e8ef;
@@ -2690,7 +2777,7 @@ to {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: #1a1a1a;
+  color: #fff;
   height: 34px;
   line-height: 34px;
   -webkit-box-sizing: border-box;
@@ -2700,14 +2787,14 @@ to {
   cursor: pointer;
 }
 .sp-option.is--hover {
-  background-color: #fbfbfb;
+  background-color: #2c2d2e;
 }
 .sp-option.is--selected {
-  color: #e8292c;
+  color: #3172d9;
   font-weight: 700;
 }
 .sp-option.is--disabled {
-  color: #bfbfbf;
+  color: rgba(255, 255, 255, 0.4);
   cursor: not-allowed;
 }
 .sp-option.is--disabled .sp-checkbox__wrap {
@@ -2719,7 +2806,7 @@ to {
   padding: 0;
 }
 .sp-option.is--group-multi:hover {
-  background-color: #fbfbfb;
+  background-color: #2c2d2e;
 }
 .sp-option .sp-icon-tick {
   position: absolute;
@@ -2831,21 +2918,21 @@ to {
   height: 12px;
   font-size: 14px;
   background-color: #fff;
-  border: 1px solid #eaeaea;
+  border: 1px solid #4d4d4d;
   border-radius: 2px;
-  color: #e8292c;
+  color: #3172d9;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
 .sp-checkbox__icon:hover {
-  border-color: #e8292c;
+  border-color: #3172d9;
 }
 .sp-checkbox__text {
   font-size: 14px;
-  color: #1a1a1a;
+  color: #fff;
 }
 .sp-checkbox__input:focus + span {
-  border-color: #e8292c;
+  border-color: #3172d9;
 }
 .sp-checkbox .sp-icon-check {
   line-height: 1;
@@ -2853,22 +2940,22 @@ to {
 .sp-checkbox.is--checked .sp-checkbox__icon {
   color: #fff;
   font-size: 12px;
-  background-color: #e8292c;
-  border-color: #e8292c;
+  background-color: #3172d9;
+  border-color: #3172d9;
 }
 .sp-checkbox.is--disabled {
   cursor: not-allowed;
 }
 .sp-checkbox.is--disabled .sp-checkbox__icon {
   background-color: #ededed;
-  border-color: #eaeaea;
+  border-color: #4d4d4d;
 }
 .sp-checkbox.is--disabled.is--checked .sp-checkbox__icon {
   color: #ccc;
   border-color: #ededed;
 }
 .sp-checkbox.is--disabled + span {
-  color: #bfbfbf;
+  color: rgba(255, 255, 255, 0.4);
   cursor: not-allowed;
 }
 /* Transition
@@ -2962,7 +3049,7 @@ to {
   font-size: 14px;
   border-radius: 4px;
   color: #fff;
-  background-color: #e8292c;
+  background-color: #3172d9;
   white-space: nowrap;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -2995,6 +3082,6 @@ to {
   border-color: #999;
 }
 .sp-tag--danger {
-  background-color: #e8292c;
-  border-color: #e8292c;
+  background-color: #ff4d4f;
+  border-color: #ff4d4f;
 }