初始化
This commit is contained in:
Ran
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
@@ -0,0 +1,350 @@
|
||||
@use "./variables.scss";
|
||||
:root {
|
||||
--web-dialog-bg: var(--web-raised);
|
||||
color-scheme: light;
|
||||
}
|
||||
.el-dialog,
|
||||
.el-message-box {
|
||||
--el-bg-color: var(--web-dialog-bg);
|
||||
--el-bg-color-overlay: var(--web-dialog-bg);
|
||||
background: var(--web-dialog-bg) !important;
|
||||
}
|
||||
.el-dialog > .el-dialog__header,
|
||||
.el-dialog > .el-dialog__body,
|
||||
.el-dialog > .el-dialog__footer {
|
||||
background: var(--web-dialog-bg) !important;
|
||||
}
|
||||
* {
|
||||
scrollbar-color: var(--web-scrollbar-global-thumb) var(--web-scrollbar-global-track) !important;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
*::-webkit-scrollbar {
|
||||
width: 10px !important;
|
||||
height: 10px !important;
|
||||
}
|
||||
*::-webkit-scrollbar-track,
|
||||
*::-webkit-scrollbar-track-piece {
|
||||
background: var(--web-scrollbar-global-track) !important;
|
||||
border-radius: 999px;
|
||||
}
|
||||
*::-webkit-scrollbar-thumb {
|
||||
min-width: 28px;
|
||||
min-height: 28px;
|
||||
background: var(--web-scrollbar-global-thumb) !important;
|
||||
background-clip: padding-box !important;
|
||||
border: 2px solid var(--web-scrollbar-global-track) !important;
|
||||
border-radius: 999px;
|
||||
}
|
||||
*::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--web-scrollbar-global-hover) !important;
|
||||
background-clip: padding-box !important;
|
||||
}
|
||||
*::-webkit-scrollbar-button,
|
||||
*::-webkit-scrollbar-button:single-button {
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
display: none !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
*::-webkit-scrollbar-corner {
|
||||
background: var(--web-scrollbar-global-track) !important;
|
||||
}
|
||||
.el-scrollbar__bar {
|
||||
background: transparent !important;
|
||||
border-radius: 999px;
|
||||
}
|
||||
.el-scrollbar__bar.is-vertical {
|
||||
width: 8px !important;
|
||||
right: 2px !important;
|
||||
}
|
||||
.el-scrollbar__bar.is-horizontal {
|
||||
height: 8px !important;
|
||||
bottom: 2px !important;
|
||||
}
|
||||
.el-scrollbar__thumb {
|
||||
background: var(--web-scrollbar-global-thumb) !important;
|
||||
border: 0 !important;
|
||||
border-radius: 999px !important;
|
||||
opacity: 0.82 !important;
|
||||
}
|
||||
.el-scrollbar__thumb:hover {
|
||||
background: var(--web-scrollbar-global-hover) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html {
|
||||
scrollbar-gutter: stable both-edges;
|
||||
font-size: 16px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
min-width: 320px;
|
||||
color: var(--web-text);
|
||||
background: var(--web-bg);
|
||||
font-family: var(--font-ui);
|
||||
line-height: 1.5;
|
||||
user-select: none;
|
||||
}
|
||||
input,
|
||||
textarea,
|
||||
[contenteditable="true"] {
|
||||
user-select: text;
|
||||
}
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
button {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
#app {
|
||||
width: 100%;
|
||||
min-height: 100dvh;
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.icon-button {
|
||||
width: var(--control-height-md);
|
||||
height: var(--control-height-md);
|
||||
padding: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--web-icon-button-muted);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
color 0.18s,
|
||||
background-color 0.18s;
|
||||
}
|
||||
.icon-button:hover:not(:disabled) {
|
||||
color: var(--web-text);
|
||||
background: var(--web-hover);
|
||||
}
|
||||
.icon-button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.toast-region {
|
||||
position: fixed;
|
||||
z-index: 4000;
|
||||
top: 18px;
|
||||
left: 50%;
|
||||
width: min(440px, calc(100vw - 32px));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
transform: translateX(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.app-toast {
|
||||
position: relative;
|
||||
min-height: 68px;
|
||||
padding: 14px 12px 16px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
color: var(--web-text);
|
||||
background: var(--web-surface-soft);
|
||||
border: 1px solid var(--web-line-emphasis);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--web-shadow-toast);
|
||||
overflow: hidden;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.app-toast--success {
|
||||
border-color: var(--web-success-border);
|
||||
}
|
||||
.app-toast--warning {
|
||||
border-color: var(--web-warning);
|
||||
}
|
||||
.app-toast--error {
|
||||
border-color: var(--web-danger);
|
||||
}
|
||||
.app-toast__copy {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.app-toast__copy span {
|
||||
margin-top: 2px;
|
||||
color: var(--web-text-secondary);
|
||||
font-size: 13px;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.app-toast__progress {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: var(--web-accent);
|
||||
transform: scaleX(var(--toast-progress, 1));
|
||||
transform-origin: left center;
|
||||
transition: transform 0.05s linear;
|
||||
}
|
||||
.toast-fade-enter-active,
|
||||
.toast-fade-leave-active {
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.toast-fade-enter-from,
|
||||
.toast-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
.app-toast {
|
||||
align-items: center;
|
||||
}
|
||||
.app-toast--success strong,
|
||||
.app-toast--warning strong,
|
||||
.app-toast--info strong {
|
||||
display: none;
|
||||
}
|
||||
.app-toast__copy span {
|
||||
margin-top: 0;
|
||||
}
|
||||
.web-page {
|
||||
--el-color-primary: var(--web-primary);
|
||||
--el-color-primary-light-3: var(--web-primary-light);
|
||||
--el-color-primary-dark-2: var(--web-primary-hover);
|
||||
--el-bg-color: var(--web-surface);
|
||||
--el-bg-color-overlay: var(--web-raised);
|
||||
--el-fill-color-blank: var(--web-surface);
|
||||
--el-fill-color-light: var(--web-raised);
|
||||
--el-border-color: var(--web-line);
|
||||
--el-border-color-light: var(--web-line);
|
||||
--el-text-color-primary: var(--web-text);
|
||||
--el-text-color-regular: var(--web-text-secondary);
|
||||
--el-text-color-placeholder: var(--web-input-placeholder);
|
||||
--el-mask-color: var(--web-page-mask);
|
||||
--el-mask-color-extra-light: var(--web-page-mask-light);
|
||||
--el-border-radius-base: var(--radius-sm);
|
||||
}
|
||||
.web-page .el-loading-mask {
|
||||
background-color: var(--web-page-mask);
|
||||
transition: opacity 0.16s ease;
|
||||
}
|
||||
.web-page .el-input__wrapper,
|
||||
.web-page .el-textarea__inner {
|
||||
background: var(--web-surface-soft);
|
||||
box-shadow: 0 0 0 1px var(--web-line-strong) inset;
|
||||
}
|
||||
.web-page .el-input__wrapper:hover,
|
||||
.web-page .el-input__wrapper.is-focus {
|
||||
box-shadow: 0 0 0 1px var(--web-input-focus) inset;
|
||||
}
|
||||
.web-dialog.el-dialog {
|
||||
--el-mask-color: var(--web-dialog-mask);
|
||||
--el-mask-color-extra-light: var(--web-dialog-mask-light);
|
||||
color: var(--web-text);
|
||||
background: var(--web-surface);
|
||||
border: 1px solid var(--web-line-emphasis);
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--web-shadow-dialog);
|
||||
}
|
||||
.web-dialog .el-dialog__title {
|
||||
color: var(--web-text);
|
||||
}
|
||||
.web-dialog .el-dialog__headerbtn .el-dialog__close {
|
||||
color: var(--web-accent-muted);
|
||||
}
|
||||
.el-overlay {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.el-message-box {
|
||||
--el-bg-color: var(--web-dialog-bg);
|
||||
--el-bg-color-overlay: var(--web-dialog-bg);
|
||||
--el-text-color-primary: var(--web-message-text);
|
||||
--el-text-color-regular: var(--web-message-muted);
|
||||
--el-border-color: var(--web-message-line);
|
||||
width: min(430px, calc(100vw - 32px));
|
||||
padding: 0 !important;
|
||||
color: var(--web-text) !important;
|
||||
background: var(--web-dialog-bg) !important;
|
||||
border: 1px solid var(--web-line-emphasis) !important;
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--web-shadow-dialog);
|
||||
}
|
||||
.el-message-box__header {
|
||||
padding: 18px 20px 14px;
|
||||
border-bottom: 1px solid var(--web-line-strong);
|
||||
}
|
||||
.el-message-box__title {
|
||||
color: var(--web-text) !important;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.el-message-box__headerbtn {
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
}
|
||||
.el-message-box__headerbtn .el-message-box__close {
|
||||
color: var(--web-text-note);
|
||||
}
|
||||
.el-message-box__headerbtn:hover .el-message-box__close {
|
||||
color: var(--web-accent-dark);
|
||||
}
|
||||
.el-message-box__content {
|
||||
padding: 18px 20px;
|
||||
color: var(--web-text-secondary) !important;
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.el-message-box__status {
|
||||
color: var(--web-accent-dark);
|
||||
}
|
||||
.el-message-box__message p {
|
||||
color: var(--web-text-secondary) !important;
|
||||
}
|
||||
.el-message-box__btns {
|
||||
padding: 0 20px 18px;
|
||||
}
|
||||
.el-message-box__btns .el-button {
|
||||
min-height: var(--control-height-md);
|
||||
min-width: 78px;
|
||||
color: var(--web-text-secondary);
|
||||
background: var(--web-surface);
|
||||
border-color: var(--web-line-strong);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
.el-message-box__btns .el-button:hover {
|
||||
color: var(--web-text);
|
||||
background: var(--web-hover);
|
||||
border-color: var(--web-line-emphasis);
|
||||
}
|
||||
.el-message-box__btns .el-button--primary {
|
||||
color: var(--web-text-strong);
|
||||
background: var(--web-primary);
|
||||
border-color: var(--web-primary);
|
||||
}
|
||||
.el-message-box__btns .el-button--primary:hover {
|
||||
background: var(--web-primary-hover);
|
||||
border-color: var(--web-primary-hover);
|
||||
}
|
||||
.source-upload-button input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,234 @@
|
||||
/* 用户端全局设计令牌，统一颜色、间距、圆角和阴影语义。 */
|
||||
:root {
|
||||
/* 核心语义层用于统一页面画布、内容表面、文字、边界和品牌强调。 */
|
||||
--web-canvas: #f4f5f7;
|
||||
--web-surface-base: #ffffff;
|
||||
--web-surface-raised: #f8f8f7;
|
||||
--web-surface-hover: #f1f0ed;
|
||||
--web-text-primary: #1d2024;
|
||||
--web-text-muted: #676d75;
|
||||
--web-border: #dfe2e6;
|
||||
--web-border-strong: #c9cdd3;
|
||||
--web-brand: #b57b3d;
|
||||
--web-brand-hover: #99622d;
|
||||
--web-brand-soft: #f2e6d7;
|
||||
--web-accent: var(--web-brand);
|
||||
|
||||
/* 既有变量映射到核心语义层，供尚未迁移的页面继续使用。 */
|
||||
--web-bg: var(--web-canvas);
|
||||
--web-sidebar: var(--web-surface-raised);
|
||||
--web-surface: var(--web-surface-base);
|
||||
--web-raised: var(--web-surface-raised);
|
||||
--web-hover: var(--web-surface-hover);
|
||||
--web-primary: var(--web-brand);
|
||||
--web-primary-hover: var(--web-brand-hover);
|
||||
--web-primary-light: #c99a67;
|
||||
--web-input-focus: var(--web-brand);
|
||||
--web-creative-accent: var(--web-brand);
|
||||
--web-creative-accent-hover: var(--web-brand-hover);
|
||||
--web-creative-button-text: #17191c;
|
||||
--web-creative-danger: #e49b92;
|
||||
--web-text: var(--web-text-primary);
|
||||
--web-muted: var(--web-text-muted);
|
||||
--web-line: var(--web-border);
|
||||
--web-surface-soft: var(--web-surface-raised);
|
||||
--web-text-strong: #111317;
|
||||
--web-text-secondary: #484e56;
|
||||
--web-text-tertiary: #6f757d;
|
||||
--web-text-subtle: #797f87;
|
||||
--web-text-faint: #858b92;
|
||||
--web-text-meta: #7d838b;
|
||||
--web-text-detail: #5b6169;
|
||||
--web-text-caption: #727880;
|
||||
--web-text-placeholder: #858b93;
|
||||
--web-text-quiet: #6f757d;
|
||||
--web-text-hint: #747a82;
|
||||
--web-text-note: #767c84;
|
||||
--web-text-disabled: #92979e;
|
||||
--web-text-input-placeholder: #858b93;
|
||||
--web-input-placeholder: #858b93;
|
||||
--web-text-context: #5f656d;
|
||||
--web-text-panel-muted: #656b73;
|
||||
--web-media-control-text: #f3f4f2;
|
||||
--web-text-neutral: #565c64;
|
||||
--web-text-subdued: #4f555d;
|
||||
--web-prompt-placeholder: #686e76;
|
||||
--web-text-critical-muted: #6a5552;
|
||||
--web-text-media-muted: #807466;
|
||||
--web-project-count: var(--web-text-muted);
|
||||
--web-project-placeholder: #7d6a55;
|
||||
--web-project-badge-text: #574737;
|
||||
--web-project-tooltip-accent: #855722;
|
||||
--web-project-tooltip-label: var(--web-text-muted);
|
||||
--web-project-copy-muted: #747a82;
|
||||
--web-project-divider-text: #5b6169;
|
||||
--web-project-meta: var(--web-text-muted);
|
||||
--web-project-state-text: #747a82;
|
||||
--web-dialog-description: #666c74;
|
||||
--web-creative-muted: var(--web-text-muted);
|
||||
--web-script-hint: #666c74;
|
||||
--web-panel-control-text: #777d85;
|
||||
--web-panel-hint: #626870;
|
||||
--web-select-option: #50565e;
|
||||
--web-select-group: #686e76;
|
||||
--web-task-idle-text: #c5beb5;
|
||||
--web-task-idle-dot: #817d76;
|
||||
--web-task-success-text: #8cc297;
|
||||
--web-task-success-dot: #75ad82;
|
||||
--web-task-failed-text: #dc9389;
|
||||
--web-task-failed-dot: #d98377;
|
||||
--web-task-cancelled: #a89e91;
|
||||
--web-task-detail: #555;
|
||||
--web-dialog-option-muted: #88857f;
|
||||
--web-project-shared-note: #746b60;
|
||||
--web-episode-placeholder: #9a866e;
|
||||
--web-episode-status-text: #5f503e;
|
||||
--web-episode-copy: #8f514a;
|
||||
--web-episode-copy-hover: #f0e2d7;
|
||||
--web-icon-button-muted: #747a82;
|
||||
--web-message-text: #eee9e2;
|
||||
--web-message-muted: #b7b1a8;
|
||||
--web-empty-text: var(--web-text-muted);
|
||||
--web-accent-dark: #9f4038;
|
||||
--web-accent-muted: #846039;
|
||||
--web-accent-soft: #8a7659;
|
||||
--web-line-strong: var(--web-border);
|
||||
--web-line-emphasis: var(--web-border-strong);
|
||||
--web-line-active: #796348;
|
||||
--web-line-hover: #7c6546;
|
||||
--web-line-action-hover: #b68d57;
|
||||
--web-line-danger-hover: #b85e55;
|
||||
--web-line-critical: #85534d;
|
||||
--web-line-accent: #8a704e;
|
||||
--web-project-card-hover-line: #a58358;
|
||||
--web-project-tooltip-line: var(--web-border);
|
||||
--web-project-tooltip-line-soft: #eceef1;
|
||||
--web-invalid-line: #b45d54;
|
||||
--web-invalid-line-hover: #d9786b;
|
||||
--web-timeline-action-line: #765d40;
|
||||
--web-timeline-focus-line: #9a7a50;
|
||||
--web-upload-hover-line: #8b6d47;
|
||||
--web-search-line: #a47a4d;
|
||||
--web-message-line: #4b4033;
|
||||
--web-control-muted: #817b72;
|
||||
--web-icon-muted: #8e7554;
|
||||
--web-divider-soft: #e8eaed;
|
||||
--web-scrollbar-thumb: #756047;
|
||||
--web-scrollbar-track: #0b0c0a;
|
||||
--web-scrollbar-track-panel: #151613;
|
||||
--web-scrollbar-track-editor: #171815;
|
||||
--web-scrollbar-compact: #5b554c;
|
||||
--web-scrollbar-thumb-hover: #eee5d8;
|
||||
--web-scrollbar-global-thumb: #aeb3ba;
|
||||
--web-scrollbar-global-track: #eceef1;
|
||||
--web-scrollbar-global-hover: #858b93;
|
||||
--web-success: #3f8555;
|
||||
--web-success-bright: #54c77a;
|
||||
--web-success-border: #b5edc8;
|
||||
--web-complete: #39794c;
|
||||
--web-info: #426f9d;
|
||||
--web-warning: #a96812;
|
||||
--web-danger: #b84d43;
|
||||
--web-danger-soft: #f6e3df;
|
||||
--web-mention-default-line: #b4864d;
|
||||
--web-mention-remove-line: #c36a62;
|
||||
--web-mention-remove-hover: #a9433b;
|
||||
--web-mention-remove-hover-line: #f0a098;
|
||||
--web-mention-voice-line: #c8ab83;
|
||||
--web-mention-scene-bg: #e5f0e5;
|
||||
--web-mention-scene-line: #5c9a7a;
|
||||
--web-mention-prop-bg: #eee5d8;
|
||||
--web-mention-prop-line: #7180bd;
|
||||
--web-mention-custom-line: #ad7770;
|
||||
--web-mention-storyboard-line: #b99767;
|
||||
--web-switch-track: #b5bac1;
|
||||
--web-switch-track-active: #9f4038;
|
||||
--web-switch-border: #806443;
|
||||
--web-switch-thumb: #ffffff;
|
||||
--web-control-outline: rgba(29, 32, 36, 0.18);
|
||||
--web-loading-mask: rgba(7, 8, 7, 0.82);
|
||||
--web-history-overlay: rgba(7, 8, 7, 0.68);
|
||||
--web-media-overlay: rgba(9, 10, 8, 0.82);
|
||||
--web-preview-overlay: rgba(0, 0, 0, 0.48);
|
||||
--web-error-overlay: rgba(33, 23, 21, 0.9);
|
||||
--web-current-outline: rgba(9, 10, 8, 0.72);
|
||||
--web-media-overlay-soft: rgba(7, 8, 7, 0.72);
|
||||
--web-media-overlay-medium: rgba(7, 8, 7, 0.76);
|
||||
--web-media-overlay-dense: rgba(7, 8, 7, 0.78);
|
||||
--web-page-mask: rgba(244, 245, 247, 0.9);
|
||||
--web-page-mask-light: rgba(244, 245, 247, 0.72);
|
||||
--web-dialog-mask: rgba(8, 9, 8, 0.82);
|
||||
--web-dialog-mask-light: rgba(8, 9, 8, 0.48);
|
||||
--web-video-bg: #000;
|
||||
--web-video-controls: rgba(0, 0, 0, 0.78);
|
||||
--web-video-dialog-controls: rgba(0, 0, 0, 0.84);
|
||||
--web-card-menu-bg: rgba(255, 255, 255, 0.96);
|
||||
--web-media-state-mask: rgba(7, 8, 7, 0.9);
|
||||
--web-search-outline: rgba(138, 112, 78, 0.18);
|
||||
--web-media-loading-text: #c8a66e;
|
||||
--web-media-error-text: #d9786f;
|
||||
--web-chart-primary: #e2aa61;
|
||||
--web-chart-tooltip-bg: #171717;
|
||||
--web-chart-tooltip-line: #3a3024;
|
||||
--web-chart-tooltip-text: #eee;
|
||||
--web-chart-axis-line: var(--web-border);
|
||||
--web-chart-axis-text: var(--web-text-muted);
|
||||
--web-chart-split-line: var(--web-divider-soft);
|
||||
--web-tooltip-bg: rgba(17, 16, 13, 0.9);
|
||||
--web-focus-inset: rgba(198, 160, 106, 0.22);
|
||||
--web-focus-ring: rgba(198, 160, 106, 0.2);
|
||||
--web-focus-ring-soft: rgba(198, 160, 106, 0.12);
|
||||
--web-focus-ring-search: rgba(198, 160, 106, 0.14);
|
||||
--web-focus-ring-active: rgba(198, 160, 106, 0.28);
|
||||
--web-focus-ring-strong: rgba(198, 160, 106, 0.35);
|
||||
--web-invalid-outline: rgba(180, 93, 84, 0.2);
|
||||
--web-card-focus-ring: rgba(165, 131, 88, 0.28);
|
||||
--web-timeline-focus-ring: rgba(154, 122, 80, 0.28);
|
||||
--web-dialog-focus-ring: rgba(154, 122, 80, 0.12);
|
||||
--web-task-running-ring: rgba(198, 160, 106, 0.12);
|
||||
--web-shadow-lg: 0 20px 54px rgba(24, 28, 33, 0.1);
|
||||
--web-shadow-toast: 0 16px 50px rgba(24, 28, 33, 0.14);
|
||||
--web-shadow-dialog: 0 20px 60px rgba(24, 28, 33, 0.16);
|
||||
--web-shadow-mention: 0 18px 44px rgba(24, 28, 33, 0.14);
|
||||
--web-shadow-preview: 0 10px 24px rgba(24, 28, 33, 0.14);
|
||||
--web-shadow-project-badge: 0 3px 10px rgba(24, 28, 33, 0.08);
|
||||
--web-shadow-project-tooltip: 0 14px 36px rgba(24, 28, 33, 0.12);
|
||||
--web-shadow-duration: 0 16px 38px rgba(24, 28, 33, 0.14);
|
||||
--web-shadow-creative-shell: 0 26px 70px rgba(24, 28, 33, 0.14);
|
||||
--web-shadow-select: 0 18px 46px rgba(24, 28, 33, 0.14);
|
||||
--web-shadow-card-action: 0 4px 12px rgba(24, 28, 33, 0.08);
|
||||
--web-shadow-card-action-hover: 0 5px 14px rgba(24, 28, 33, 0.12);
|
||||
--web-shadow-card-menu: 0 12px 30px rgba(24, 28, 33, 0.14);
|
||||
|
||||
/* 字体、控件、容器、圆角和间距令牌为后续页面迁移提供统一尺寸。 */
|
||||
--font-ui: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
|
||||
--font-display: "Songti SC", "SimSun", serif;
|
||||
--font-size-xs: 11px;
|
||||
--font-size-sm: 12px;
|
||||
--font-size-md: 13px;
|
||||
--font-size-lg: 14px;
|
||||
--font-size-xl: 16px;
|
||||
--font-size-metric: 20px;
|
||||
--font-weight-regular: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--control-height-sm: 32px;
|
||||
--control-height-md: 36px;
|
||||
--control-height-lg: 40px;
|
||||
--sidebar-width: 216px;
|
||||
--sidebar-width-collapsed: 68px;
|
||||
--mobile-bar-height: 58px;
|
||||
--page-content-max: 1440px;
|
||||
--page-content-compact: 1320px;
|
||||
--page-gutter: 32px;
|
||||
--page-gutter-mobile: 18px;
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 10px;
|
||||
--radius-lg: 14px;
|
||||
--space-xs: 4px;
|
||||
--space-sm: 8px;
|
||||
--space-md: 12px;
|
||||
--space-lg: 16px;
|
||||
--space-xl: 24px;
|
||||
--space-2xl: 32px;
|
||||
}
|
||||
Reference in New Issue
Block a user