feat(admin): refine theme settings UI
This commit is contained in:
+116
-110
@@ -4,9 +4,23 @@
|
||||
}
|
||||
|
||||
#aksrt-admin-app {
|
||||
--aksrt-color-primary: #18A058;
|
||||
--aksrt-color-primary-hover: #36AD6A;
|
||||
--aksrt-color-primary-pressed: #0C7A43;
|
||||
--aksrt-color-primary-soft: #EAF7EF;
|
||||
--aksrt-color-canvas: #F5F7F6;
|
||||
--aksrt-color-surface: #FFFFFF;
|
||||
--aksrt-color-text: #1F2923;
|
||||
--aksrt-color-text-secondary: #465149;
|
||||
--aksrt-color-muted: #6F7A72;
|
||||
--aksrt-color-border: #E2E8E3;
|
||||
--aksrt-color-border-strong: #CCD7CE;
|
||||
--aksrt-shadow-card: 0 1px 2px rgba(31, 41, 35, .04);
|
||||
--aksrt-shadow-floating: 0 12px 32px rgba(31, 41, 35, .12);
|
||||
min-height: 100%;
|
||||
color: #333;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
|
||||
color: var(--aksrt-color-text);
|
||||
background: var(--aksrt-color-canvas);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
@@ -37,125 +51,100 @@
|
||||
|
||||
#aksrt-admin-app .aksrt-admin-layout {
|
||||
min-height: 100vh;
|
||||
background: rgb(249, 250, 252);
|
||||
background: var(--aksrt-color-canvas);
|
||||
}
|
||||
|
||||
#aksrt-admin-app .aksrt-csf-shell .n-layout-sider {
|
||||
background: #fff;
|
||||
border-right: 1px solid #f2f2f2;
|
||||
#aksrt-admin-app .aksrt-admin-sider {
|
||||
background: var(--aksrt-color-surface);
|
||||
border-right: 1px solid var(--aksrt-color-border);
|
||||
}
|
||||
|
||||
#aksrt-admin-app .aksrt-csf-shell .n-menu-item-content {
|
||||
border-bottom: 1px solid #f4f4f4;
|
||||
border-radius: 0;
|
||||
#aksrt-admin-app .aksrt-admin-sider .n-layout-toggle-button {
|
||||
border: 1px solid var(--aksrt-color-border);
|
||||
background: var(--aksrt-color-surface);
|
||||
color: var(--aksrt-color-muted);
|
||||
box-shadow: var(--aksrt-shadow-card);
|
||||
}
|
||||
|
||||
#aksrt-admin-app .aksrt-csf-shell .n-menu-item-content--selected,
|
||||
#aksrt-admin-app .aksrt-csf-shell .n-menu-item-content:hover {
|
||||
color: #0997f5;
|
||||
background: rgb(249, 250, 252);
|
||||
#aksrt-admin-app .aksrt-admin-sider .n-layout-toggle-button:hover {
|
||||
border-color: var(--aksrt-color-primary);
|
||||
color: var(--aksrt-color-primary);
|
||||
}
|
||||
|
||||
#aksrt-admin-app .aksrt-schema-page {
|
||||
max-width: none;
|
||||
#aksrt-admin-app .aksrt-admin-menu {
|
||||
padding: 10px 8px 18px;
|
||||
}
|
||||
|
||||
#aksrt-admin-app .aksrt-form-renderer__header {
|
||||
margin: -30px -30px 0;
|
||||
padding: 18px 30px;
|
||||
border-bottom: 1px solid #eee;
|
||||
background: #fff;
|
||||
#aksrt-admin-app .aksrt-admin-menu .n-menu-item-content {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
transition: color .16s ease, background-color .16s ease;
|
||||
}
|
||||
|
||||
#aksrt-admin-app .aksrt-form-renderer__title {
|
||||
color: #0991f5;
|
||||
font-size: 19px;
|
||||
#aksrt-admin-app .aksrt-admin-menu .n-menu-item-content--selected::after {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
bottom: 9px;
|
||||
left: 0;
|
||||
width: 3px;
|
||||
border-radius: 0 3px 3px 0;
|
||||
background: var(--aksrt-color-primary);
|
||||
content: '';
|
||||
}
|
||||
|
||||
#aksrt-admin-app .aksrt-field-group {
|
||||
margin: 0 -30px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
#aksrt-admin-app .aksrt-admin-menu .n-submenu-children {
|
||||
margin: 2px 0 6px;
|
||||
}
|
||||
|
||||
#aksrt-admin-app .aksrt-field-group__body {
|
||||
padding: 0;
|
||||
#aksrt-admin-app .aksrt-admin-menu .n-menu-item-content-header {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#aksrt-admin-app .aksrt-field {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(150px, 22%) minmax(0, 1fr);
|
||||
column-gap: 24px;
|
||||
align-items: start;
|
||||
margin: 0;
|
||||
padding: 20px 30px;
|
||||
border-bottom: 1px solid #eee;
|
||||
#aksrt-admin-app .aksrt-menu-item--secondary .n-menu-item-content-header {
|
||||
color: var(--aksrt-color-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#aksrt-admin-app .aksrt-field > :not(.aksrt-field__label-row):not(.aksrt-field__desc):not(.aksrt-field__error) {
|
||||
grid-column: 2;
|
||||
#aksrt-admin-app .aksrt-admin-content {
|
||||
background: var(--aksrt-color-canvas);
|
||||
}
|
||||
|
||||
#aksrt-admin-app .aksrt-field__label-row {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
|
||||
#aksrt-admin-app .aksrt-field__label {
|
||||
color: #0991f5;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#aksrt-admin-app .aksrt-field__desc {
|
||||
grid-column: 1;
|
||||
margin: 26px 0 0;
|
||||
}
|
||||
|
||||
#aksrt-admin-app .aksrt-field--notice {
|
||||
display: block;
|
||||
padding-top: 14px;
|
||||
padding-bottom: 14px;
|
||||
background: #fff8e5;
|
||||
}
|
||||
|
||||
#aksrt-admin-app .aksrt-field__fieldset .aksrt-field,
|
||||
#aksrt-admin-app .aksrt-field__repeater .aksrt-field,
|
||||
#aksrt-admin-app .aksrt-field__sortable .aksrt-field {
|
||||
padding: 12px 0;
|
||||
border-bottom-color: #eee;
|
||||
}
|
||||
|
||||
#aksrt-admin-app .aksrt-field__repeater-item,
|
||||
#aksrt-admin-app .aksrt-field__fieldset {
|
||||
border-radius: 2px;
|
||||
background: #fff;
|
||||
#aksrt-admin-app .aksrt-schema-page,
|
||||
#aksrt-admin-app .aksrt-page-container,
|
||||
#aksrt-admin-app .content-page {
|
||||
width: 100%;
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#aksrt-admin-app .aksrt-form-renderer__save-bar {
|
||||
right: 28px;
|
||||
left: auto;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-top: 1px solid #f2f2f2;
|
||||
width: min(1180px, calc(100vw - 448px));
|
||||
border: 1px solid var(--aksrt-color-border);
|
||||
border-bottom: 0;
|
||||
border-radius: 12px 12px 0 0;
|
||||
background: rgba(255, 255, 255, .96);
|
||||
box-shadow: var(--aksrt-shadow-floating);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
#aksrt-admin-app .aksrt-form-renderer__save-bar__inner {
|
||||
max-width: 1180px;
|
||||
}
|
||||
|
||||
#aksrt-admin-app .aksrt-form-renderer__save-bar .n-button--primary-type {
|
||||
border-radius: 30px;
|
||||
background-image: linear-gradient(135deg, #65bff7 10%, #0d67b9 100%);
|
||||
box-shadow: -1px 2px 10px rgba(1, 65, 139, .3);
|
||||
box-shadow: 0 4px 12px rgba(24, 160, 88, .18);
|
||||
}
|
||||
|
||||
#aksrt-admin-app .aksrt-page-container,
|
||||
#aksrt-admin-app .content-page {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
#aksrt-admin-app :where(a, button, input, textarea, select, [tabindex]):focus-visible {
|
||||
outline: 2px solid var(--aksrt-color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
#aksrt-admin-app .aksrt-page-title {
|
||||
margin: 0 0 12px;
|
||||
color: #1a1a2e;
|
||||
color: var(--aksrt-color-text);
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
@@ -163,7 +152,7 @@
|
||||
|
||||
#aksrt-admin-app .aksrt-page-desc {
|
||||
margin: 0 0 24px;
|
||||
color: #7a7f8a;
|
||||
color: var(--aksrt-color-muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
@@ -171,8 +160,9 @@
|
||||
#aksrt-admin-app .aksrt-section-card {
|
||||
margin-bottom: 18px;
|
||||
border-radius: 12px !important;
|
||||
border: 1px solid #eceff5 !important;
|
||||
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
|
||||
border: 1px solid var(--aksrt-color-border) !important;
|
||||
background: var(--aksrt-color-surface);
|
||||
box-shadow: var(--aksrt-shadow-card);
|
||||
}
|
||||
|
||||
#aksrt-admin-app .aksrt-section-card .n-card__content {
|
||||
@@ -192,7 +182,7 @@
|
||||
|
||||
#aksrt-admin-app .aksrt-section-header h3 {
|
||||
margin: 0;
|
||||
color: #1a1a2e;
|
||||
color: var(--aksrt-color-text);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -207,7 +197,7 @@
|
||||
|
||||
#aksrt-admin-app .section-desc,
|
||||
#aksrt-admin-app .aksrt-hint-text {
|
||||
color: #8a909c;
|
||||
color: var(--aksrt-color-muted);
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
@@ -225,7 +215,7 @@
|
||||
}
|
||||
|
||||
#aksrt-admin-app .aksrt-form .n-form-item-label {
|
||||
color: #555 !important;
|
||||
color: var(--aksrt-color-text-secondary) !important;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -233,8 +223,8 @@
|
||||
#aksrt-admin-app .aksrt-form .n-input,
|
||||
#aksrt-admin-app .aksrt-form .n-select .n-base-selection,
|
||||
#aksrt-admin-app .aksrt-form .n-input-number {
|
||||
min-height: 38px;
|
||||
--n-height: 38px !important;
|
||||
min-height: 36px;
|
||||
--n-height: 36px !important;
|
||||
}
|
||||
|
||||
#aksrt-admin-app .aksrt-form .n-input--textarea textarea {
|
||||
@@ -253,7 +243,7 @@
|
||||
gap: 12px;
|
||||
padding: 24px 0 8px;
|
||||
margin-top: 28px;
|
||||
border-top: 1px solid #eef1f6;
|
||||
border-top: 1px solid var(--aksrt-color-border);
|
||||
}
|
||||
|
||||
#aksrt-admin-app .aksrt-form-actions .n-button {
|
||||
@@ -278,7 +268,7 @@
|
||||
}
|
||||
|
||||
#aksrt-admin-app .n-data-table .n-data-table-th {
|
||||
background: #f8fafc;
|
||||
background: #f7f9f7;
|
||||
}
|
||||
|
||||
#aksrt-admin-app .n-empty {
|
||||
@@ -326,7 +316,7 @@
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #1a1a2e;
|
||||
color: var(--aksrt-color-text);
|
||||
}
|
||||
|
||||
/* ==================== 过渡 ==================== */
|
||||
@@ -351,6 +341,25 @@
|
||||
max-width: 520px;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
#aksrt-admin-app .aksrt-form-renderer__save-bar {
|
||||
right: 0;
|
||||
left: 0;
|
||||
width: auto;
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#aksrt-admin-app .aksrt-page-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#aksrt-admin-app .aksrt-admin-menu {
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==================== 移动端适配 ==================== */
|
||||
@media (max-width: 768px) {
|
||||
/* 容器 */
|
||||
@@ -360,20 +369,6 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#aksrt-admin-app .aksrt-form-renderer__header {
|
||||
margin: -14px -12px 0;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
#aksrt-admin-app .aksrt-field-group {
|
||||
margin: 0 -12px;
|
||||
}
|
||||
|
||||
#aksrt-admin-app .aksrt-field {
|
||||
display: block;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
#aksrt-admin-app .aksrt-field__desc {
|
||||
margin: 2px 0 8px;
|
||||
}
|
||||
@@ -527,3 +522,14 @@
|
||||
padding: 12px 12px 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
#aksrt-admin-app *,
|
||||
#aksrt-admin-app *::before,
|
||||
#aksrt-admin-app *::after {
|
||||
scroll-behavior: auto !important;
|
||||
animation-duration: .01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: .01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user