v2.0.0

2022-10-29 11:36:35 +08:00
parent 66b965d9f7
commit e45cee6596
715 changed files with 57096 additions and 31771 deletions
@@ -6,6 +6,280 @@
 	-webkit-user-drag: none;
 }

+:root {
+  --color-primary: rgb(77, 175, 124);
+  --color-primary-alpha-100: rgba(77, 175, 124, 0.90);
+  --color-primary-alpha-200: rgba(77, 175, 124, 0.80);
+  --color-primary-alpha-300: rgba(77, 175, 124, 0.70);
+  --color-primary-alpha-400: rgba(77, 175, 124, 0.60);
+  --color-primary-alpha-500: rgba(77, 175, 124, 0.50);
+  --color-primary-alpha-600: rgba(77, 175, 124, 0.40);
+  --color-primary-alpha-700: rgba(77, 175, 124, 0.30);
+  --color-primary-alpha-800: rgba(77, 175, 124, 0.20);
+  --color-primary-alpha-900: rgba(77, 175, 124, 0.10);
+  --color-primary-dark-100: rgb(69,158,112);
+  --color-primary-dark-100-alpha-100: rgba(69, 158, 112, 0.90);
+  --color-primary-dark-100-alpha-200: rgba(69, 158, 112, 0.80);
+  --color-primary-dark-100-alpha-300: rgba(69, 158, 112, 0.70);
+  --color-primary-dark-100-alpha-400: rgba(69, 158, 112, 0.60);
+  --color-primary-dark-100-alpha-500: rgba(69, 158, 112, 0.50);
+  --color-primary-dark-100-alpha-600: rgba(69, 158, 112, 0.40);
+  --color-primary-dark-100-alpha-700: rgba(69, 158, 112, 0.30);
+  --color-primary-dark-100-alpha-800: rgba(69, 158, 112, 0.20);
+  --color-primary-dark-100-alpha-900: rgba(69, 158, 112, 0.10);
+  --color-primary-dark-200: rgb(62,142,101);
+  --color-primary-dark-200-alpha-100: rgba(62, 142, 101, 0.90);
+  --color-primary-dark-200-alpha-200: rgba(62, 142, 101, 0.80);
+  --color-primary-dark-200-alpha-300: rgba(62, 142, 101, 0.70);
+  --color-primary-dark-200-alpha-400: rgba(62, 142, 101, 0.60);
+  --color-primary-dark-200-alpha-500: rgba(62, 142, 101, 0.50);
+  --color-primary-dark-200-alpha-600: rgba(62, 142, 101, 0.40);
+  --color-primary-dark-200-alpha-700: rgba(62, 142, 101, 0.30);
+  --color-primary-dark-200-alpha-800: rgba(62, 142, 101, 0.20);
+  --color-primary-dark-200-alpha-900: rgba(62, 142, 101, 0.10);
+  --color-primary-dark-300: rgb(56,128,91);
+  --color-primary-dark-300-alpha-100: rgba(56, 128, 91, 0.90);
+  --color-primary-dark-300-alpha-200: rgba(56, 128, 91, 0.80);
+  --color-primary-dark-300-alpha-300: rgba(56, 128, 91, 0.70);
+  --color-primary-dark-300-alpha-400: rgba(56, 128, 91, 0.60);
+  --color-primary-dark-300-alpha-500: rgba(56, 128, 91, 0.50);
+  --color-primary-dark-300-alpha-600: rgba(56, 128, 91, 0.40);
+  --color-primary-dark-300-alpha-700: rgba(56, 128, 91, 0.30);
+  --color-primary-dark-300-alpha-800: rgba(56, 128, 91, 0.20);
+  --color-primary-dark-300-alpha-900: rgba(56, 128, 91, 0.10);
+  --color-primary-dark-400: rgb(50,115,82);
+  --color-primary-dark-400-alpha-100: rgba(50, 115, 82, 0.90);
+  --color-primary-dark-400-alpha-200: rgba(50, 115, 82, 0.80);
+  --color-primary-dark-400-alpha-300: rgba(50, 115, 82, 0.70);
+  --color-primary-dark-400-alpha-400: rgba(50, 115, 82, 0.60);
+  --color-primary-dark-400-alpha-500: rgba(50, 115, 82, 0.50);
+  --color-primary-dark-400-alpha-600: rgba(50, 115, 82, 0.40);
+  --color-primary-dark-400-alpha-700: rgba(50, 115, 82, 0.30);
+  --color-primary-dark-400-alpha-800: rgba(50, 115, 82, 0.20);
+  --color-primary-dark-400-alpha-900: rgba(50, 115, 82, 0.10);
+  --color-primary-dark-500: rgb(45,104,74);
+  --color-primary-dark-500-alpha-100: rgba(45, 104, 74, 0.90);
+  --color-primary-dark-500-alpha-200: rgba(45, 104, 74, 0.80);
+  --color-primary-dark-500-alpha-300: rgba(45, 104, 74, 0.70);
+  --color-primary-dark-500-alpha-400: rgba(45, 104, 74, 0.60);
+  --color-primary-dark-500-alpha-500: rgba(45, 104, 74, 0.50);
+  --color-primary-dark-500-alpha-600: rgba(45, 104, 74, 0.40);
+  --color-primary-dark-500-alpha-700: rgba(45, 104, 74, 0.30);
+  --color-primary-dark-500-alpha-800: rgba(45, 104, 74, 0.20);
+  --color-primary-dark-500-alpha-900: rgba(45, 104, 74, 0.10);
+  --color-primary-dark-600: rgb(41,94,67);
+  --color-primary-dark-600-alpha-100: rgba(41, 94, 67, 0.90);
+  --color-primary-dark-600-alpha-200: rgba(41, 94, 67, 0.80);
+  --color-primary-dark-600-alpha-300: rgba(41, 94, 67, 0.70);
+  --color-primary-dark-600-alpha-400: rgba(41, 94, 67, 0.60);
+  --color-primary-dark-600-alpha-500: rgba(41, 94, 67, 0.50);
+  --color-primary-dark-600-alpha-600: rgba(41, 94, 67, 0.40);
+  --color-primary-dark-600-alpha-700: rgba(41, 94, 67, 0.30);
+  --color-primary-dark-600-alpha-800: rgba(41, 94, 67, 0.20);
+  --color-primary-dark-600-alpha-900: rgba(41, 94, 67, 0.10);
+  --color-primary-dark-700: rgb(37,85,60);
+  --color-primary-dark-700-alpha-100: rgba(37, 85, 60, 0.90);
+  --color-primary-dark-700-alpha-200: rgba(37, 85, 60, 0.80);
+  --color-primary-dark-700-alpha-300: rgba(37, 85, 60, 0.70);
+  --color-primary-dark-700-alpha-400: rgba(37, 85, 60, 0.60);
+  --color-primary-dark-700-alpha-500: rgba(37, 85, 60, 0.50);
+  --color-primary-dark-700-alpha-600: rgba(37, 85, 60, 0.40);
+  --color-primary-dark-700-alpha-700: rgba(37, 85, 60, 0.30);
+  --color-primary-dark-700-alpha-800: rgba(37, 85, 60, 0.20);
+  --color-primary-dark-700-alpha-900: rgba(37, 85, 60, 0.10);
+  --color-primary-dark-800: rgb(33,77,54);
+  --color-primary-dark-800-alpha-100: rgba(33, 77, 54, 0.90);
+  --color-primary-dark-800-alpha-200: rgba(33, 77, 54, 0.80);
+  --color-primary-dark-800-alpha-300: rgba(33, 77, 54, 0.70);
+  --color-primary-dark-800-alpha-400: rgba(33, 77, 54, 0.60);
+  --color-primary-dark-800-alpha-500: rgba(33, 77, 54, 0.50);
+  --color-primary-dark-800-alpha-600: rgba(33, 77, 54, 0.40);
+  --color-primary-dark-800-alpha-700: rgba(33, 77, 54, 0.30);
+  --color-primary-dark-800-alpha-800: rgba(33, 77, 54, 0.20);
+  --color-primary-dark-800-alpha-900: rgba(33, 77, 54, 0.10);
+  --color-primary-dark-900: rgb(30,69,49);
+  --color-primary-dark-900-alpha-100: rgba(30, 69, 49, 0.90);
+  --color-primary-dark-900-alpha-200: rgba(30, 69, 49, 0.80);
+  --color-primary-dark-900-alpha-300: rgba(30, 69, 49, 0.70);
+  --color-primary-dark-900-alpha-400: rgba(30, 69, 49, 0.60);
+  --color-primary-dark-900-alpha-500: rgba(30, 69, 49, 0.50);
+  --color-primary-dark-900-alpha-600: rgba(30, 69, 49, 0.40);
+  --color-primary-dark-900-alpha-700: rgba(30, 69, 49, 0.30);
+  --color-primary-dark-900-alpha-800: rgba(30, 69, 49, 0.20);
+  --color-primary-dark-900-alpha-900: rgba(30, 69, 49, 0.10);
+  --color-primary-dark-1000: rgb(27,62,44);
+  --color-primary-dark-1000-alpha-100: rgba(27, 62, 44, 0.90);
+  --color-primary-dark-1000-alpha-200: rgba(27, 62, 44, 0.80);
+  --color-primary-dark-1000-alpha-300: rgba(27, 62, 44, 0.70);
+  --color-primary-dark-1000-alpha-400: rgba(27, 62, 44, 0.60);
+  --color-primary-dark-1000-alpha-500: rgba(27, 62, 44, 0.50);
+  --color-primary-dark-1000-alpha-600: rgba(27, 62, 44, 0.40);
+  --color-primary-dark-1000-alpha-700: rgba(27, 62, 44, 0.30);
+  --color-primary-dark-1000-alpha-800: rgba(27, 62, 44, 0.20);
+  --color-primary-dark-1000-alpha-900: rgba(27, 62, 44, 0.10);
+  --color-primary-light-100: rgb(113,191,150);
+  --color-primary-light-100-alpha-100: rgba(113, 191, 150, 0.90);
+  --color-primary-light-100-alpha-200: rgba(113, 191, 150, 0.80);
+  --color-primary-light-100-alpha-300: rgba(113, 191, 150, 0.70);
+  --color-primary-light-100-alpha-400: rgba(113, 191, 150, 0.60);
+  --color-primary-light-100-alpha-500: rgba(113, 191, 150, 0.50);
+  --color-primary-light-100-alpha-600: rgba(113, 191, 150, 0.40);
+  --color-primary-light-100-alpha-700: rgba(113, 191, 150, 0.30);
+  --color-primary-light-100-alpha-800: rgba(113, 191, 150, 0.20);
+  --color-primary-light-100-alpha-900: rgba(113, 191, 150, 0.10);
+  --color-primary-light-200: rgb(141,204,171);
+  --color-primary-light-200-alpha-100: rgba(141, 204, 171, 0.90);
+  --color-primary-light-200-alpha-200: rgba(141, 204, 171, 0.80);
+  --color-primary-light-200-alpha-300: rgba(141, 204, 171, 0.70);
+  --color-primary-light-200-alpha-400: rgba(141, 204, 171, 0.60);
+  --color-primary-light-200-alpha-500: rgba(141, 204, 171, 0.50);
+  --color-primary-light-200-alpha-600: rgba(141, 204, 171, 0.40);
+  --color-primary-light-200-alpha-700: rgba(141, 204, 171, 0.30);
+  --color-primary-light-200-alpha-800: rgba(141, 204, 171, 0.20);
+  --color-primary-light-200-alpha-900: rgba(141, 204, 171, 0.10);
+  --color-primary-light-300: rgb(164,214,188);
+  --color-primary-light-300-alpha-100: rgba(164, 214, 188, 0.90);
+  --color-primary-light-300-alpha-200: rgba(164, 214, 188, 0.80);
+  --color-primary-light-300-alpha-300: rgba(164, 214, 188, 0.70);
+  --color-primary-light-300-alpha-400: rgba(164, 214, 188, 0.60);
+  --color-primary-light-300-alpha-500: rgba(164, 214, 188, 0.50);
+  --color-primary-light-300-alpha-600: rgba(164, 214, 188, 0.40);
+  --color-primary-light-300-alpha-700: rgba(164, 214, 188, 0.30);
+  --color-primary-light-300-alpha-800: rgba(164, 214, 188, 0.20);
+  --color-primary-light-300-alpha-900: rgba(164, 214, 188, 0.10);
+  --color-primary-light-400: rgb(182,222,201);
+  --color-primary-light-400-alpha-100: rgba(182, 222, 201, 0.90);
+  --color-primary-light-400-alpha-200: rgba(182, 222, 201, 0.80);
+  --color-primary-light-400-alpha-300: rgba(182, 222, 201, 0.70);
+  --color-primary-light-400-alpha-400: rgba(182, 222, 201, 0.60);
+  --color-primary-light-400-alpha-500: rgba(182, 222, 201, 0.50);
+  --color-primary-light-400-alpha-600: rgba(182, 222, 201, 0.40);
+  --color-primary-light-400-alpha-700: rgba(182, 222, 201, 0.30);
+  --color-primary-light-400-alpha-800: rgba(182, 222, 201, 0.20);
+  --color-primary-light-400-alpha-900: rgba(182, 222, 201, 0.10);
+  --color-primary-light-500: rgb(197,229,212);
+  --color-primary-light-500-alpha-100: rgba(197, 229, 212, 0.90);
+  --color-primary-light-500-alpha-200: rgba(197, 229, 212, 0.80);
+  --color-primary-light-500-alpha-300: rgba(197, 229, 212, 0.70);
+  --color-primary-light-500-alpha-400: rgba(197, 229, 212, 0.60);
+  --color-primary-light-500-alpha-500: rgba(197, 229, 212, 0.50);
+  --color-primary-light-500-alpha-600: rgba(197, 229, 212, 0.40);
+  --color-primary-light-500-alpha-700: rgba(197, 229, 212, 0.30);
+  --color-primary-light-500-alpha-800: rgba(197, 229, 212, 0.20);
+  --color-primary-light-500-alpha-900: rgba(197, 229, 212, 0.10);
+  --color-primary-light-600: rgb(209,234,221);
+  --color-primary-light-600-alpha-100: rgba(209, 234, 221, 0.90);
+  --color-primary-light-600-alpha-200: rgba(209, 234, 221, 0.80);
+  --color-primary-light-600-alpha-300: rgba(209, 234, 221, 0.70);
+  --color-primary-light-600-alpha-400: rgba(209, 234, 221, 0.60);
+  --color-primary-light-600-alpha-500: rgba(209, 234, 221, 0.50);
+  --color-primary-light-600-alpha-600: rgba(209, 234, 221, 0.40);
+  --color-primary-light-600-alpha-700: rgba(209, 234, 221, 0.30);
+  --color-primary-light-600-alpha-800: rgba(209, 234, 221, 0.20);
+  --color-primary-light-600-alpha-900: rgba(209, 234, 221, 0.10);
+  --color-primary-light-700: rgb(218,238,228);
+  --color-primary-light-700-alpha-100: rgba(218, 238, 228, 0.90);
+  --color-primary-light-700-alpha-200: rgba(218, 238, 228, 0.80);
+  --color-primary-light-700-alpha-300: rgba(218, 238, 228, 0.70);
+  --color-primary-light-700-alpha-400: rgba(218, 238, 228, 0.60);
+  --color-primary-light-700-alpha-500: rgba(218, 238, 228, 0.50);
+  --color-primary-light-700-alpha-600: rgba(218, 238, 228, 0.40);
+  --color-primary-light-700-alpha-700: rgba(218, 238, 228, 0.30);
+  --color-primary-light-700-alpha-800: rgba(218, 238, 228, 0.20);
+  --color-primary-light-700-alpha-900: rgba(218, 238, 228, 0.10);
+  --color-primary-light-800: rgb(225,241,233);
+  --color-primary-light-800-alpha-100: rgba(225, 241, 233, 0.90);
+  --color-primary-light-800-alpha-200: rgba(225, 241, 233, 0.80);
+  --color-primary-light-800-alpha-300: rgba(225, 241, 233, 0.70);
+  --color-primary-light-800-alpha-400: rgba(225, 241, 233, 0.60);
+  --color-primary-light-800-alpha-500: rgba(225, 241, 233, 0.50);
+  --color-primary-light-800-alpha-600: rgba(225, 241, 233, 0.40);
+  --color-primary-light-800-alpha-700: rgba(225, 241, 233, 0.30);
+  --color-primary-light-800-alpha-800: rgba(225, 241, 233, 0.20);
+  --color-primary-light-800-alpha-900: rgba(225, 241, 233, 0.10);
+  --color-primary-light-900: rgb(231,244,237);
+  --color-primary-light-900-alpha-100: rgba(231, 244, 237, 0.90);
+  --color-primary-light-900-alpha-200: rgba(231, 244, 237, 0.80);
+  --color-primary-light-900-alpha-300: rgba(231, 244, 237, 0.70);
+  --color-primary-light-900-alpha-400: rgba(231, 244, 237, 0.60);
+  --color-primary-light-900-alpha-500: rgba(231, 244, 237, 0.50);
+  --color-primary-light-900-alpha-600: rgba(231, 244, 237, 0.40);
+  --color-primary-light-900-alpha-700: rgba(231, 244, 237, 0.30);
+  --color-primary-light-900-alpha-800: rgba(231, 244, 237, 0.20);
+  --color-primary-light-900-alpha-900: rgba(231, 244, 237, 0.10);
+  --color-primary-light-1000: rgb(255,255,255);
+  --color-primary-light-1000-alpha-100: rgba(255, 255, 255, 0.90);
+  --color-primary-light-1000-alpha-200: rgba(255, 255, 255, 0.80);
+  --color-primary-light-1000-alpha-300: rgba(255, 255, 255, 0.70);
+  --color-primary-light-1000-alpha-400: rgba(255, 255, 255, 0.60);
+  --color-primary-light-1000-alpha-500: rgba(255, 255, 255, 0.50);
+  --color-primary-light-1000-alpha-600: rgba(255, 255, 255, 0.40);
+  --color-primary-light-1000-alpha-700: rgba(255, 255, 255, 0.30);
+  --color-primary-light-1000-alpha-800: rgba(255, 255, 255, 0.20);
+  --color-primary-light-1000-alpha-900: rgba(255, 255, 255, 0.10);
+  --color-theme: rgb(77, 175, 124);
+  // --color-scrollbar-track:
+
+  // --color-900: #fff;
+  // --color-800: #fafafa;
+  // --color-700: #f5f5f5;
+  // --color-600: #eeeeee;
+  // --color-500: #e0e0e0;
+  // --color-400: #bdbdbd;
+  // --color-300: #9e9e9e;
+  // --color-200: #757575;
+  // --color-100: #616161;
+  // --color-050: #424242;
+  // --color-000: #212121;
+  --color-000: #fff;
+  --color-050: #fafafa;
+  --color-100: #f5f5f5;
+  --color-200: #eeeeee;
+  --color-300: #e0e0e0;
+  --color-400: #bdbdbd;
+  --color-500: #9e9e9e;
+  --color-600: #757575;
+  --color-700: #616161;
+  --color-800: #424242;
+  --color-900: #212121;
+
+  --color-app-background: var(--color-primary-light-600-alpha-600);
+  --color-main-background: rgba(255, 255, 255, 0.9);
+  --color-nav-font: var(--color-primary);
+  // --color-app-background: rgba(0, 0, 0, .5);
+  // --color-main-background: rgba(0, 0, 0, 0.26);
+  --color-btn-hide: #3bc2b2;
+  --color-btn-min: #85c43b;
+  // --color-btn-max: #e7aa36;
+  --color-btn-close: #fab4a0;
+
+  --color-badge-primary: var(--color-primary);
+  --color-badge-secondary: #4baed5;
+  --color-badge-tertiary: #e7aa36;
+
+  --color-font: var(--color-700);
+  --color-font-label: var(--color-200);
+  --color-primary-font: var(--color-primary);
+  --color-primary-font-hover: var(--color-primary-alpha-300);
+  --color-primary-font-active: var(--color-primary-dark-100-alpha-200);
+  --color-primary-background: var(--color-primary-light-400-alpha-700);
+  --color-primary-background-hover: var(--color-primary-light-300-alpha-800);
+  --color-primary-background-active: var(--color-primary-light-100-alpha-800);
+  --color-button-font: var(--color-primary-alpha-100);
+  --color-button-font-selected: var(--color-primary-dark-100-alpha-100);
+  --color-button-background: var(--color-primary-light-400-alpha-700);
+  --color-button-background-selected: var(--color-primary-alpha-600);
+  --color-button-background-hover: var(--color-primary-light-300-alpha-600);
+  --color-button-background-active: var(--color-primary-light-100-alpha-600);
+  --color-list-header-border-bottom: 1px solid var(--color-primary-alpha-900);
+  --color-content-background: var(--color-primary-light-1000);
+
+
+  --background-image: none;
+  --background-image-position: center;
+  --background-image-size: cover;
+}
+
 html {
  font-size: 16px;
 }
