inl-ui 0.0.3 → 0.0.6

package/dist/style.css

@@ -1,2 +1 @@
-
-html{overflow:auto}#app{height:100vh;width:100vw}.flex{display:flex}.flex-center{align-items:center;display:flex}.flex-colume{flex-direction:column}.layout .LayoutHeader{background:#fff;display:flex;height:55px;line-height:55px}.layout .LayoutHeader.blue{background:linear-gradient(90deg,#3297ff,#286be6)}.layout .LayoutHeader.blue .logo{color:#fff;font-size:20px;font-weight:900}.layout .LayoutHeader.blue .ant-menu{color:hsla(0,0%,100%,.6)}.layout .LayoutHeader.blue .ant-menu .ant-menu-item-active,.layout .LayoutHeader.blue .ant-menu .ant-menu-item-open,.layout .LayoutHeader.blue .ant-menu .ant-menu-item-selected,.layout .LayoutHeader.blue .ant-menu .ant-menu-item:hover,.layout .LayoutHeader.blue .ant-menu .ant-menu-submenu-active,.layout .LayoutHeader.blue .ant-menu .ant-menu-submenu-open,.layout .LayoutHeader.blue .ant-menu .ant-menu-submenu-selected,.layout .LayoutHeader.blue .ant-menu .ant-menu-submenu:hover{color:#fff}.layout .LayoutHeader.blue .ant-menu .ant-menu-item-active:after,.layout .LayoutHeader.blue .ant-menu .ant-menu-item-open:after,.layout .LayoutHeader.blue .ant-menu .ant-menu-item-selected:after,.layout .LayoutHeader.blue .ant-menu .ant-menu-item:hover:after,.layout .LayoutHeader.blue .ant-menu .ant-menu-submenu-active:after,.layout .LayoutHeader.blue .ant-menu .ant-menu-submenu-open:after,.layout .LayoutHeader.blue .ant-menu .ant-menu-submenu-selected:after,.layout .LayoutHeader.blue .ant-menu .ant-menu-submenu:hover:after{border-bottom:0}.layout .LayoutHeader.blue .ant-menu .ant-menu-item.ant-menu-item-selected{background:hsla(0,0%,100%,.1)}.layout .LayoutHeader.blue .avatarBox .username{color:#fff;font-size:16px}.layout .LayoutHeader .logo{width:200px}.layout .LayoutHeader ul.topMenu{background:transparent;border-bottom:0;flex:1;line-height:60px}.layout .LayoutHeader ul.topMenu li{border-bottom:0}.layout .LayoutHeader .avatarBox .ant-dropdown-trigger{font-size:22px;height:100%}.layout .LayoutHeader .avatarBox .ant-dropdown-trigger .username{height:30px;line-height:30px}.layout .LayoutHeader .avatarBox .ant-dropdown-trigger .anticon{font-size:20px}.layout .LayoutHeader .avatarBox .avatar{margin-left:10px}.layout .LayoutContent{padding:14px}.ant-menu-root.ant-menu-inline{border-right:0;overflow-x:hidden}.ant-menu-horizontal>.ant-menu-item-active,.ant-menu-horizontal>.ant-menu-item-open,.ant-menu-horizontal>.ant-menu-item-selected,.ant-menu-horizontal>.ant-menu-item:hover,.ant-menu-horizontal>.ant-menu-submenu-active,.ant-menu-horizontal>.ant-menu-submenu-open,.ant-menu-horizontal>.ant-menu-submenu-selected,.ant-menu-horizontal>.ant-menu-submenu:hover{border-bottom:none}.ant-menu-item .anticon,.ant-menu-submenu-title .anticon{margin-right:0}.ant-menu-root>li>.ant-menu-submenu-title,.ant-menu-root>li>.ant-menu-title-content{font-weight:600}.ant-tabs-bottom>.ant-tabs-nav:before,.ant-tabs-bottom>div>.ant-tabs-nav:before,.ant-tabs-top>.ant-tabs-nav:before,.ant-tabs-top>div>.ant-tabs-nav:before{display:block}.ant-tabs-nav .ant-tabs-tab{margin:0}.ant-table .ant-table-thead>tr>th{font-weight:600}.login_box{background-color:#fff;box-shadow:1px 1px 20px rgba(0,0,0,.3);display:flex;flex-direction:column;height:29rem;overflow:hidden;width:25rem}.login_box .ant-form{padding:0 1rem}.login_box .ant-form-item{margin-bottom:.5rem}.login_box .ant-form-item .ant-btn,.login_box .ant-form-item input{border-radius:.5rem;height:40px}.login_box h3{font-weight:400;padding:2rem 0;text-align:center}.login_box .login_tab{display:flex;height:3rem}.login_box .login_tab .item{background:#ebf8ff;cursor:pointer;flex:1;line-height:2.8rem;opacity:.5;text-align:center;transition:all .3s ease}.login_box .login_tab .item.active,.login_box .login_tab .item:hover{background:linear-gradient(90deg,#2eb2ff,#6d71ff);color:#fff;opacity:.8}.login{display:flex;flex-direction:column;height:100vh}.login .title{align-items:center;display:flex;height:4.3rem;padding:0 5rem}.login .title img{width:42px}.login .title span{font-size:1.57rem;font-weight:400;padding-left:1rem}@media screen{.login .content_login{align-items:center;background-image:url(../img/loginBackground.png);background-position:center 0;background-size:cover;display:flex;flex:1;position:relative}.login .content_login .login_box{position:absolute;right:10rem}}@media screen and (max-width:768px){.login .content_login{justify-content:center}.login .content_login .login_box{position:static;right:0}}.login .copyright-information{color:#666;font-size:14px;height:30px;line-height:30px;margin:0 10px;padding:0;text-align:center}.login .copyright-information a{color:#666;text-decoration:none}.menu-manager{display:flex;gap:32px;height:100%}.menu-manager .tree{width:300px}.menu-manager .tree .menu-select-tree .utils-container{display:flex;gap:8px;justify-content:flex-end}.menu-manager .tree .menu-select-tree .tree-container{padding:8px}.menu-manager .tree .menu-select-tree .tree-container .ant-tree-show-line .ant-tree-indent-unit:before{border-right:1px dashed #d9d9d9}.menu-manager .right-detail{flex:auto}.menu-manager .right-detail .menu-detail .header{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px}.menu-manager .right-detail .menu-detail .header .header-text{font-size:16px;font-weight:700}.menu-manager .right-detail .menu-detail .form{max-width:500px}.tree-cotextmenu .context-utils{display:flex;gap:8px}.util-item{border:1px solid #ccc;border-radius:50%;color:#ccc;cursor:pointer;line-height:1;margin:8px 0;padding:4px}.param-manager .tab-item .operation{text-align:right}.param-manager .tab-item .operation>.ant-space{position:absolute;right:0;top:0}.param-manager .tab-item .group-container .group-item-title{font-size:14px;font-weight:600}.param-manager .tab-item .group-container .collapse-container{margin:16px 0}.param-manager .tab-item .group-container .collapse-container .header{align-items:center;display:flex;line-height:1;padding-left:16px;position:relative}.param-manager .tab-item .group-container .collapse-container .header .container-title{font-size:14px;font-weight:600}.param-manager .tab-item .group-container .collapse-container .header:before{background-color:#4b7ff7;bottom:0;content:" ";left:0;position:absolute;top:0;width:2px}.systemManager{height:100%;width:100%}.systemManager .LayoutSider{background:#fff;margin-right:14px;overflow:auto}.depManager,.logManager,.personalSetting,.postManager,.role-manager,.userManager{display:flex;flex-direction:column}.depManager .control,.logManager .control,.personalSetting .control,.postManager .control,.role-manager .control,.userManager .control{margin-bottom:16px}.depManager .titleLine,.logManager .titleLine,.personalSetting .titleLine,.postManager .titleLine,.role-manager .titleLine,.userManager .titleLine{display:flex;justify-content:space-between;margin-bottom:10px}.depManager .titleLine .title,.logManager .titleLine .title,.personalSetting .titleLine .title,.postManager .titleLine .title,.role-manager .titleLine .title,.userManager .titleLine .title{font-weight:bolder}.depManager .searchLine,.logManager .searchLine,.personalSetting .searchLine,.postManager .searchLine,.role-manager .searchLine,.userManager .searchLine{justify-content:space-between;margin-bottom:10px}.logModal .col{display:flex;margin-bottom:10px}.logModal .col .label{color:gray;min-width:140px;padding:0 10px;text-align:right}.depManager{flex-direction:row}.depManager .left{margin-right:20px;width:300px}.depManager .right{flex:1}.depManager .right .basic-info .basic-info-header{display:flex;font-weight:600;justify-content:space-between}.depManager .right .basic-info .basic-info-header .basic-info-title,.depManager .right .employee-container .title{color:#31363c;font-size:18px;font-weight:600}.depManager .right .employee-container .operation{display:flex;justify-content:space-between;margin-bottom:16px}.about{display:flex;flex-direction:column;padding:40px}.about .logoLine{justify-content:space-between}.about .logoLine .logo{margin-bottom:40px;width:600px}.about .titleLine{display:flex;justify-content:space-between;margin-bottom:10px}.about .titleLine .title{font-weight:bolder}.about .titleLine .title:before{border-left:2px solid #37f;content:"";height:10px;margin-right:12px}.about .card{background:#f8f7fc;color:rgba(0,0,0,.45);margin:0 0 20px 16px}.about .litTitle{margin:0 0 4px 20px}.about .down{margin:10px 0 20px 16px}.about .info{width:800px}.about .infoBtn{margin:10px 0}.about .update{position:absolute;right:65px;top:220px}.tp_box{display:flex;flex-direction:column;height:100vh;width:100vw}.tp_box #tp{flex:1}
+html{overflow:auto}#app{height:100vh;width:100vw}.flex{display:flex}.flex-center{align-items:center;display:flex}.flex-colume{flex-direction:column}.layout .LayoutHeader{background:#fff;display:flex;height:55px;line-height:55px}.layout .LayoutHeader.blue{background:linear-gradient(90deg,#3297ff,#286be6)}.layout .LayoutHeader.blue .logo{color:#fff;font-size:20px;font-weight:900}.layout .LayoutHeader.blue .ant-menu{color:hsla(0,0%,100%,.6)}.layout .LayoutHeader.blue .ant-menu .ant-menu-item-active,.layout .LayoutHeader.blue .ant-menu .ant-menu-item-open,.layout .LayoutHeader.blue .ant-menu .ant-menu-item-selected,.layout .LayoutHeader.blue .ant-menu .ant-menu-item:hover,.layout .LayoutHeader.blue .ant-menu .ant-menu-submenu-active,.layout .LayoutHeader.blue .ant-menu .ant-menu-submenu-open,.layout .LayoutHeader.blue .ant-menu .ant-menu-submenu-selected,.layout .LayoutHeader.blue .ant-menu .ant-menu-submenu:hover{color:#fff}.layout .LayoutHeader.blue .ant-menu .ant-menu-item-active:after,.layout .LayoutHeader.blue .ant-menu .ant-menu-item-open:after,.layout .LayoutHeader.blue .ant-menu .ant-menu-item-selected:after,.layout .LayoutHeader.blue .ant-menu .ant-menu-item:hover:after,.layout .LayoutHeader.blue .ant-menu .ant-menu-submenu-active:after,.layout .LayoutHeader.blue .ant-menu .ant-menu-submenu-open:after,.layout .LayoutHeader.blue .ant-menu .ant-menu-submenu-selected:after,.layout .LayoutHeader.blue .ant-menu .ant-menu-submenu:hover:after{border-bottom:0}.layout .LayoutHeader.blue .ant-menu .ant-menu-item.ant-menu-item-selected{background:hsla(0,0%,100%,.1)}.layout .LayoutHeader.blue .avatarBox .username{color:#fff;font-size:16px}.layout .LayoutHeader .logo{width:200px}.layout .LayoutHeader ul.topMenu{background:transparent;border-bottom:0;flex:1;line-height:60px}.layout .LayoutHeader ul.topMenu li{border-bottom:0}.layout .LayoutHeader .avatarBox .ant-dropdown-trigger{font-size:22px;height:100%}.layout .LayoutHeader .avatarBox .ant-dropdown-trigger .username{height:30px;line-height:30px}.layout .LayoutHeader .avatarBox .ant-dropdown-trigger .anticon{font-size:20px}.layout .LayoutHeader .avatarBox .avatar{margin-left:10px}.layout .LayoutContent{padding:14px}.ant-menu-root.ant-menu-inline{border-right:0;overflow-x:hidden}.ant-menu-horizontal>.ant-menu-item-active,.ant-menu-horizontal>.ant-menu-item-open,.ant-menu-horizontal>.ant-menu-item-selected,.ant-menu-horizontal>.ant-menu-item:hover,.ant-menu-horizontal>.ant-menu-submenu-active,.ant-menu-horizontal>.ant-menu-submenu-open,.ant-menu-horizontal>.ant-menu-submenu-selected,.ant-menu-horizontal>.ant-menu-submenu:hover{border-bottom:none}.ant-menu-item .anticon,.ant-menu-submenu-title .anticon{margin-right:0}.ant-menu-root>li>.ant-menu-submenu-title,.ant-menu-root>li>.ant-menu-title-content{font-weight:600}.ant-tabs-bottom>.ant-tabs-nav:before,.ant-tabs-bottom>div>.ant-tabs-nav:before,.ant-tabs-top>.ant-tabs-nav:before,.ant-tabs-top>div>.ant-tabs-nav:before{display:block}.ant-tabs-nav .ant-tabs-tab{margin:0}.ant-table .ant-table-thead>tr>th{font-weight:600}.login_box{background-color:#fff;box-shadow:1px 1px 20px rgba(0,0,0,.3);display:flex;flex-direction:column;height:29rem;overflow:hidden;width:25rem}.login_box .ant-form{padding:0 1rem}.login_box .ant-form-item{margin-bottom:.5rem}.login_box .ant-form-item .ant-btn,.login_box .ant-form-item input{border-radius:.5rem;height:40px}.login_box h3{font-weight:400;padding:2rem 0;text-align:center}.login_box .login_tab{display:flex;height:3rem}.login_box .login_tab .item{background:#ebf8ff;cursor:pointer;flex:1;line-height:2.8rem;opacity:.5;text-align:center;transition:all .3s ease}.login_box .login_tab .item.active,.login_box .login_tab .item:hover{background:linear-gradient(90deg,#2eb2ff,#6d71ff);color:#fff;opacity:.8}.login{display:flex;flex-direction:column;height:100vh}.login .title{align-items:center;display:flex;height:4.3rem;padding:0 5rem}.login .title img{width:42px}.login .title span{font-size:1.57rem;font-weight:400;padding-left:1rem}@media screen{.login .content_login{align-items:center;background-image:url(../img/loginBackground.png);background-position:center 0;background-size:cover;display:flex;flex:1;position:relative}.login .content_login .login_box{position:absolute;right:10rem}}@media screen and (max-width:768px){.login .content_login{justify-content:center}.login .content_login .login_box{position:static;right:0}}.login .copyright-information{color:#666;font-size:14px;height:30px;line-height:30px;margin:0 10px;padding:0;text-align:center}.login .copyright-information a{color:#666;text-decoration:none}.menu-manager{display:flex;gap:32px;height:100%}.menu-manager .tree{width:300px}.menu-manager .tree .menu-select-tree .utils-container{display:flex;gap:8px;justify-content:space-around}.menu-manager .tree .menu-select-tree .tree-container{padding:8px}.menu-manager .tree .menu-select-tree .tree-container .ant-tree-show-line .ant-tree-indent-unit:before{border-right:1px dashed #d9d9d9}.menu-manager .right-detail{flex:auto}.menu-manager .right-detail .menu-detail .header{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px}.menu-manager .right-detail .menu-detail .header .header-text{font-size:16px;font-weight:700}.menu-manager .right-detail .menu-detail .form{max-width:500px}.tree-cotextmenu .context-utils{display:flex;gap:8px}.util-item{border:1px solid #ccc;border-radius:50%;color:#ccc;cursor:pointer;line-height:1;margin:8px 0;padding:4px}.param-manager .tab-item .operation{text-align:right}.param-manager .tab-item .operation>.ant-space{position:absolute;right:0;top:0}.param-manager .tab-item .group-container .group-item-title{font-size:14px;font-weight:600}.param-manager .tab-item .group-container .collapse-container{margin:16px 0}.param-manager .tab-item .group-container .collapse-container .header{align-items:center;display:flex;line-height:1;padding-left:16px;position:relative}.param-manager .tab-item .group-container .collapse-container .header .container-title{font-size:14px;font-weight:600}.param-manager .tab-item .group-container .collapse-container .header:before{background-color:#4b7ff7;bottom:0;content:" ";left:0;position:absolute;top:0;width:2px}.systemManager{height:100%;width:100%}.systemManager .LayoutSider{background:#fff;margin-right:14px;overflow:auto}.depManager,.logManager,.personalSetting,.postManager,.role-manager,.userManager{display:flex;flex-direction:column}.depManager .control,.depManager .table-search,.logManager .control,.logManager .table-search,.personalSetting .control,.personalSetting .table-search,.postManager .control,.postManager .table-search,.role-manager .control,.role-manager .table-search,.userManager .control,.userManager .table-search{margin-bottom:16px}.depManager .titleLine,.logManager .titleLine,.personalSetting .titleLine,.postManager .titleLine,.role-manager .titleLine,.userManager .titleLine{display:flex;justify-content:space-between;margin-bottom:10px}.depManager .titleLine .title,.logManager .titleLine .title,.personalSetting .titleLine .title,.postManager .titleLine .title,.role-manager .titleLine .title,.userManager .titleLine .title{font-weight:bolder}.depManager .searchLine,.logManager .searchLine,.personalSetting .searchLine,.postManager .searchLine,.role-manager .searchLine,.userManager .searchLine{justify-content:space-between;margin-bottom:10px}.logModal .col{display:flex;margin-bottom:10px}.logModal .col .label{color:gray;min-width:140px;padding:0 10px;text-align:right}.depManager{flex-direction:row}.depManager .left{margin-right:20px;width:300px}.depManager .right{flex:1}.depManager .right .basic-info .basic-info-header{display:flex;font-weight:600;justify-content:space-between}.depManager .right .basic-info .basic-info-header .basic-info-title,.depManager .right .employee-container .title{color:#31363c;font-size:18px;font-weight:600}.depManager .right .employee-container .operation{display:flex;justify-content:space-between;margin-bottom:16px}.about{display:flex;flex-direction:column;padding:40px}.about .logoLine{justify-content:space-between}.about .logoLine .logo{margin-bottom:40px;width:600px}.about .titleLine{display:flex;justify-content:space-between;margin-bottom:10px}.about .titleLine .title{font-weight:bolder}.about .titleLine .title:before{border-left:2px solid #37f;content:"";height:10px;margin-right:12px}.about .card{background:#f8f7fc;color:rgba(0,0,0,.45);margin:0 0 20px 16px}.about .litTitle{margin:0 0 4px 20px}.about .down{margin:10px 0 20px 16px}.about .info{width:800px}.about .infoBtn{margin:10px 0}.about .update{position:absolute;right:65px;top:220px}.tp_box{display:flex;flex-direction:column;height:100vh;width:100vw}.tp_box #tp{flex:1}.inl-header-menu{background-color:#132041;width:100%}.inl-header-menu-item{background:linear-gradient(180deg,rgba(76,146,230,0),rgba(13,95,201,.5));cursor:pointer;opacity:.5;padding:5px 40px}.inl-header-menu-item>span{color:#fff}.inl-header-menu-item.inl-header-menu-item-active,.inl-header-menu-item:hover{background:linear-gradient(180deg,rgba(58,117,205,0),rgba(58,117,205,0) 0,rgba(79,115,228,.3) 71%,rgba(81,115,230,.6) 91%,rgba(71,98,226,.9));border-bottom:1px solid;border-image:linear-gradient(180deg,rgba(156,194,247,0),#628fec) 1 1;opacity:1}.inl-header-menu-title{align-items:center;display:flex;padding:5px 0}.inl-header-menu-title-text{color:#fff;font-size:30px;text-align:center;text-shadow:0 0 9px #389aff}.inl-header-menu-center-title{background:url(http://192.168.5.211/micro-assets/device/titleCenter.png) no-repeat;background-size:contain;justify-content:center;width:25%}.inl-header-menu-left-title{background:url(http://192.168.5.211/micro-assets/device/titleLeft.png) no-repeat;background-size:contain;padding-left:30px;width:40%}.inl-header-menu-content,.inl-header-menu-content-left{align-items:center;display:flex}.inl-header-menu-content-left{background:url(http://192.168.5.211/micro-assets/device/menuLeft.png) no-repeat;background-position:0 100%;background-size:contain;flex:1;justify-content:flex-end;padding:5px 0}.inl-header-menu-content-left .inl-header-menu-item{clip-path:polygon(0 0,80% 0,100% 100%,20% 100%)}.inl-header-menu-content-right{align-items:center;background:url(http://192.168.5.211/micro-assets/device/menuRight.png) no-repeat;background-position:0 100%;background-size:contain;display:flex;flex:1;justify-content:flex-start;padding:5px 0}.inl-header-menu-content-right .inl-header-menu-item{clip-path:polygon(20% 0,100% 0,80% 100%,0 100%)}.inl-header-menu-left .inl-header-menu-content-right{background:none;justify-content:flex-end}

