v2.0.0
This commit is contained in:
lyswhut
@@ -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}';
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user