react-environment-setup/template/vite/src/theme.less

react-environment-setup

// 主题色
@primary-color: #1890ff;

// 字体颜色
@color-normal: rgba(0, 0, 0, .65);

// 背景颜色
@background-dark: #001529;

// 字体大小
@size-14: 14px;

// 间隙大小
@space-12: 12px;
@space-16: 16px;
@space-24: 24px;

// 公共页头
@layout-header-height: 146px;
@layout-header-padding: 0;
@page-header-background: #fff;
@page-header-zIndex: 3;
@page-header-shadow: 0 1px 4px rgb(0 21 41 / 8%);

// 公共页头-用户信息
@page-main-height: 50px;
@page-userinfo-padding: 0 @space-12;
@page-userinfo-hover: rgba(0, 0, 0, .025);
@page-userinfo-transition: all .3s;
@page-avatar-size: 24px;
@page-avatar-radius: 50%;
@page-username-size: @size-14;
@page-username-color: @color-normal;
@page-username-space: 8px;
@page-dropdown-width: 160px;

// 公共页头-面包屑
@page-breadcrumb-padding: @space-12 @space-24;

// 公共页头-标题
@page-title-height: 35px;
@page-title-weight: 600;
@page-title-size: 20px;
@page-title-color: rgba(0, 0, 0, .85);
@page-title-padding: 0 @space-24;

// 公共侧边栏
@layout-sider-background: @background-dark;
@page-sider-width: 200px;
@page-sider-collapsed-width: 80px;
@page-sider-trigger-height: 48px;
@page-sider-zIndex: 3;

// 公共侧边栏-滚动条
@sider-scrollbar-width: 6px;
@sider-scrollbar-height: 6px;
@sider-scrollbar-radius: 3px;
@sider-scrollbar-color: hsla(0, 0%, 100%, .2);
@sider-scrollbar-background: hsla(0, 0%, 100%, .15);

// 公共侧边栏-收起
@layout-trigger-background: #002140;
@sider-collapsed-transition: all 0.15s linear;

// 公共侧边栏-图标
@page-logo-height: 32px;
@page-logo-padding: @space-16;
@page-logo-background: transparent;
@page-logo-space: @space-12;
@page-logo-size: 18px;
@page-logo-color: #fff;
@page-logo-weight: 600;

// 公共侧边栏-菜单
@menu-dark-bg: @background-dark;

// 公共内容
@layout-body-background: #EFF1F4;
@page-content-min-height: 320px;
@page-content-padding: @space-24;

// 公共页脚
@layout-footer-padding: @space-24;
@page-footer-color: #888;
@page-footer-size: @size-14;

// 公共下拉框hover
@item-hover-bg: #e6f7ff;

// 未登录公共布局
@passport-background: #f0f2f5;
@passport-backgroundImage: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
@passport-backgroundPosition: center 110px;
@passport-padding: 72px 40px 24px;
@passport-content-width: 385px;

// 未登录公共布局-标题
@passport-title-color: fade(#000, 85%);
@passport-title-height: 44px;
@passport-title-size: 33px;
@passport-title-weight: 600;
@passport-title-space: @space-16;

// 未登录公共布局-描述
@passport-description-color: fade(#000, 45%);
@passport-description-size: @size-14;
@passport-description-margin: 12px 0 40px 0;