2 lines
10 KiB
CSS
2 lines
10 KiB
CSS
.page{min-height:100vh;background:#f5f4f7;color:#242335;font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif}.page *{box-sizing:border-box}.page button,.page input,.page textarea{font:inherit}.topbar{position:absolute;inset:0 0 auto;z-index:10;height:66px;display:flex;align-items:center;padding:0 max(26px,calc((100vw - 1240px)/2));border-bottom:1px solid rgba(255,255,255,.13);color:#fff}.brand{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none}.brand>span{width:30px;height:30px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.6);border-radius:50%;font-family:Georgia,serif;font-style:italic}.brand strong{font-size:9px;line-height:1.15;letter-spacing:1.4px}.brand small{color:rgba(255,255,255,.45);font-size:6px}.topbar nav{height:100%;display:flex;align-items:stretch;gap:6px;margin-left:48px}.topbar nav a{position:relative;display:flex;align-items:center;padding:0 15px;color:rgba(255,255,255,.58);text-decoration:none;font-size:10px}.topbar nav .active,.topbar nav a:hover{color:#fff}.topbar nav .active:after{content:"";position:absolute;inset:auto 14px -1px;height:2px;background:#b2a2ff}.headerActions{margin-left:auto;display:flex;align-items:center;gap:7px}.headerActions button{width:32px;height:32px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;cursor:pointer}.headerActions>span{width:31px;height:31px;display:grid;place-items:center;margin-left:5px;border-radius:50%;background:#b5a7f4;color:#282042;font-size:9px}.cover{position:relative;height:390px;overflow:hidden;background:#0a0c1b;color:#fff}.coverImage{position:absolute;inset:0;background-image:url('/anime/star-echoes-hero.png');background-position:center 42%;background-size:cover}.coverShade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,8,22,.96) 0%,rgba(7,8,22,.81) 35%,rgba(7,8,22,.18) 72%),linear-gradient(0deg,rgba(8,9,22,.96),transparent 58%)}.coverInner{position:relative;width:min(1240px,calc(100% - 52px));height:100%;margin:auto;padding-top:93px}.breadcrumb{display:flex;gap:8px;color:rgba(255,255,255,.34);font-size:8px}.breadcrumb a{color:rgba(255,255,255,.48);text-decoration:none}.breadcrumb strong{color:rgba(255,255,255,.7);font-weight:500}.identity{margin-top:54px}.identity>p{margin:0;color:#a594f8;font-size:8px;font-weight:800;letter-spacing:2px}.identity h1{margin:6px 0 0;font-family:"STSong","SimSun",serif;font-size:52px;font-weight:500;letter-spacing:5px}.identity>span{color:rgba(255,255,255,.48);font-family:Georgia,serif;font-size:10px;letter-spacing:3px}.identity blockquote{margin:24px 0 0;color:rgba(255,255,255,.72);font-family:"STSong","SimSun",serif;font-size:12px;letter-spacing:1px}.follow,.following{position:absolute;right:0;bottom:39px;height:38px;padding:0 17px;border:1px solid rgba(255,255,255,.4);border-radius:20px;background:rgba(15,14,36,.35);color:#fff;cursor:pointer;font-size:9px;backdrop-filter:blur(8px)}.following{border-color:#9c87ff;background:rgba(104,77,220,.35)}.content{position:relative;width:min(1240px,calc(100% - 52px));display:grid;grid-template-columns:235px minmax(0,1fr) 285px;align-items:start;gap:18px;margin:-38px auto 0;padding-bottom:70px}.profileCard,.panel,.tagPanel,.notePanel,.versionPanel{border:1px solid #e6e4eb;border-radius:12px;background:#fff;box-shadow:0 10px 30px rgba(38,31,65,.045)}.profileCard{position:sticky;top:20px;overflow:hidden}.portrait{position:relative;height:285px;background-image:linear-gradient(0deg,rgba(12,12,28,.3),transparent 35%),url('/anime/star-echoes-hero.png');background-position:57% center;background-size:auto 100%}.portrait span{position:absolute;left:13px;top:13px;padding:4px 8px;border-radius:4px;background:rgba(21,18,46,.78);color:#fff;font-size:7px;letter-spacing:1px}.profileBody{padding:19px}.profileBody>p{margin:0 0 15px;padding-bottom:13px;border-bottom:1px solid #efedf1;color:#6d5bc2;font-size:8px;font-weight:700}.profileBody dl{margin:0}.profileBody dl>div{display:flex;justify-content:space-between;gap:10px;margin:10px 0;font-size:8px}.profileBody dt{color:#aaa7b1}.profileBody dd{margin:0;color:#4c4957;text-align:right}.profileBody>button{width:100%;height:32px;margin-top:10px;border:1px solid #dedbe6;border-radius:6px;background:#fff;color:#6255a5;cursor:pointer;font-size:8px}.tabs{height:48px;display:flex;gap:22px;padding:0 17px;border:1px solid #e6e4eb;border-radius:10px;background:#fff}.tabs button{position:relative;border:0;background:none;color:#9c98a7;cursor:pointer;font-size:9px}.tabs .tabActive{color:#443d65;font-weight:700}.tabs .tabActive:after{content:"";position:absolute;inset:auto 0 -1px;height:2px;background:#7460d9}.panel{margin-top:13px;padding:23px}.panel>header,.tagPanel>header,.notePanel>header{display:flex;align-items:flex-start;justify-content:space-between}.panel header span,.tagPanel header span,.notePanel header span{display:block;margin-bottom:4px;color:#7864d4;font-size:6px;font-weight:800;letter-spacing:1.5px}.panel h2,.tagPanel h2,.notePanel h2{margin:0;font-size:13px}.panel header button,.tagPanel header>small,.notePanel header button,.panel header>small{border:0;background:none;color:#8c82bd;cursor:pointer;font-size:8px}.bio{margin:19px 0;color:#66636f;font-size:9px;line-height:1.9}.keyFacts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.keyFacts>div{padding:12px;border-radius:7px;background:#f7f5fb}.keyFacts small{display:block;margin-bottom:6px;color:#aaa6b0;font-size:7px}.keyFacts strong{font-size:8px;line-height:1.5}.relations{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}.relations article{display:flex;align-items:center;gap:8px;padding:11px;border:1px solid #eceaf0;border-radius:8px}.relations article>span{width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;font-size:8px;font-weight:700}.blue{background:#e1eeff;color:#3e75b4}.coral{background:#ffe4e2;color:#bd5c55}.gray{background:#eaeaec;color:#6f7079}.relations p{min-width:0;display:flex;flex:1;flex-direction:column;gap:3px;margin:0}.relations strong{font-size:8px}.relations small{overflow:hidden;color:#a4a0aa;font-size:7px;text-overflow:ellipsis;white-space:nowrap}.relations button{border:0;background:none;color:#aaa5ba;cursor:pointer}.traits{margin-top:21px}.traits>div{margin:15px 0}.traits p{display:flex;justify-content:space-between;margin:0 0 7px;font-size:8px}.traits p span{color:#777480}.traits p strong{color:#6153ac}.traits>div>i{height:5px;display:block;overflow:hidden;border-radius:3px;background:#eeecf1}.traits b{height:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,#7760dd,#aa91f4)}.skills{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:18px}.skills article{display:flex;gap:10px;padding:14px;border:1px solid #ebe9ee;border-radius:8px}.skills article>span{width:28px;height:28px;display:grid;place-items:center;flex:0 0 auto;border-radius:7px;background:#ede9ff;color:#6651c3;font-family:Georgia,serif;font-size:11px}.skills p{display:flex;flex-direction:column;gap:4px;margin:0}.skills strong{font-size:8px}.skills small{color:#a29faa;font-size:7px;line-height:1.4}.timeline{position:relative;margin-top:22px}.timeline:before{content:"";position:absolute;left:13px;top:12px;bottom:20px;width:1px;background:#ddd8ee}.timeline article{position:relative;display:flex;align-items:center;gap:14px;margin:15px 0}.timeline article>i{z-index:1;width:27px;height:27px;display:grid;place-items:center;flex:0 0 auto;border:3px solid #fff;border-radius:50%;background:#7b67da;color:#fff;font-size:7px;font-style:normal;box-shadow:0 0 0 1px #d9d3f1}.timeline article>div{display:flex;flex:1;flex-direction:column;gap:4px}.timeline span{color:#8c7dce;font-size:7px}.timeline strong{font-size:9px}.timeline button{border:0;background:none;color:#9a94ae;cursor:pointer;font-size:7px}.sideColumn{display:flex;flex-direction:column;gap:13px}.tagPanel,.notePanel{padding:20px}.tags{display:flex;flex-wrap:wrap;gap:6px;margin:17px 0}.tags>span{display:flex;align-items:center;gap:3px;padding:6px 7px;border-radius:5px;background:#f1eff5;color:#6d6978;font-size:8px}.tags .importantTag{background:#ede9ff;color:#6751c7}.tags button{padding:0;border:0;background:none;color:inherit;cursor:pointer;font-size:10px;opacity:.45}.tagPanel form{display:flex;gap:6px}.tagPanel input{min-width:0;height:31px;flex:1;padding:0 9px;border:1px solid #e2dfe7;border-radius:6px;outline:0;font-size:8px}.tagPanel form button{padding:0 10px;border:0;border-radius:6px;background:#6f5ad1;color:#fff;cursor:pointer;font-size:8px}.tagPanel>p{margin:13px 0 0;color:#aaa6b0;font-size:7px;line-height:1.6}.notePanel textarea{width:100%;height:125px;margin-top:16px;resize:none;padding:10px;border:1px solid #ded9e8;border-radius:7px;outline:0;color:#66616f;font-size:8px;line-height:1.7}.notePanel>p{min-height:95px;margin:16px 0;color:#77727e;font-size:8px;line-height:1.75;white-space:pre-line}.notePanel>small{color:#b1adb6;font-size:7px}.versionPanel{display:flex;align-items:center;gap:9px;padding:13px}.versionPanel>span{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;background:#e9f4ef;color:#34825f;font-size:8px;font-weight:700}.versionPanel>div{min-width:0;display:flex;flex:1;flex-direction:column;gap:3px}.versionPanel strong{font-size:8px}.versionPanel small{overflow:hidden;color:#aaa6b0;font-size:6px;text-overflow:ellipsis;white-space:nowrap}.versionPanel button{border:0;background:none;color:#7769b0;cursor:pointer;font-size:7px}.toast{position:fixed;left:50%;bottom:24px;z-index:30;transform:translateX(-50%);padding:10px 16px;border-radius:20px;background:#292538;color:#fff;box-shadow:0 10px 30px rgba(24,20,41,.2);font-size:8px}@media(max-width:1050px){.content{grid-template-columns:210px minmax(0,1fr)}.sideColumn{grid-column:2}.profileCard{grid-row:1/3}.tagPanel,.notePanel{width:calc(50% - 7px);display:inline-block;vertical-align:top}.sideColumn{display:block}.notePanel{margin-left:10px}.versionPanel{margin-top:12px}}@media(max-width:720px){.topbar{padding:0 16px}.topbar nav{display:none}.cover{height:430px}.coverImage{background-position:61% center}.coverShade{background:linear-gradient(0deg,rgba(7,8,22,.98),rgba(7,8,22,.3))}.coverInner{width:calc(100% - 32px)}.identity{margin-top:160px}.identity h1{font-size:40px}.follow,.following{right:0;bottom:25px}.content{width:calc(100% - 28px);grid-template-columns:1fr;margin-top:-10px}.profileCard{position:static;grid-row:auto}.portrait{height:360px;background-position:58% center}.mainColumn,.sideColumn{grid-column:1}.keyFacts,.relations,.skills{grid-template-columns:1fr}.tagPanel,.notePanel{width:100%;display:block}.notePanel{margin:12px 0 0}}
|