@@ -33,90 +307,6 @@ html {
  user-select: none;
 }

-.thead {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-}
-table {
-  width: 100%;
-  border-spacing: 0;
-  border-collapse: collapse;
-  overflow: hidden;
-  color: @color-theme_2-font;
-  th {
-    font-size: 12px;
-    text-align: left;
-    line-height: 38px;
-    padding: 0 6px;
-  }
-  tbody {
-    tr {
-      // border-top: 1px solid rgba(0, 0, 0, 0.12);
-      transition: background-color 0.2s ease;
-      + tr {
-        border-top: 1px solid @color-theme_2-line;
-      }
-      &:hover {
-        background-color: @color-theme_2-hover;
-      }
-      &.active {
-        background-color: @color-theme_2-active;
-      }
-      &.selected {
-        background-color: @color-theme_2-hover;
-      }
-      td {
-        padding: 6px;
-        position: relative;
-        transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        font-size: 13px;
-        line-height: 16px;
-        vertical-align: middle;
-      }
-    }
-  }
-}
-
-.list {
-  width: 100%;
-  overflow: hidden;
-  color: @color-theme_2-font;
-  .list-item {
-    height: 100%;
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-    // border-top: 1px solid rgba(0, 0, 0, 0.12);
-    transition: 0.2s ease;
-    transition-property: background-color, color;
-    border-bottom: 1px solid @color-theme_2-line;
-    box-sizing: border-box;
-    &:hover {
-      background-color: @color-theme_2-hover;
-    }
-    &.active {
-      background-color: @color-theme_2-active;
-    }
-    &.selected {
-      background-color: @color-theme_2-hover;
-    }
-    .list-item-cell {
-      flex: none;
-      padding: 0 6px;
-      position: relative;
-      // transition:  0.3s cubic-bezier(0.4, 0, 0.2, 1);
-      font-size: 13px;
-      line-height: 16px;
-      vertical-align: middle;
-      box-sizing: border-box;
-      .mixin-ellipsis-1;
-
-      &.auto {
-        flex: auto;
-      }
-    }
-  }
-}
-
 .badge {
  display: inline-block;
  padding: 0.25em 0.4em;
@@ -125,39 +315,41 @@ table {
  line-height: 1;
  text-align: center;
  white-space: nowrap;
-  vertical-align: baseline;
-  border-radius: 2px;
+  // vertical-align: baseline;
+  vertical-align: text-top;
+  // border-radius: 2px;

-  &.badge-light {
-    background-color: #f8f9fa;
+  // &.badge-light {
+  //   background-color: #f8f9fa;
+  // }
+  // &.badge-secondary {
+  //   color: #fff;
+  //   background-color: #6c757d;
+  // }
+  // &.badge-info {
+  //   color: #fff;
+  //   background-color: #4baed5;
+  // }
+  // &.badge-warning {
+  //   color: #fff;
+  //   background-color: #ffa45a;
+  // }
+  // &.badge-danger {
+  //   color: #fff;
+  //   background-color: #ff705a;
+  // }
+  // &.badge-success {
+  //   color: #fff;
+  //   background-color: #32bc63;
+  // }
+  &.badge-theme-primary {
+    color: var(--color-badge-primary);
  }
-  &.badge-secondary {
-    color: #fff;
-    background-color: #6c757d;
+  &.badge-theme-secondary {
+    color: var(--color-badge-secondary);
  }
-  &.badge-info {
-    color: #fff;
-    background-color: #4baed5;
-  }
-  &.badge-warning {
-    color: #fff;
-    background-color: #ffa45a;
-  }
-  &.badge-danger {
-    color: #fff;
-    background-color: #ff705a;
-  }
-  &.badge-success {
-    color: #fff;
-    background-color: #32bc63;
-  }
-  &.badge-theme-success {
-    color: @color-badge-success-font;
-    background-color: @color-badge-success;
-  }
-  &.badge-theme-info {
-    color: @color-badge-info-font;
-    background-color: @color-badge-info;
+  &.badge-theme-tertiary {
+    color: var(--color-badge-tertiary);
  }
 }

@@ -168,7 +360,7 @@ small {
  font-size: .9em;
 }
 .tip {
-  color: @color-theme_2-font-label;
+  color: var(--color-label);
 }
 strong {
  font-weight: bold;
@@ -179,32 +371,32 @@ strong {
 }

 svg {
-  transition: @transition-theme;
+  transition: @transition-normal;
  transition-property: fill;
 }

 button, input, textarea, a {
-  color: @color-theme_2-font;
+  color: var(--color-font);
 }

 input, textarea {
  &::placeholder {
-    color: @color-theme_2-font-label;
+    color: var(--color-font-label);
  }
 }
 ::selection {
-  color: @color-theme_2;
-  background: @color-btn;
+  color: var(--color-primary-dark-500-alpha-200);
+  background: var(--color-primary-light-100-alpha-500);
 }

 .hover, a {
  cursor: pointer;
  transition: color .2s ease;
  &:hover {
-    color: @color-theme;
+    color: var(--color-primary-font-hover);
  }
  &:active {
-    color: @color-theme-active;
+    color: var(--color-primary-font-active);
  }
 }

@@ -216,24 +408,150 @@ input, textarea {
    background-color: rgba(0, 0, 0, 0);
  }
  &::-webkit-scrollbar-track {
-    background-color: @color-scrollbar-track;
+    background-color: var(--color-primary-light-100-alpha-800);
    border-radius: 3px;
    // background-color: rgba(0, 0, 0, 0.1);
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 3px;
-    background-color: @color-scrollbar-thumb;
+    background-color: var(--color-primary-alpha-600);
    // background-color: rgba(0, 0, 0, 0.2);
    transition: background-color 0.4s ease;
  }
  &::-webkit-scrollbar-thumb:hover {
    border-radius: 3px;
-    background-color: @color-scrollbar-thumb-hover;
+    background-color: var(--color-primary-alpha-400);
    // background-color: rgba(0, 0, 0, 0.4);
    transition: background-color 0.4s ease;
  }
 }

+
+.thead {
+  border-bottom: var(--color-list-header-border-bottom);
+  padding-right: 6px;
+  flex: none;
+
+  .num {
+    .nobreak;
+    .center;
+    color: var(--color-font-label);
+  }
+  // box-shadow: 0 0 2px var(--color-primary-dark-500-alpha-800);
+  // position: relative;
+  // z-index: 2;
+}
+table {
+  width: 100%;
+  border-spacing: 0;
+  border-collapse: collapse;
+  overflow: hidden;
+  color: var(--color-font);
+  th {
+    font-size: 12px;
+    text-align: left;
+    line-height: 38px;
+    padding: 0 6px;
+  }
+}
+
+
+.list {
+  width: 100%;
+  overflow: hidden;
+  color: var(--color-font);
+  flex: auto;
+
+
+  .list-item {
+    height: 100%;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    // border-top: 1px solid rgba(0, 0, 0, 0.12);
+    transition: 0.2s ease;
+    transition-property: background-color, color;
+    // border-bottom: 1px solid @color-theme_2-line;
+    box-sizing: border-box;
+    font-size: 12px;
+
+    &:hover {
+      background-color: var(--color-primary-background-hover);
+
+      // .list-item-cell-action {
+      //   display: block;
+      // }
+    }
+    &.active {
+      background-color: var(--color-primary-background-active);
+    }
+    &.selected {
+      background-color: var(--color-primary-background-hover);
+    }
+    &.disabled {
+      opacity: .5;
+    }
+    .list-item-cell {
+      flex: none;
+      padding: 0 6px;
+      position: relative;
+      // transition:  0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      line-height: 16px;
+      vertical-align: middle;
+      box-sizing: border-box;
+      .mixin-ellipsis-1;
+
+      &.auto {
+        flex: auto;
+      }
+
+      &.num {
+        .nobreak;
+        .center;
+        padding-left: 3px;
+        padding-right: 3px;
+        font-size: 11px;
+        color: var(--color-font-label);
+      }
+
+      &.name {
+        display: flex;
+        flex-flow: row nowrap;
+        overflow: hidden;
+        white-space: initial;
+        text-overflow: initial;
+        align-items: center;
+
+        >.name {
+          .mixin-ellipsis-1;
+        }
+      }
+      .badge {
+        margin-left: 3px;
+        opacity: .85;
+      }
+    }
+
+    // .list-item-cell-action {
+    //   white-space: nowrap;
+    //   display: none;
+    //   flex: auto;
+    //   text-align: right;
+    //   // position: absolute;
+    //   // right: 5px;
+    //   // top: -2px;
+    //   // opacity: 0;
+    //   // transition: opacity .1s ease;
+    // }
+  }
+}
+
+.copying {
+  .no-select {
+    display: none !important;
+  }
+}
+
 .gap-left {
  + .gap-left {
    margin-left: 20px;
@@ -249,132 +567,6 @@ input, textarea {
  }
 }

-/*
-#waiting-mask {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background-color: #fff;
-  z-index: 999999;
-  transition: all .8s ease-in-out;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  -webkit-app-region: drag;
-  background-color: @color-theme;
-
-  &.hide {
-    opacity: 0;
-  }
+.color-picker {
+  border-radius: @radius-border !important;
 }
-#logo-path-1 {fill: #5ed698; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));}
-#logo-path-2 {fill: #4daf7c; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));}
-
-
-each(@themes, {
-  body.@{value} #waiting-mask {
-    background-color: ~'@{color-@{value}-theme_2-background_1}';
-
-    #logo-path-1 {fill: ~'@{color-@{value}-btn}'; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));}
-    #logo-path-2 {fill: ~'@{color-@{value}-theme}'; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));}
-  }
-}) */
-// each(@themes, {
-//   body.@{value} #waiting-mask {
-//     background-color: ~'@{color-@{value}-theme}';
-
-//     #logo-path-1 {fill: ~'@{color-@{value}-theme_2-background_1}'; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));}
-//     #logo-path-2 {fill: ~'@{color-@{value}-theme-font-label}'; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));}
-//   }
-// })
-
-each(@themes, {
-  #root.@{value} {
-    button, input, textarea, a {
-      color: ~'@{color-@{value}-theme_2-font}';
-    }
-    .tip {
-      color: ~'@{color-@{value}-theme_2-font-label}';
-    }
-
-    .hover, a {
-      &:hover {
-        color: ~'@{color-@{value}-theme}';
-      }
-      &:active {
-        color: ~'@{color-@{value}-theme-active}';
-      }
-    }
-    .scroll {
-      &::-webkit-scrollbar {
-        background-color: rgba(0, 0, 0, 0);
-      }
-      &::-webkit-scrollbar-track {
-        background-color: ~'@{color-@{value}-scrollbar-track}';
-      }
-      &::-webkit-scrollbar-thumb {
-        background-color: ~'@{color-@{value}-scrollbar-thumb}';
-      }
-      &::-webkit-scrollbar-thumb:hover {
-        background-color: ~'@{color-@{value}-scrollbar-thumb-hover}';
-      }
-    }
-    table {
-      color: ~'@{color-@{value}-theme_2-font}';
-
-      tbody {
-        tr {
-          border-top-color: ~'@{color-@{value}-theme_2-line}';
-          &:hover {
-            background-color: ~'@{color-@{value}-theme_2-hover}';
-          }
-          &.active {
-            background-color: ~'@{color-@{value}-theme_2-active}';
-          }
-          &.selected {
-            background-color: ~'@{color-@{value}-theme_2-hover}';
-          }
-        }
-      }
-    }
-
-    .list {
-      color: ~'@{color-@{value}-theme_2-font}';
-      .list-item {
-        border-bottom-color: ~'@{color-@{value}-theme_2-line}';
-        &:hover {
-          background-color: ~'@{color-@{value}-theme_2-hover}';
-        }
-        &.active {
-          background-color: ~'@{color-@{value}-theme_2-active}';
-        }
-        &.selected {
-          background-color: ~'@{color-@{value}-theme_2-hover}';
-        }
-      }
-    }
-
-    input, textarea {
-      &::placeholder {
-        color: ~'@{color-@{value}-theme_2-font-label}';
-      }
-    }
-    ::selection {
-      color: ~'@{color-@{value}-theme_2}';
-      background: ~'@{color-@{value}-btn}';
-    }
-
-    .badge {
-      &.badge-theme-success {
-        color: ~'@{color-@{value}-badge-success-font}';
-        background-color: ~'@{color-@{value}-badge-success}';
-      }
-      &.badge-theme-info {
-        color: ~'@{color-@{value}-badge-info-font}';
-        background-color: ~'@{color-@{value}-badge-info}';
-      }
-    }
-  }
-})
@@ -7,14 +7,14 @@
 	white-space: nowrap;
 	text-overflow: ellipsis;
 }
-.mixin-ellipsis() {
+.mixin-ellipsis(@n: 1) {
 	display: -webkit-box;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	word-wrap: break-word;
 	word-break: break-all;
 	white-space: normal !important;
-	-webkit-line-clamp: 1;
+	-webkit-line-clamp: @n;
 	-webkit-box-orient: vertical;
 }
 .mixin-ellipsis-2() {
@@ -28,3 +28,8 @@
 	-webkit-box-orient: vertical;
 }

+.mixin-after() {
+  display: block;
+  position: absolute;
+  content: '';
+}
@@ -16,16 +16,19 @@ time, mark, audio, video {
 	border: 0;
 	font-size: 100%;
 	font: inherit;
+  font-size: inherit;
 	vertical-align: baseline;
 }
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-	display: block;
-}
 html {
  font-family: "Microsoft YaHei", "Microsoft Jhenghei", "PingFang SC", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Source Han Sans", "Noto Sans CJK Sc", sans-serif;
 }
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+// html {
+// }
 body {
 	line-height: 1;
 }
@@ -1,985 +1,12 @@
@import './colors.less';

-@themes: green, yellow, blue, red, pink, purple, orange, grey, ming, blue2, black, mid_autumn, naruto, happy_new_year;
-
-
-// Colors
-// @color-theme: #03a678;
-@color-theme: #4daf7c;
-@color-theme-bgimg: none;
-@color-theme-bgposition: center;
-@color-theme-bgsize: cover;
-@color-theme-hover: fadeout(lighten(@color-theme, 10%), 30%);
-@color-theme-active: fadeout(darken(@color-theme, 20%), 60%);
-@color-theme-font: #fff;
-@color-theme-font-label: lighten(@color-theme, 35%);
-
-@color-theme_2: rgba(255, 255, 255, .9);
-@color-theme_2-background_1: #fff;
-@color-theme_2-background_2: fadeout(@color-theme_2-background_1, 2%);
-@color-theme_2-hover: fadeout(lighten(@color-theme, 10%), 80%);
-@color-theme_2-active: fadeout(lighten(@color-theme, 10%), 70%);
-@color-theme_2-font:desaturate( darken(@color-theme_2, 70%), 90%);
-@color-theme_2-font-label: fadeout(@color-theme_2-font, 55%);
-// @color-theme_2-line: transparent;
-@color-theme_2-line: lighten(@color-theme, 35%);
-@color-reply-floor: fadeout(@color-theme, 95%);
-@color-theme-sidebar: @color-theme;
-@color-btn: lighten(@color-theme, 5%);
-@color-btn-background: fadeout(lighten(@color-theme, 35%), 70%);
-@color-btn-hover: fadeout(lighten(@color-theme, 5%), 70%);
-@color-btn-active: fadeout(darken(@color-theme, 5%), 70%);
-@color-btn-select: fadeout(lighten(@color-theme, 5%), 50%);
-
-@color-pagination-background: fadeout(lighten(@color-theme, 45%), 30%);
-@color-pagination-hover: fadeout(lighten(@color-theme, 10%), 70%);
-@color-pagination-active: fadeout(darken(@color-theme, 10%), 70%);
-@color-pagination-select: fadeout(lighten(@color-theme, 10%), 50%);
-
-@color-search-form-background: fadeout(lighten(@color-theme, 35%), 10%);
-// @color-search-list-background: fadeout(lighten(@color-theme, 35%), 10%);
-@color-search-list-hover: fadeout(darken(@color-theme, 10%), 70%);
-
-@color-scrollbar-track: fadeout(lighten(@color-theme, 10%), 65%);
-@color-scrollbar-thumb: fadeout(lighten(@color-theme, 10%), 45%);
-@color-scrollbar-thumb-hover: fadeout(lighten(@color-theme, 10%), 25%);
-
-
-@color-player-pic-c1: fadeout(@color-theme_2, 50%);
-@color-player-pic-c2: darken(@color-theme_2, 30%);
-@color-player-progress: darken(@color-theme_2, 6%);
-@color-player-progress-bar1: darken(@color-theme_2, 12%);
-@color-player-progress-bar2: fadeout(lighten(@color-theme, 12%), 20%);
-@color-player-status-text: lighten(@color-theme_2-font, 32%);
-@color-player-detail-lyric: fadeout(@color-theme_2-font, 40%);
-@color-player-detail-lyric-active: darken(@color-theme, 2%);
-@color-player-detail-play-btn: lighten(@color-theme, 7%);
-
-@color-tab-btn-background: fadeout(lighten(@color-theme, 10%), 80%);
-@color-tab-btn-background-hover: @color-theme_2-hover;
-@color-tab-border-top: fadeout(lighten(@color-theme, 5%), 50%);
-@color-tab-border-bottom: lighten(@color-theme, 5%);
-@color-hideBtn: #3bc2b2;
-@color-minBtn: #85c43b;
-@color-maxBtn: #e7aa36;
-@color-closeBtn: #ea6e4d;
-@color-hideBtn-hover: fadeout(@color-hideBtn, 10%);
-@color-minBtn-hover: fadeout(@color-minBtn, 10%);
-@color-maxBtn-hover: fadeout(@color-maxBtn, 10%);
-@color-closeBtn-hover: fadeout(@color-closeBtn, 10%);
-@color-green-badge-success: #32bc63;
-@color-green-badge-success-font: #fff;
-@color-green-badge-info: #4baed5;
-@color-green-badge-info-font: #fff;
-@color-badge-success: @color-theme;
-@color-badge-success-font: #fff;
-@color-badge-info: #4baed5;
-@color-badge-info-font: #fff;
-
-
-@color-green-theme: #4daf7c;
-@color-green-theme-bgimg: none;
-@color-green-theme-bgposition: center;
-@color-green-theme-bgsize: cover;
-@color-green-theme-hover: fadeout(lighten(@color-green-theme, 10%), 30%);
-@color-green-theme-active: fadeout(darken(@color-green-theme, 20%), 60%);
-@color-green-theme-font: #fff;
-@color-green-theme-font-label: lighten(@color-green-theme, 35%);
-@color-green-theme_2: #fff;
-@color-green-theme_2-background_1: #fff;
-@color-green-theme_2-background_2: fadeout(@color-green-theme_2-background_1, 2%);
-@color-green-theme_2-hover: fadeout(lighten(@color-green-theme, 10%), 80%);
-@color-green-theme_2-active: fadeout(lighten(@color-green-theme, 10%), 70%);
-@color-green-theme_2-font: darken(desaturate(@color-green-theme_2, 70%), 90%);
-@color-green-theme_2-font-label: fadeout(@color-green-theme_2-font, 55%);
-// @color-green-theme_2-line: transparent;
-@color-green-theme_2-line: lighten(@color-green-theme, 45%);
-@color-green-reply-floor: fadeout(@color-green-theme, 95%);
-@color-green-theme-sidebar: @color-green-theme;
-@color-green-btn: lighten(@color-green-theme, 5%);
-@color-green-btn-background: fadeout(lighten(@color-green-theme, 35%), 70%);
-@color-green-btn-hover: fadeout(lighten(@color-green-theme, 5%), 70%);
-@color-green-btn-active: fadeout(darken(@color-green-theme, 5%), 70%);
-@color-green-btn-select: fadeout(lighten(@color-green-theme, 5%), 50%);
-@color-green-pagination-background: fadeout(lighten(@color-green-theme, 45%), 30%);
-@color-green-pagination-hover: fadeout(lighten(@color-green-theme, 10%), 70%);
-@color-green-pagination-active: fadeout(darken(@color-green-theme, 10%), 70%);
-@color-green-pagination-select: fadeout(lighten(@color-green-theme, 10%), 50%);
-@color-green-search-form-background: fadeout(lighten(@color-green-theme, 35%), 10%);
-@color-green-search-list-hover: fadeout(darken(@color-green-theme, 10%), 70%);
-@color-green-scrollbar-track: fadeout(lighten(@color-green-theme, 10%), 75%);
-@color-green-scrollbar-thumb: fadeout(lighten(@color-green-theme, 10%), 50%);
-@color-green-scrollbar-thumb-hover: fadeout(lighten(@color-green-theme, 10%), 30%);
-@color-green-player-pic-c1: fadeout(@color-green-theme_2, 50%);
-@color-green-player-pic-c2: darken(@color-green-theme_2, 30%);
-@color-green-player-progress: darken(@color-green-theme_2, 6%);
-@color-green-player-progress-bar1: darken(@color-green-theme_2, 12%);
-@color-green-player-progress-bar2: fadeout(lighten(@color-green-theme, 12%), 20%);
-@color-green-player-status-text: lighten(@color-green-theme_2-font, 32%);
-@color-green-player-detail-lyric: fadeout(@color-green-theme_2-font, 40%);
-@color-green-player-detail-lyric-active: darken(@color-green-theme, 2%);
-@color-green-player-detail-play-btn: lighten(@color-green-theme, 7%);
-@color-green-tab-btn-background: fadeout(lighten(@color-green-theme, 10%), 80%);
-@color-green-tab-btn-background-hover: @color-green-theme_2-hover;
-@color-green-tab-border-top: fadeout(lighten(@color-green-theme, 5%), 50%);
-@color-green-tab-border-bottom: lighten(@color-green-theme, 5%);
-@color-green-hideBtn: #3bc2b2;
-@color-green-minBtn: #85c43b;
-@color-green-maxBtn: #e7aa36;
-@color-green-closeBtn: #ea6e4d;
-@color-green-hideBtn-hover: fadeout(@color-hideBtn, 10%);
-@color-green-minBtn-hover: fadeout(@color-green-minBtn, 10%);
-@color-green-maxBtn-hover: fadeout(@color-green-maxBtn, 10%);
-@color-green-closeBtn-hover: fadeout(@color-green-closeBtn, 10%);
-@color-green-badge-success: lighten(@color-green-theme, 7%);
-@color-green-badge-success-font: #fff;
-@color-green-badge-info: #66a2bd;
-@color-green-badge-info-font: #fff;
-
-
-@color-yellow-theme: #e9d460;
-@color-yellow-theme-bgimg: none;
-@color-yellow-theme-bgposition: center;
-@color-yellow-theme-bgsize: cover;
-@color-yellow-theme-hover: fadeout(lighten(@color-yellow-theme, 10%), 30%);
-@color-yellow-theme-active: fadeout(darken(@color-yellow-theme, 20%), 60%);
-@color-yellow-theme-font: #fff;
-@color-yellow-theme-font-label: lighten(@color-yellow-theme, 35%);
-@color-yellow-theme_2: #fff;
-@color-yellow-theme_2-background_1: #fff;
-@color-yellow-theme_2-background_2: fadeout(@color-yellow-theme_2-background_1, 2%);
-@color-yellow-theme_2-hover: fadeout(lighten(@color-yellow-theme, 10%), 70%);
-@color-yellow-theme_2-active: fadeout(lighten(@color-yellow-theme, 10%), 60%);
-@color-yellow-theme_2-font: darken(desaturate(@color-yellow-theme_2, 70%), 90%);
-@color-yellow-theme_2-font-label: fadeout(@color-yellow-theme_2-font, 55%);
-// @color-yellow-theme_2-line: transparent;
-@color-yellow-theme_2-line: lighten(@color-yellow-theme, 28%);
-@color-yellow-reply-floor: fadeout(@color-yellow-theme, 94%);
-@color-yellow-theme-sidebar: @color-yellow-theme;
-@color-yellow-btn: darken(@color-yellow-theme, 5%);
-@color-yellow-btn-background: fadeout(lighten(@color-yellow-theme, 25%), 60%);
-@color-yellow-btn-hover: fadeout(lighten(@color-yellow-theme, 5%), 70%);
-@color-yellow-btn-active: fadeout(darken(@color-yellow-theme, 5%), 70%);
-@color-yellow-btn-select: fadeout(lighten(@color-yellow-theme, 5%), 50%);
-@color-yellow-pagination-background: fadeout(lighten(@color-yellow-theme, 30%), 30%);
-@color-yellow-pagination-hover: fadeout(lighten(@color-yellow-theme, 5%), 70%);
-@color-yellow-pagination-active: fadeout(darken(@color-yellow-theme, 5%), 70%);
-@color-yellow-pagination-select: fadeout(lighten(@color-yellow-theme, 5%), 50%);
-@color-yellow-search-form-background: fadeout(lighten(@color-yellow-theme, 25%), 10%);
-@color-yellow-search-list-hover: fadeout(darken(@color-yellow-theme, 10%), 60%);
-@color-yellow-scrollbar-track: fadeout(lighten(@color-yellow-theme, 5%), 65%);
-@color-yellow-scrollbar-thumb: fadeout(lighten(@color-yellow-theme, 5%), 30%);
-@color-yellow-scrollbar-thumb-hover: fadeout(lighten(@color-yellow-theme, 5%), 15%);
-@color-yellow-player-pic-c1: fadeout(@color-yellow-theme_2, 50%);
-@color-yellow-player-pic-c2: darken(@color-yellow-theme_2, 30%);
-@color-yellow-player-progress: darken(@color-yellow-theme_2, 6%);
-@color-yellow-player-progress-bar1: darken(@color-yellow-theme_2, 12%);
-@color-yellow-player-progress-bar2: fadeout(lighten(@color-yellow-theme, 2%), 20%);
-@color-yellow-player-status-text: lighten(@color-yellow-theme_2-font, 32%);
-@color-yellow-player-detail-lyric: fadeout(@color-yellow-theme_2-font, 40%);
-@color-yellow-player-detail-lyric-active: darken(@color-yellow-theme, 7%);
-@color-yellow-player-detail-play-btn: lighten(@color-yellow-theme, 7%);
-@color-yellow-tab-btn-background: fadeout(lighten(@color-yellow-theme, 10%), 70%);
-@color-yellow-tab-btn-background-hover: @color-yellow-theme_2-hover;
-@color-yellow-tab-border-top: fadeout(lighten(@color-yellow-theme, 5%), 40%);
-@color-yellow-tab-border-bottom: @color-yellow-theme;
-@color-yellow-hideBtn: #3bc2b2;
-@color-yellow-minBtn: #85c43b;
-@color-yellow-maxBtn: #e7aa36;
-@color-yellow-closeBtn: #ea6e4d;
-@color-yellow-hideBtn-hover: fadeout(@color-hideBtn, 10%);
-@color-yellow-minBtn-hover: fadeout(@color-yellow-minBtn, 10%);
-@color-yellow-maxBtn-hover: fadeout(@color-yellow-maxBtn, 10%);
-@color-yellow-closeBtn-hover: fadeout(@color-yellow-closeBtn, 10%);
-@color-yellow-badge-success: lighten(@color-yellow-theme, 10%);
-@color-yellow-badge-success-font: #fff;
-@color-yellow-badge-info: #7cd295;
-@color-yellow-badge-info-font: #fff;
-
-@color-orange-theme: #f5ab35;
-@color-orange-theme-bgimg: none;
-@color-orange-theme-bgposition: center;
-@color-orange-theme-bgsize: cover;
-@color-orange-theme-hover: fadeout(lighten(@color-orange-theme, 10%), 30%);
-@color-orange-theme-active: fadeout(darken(@color-orange-theme, 20%), 60%);
-@color-orange-theme-font: #fff;
-@color-orange-theme-font-label: lighten(@color-orange-theme, 35%);
-@color-orange-theme_2: #fff;
-@color-orange-theme_2-background_1: #fff;
-@color-orange-theme_2-background_2: fadeout(@color-orange-theme_2-background_1, 2%);
-@color-orange-theme_2-hover: fadeout(darken(@color-orange-theme, 5%), 80%);
-@color-orange-theme_2-active: fadeout(darken(@color-orange-theme, 5%), 70%);
-@color-orange-theme_2-font: darken(desaturate(@color-orange-theme_2, 70%), 90%);
-@color-orange-theme_2-font-label: fadeout(@color-orange-theme_2-font, 55%);
-// @color-orange-theme_2-line: transparent;
-@color-orange-theme_2-line: lighten(@color-orange-theme, 36%);
-@color-orange-reply-floor: fadeout(@color-orange-theme, 95%);
-@color-orange-theme-sidebar: @color-orange-theme;
-@color-orange-btn: lighten(@color-orange-theme, 5%);
-@color-orange-btn-background: fadeout(lighten(@color-orange-theme, 25%), 60%);
-@color-orange-btn-hover: fadeout(lighten(@color-orange-theme, 5%), 70%);
-@color-orange-btn-active: fadeout(darken(@color-orange-theme, 5%), 70%);
-@color-orange-btn-select: fadeout(lighten(@color-orange-theme, 5%), 50%);
-@color-orange-pagination-background: fadeout(lighten(@color-orange-theme, 25%), 40%);
-@color-orange-pagination-hover: fadeout(lighten(@color-orange-theme, 10%), 70%);
-@color-orange-pagination-active: fadeout(darken(@color-orange-theme, 10%), 70%);
-@color-orange-pagination-select: fadeout(lighten(@color-orange-theme, 10%), 50%);
-@color-orange-search-form-background: fadeout(lighten(@color-orange-theme, 30%), 10%);
-@color-orange-search-list-hover: fadeout(darken(@color-orange-theme, 10%), 70%);
-@color-orange-scrollbar-track: fadeout(lighten(@color-orange-theme, 10%), 75%);
-@color-orange-scrollbar-thumb: fadeout(lighten(@color-orange-theme, 10%), 45%);
-@color-orange-scrollbar-thumb-hover: fadeout(lighten(@color-orange-theme, 10%), 25%);
-@color-orange-player-pic-c1: fadeout(@color-orange-theme_2, 50%);
-@color-orange-player-pic-c2: darken(@color-orange-theme_2, 30%);
-@color-orange-player-progress: darken(@color-orange-theme_2, 6%);
-@color-orange-player-progress-bar1: darken(@color-orange-theme_2, 12%);
-@color-orange-player-progress-bar2: fadeout(lighten(@color-orange-theme, 12%), 20%);
-@color-orange-player-status-text: lighten(@color-orange-theme_2-font, 32%);
-@color-orange-player-detail-lyric: fadeout(@color-orange-theme_2-font, 40%);
-@color-orange-player-detail-lyric-active: darken(@color-orange-theme, 7%);
-@color-orange-player-detail-play-btn: lighten(@color-orange-theme, 7%);
-@color-orange-tab-btn-background: fadeout(lighten(@color-orange-theme, 10%), 80%);
-@color-orange-tab-btn-background-hover: @color-orange-theme_2-hover;
-@color-orange-tab-border-top: fadeout(lighten(@color-orange-theme, 5%), 50%);
-@color-orange-tab-border-bottom: lighten(@color-orange-theme, 5%);
-@color-orange-hideBtn: #3bc2b2;
-@color-orange-minBtn: #85c43b;
-@color-orange-maxBtn: #e7aa36;
-@color-orange-closeBtn: #ea6e4d;
-@color-orange-hideBtn-hover: fadeout(@color-hideBtn, 10%);
-@color-orange-minBtn-hover: fadeout(@color-orange-minBtn, 10%);
-@color-orange-maxBtn-hover: fadeout(@color-orange-maxBtn, 10%);
-@color-orange-closeBtn-hover: fadeout(@color-orange-closeBtn, 10%);
-@color-orange-badge-success: lighten(@color-orange-theme, 10%);
-@color-orange-badge-success-font: #fff;
-@color-orange-badge-info: #9ed458;
-@color-orange-badge-info-font: #fff;
-
-@color-blue-theme: #3498db;
-@color-blue-theme-bgimg: none;
-@color-blue-theme-bgposition: center;
-@color-blue-theme-bgsize: cover;
-@color-blue-theme-hover: fadeout(lighten(@color-blue-theme, 10%), 30%);
-@color-blue-theme-active: fadeout(darken(@color-blue-theme, 20%), 60%);
-@color-blue-theme-font: #fff;
-@color-blue-theme-font-label: lighten(@color-blue-theme, 35%);
-@color-blue-theme_2: #fff;
-@color-blue-theme_2-background_1: #fff;
-@color-blue-theme_2-background_2: fadeout(@color-blue-theme_2-background_1, 2%);
-@color-blue-theme_2-hover: fadeout(lighten(@color-blue-theme, 10%), 80%);
-@color-blue-theme_2-active: fadeout(lighten(@color-blue-theme, 10%), 70%);
-@color-blue-theme_2-font: darken(desaturate(@color-blue-theme_2, 70%), 90%);
-@color-blue-theme_2-font-label: fadeout(@color-blue-theme_2-font, 55%);
-// @color-blue-theme_2-line: transparent;
-@color-blue-theme_2-line: lighten(@color-blue-theme, 42%);
-@color-blue-reply-floor: fadeout(@color-blue-theme, 95%);
-@color-blue-theme-sidebar: @color-blue-theme;
-@color-blue-btn: lighten(@color-blue-theme, 5%);
-@color-blue-btn-background: fadeout(lighten(@color-blue-theme, 35%), 50%);
-@color-blue-btn-hover: fadeout(lighten(@color-blue-theme, 5%), 70%);
-@color-blue-btn-active: fadeout(darken(@color-blue-theme, 5%), 70%);
-@color-blue-btn-select: fadeout(lighten(@color-blue-theme, 5%), 50%);
-@color-blue-pagination-background: fadeout(lighten(@color-blue-theme, 40%), 30%);
-@color-blue-pagination-hover: fadeout(lighten(@color-blue-theme, 15%), 70%);
-@color-blue-pagination-active: fadeout(darken(@color-blue-theme, 15%), 70%);
-@color-blue-pagination-select: fadeout(lighten(@color-blue-theme, 15%), 50%);
-@color-blue-search-form-background: fadeout(lighten(@color-blue-theme, 35%), 10%);
-@color-blue-search-list-hover: fadeout(darken(@color-blue-theme, 10%), 70%);
-@color-blue-scrollbar-track: fadeout(lighten(@color-blue-theme, 10%), 75%);
-@color-blue-scrollbar-thumb: fadeout(lighten(@color-blue-theme, 10%), 50%);
-@color-blue-scrollbar-thumb-hover: fadeout(lighten(@color-blue-theme, 10%), 35%);
-@color-blue-player-pic-c1: fadeout(@color-blue-theme_2, 50%);
-@color-blue-player-pic-c2: darken(@color-blue-theme_2, 30%);
-@color-blue-player-progress: darken(@color-blue-theme_2, 6%);
-@color-blue-player-progress-bar1: darken(@color-blue-theme_2, 12%);
-@color-blue-player-progress-bar2: fadeout(lighten(@color-blue-theme, 12%), 20%);
-@color-blue-player-status-text: lighten(@color-blue-theme_2-font, 32%);
-@color-blue-player-detail-lyric: fadeout(@color-blue-theme_2-font, 40%);
-@color-blue-player-detail-lyric-active: darken(@color-blue-theme, 2%);
-@color-blue-player-detail-play-btn: lighten(@color-blue-theme, 7%);
-@color-blue-tab-btn-background: fadeout(lighten(@color-blue-theme, 10%), 80%);
-@color-blue-tab-btn-background-hover: @color-blue-theme_2-hover;
-@color-blue-tab-border-top: fadeout(lighten(@color-blue-theme, 5%), 50%);
-@color-blue-tab-border-bottom: lighten(@color-blue-theme, 5%);
-@color-blue-hideBtn: #3bc2b2;
-@color-blue-minBtn: #85c43b;
-@color-blue-maxBtn: #e7aa36;
-@color-blue-closeBtn: #ea6e4d;
-@color-blue-hideBtn-hover: fadeout(@color-hideBtn, 10%);
-@color-blue-minBtn-hover: fadeout(@color-blue-minBtn, 10%);
-@color-blue-maxBtn-hover: fadeout(@color-blue-maxBtn, 10%);
-@color-blue-closeBtn-hover: fadeout(@color-blue-closeBtn, 10%);
-@color-blue-badge-success: #5cbf9b;
-@color-blue-badge-success-font: #fff;
-@color-blue-badge-info: lighten(@color-blue-theme, 10%);
-@color-blue-badge-info-font: #fff;
-
-@color-red-theme: #d64541;
-@color-red-theme-bgimg: none;
-@color-red-theme-bgposition: center;
-@color-red-theme-bgsize: cover;
-@color-red-theme-hover: fadeout(lighten(@color-red-theme, 10%), 30%);
-@color-red-theme-active: fadeout(darken(@color-red-theme, 20%), 60%);
-@color-red-theme-font: #fff;
-@color-red-theme-font-label: lighten(@color-red-theme, 35%);
-@color-red-theme_2: #fff;
-@color-red-theme_2-hover: fadeout(lighten(@color-red-theme, 10%), 80%);
-@color-red-theme_2-active: fadeout(lighten(@color-red-theme, 10%), 70%);
-@color-red-theme_2-background_1: #fff;
-@color-red-theme_2-background_2: fadeout(@color-red-theme_2-background_1, 2%);
-@color-red-theme_2-font: darken(desaturate(@color-red-theme_2, 70%), 90%);
-@color-red-theme_2-font-label: fadeout(@color-red-theme_2-font, 55%);
-// @color-red-theme_2-line: transparent;
-@color-red-theme_2-line: lighten(@color-red-theme, 42%);
-@color-red-reply-floor: fadeout(@color-red-theme, 95%);
-@color-red-theme-sidebar: @color-red-theme;
-@color-red-btn: lighten(@color-red-theme, 5%);
-@color-red-btn-background: fadeout(lighten(@color-red-theme, 35%), 70%);
-@color-red-btn-hover: fadeout(lighten(@color-red-theme, 5%), 70%);
-@color-red-btn-active: fadeout(darken(@color-red-theme, 5%), 70%);
-@color-red-btn-select: fadeout(lighten(@color-red-theme, 5%), 50%);
-@color-red-pagination-background: fadeout(lighten(@color-red-theme, 40%), 30%);
-@color-red-pagination-hover: fadeout(lighten(@color-red-theme, 15%), 70%);
-@color-red-pagination-active: fadeout(darken(@color-red-theme, 15%), 70%);
-@color-red-pagination-select: fadeout(lighten(@color-red-theme, 15%), 50%);
-@color-red-search-form-background: fadeout(lighten(@color-red-theme, 35%), 10%);
-@color-red-search-list-hover: fadeout(darken(@color-red-theme, 10%), 70%);
-@color-red-scrollbar-track: fadeout(lighten(@color-red-theme, 10%), 75%);
-@color-red-scrollbar-thumb: fadeout(lighten(@color-red-theme, 10%), 45%);
-@color-red-scrollbar-thumb-hover: fadeout(lighten(@color-red-theme, 10%), 25%);
-@color-red-player-pic-c1: fadeout(@color-red-theme_2, 50%);
-@color-red-player-pic-c2: darken(@color-red-theme_2, 30%);
-@color-red-player-progress: darken(@color-red-theme_2, 6%);
-@color-red-player-progress-bar1: darken(@color-red-theme_2, 12%);
-@color-red-player-progress-bar2: fadeout(lighten(@color-red-theme, 12%), 20%);
-@color-red-player-status-text: lighten(@color-red-theme_2-font, 32%);
-@color-red-player-detail-lyric: fadeout(@color-red-theme_2-font, 40%);
-@color-red-player-detail-lyric-active: lighten(@color-red-theme, 2%);
-@color-red-player-detail-play-btn: lighten(@color-red-theme, 7%);
-@color-red-tab-border-top: fadeout(lighten(@color-red-theme, 25%), 70%);
-@color-red-tab-border-bottom: lighten(@color-red-theme, 35%);
-@color-red-tab-btn-background: fadeout(lighten(@color-red-theme, 10%), 80%);
-@color-red-tab-btn-background-hover: @color-red-theme_2-hover;
-@color-red-tab-border-top: fadeout(lighten(@color-red-theme, 5%), 50%);
-@color-red-tab-border-bottom: lighten(@color-red-theme, 5%);
-@color-red-hideBtn: #3bc2b2;
-@color-red-minBtn: #85c43b;
-@color-red-maxBtn: #e7aa36;
-@color-red-closeBtn: #ea6e4d;
-@color-red-hideBtn-hover: fadeout(@color-hideBtn, 10%);
-@color-red-minBtn-hover: fadeout(@color-red-minBtn, 10%);
-@color-red-maxBtn-hover: fadeout(@color-red-maxBtn, 10%);
-@color-red-closeBtn-hover: fadeout(@color-red-closeBtn, 10%);
-@color-red-badge-success: lighten(@color-red-theme, 10%);
-@color-red-badge-success-font: #fff;
-@color-red-badge-info: #dfbb6b;
-@color-red-badge-info-font: #fff;
-
-@color-pink-theme: #f1828d;
-@color-pink-theme-bgimg: none;
-@color-pink-theme-bgposition: center;
-@color-pink-theme-bgsize: cover;
-@color-pink-theme-hover: fadeout(lighten(@color-pink-theme, 10%), 30%);
-@color-pink-theme-active: fadeout(darken(@color-pink-theme, 20%), 60%);
-@color-pink-theme-font: #fff;
-@color-pink-theme-font-label: lighten(@color-pink-theme, 35%);
-@color-pink-theme_2: #fff;
-@color-pink-theme_2-background_1: #fff;
-@color-pink-theme_2-background_2: fadeout(@color-pink-theme_2-background_1, 2%);
-@color-pink-theme_2-hover: fadeout(lighten(@color-pink-theme, 10%), 75%);
-@color-pink-theme_2-active: fadeout(lighten(@color-pink-theme, 10%), 60%);
-@color-pink-theme_2-font: darken(desaturate(@color-pink-theme_2, 70%), 90%);
-@color-pink-theme_2-font-label: fadeout(@color-pink-theme_2-font, 55%);
-// @color-pink-theme_2-line: transparent;
-@color-pink-theme_2-line: lighten(@color-pink-theme, 25%);
-@color-pink-reply-floor: fadeout(@color-pink-theme, 93%);
-@color-pink-theme-sidebar: @color-pink-theme;
-@color-pink-btn: darken(@color-pink-theme, 3%);
-@color-pink-btn-background: fadeout(lighten(@color-pink-theme, 20%), 50%);
-@color-pink-btn-hover: fadeout(lighten(@color-pink-theme, 5%), 70%);
-@color-pink-btn-active: fadeout(darken(@color-pink-theme, 5%), 70%);
-@color-pink-btn-select: fadeout(lighten(@color-pink-theme, 5%), 50%);
-@color-pink-pagination-background: fadeout(lighten(@color-pink-theme, 23%), 25%);
-@color-pink-pagination-hover: fadeout(lighten(@color-pink-theme, 5%), 70%);
-@color-pink-pagination-active: fadeout(darken(@color-pink-theme, 5%), 70%);
-@color-pink-pagination-select: fadeout(lighten(@color-pink-theme, 5%), 50%);
-@color-pink-search-form-background: fadeout(lighten(@color-pink-theme, 20%), 10%);
-@color-pink-search-list-hover: fadeout(darken(@color-pink-theme, 10%), 60%);
-@color-pink-scrollbar-track: fadeout(lighten(@color-pink-theme, 6%), 75%);
-@color-pink-scrollbar-thumb: fadeout(lighten(@color-pink-theme, 6%), 35%);
-@color-pink-scrollbar-thumb-hover: fadeout(lighten(@color-pink-theme, 6%), 20%);
-@color-pink-player-pic-c1: fadeout(@color-pink-theme_2, 50%);
-@color-pink-player-pic-c2: darken(@color-pink-theme_2, 30%);
-@color-pink-player-progress: darken(@color-pink-theme_2, 6%);
-@color-pink-player-progress-bar1: darken(@color-pink-theme_2, 12%);
-@color-pink-player-progress-bar2: fadeout(lighten(@color-pink-theme, 2%), 20%);
-@color-pink-player-status-text: lighten(@color-pink-theme_2-font, 32%);
-@color-pink-player-detail-lyric: fadeout(@color-pink-theme_2-font, 40%);
-@color-pink-player-detail-lyric-active: darken(@color-pink-theme, 2%);
-@color-pink-player-detail-play-btn: lighten(@color-pink-theme, 7%);
-@color-pink-tab-btn-background: fadeout(lighten(@color-pink-theme, 10%), 70%);
-@color-pink-tab-btn-background-hover: @color-pink-theme_2-hover;
-@color-pink-tab-border-top: fadeout(lighten(@color-pink-theme, 5%), 40%);
-@color-pink-tab-border-bottom: @color-pink-theme;
-@color-pink-hideBtn: #3bc2b2;
-@color-pink-minBtn: #85c43b;
-@color-pink-maxBtn: #e7aa36;
-@color-pink-closeBtn: #ea6e4d;
-@color-pink-hideBtn-hover: fadeout(@color-hideBtn, 10%);
-@color-pink-minBtn-hover: fadeout(@color-pink-minBtn, 10%);
-@color-pink-maxBtn-hover: fadeout(@color-pink-maxBtn, 10%);
-@color-pink-closeBtn-hover: fadeout(@color-pink-closeBtn, 10%);
-@color-pink-badge-success: lighten(@color-pink-theme, 10%);
-@color-pink-badge-success-font: #fff;
-@color-pink-badge-info: #f5b684;
-@color-pink-badge-info-font: #fff;
-
-@color-purple-theme: #9b59b6;
-@color-purple-theme-bgimg: none;
-@color-purple-theme-bgposition: center;
-@color-purple-theme-bgsize: cover;
-@color-purple-theme-hover: fadeout(lighten(@color-purple-theme, 10%), 30%);
-@color-purple-theme-active: fadeout(darken(@color-purple-theme, 20%), 60%);
-@color-purple-theme-font: #fff;
-@color-purple-theme-font-label: lighten(@color-purple-theme, 35%);
-@color-purple-theme_2: #fff;
-@color-purple-theme_2-background_1: #fff;
-@color-purple-theme_2-background_2: fadeout(@color-purple-theme_2-background_1, 2%);
-@color-purple-theme_2-hover: fadeout(lighten(@color-purple-theme, 10%), 80%);
-@color-purple-theme_2-active: fadeout(lighten(@color-purple-theme, 10%), 70%);
-@color-purple-theme_2-font: darken(desaturate(@color-purple-theme_2, 70%), 90%);
-@color-purple-theme_2-font-label: fadeout(@color-purple-theme_2-font, 55%);
-// @color-purple-theme_2-line: transparent;
-@color-purple-theme_2-line: lighten(@color-purple-theme, 43%);
-@color-purple-reply-floor: fadeout(@color-purple-theme, 95%);
-@color-purple-theme-sidebar: @color-purple-theme;
-@color-purple-btn: lighten(@color-purple-theme, 5%);
-@color-purple-btn-background: fadeout(lighten(@color-purple-theme, 35%), 70%);
-@color-purple-btn-hover: fadeout(lighten(@color-purple-theme, 5%), 70%);
-@color-purple-btn-active: fadeout(darken(@color-purple-theme, 5%), 70%);
-@color-purple-btn-select: fadeout(lighten(@color-purple-theme, 5%), 50%);
-@color-purple-pagination-background: fadeout(lighten(@color-purple-theme, 40%), 30%);
-@color-purple-pagination-hover: fadeout(lighten(@color-purple-theme, 15%), 70%);
-@color-purple-pagination-active: fadeout(darken(@color-purple-theme, 15%), 70%);
-@color-purple-pagination-select: fadeout(lighten(@color-purple-theme, 15%), 50%);
-@color-purple-search-form-background: fadeout(lighten(@color-purple-theme, 35%), 10%);
-@color-purple-search-list-hover: fadeout(darken(@color-purple-theme, 10%), 70%);
-@color-purple-scrollbar-track: fadeout(lighten(@color-purple-theme, 10%), 77%);
-@color-purple-scrollbar-thumb: fadeout(lighten(@color-purple-theme, 10%), 50%);
-@color-purple-scrollbar-thumb-hover: fadeout(lighten(@color-purple-theme, 10%), 35%);
-@color-purple-player-pic-c1: fadeout(@color-purple-theme_2, 50%);
-@color-purple-player-pic-c2: darken(@color-purple-theme_2, 30%);
-@color-purple-player-progress: darken(@color-purple-theme_2, 6%);
-@color-purple-player-progress-bar1: darken(@color-purple-theme_2, 12%);
-@color-purple-player-progress-bar2: fadeout(lighten(@color-purple-theme, 12%), 20%);
-@color-purple-player-status-text: lighten(@color-purple-theme_2-font, 32%);
-@color-purple-player-detail-lyric: fadeout(@color-purple-theme_2-font, 40%);
-@color-purple-player-detail-lyric-active: darken(@color-purple-theme, 2%);
-@color-purple-player-detail-play-btn: lighten(@color-purple-theme, 7%);
-@color-purple-tab-btn-background: fadeout(lighten(@color-purple-theme, 10%), 80%);
-@color-purple-tab-btn-background-hover: @color-purple-theme_2-hover;
-@color-purple-tab-border-top: fadeout(lighten(@color-purple-theme, 5%), 50%);
-@color-purple-tab-border-bottom: lighten(@color-purple-theme, 5%);
-@color-purple-hideBtn: #3bc2b2;
-@color-purple-minBtn: #85c43b;
-@color-purple-maxBtn: #e7aa36;
-@color-purple-closeBtn: #ea6e4d;
-@color-purple-hideBtn-hover: fadeout(@color-hideBtn, 10%);
-@color-purple-minBtn-hover: fadeout(@color-purple-minBtn, 10%);
-@color-purple-maxBtn-hover: fadeout(@color-purple-maxBtn, 10%);
-@color-purple-closeBtn-hover: fadeout(@color-purple-closeBtn, 10%);
-@color-purple-badge-success: lighten(@color-purple-theme, 15%);
-@color-purple-badge-success-font: #fff;
-@color-purple-badge-info: #e5a39f;
-@color-purple-badge-info-font: #fff;
-
-@color-grey-theme: #6c7a89;
-@color-grey-theme-bgimg: none;
-@color-grey-theme-bgposition: center;
-@color-grey-theme-bgsize: cover;
-@color-grey-theme-hover: fadeout(lighten(@color-grey-theme, 10%), 30%);
-@color-grey-theme-active: fadeout(darken(@color-grey-theme, 20%), 60%);
-@color-grey-theme-font: #fff;
-@color-grey-theme-font-label: lighten(@color-grey-theme, 35%);
-@color-grey-theme_2: #fff;
-@color-grey-theme_2-background_1: #fff;
-@color-grey-theme_2-background_2: fadeout(@color-grey-theme_2-background_1, 2%);
-@color-grey-theme_2-hover: fadeout(lighten(@color-grey-theme, 10%), 80%);
-@color-grey-theme_2-active: fadeout(lighten(@color-grey-theme, 10%), 70%);
-@color-grey-theme_2-font: darken(desaturate(@color-grey-theme_2, 70%), 90%);
-@color-grey-theme_2-font-label: fadeout(@color-grey-theme_2-font, 55%);
-// @color-grey-theme_2-line: transparent;
-@color-grey-theme_2-line: lighten(@color-grey-theme, 47%);
-@color-grey-reply-floor: fadeout(@color-grey-theme, 95%);
-@color-grey-theme-sidebar: @color-grey-theme;
-@color-grey-btn: lighten(@color-grey-theme, 5%);
-@color-grey-btn-background: fadeout(lighten(@color-grey-theme, 35%), 70%);
-@color-grey-btn-hover: fadeout(lighten(@color-grey-theme, 5%), 70%);
-@color-grey-btn-active: fadeout(darken(@color-grey-theme, 5%), 70%);
-@color-grey-btn-select: fadeout(lighten(@color-grey-theme, 5%), 50%);
-@color-grey-pagination-background: fadeout(lighten(@color-grey-theme, 45%), 30%);
-@color-grey-pagination-hover: fadeout(lighten(@color-grey-theme, 10%), 70%);
-@color-grey-pagination-active: fadeout(darken(@color-grey-theme, 10%), 70%);
-@color-grey-pagination-select: fadeout(lighten(@color-grey-theme, 10%), 50%);
-@color-grey-search-form-background: fadeout(lighten(@color-grey-theme, 35%), 10%);
-@color-grey-search-list-hover: fadeout(darken(@color-grey-theme, 10%), 70%);
-@color-grey-scrollbar-track: fadeout(lighten(@color-grey-theme, 10%), 75%);
-@color-grey-scrollbar-thumb: fadeout(lighten(@color-grey-theme, 10%), 50%);
-@color-grey-scrollbar-thumb-hover: fadeout(lighten(@color-grey-theme, 10%), 35%);
-@color-grey-player-pic-c1: fadeout(@color-grey-theme_2, 50%);
-@color-grey-player-pic-c2: darken(@color-grey-theme_2, 30%);
-@color-grey-player-progress: darken(@color-grey-theme_2, 6%);
-@color-grey-player-progress-bar1: darken(@color-grey-theme_2, 12%);
-@color-grey-player-progress-bar2: fadeout(lighten(@color-grey-theme, 12%), 20%);
-@color-grey-player-status-text: lighten(@color-grey-theme_2-font, 32%);
-@color-grey-player-detail-lyric: fadeout(@color-grey-theme_2-font, 55%);
-@color-grey-player-detail-lyric-active: darken(@color-grey-theme, 3%);
-@color-grey-player-detail-play-btn: lighten(@color-grey-theme, 7%);
-@color-grey-tab-btn-background: fadeout(lighten(@color-grey-theme, 10%), 80%);
-@color-grey-tab-btn-background-hover: @color-grey-theme_2-hover;
-@color-grey-tab-border-top: fadeout(lighten(@color-grey-theme, 5%), 50%);
-@color-grey-tab-border-bottom: lighten(@color-grey-theme, 5%);
-@color-grey-hideBtn: #3bc2b2;
-@color-grey-minBtn: #85c43b;
-@color-grey-maxBtn: #e7aa36;
-@color-grey-closeBtn: #ea6e4d;
-@color-grey-hideBtn-hover: fadeout(@color-hideBtn, 10%);
-@color-grey-minBtn-hover: fadeout(@color-grey-minBtn, 10%);
-@color-grey-maxBtn-hover: fadeout(@color-grey-maxBtn, 10%);
-@color-grey-closeBtn-hover: fadeout(@color-grey-closeBtn, 10%);
-@color-grey-badge-success: lighten(@color-grey-theme, 15%);
-@color-grey-badge-success-font: #fff;
-@color-grey-badge-info: #b19b9f;
-@color-grey-badge-info-font: #fff;
-
-
-@color-ming-theme: #336e7b;
-@color-ming-theme-bgimg: none;
-@color-ming-theme-bgposition: center;
-@color-ming-theme-bgsize: cover;
-@color-ming-theme-hover: fadeout(lighten(@color-ming-theme, 7%), 30%);
-@color-ming-theme-active: fadeout(darken(@color-ming-theme, 20%), 60%);
-@color-ming-theme-font: #fff;
-@color-ming-theme-font-label: lighten(@color-ming-theme, 35%);
-@color-ming-theme_2: #fff;
-@color-ming-theme_2-hover: fadeout(lighten(@color-ming-theme, 10%), 85%);
-@color-ming-theme_2-active: fadeout(lighten(@color-ming-theme, 10%), 75%);
-@color-ming-theme_2-background_1: #fff;
-@color-ming-theme_2-background_2: fadeout(@color-ming-theme_2-background_1, 2%);
-@color-ming-theme_2-font: darken(desaturate(@color-ming-theme_2, 70%), 90%);
-@color-ming-theme_2-font-label: fadeout(@color-ming-theme_2-font, 55%);
-// @color-ming-theme_2-line: transparent;
-@color-ming-theme_2-line: lighten(@color-ming-theme, 60%);
-@color-ming-reply-floor: fadeout(@color-ming-theme, 95%);
-@color-ming-theme-sidebar: @color-ming-theme;
-@color-ming-btn: lighten(@color-ming-theme, 5%);
-@color-ming-btn-background: fadeout(lighten(@color-ming-theme, 35%), 75%);
-@color-ming-btn-hover: fadeout(lighten(@color-ming-theme, 5%), 70%);
-@color-ming-btn-active: fadeout(darken(@color-ming-theme, 5%), 70%);
-@color-ming-btn-select: fadeout(lighten(@color-ming-theme, 5%), 50%);
-@color-ming-pagination-background: fadeout(lighten(@color-ming-theme, 50%), 35%);
-@color-ming-pagination-hover: fadeout(lighten(@color-ming-theme, 15%), 70%);
-@color-ming-pagination-active: fadeout(darken(@color-ming-theme, 15%), 70%);
-@color-ming-pagination-select: fadeout(lighten(@color-ming-theme, 15%), 50%);
-@color-ming-search-form-background: fadeout(lighten(@color-ming-theme, 45%), 15%);
-@color-ming-search-list-hover: fadeout(darken(@color-ming-theme, 10%), 70%);
-@color-ming-scrollbar-track: fadeout(lighten(@color-ming-theme, 10%), 75%);
-@color-ming-scrollbar-thumb: fadeout(lighten(@color-ming-theme, 10%), 50%);
-@color-ming-scrollbar-thumb-hover: fadeout(lighten(@color-ming-theme, 10%), 35%);
-@color-ming-player-pic-c1: fadeout(@color-ming-theme_2, 50%);
-@color-ming-player-pic-c2: darken(@color-ming-theme_2, 30%);
-@color-ming-player-progress: darken(@color-ming-theme_2, 6%);
-@color-ming-player-progress-bar1: darken(@color-ming-theme_2, 12%);
-@color-ming-player-progress-bar2: fadeout(lighten(@color-ming-theme, 12%), 20%);
-@color-ming-player-status-text: lighten(@color-ming-theme_2-font, 32%);
-@color-ming-player-detail-lyric: fadeout(@color-ming-theme_2-font, 50%);
-@color-ming-player-detail-lyric-active: lighten(@color-ming-theme, 2%);
-@color-ming-player-detail-play-btn: lighten(@color-ming-theme, 10%);
-@color-ming-tab-border-top: fadeout(lighten(@color-ming-theme, 25%), 70%);
-@color-ming-tab-border-bottom: lighten(@color-ming-theme, 35%);
-@color-ming-tab-btn-background: fadeout(lighten(@color-ming-theme, 10%), 80%);
-@color-ming-tab-btn-background-hover: @color-ming-theme_2-hover;
-@color-ming-tab-border-top: fadeout(lighten(@color-ming-theme, 5%), 50%);
-@color-ming-tab-border-bottom: lighten(@color-ming-theme, 5%);
-@color-ming-hideBtn: #3bc2b2;
-@color-ming-minBtn: #85c43b;
-@color-ming-maxBtn: #e7aa36;
-@color-ming-closeBtn: #ea6e4d;
-@color-ming-hideBtn-hover: fadeout(@color-hideBtn, 10%);
-@color-ming-minBtn-hover: fadeout(@color-ming-minBtn, 10%);
-@color-ming-maxBtn-hover: fadeout(@color-ming-maxBtn, 10%);
-@color-ming-closeBtn-hover: fadeout(@color-ming-closeBtn, 10%);
-@color-ming-badge-success: lighten(@color-ming-theme, 10%);
-@color-ming-badge-success-font: #fff;
-@color-ming-badge-info: #6376a2;
-@color-ming-badge-info-font: #fff;
-
-
-@color-blue2-theme: #4f62d0;
-@color-blue2-theme-bgimg: none;
-@color-blue2-theme-bgposition: center;
-@color-blue2-theme-bgsize: cover;
-@color-blue2-theme-hover: fadeout(lighten(@color-blue2-theme, 10%), 30%);
-@color-blue2-theme-active: fadeout(darken(@color-blue2-theme, 20%), 60%);
-@color-blue2-theme-font: #fff;
-@color-blue2-theme-font-label: lighten(@color-blue2-theme, 35%);
-@color-blue2-theme_2: #fff;
-@color-blue2-theme_2-background_1: #fff;
-@color-blue2-theme_2-background_2: fadeout(@color-blue2-theme_2-background_1, 2%);
-@color-blue2-theme_2-hover: fadeout(lighten(@color-blue2-theme, 10%), 80%);
-@color-blue2-theme_2-active: fadeout(lighten(@color-blue2-theme, 10%), 70%);
-@color-blue2-theme_2-font: darken(desaturate(@color-blue2-theme_2, 70%), 90%);
-@color-blue2-theme_2-font-label: fadeout(@color-blue2-theme_2-font, 55%);
-// @color-blue2-theme_2-line: transparent;
-@color-blue2-theme_2-line: lighten(@color-blue2-theme, 41%);
-@color-blue2-reply-floor: fadeout(@color-blue2-theme, 95%);
-@color-blue2-theme-sidebar: @color-blue2-theme;
-@color-blue2-btn: lighten(@color-blue2-theme, 5%);
-@color-blue2-btn-background: fadeout(lighten(@color-blue2-theme, 30%), 70%);
-@color-blue2-btn-hover: fadeout(lighten(@color-blue2-theme, 5%), 70%);
-@color-blue2-btn-active: fadeout(darken(@color-blue2-theme, 5%), 70%);
-@color-blue2-btn-select: fadeout(lighten(@color-blue2-theme, 5%), 50%);
-@color-blue2-pagination-background: fadeout(lighten(@color-blue2-theme, 35%), 30%);
-@color-blue2-pagination-hover: fadeout(lighten(@color-blue2-theme, 10%), 70%);
-@color-blue2-pagination-active: fadeout(darken(@color-blue2-theme, 10%), 70%);
-@color-blue2-pagination-select: fadeout(lighten(@color-blue2-theme, 10%), 50%);
-@color-blue2-search-form-background: fadeout(lighten(@color-blue2-theme, 35%), 10%);
-@color-blue2-search-list-hover: fadeout(darken(@color-blue2-theme, 10%), 70%);
-@color-blue2-scrollbar-track: fadeout(lighten(@color-blue2-theme, 10%), 75%);
-@color-blue2-scrollbar-thumb: fadeout(lighten(@color-blue2-theme, 10%), 50%);
-@color-blue2-scrollbar-thumb-hover: fadeout(lighten(@color-blue2-theme, 10%), 35%);
-@color-blue2-player-pic-c1: fadeout(@color-blue2-theme_2, 50%);
-@color-blue2-player-pic-c2: darken(@color-blue2-theme_2, 30%);
-@color-blue2-player-progress: darken(@color-blue2-theme_2, 6%);
-@color-blue2-player-progress-bar1: darken(@color-blue2-theme_2, 12%);
-@color-blue2-player-progress-bar2: fadeout(lighten(@color-blue2-theme, 12%), 20%);
-@color-blue2-player-status-text: lighten(@color-blue2-theme_2-font, 32%);
-@color-blue2-player-detail-lyric: fadeout(@color-blue2-theme_2-font, 50%);
-@color-blue2-player-detail-lyric-active: darken(@color-blue2-theme, 2%);
-@color-blue2-player-detail-play-btn: lighten(@color-blue2-theme, 7%);
-@color-blue2-tab-btn-background: fadeout(lighten(@color-blue2-theme, 10%), 80%);
-@color-blue2-tab-btn-background-hover: @color-blue2-theme_2-hover;
-@color-blue2-tab-border-top: fadeout(lighten(@color-blue2-theme, 5%), 50%);
-@color-blue2-tab-border-bottom: lighten(@color-blue2-theme, 5%);
-@color-blue2-hideBtn: #3bc2b2;
-@color-blue2-minBtn: #85c43b;
-@color-blue2-maxBtn: #e7aa36;
-@color-blue2-closeBtn: #ea6e4d;
-@color-blue2-hideBtn-hover: fadeout(@color-hideBtn, 10%);
-@color-blue2-minBtn-hover: fadeout(@color-blue2-minBtn, 10%);
-@color-blue2-maxBtn-hover: fadeout(@color-blue2-maxBtn, 10%);
-@color-blue2-closeBtn-hover: fadeout(@color-blue2-closeBtn, 10%);
-@color-blue2-badge-success: lighten(@color-blue2-theme, 15%);
-@color-blue2-badge-success-font: #fff;
-@color-blue2-badge-info: #b080db;
-@color-blue2-badge-info-font: #fff;
-
-
-@color-black-theme: #272727;
-@color-black-theme-bgimg: url(../images/landingMoon.png);
-@color-black-theme-bgposition: center;
-@color-black-theme-bgsize: cover;
-@color-black-theme-hover: fadeout(lighten(@color-black-theme, 13%), 30%);
-@color-black-theme-active: fadeout(lighten(@color-black-theme, 8%), 30%);
-@color-black-theme-font: lighten(@color-black-theme, 55%);
-@color-black-theme-font-label: lighten(@color-black-theme, 35%);
-@color-black-theme_2: rgba(19, 19, 19, 0.93);
-@color-black-theme_2-background_1: #080808;
-@color-black-theme_2-background_2: #1f1f1f;
-@color-black-theme_2-hover: fadeout(lighten(@color-black-theme, 10%), 80%);
-@color-black-theme_2-active: fadeout(lighten(@color-black-theme, 10%), 70%);
-@color-black-theme_2-font: lighten(@color-black-theme_2, 73%);
-@color-black-theme_2-font-label: darken(@color-black-theme_2-font, 30%);
-// @color-black-theme_2-line: transparent;
-@color-black-theme_2-line: lighten(@color-black-theme_2, 3.2%);
-@color-black-reply-floor: fadeout(lighten(@color-black-theme, 60%), 95%);
-@color-black-theme-sidebar: @color-black-theme;
-@color-black-btn: lighten(@color-black-theme, 40%);
-@color-black-btn-background: fadeout(lighten(@color-black-theme, 30%), 70%);
-@color-black-btn-hover: fadeout(lighten(@color-black-theme, 40%), 70%);
-@color-black-btn-active: fadeout(lighten(@color-black-theme, 20%), 70%);
-@color-black-btn-select: fadeout(lighten(@color-black-theme, 25%), 70%);
-@color-black-pagination-background: fadeout(lighten(@color-black-theme, 25%), 20%);
-@color-black-pagination-hover: fadeout(lighten(@color-black-theme, 1%), 70%);
-@color-black-pagination-active: fadeout(darken(@color-black-theme, 5%), 60%);
-@color-black-pagination-select: fadeout(darken(@color-black-theme, 3%), 60%);
-@color-black-search-form-background: fadeout(lighten(@color-black-theme, 8%), 6%);
-@color-black-search-list-hover: fadeout(darken(@color-black-theme, 10%), 70%);
-@color-black-scrollbar-track: fadeout(lighten(@color-black-theme, 10%), 75%);
-@color-black-scrollbar-thumb: fadeout(lighten(@color-black-theme, 10%), 50%);
-@color-black-scrollbar-thumb-hover: fadeout(lighten(@color-black-theme, 10%), 35%);
-@color-black-player-pic-c1: fadeout(@color-black-theme_2, 50%);
-@color-black-player-pic-c2: lighten(@color-black-theme_2, 30%);
-@color-black-player-progress: fadeout(lighten(@color-black-theme, 20%), 80%);
-@color-black-player-progress-bar1: lighten(@color-black-theme_2, 12%);
-@color-black-player-progress-bar2: fadeout(lighten(@color-black-theme, 12%), 20%);
-@color-black-player-status-text: darken(@color-black-theme_2-font, 20%);
-@color-black-player-detail-lyric: fadeout(darken(@color-black-theme_2-font, 30%), 10%);
-@color-black-player-detail-lyric-active: lighten(@color-black-theme, 50%);
-@color-black-player-detail-play-btn: lighten(@color-black-theme, 30%);
-@color-black-tab-btn-background: fadeout(lighten(@color-black-theme, 10%), 80%);
-@color-black-tab-btn-background-hover: @color-black-theme_2-hover;
-@color-black-tab-border-top: fadeout(lighten(@color-black-theme, 5%), 50%);
-@color-black-tab-border-bottom: lighten(@color-black-theme, 5%);
-@color-black-hideBtn: #4e4e4e;
-@color-black-minBtn: #5e5e5e;
-@color-black-maxBtn: #535353;
-@color-black-closeBtn: #6e6e6e;
-@color-black-hideBtn-hover: fadeout(@color-hideBtn, 10%);
-@color-black-minBtn-hover: fadeout(@color-black-minBtn, 10%);
-@color-black-maxBtn-hover: fadeout(@color-black-maxBtn, 10%);
-@color-black-closeBtn-hover: fadeout(@color-black-closeBtn, 10%);
-@color-black-badge-success: lighten(@color-black-theme, 10%);
-@color-black-badge-success-font: #fff;
-@color-black-badge-info: lighten(@color-black-theme, 25%);
-@color-black-badge-info-font: #fff;
-
-
-@color-mid_autumn-theme: rgba(74, 55, 82, 1);
-@color-mid_autumn-theme-bgimg: url(../images/jqbg.jpg);
-@color-mid_autumn-theme-bgposition: center;
-@color-mid_autumn-theme-bgsize: cover;
-@color-mid_autumn-theme-hover: fadeout(lighten(@color-mid_autumn-theme, 10%), 40%);
-@color-mid_autumn-theme-active: fadeout(lighten(@color-mid_autumn-theme, 15%), 60%);
-@color-mid_autumn-theme-font: rgba(246, 233, 255, 0.9);
-@color-mid_autumn-theme-font-label: fadeout(lighten(@color-mid_autumn-theme, 20%), 20%);
-@color-mid_autumn-theme_2: rgba(255, 255, 255, .9);
-@color-mid_autumn-theme_2-background_1: #ececec;
-@color-mid_autumn-theme_2-background_2: fadeout(@color-mid_autumn-theme_2-background_1, 2%);
-@color-mid_autumn-theme_2-hover: fadeout(lighten(@color-mid_autumn-theme, 15%), 80%);
-@color-mid_autumn-theme_2-active: fadeout(lighten(@color-mid_autumn-theme, 15%), 70%);
-@color-mid_autumn-theme_2-font: darken(desaturate(@color-mid_autumn-theme_2, 70%), 90%);
-@color-mid_autumn-theme_2-font-label: desaturate(lighten(@color-mid_autumn-theme, 30%), 45%);
-// @color-mid_autumn-theme_2-line: transparent;
-@color-mid_autumn-theme_2-line: lighten(@color-mid_autumn-theme, 61%);
-@color-mid_autumn-reply-floor: fadeout(@color-mid_autumn-theme, 95%);
-@color-mid_autumn-theme-sidebar: rgba(255, 255, 255, 0);
-@color-mid_autumn-btn: lighten(@color-mid_autumn-theme, 10%);
-@color-mid_autumn-btn-background: fadeout(lighten(@color-mid_autumn-theme, 35%), 70%);
-@color-mid_autumn-btn-hover: fadeout(lighten(@color-mid_autumn-theme, 5%), 70%);
-@color-mid_autumn-btn-active: fadeout(darken(@color-mid_autumn-theme, 5%), 70%);
-@color-mid_autumn-btn-select: fadeout(lighten(@color-mid_autumn-theme, 5%), 50%);
-@color-mid_autumn-pagination-background: fadeout(lighten(@color-mid_autumn-theme, 45%), 50%);
-@color-mid_autumn-pagination-hover: fadeout(lighten(@color-mid_autumn-theme, 10%), 70%);
-@color-mid_autumn-pagination-active: fadeout(darken(@color-mid_autumn-theme, 10%), 70%);
-@color-mid_autumn-pagination-select: fadeout(lighten(@color-mid_autumn-theme, 10%), 55%);
-@color-mid_autumn-search-form-background: fadeout(lighten(@color-mid_autumn-theme, 50%), 10%);
-@color-mid_autumn-search-list-hover: fadeout(darken(@color-mid_autumn-theme, 10%), 70%);
-@color-mid_autumn-scrollbar-track: fadeout(lighten(@color-mid_autumn-theme, 10%), 80%);
-@color-mid_autumn-scrollbar-thumb: fadeout(lighten(@color-mid_autumn-theme, 10%), 60%);
-@color-mid_autumn-scrollbar-thumb-hover: fadeout(lighten(@color-mid_autumn-theme, 10%), 40%);
-@color-mid_autumn-player-pic-c1: fadeout(@color-mid_autumn-theme_2, 50%);
-@color-mid_autumn-player-pic-c2: darken(@color-mid_autumn-theme_2, 30%);
-@color-mid_autumn-player-progress: fadeout(lighten(@color-mid_autumn-theme, 20%), 82%);
-@color-mid_autumn-player-progress-bar1: darken(@color-mid_autumn-theme_2, 12%);
-@color-mid_autumn-player-progress-bar2: fadeout(lighten(@color-mid_autumn-theme, 12%), 20%);
-@color-mid_autumn-player-status-text: lighten(@color-mid_autumn-theme_2-font, 32%);
-@color-mid_autumn-player-detail-lyric: fadeout(@color-mid_autumn-theme_2-font, 40%);
-@color-mid_autumn-player-detail-lyric-active: lighten(@color-mid_autumn-theme, 7%);
-@color-mid_autumn-player-detail-play-btn: lighten(@color-mid_autumn-theme, 7%);
-@color-mid_autumn-tab-btn-background: fadeout(lighten(@color-mid_autumn-theme, 10%), 80%);
-@color-mid_autumn-tab-btn-background-hover: @color-mid_autumn-theme_2-hover;
-@color-mid_autumn-tab-border-top: fadeout(lighten(@color-mid_autumn-theme, 5%), 50%);
-@color-mid_autumn-tab-border-bottom: lighten(@color-mid_autumn-theme, 5%);
-@color-mid_autumn-hideBtn: #3bc2b2;
-@color-mid_autumn-minBtn: #85c43b;
-@color-mid_autumn-maxBtn: #e7aa36;
-@color-mid_autumn-closeBtn: #ea6e4d;
-@color-mid_autumn-hideBtn-hover: fadeout(@color-hideBtn, 10%);
-@color-mid_autumn-minBtn-hover: fadeout(@color-mid_autumn-minBtn, 10%);
-@color-mid_autumn-maxBtn-hover: fadeout(@color-mid_autumn-maxBtn, 10%);
-@color-mid_autumn-closeBtn-hover: fadeout(@color-mid_autumn-closeBtn, 10%);
-@color-mid_autumn-badge-success: lighten(@color-mid_autumn-theme, 25%);
-@color-mid_autumn-badge-success-font: #fff;
-@color-mid_autumn-badge-info: #af9479;
-@color-mid_autumn-badge-info-font: #fff;
-
-/*
-@color-mid_autumn-theme: #312438;
-@color-mid_autumn-theme-bgimg: url(../images/jqbg.jpg);
-@color-mid_autumn-theme-bgposition: center;
-@color-mid_autumn-theme-bgsize: cover;
-@color-mid_autumn-theme-hover: fadeout(lighten(@color-mid_autumn-theme, 5%), 60%);
-@color-mid_autumn-theme-active: fadeout(lighten(@color-mid_autumn-theme, 10%), 70%);
-@color-mid_autumn-theme-font: rgba(246, 233, 255, 0.9);
-@color-mid_autumn-theme-font-label: fadeout(lighten(@color-mid_autumn-theme, 20%), 20%);
-@color-mid_autumn-theme_2: rgba(0, 0, 0, .8);
-@color-mid_autumn-theme_2-background_1: #030107;
-@color-mid_autumn-theme_2-background_2: fadeout(darken(desaturate(@color-mid_autumn-theme, 10%), 7%), 2%);
-@color-mid_autumn-theme_2-hover: fadeout(lighten(@color-mid_autumn-theme, 15%), 80%);
-@color-mid_autumn-theme_2-active: fadeout(lighten(@color-mid_autumn-theme, 15%), 70%);
-@color-mid_autumn-theme_2-font: lighten(@color-mid_autumn-theme_2, 90%);
-@color-mid_autumn-theme_2-font-label: desaturate(lighten(@color-mid_autumn-theme, 30%), 45%);
-// @color-mid_autumn-theme_2-line: transparent;
-@color-mid_autumn-theme_2-line: darken(@color-mid_autumn-theme, 18%);
-@color-mid_autumn-reply-floor: fadeout(@color-mid_autumn-theme, 95%);
-@color-mid_autumn-theme-sidebar: rgba(255, 255, 255, 0);
-@color-mid_autumn-btn: darken(@color-mid_autumn-theme, 10%);
-@color-mid_autumn-btn-background: fadeout(lighten(@color-mid_autumn-theme, 35%), 70%);
-@color-mid_autumn-btn-hover: fadeout(lighten(@color-mid_autumn-theme, 5%), 70%);
-@color-mid_autumn-btn-active: fadeout(darken(@color-mid_autumn-theme, 5%), 70%);
-@color-mid_autumn-btn-select: fadeout(lighten(@color-mid_autumn-theme, 5%), 50%);
-@color-mid_autumn-pagination-background: fadeout(lighten(@color-mid_autumn-theme, 45%), 50%);
-@color-mid_autumn-pagination-hover: fadeout(lighten(@color-mid_autumn-theme, 10%), 70%);
-@color-mid_autumn-pagination-active: fadeout(darken(@color-mid_autumn-theme, 10%), 70%);
-@color-mid_autumn-pagination-select: fadeout(lighten(@color-mid_autumn-theme, 10%), 55%);
-@color-mid_autumn-search-form-background: fadeout(lighten(@color-mid_autumn-theme, 50%), 10%);
-@color-mid_autumn-search-list-hover: fadeout(darken(@color-mid_autumn-theme, 10%), 70%);
-@color-mid_autumn-scrollbar-track: fadeout(lighten(@color-mid_autumn-theme, 10%), 80%);
-@color-mid_autumn-scrollbar-thumb: fadeout(lighten(@color-mid_autumn-theme, 10%), 60%);
-@color-mid_autumn-scrollbar-thumb-hover: fadeout(lighten(@color-mid_autumn-theme, 10%), 40%);
-@color-mid_autumn-player-pic-c1: fadeout(@color-mid_autumn-theme_2, 50%);
-@color-mid_autumn-player-pic-c2: darken(@color-mid_autumn-theme_2, 30%);
-@color-mid_autumn-player-progress: darken(@color-mid_autumn-theme_2, 10%);
-@color-mid_autumn-player-progress-bar1: darken(@color-mid_autumn-theme_2, 12%);
-@color-mid_autumn-player-progress-bar2: fadeout(lighten(@color-mid_autumn-theme, 12%), 20%);
-@color-mid_autumn-player-status-text: lighten(@color-mid_autumn-theme_2-font, 32%);
-@color-mid_autumn-player-detail-lyric: lighten(@color-mid_autumn-theme, 7%);
-@color-mid_autumn-player-detail-lyric-active: lighten(@color-mid_autumn-theme, 7%);
-@color-mid_autumn-player-detail-play-btn: lighten(@color-mid_autumn-theme, 7%);
-@color-mid_autumn-tab-btn-background: fadeout(lighten(@color-mid_autumn-theme, 10%), 80%);
-@color-mid_autumn-tab-btn-background-hover: @color-mid_autumn-theme_2-hover;
-@color-mid_autumn-tab-border-top: fadeout(lighten(@color-mid_autumn-theme, 5%), 50%);
-@color-mid_autumn-tab-border-bottom: lighten(@color-mid_autumn-theme, 5%);
-@color-mid_autumn-hideBtn: #3bc2b2;
-@color-mid_autumn-minBtn: #85c43b;
-@color-mid_autumn-maxBtn: #e7aa36;
-@color-mid_autumn-closeBtn: #ea6e4d;
-@color-mid_autumn-hideBtn-hover: fadeout(@color-hideBtn, 10%);
-@color-mid_autumn-minBtn-hover: fadeout(@color-mid_autumn-minBtn, 10%);
-@color-mid_autumn-maxBtn-hover: fadeout(@color-mid_autumn-maxBtn, 10%);
-@color-mid_autumn-closeBtn-hover: fadeout(@color-mid_autumn-closeBtn, 10%);
-@color-mid_autumn-badge-success: lighten(@color-mid_autumn-theme, 25%);
-@color-mid_autumn-badge-success-font: #fff;
-@color-mid_autumn-badge-info: #af9479;
-@color-mid_autumn-badge-info-font: #fff; */
-
-@color-naruto-theme: rgb(87, 144, 167);
-@color-naruto-theme-bgimg: url(../images/myzcbg.jpg);
-@color-naruto-theme-bgposition: center;
-@color-naruto-theme-bgsize: cover;
-@color-naruto-theme-hover: fadeout(lighten(@color-naruto-theme, 10%), 45%);
-@color-naruto-theme-active: fadeout(lighten(@color-naruto-theme, 15%), 60%);
-@color-naruto-theme-font: rgba(67, 118, 148, 0.9);
-@color-naruto-theme-font-label: fadeout(darken(@color-naruto-theme, 20%), 20%);
-@color-naruto-theme_2: rgba(255, 255, 255, 0.8);
-@color-naruto-theme_2-background_1: #eafaff;
-@color-naruto-theme_2-background_2: fadeout(@color-naruto-theme_2-background_1, 2%);
-@color-naruto-theme_2-hover: fadeout(lighten(@color-naruto-theme, 10%), 75%);
-@color-naruto-theme_2-active: fadeout(lighten(@color-naruto-theme, 10%), 65%);
-@color-naruto-theme_2-font: darken(desaturate(@color-naruto-theme_2, 70%), 90%);
-@color-naruto-theme_2-font-label: desaturate(lighten(@color-naruto-theme, 10%), 45%);
-// @color-naruto-theme_2-line: transparent;
-@color-naruto-theme_2-line: fadeout(lighten(@color-naruto-theme, 36%), 70%);
-@color-naruto-reply-floor: fadeout(lighten(@color-naruto-theme, 12%), 90%);
-@color-naruto-theme-sidebar: rgba(255, 255, 255, .3);
-@color-naruto-btn: lighten(@color-naruto-theme, 2%);
-@color-naruto-btn-background: fadeout(lighten(@color-naruto-theme, 35%), 70%);
-@color-naruto-btn-hover: fadeout(lighten(@color-naruto-theme, 5%), 70%);
-@color-naruto-btn-active: fadeout(darken(@color-naruto-theme, 5%), 70%);
-@color-naruto-btn-select: fadeout(lighten(@color-naruto-theme, 5%), 50%);
-@color-naruto-pagination-background: fadeout(lighten(@color-naruto-theme, 20%), 70%);
-@color-naruto-pagination-hover: fadeout(lighten(@color-naruto-theme, 10%), 60%);
-@color-naruto-pagination-active: fadeout(darken(@color-naruto-theme, 10%), 70%);
-@color-naruto-pagination-select: fadeout(lighten(@color-naruto-theme, 10%), 50%);
-@color-naruto-search-form-background: fadeout(lighten(@color-naruto-theme, 30%), 20%);
-@color-naruto-search-list-hover: fadeout(darken(@color-naruto-theme, 10%), 65%);
-@color-naruto-scrollbar-track: fadeout(lighten(@color-naruto-theme, 10%), 75%);
-@color-naruto-scrollbar-thumb: fadeout(lighten(@color-naruto-theme, 10%), 50%);
-@color-naruto-scrollbar-thumb-hover: fadeout(lighten(@color-naruto-theme, 10%), 35%);
-@color-naruto-player-pic-c1: fadeout(@color-naruto-theme_2, 50%);
-@color-naruto-player-pic-c2: darken(@color-naruto-theme_2, 30%);
-@color-naruto-player-progress: fadeout(lighten(@color-naruto-theme, 20%), 70%);
-@color-naruto-player-progress-bar1: darken(@color-naruto-theme_2, 12%);
-@color-naruto-player-progress-bar2: fadeout(lighten(@color-naruto-theme, 12%), 20%);
-@color-naruto-player-status-text: lighten(@color-naruto-theme_2-font, 32%);
-@color-naruto-player-detail-lyric: fadeout(@color-naruto-theme_2-font, 36%);
-@color-naruto-player-detail-lyric-active: darken(@color-naruto-theme, 7%);
-@color-naruto-player-detail-play-btn: lighten(@color-naruto-theme, 7%);
-@color-naruto-tab-btn-background: fadeout(lighten(@color-naruto-theme, 10%), 80%);
-@color-naruto-tab-btn-background-hover: @color-naruto-theme_2-hover;
-@color-naruto-tab-border-top: fadeout(lighten(@color-naruto-theme, 5%), 50%);
-@color-naruto-tab-border-bottom: lighten(@color-naruto-theme, 5%);
-@color-naruto-hideBtn: #3bc2b2;
-@color-naruto-minBtn: #85c43b;
-@color-naruto-maxBtn: #e7aa36;
-@color-naruto-closeBtn: #ea6e4d;
-@color-naruto-hideBtn-hover: fadeout(@color-hideBtn, 10%);
-@color-naruto-minBtn-hover: fadeout(@color-naruto-minBtn, 10%);
-@color-naruto-maxBtn-hover: fadeout(@color-naruto-maxBtn, 10%);
-@color-naruto-closeBtn-hover: fadeout(@color-naruto-closeBtn, 10%);
-@color-naruto-badge-success: #7fb575;
-@color-naruto-badge-success-font: #fff;
-@color-naruto-badge-info: lighten(@color-naruto-theme, 10%);
-@color-naruto-badge-info-font: #fff;
-
-@color-happy_new_year-theme: rgba(192, 57, 43, 1);
-@color-happy_new_year-theme-bgimg: url(../images/xnkl.png);
-@color-happy_new_year-theme-bgposition: center;
-@color-happy_new_year-theme-bgsize: cover;
-@color-happy_new_year-theme-hover: fadeout(lighten(@color-happy_new_year-theme, 10%), 45%);
-@color-happy_new_year-theme-active: fadeout(lighten(@color-happy_new_year-theme, 15%), 60%);
-@color-happy_new_year-theme-font: rgba(148, 67, 67, 0.9);
-@color-happy_new_year-theme-font-label: fadeout(darken(@color-happy_new_year-theme, 20%), 20%);
-@color-happy_new_year-theme_2: rgba(255, 255, 255, 0.8);
-@color-happy_new_year-theme_2-background_1: #fef9f2;
-@color-happy_new_year-theme_2-background_2: fadeout(@color-happy_new_year-theme_2-background_1, 2%);
-@color-happy_new_year-theme_2-hover: fadeout(lighten(@color-happy_new_year-theme, 10%), 75%);
-@color-happy_new_year-theme_2-active: fadeout(lighten(@color-happy_new_year-theme, 10%), 65%);
-@color-happy_new_year-theme_2-font: darken(desaturate(@color-happy_new_year-theme_2, 70%), 90%);
-@color-happy_new_year-theme_2-font-label: desaturate(lighten(@color-happy_new_year-theme, 10%), 45%);
-// @color-happy_new_year-theme_2-line: transparent;
-@color-happy_new_year-theme_2-line: fadeout(lighten(@color-happy_new_year-theme, 36%), 80%);
-@color-happy_new_year-reply-floor: fadeout(lighten(@color-happy_new_year-theme, 12%), 90%);
-@color-happy_new_year-theme-sidebar: rgba(255, 255, 255, .3);
-@color-happy_new_year-btn: lighten(@color-happy_new_year-theme, 2%);
-@color-happy_new_year-btn-background: fadeout(lighten(@color-happy_new_year-theme, 35%), 70%);
-@color-happy_new_year-btn-hover: fadeout(lighten(@color-happy_new_year-theme, 5%), 70%);
-@color-happy_new_year-btn-active: fadeout(darken(@color-happy_new_year-theme, 5%), 70%);
-@color-happy_new_year-btn-select: fadeout(lighten(@color-happy_new_year-theme, 5%), 50%);
-@color-happy_new_year-pagination-background: fadeout(lighten(@color-happy_new_year-theme, 20%), 70%);
-@color-happy_new_year-pagination-hover: fadeout(lighten(@color-happy_new_year-theme, 10%), 60%);
-@color-happy_new_year-pagination-active: fadeout(darken(@color-happy_new_year-theme, 10%), 70%);
-@color-happy_new_year-pagination-select: fadeout(lighten(@color-happy_new_year-theme, 10%), 50%);
-@color-happy_new_year-search-form-background: fadeout(lighten(@color-happy_new_year-theme, 32%), 20%);
-@color-happy_new_year-search-list-hover: fadeout(darken(@color-happy_new_year-theme, 1%), 70%);
-@color-happy_new_year-scrollbar-track: fadeout(lighten(@color-happy_new_year-theme, 10%), 70%);
-@color-happy_new_year-scrollbar-thumb: fadeout(lighten(@color-happy_new_year-theme, 10%), 50%);
-@color-happy_new_year-scrollbar-thumb-hover: fadeout(lighten(@color-happy_new_year-theme, 10%), 35%);
-@color-happy_new_year-player-pic-c1: fadeout(@color-happy_new_year-theme_2, 50%);
-@color-happy_new_year-player-pic-c2: darken(@color-happy_new_year-theme_2, 30%);
-@color-happy_new_year-player-progress: fadeout(lighten(@color-happy_new_year-theme, 20%), 82%);
-@color-happy_new_year-player-progress-bar1: darken(@color-happy_new_year-theme_2, 5%);
-@color-happy_new_year-player-progress-bar2: fadeout(lighten(@color-happy_new_year-theme, 5%), 20%);
-@color-happy_new_year-player-status-text: lighten(@color-happy_new_year-theme_2-font, 32%);
-@color-happy_new_year-player-detail-lyric: fadeout(@color-happy_new_year-theme_2-font, 36%);
-@color-happy_new_year-player-detail-lyric-active: darken(@color-happy_new_year-theme, 7%);
-@color-happy_new_year-player-detail-play-btn: lighten(@color-happy_new_year-theme, 7%);
-@color-happy_new_year-tab-btn-background: fadeout(lighten(@color-happy_new_year-theme, 10%), 80%);
-@color-happy_new_year-tab-btn-background-hover: @color-happy_new_year-theme_2-hover;
-@color-happy_new_year-tab-border-top: fadeout(lighten(@color-happy_new_year-theme, 5%), 50%);
-@color-happy_new_year-tab-border-bottom: lighten(@color-happy_new_year-theme, 5%);
-@color-happy_new_year-hideBtn: #3bc2b2;
-@color-happy_new_year-minBtn: #85c43b;
-@color-happy_new_year-maxBtn: #e7aa36;
-@color-happy_new_year-closeBtn: #ea6e4d;
-@color-happy_new_year-hideBtn-hover: fadeout(@color-hideBtn, 10%);
-@color-happy_new_year-minBtn-hover: fadeout(@color-happy_new_year-minBtn, 10%);
-@color-happy_new_year-maxBtn-hover: fadeout(@color-happy_new_year-maxBtn, 10%);
-@color-happy_new_year-closeBtn-hover: fadeout(@color-happy_new_year-closeBtn, 10%);
-@color-happy_new_year-badge-success: lighten(@color-happy_new_year-theme, 10%);
-@color-happy_new_year-badge-success-font: #fff;
-@color-happy_new_year-badge-info: #dfbb6b;
-@color-happy_new_year-badge-info-font: #fff;
-
-

 // Width
@width-app-left: 6.6%;

 // Height
@height-toolbar: 54px;
-@height-player: 60px;
+@height-player: 70px;


 // Shadow
@@ -990,6 +17,8 @@
@radius-progress-border: 5px;
@radius-border: 4px;

-@transition-theme: .4s ease;
+@transition-slow: .6s ease;
+@transition-normal: .4s ease;
+@transition-fast: .3s ease;

@form-radius: 3px;