2 lines
12 KiB
CSS
2 lines
12 KiB
CSS
.page{min-height:100vh;background:#0d0f13;color:#f4f2ed;font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif}.page *{box-sizing:border-box}.page button,.page input{font:inherit}.header{position:sticky;top:0;z-index:30;height:68px;display:flex;align-items:center;gap:28px;padding:0 4vw;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(13,15,19,.9);backdrop-filter:blur(18px)}.brand{display:flex;align-items:center;gap:10px;padding:0;border:0;background:transparent;color:#fff;cursor:pointer;text-align:left}.brand>span{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:#ef6b43;color:#fff;font-size:18px;box-shadow:0 7px 18px rgba(239,107,67,.24)}.brand div{display:flex;flex-direction:column;gap:1px}.brand strong{font-size:14px;letter-spacing:.3px}.brand small{color:#6e7076;font-size:7px;letter-spacing:1.9px}.search{width:min(430px,40vw);height:38px;display:flex;align-items:center;gap:8px;margin:0 auto;padding:0 11px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:#17191e;color:#6f737c}.search:focus-within{border-color:rgba(239,107,67,.48);box-shadow:0 0 0 3px rgba(239,107,67,.08)}.search>span{font-size:18px}.search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#e6e4df;font-size:11px}.search input::placeholder{color:#5f6269}.search button{border:0;background:transparent;color:#73767d;cursor:pointer}.headerActions{display:flex;align-items:center;gap:8px}.headerActions>a{padding:9px;color:#8b8d94;text-decoration:none;font-size:10px}.headerActions>a:hover{color:#fff}.headerActions input{display:none}.uploadButton{height:36px;padding:0 14px;border:0;border-radius:7px;background:#f1eee7;color:#151618;cursor:pointer;font-size:10px;font-weight:700}.uploadButton:hover{background:#fff}.categoryBar{position:sticky;top:68px;z-index:25;display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 4vw;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(13,15,19,.93);backdrop-filter:blur(15px)}.categoryBar>div{display:flex;gap:3px}.categoryBar button{padding:8px 13px;border:0;border-radius:6px;background:transparent;color:#74777e;cursor:pointer;font-size:10px}.categoryBar button:hover,.categoryBar .categoryActive{background:#202228;color:#f1eee8}.categoryBar p{margin:0;color:#5d6067;font-size:9px}.categoryBar p span{margin-right:4px;color:#d8785a}.galleryPage,.albumPage,.detailPage{width:min(1480px,92vw);margin:0 auto;padding:34px 0 80px}.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding:18px 0 39px}.hero>div:first-child>p,.albumInfo>p,.detailInfo>p{margin:0 0 9px;color:#ef7955;font-size:8px;font-weight:800;letter-spacing:2.4px}.hero h1{max-width:690px;margin:0 0 11px;font-family:Georgia,"Songti SC",serif;font-size:30px;font-weight:500;letter-spacing:-.8px}.hero>div:first-child>span{color:#777a82;font-size:11px}.summary{display:flex;gap:28px;padding-bottom:3px}.summary>span{display:flex;flex-direction:column;align-items:flex-end;gap:3px}.summary b{font-family:Georgia,serif;font-size:22px;font-weight:500}.summary small{color:#686b72;font-size:8px}.resultLine{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding-top:15px;border-top:1px solid rgba(255,255,255,.08)}.resultLine>div{display:flex;align-items:center;gap:9px}.resultLine strong{font-size:12px}.resultLine span{color:#62656c;font-size:9px}.resultLine>button{border:0;background:transparent;color:#c8765d;cursor:pointer;font-size:9px}.masonry{column-count:5;column-gap:15px}.card{position:relative;width:100%;display:inline-flex;overflow:visible;flex-direction:column;margin:0 0 15px;padding:0;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#15171c;color:inherit;text-align:left;cursor:pointer;break-inside:avoid;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.card:hover,.card:focus-visible{z-index:2;border-color:rgba(239,121,85,.48);box-shadow:0 15px 38px rgba(0,0,0,.27);transform:translateY(-3px)}.albumCard:before,.albumCard:after{content:"";position:absolute;right:8px;bottom:-5px;left:8px;z-index:-1;height:12px;border:1px solid rgba(255,255,255,.09);border-radius:0 0 8px 8px;background:#191b21}.albumCard:after{right:14px;bottom:-9px;left:14px;z-index:-2;background:#111318}.cardImage{position:relative;display:block;overflow:hidden;border-radius:9px 9px 0 0;background:#1d2026}.cardImage img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .3s ease}.card:hover .cardImage img{filter:saturate(1.06);transform:scale(1.025)}.albumBadge{position:absolute;top:9px;left:9px;padding:5px 7px;border:1px solid rgba(255,255,255,.16);border-radius:5px;background:rgba(12,13,17,.72);color:#f4f1e9;font-size:8px;font-weight:600;backdrop-filter:blur(8px)}.previewProgress{position:absolute;right:0;bottom:0;left:0;height:2px;background:#ef7955;transform-origin:left;animation:preview-wait 3s linear both}.cardBody{display:flex;flex-direction:column;padding:11px 12px 12px}.cardBody>strong{overflow:hidden;margin-bottom:5px;color:#eae8e2;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.cardBody>small{display:-webkit-box;overflow:hidden;min-height:29px;color:#686b73;font-size:8px;line-height:1.7;-webkit-box-orient:vertical;-webkit-line-clamp:2}.cardFooter{display:flex;align-items:center;gap:8px;margin-top:9px;padding-top:8px;border-top:1px solid rgba(255,255,255,.06)}.cardFooter em{min-width:0;flex:1;overflow:hidden;color:#7b7f88;font-size:7px;font-style:normal;text-overflow:ellipsis;white-space:nowrap}.cardFooter b{color:#b46f5a;font-size:7px;font-weight:600;white-space:nowrap}.empty{display:grid;min-height:420px;place-content:center;justify-items:center;color:#666a72;text-align:center}.empty>span{font-size:34px}.empty h2{margin:13px 0 5px;color:#b0b1b3;font-size:14px}.empty p{margin:0;font-size:10px}.empty button{margin-top:16px;padding:8px 12px;border:1px solid #34363d;border-radius:6px;background:#191b21;color:#bfc0c2;cursor:pointer;font-size:9px}.backButton{margin-bottom:24px;padding:8px 0;border:0;background:transparent;color:#92949b;cursor:pointer;font-size:10px}.backButton:hover{color:#fff}.albumHero{display:grid;grid-template-columns:minmax(250px,430px) 1fr;align-items:center;gap:48px;margin-bottom:46px;padding:10px 0 22px}.albumCover{position:relative;height:290px}.albumCover img{position:absolute;inset:0;width:86%;height:100%;display:block;border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:0 22px 50px rgba(0,0,0,.35);object-fit:cover}.albumCover img:nth-child(2){transform:translateX(9%) rotate(3deg) scale(.94)}.albumCover img:nth-child(3){transform:translateX(18%) rotate(6deg) scale(.88)}.albumInfo{padding-left:10px}.albumInfo h1{margin:0 0 13px;font-family:Georgia,"Songti SC",serif;font-size:32px;font-weight:500}.albumInfo>span{display:block;max-width:570px;color:#878a92;font-size:11px;line-height:1.9}.albumInfo>div{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0}.albumInfo>div b,.detailTags span{padding:5px 8px;border-radius:5px;background:#1d2026;color:#9799a0;font-size:8px;font-weight:500}.albumInfo>small{color:#61646b;font-size:9px}.detailLayout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(290px,.55fr);gap:30px;align-items:start}.detailVisual{min-height:calc(100vh - 210px);display:flex;align-items:center;justify-content:center;flex-direction:column;margin:0;padding:22px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#08090b}.detailVisual img{max-width:100%;max-height:calc(100vh - 270px);display:block;object-fit:contain}.detailVisual figcaption{margin-top:13px;color:#50535a;font-size:8px}.detailInfo{position:sticky;top:140px;padding:8px 4px}.detailInfo h1{margin:0 0 16px;font-family:Georgia,"Songti SC",serif;font-size:25px;font-weight:500;line-height:1.35}.detailTags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:22px}.detailInfo dl{margin:0 0 21px;border-top:1px solid rgba(255,255,255,.08)}.detailInfo dl>div{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.07)}.detailInfo dt{color:#696c73;font-size:9px}.detailInfo dd{margin:0;color:#b6b6b7;font-size:9px}.copyButton,.rawButton{width:100%;height:39px;display:flex;align-items:center;justify-content:center;border-radius:7px;text-decoration:none;font-size:9px}.copyButton{border:0;background:#ef7955;color:#171718;cursor:pointer;font-weight:700}.copyButton:hover{background:#ff8863}.rawButton{margin-top:8px;border:1px solid #32343a;background:#17191e;color:#a8a9ad}.rawButton:hover{border-color:#4a4d55;color:#fff}.detailHint{margin:14px 0 0!important;color:#55585f!important;font-size:8px!important;line-height:1.7}.quickBackdrop{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:rgba(4,5,7,.74);pointer-events:none;backdrop-filter:blur(10px)}.quickPreview{position:relative;width:75vw;height:75vh;display:flex;align-items:center;justify-content:center;margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:#07080a;box-shadow:0 35px 100px rgba(0,0,0,.6);animation:preview-in .24s ease-out}.quickPreview>img{width:100%;height:100%;display:block;object-fit:contain}.quickPreview figcaption{position:absolute;right:0;bottom:0;left:0;display:flex;align-items:center;gap:12px;padding:22px;background:linear-gradient(transparent,rgba(5,6,8,.9));text-shadow:0 2px 5px #000}.quickPreview figcaption>span{padding:5px 7px;border-radius:5px;background:#ef7955;color:#171718;font-size:8px;font-weight:700}.quickPreview figcaption>strong{font-family:Georgia,"Songti SC",serif;font-size:17px;font-weight:500}.quickPreview figcaption>small{margin-left:auto;color:#999ba1;font-size:9px}.toast{position:fixed;right:24px;bottom:24px;z-index:100;padding:11px 15px;border:1px solid rgba(239,121,85,.35);border-radius:8px;background:#242017;box-shadow:0 15px 35px rgba(0,0,0,.3);color:#f3b39f;font-size:9px}@keyframes preview-wait{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes preview-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@media(max-width:1250px){.masonry{column-count:4}}@media(max-width:980px){.masonry{column-count:3}.header{gap:14px}.headerActions>a{display:none}.albumHero{grid-template-columns:340px 1fr;gap:28px}.detailLayout{grid-template-columns:1fr 270px}}@media(max-width:720px){.header{height:62px;padding:0 15px}.brand div{display:none}.search{width:auto;min-width:0;flex:1}.uploadButton{padding:0 10px}.categoryBar{top:62px;min-height:45px;padding:0 12px;overflow-x:auto}.categoryBar>div{min-width:max-content}.categoryBar p{display:none}.categoryBar button{padding:7px 10px}.galleryPage,.albumPage,.detailPage{width:calc(100% - 28px);padding-top:24px}.hero{align-items:flex-start;flex-direction:column;padding-bottom:28px}.hero h1{font-size:24px}.summary{width:100%;justify-content:space-between}.summary>span{align-items:flex-start}.masonry{column-count:2;column-gap:10px}.card{margin-bottom:10px}.cardBody{padding:9px}.albumHero{grid-template-columns:1fr;gap:26px}.albumCover{height:230px}.albumInfo{padding:0}.albumInfo h1{font-size:25px}.detailLayout{grid-template-columns:1fr}.detailVisual{min-height:50vh}.detailVisual img{max-height:65vh}.detailInfo{position:static}.quickPreview{width:calc(100vw - 24px);height:75vh}.quickPreview figcaption{align-items:flex-start;flex-direction:column;gap:5px;padding:16px}.quickPreview figcaption>small{margin-left:0}}@media(max-width:430px){.masonry{column-count:1}.headerActions .uploadButton{width:34px;padding:0;font-size:0}.headerActions .uploadButton:first-letter{font-size:15px}.hero h1{font-size:21px}.albumCover{height:200px}}@media(prefers-reduced-motion:reduce){.card,.cardImage img,.quickPreview{transition:none;animation-duration:.01ms}.previewProgress{animation-duration:3s}}
|