refactor(web): 样式体系 - 拆分模型选择、滚动条与编辑器样式
This commit is contained in:
23
web/src/pages/create/creation-scrollbars.css
Normal file
23
web/src/pages/create/creation-scrollbars.css
Normal file
@@ -0,0 +1,23 @@
|
||||
@layer utilities {
|
||||
/* Creation surfaces use a compact, theme-aware scrollbar. */
|
||||
.creation-scrollbar {
|
||||
scrollbar-color: color-mix(in srgb, var(--user-ink, #fff) 22%, transparent) transparent;
|
||||
scrollbar-gutter: auto;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.creation-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
.creation-scrollbar::-webkit-scrollbar-track { background: transparent; }
|
||||
.creation-scrollbar::-webkit-scrollbar-thumb {
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--user-ink, #fff) 18%, transparent);
|
||||
}
|
||||
.creation-scrollbar::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--user-ink, #fff) 32%, transparent); }
|
||||
|
||||
html:not(.dark) .creation-scrollbar {
|
||||
scrollbar-color: color-mix(in srgb, var(--user-ink, #1b1b1f) 22%, transparent) transparent;
|
||||
}
|
||||
html:not(.dark) .creation-scrollbar::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--user-ink, #1b1b1f) 16%, transparent); }
|
||||
html:not(.dark) .creation-scrollbar::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--user-ink, #1b1b1f) 28%, transparent); }
|
||||
}
|
||||
@@ -46,6 +46,7 @@ import { creationAttachmentKind, creationMediaAspectRatio, removeCreationAttachm
|
||||
import { conversationTimestamp, isImageAttachment, isVideoAttachment } from "./creation-conversations";
|
||||
import { conversationTimeFormatter, countOptions, historyDayFormatter, messageTimeFormatter, modeLabels, qualityOptions, ratioOptions, resolutionOptions, shotScriptLabels, type CreationConversation, type CreationMessage, type CreationShotRailEntry, type CreationStatus } from "./creation-types";
|
||||
import "./creation-product.css";
|
||||
import "./creation-scrollbars.css";
|
||||
import { creationFeaturedWorks, inspirationSource } from "./creation-inspirations";
|
||||
|
||||
const CanvasPromptOptimizerDrawer = lazy(() => import("@/components/canvas/canvas-prompt-optimizer-drawer").then((module) => ({ default: module.CanvasPromptOptimizerDrawer })));
|
||||
|
||||
Reference in New Issue
Block a user