xiaoshu-app/src/app/admin/pages/admin-resource.component.scss

.resource-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }.resource-header p { margin: 0 0 7px; color: #2e9a71; font-size: 11px; font-weight: 800; letter-spacing: .18em; }.resource-header h1 { margin: 0; font-size: 27px; }.resource-header span { display: block; margin-top: 7px; color: #7d899a; font-size: 12px; }
.header-actions { display: flex; gap: 9px; }.header-actions button, .toolbar button, .pagination button, .editor-drawer footer button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 14px; border: 1px solid #dfe5ed; border-radius: 9px; color: #4e5b6e; background: white; font: inherit; cursor: pointer; }.primary { border-color: #258c67 !important; color: white !important; background: #258c67 !important; }
.resource-card { overflow: hidden; border: 1px solid #e4e9f0; border-radius: 14px; background: white; box-shadow: 0 7px 24px rgba(24,46,76,.04); }.toolbar { display: flex; gap: 10px; padding: 17px; border-bottom: 1px solid #edf0f4; }.toolbar label { display: flex; align-items: center; gap: 9px; width: min(430px, 100%); height: 39px; padding: 0 12px; border: 1px solid #dfe5ed; border-radius: 9px; color: #8490a1; background: #f9fafc; }.toolbar input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font: inherit; }
.table-scroll { overflow: auto; }table { width: 100%; border-collapse: collapse; table-layout: fixed; }th { padding: 12px 15px; color: #6c7889; background: #f8fafc; font-size: 11px; font-weight: 700; text-align: left; text-transform: uppercase; }td { max-width: 220px; padding: 13px 15px; overflow: hidden; border-top: 1px solid #edf0f4; color: #3a4658; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }tbody tr:hover { background: #fbfdfc; }.actions { width: 92px; text-align: right; }.actions button { display: inline-grid; place-items: center; width: 31px; height: 31px; margin-left: 5px; border: 1px solid #dfe5ed; border-radius: 8px; color: #557085; background: white; cursor: pointer; }.actions button.danger { color: #b44951; }.empty-cell { height: 180px; color: #8a95a5; text-align: center; }
.pagination { display: flex; align-items: center; justify-content: space-between; padding: 14px 17px; border-top: 1px solid #edf0f4; color: #7a8798; font-size: 12px; }.pagination div { display: flex; gap: 8px; }.pagination button { min-height: 34px; }.pagination button:disabled { opacity: .45; cursor: default; }
.empty { display: grid; place-items: center; gap: 10px; min-height: 300px; color: #7f8b9c; }.inline-error { padding: 10px 17px; color: #b33f48; background: #fff2f3; font-size: 12px; }.spin { animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
.drawer-mask { position: fixed; inset: 0; z-index: 50; border: 0; background: rgba(11,24,42,.42); }.editor-drawer { position: fixed; top: 0; right: 0; z-index: 60; display: grid; grid-template-rows: auto 1fr auto; width: min(560px, 94vw); height: 100vh; background: white; box-shadow: -18px 0 50px rgba(17,36,62,.18); }.editor-drawer header, .editor-drawer footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid #e8ecf2; }.editor-drawer header div { display: grid; gap: 3px; }.editor-drawer header span { color: #8290a3; font-size: 11px; }.editor-drawer header strong { font-size: 18px; }.editor-drawer header button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: #f2f5f8; cursor: pointer; }.editor-fields { display: grid; align-content: start; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; overflow: auto; padding: 22px; }.editor-fields label { display: grid; align-content: start; gap: 7px; color: #445165; font-size: 12px; }.editor-fields label:has(textarea) { grid-column: 1 / -1; }.editor-fields small { color: #95a0af; font-weight: 400; }.editor-fields input:not([type=checkbox]), .editor-fields textarea { width: 100%; box-sizing: border-box; padding: 10px 11px; border: 1px solid #dce3eb; border-radius: 8px; outline: 0; background: #fbfcfd; font: inherit; }.editor-fields input:focus, .editor-fields textarea:focus { border-color: #44a681; box-shadow: 0 0 0 3px rgba(68,166,129,.1); }.editor-fields textarea { resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }.editor-fields textarea.invalid { border-color: #cf5961; box-shadow: 0 0 0 3px rgba(207,89,97,.1); }.editor-fields .field-error { color: #b33f48; }.editor-drawer footer { justify-content: flex-end; border-top: 1px solid #e8ecf2; border-bottom: 0; }
.password-reset { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 4px; padding: 16px; border: 1px solid #dce8e3; border-radius: 11px; background: #f7fbf9; }.password-reset > header { grid-column: 1 / -1; justify-content: flex-start; padding: 0 0 12px; border-bottom: 1px solid #dfeae5; color: #28795b; }.password-reset > header div { gap: 2px; }.password-reset > header strong { font-size: 13px; }.password-reset > header span { font-size: 10px; }.password-reset > button { grid-column: 1 / -1; justify-self: end; padding: 8px 13px; border: 0; border-radius: 8px; color: white; background: #287e5e; cursor: pointer; }.password-reset > button:disabled { opacity: .55; }.password-status { grid-column: 1 / -1; font-size: 11px; }.password-status.error { color: #b33f48; }.password-status.success { color: #237454; }
.account-create { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }.account-create-note { grid-column: 1 / -1; display: grid; gap: 5px; padding: 14px 15px; border: 1px solid #dce8e3; border-radius: 10px; color: #28795b; background: #f7fbf9; }.account-create-note strong { font-size: 13px; }.account-create-note span { color: #668175; font-size: 11px; line-height: 1.6; }.account-create-error { grid-column: 1 / -1; padding: 10px 12px; border-radius: 8px; color: #b33f48; background: #fff2f3; font-size: 11px; }
@media (max-width: 700px) { .resource-header { align-items: start; }.resource-header span { display: none; }.header-actions button:first-child { display: none; }.editor-fields, .account-create { grid-template-columns: 1fr; }.editor-fields label:has(textarea) { grid-column: auto; }.pagination > span { display: none; }.pagination { justify-content: flex-end; } }