package/dist/theme/dark copy.less

@@ -0,0 +1,448 @@
+@import './default.less';
+@theme: dark;
+// color palettes
+@blue-1: mix(color(~`colorPalette('@{blue-base}', 8) `), @component-background, 15%);
+@blue-2: mix(color(~`colorPalette('@{blue-base}', 7) `), @component-background, 25%);
+@blue-3: mix(@blue-base, @component-background, 30%);
+@blue-4: mix(@blue-base, @component-background, 45%);
+@blue-5: mix(@blue-base, @component-background, 65%);
+@blue-6: mix(@blue-base, @component-background, 85%);
+@blue-7: mix(color(~`colorPalette('@{blue-base}', 5) `), @component-background, 90%);
+@blue-8: mix(color(~`colorPalette('@{blue-base}', 4) `), @component-background, 95%);
+@blue-9: mix(color(~`colorPalette('@{blue-base}', 3) `), @component-background, 97%);
+@blue-10: mix(color(~`colorPalette('@{blue-base}', 2) `), @component-background, 98%);
+
+@purple-1: mix(color(~`colorPalette('@{purple-base}', 8) `), @component-background, 15%);
+@purple-2: mix(color(~`colorPalette('@{purple-base}', 7) `), @component-background, 25%);
+@purple-3: mix(@purple-base, @component-background, 30%);
+@purple-4: mix(@purple-base, @component-background, 45%);
+@purple-5: mix(@purple-base, @component-background, 65%);
+@purple-6: mix(@purple-base, @component-background, 85%);
+@purple-7: mix(color(~`colorPalette('@{purple-base}', 5) `), @component-background, 90%);
+@purple-8: mix(color(~`colorPalette('@{purple-base}', 4) `), @component-background, 95%);
+@purple-9: mix(color(~`colorPalette('@{purple-base}', 3) `), @component-background, 97%);
+@purple-10: mix(color(~`colorPalette('@{purple-base}', 2) `), @component-background, 98%);
+
+@cyan-1: mix(color(~`colorPalette('@{cyan-base}', 8) `), @component-background, 15%);
+@cyan-2: mix(color(~`colorPalette('@{cyan-base}', 7) `), @component-background, 25%);
+@cyan-3: mix(@cyan-base, @component-background, 30%);
+@cyan-4: mix(@cyan-base, @component-background, 45%);
+@cyan-5: mix(@cyan-base, @component-background, 65%);
+@cyan-6: mix(@cyan-base, @component-background, 85%);
+@cyan-7: mix(color(~`colorPalette('@{cyan-base}', 5) `), @component-background, 90%);
+@cyan-8: mix(color(~`colorPalette('@{cyan-base}', 4) `), @component-background, 95%);
+@cyan-9: mix(color(~`colorPalette('@{cyan-base}', 3) `), @component-background, 97%);
+@cyan-10: mix(color(~`colorPalette('@{cyan-base}', 2) `), @component-background, 98%);
+
+@green-1: mix(color(~`colorPalette('@{green-base}', 8) `), @component-background, 15%);
+@green-2: mix(color(~`colorPalette('@{green-base}', 7) `), @component-background, 25%);
+@green-3: mix(@green-base, @component-background, 30%);
+@green-4: mix(@green-base, @component-background, 45%);
+@green-5: mix(@green-base, @component-background, 65%);
+@green-6: mix(@green-base, @component-background, 85%);
+@green-7: mix(color(~`colorPalette('@{green-base}', 5) `), @component-background, 90%);
+@green-8: mix(color(~`colorPalette('@{green-base}', 4) `), @component-background, 95%);
+@green-9: mix(color(~`colorPalette('@{green-base}', 3) `), @component-background, 97%);
+@green-10: mix(color(~`colorPalette('@{green-base}', 2) `), @component-background, 98%);
+
+@magenta-1: mix(color(~`colorPalette('@{magenta-base}', 8) `), @component-background, 15%);
+@magenta-2: mix(color(~`colorPalette('@{magenta-base}', 7) `), @component-background, 25%);
+@magenta-3: mix(@magenta-base, @component-background, 30%);
+@magenta-4: mix(@magenta-base, @component-background, 45%);
+@magenta-5: mix(@magenta-base, @component-background, 65%);
+@magenta-6: mix(@magenta-base, @component-background, 85%);
+@magenta-7: mix(color(~`colorPalette('@{magenta-base}', 5) `), @component-background, 90%);
+@magenta-8: mix(color(~`colorPalette('@{magenta-base}', 4) `), @component-background, 95%);
+@magenta-9: mix(color(~`colorPalette('@{magenta-base}', 3) `), @component-background, 97%);
+@magenta-10: mix(color(~`colorPalette('@{magenta-base}', 2) `), @component-background, 98%);
+
+@pink-1: mix(color(~`colorPalette('@{pink-base}', 8) `), @component-background, 15%);
+@pink-2: mix(color(~`colorPalette('@{pink-base}', 7) `), @component-background, 25%);
+@pink-3: mix(@pink-base, @component-background, 30%);
+@pink-4: mix(@pink-base, @component-background, 45%);
+@pink-5: mix(@pink-base, @component-background, 65%);
+@pink-6: mix(@pink-base, @component-background, 85%);
+@pink-7: mix(color(~`colorPalette('@{pink-base}', 5) `), @component-background, 90%);
+@pink-8: mix(color(~`colorPalette('@{pink-base}', 4) `), @component-background, 95%);
+@pink-9: mix(color(~`colorPalette('@{pink-base}', 3) `), @component-background, 97%);
+@pink-10: mix(color(~`colorPalette('@{pink-base}', 2) `), @component-background, 98%);
+
+@red-1: mix(color(~`colorPalette('@{red-base}', 8) `), @component-background, 15%);
+@red-2: mix(color(~`colorPalette('@{red-base}', 7) `), @component-background, 25%);
+@red-3: mix(@red-base, @component-background, 30%);
+@red-4: mix(@red-base, @component-background, 45%);
+@red-5: mix(@red-base, @component-background, 65%);
+@red-6: mix(@red-base, @component-background, 85%);
+@red-7: mix(color(~`colorPalette('@{red-base}', 5) `), @component-background, 90%);
+@red-8: mix(color(~`colorPalette('@{red-base}', 4) `), @component-background, 95%);
+@red-9: mix(color(~`colorPalette('@{red-base}', 3) `), @component-background, 97%);
+@red-10: mix(color(~`colorPalette('@{red-base}', 2) `), @component-background, 98%);
+
+@orange-1: mix(color(~`colorPalette('@{orange-base}', 8) `), @component-background, 15%);
+@orange-2: mix(color(~`colorPalette('@{orange-base}', 7) `), @component-background, 25%);
+@orange-3: mix(@orange-base, @component-background, 30%);
+@orange-4: mix(@orange-base, @component-background, 45%);
+@orange-5: mix(@orange-base, @component-background, 65%);
+@orange-6: mix(@orange-base, @component-background, 85%);
+@orange-7: mix(color(~`colorPalette('@{orange-base}', 5) `), @component-background, 90%);
+@orange-8: mix(color(~`colorPalette('@{orange-base}', 4) `), @component-background, 95%);
+@orange-9: mix(color(~`colorPalette('@{orange-base}', 3) `), @component-background, 97%);
+@orange-10: mix(color(~`colorPalette('@{orange-base}', 2) `), @component-background, 98%);
+
+@yellow-1: mix(color(~`colorPalette('@{yellow-base}', 8) `), @component-background, 15%);
+@yellow-2: mix(color(~`colorPalette('@{yellow-base}', 7) `), @component-background, 25%);
+@yellow-3: mix(@yellow-base, @component-background, 30%);
+@yellow-4: mix(@yellow-base, @component-background, 45%);
+@yellow-5: mix(@yellow-base, @component-background, 65%);
+@yellow-6: mix(@yellow-base, @component-background, 85%);
+@yellow-7: mix(color(~`colorPalette('@{yellow-base}', 5) `), @component-background, 90%);
+@yellow-8: mix(color(~`colorPalette('@{yellow-base}', 4) `), @component-background, 95%);
+@yellow-9: mix(color(~`colorPalette('@{yellow-base}', 3) `), @component-background, 97%);
+@yellow-10: mix(color(~`colorPalette('@{yellow-base}', 2) `), @component-background, 98%);
+
+@volcano-1: mix(color(~`colorPalette('@{volcano-base}', 8) `), @component-background, 15%);
+@volcano-2: mix(color(~`colorPalette('@{volcano-base}', 7) `), @component-background, 25%);
+@volcano-3: mix(@volcano-base, @component-background, 30%);
+@volcano-4: mix(@volcano-base, @component-background, 45%);
+@volcano-5: mix(@volcano-base, @component-background, 65%);
+@volcano-6: mix(@volcano-base, @component-background, 85%);
+@volcano-7: mix(color(~`colorPalette('@{volcano-base}', 5) `), @component-background, 90%);
+@volcano-8: mix(color(~`colorPalette('@{volcano-base}', 4) `), @component-background, 95%);
+@volcano-9: mix(color(~`colorPalette('@{volcano-base}', 3) `), @component-background, 97%);
+@volcano-10: mix(color(~`colorPalette('@{volcano-base}', 2) `), @component-background, 98%);
+
+@geekblue-1: mix(color(~`colorPalette('@{geekblue-base}', 8) `), @component-background, 15%);
+@geekblue-2: mix(color(~`colorPalette('@{geekblue-base}', 7) `), @component-background, 25%);
+@geekblue-3: mix(@geekblue-base, @component-background, 30%);
+@geekblue-4: mix(@geekblue-base, @component-background, 45%);
+@geekblue-5: mix(@geekblue-base, @component-background, 65%);
+@geekblue-6: mix(@geekblue-base, @component-background, 85%);
+@geekblue-7: mix(color(~`colorPalette('@{geekblue-base}', 5) `), @component-background, 90%);
+@geekblue-8: mix(color(~`colorPalette('@{geekblue-base}', 4) `), @component-background, 95%);
+@geekblue-9: mix(color(~`colorPalette('@{geekblue-base}', 3) `), @component-background, 97%);
+@geekblue-10: mix(color(~`colorPalette('@{geekblue-base}', 2) `), @component-background, 98%);
+
+@lime-1: mix(color(~`colorPalette('@{lime-base}', 8) `), @component-background, 15%);
+@lime-2: mix(color(~`colorPalette('@{lime-base}', 7) `), @component-background, 25%);
+@lime-3: mix(@lime-base, @component-background, 30%);
+@lime-4: mix(@lime-base, @component-background, 45%);
+@lime-5: mix(@lime-base, @component-background, 65%);
+@lime-6: mix(@lime-base, @component-background, 85%);
+@lime-7: mix(color(~`colorPalette('@{lime-base}', 5) `), @component-background, 90%);
+@lime-8: mix(color(~`colorPalette('@{lime-base}', 4) `), @component-background, 95%);
+@lime-9: mix(color(~`colorPalette('@{lime-base}', 3) `), @component-background, 97%);
+@lime-10: mix(color(~`colorPalette('@{lime-base}', 2) `), @component-background, 98%);
+
+@gold-1: mix(color(~`colorPalette('@{gold-base}', 8) `), @component-background, 15%);
+@gold-2: mix(color(~`colorPalette('@{gold-base}', 7) `), @component-background, 25%);
+@gold-3: mix(@gold-base, @component-background, 30%);
+@gold-4: mix(@gold-base, @component-background, 45%);
+@gold-5: mix(@gold-base, @component-background, 65%);
+@gold-6: mix(@gold-base, @component-background, 85%);
+@gold-7: mix(color(~`colorPalette('@{gold-base}', 5) `), @component-background, 90%);
+@gold-8: mix(color(~`colorPalette('@{gold-base}', 4) `), @component-background, 95%);
+@gold-9: mix(color(~`colorPalette('@{gold-base}', 3) `), @component-background, 97%);
+@gold-10: mix(color(~`colorPalette('@{gold-base}', 2) `), @component-background, 98%);
+
+// Color used by default to control hover and active backgrounds and for
+// alert info backgrounds.
+@primary-1: mix(color(~`colorPalette('@{primary-color}', 8) `), @component-background, 15%);
+@primary-2: mix(color(~`colorPalette('@{primary-color}', 7) `), @component-background, 25%);
+@primary-3: mix(@primary-color, @component-background, 30%);
+@primary-4: mix(@primary-color, @component-background, 45%);
+@primary-5: mix(@primary-color, @component-background, 65%);
+@primary-6: @primary-color;
+@primary-7: mix(color(~`colorPalette('@{primary-color}', 5) `), @component-background, 90%);
+@primary-8: mix(color(~`colorPalette('@{primary-color}', 4) `), @component-background, 95%);
+@primary-9: mix(color(~`colorPalette('@{primary-color}', 3) `), @component-background, 97%);
+@primary-10: mix(color(~`colorPalette('@{primary-color}', 2) `), @component-background, 98%);
+
+// Layer background
+@popover-background: #1f1f1f;
+@popover-customize-border-color: #3a3a3a;
+@body-background: @black;
+@component-background: #141414;
+
+@text-color: fade(@white, 85%);
+@text-color-secondary: fade(@white, 45%);
+@text-color-inverse: @white;
+@icon-color-hover: fade(@white, 75%);
+@heading-color: fade(@white, 85%);
+
+// The background colors for active and hover states for things like
+// list items or table cells.
+@item-active-bg: @primary-1;
+@item-hover-bg: fade(@white, 8%);
+
+// Border color
+@border-color-base: #434343; // base border outline a component
+@border-color-split: #303030; // split border inside a component
+
+@background-color-light: fade(@white, 4%); // background of header and selected item
+@background-color-base: fade(@white, 8%); // Default grey background color
+
+// Disabled states
+@disabled-color: fade(@white, 30%);
+@disabled-bg: @background-color-base;
+@disabled-color-dark: fade(@white, 30%);
+
+// Tree
+// ---
+@tree-bg: transparent;
+
+// List
+// ---
+@list-customize-card-bg: transparent;
+
+// Shadow
+// ---
+@shadow-color: rgba(0, 0, 0, 0.45);
+@shadow-color-inverse: @component-background;
+@box-shadow-base: @shadow-2;
+@shadow-1-up: 0 -6px 16px -8px rgba(0, 0, 0, 0.32), 0 -9px 28px 0 rgba(0, 0, 0, 0.2),
+  0 -12px 48px 16px rgba(0, 0, 0, 0.12);
+@shadow-1-down: 0 6px 16px -8px rgba(0, 0, 0, 0.32), 0 9px 28px 0 rgba(0, 0, 0, 0.2),
+  0 12px 48px 16px rgba(0, 0, 0, 0.12);
+@shadow-1-right: 6px 0 16px -8px rgba(0, 0, 0, 0.32), 9px 0 28px 0 rgba(0, 0, 0, 0.2),
+  12px 0 48px 16px rgba(0, 0, 0, 0.12);
+@shadow-2: 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 6px 16px 0 rgba(0, 0, 0, 0.32),
+  0 9px 28px 8px rgba(0, 0, 0, 0.2);
+
+// Buttons
+// ---
+@btn-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
+@btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
+@btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
+
+@btn-default-bg: transparent;
+
+@btn-default-ghost-color: @text-color;
+@btn-default-ghost-border: fade(@white, 25%);
+
+@btn-text-hover-bg: rgba(255, 255, 255, 0.03);
+
+// Checkbox
+// ---
+@checkbox-check-bg: transparent;
+
+// Descriptions
+// ---
+@descriptions-bg: @background-color-light;
+
+// Divider
+// ---
+@divider-color: rgba(255, 255, 255, 12%);
+
+// Modal
+// ---
+@modal-header-bg: @popover-background;
+@modal-header-border-color-split: @border-color-split;
+@modal-content-bg: @popover-background;
+@modal-footer-border-color-split: @border-color-split;
+
+// Radio
+// ---
+@radio-solid-checked-color: @white;
+@radio-dot-disabled-color: fade(@white, 20%);
+
+// Radio buttons
+// ---
+@radio-disabled-button-checked-bg: fade(@white, 20%);
+@radio-disabled-button-checked-color: @disabled-color;
+
+// Layout
+// ---
+@layout-body-background: @body-background;
+@layout-header-background: @popover-background;
+@layout-trigger-background: #262626;
+
+// Input
+// ---
+@input-bg: transparent;
+@input-placeholder-color: fade(@white, 30%);
+@input-icon-color: fade(@white, 30%);
+@input-number-handler-active-bg: @item-hover-bg;
+@input-icon-hover-color: fade(@white, 85%);
+
+// Select
+// ---
+@select-background: transparent;
+@select-dropdown-bg: @popover-background;
+@select-clear-background: @component-background;
+@select-selection-item-bg: fade(@white, 8);
+@select-selection-item-border-color: @border-color-split;
+@select-multiple-disabled-background: @component-background;
+@select-multiple-item-disabled-color: #595959;
+@select-multiple-item-disabled-border-color: @popover-background;
+
+// Cascader
+// ---
+@cascader-bg: transparent;
+@cascader-menu-bg: @popover-background;
+@cascader-menu-border-color-split: @border-color-split;
+
+// Tooltip
+// ---
+// Tooltip background color
+@tooltip-bg: #434343;
+
+// Menu
+// ---
+// dark theme
+@menu-dark-inline-submenu-bg: @component-background;
+@menu-dark-bg: @popover-background;
+@menu-popup-bg: @popover-background;
+
+// Message
+// ---
+@message-notice-content-bg: @popover-background;
+
+// Notification
+@notification-bg: @popover-background;
+
+// LINK
+@link-hover-color: @primary-5;
+@link-active-color: @primary-7;
+
+// Table
+// --
+@table-header-bg: #1d1d1d;
+@table-body-sort-bg: fade(@white, 1%);
+@table-row-hover-bg: #262626;
+@table-header-cell-split-color: fade(@white, 8%);
+@table-header-sort-bg: #262626;
+@table-header-filter-active-bg: #434343;
+@table-header-sort-active-bg: #303030;
+@table-fixed-header-sort-active-bg: #222;
+@table-filter-btns-bg: @popover-background;
+@table-expanded-row-bg: @table-header-bg;
+@table-filter-dropdown-bg: @popover-background;
+@table-expand-icon-bg: transparent;
+
+// Tag
+// ---
+@info-color-deprecated-bg: @primary-1;
+@info-color-deprecated-border: @primary-3;
+@success-color-deprecated-bg: @green-1;
+@success-color-deprecated-border: @green-3;
+@warning-color-deprecated-bg: @orange-1;
+@warning-color-deprecated-border: @orange-3;
+@error-color-deprecated-bg: @red-1;
+@error-color-deprecated-border: @red-3;
+
+// TimePicker
+// ---
+@picker-basic-cell-hover-with-range-color: darken(@primary-color, 35%);
+@picker-basic-cell-disabled-bg: #303030;
+@picker-border-color: @border-color-split;
+@picker-bg: transparent;
+@picker-date-hover-range-border-color: darken(@primary-color, 20%);
+
+// Dropdown
+// ---
+@dropdown-menu-bg: @popover-background;
+@dropdown-menu-submenu-disabled-bg: transparent;
+
+// Steps
+// ---
+@steps-nav-arrow-color: fade(@white, 20%);
+@steps-background: transparent;
+
+// Avatar
+// ---
+@avatar-bg: fade(@white, 30%);
+
+// Progress
+// ---
+@progress-steps-item-bg: fade(@white, 8%);
+
+// Calendar
+// ---
+@calendar-bg: @popover-background;
+@calendar-input-bg: @calendar-bg;
+@calendar-border-color: transparent;
+@calendar-full-bg: @component-background;
+
+// Badge
+// ---
+@badge-text-color: @white;
+
+// Popover
+@popover-bg: @popover-background;
+
+// Drawer
+@drawer-bg: @popover-background;
+
+// Card
+// ---
+@card-actions-background: @component-background;
+@card-skeleton-bg: #303030;
+@card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.64), 0 3px 6px 0 rgba(0, 0, 0, 0.48),
+  0 5px 12px 4px rgba(0, 0, 0, 0.36);
+
+// Transfer
+// ---
+@transfer-item-hover-bg: #262626;
+
+// Comment
+// ---
+@comment-bg: transparent;
+@comment-author-time-color: fade(@white, 30%);
+@comment-action-hover-color: fade(@white, 65%);
+
+// Rate
+// ---
+@rate-star-bg: fade(@white, 12%);
+
+// Switch
+// ---
+@switch-bg: @white;
+
+// Pagination
+// ---
+@pagination-item-bg: transparent;
+@pagination-item-bg-active: transparent;
+@pagination-item-link-bg: transparent;
+@pagination-item-disabled-bg-active: fade(@white, 25%);
+@pagination-item-disabled-color-active: @black;
+@pagination-item-input-bg: @pagination-item-bg;
+
+// PageHeader
+// ---
+@page-header-back-color: @icon-color;
+@page-header-ghost-bg: transparent;
+
+// Slider
+// ---
+@slider-rail-background-color: #262626;
+@slider-rail-background-color-hover: @border-color-base;
+@slider-dot-border-color: @border-color-split;
+@slider-dot-border-color-active: @primary-4;
+
+// Skeleton
+// ---
+@skeleton-to-color: fade(@white, 16%);
+
+// Alert
+// ---
+@alert-success-border-color: @green-3;
+@alert-success-bg-color: @green-1;
+@alert-success-icon-color: @success-color;
+@alert-info-border-color: @primary-3;
+@alert-info-bg-color: @primary-1;
+@alert-info-icon-color: @info-color;
+@alert-warning-border-color: @gold-3;
+@alert-warning-bg-color: @gold-1;
+@alert-warning-icon-color: @warning-color;
+@alert-error-border-color: @red-3;
+@alert-error-bg-color: @red-1;
+@alert-error-icon-color: @error-color;
+
+// Timeline
+// ---
+@timeline-color: @border-color-split;
+@timeline-dot-color: @primary-color;
+
+// Mentions
+// ---
+@mentions-dropdown-bg: @popover-background;