feat(admin): rebuild page display settings

assets/admin/src/style.css

@@ -37,7 +37,114 @@
 
 #aksrt-admin-app .aksrt-admin-layout {
   min-height: 100vh;
-  background: #f5f7fb;
+  background: rgb(249, 250, 252);
+}
+
+#aksrt-admin-app .aksrt-csf-shell .n-layout-sider {
+  background: #fff;
+  border-right: 1px solid #f2f2f2;
+}
+
+#aksrt-admin-app .aksrt-csf-shell .n-menu-item-content {
+  border-bottom: 1px solid #f4f4f4;
+  border-radius: 0;
+}
+
+#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-schema-page {
+  max-width: none;
+}
+
+#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-form-renderer__title {
+  color: #0991f5;
+  font-size: 19px;
+}
+
+#aksrt-admin-app .aksrt-field-group {
+  margin: 0 -30px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+#aksrt-admin-app .aksrt-field-group__body {
+  padding: 0;
+}
+
+#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-field > :not(.aksrt-field__label-row):not(.aksrt-field__desc):not(.aksrt-field__error) {
+  grid-column: 2;
+}
+
+#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-form-renderer__save-bar {
+  left: auto;
+  right: 0;
+  bottom: 0;
+  border-top: 1px solid #f2f2f2;
+  background: rgba(255, 255, 255, .96);
+}
+
+#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);
 }
 
 #aksrt-admin-app .aksrt-page-container,
@@ -253,6 +360,24 @@
     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;
+  }
+
   #aksrt-admin-app .aksrt-page-title {
     font-size: 18px;
     margin-bottom: 8px;