feat(themes): 添加可编辑的站点外观和皮肤主题(#408)
This commit is contained in:
70 files changed
+3654
-327
No files matched your search
+755
-30
@@ -168,8 +168,8 @@
|
||||
|
||||
.admin-appearance-logo-frame-option .ant-switch.ant-switch-checked {
|
||||
box-shadow:
|
||||
inset 0 0 0 1px color-mix(in srgb, var(--admin-status-success) 62%, var(--foreground)),
|
||||
0 0 0 2px color-mix(in srgb, var(--admin-status-success) 13%, transparent);
|
||||
inset 0 0 0 1px color-mix(in srgb, var(--control-switch-checked-bg) 70%, var(--foreground)),
|
||||
0 0 0 2px color-mix(in srgb, var(--control-switch-checked-bg) 15%, transparent);
|
||||
}
|
||||
|
||||
.admin-appearance-logo-preview-grid {
|
||||
@@ -457,6 +457,677 @@
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.admin-appearance-section-form,
|
||||
.admin-appearance-skin-library {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.admin-appearance-form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.admin-appearance-footer-settings {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(340px, 0.72fr);
|
||||
align-items: start;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.admin-appearance-skin-library {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.admin-appearance-skin-card {
|
||||
position: relative;
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
min-height: 148px;
|
||||
grid-template-rows: 76px auto;
|
||||
gap: 11px;
|
||||
border: 1px solid var(--admin-card-border);
|
||||
border-radius: var(--r-lg);
|
||||
background: var(--admin-layer-2);
|
||||
padding: 10px;
|
||||
color: var(--admin-text-primary);
|
||||
text-align: left;
|
||||
transition:
|
||||
border-color var(--motion-state) ease-out,
|
||||
background-color var(--motion-state) ease-out,
|
||||
transform var(--motion-state) var(--ease-aceternity);
|
||||
}
|
||||
|
||||
.admin-appearance-skin-card:hover:not(:disabled) {
|
||||
border-color: color-mix(in srgb, var(--workspace-accent) 48%, var(--admin-card-border));
|
||||
background: var(--admin-layer-3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.admin-appearance-skin-card:focus-visible {
|
||||
outline: 2px solid color-mix(in srgb, var(--ring) 70%, transparent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.admin-appearance-skin-card.is-selected {
|
||||
border-color: color-mix(in srgb, var(--workspace-accent) 74%, var(--admin-card-border));
|
||||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--workspace-accent) 42%, transparent);
|
||||
}
|
||||
|
||||
.admin-appearance-skin-card-preview {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
|
||||
border-radius: calc(var(--r-md) - 2px);
|
||||
background: #090a0d;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.admin-appearance-skin-card-surface {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: flex-end;
|
||||
gap: 7px;
|
||||
border-radius: calc(var(--r-sm) - 1px);
|
||||
background: #111318;
|
||||
padding: 11px;
|
||||
}
|
||||
|
||||
.admin-appearance-skin-card-surface i {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
border-radius: var(--r-full);
|
||||
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.admin-appearance-skin-card-copy {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.admin-appearance-skin-card-copy strong {
|
||||
overflow: hidden;
|
||||
font-size: var(--fs-caption);
|
||||
font-weight: 650;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-appearance-skin-card-copy small {
|
||||
overflow: hidden;
|
||||
color: var(--admin-text-muted);
|
||||
font-size: var(--fs-label);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-appearance-skin-card-check {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
display: grid;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
place-items: center;
|
||||
border-radius: var(--r-full);
|
||||
background: var(--btn-solid-bg);
|
||||
color: var(--btn-solid-fg);
|
||||
}
|
||||
|
||||
.admin-appearance-skin-card:not(.is-selected) .admin-appearance-skin-card-check {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.admin-appearance-skin-card-check svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
stroke-width: 2.4;
|
||||
}
|
||||
|
||||
.admin-appearance-skin-library-note {
|
||||
grid-column: 1 / -1;
|
||||
margin: 2px 0 0;
|
||||
color: var(--admin-text-muted);
|
||||
font-size: var(--fs-label);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Editable skin library: one document-style workspace, consistent with the other
|
||||
* admin settings modules. Theme cards select the active draft; edits stay local
|
||||
* until the shared page command bar saves the complete appearance document. */
|
||||
.admin-skin-workspace {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.admin-skin-library-toolbar,
|
||||
.admin-skin-library-toolbar > div,
|
||||
.admin-skin-editor-heading,
|
||||
.admin-skin-mode-bar,
|
||||
.admin-skin-mode-bar > div,
|
||||
.admin-skin-locked-note {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.admin-skin-library-toolbar,
|
||||
.admin-skin-editor-heading,
|
||||
.admin-skin-mode-bar {
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.admin-skin-library-toolbar > div:first-child,
|
||||
.admin-skin-mode-bar > div:first-child,
|
||||
.admin-skin-editor-heading > div {
|
||||
min-width: 0;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.admin-skin-library-toolbar > div:last-child {
|
||||
flex: 0 0 auto;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.admin-skin-library-toolbar strong,
|
||||
.admin-skin-mode-bar strong,
|
||||
.admin-skin-editor-heading strong {
|
||||
color: var(--admin-text-primary);
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.admin-skin-library-toolbar span,
|
||||
.admin-skin-mode-bar span,
|
||||
.admin-skin-editor-heading > div > span {
|
||||
color: var(--admin-text-muted);
|
||||
font-size: 10px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.admin-skin-library {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.admin-skin-card {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--admin-card-border);
|
||||
border-radius: var(--r-lg);
|
||||
background: var(--admin-layer-2);
|
||||
transition:
|
||||
border-color var(--motion-state) ease-out,
|
||||
background-color var(--motion-state) ease-out,
|
||||
transform var(--motion-state) var(--ease-aceternity);
|
||||
}
|
||||
|
||||
.admin-skin-card:hover {
|
||||
border-color: color-mix(in srgb, var(--workspace-accent) 46%, var(--admin-card-border));
|
||||
transform: translateY(calc(-1 * var(--theme-hover-lift)));
|
||||
}
|
||||
|
||||
.admin-skin-card.is-selected {
|
||||
border-color: color-mix(in srgb, var(--workspace-accent) 76%, var(--admin-card-border));
|
||||
background: color-mix(in srgb, var(--workspace-accent) 5%, var(--admin-layer-2));
|
||||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--workspace-accent) 36%, transparent);
|
||||
}
|
||||
|
||||
.admin-skin-card-select {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
grid-template-rows: 68px auto;
|
||||
gap: 10px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 9px 9px 8px;
|
||||
color: var(--admin-text-primary);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.admin-skin-card-select:focus-visible {
|
||||
outline: var(--focus-ring-width) solid color-mix(in srgb, var(--ring) 72%, transparent);
|
||||
outline-offset: -3px;
|
||||
}
|
||||
|
||||
.admin-skin-card-preview {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
border: 1px solid color-mix(in srgb, white 11%, transparent);
|
||||
padding: 9px;
|
||||
}
|
||||
|
||||
.admin-skin-card-preview > span {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 9px;
|
||||
}
|
||||
|
||||
.admin-skin-card-preview i {
|
||||
width: 10px;
|
||||
height: 22px;
|
||||
flex: 0 0 10px;
|
||||
border-radius: var(--r-full);
|
||||
box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14);
|
||||
}
|
||||
|
||||
.admin-skin-card-copy {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 2px;
|
||||
padding-right: 22px;
|
||||
}
|
||||
|
||||
.admin-skin-card-copy strong,
|
||||
.admin-skin-card-copy small {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-skin-card-copy strong {
|
||||
font-size: 12px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.admin-skin-card-copy small {
|
||||
color: var(--admin-text-muted);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.admin-skin-card-check,
|
||||
.admin-skin-card-lock {
|
||||
position: absolute;
|
||||
right: 9px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.admin-skin-card-check {
|
||||
top: 9px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: var(--r-full);
|
||||
background: var(--btn-solid-bg);
|
||||
color: var(--btn-solid-fg);
|
||||
}
|
||||
|
||||
.admin-skin-card-check svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.admin-skin-card-lock {
|
||||
right: 10px;
|
||||
bottom: 45px;
|
||||
width: 14px;
|
||||
color: var(--admin-text-muted);
|
||||
}
|
||||
|
||||
.admin-skin-card-actions {
|
||||
display: flex;
|
||||
min-height: 34px;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 2px;
|
||||
border-top: 1px solid var(--admin-divider);
|
||||
padding: 3px 6px;
|
||||
}
|
||||
|
||||
.admin-skin-delete-button.ant-btn:not(:disabled) {
|
||||
border-color: var(--destructive);
|
||||
background: var(--destructive) !important;
|
||||
color: var(--destructive-foreground);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.admin-skin-delete-button.ant-btn:not(:disabled):hover,
|
||||
.admin-skin-delete-button.ant-btn:not(:disabled):focus-visible {
|
||||
border-color: var(--destructive-hover);
|
||||
background: var(--destructive-hover) !important;
|
||||
color: var(--destructive-foreground) !important;
|
||||
}
|
||||
|
||||
.admin-skin-delete-button.ant-btn:not(:disabled):active {
|
||||
border-color: var(--destructive-active);
|
||||
background: var(--destructive-active) !important;
|
||||
}
|
||||
|
||||
.admin-skin-editor {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
border-top: 1px solid var(--admin-divider);
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.admin-skin-editor-heading > div {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.admin-skin-editor-heading strong {
|
||||
overflow: hidden;
|
||||
max-width: 60ch;
|
||||
font-size: 15px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-skin-locked-note {
|
||||
align-items: flex-start;
|
||||
gap: 9px;
|
||||
border: 1px solid var(--admin-card-border);
|
||||
border-radius: var(--r-md);
|
||||
background: var(--admin-layer-2);
|
||||
padding: 11px 12px;
|
||||
color: var(--admin-text-muted);
|
||||
font-size: 11px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.admin-skin-locked-note svg {
|
||||
flex: 0 0 auto;
|
||||
margin-top: 1px;
|
||||
color: var(--icon-muted);
|
||||
}
|
||||
|
||||
.admin-skin-identity-form {
|
||||
border: 1px solid var(--admin-card-border);
|
||||
border-radius: var(--r-md);
|
||||
background: var(--admin-layer-2);
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.admin-skin-mode-bar {
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.admin-skin-mode-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.admin-skin-mode-label svg {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
}
|
||||
|
||||
.admin-skin-live-preview {
|
||||
border: 1px solid;
|
||||
padding: 16px;
|
||||
transition:
|
||||
background-color var(--motion-state) ease-out,
|
||||
border-color var(--motion-state) ease-out;
|
||||
}
|
||||
|
||||
.admin-skin-live-preview-card {
|
||||
display: grid;
|
||||
min-height: 168px;
|
||||
grid-template-columns: 38px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 9px 12px;
|
||||
border: 1px solid;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.admin-skin-live-preview-icon {
|
||||
display: grid;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.admin-skin-live-preview-icon svg {
|
||||
width: var(--icon-size);
|
||||
height: var(--icon-size);
|
||||
}
|
||||
|
||||
.admin-skin-live-preview-card > div {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.admin-skin-live-preview-card > div strong {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.admin-skin-live-preview-card > div small {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.admin-skin-live-preview-status {
|
||||
padding: 4px 7px;
|
||||
font-size: 10px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.admin-skin-live-preview-menu {
|
||||
display: inline-flex;
|
||||
min-width: 86px;
|
||||
height: 30px;
|
||||
grid-column: 1 / -1;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.admin-skin-live-preview-input,
|
||||
.admin-skin-live-preview-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-style: solid;
|
||||
padding: 0 12px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.admin-skin-live-preview-switches {
|
||||
display: flex;
|
||||
grid-column: 2;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.admin-skin-live-preview-switches > i {
|
||||
position: relative;
|
||||
width: 34px;
|
||||
height: 20px;
|
||||
border-radius: var(--r-full);
|
||||
}
|
||||
|
||||
.admin-skin-live-preview-switches b {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: var(--r-full);
|
||||
box-shadow: 0 1px 2px #00000033;
|
||||
}
|
||||
|
||||
.admin-skin-live-preview-switches > i.is-on b {
|
||||
left: 17px;
|
||||
}
|
||||
|
||||
.admin-skin-live-preview-danger {
|
||||
display: inline-flex;
|
||||
min-width: 58px;
|
||||
height: 28px;
|
||||
grid-column: 3;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 10px;
|
||||
font-size: 10px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.admin-skin-live-preview-input {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.admin-skin-live-preview-button {
|
||||
grid-column: 3;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.admin-skin-live-preview-signals {
|
||||
display: flex;
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.admin-skin-live-preview-signals i {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: var(--r-full);
|
||||
}
|
||||
|
||||
.admin-skin-color-groups {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.admin-skin-token-group {
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--admin-card-border);
|
||||
border-radius: var(--r-md);
|
||||
background: var(--admin-layer-1);
|
||||
}
|
||||
|
||||
.admin-skin-token-group > summary {
|
||||
display: flex;
|
||||
min-height: 46px;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
background: color-mix(in srgb, var(--foreground) 2%, var(--admin-layer-1));
|
||||
padding: 0 14px;
|
||||
}
|
||||
|
||||
.admin-skin-token-group > summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.admin-skin-token-group > summary:focus-visible {
|
||||
outline: var(--focus-ring-width) solid color-mix(in srgb, var(--ring) 68%, transparent);
|
||||
outline-offset: -3px;
|
||||
}
|
||||
|
||||
.admin-skin-token-group > summary span {
|
||||
color: var(--admin-text-primary);
|
||||
font-size: 12px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.admin-skin-token-group > summary small {
|
||||
color: var(--admin-text-muted);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.admin-skin-color-grid,
|
||||
.admin-skin-component-grid {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
border-top: 1px solid var(--admin-divider);
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.admin-skin-color-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.admin-skin-color-field {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 7px;
|
||||
border: 1px solid var(--admin-card-border);
|
||||
border-radius: var(--r-sm);
|
||||
background: var(--admin-layer-2);
|
||||
padding: 9px;
|
||||
}
|
||||
|
||||
.admin-skin-color-field > span:first-child {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.admin-skin-color-field strong {
|
||||
color: var(--admin-text-secondary);
|
||||
font-size: 11px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.admin-skin-color-field small {
|
||||
overflow: hidden;
|
||||
color: var(--admin-text-muted);
|
||||
font-size: 9px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-skin-color-control {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
grid-template-columns: 32px minmax(0, 1fr);
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.admin-skin-color-control input[type="color"] {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--admin-card-border);
|
||||
border-radius: var(--r-sm);
|
||||
background: transparent;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.admin-skin-color-control input[type="color"]::-webkit-color-swatch {
|
||||
border: 0;
|
||||
border-radius: calc(var(--r-sm) - 3px);
|
||||
}
|
||||
|
||||
.admin-skin-component-grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.admin-skin-number-field {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.admin-skin-number-field > span:first-child {
|
||||
color: var(--admin-text-secondary);
|
||||
font-size: 10px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.admin-skin-number-field .ant-input-number,
|
||||
.admin-skin-number-field .ant-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.admin-appearance-load-error,
|
||||
.admin-appearance-loading-card {
|
||||
min-height: 150px;
|
||||
@@ -503,6 +1174,23 @@
|
||||
.admin-appearance-preview {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
.admin-appearance-footer-settings {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.admin-appearance-skin-library {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.admin-skin-library,
|
||||
.admin-skin-color-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.admin-skin-component-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
@@ -538,6 +1226,50 @@
|
||||
grid-column: 1 / -1;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.admin-appearance-form-grid,
|
||||
.admin-appearance-skin-library {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.admin-skin-workspace {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.admin-skin-library-toolbar,
|
||||
.admin-skin-mode-bar,
|
||||
.admin-skin-editor-heading {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.admin-skin-library-toolbar > div:last-child {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.admin-skin-library,
|
||||
.admin-skin-color-grid,
|
||||
.admin-skin-component-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.admin-skin-live-preview-card {
|
||||
grid-template-columns: 38px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.admin-skin-live-preview-status {
|
||||
grid-column: 2;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.admin-skin-live-preview-input,
|
||||
.admin-skin-live-preview-button,
|
||||
.admin-skin-live-preview-switches,
|
||||
.admin-skin-live-preview-danger,
|
||||
.admin-skin-live-preview-menu {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
:is(.admin-drawing-settings, .admin-runtime-policy, .admin-access-settings, .admin-email-settings, .admin-storage-settings, .admin-ark-settings, .admin-intercept-settings, .admin-third-party-settings)
|
||||
@@ -559,10 +1291,10 @@
|
||||
.admin-secondary-drawer,
|
||||
.admin-modal-root,
|
||||
.admin-channel-modal-root {
|
||||
--admin-layer-0: #f3f4f6;
|
||||
--admin-layer-1: #ffffff;
|
||||
--admin-layer-2: #f7f8fa;
|
||||
--admin-layer-3: #eceff3;
|
||||
--admin-layer-0: var(--skin-admin-layer-0, #f3f4f6);
|
||||
--admin-layer-1: var(--skin-admin-layer-1, #ffffff);
|
||||
--admin-layer-2: var(--skin-admin-layer-2, #f7f8fa);
|
||||
--admin-layer-3: var(--skin-admin-layer-3, #eceff3);
|
||||
--admin-sidebar: var(--admin-layer-0);
|
||||
--admin-text-primary: var(--foreground);
|
||||
--admin-text-secondary: color-mix(in srgb, var(--foreground) 72%, transparent);
|
||||
@@ -573,11 +1305,11 @@
|
||||
--admin-card-border: rgba(17, 24, 39, 0.15);
|
||||
--admin-row-border: rgba(17, 24, 39, 0.09);
|
||||
--admin-row-hover: #f3f5f7;
|
||||
--admin-card-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
|
||||
--admin-status-success: oklch(0.52 0.14 155);
|
||||
--admin-status-warning: oklch(0.62 0.14 78);
|
||||
--admin-status-error: var(--destructive);
|
||||
--admin-status-info: var(--foreground);
|
||||
--admin-card-shadow: var(--theme-admin-card-shadow, 0 1px 2px rgba(17, 24, 39, 0.04));
|
||||
--admin-status-success: var(--palette-status-success);
|
||||
--admin-status-warning: var(--palette-status-warning);
|
||||
--admin-status-error: var(--palette-status-error);
|
||||
--admin-status-info: var(--palette-status-loading);
|
||||
--admin-chart-primary: var(--workspace-accent);
|
||||
--admin-chart-secondary: oklch(0.55 0.11 180);
|
||||
--admin-chart-warning: oklch(0.64 0.14 78);
|
||||
@@ -589,10 +1321,10 @@
|
||||
.dark .admin-secondary-drawer,
|
||||
.dark .admin-modal-root,
|
||||
.dark .admin-channel-modal-root {
|
||||
--admin-layer-0: #111315;
|
||||
--admin-layer-1: #1a1d20;
|
||||
--admin-layer-2: #22262a;
|
||||
--admin-layer-3: #2b3035;
|
||||
--admin-layer-0: var(--skin-admin-layer-0, #111315);
|
||||
--admin-layer-1: var(--skin-admin-layer-1, #1a1d20);
|
||||
--admin-layer-2: var(--skin-admin-layer-2, #22262a);
|
||||
--admin-layer-3: var(--skin-admin-layer-3, #2b3035);
|
||||
--admin-sidebar: var(--admin-layer-0);
|
||||
--admin-text-primary: var(--foreground);
|
||||
--admin-text-secondary: color-mix(in srgb, var(--foreground) 74%, transparent);
|
||||
@@ -603,10 +1335,11 @@
|
||||
--admin-card-border: rgba(255, 255, 255, 0.16);
|
||||
--admin-row-border: rgba(255, 255, 255, 0.085);
|
||||
--admin-row-hover: #252a2f;
|
||||
--admin-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
|
||||
--admin-status-success: oklch(0.72 0.14 155);
|
||||
--admin-status-warning: oklch(0.78 0.14 78);
|
||||
--admin-status-info: var(--foreground);
|
||||
--admin-card-shadow: var(--theme-admin-card-shadow, 0 1px 2px rgba(0, 0, 0, 0.32));
|
||||
--admin-status-success: var(--palette-status-success);
|
||||
--admin-status-warning: var(--palette-status-warning);
|
||||
--admin-status-error: var(--palette-status-error);
|
||||
--admin-status-info: var(--palette-status-loading);
|
||||
--admin-chart-secondary: oklch(0.72 0.11 180);
|
||||
--admin-chart-warning: oklch(0.78 0.14 78);
|
||||
}
|
||||
@@ -680,7 +1413,7 @@
|
||||
position: relative;
|
||||
height: 34px !important;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--menu-radius);
|
||||
color: color-mix(in srgb, var(--foreground) 82%, transparent);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
@@ -1988,22 +2721,14 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-feature-availability {
|
||||
--control-switch-checked-bg: var(--admin-status-success);
|
||||
--control-switch-checked-hover-bg: color-mix(in srgb, var(--admin-status-success) 86%, var(--admin-text-primary));
|
||||
--control-switch-checked-handle: #fff;
|
||||
--control-switch-off-bg: color-mix(in srgb, var(--admin-text-muted) 34%, var(--admin-layer-2));
|
||||
--control-switch-off-hover-bg: color-mix(in srgb, var(--admin-text-muted) 44%, var(--admin-layer-2));
|
||||
}
|
||||
|
||||
.admin-feature-availability .ant-switch:not(.ant-switch-checked) {
|
||||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground) 16%, transparent);
|
||||
}
|
||||
|
||||
.admin-feature-availability .ant-switch.ant-switch-checked {
|
||||
box-shadow:
|
||||
inset 0 0 0 1px color-mix(in srgb, var(--admin-status-success) 62%, var(--foreground)),
|
||||
0 0 0 2px color-mix(in srgb, var(--admin-status-success) 13%, transparent);
|
||||
inset 0 0 0 1px color-mix(in srgb, var(--control-switch-checked-bg) 70%, var(--foreground)),
|
||||
0 0 0 2px color-mix(in srgb, var(--control-switch-checked-bg) 15%, transparent);
|
||||
}
|
||||
|
||||
.admin-feature-board-row.is-dependent .admin-feature-board-row-select {
|
||||
|
||||
+170
-47
@@ -44,10 +44,10 @@
|
||||
--palette-node-skill: oklch(0.7 0.17 55); /* 橙色 400 — 技能 */
|
||||
|
||||
/* 状态色（用 --palette- 前缀避免循环引用）*/
|
||||
--palette-status-success: oklch(0.7 0.17 155);
|
||||
--palette-status-error: oklch(0.65 0.22 25);
|
||||
--palette-status-loading: oklch(0.62 0.18 250);
|
||||
--palette-status-warning: oklch(0.75 0.15 85);
|
||||
--palette-status-success: #16a34a;
|
||||
--palette-status-error: #dc2626;
|
||||
--palette-status-loading: #2563eb;
|
||||
--palette-status-warning: #d97706;
|
||||
|
||||
/* --- 2. 间距（4px 栅格 + 半距）--- */
|
||||
--space-0: 0px;
|
||||
@@ -177,12 +177,15 @@
|
||||
--control-selected-border: rgba(17, 17, 17, 0.18);
|
||||
--control-check-bg: #171717;
|
||||
--control-check-fg: #ffffff;
|
||||
--control-switch-checked-bg: #171717;
|
||||
--control-switch-checked-hover-bg: #303030;
|
||||
--control-switch-checked-bg: #16a34a;
|
||||
--control-switch-checked-hover-bg: #15803d;
|
||||
--control-switch-checked-handle: #ffffff;
|
||||
--control-switch-off-bg: rgba(17, 17, 17, 0.22);
|
||||
--control-switch-off-hover-bg: rgba(17, 17, 17, 0.3);
|
||||
--control-switch-off-bg: #b8b8b8;
|
||||
--control-switch-off-hover-bg: #9f9f9f;
|
||||
--control-switch-off-handle: #ffffff;
|
||||
--destructive-hover: #b91c1c;
|
||||
--destructive-active: #991b1b;
|
||||
--destructive-foreground: #ffffff;
|
||||
--control-disabled-bg: rgba(17, 17, 17, 0.05);
|
||||
--control-disabled-fg: rgba(17, 17, 17, 0.36);
|
||||
--control-focus-ring: color-mix(in srgb, var(--ring) 72%, transparent);
|
||||
@@ -255,6 +258,30 @@
|
||||
--glass-alpha: 0.94;
|
||||
--glass-alpha-strong: 0.97;
|
||||
--glass-border-alpha: 0.78;
|
||||
|
||||
/* 站点皮肤对登录页的组件级入口；经典皮肤保持原始值。 */
|
||||
--auth-page-bg: #08090c;
|
||||
--auth-panel-bg: #0b0c10;
|
||||
--auth-card-bg: rgba(18, 19, 24, 0.94);
|
||||
--auth-accent: rgba(147, 197, 253, 0.8);
|
||||
--auth-muted: rgba(255, 255, 255, 0.45);
|
||||
|
||||
/* 可配置皮肤的组件入口。经典主题保持这些项目原始值；自定义主题在
|
||||
React 启动前由公开外观配置覆盖，页面和组件只消费这些语义变量。 */
|
||||
--icon-foreground: #3f3f46;
|
||||
--icon-muted: #a1a1aa;
|
||||
--icon-active: #171717;
|
||||
--control-radius: 6px;
|
||||
--button-radius: 6px;
|
||||
--input-radius: 6px;
|
||||
--card-radius: 12px;
|
||||
--overlay-radius: 12px;
|
||||
--menu-radius: 8px;
|
||||
--checkbox-radius: 4px;
|
||||
--control-border-width: 1px;
|
||||
--focus-ring-width: 2px;
|
||||
--icon-size: 16px;
|
||||
--theme-hover-lift: 1px;
|
||||
}
|
||||
|
||||
/* prefers-reduced-motion 降级（对应 #99 三级降级策略 L1）*/
|
||||
@@ -294,6 +321,100 @@
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.auth-scene {
|
||||
background: var(--auth-page-bg);
|
||||
}
|
||||
|
||||
.auth-scene-form-pane {
|
||||
background: var(--auth-panel-bg);
|
||||
}
|
||||
|
||||
.auth-scene-video-blend {
|
||||
background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--auth-panel-bg) 68%, transparent) 58%, var(--auth-panel-bg) 100%);
|
||||
}
|
||||
|
||||
.auth-scene-card {
|
||||
background: var(--auth-card-bg);
|
||||
box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
|
||||
}
|
||||
|
||||
.auth-scene-eyebrow {
|
||||
color: var(--auth-accent);
|
||||
}
|
||||
|
||||
.auth-scene-muted {
|
||||
color: var(--auth-muted);
|
||||
}
|
||||
|
||||
.auth-scene-return {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: rgba(255, 255, 255, 0.58);
|
||||
}
|
||||
|
||||
.auth-scene-return:hover {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.site-compliance-footer {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
color: color-mix(in srgb, var(--foreground) 48%, transparent);
|
||||
font-size: var(--fs-label);
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.site-compliance-footer a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: color var(--motion-instant) ease-out;
|
||||
}
|
||||
|
||||
.site-compliance-footer a:hover,
|
||||
.site-compliance-footer a:focus-visible {
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.site-compliance-footer a:focus-visible {
|
||||
outline: 1px solid color-mix(in srgb, var(--ring) 68%, transparent);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.site-compliance-footer svg {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
|
||||
.site-compliance-footer.is-auth {
|
||||
min-height: 54px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: color-mix(in srgb, var(--auth-panel-bg) 88%, transparent);
|
||||
color: rgba(255, 255, 255, 0.48);
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.site-compliance-footer.is-auth a:hover,
|
||||
.site-compliance-footer.is-auth a:focus-visible {
|
||||
color: rgba(255, 255, 255, 0.86);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.site-compliance-footer {
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 动效计算函数（实际 duration = base * motion-scale）*/
|
||||
:root {
|
||||
--motion-dur-instant-calc: calc(var(--motion-dur-instant) * var(--motion-scale));
|
||||
@@ -507,7 +628,7 @@
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--destructive: #dc2626;
|
||||
--input: oklch(0.922 0 0);
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
@@ -541,7 +662,14 @@
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--destructive: #f87171;
|
||||
--destructive-hover: #fca5a5;
|
||||
--destructive-active: #ef4444;
|
||||
--destructive-foreground: #2b0808;
|
||||
--palette-status-success: #4ade80;
|
||||
--palette-status-error: #f87171;
|
||||
--palette-status-loading: #60a5fa;
|
||||
--palette-status-warning: #fbbf24;
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--workspace-canvas: var(--background);
|
||||
--workspace-page: var(--workspace-canvas);
|
||||
@@ -679,11 +807,11 @@
|
||||
--control-selected-border: rgba(255, 255, 255, 0.18);
|
||||
--control-check-bg: #f5f5f5;
|
||||
--control-check-fg: #131313;
|
||||
--control-switch-checked-bg: #f5f5f5;
|
||||
--control-switch-checked-hover-bg: #ffffff;
|
||||
--control-switch-checked-handle: #131313;
|
||||
--control-switch-off-bg: rgba(255, 255, 255, 0.22);
|
||||
--control-switch-off-hover-bg: rgba(255, 255, 255, 0.3);
|
||||
--control-switch-checked-bg: #22c55e;
|
||||
--control-switch-checked-hover-bg: #4ade80;
|
||||
--control-switch-checked-handle: #071a0f;
|
||||
--control-switch-off-bg: #525252;
|
||||
--control-switch-off-hover-bg: #686868;
|
||||
--control-switch-off-handle: #f5f5f5;
|
||||
--control-disabled-bg: rgba(255, 255, 255, 0.06);
|
||||
--control-disabled-fg: rgba(255, 255, 255, 0.38);
|
||||
@@ -693,13 +821,13 @@
|
||||
Layer 3: Component — 引用 Semantic，某组件专属
|
||||
------------------------------------------------------------------------- */
|
||||
:root {
|
||||
/* 插件可用性开关：状态色只服务插件页，不改变其他设置开关的中性语义。 */
|
||||
--plugin-switch-checked-bg: #15803d;
|
||||
--plugin-switch-checked-hover-bg: #16a34a;
|
||||
--plugin-switch-checked-handle: #ffffff;
|
||||
--plugin-switch-off-bg: #d4d4d8;
|
||||
--plugin-switch-off-hover-bg: #a1a1aa;
|
||||
--plugin-switch-off-handle: #52525b;
|
||||
/* 插件页也消费统一的主题开关合同，不再维护一套脱离主题的固定色。 */
|
||||
--plugin-switch-checked-bg: var(--control-switch-checked-bg);
|
||||
--plugin-switch-checked-hover-bg: var(--control-switch-checked-hover-bg);
|
||||
--plugin-switch-checked-handle: var(--control-switch-checked-handle);
|
||||
--plugin-switch-off-bg: var(--control-switch-off-bg);
|
||||
--plugin-switch-off-hover-bg: var(--control-switch-off-hover-bg);
|
||||
--plugin-switch-off-handle: var(--control-switch-off-handle);
|
||||
|
||||
/* Library 卡片组件：所有作品库共用同一表面和状态合同。 */
|
||||
--library-surface: var(--card-surface);
|
||||
@@ -833,15 +961,6 @@
|
||||
--flow-step-current-glow: 0 0 0 4px var(--cn-active-stroke-soft); /* 当前节点光晕 */
|
||||
}
|
||||
|
||||
.dark {
|
||||
--plugin-switch-checked-bg: #16a34a;
|
||||
--plugin-switch-checked-hover-bg: #22c55e;
|
||||
--plugin-switch-checked-handle: #ffffff;
|
||||
--plugin-switch-off-bg: #3f3f46;
|
||||
--plugin-switch-off-hover-bg: #52525b;
|
||||
--plugin-switch-off-handle: #f4f4f5;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
@@ -1886,6 +2005,9 @@
|
||||
这里是全应用唯一的状态配对层，确保任何容器和 Portal 中都保持对比。 */
|
||||
:where(.ant-switch.ant-switch-checked) {
|
||||
background: var(--control-switch-checked-bg) !important;
|
||||
box-shadow:
|
||||
inset 0 0 0 1px color-mix(in srgb, var(--control-switch-checked-bg) 70%, var(--foreground)),
|
||||
0 0 0 2px color-mix(in srgb, var(--control-switch-checked-bg) 15%, transparent);
|
||||
}
|
||||
|
||||
:where(.ant-switch.ant-switch-checked:not(.ant-switch-disabled)):hover {
|
||||
@@ -1898,6 +2020,7 @@
|
||||
|
||||
:where(.ant-switch:not(.ant-switch-checked)) {
|
||||
background: var(--control-switch-off-bg) !important;
|
||||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground) 18%, transparent);
|
||||
}
|
||||
|
||||
:where(.ant-switch:not(.ant-switch-checked):not(.ant-switch-disabled)):hover {
|
||||
@@ -2401,8 +2524,8 @@
|
||||
}
|
||||
|
||||
.creation-submit-button.is-stopping {
|
||||
background: #c84646;
|
||||
color: white;
|
||||
background: var(--destructive);
|
||||
color: var(--destructive-foreground);
|
||||
}
|
||||
|
||||
.creation-new-button:focus-visible,
|
||||
@@ -3421,10 +3544,10 @@
|
||||
.creation-message-mark svg { width: 18px; height: 18px; }
|
||||
.creation-message-model { max-width: min(400px, 48vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.creation-message-state { border-radius: 6px; background: rgba(255, 255, 255, .08); padding: 3px 6px; color: var(--creation-muted); }
|
||||
.creation-message-state.is-error { background: rgba(185, 61, 61, .18); color: #ec7474; }
|
||||
.creation-message-state.is-error { background: color-mix(in srgb, var(--palette-status-error) 18%, transparent); color: var(--palette-status-error); }
|
||||
.creation-message-content { padding: 14px 0 0 42px; color: var(--creation-text); font-size: 15px; line-height: 1.8; }
|
||||
.creation-message-content > span { color: var(--creation-muted); }
|
||||
.creation-message-error { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 15px 0 0 42px; color: #ef5350; font-size: 14px; line-height: 1.6; }
|
||||
.creation-message-error { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 15px 0 0 42px; color: var(--palette-status-error); font-size: 14px; line-height: 1.6; }
|
||||
.creation-message-error button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 8px; background: rgba(255, 255, 255, .06); color: var(--creation-text); padding: 6px 9px; font-size: 12px; transition: background-color 140ms ease; }
|
||||
.creation-message-error button:hover { background: rgba(255, 255, 255, .11); }
|
||||
.creation-message-error button svg { width: 14px; height: 14px; }
|
||||
@@ -5084,7 +5207,7 @@
|
||||
backdrop-filter: blur(8px);
|
||||
transition: background-color 180ms ease-out, color 180ms ease-out, transform 180ms var(--motion-ease-out);
|
||||
}
|
||||
.project-library-cover-delete:hover { background: rgba(190, 30, 30, 0.82); color: #ffffff; transform: scale(1.06); }
|
||||
.project-library-cover-delete:hover { background: color-mix(in srgb, var(--destructive) 86%, transparent); color: var(--destructive-foreground); transform: scale(1.06); }
|
||||
.project-library-cover-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-md); background: var(--project-library-icon-surface); color: color-mix(in srgb, var(--foreground) 58%, transparent); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); }
|
||||
.project-library-cover-icon svg { width: 26px; height: 26px; }
|
||||
.project-library-cover-ratio, .project-library-cover-stage { position: absolute; z-index: 2; bottom: 14px; border-radius: var(--r-full); background: color-mix(in srgb, var(--background) 62%, transparent); padding: 5px 10px; color: color-mix(in srgb, var(--foreground) 74%, transparent); font-size: var(--fs-tiny); backdrop-filter: blur(8px); }
|
||||
@@ -10892,9 +11015,9 @@ html:not(.dark) .creation-user-message-reference { background: rgba(28, 32, 37,
|
||||
|
||||
.creation-message-content { max-width: 800px; padding: 14px 0 0 34px; color: var(--creation-text); font-size: 15px; line-height: 1.8; }
|
||||
|
||||
.creation-message-error { display: flex; max-width: 760px; align-items: center; gap: 10px; padding: 16px 0 0 34px; color: #ee8585; font-size: 13px; line-height: 1.6; }
|
||||
.creation-message-error button { display: inline-flex; height: 28px; align-items: center; gap: 5px; border: 0; border-radius: 6px; background: rgba(226, 96, 96, .12); color: #ef8b8b; padding: 0 8px; font-size: 11px; }
|
||||
.creation-message-error button:hover { background: rgba(226, 96, 96, .2); }
|
||||
.creation-message-error { display: flex; max-width: 760px; align-items: center; gap: 10px; padding: 16px 0 0 34px; color: var(--palette-status-error); font-size: 13px; line-height: 1.6; }
|
||||
.creation-message-error button { display: inline-flex; height: 28px; align-items: center; gap: 5px; border: 0; border-radius: 6px; background: color-mix(in srgb, var(--palette-status-error) 12%, transparent); color: var(--palette-status-error); padding: 0 8px; font-size: 11px; }
|
||||
.creation-message-error button:hover { background: color-mix(in srgb, var(--palette-status-error) 20%, transparent); }
|
||||
|
||||
.creation-media-pending,
|
||||
.creation-media-empty { display: inline-flex; min-height: 42px; align-items: center; gap: 8px; margin: 14px 0 0 34px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .055); padding: 0 12px; color: var(--creation-muted); font-size: 12px; }
|
||||
@@ -14839,7 +14962,7 @@ html:not(.dark) .creation-history-drawer-root {
|
||||
.creation-home .storyboard-workbench-rail-row-shot { color: var(--creation-text); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; font-weight: 560; }
|
||||
.creation-home .storyboard-workbench-rail-row-state { border-radius: 999px; background: rgba(148, 163, 184, .18); color: var(--creation-muted); padding: 1px 7px; font-size: var(--fs-micro); letter-spacing: .04em; white-space: nowrap; }
|
||||
.creation-home .storyboard-workbench-rail-row-state.is-pending { background: rgba(148, 163, 184, .22); }
|
||||
.creation-home .storyboard-workbench-rail-row-state.is-error { background: color-mix(in srgb, #ef5350 14%, transparent); color: #ef5350; }
|
||||
.creation-home .storyboard-workbench-rail-row-state.is-error { background: color-mix(in srgb, var(--palette-status-error) 14%, transparent); color: var(--palette-status-error); }
|
||||
.creation-home .storyboard-workbench-rail-row-state.is-done { background: rgba(148, 163, 184, .28); color: var(--creation-text); }
|
||||
.creation-home .storyboard-workbench-rail-row-title { overflow: hidden; color: var(--creation-text); font-size: var(--fs-body); text-overflow: ellipsis; white-space: nowrap; }
|
||||
.creation-home .storyboard-workbench-rail-row.is-draft .storyboard-workbench-rail-row-title { color: inherit; }
|
||||
@@ -14913,7 +15036,7 @@ html:not(.dark) .creation-home .storyboard-workbench-bar-action:hover { backgrou
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.creation-home .storyboard-workbench-card.is-error { background: color-mix(in srgb, #ef5350 6%, var(--creation-surface)); }
|
||||
.creation-home .storyboard-workbench-card.is-error { background: color-mix(in srgb, var(--palette-status-error) 6%, var(--creation-surface)); }
|
||||
|
||||
.creation-home .storyboard-workbench-card-head {
|
||||
display: flex;
|
||||
@@ -14983,7 +15106,7 @@ html:not(.dark) .creation-home .storyboard-workbench-bar-action:hover { backgrou
|
||||
|
||||
.creation-home .storyboard-workbench-card-state svg { width: 12px; height: 12px; }
|
||||
.creation-home .storyboard-workbench-card-state.is-pending { background: color-mix(in srgb, var(--creation-accent) 12%, transparent); color: var(--creation-accent); }
|
||||
.creation-home .storyboard-workbench-card-state.is-error { background: color-mix(in srgb, #ef5350 12%, transparent); color: #ef5350; }
|
||||
.creation-home .storyboard-workbench-card-state.is-error { background: color-mix(in srgb, var(--palette-status-error) 12%, transparent); color: var(--palette-status-error); }
|
||||
.creation-home .storyboard-workbench-card-state.is-done { background: color-mix(in srgb, var(--creation-text) 8%, transparent); color: var(--creation-muted); }
|
||||
|
||||
.creation-home .storyboard-workbench-card-actions {
|
||||
@@ -15076,9 +15199,9 @@ html:not(.dark) .creation-home .storyboard-workbench-bar-action:hover { backgrou
|
||||
gap: 10px;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
background: color-mix(in srgb, #ef5350 7%, transparent);
|
||||
background: color-mix(in srgb, var(--palette-status-error) 7%, transparent);
|
||||
padding: 13px 15px;
|
||||
color: #ef8b8b;
|
||||
color: var(--palette-status-error);
|
||||
font-size: var(--fs-caption);
|
||||
line-height: 1.6;
|
||||
}
|
||||
@@ -15090,14 +15213,14 @@ html:not(.dark) .creation-home .storyboard-workbench-bar-action:hover { backgrou
|
||||
gap: 5px;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
background: color-mix(in srgb, #ef5350 14%, transparent);
|
||||
color: #ef8b8b;
|
||||
background: color-mix(in srgb, var(--palette-status-error) 14%, transparent);
|
||||
color: var(--palette-status-error);
|
||||
padding: 0 9px;
|
||||
font-size: var(--fs-label);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.creation-home .storyboard-workbench-error button:hover { background: color-mix(in srgb, #ef5350 24%, transparent); }
|
||||
.creation-home .storyboard-workbench-error button:hover { background: color-mix(in srgb, var(--palette-status-error) 24%, transparent); }
|
||||
.creation-home .storyboard-workbench-error svg { width: 13px; height: 13px; }
|
||||
.creation-home .storyboard-workbench-text { max-width: none; padding: 0; }
|
||||
|
||||
|
||||
Reference in new issue
Block a user