304 lines
9.6 KiB
Plaintext
304 lines
9.6 KiB
Plaintext
// 亮色主题配色常量
|
|
body {
|
|
--color-bg-header: #232323;
|
|
--color-bg-sidebar: #F2F3F4;
|
|
--color-bg-content: #FEFEFE;
|
|
--color-sidebar-icon: #737070;
|
|
--color-sidebar-icon-bg: #D7D8DB;
|
|
--color-sidebar-icon-checked: #CBCCCF;
|
|
--color-sidebar-tooltip-text: rgba(255, 255, 255, .9);
|
|
--color-sidebar-tooltip-bg: rgb(29, 33, 41);
|
|
--color-content-text-1: rgba(0, 0, 0, .8);
|
|
--color-content-text-2: rgba(0, 0, 0, .85);
|
|
--color-content-text-3: rgba(0, 0, 0, .95);
|
|
--search-bg-focus: rgba(234, 234, 234, .75);
|
|
--search-bg: rgba(234, 234, 234, .95);
|
|
--search-color-text: #0E0E0E;
|
|
--search-color-text-focus: #0F0F0F;
|
|
--search-bg-icon-hover: rgba(12, 12, 12, .04);
|
|
--search-bg-icon-hover-focus: rgba(12, 12, 12, .08);
|
|
--search-bg-icon-selected: rgba(12, 12, 12, .06);
|
|
--search-bg-icon-selected-focus: rgba(12, 12, 12, .10);
|
|
}
|
|
|
|
// 暗色主题配色常量
|
|
body[host-space-theme='dark'] {
|
|
--color-bg-header: #232323;
|
|
--color-bg-sidebar: #2C2E31;
|
|
--color-bg-content: #1A1B1C;
|
|
--color-sidebar-icon: #C3C6C9;
|
|
--color-sidebar-icon-bg: #3D3E3F;
|
|
--color-sidebar-icon-checked: #51525C;
|
|
--color-sidebar-tooltip-text: rgba(255, 255, 255, .9);
|
|
--color-sidebar-tooltip-bg: var(--color-sidebar-icon-bg);
|
|
--color-content-text-1: rgba(255, 255, 255, .8);
|
|
--color-content-text-2: rgba(255, 255, 255, .85);
|
|
--color-content-text-3: rgba(255, 255, 255, .95);
|
|
--search-bg: rgba(12, 12, 12, .75);
|
|
--search-bg-focus: rgba(12, 12, 12, .95);
|
|
--search-color-text: #E0E0E0;
|
|
--search-color-text-focus: #F0F0F0;
|
|
--search-bg-icon-hover: rgba(255, 255, 255, .07);
|
|
--search-bg-icon-hover-focus: rgba(255, 255, 255, .12);
|
|
--search-bg-icon-selected: rgba(255, 255, 255, .12);
|
|
--search-bg-icon-selected-focus: rgba(255, 255, 255, .16);
|
|
}
|
|
|
|
// 布局常量
|
|
.host-space-layout {
|
|
--header-height: 44px;
|
|
--sidebar-width: 44px;
|
|
--sidebar-icon-wrapper-size: var(--header-height);
|
|
--sidebar-icon-size: 32px;
|
|
--sidebar-icon-font-size: 22px;
|
|
|
|
--color-bg-header-icon-1: #434343;
|
|
--color-header-tabs-bg: var(--color-bg-header);
|
|
--color-header-tabs-bg-hover: #434343;
|
|
--color-header-text-1: rgba(255, 255, 255, .75);
|
|
--color-header-text-2: rgba(255, 255, 255, .9);
|
|
--color-gradient-start: rgba(38, 38, 38, 1);
|
|
--color-gradient-end: rgba(38, 38, 38, 0);
|
|
}
|
|
|
|
// arco 亮色配色
|
|
body .host-space-layout, .arco-modal-container {
|
|
--color-white: #ffffff;
|
|
--color-black: #000000;
|
|
--color-border: rgb(var(--gray-3));
|
|
--color-bg-popup: var(--color-bg-5);
|
|
--color-bg-1: #fff;
|
|
--color-bg-2: #fff;
|
|
--color-bg-3: #fff;
|
|
--color-bg-4: #fff;
|
|
--color-bg-5: #fff;
|
|
--color-bg-white: #fff;
|
|
--color-neutral-1: rgb(var(--gray-1));
|
|
--color-neutral-2: rgb(var(--gray-2));
|
|
--color-neutral-3: rgb(var(--gray-3));
|
|
--color-neutral-4: rgb(var(--gray-4));
|
|
--color-neutral-5: rgb(var(--gray-5));
|
|
--color-neutral-6: rgb(var(--gray-6));
|
|
--color-neutral-7: rgb(var(--gray-7));
|
|
--color-neutral-8: rgb(var(--gray-8));
|
|
--color-neutral-9: rgb(var(--gray-9));
|
|
--color-neutral-10: rgb(var(--gray-10));
|
|
--color-text-1: var(--color-neutral-10);
|
|
--color-text-2: var(--color-neutral-8);
|
|
--color-text-3: var(--color-neutral-6);
|
|
--color-text-4: var(--color-neutral-4);
|
|
--color-border-1: var(--color-neutral-2);
|
|
--color-border-2: var(--color-neutral-3);
|
|
--color-border-3: var(--color-neutral-4);
|
|
--color-border-4: var(--color-neutral-6);
|
|
--color-fill-1: var(--color-neutral-1);
|
|
--color-fill-2: var(--color-neutral-2);
|
|
--color-fill-3: var(--color-neutral-3);
|
|
--color-fill-4: var(--color-neutral-4);
|
|
--color-primary-light-1: rgb(var(--primary-1));
|
|
--color-primary-light-2: rgb(var(--primary-2));
|
|
--color-primary-light-3: rgb(var(--primary-3));
|
|
--color-primary-light-4: rgb(var(--primary-4));
|
|
--color-link-light-1: rgb(var(--link-1));
|
|
--color-link-light-2: rgb(var(--link-2));
|
|
--color-link-light-3: rgb(var(--link-3));
|
|
--color-link-light-4: rgb(var(--link-4));
|
|
--color-secondary: var(--color-neutral-2);
|
|
--color-secondary-hover: var(--color-neutral-3);
|
|
--color-secondary-active: var(--color-neutral-4);
|
|
--color-secondary-disabled: var(--color-neutral-1);
|
|
--color-danger-light-1: rgb(var(--danger-1));
|
|
--color-danger-light-2: rgb(var(--danger-2));
|
|
--color-danger-light-3: rgb(var(--danger-3));
|
|
--color-danger-light-4: rgb(var(--danger-4));
|
|
--color-success-light-1: rgb(var(--success-1));
|
|
--color-success-light-2: rgb(var(--success-2));
|
|
--color-success-light-3: rgb(var(--success-3));
|
|
--color-success-light-4: rgb(var(--success-4));
|
|
--color-warning-light-1: rgb(var(--warning-1));
|
|
--color-warning-light-2: rgb(var(--warning-2));
|
|
--color-warning-light-3: rgb(var(--warning-3));
|
|
--color-warning-light-4: rgb(var(--warning-4));
|
|
--border-radius-none: 0;
|
|
--border-radius-small: 2px;
|
|
--border-radius-medium: 4px;
|
|
--border-radius-large: 8px;
|
|
--border-radius-circle: 50%;
|
|
--color-tooltip-bg: rgb(var(--gray-10));
|
|
--color-spin-layer-bg: rgba(255, 255, 255, 0.6);
|
|
--color-menu-dark-bg: #232324;
|
|
--color-menu-light-bg: #ffffff;
|
|
--color-menu-dark-hover: rgba(255, 255, 255, 0.04);
|
|
--color-mask-bg: rgba(29, 33, 41, 0.6);
|
|
}
|
|
|
|
// arco 暗色配色
|
|
body[host-space-theme='dark'],
|
|
body[host-space-theme='dark'] .host-space-layout,
|
|
body[host-space-theme='dark'] .arco-modal-container {
|
|
--color-white: rgba(255, 255, 255, 0.9);
|
|
--color-black: #000000;
|
|
--color-border: #333335;
|
|
--color-bg-popup: var(--color-bg-5);
|
|
--color-bg-1: #17171a;
|
|
--color-bg-2: #232324;
|
|
--color-bg-3: #2a2a2b;
|
|
--color-bg-4: #313132;
|
|
--color-bg-5: #373739;
|
|
--color-bg-white: #f6f6f6;
|
|
--color-neutral-1: rgba(255, 255, 255, 0.04);
|
|
--color-neutral-2: rgba(255, 255, 255, 0.08);
|
|
--color-neutral-3: rgba(255, 255, 255, 0.12);
|
|
--color-neutral-4: rgba(255, 255, 255, 0.16);
|
|
--color-text-1: rgba(255, 255, 255, 0.9);
|
|
--color-text-2: rgba(255, 255, 255, 0.7);
|
|
--color-text-3: rgba(255, 255, 255, 0.5);
|
|
--color-text-4: rgba(255, 255, 255, 0.3);
|
|
--color-fill-1: rgba(255, 255, 255, 0.04);
|
|
--color-fill-2: rgba(255, 255, 255, 0.08);
|
|
--color-fill-3: rgba(255, 255, 255, 0.12);
|
|
--color-fill-4: rgba(255, 255, 255, 0.16);
|
|
--color-primary-light-1: rgba(var(--primary-6), 0.2);
|
|
--color-primary-light-2: rgba(var(--primary-6), 0.35);
|
|
--color-primary-light-3: rgba(var(--primary-6), 0.5);
|
|
--color-primary-light-4: rgba(var(--primary-6), 0.65);
|
|
--color-secondary: rgba(var(--gray-9), 0.08);
|
|
--color-secondary-hover: rgba(var(--gray-8), 0.16);
|
|
--color-secondary-active: rgba(var(--gray-7), 0.24);
|
|
--color-secondary-disabled: rgba(var(--gray-9), 0.08);
|
|
--color-danger-light-1: rgba(var(--danger-6), 0.2);
|
|
--color-danger-light-2: rgba(var(--danger-6), 0.35);
|
|
--color-danger-light-3: rgba(var(--danger-6), 0.5);
|
|
--color-danger-light-4: rgba(var(--danger-6), 0.65);
|
|
--color-success-light-1: rgb(var(--success-6), 0.2);
|
|
--color-success-light-2: rgb(var(--success-6), 0.35);
|
|
--color-success-light-3: rgb(var(--success-6), 0.5);
|
|
--color-success-light-4: rgb(var(--success-6), 0.65);
|
|
--color-warning-light-1: rgb(var(--warning-6), 0.2);
|
|
--color-warning-light-2: rgb(var(--warning-6), 0.35);
|
|
--color-warning-light-3: rgb(var(--warning-6), 0.5);
|
|
--color-warning-light-4: rgb(var(--warning-6), 0.65);
|
|
--color-link-light-1: rgb(var(--link-6), 0.2);
|
|
--color-link-light-2: rgb(var(--link-6), 0.35);
|
|
--color-link-light-3: rgb(var(--link-6), 0.5);
|
|
--color-link-light-4: rgb(var(--link-6), 0.65);
|
|
--color-tooltip-bg: #373739;
|
|
--color-spin-layer-bg: rgba(51, 51, 51, 0.6);
|
|
--color-menu-dark-bg: #232324;
|
|
--color-menu-light-bg: #232324;
|
|
--color-menu-dark-hover: var(--color-fill-2);
|
|
--color-mask-bg: rgba(23, 23, 26, 0.6);
|
|
}
|
|
|
|
// 侧栏图标
|
|
.host-space-sidebar-icon-wrapper {
|
|
width: var(--sidebar-icon-wrapper-size);
|
|
height: var(--sidebar-icon-wrapper-size);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.host-space-sidebar-icon {
|
|
width: var(--sidebar-icon-size);
|
|
height: var(--sidebar-icon-size);
|
|
font-size: var(--sidebar-icon-font-size);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--color-sidebar-icon);
|
|
border-radius: 4px;
|
|
border: 1px solid transparent;
|
|
transition: 0.1s cubic-bezier(0, 0, 1, 1);
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: var(--color-sidebar-icon-bg);
|
|
}
|
|
|
|
&.checked-item {
|
|
background: var(--color-sidebar-icon-checked);
|
|
}
|
|
|
|
&.disabled-item {
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 终端设置容器
|
|
.host-space-setting-container {
|
|
padding: 32px 16px 16px 16px;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.host-space-setting-wrapper {
|
|
min-width: 932px;
|
|
max-width: 90%;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
}
|
|
|
|
.host-space-setting-title {
|
|
margin: 0 0 24px 0;
|
|
user-select: none;
|
|
font-size: 1.65em;
|
|
color: var(--color-content-text-3);
|
|
}
|
|
|
|
.host-space-setting-block {
|
|
color: var(--color-content-text-2);
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.host-space-setting-subtitle-wrapper {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.host-space-setting-subtitle {
|
|
margin: 0 0 16px 0;
|
|
user-select: none;
|
|
color: var(--color-content-text-3);
|
|
}
|
|
|
|
.host-space-setting-body {
|
|
display: flex;
|
|
|
|
&.block-body {
|
|
width: 100%;
|
|
padding: 16px;
|
|
border: 1px solid var(--color-fill-4);
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// tooltip 内容
|
|
.host-space-tooltip-content {
|
|
color: var(--color-sidebar-tooltip-text);
|
|
background: var(--color-sidebar-tooltip-bg);
|
|
}
|
|
|
|
// 右键菜单
|
|
.host-space-context-menu {
|
|
.arco-dropdown-option {
|
|
padding: 0 6px;
|
|
line-height: 32px;
|
|
|
|
&-content {
|
|
width: 120px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
&-icon {
|
|
font-size: 16px;
|
|
margin: 0 8px 0 4px;
|
|
}
|
|
|
|
}
|