hongluan-business-ui/theme/index.css

Hongluan Business Component Library for Vue 3

:root{--main-color:#00b2ff;--rgb-main-color:0,178,255;--shadow-color:62,78,106;--primary:#00b2ff;--primary-bg:#00b2ff;--primary-hover:#33c1ff;--primary-active:#00a4eb;--primary-light:#e6f7ff;--success:#50cd89;--success-bg:#50cd89;--success-hover:#73d7a1;--success-active:#3ec87d;--success-light:#eefaf3;--danger:#e11d64;--danger-bg:#e11d64;--danger-hover:#e84a83;--danger-active:#cf1b5c;--danger-light:#fce8ef;--warning:#e7bb22;--warning-bg:#e7bb22;--warning-hover:#ecc94e;--warning-active:#dcb018;--warning-light:#fdf8e9;--info:#4a72e5;--info-bg:#4a72e5;--info-hover:#6e8eea;--info-active:#3561e2;--info-light:#edf1fc;--rgb-primary:0,178,255;--rgb-success:80,205,137;--rgb-danger:225,29,100;--rgb-warning:231,187,34;--rgb-info:74,114,229;--rgb-bg-body:255,255,255;--rgb-bg-content:255,255,255;--rgb-bg-light:246,249,251;--rgb-bg-popup:255,255,255;--rgb-bg-element:255,255,255;--rgb-bg-hover:246,249,251;--rgb-bg-active:246,249,251;--rgb-bg-header:255,255,255;--rgb-bg-backdrop:0,0,0;--text-regular:#5E6278;--text-secondary:#A1A5B7;--text-light:#B5B5C3;--text-lightest:#E4E6EF;--text-title:#3F4254;--text-link:#009EF7;--text-hover:var(--main-color);--text-active:#009EF7;--text-inverse:#FFFFFF;--bg-body:#FFFFFF;--bg-content:#FFFFFF;--bg-light:#F6F9FB;--bg-popup:#FFFFFF;--bg-element:#FFFFFF;--bg-hover:#F6F9FB;--bg-active:#F6F9FB;--bg-header:#ffffff;--bg-backdrop:rgba(0, 0, 0, 0.3);--border-regular:#EFF2F5;--border-light:#E8EBF8;--border-dark:#E4E6EF;--box-shadow-sm:0 2px 4px 0 rgba(var(--shadow-color, 62, 78, 106), 0.06);--box-shadow-md:0 4px 16px 0 rgba(var(--shadow-color, 62, 78, 106), 0.08);--box-shadow-lg:0 6px 24px rgba(var(--shadow-color, 62, 78, 106), 0.1);--box-shadow-xl:0 12px 40px 0 rgba(var(--shadow-color, 62, 78, 106), 0.24);--primary-light-5:#e6fcff;--primary-light-4:#b8f3ff;--primary-light-3:#8ae7ff;--primary-light-2:#5cd9ff;--primary-light-1:#2ec7ff;--primary-dark-1:#0092db;--primary-dark-2:#0074b8;--primary-dark-3:#005894;--primary-dark-4:#003f70;--primary-dark-5:#00294d;--success-light-5:#ecfbf1;--success-light-4:#cbf4d8;--success-light-3:#abebc2;--success-light-2:#8ce2ad;--success-light-1:#6dd89b;--success-dark-1:#2ec779;--success-dark-2:#22ab6a;--success-dark-3:#14915a;--success-dark-4:#0a7448;--success-dark-5:#035335;--danger-light-5:#fde8f3;--danger-light-4:#f8bedb;--danger-light-3:#f495c1;--danger-light-2:#ee6ca4;--danger-light-1:#e84485;--danger-dark-1:#c5154f;--danger-dark-2:#a7103c;--danger-dark-3:#8a092b;--danger-dark-4:#6b041c;--danger-dark-5:#4b0110;--warning-light-5:#fdf5e8;--warning-light-4:#fae5c0;--warning-light-3:#f6d798;--warning-light-2:#f1cc70;--warning-light-1:#ecc249;--warning-dark-1:#d1ad13;--warning-dark-2:#b1970e;--warning-dark-3:#918108;--warning-dark-4:#716704;--warning-dark-5:#4e4a01;--info-light-5:#ecf3fd;--info-light-4:#cbddf9;--info-light-3:#aac5f5;--info-light-2:#89abf0;--info-light-1:#6a8feb;--info-dark-1:#204ce4;--info-dark-2:#1536c6;--info-dark-3:#0c24a4;--info-dark-4:#06157f;--info-dark-5:#020a59;--form-bg-color:var(--bg-element);--form-bg-color-fill:#f5f8fa;--form-border-color:var(--border-dark);--form-disabled-border-color:var(--border-light);--form-disabled-bg-color:var(--bg-light);--form-disabled-font-color:var(--text-light);--form-icon-color:var(--text-regular);--form-shadow-color:var(--rgb-primary);--hl-button-font-color:var(--text-regular);--hl-button-font-color-hover:var(--primary);--hl-button-font-color-active:var(--primary);--hl-button-bg-color:var(--bg-element);--hl-button-bg-color-hover:var(--bg-element);--hl-button-bg-color-active:var(--bg-element);--hl-button-border-color:var(--form-border-color);--hl-button-border-color-hover:#c3e4ff;--hl-button-border-color-active:var(--primary);--hl-menu-icon-color:#5281E9;--hl-menu-icon-color-hover:currentColor;--hl-menu-icon-color-active:#ffffff;--hl-menu-font-color:var(--text-regular);--hl-menu-font-color-hover:var(--text-secondary);--hl-menu-font-color-active:#ffffff;--hl-menu-bg-color:#ffffff;--hl-menu-bg-hover:#F8FAFF;--hl-menu-bg-active:#9EAECD;--hl-menu-group-title-color:rgba(#000, 0.2);--hl-menu-child-bg-color:#ffffff;--hl-menu-dropdown-shadow:var(--box-shadow-md)}.hb-tree-selector-popper{min-width:12.5rem}.hb-tree-selector-popper .selector-dropdown-wrap{max-height:18.75rem;min-height:9.375rem}.hb-tree-selector-popper .selector-dropdown-wrap .selector-tree .tree-node .tree-node-content{height:var(--form-md);border-radius:0}.hb-tree-selector-popper .selector-dropdown-wrap .selector-tree .tree-node .tree-node-content .tree-node-arrow{padding:.4375rem;width:2.25rem;height:2.25rem;margin-left:.75rem}.hb-tree-transfer .transfer-panel .panel-list{display:flex;flex-direction:column;padding:var(--md);padding-top:0;flex:1;flex-basis:auto;overflow:auto;flex-wrap:nowrap;gap:var(--transfer-list-gap)}.hb-tree-transfer .transfer-panel .panel-list.has-filterable{padding-top:0}.hb-tree-transfer .transfer-panel .panel-list .item{display:flex;align-items:center;justify-content:space-between;padding:var(--transfer-item-padding-y) var(--transfer-item-padding-x);border-radius:var(--transfer-radius);gap:var(--transfer-item-gap);transition:all var(--duration) var(--timing)}.hb-tree-transfer .transfer-panel .panel-list .item:hover{background-color:var(--transfer-item-bg-color-hover)}.hb-tree-transfer .transfer-panel .panel-list .item:hover .item-close{visibility:visible;opacity:1}.hb-tree-transfer .transfer-panel .panel-list .item.is-checked{background-color:var(--transfer-item-bg-color-checked)}.hb-tree-transfer .transfer-panel .panel-list .item.is-disabled{color:var(--text-light);background-color:unset}.hb-tree-transfer .transfer-panel .panel-list .item.is-disabled:hover{background-color:unset}.hb-tree-transfer .transfer-panel .panel-list .item .checkbox-label{padding:0;flex-grow:1}.hb-tree-transfer .transfer-panel .panel-list .item .checkbox-label .close{display:none}.hb-tree-transfer .transfer-panel .panel-list .item .checkbox-inner{flex-grow:0}.hb-tree-transfer .transfer-panel .panel-list .item .item-close{margin:0;opacity:0;visibility:hidden;transition:all var(--duration) var(--timing)}.hb-text-overflow{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hb-text-overflow .text-overflow-content{position:relative;margin:-.75rem;padding:.75rem;overflow:auto;max-height:10rem}.hb-table-toolbar{--toolbar-padding:var(--lg);padding:0 var(--toolbar-padding)}.hb-table-toolbar .toolbar-batch{width:100%}.hb-table-toolbar .toolbar-batch .batch-wrap{visibility:hidden;opacity:0;transform:translateX(-1rem);transition:all .5s ease}.hb-table-toolbar .toolbar-batch .batch-wrap.show{visibility:visible;opacity:1;transform:translateY(0)}.hb-table-toolbar .table-counts{min-width:13.75rem}.hb-table-toolbar .table-counts strong{color:var(--main-color);font-weight:400}.hb-table-searchbar{--search-bar-padding:var(--lg);padding:0 var(--search-bar-padding)}.hb-table-searchbar .input-search{min-width:16.25rem}.hb-table-searchbar .searchbar-collapse{height:var(--form-md);overflow:hidden;transition:all .3s ease}.hb-table-searchbar .searchbar-collapse.opened{height:auto;overflow:unset}.hb-table-searchbar .more{transform:rotate(180deg);transition:transform .5s}.hb-table-list{--table-list-padding:var(--lg)}.hb-table-list .hb-table-searchbar{--search-bar-padding:var(--table-list-padding);padding:0 var(--search-bar-padding) var(--lg);border-bottom:1px solid var(--table-border-color)}.hb-table-list .hb-table-searchbar+.hb-table-toolbar{padding-top:var(--lg)}.hb-table-list .hb-table-toolbar{--toolbar-padding:var(--table-list-padding);padding:0 var(--toolbar-padding) var(--lg);border-bottom:1px solid var(--table-border-color)}.hb-table-list .hb-table-toolbar+.hb-table-searchbar{padding-top:var(--lg)}.hb-table-list .hl-simple-table{--table-padding:var(--table-list-padding)}.hb-table-list .hl-pagination{display:flex;margin:var(--lg) var(--table-list-padding)}.hb-simple-table-list{--table-list-padding:var(--lg)}.hb-simple-table-list .hb-table-searchbar{--search-bar-padding:var(--table-list-padding);padding:0 var(--search-bar-padding) var(--lg);border-bottom:1px solid var(--border-regular)}.hb-simple-table-list .hb-table-searchbar+.hb-table-toolbar{padding-top:var(--lg)}.hb-simple-table-list .hb-table-toolbar{--toolbar-padding:var(--table-list-padding);padding:0 var(--toolbar-padding) var(--lg);border-bottom:1px solid var(--border-regular)}.hb-simple-table-list .hb-table-toolbar+.hb-table-searchbar{padding-top:var(--lg)}.hb-simple-table-list .hl-simple-table{--table-padding:var(--table-list-padding)}.hb-simple-table-list .hl-pagination{display:flex;margin:var(--lg) var(--table-list-padding)}.hb-empty{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:var(--xxl) 0;--imageWidth:10rem;--empty-fill-color-0:#ffffff;--empty-fill-color-1:#fcfcfd;--empty-fill-color-2:#f8f9fb;--empty-fill-color-3:#f7f8fc;--empty-fill-color-4:#eeeff3;--empty-fill-color-5:#edeef2;--empty-fill-color-6:#e9ebef;--empty-fill-color-7:#e5e7e9;--empty-fill-color-8:#e0e3e9;--empty-fill-color-9:#d5d7de}.hb-empty .empty-image{width:var(--imageWidth)}.hb-empty .empty-image img,.hb-empty .empty-image svg{width:100%;height:100%;object-fit:contain}.hb-empty .empty-image svg{fill:var(--text-light)}.hb-empty .empty-description{margin-top:var(--lg);color:var(--text-secondary)}.dark-mode .hb-empty{--empty-fill-color-0:#000000;--empty-fill-color-1:#4b4b52;--empty-fill-color-2:#36383d;--empty-fill-color-3:#1e1e20;--empty-fill-color-4:#262629;--empty-fill-color-5:#202124;--empty-fill-color-6:#212224;--empty-fill-color-7:#1b1c1f;--empty-fill-color-8:#1c1d1f;--empty-fill-color-9:#18181a}.hb-data-filter-popper{--data-filter-panel-width:calc(var(--xxs) * 90)}.hb-data-filter-popper .hl-panel{width:var(--data-filter-panel-width);box-shadow:var(--box-shadow-md);border:none}.hb-data-filter-popper .hl-panel .selected-item-tag{max-width:calc(var(--data-filter-panel-width) - var(--panel-body-padding) * 2 - var(--sm) * 2 - 2px)}.hb-data-filter-popper .no-selected-items .form-content{display:none}.hb-data-filter-popper .selected-items{width:100%;background-color:var(--primary-light);border-radius:var(--radius-lg);border:1px dashed var(--main-color);padding:var(--sm)}.hb-modeless-dialog{position:fixed;left:45%;top:20%;min-width:18.75rem;min-height:9rem}.hb-modeless-dialog.collapsed:not(.fullscreen){min-height:var(--panel-header-height);max-height:var(--panel-header-height)}.hb-modeless-dialog .panel-header{-webkit-user-select:none;user-select:none}.hb-modeless-dialog .panel-resizer{position:absolute;right:0;bottom:0;width:1.25rem;height:1.25rem;display:block;opacity:0;cursor:nwse-resize}.hb-modeless-dialog.fullscreen{transform:none}.hb-dock-container{position:fixed;--dock-item-width:9rem;--dock-item-height:6rem}.hb-dock-container.at-left{left:0;top:0;bottom:0;border-radius:0;height:100%}.hb-dock-container.at-left .panel-footer,.hb-dock-container.at-left .panel-header{border-radius:0}.hb-dock-container.at-left .panel-body .scrollbar{height:calc(100vh - 2 * var(--panel-body-padding))}.hb-dock-container.at-left .panel-body .scrollbar .dock-items{flex-direction:column}.hb-dock-container.at-left .panel-body .empty-text{margin-top:45vh}.hb-dock-container.at-right{right:0;top:0;bottom:0;border-radius:0;height:100%}.hb-dock-container.at-right .panel-footer,.hb-dock-container.at-right .panel-header{border-radius:0}.hb-dock-container.at-right .panel-body .scrollbar{height:calc(100vh - 2 * var(--panel-body-padding))}.hb-dock-container.at-right .panel-body .scrollbar .dock-items{flex-direction:column}.hb-dock-container.at-right .panel-body .empty-text{margin-top:45vh}.hb-dock-container.at-top{top:0;left:0;right:0;border-radius:0;width:100%!important}.hb-dock-container.at-top .panel-footer,.hb-dock-container.at-top .panel-header{border-radius:0}.hb-dock-container.at-top .panel-body .scrollbar .dock-items{flex-direction:row}.hb-dock-container.at-bottom{bottom:0;left:0;right:0;border-radius:0;width:100%!important}.hb-dock-container.at-bottom .panel-footer,.hb-dock-container.at-bottom .panel-header{border-radius:0}.hb-dock-container.at-bottom .panel-body .scrollbar .dock-items{flex-direction:row}.hb-dock-container .panel-body .dock-items{display:flex}.hb-dock-container .dock-item{position:relative;margin:var(--lg);cursor:pointer}.hb-dock-container .dock-item audio,.hb-dock-container .dock-item video{object-fit:cover;width:100%;height:100%}.hb-dock-container .dock-item:hover .item-content{box-shadow:var(--box-shadow-lg)}.hb-dock-container .dock-item:hover .item-close{visibility:visible;opacity:1}.hb-dock-container .dock-item:hover .item-title{color:var(--text-link)}.hb-dock-container .dock-item .item-content{width:var(--dock-item-width);height:var(--dock-item-height);box-shadow:var(--box-shadow-md);background-color:var(--bg-content);border:1px solid var(--border-regular);overflow:hidden}.hb-dock-container .dock-item .item-content .media.text{padding:var(--md)}.hb-dock-container .dock-item .item-title{margin-top:var(--sm);text-align:center}.hb-dock-container .dock-item .item-close{position:absolute;visibility:hidden;opacity:0;cursor:pointer;display:flex;top:0;right:0;transform:translate(50%,-50%);background-color:var(--bg-element);padding:var(--xxs);width:var(--lg);height:var(--lg);border-radius:var(--radius-round);box-shadow:var(--box-shadow-lg);transition:all .3s}.hb-dock-container .dock-item .item-close .hl-icon{width:100%;height:100%}.hb-dock-container .empty-text{text-align:center}.hb-banner{border-radius:0}.hb-banner.at-top{top:0;left:0;right:0}.hb-banner.at-bottom{bottom:0;left:0;right:0}.hb-data-collect{--data-collect-radius:var(--radius-md);--data-collect-padding:var(--md);--data-collect-padding-x:var(--data-collect-padding);--data-collect-padding-y:var(--data-collect-padding);align-items:center;border-radius:var(--data-collect-radius);padding:var(--data-collect-padding-y) var(--data-collect-padding-x);transition:all var(--duration) var(--timing)}.hb-data-collect .hl-icon,.hb-data-collect .hl-thumb,.hb-data-collect .symbol{flex-shrink:0!important;flex-grow:0!important;transition:all var(--duration) var(--timing)}.hb-data-collect .title{display:block;color:var(--text-title);font-weight:500}.hb-data-collect .sub-title{display:block;font-size:var(--font-sm);color:var(--text-secondary)}.hb-popconfirm .main{display:flex;align-items:center}.hb-popconfirm .action{text-align:right;margin-top:var(--xs)}.hb-popconfirm .action button+button{margin-left:var(--sm)}