4 lines
8.1 KiB
CSS
4 lines
8.1 KiB
CSS
.page{min-height:100vh;background:#f6f7fb;color:#25283b;font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif}.page *{box-sizing:border-box}.page button,.page input,.page select{font:inherit}.topbar{height:66px;display:flex;align-items:center;padding:0 max(24px,calc((100vw - 1180px)/2));border-bottom:1px solid #e9eaf0;background:#fff}.brand{display:flex;align-items:center;gap:9px;color:#25283b;text-decoration:none}.brand>span{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#635bde;color:#fff;font-family:Georgia,serif;font-weight:700}.brand strong{font-size:13px}.topbar nav{height:100%;display:flex;align-items:stretch;gap:6px;margin-left:45px}.topbar nav a{position:relative;display:flex;align-items:center;padding:0 15px;color:#8a8c9a;text-decoration:none;font-size:11px}.topbar nav a:hover,.topbar nav .active{color:#454159}.topbar nav .active:after{content:"";position:absolute;inset:auto 13px -1px;height:2px;background:#635bde}.topActions{margin-left:auto;display:flex;align-items:center;gap:10px}.topActions button{width:32px;height:32px;border:0;border-radius:50%;background:#f3f3f7;color:#7b7d8c;cursor:pointer}.topActions span{width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:#e4e0ff;color:#574db3;font-size:10px;font-weight:700}.content{width:min(1180px,calc(100% - 48px));margin:auto;padding:38px 0 70px}.heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.heading p{margin:0 0 5px;color:#6b5ed2;font-size:8px;font-weight:800;letter-spacing:1.8px}.heading h1{margin:0 0 7px;font-size:25px;letter-spacing:-.6px}.heading span{color:#8f919f;font-size:10px}.createButton{height:38px;padding:0 17px;border:0;border-radius:8px;background:#635bde;color:#fff;cursor:pointer;font-size:10px;font-weight:700;box-shadow:0 7px 16px rgba(99,91,222,.2)}.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin:27px 0 17px}.summary>div{display:flex;align-items:center;gap:13px;min-height:78px;padding:16px 18px;border:1px solid #e8e8ee;border-radius:10px;background:#fff}.summary>div>span{width:38px;height:38px;display:grid;place-items:center;border-radius:9px;font-size:15px}.summary p{display:flex;flex-direction:column;gap:3px;margin:0}.summary small{color:#9799a7;font-size:9px}.summary strong{font-size:20px}.iconPurple{background:#eeebff;color:#6557cf}.iconGreen{background:#e5f7ef;color:#3b9d70}.iconOrange{background:#fff2dd;color:#d89136}.iconBlue{background:#e6f1ff;color:#4381c2}.listPanel{overflow:hidden;border:1px solid #e5e6ec;border-radius:12px;background:#fff;box-shadow:0 8px 28px rgba(46,48,75,.04)}.categoryTabs{height:53px;display:flex;align-items:flex-end;gap:23px;padding:0 20px;border-bottom:1px solid #eeeef2;overflow-x:auto}.categoryTabs button{position:relative;height:100%;padding:0 3px;border:0;background:none;color:#9596a2;cursor:pointer;font-size:9px;white-space:nowrap}.categoryTabs .tabActive{color:#3b3947;font-weight:700}.categoryTabs .tabActive:after{content:"";position:absolute;inset:auto 0 -1px;height:2px;background:#635bde}.toolbar{display:flex;align-items:center;gap:9px;padding:14px 20px;border-bottom:1px solid #f0f0f3}.search{width:310px;height:34px;display:flex;align-items:center;gap:7px;padding:0 10px;border:1px solid #e2e3e9;border-radius:7px;background:#fafafd;color:#9b9dab}.search:focus-within{border-color:#a9a2ea;background:#fff;box-shadow:0 0 0 3px rgba(99,91,222,.07)}.search input{min-width:0;flex:1;border:0;outline:0;background:transparent;font-size:9px}.search button{border:0;background:none;color:#aaa;cursor:pointer}.toolbar select,.filterButton{height:34px;padding:0 11px;border:1px solid #e2e3e9;border-radius:7px;background:#fff;color:#6e707e;font-size:9px}.filterButton{cursor:pointer}.viewToggle{margin-left:auto;display:flex;padding:3px;border-radius:7px;background:#f3f3f7}.viewToggle button{width:28px;height:26px;border:0;border-radius:5px;background:none;color:#a1a2ae;cursor:pointer}.viewToggle .viewActive{background:#fff;color:#5d55bd;box-shadow:0 2px 6px rgba(37,38,57,.08)}.bulkBar{height:42px;display:flex;align-items:center;gap:10px;padding:0 20px;border-bottom:1px solid #ddd8ff;background:#f5f3ff;color:#6257b4;font-size:9px}.bulkBar strong{margin-right:auto}.bulkBar button{padding:4px 9px;border:1px solid #d7d1fa;border-radius:5px;background:#fff;color:#6257b4;cursor:pointer}.listHeader,.list article{display:grid;grid-template-columns:30px minmax(330px,1.7fr) .55fr .55fr .6fr .6fr 58px;align-items:center;column-gap:12px;padding:0 20px}.listHeader{height:37px;border-bottom:1px solid #efeff3;background:#fafafd;color:#9b9da9;font-size:8px}.list input{width:13px;height:13px;accent-color:#635bde}.list article{min-height:82px;border-bottom:1px solid #f0f0f3;transition:background .15s}.list article:hover,.list .rowSelected{background:#faf9ff}.titleCell{min-width:0;display:flex;align-items:center;gap:12px;padding:0;border:0;background:none;text-align:left;cursor:pointer}.titleCell>span{width:35px;height:35px;display:grid;place-items:center;flex:0 0 auto;border-radius:8px;background:#f0edff;color:#6658cb;font-size:11px;font-weight:700}.titleCell>div{min-width:0}.titleCell strong{display:block;overflow:hidden;color:#383947;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.titleCell p{margin:4px 0;overflow:hidden;color:#9496a3;font-size:8px;text-overflow:ellipsis;white-space:nowrap}.titleCell small{color:#b1b2bb;font-size:7px}.titleCell small i{margin-left:5px;color:#8074c8;font-style:normal}.category{color:#747683;font-size:9px}.status{width:fit-content;display:flex;align-items:center;gap:5px;padding:4px 7px;border-radius:12px;font-size:8px}.status i{width:4px;height:4px;border-radius:50%;background:currentColor}.statusPublished{background:#eaf8f1;color:#32956a}.statusReview{background:#fff4df;color:#ce8830}.statusDraft{background:#f0f0f3;color:#80818d}.statusArchived{background:#edf1f7;color:#71809a}.owner{display:flex;align-items:center;gap:7px;color:#676976;font-size:8px}.owner i{width:23px;height:23px;display:grid;place-items:center;border-radius:50%;background:#e6effe;color:#4e77b0;font-size:7px;font-style:normal}.list time{color:#9b9ca7;font-size:8px}.rowActions{display:flex}.rowActions button{width:28px;height:28px;border:0;border-radius:6px;background:none;color:#bbbcc5;cursor:pointer}.rowActions button:hover{background:#f0eef9;color:#6559c3}.rowActions .favorite{color:#edaf3f}.compact article{min-height:58px}.compact .titleCell p,.compact .titleCell small{display:none}.compact .titleCell>span{width:30px;height:30px}.empty{min-height:300px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#a2a3ad}.empty>span{font-size:36px}.empty strong{margin-top:10px;color:#5d5e6b;font-size:12px}.empty p{font-size:9px}.empty button{padding:7px 12px;border:1px solid #dedee7;border-radius:6px;background:#fff;color:#665bc3;cursor:pointer;font-size:8px}.pagination{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;color:#9b9da8;font-size:8px}.pagination div{display:flex;gap:4px}.pagination button{width:28px;height:28px;border:1px solid #e3e3e9;border-radius:6px;background:#fff;color:#747681;cursor:pointer;font-size:8px}.pagination .pageActive{border-color:#635bde;background:#635bde;color:#fff}.pagination button:disabled{opacity:.4}.toast{position:fixed;left:50%;bottom:25px;z-index:30;transform:translateX(-50%);padding:10px 16px;border-radius:20px;background:#292638;color:#fff;box-shadow:0 10px 30px rgba(24,22,39,.2);font-size:9px}@media(max-width:900px){.topbar nav{display:none}.summary{grid-template-columns:repeat(2,1fr)}.listHeader,.list article{grid-template-columns:26px minmax(260px,1fr) .5fr .5fr 54px}.listHeader span:nth-of-type(4),.listHeader span:nth-of-type(5),.owner,.list time{display:none}}@media(max-width:620px){.topbar{padding:0 16px}.content{width:calc(100% - 28px);padding-top:25px}.heading span{display:none}.summary{gap:8px}.summary>div{min-height:68px;padding:12px}.summary>div>span{width:32px;height:32px}.toolbar{flex-wrap:wrap}.search{width:100%}.viewToggle{display:none}.listHeader{display:none}.list article{grid-template-columns:22px minmax(0,1fr) 54px;padding:12px;gap:7px}.category,.status{display:none}.titleCell p{display:block}.pagination{padding:0 13px}}
|
|
|
|
|