mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2025-06-29 11:36:16 +00:00
1 line
No EOL
32 KiB
CSS
1 line
No EOL
32 KiB
CSS
@keyframes imgLoading{0%{background-position:-468px 0}100%{background-position:468px 0}}@keyframes uploadingLoop{0%{left:-100%}100%{left:100%}}:root{--bg-dim:16,16,16;--bg-bright:232,227,227;--bg-100:21,21,21;--bg-200:26.1,26.1,26.1;--bg-300:31.2,31.2,31.2;--bg-400:36.3,36.3,36.3;--bg-500:41.4,41.4,41.4;--bg-600:46.5,46.5,46.5;--fg-dim:102,102,102;--fg-white:232,227,227;--fg-black:16,16,16;--black:21,21,21;--white:232,227,227;--red:182,100,103;--orange:217,140,95;--yellow:217,188,140;--green:140,151,125;--blue:141,163,185;--purple:169,136,176;--primary:var(--green);--warning:var(--orange);--critical:var(--red);--success:var(--green);--info:var(--blue);--rad:6px;--rad-inner:calc(var(--rad) / 2);--animation-smooth:cubic-bezier(0.76,0,0.17,1);--animation-bounce:cubic-bezier(.68,-0.55,.27,1.55);--breakpoint:800px}@keyframes imgLoading{0%{background-position:-468px 0}100%{background-position:468px 0}}@keyframes uploadingLoop{0%{left:-100%}100%{left:100%}}@keyframes notificationTimeout{0%{left:-100%;height:3px}90%{left:0;height:3px}95%{left:0;height:0}100%{left:0;height:0}}.notifications{margin:0;padding:0;width:450px;height:auto;position:fixed;top:.3rem;right:.3rem;display:flex;flex-direction:column;z-index:621}.sniffle__notification{margin:0 0 .3rem 0;padding:0;width:450px;height:auto;max-height:100px;display:flex;flex-direction:row;position:relative;background-color:RGB(var(--bg-300));border-radius:var(--rad-inner);color:RGB(var(--fg-white));opacity:0;transform:scale(0.8);box-sizing:border-box;overflow:hidden;transition:all .25s ease-in-out,opacity .2s ease-in-out,transform .2s cubic-bezier(0.68,-0.55,0.27,1.55)}.sniffle__notification::after{content:"";width:100%;height:3px;position:absolute;bottom:0;left:0;background-color:RGB(var(--fg-white));z-index:+2;animation:notificationTimeout 5.1s linear}.sniffle__notification.success{color:RGB(var(--success))}.sniffle__notification.success::after{background-color:RGB(var(--success))}.sniffle__notification.warning{color:RGB(var(--warning))}.sniffle__notification.warning::after{background-color:RGB(var(--warning))}.sniffle__notification.critical{color:RGB(var(--critical))}.sniffle__notification.critical::after{background-color:RGB(var(--critical))}.sniffle__notification.info{color:RGB(var(--info))}.sniffle__notification.info::after{background-color:RGB(var(--info))}.sniffle__notification.show{opacity:1;transform:scale(1)}.sniffle__notification.hide{margin:0;max-height:0;opacity:0;transform:translateX(100%);transition:all .4s ease-in-out,max-height .2s ease-in-out}.sniffle__notification-icon{margin:0;padding:1rem;width:auto;height:auto;display:flex;justify-content:center;align-items:center;background-color:RGB(var(--bg-200))}.sniffle__notification-icon svg{width:1.25rem;height:1.25rem}.sniffle__notification-text{margin:0;padding:1rem;width:auto;height:auto;display:flex;flex-direction:column;justify-self:center;align-self:center;font-size:1rem;font-weight:600;line-height:1;text-align:left}@media(max-width:800px){.notifications{width:calc(100vw - .6rem);height:auto}.sniffle__notification{width:100%}.sniffle__notification.hide{opacity:0;transform:translateY(-5rem)}.sniffle__notification-time{width:100%}}.pop-up{width:100%;height:100vh;position:fixed;inset:0;display:none;background-color:rgba(var(--bg-dim),0.8);opacity:0;z-index:101;transition:opacity .2s ease}.pop-up .pop-up__click-off{width:100%;height:100vh;position:absolute;top:0;left:0;z-index:+1}.pop-up .pop-up-wrapper{margin:0;padding:0;width:621px;height:auto;position:absolute;bottom:50%;left:50%;transform:translate(-50%,50%) scale(0.8);display:flex;flex-direction:column;background-color:RGB(var(--bg-200));border-radius:var(--rad);overflow:hidden;z-index:+2;transition:transform .2s var(--animation-smooth)}.pop-up .pop-up-header{margin:0;padding:1rem;width:100%;height:auto;display:flex;flex-direction:column;gap:.5rem;overflow-y:auto;overflow-x:hidden;text-size-adjust:auto;text-overflow:ellipsis}.pop-up .pop-up-header h2,.pop-up .pop-up-header h3{margin:0;width:100%;position:sticky;top:0;font-size:1.5rem;font-weight:700;text-align:left;color:RGB(var(--fg-white))}.pop-up .pop-up-header p{margin:0;width:100%;font-size:1rem;font-weight:400;text-align:left;color:RGB(var(--fg-white))}.pop-up .pop-up-header p svg{width:1rem;height:1rem;display:inline-block;vertical-align:middle}.pop-up .pop-up-header a,.pop-up .pop-up-header .link{color:RGB(var(--primary));cursor:pointer;text-decoration:none}.pop-up .pop-up-header a:hover,.pop-up .pop-up-header .link:hover{text-decoration:underline}.pop-up .pop-up-header img{margin:auto;padding:0;width:auto;height:auto;max-width:100%;max-height:40vh;border-radius:var(--rad-inner)}.pop-up .pop-up-header form{margin:0;padding:0;width:100%;height:auto;display:flex;flex-direction:column;gap:.5rem;justify-content:center}.pop-up .pop-up-controlls{margin:0;padding:.25rem;width:100%;height:auto;display:flex;flex-direction:row;justify-content:flex-end;gap:.25rem;background-color:RGB(var(--bg-100))}.pop-up.active{opacity:1}.pop-up.active .pop-up-wrapper{transform:translate(-50%,50%) scale(1)}@media(max-width:800px){.pop-up .pop-up-wrapper{width:calc(100% - .75rem);max-height:95vh}.pop-up .pop-up-content{max-height:100%}.pop-up .pop-up-content img{max-height:50vh}.pop-up .pop-up-controlls button{width:100%}.pop-up.active{opacity:1}}.upload-panel{position:fixed;left:3.5rem;bottom:0;display:none;width:calc(100% - 3.5rem);height:100vh;background-color:transparent;color:RGB(var(--fg-white));overflow:hidden;z-index:68;transition:background-color .25s cubic-bezier(0.76,0,0.17,1)}.upload-panel h3{margin:0;padding:0;font-size:1.5rem;font-weight:700}.upload-panel p{margin:0;padding:0;font-size:1rem;font-weight:400}.upload-panel form{margin:0;padding:0;width:100%;display:flex;flex-direction:column;align-items:center;gap:.5rem}.upload-panel form input,.upload-panel form button{width:100%}.upload-panel .click-off{position:absolute;top:0;left:0;width:100%;height:100%;z-index:+1}.upload-panel .container{padding:1rem;position:absolute;bottom:0;left:-27rem;width:27rem;height:100%;display:flex;flex-direction:column;gap:1rem;background-color:RGB(var(--bg-200));z-index:+2;transition:left .25s cubic-bezier(0.76,0,0.17,1),bottom .25s cubic-bezier(0.76,0,0.17,1)}.upload-panel .container #dragIndicator{display:none;position:absolute;top:0;left:0;width:100%;height:5rem;z-index:+1}.upload-panel .container #dragIndicator::after{content:'';width:8rem;height:3px;position:absolute;top:.5rem;left:50%;transform:translate(-50%,-50%);background-color:RGB(var(--bg-400));border-radius:var(--rad-inner)}.upload-panel .upload-jobs{display:flex;flex-direction:column;gap:.5rem;border-radius:var(--rad);overflow-y:auto}.upload-panel .upload-jobs .job{width:100%;height:5rem;min-height:5rem;position:relative;display:flex;align-items:center;gap:.5rem;background-color:RGB(var(--bg-200));border-radius:var(--rad);overflow:hidden}.upload-panel .upload-jobs .job img{position:absolute;top:0;left:0;width:100%;height:5rem;object-fit:cover}.upload-panel .upload-jobs .job .img-filter{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(to right,RGB(var(--bg-100)),transparent)}.upload-panel .upload-jobs .job .job__status{margin:0;padding:0;position:absolute;top:.5rem;left:.5rem;font-size:1rem;font-weight:600;color:RGB(var(--fg-white));z-index:+3;transition:color .25s cubic-bezier(0.76,0,0.17,1)}.upload-panel .upload-jobs .job .progress{width:100%;height:var(--rad-inner);position:absolute;bottom:0;left:-100%;background-color:RGB(var(--primary));animation:uploadingLoop 1s cubic-bezier(0.76,0,0.17,1) infinite;z-index:+5;transition:left 1s cubic-bezier(0.76,0,0.17,1)}.upload-panel .upload-jobs .job.critical .job__status,.upload-panel .upload-jobs .job.critical .progress{color:RGB(var(--critical))}.upload-panel .upload-jobs .job.success .job__status{color:RGB(var(--success))}.upload-panel .upload-jobs .job.success .progress{height:0;animation:none}.upload-panel .upload-jobs .job.warning .job__status,.upload-panel .upload-jobs .job.warning .progress{color:RGB(var(--warning))}.upload-panel .upload-jobs .job.critical .progress,.upload-panel .upload-jobs .job.success .progress,.upload-panel .upload-jobs .job.warning .progress{height:0}.upload-panel.open{background-color:rgba(var(--bg-dim),0.8)}.upload-panel.open .container{left:0}@media(max-width:800px){.upload-panel{width:100%;height:calc(100vh - 3.5rem);height:calc(100dvh - 3.5rem);left:0;bottom:3.5rem}.upload-panel .container{width:100%;height:95%;left:0;bottom:-100vh;border-radius:var(--rad) var(--rad) 0 0}.upload-panel .container #dragIndicator{display:block}.upload-panel.open .container{left:0;bottom:0}}.tag-icon{margin:0;padding:.25rem .5rem;display:flex;align-items:center;justify-content:center;gap:.25rem;font-size:.9rem;font-weight:500;text-decoration:none;border-radius:var(--rad-inner);border:none;background-color:RGBA(var(--primary),0.1);color:RGB(var(--primary));cursor:pointer;transition:background-color .2s ease-in-out,color .2s ease-in-out}.tag-icon svg{width:1.15rem;height:1.15rem}.tag-icon:hover{background-color:RGBA(var(--primary),0.3)}.navigation{margin:0;padding:0;width:3.5rem;height:100%;height:100dvh;display:flex;flex-direction:column;justify-content:space-between;position:fixed;top:0;left:0;background-color:RGB(var(--bg-100));color:RGB(var(--fg-white));z-index:69}.navigation .logo{margin:0;padding:0;width:3.5rem;height:3.5rem;min-height:3.5rem;display:flex;flex-direction:row;align-items:center}.navigation-spacer{height:100%}.navigation-item{margin:0;padding:0;width:3.5rem;height:3.5rem;min-height:3.5rem;position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;background-color:transparent;border:none;text-decoration:none}.navigation-item>svg{margin:0;padding:.5rem;width:2.5rem;height:2.5rem;border-radius:var(--rad-inner);color:RGB(var(--fg-white));transition:color .2s ease-out,transform .2s ease-out}.navigation-item .tool-tip{margin:0;padding:.4rem .7rem;display:block;position:absolute;top:50%;left:3rem;transform:translateY(-50%);font-size:.9rem;font-weight:500;background-color:RGB(var(--bg-100));color:RGB(var(--fg-white));opacity:0;border-radius:var(--rad-inner);transition:opacity .2s cubic-bezier(0.76,0,0.17,1),left .2s cubic-bezier(0.76,0,0.17,1);pointer-events:none}.navigation-item .tool-tip>svg{margin:0;font-size:1rem;width:.75rem;height:.75rem;display:block;position:absolute;top:50%;left:-0.45rem;transform:translateY(-50%);color:RGB(var(--bg-100))}.navigation-item:hover>svg{background:RGBA(var(--fg-white),0.1)}.navigation-item:hover span{opacity:1;left:3.9rem}.navigation-item.selected>svg{color:RGB(var(--primary))}.navigation-item.selected::before{content:'';display:block;position:absolute;top:3px;left:0;width:3px;height:calc(100% - 6px);background-color:RGB(var(--primary));border-radius:var(--rad-inner)}@media(max-width:800px){.navigation{width:100vw;height:3.5rem;flex-direction:row;justify-content:space-around;position:fixed;top:unset;bottom:0;left:0}.navigation>span{display:none}.navigation .logo{display:none}.navigation-item{margin:.25rem;padding:0;width:3rem;height:3rem;min-height:3rem}.navigation-item .tool-tip{display:none}.navigation-item.selected::before{top:unset;bottom:0;left:0;width:100%;height:3px}}.banner,.banner-small{width:100%;position:relative;color:RGB(var(--fg-white))}.banner .link,.banner-small .link{padding:.1rem .3rem;text-decoration:none;font-weight:500;background-color:RGB(var(--fg-white));color:RGB(var(--fg-black));border-radius:var(--rad-inner);cursor:pointer}.banner .link:hover,.banner-small .link:hover{background-color:RGB(var(--fg-black));color:RGB(var(--fg-white))}.banner::after,.banner-small::after{content:'';width:var(--rad);height:calc(var(--rad) * 2);position:absolute;bottom:calc(var(--rad) * -2);left:0;background-color:RGB(var(--bg-bright));border-radius:var(--rad) 0 0 0;box-shadow:0 calc(var(--rad) * -1) 0 0 RGB(var(--bg-100))}.banner{height:30rem;background-color:RGB(var(--bg-300))}.banner img{position:absolute;inset:0;width:100%;height:100%;background-color:inherit;object-fit:cover;object-position:center center}.banner .banner-filter{position:absolute;inset:0;width:100%;height:100%;background:linear-gradient(to right,RGB(var(--primary)),transparent);z-index:+1}.banner .banner-content{padding:.5rem;width:100%;height:auto;position:absolute;left:0;bottom:0;display:grid;grid-template-columns:1fr auto;grid-template-rows:1fr auto auto;grid-template-areas:'info info' 'header header' 'subtitle options';z-index:+2}.banner .banner-content .banner-header,.banner .banner-content .banner-info,.banner .banner-content .banner-subtitle{margin:0;padding:0;width:100%}.banner .banner-content .banner-header{grid-area:header;margin:.5rem 0;text-align:left;font-size:6.9rem;font-weight:700;color:RGB(var(--primary))}.banner .banner-content .banner-info{grid-area:info;font-size:1rem;font-weight:400}.banner .banner-content .banner-subtitle{grid-area:subtitle;font-size:1rem;font-weight:400}.banner .banner-content .pill-row{margin-top:auto;grid-area:options}.banner-small{height:3.5rem;background-color:RGB(var(--bg-100))}.banner-small .banner-content{padding:0 .5rem;width:100%;height:100%;position:absolute;inset:0;display:flex;flex-direction:row;justify-content:flex-start;z-index:+2}.banner-small .banner-content .banner-header,.banner-small .banner-content .banner-info{margin:auto 0;padding:0;width:auto;height:auto;justify-self:flex-start}.banner-small .banner-content .banner-header{margin-right:.6rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-align:left;font-weight:700;font-size:1.5rem;color:RGB(var(--primary))}.banner-small .banner-content .banner-info{margin-right:.6rem;font-size:.9rem;font-weight:400}.banner-small .banner-content .pill-row{margin-left:auto;width:auto}@media(max-width:800px){.banner::after,.banner-small::after{display:none}.banner{min-height:17rem;height:auto}.banner .banner-content{padding:.5rem;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.banner .banner-content .banner-header{margin:1rem 0;text-align:center;font-size:2.5rem}.banner .banner-content .banner-info{font-size:1.1rem;text-align:center}.banner .banner-content .banner-subtitle{display:none}.banner .banner-content .pill-row{margin-top:0rem}.banner-small .banner-content .banner-info{display:none}}.gallery-grid{margin:0;padding:.35rem;width:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.gallery-item{margin:.35rem;padding:0;height:auto;position:relative;border-radius:var(--rad-inner);box-shadow:0 .15rem .4rem .1rem RGBA(var(--bg-100),0.4);box-sizing:border-box;overflow:hidden;transition:box-shadow .2s cubic-bezier(0.79,0.14,0.15,0.86)}.gallery-item .image-filter{margin:0;padding:.5rem;width:100%;min-height:30%;height:auto;position:absolute;left:0;bottom:0;display:flex;flex-direction:column;justify-content:flex-end;background-image:linear-gradient(to top,rgba(var(--bg-100),0.69),transparent);opacity:0;z-index:+4;transition:opacity .2s cubic-bezier(0.79,0.14,0.15,0.86)}.gallery-item .image-filter .image-title,.gallery-item .image-filter .image-subtitle{margin:0;padding:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:RGB(var(--fg-white));text-shadow:0 0 2px RGB(var(--fg-black))}.gallery-item .image-filter .image-title{font-size:.9rem;font-weight:700}.gallery-item .image-filter .image-subtitle{font-size:.8rem;font-weight:400}.gallery-item img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center;background-color:RGB(var(--bg-bright));filter:blur(0.5rem);opacity:0;transition:all .2s cubic-bezier(0.79,0.14,0.15,0.86)}.gallery-item img.loaded{filter:blur(0);opacity:1}.gallery-item:after{content:"";display:block;padding-bottom:100%}.gallery-item:hover{box-shadow:0 .2rem .4rem .1rem RGBA(var(--bg-100),0.6)}.gallery-item:hover .image-filter{opacity:1}.group-item{margin:.35rem;padding:0;height:auto;position:relative;border-radius:var(--rad-inner);box-sizing:border-box;overflow:hidden}.group-item .image-filter{margin:0;padding:.5rem;width:100%;min-height:30%;height:auto;position:absolute;left:0;bottom:0;display:flex;flex-direction:column;justify-content:flex-end;background-image:linear-gradient(to top,rgba(var(--bg-100),0.8),transparent);z-index:+4}.group-item .image-filter .image-title,.group-item .image-filter .image-subtitle{margin:0;padding:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:RGB(var(--fg-white));text-shadow:0 0 2px RGB(var(--fg-black))}.group-item .image-filter .image-title{font-size:.9rem;font-weight:700}.group-item .image-filter .image-subtitle{font-size:.8rem;font-weight:400}.group-item .images{margin:0;padding:0;width:100%;height:100%;position:absolute;inset:0;display:block}.group-item .images img{width:100%;height:100%;position:absolute;top:0;left:0;object-fit:cover;object-position:center;background-color:RGB(var(--bg-bright));border-radius:var(--rad-inner);box-shadow:0 0 .4rem .25rem RGBA(var(--bg-100),0.1);filter:blur(0.5rem);opacity:0;transition:all .2s cubic-bezier(0.79,0.14,0.15,0.86)}.group-item .images img.loaded{filter:blur(0);opacity:1}.group-item .images.size-1 .data-1{transform:scale(0.8) rotate(3deg)}.group-item .images.size-2 .data-1{transform:scale(0.7) rotate(-3deg) translate(10%,10%);z-index:+2}.group-item .images.size-2 .data-2{transform:scale(0.7) rotate(3deg) translate(-10%,-10%);z-index:+1}.group-item .images.size-3 .data-1{transform:scale(0.6) rotate(3deg) translate(-25%,25%);z-index:+3}.group-item .images.size-3 .data-2{transform:scale(0.6) rotate(-5deg) translate(25%,10%);z-index:+2}.group-item .images.size-3 .data-3{transform:scale(0.6) rotate(-1deg) translate(-15%,-23%);z-index:+1}.group-item:after{content:"";display:block;padding-bottom:100%}.group-item:hover .images.size-1 .data-1{transform:scale(0.9) rotate(0deg)}.group-item:hover .images.size-2 .data-1{transform:scale(0.75) rotate(-1deg) translate(12%,14%);z-index:+2}.group-item:hover .images.size-2 .data-2{transform:scale(0.75) rotate(1deg) translate(-12%,-10%);z-index:+1}.group-item:hover .images.size-3 .data-1{transform:scale(0.65) rotate(1deg) translate(-24%,24%);z-index:+3}.group-item:hover .images.size-3 .data-2{transform:scale(0.65) rotate(-2deg) translate(24%,10%);z-index:+2}.group-item:hover .images.size-3 .data-3{transform:scale(0.65) rotate(0deg) translate(-15%,-25%);z-index:+1}@media(max-width:800px){.gallery-grid{grid-template-columns:auto auto auto}}.top-of-page{margin:0;padding:0;width:auto;height:auto;position:fixed;bottom:.75rem;right:-3rem;display:flex;justify-content:center;align-items:center;background-color:RGB(var(--bg-300));color:RGB(var(--fg-white));border-radius:var(--rad);border:none;opacity:0;z-index:20;cursor:pointer;transition:all .2s cubic-bezier(0.86,0,0.07,1)}.top-of-page:hover{color:RGB(var(--primary))}.top-of-page svg{margin:.5rem;width:1.25rem;height:1.25rem}.top-of-page.show{right:.75rem;opacity:1}@media(max-width:800px){.top-of-page{bottom:4.25rem}}.info-button{margin:0;padding:0;width:auto;height:auto;position:fixed;bottom:.75rem;right:-3rem;display:flex;justify-content:center;align-items:center;background-color:RGB(var(--bg-300));color:RGB(var(--fg-white));border-radius:var(--rad);border:none;opacity:0;z-index:20;cursor:pointer;transition:all .2s cubic-bezier(0.86,0,0.07,1)}.info-button:hover{color:RGB(var(--info))}.info-button svg{margin:.5rem;width:1.25rem;height:1.25rem}.info-button.show{right:.75rem;opacity:1}@media(max-width:800px){.info-button{bottom:4.25rem}}.pill-row{margin:0;padding:0;width:100%;height:auto;display:flex;justify-content:center;align-items:center;gap:.5rem}.pill-row>div{margin:0;padding:0;display:flex;background-color:RGB(var(--bg-200));border-radius:var(--rad);box-shadow:0 1px 0 RGB(var(--bg-100)),0 -1px 0 RGB(var(--bg-300))}.pill-text{margin:0;padding:.5rem 1rem;width:auto;height:2.5rem;display:flex;justify-content:center;align-items:center;position:relative;text-align:center;font-size:1rem;font-weight:400;background-color:RGB(var(--bg-200));color:RGB(var(--fg-white));border-radius:var(--rad)}.pill-item{margin:0;padding:.5rem;width:2.5rem;height:2.5rem;display:flex;justify-content:center;align-items:center;position:relative;border:none;background-color:transparent;color:RGB(var(--fg-white))}.pill-item svg{width:1.25rem;height:1.25rem}.pill-item:hover{cursor:pointer;color:RGB(var(--primary))}.pill__critical{color:RGB(var(--critical))}.pill__critical span{background:RGB(var(--critical));color:RGB(var(--fg-white))}.pill__critical span svg{color:RGB(var(--critical))}.pill__critical:hover{color:RGB(var(--fg-white))}.pill__info{color:RGB(var(--info))}.pill__info span{color:RGB(var(--info))}.pill__info:hover{color:RGB(var(--fg-white))}@media(max-width:800px){.tool-tip{display:none}}.btn-block{padding:.4rem .7rem;width:auto;min-height:2.3rem;display:flex;justify-content:center;align-items:center;gap:.5rem;position:relative;font-size:1rem;font-weight:400;text-align:center;background-color:RGBA(var(--white),0.1);color:RGB(var(--white));border:none;border-radius:var(--rad-inner);box-shadow:0 1px 0 RGBA(var(--black),0.2),0 -1px 0 RGBA(var(--white),0.2);outline:none;cursor:pointer;transition:background-color .15s ease-in-out,color .15s ease-in-out,box-shadow .15s ease-in-out}.btn-block:hover,.btn-block:focus-visible{background-color:RGBA(var(--white),0.2);box-shadow:0 1px 0 RGBA(var(--black),0.3),0 -1px 0 RGBA(var(--white),0.3)}.btn-block.primary{color:RGB(var(--primary));box-shadow:0 1px 0 RGBA(var(--black),0.2),0 -1px 0 RGBA(var(--white),0.2)}.btn-block.primary:hover,.btn-block.primary:focus-visible{background-color:RGBA(var(--primary),0.1);color:RGB(var(--primary));box-shadow:0 1px 0 RGBA(var(--black),0.2),0 -1px 0 RGBA(var(--primary),0.2)}.btn-block.critical{color:RGB(var(--critical));box-shadow:0 1px 0 RGBA(var(--black),0.2),0 -1px 0 RGBA(var(--white),0.2)}.btn-block.critical:hover,.btn-block.critical:focus-visible{background-color:RGBA(var(--critical),0.1);color:RGB(var(--critical));box-shadow:0 1px 0 RGBA(var(--black),0.2),0 -1px 0 RGBA(var(--critical),0.2)}.btn-block.warning{color:RGB(var(--warning));box-shadow:0 1px 0 RGBA(var(--black),0.2),0 -1px 0 RGBA(var(--white),0.2)}.btn-block.warning:hover,.btn-block.warning:focus-visible{background-color:RGBA(var(--warning),0.1);color:RGB(var(--warning));box-shadow:0 1px 0 RGBA(var(--black),0.2),0 -1px 0 RGBA(var(--warning),0.2)}.btn-block.success{color:RGB(var(--success));box-shadow:0 1px 0 RGBA(var(--black),0.2),0 -1px 0 RGBA(var(--white),0.2)}.btn-block.success:hover,.btn-block.success:focus-visible{background-color:RGBA(var(--success),0.1);color:RGB(var(--success));box-shadow:0 1px 0 RGBA(var(--black),0.2),0 -1px 0 RGBA(var(--success),0.2)}.btn-block.info{color:RGB(var(--info));box-shadow:0 1px 0 RGBA(var(--black),0.2),0 -1px 0 RGBA(var(--white),0.2)}.btn-block.info:hover,.btn-block.info:focus-visible{background-color:RGBA(var(--info),0.1);color:RGB(var(--info));box-shadow:0 1px 0 RGBA(var(--black),0.2),0 -1px 0 RGBA(var(--info),0.2)}.btn-block.black{color:RGB(var(--black));box-shadow:0 1px 0 RGBA(var(--black),0.2),0 -1px 0 RGBA(var(--white),0.2)}.btn-block.black:hover,.btn-block.black:focus-visible{background-color:RGBA(var(--black),0.1);color:RGB(var(--black));box-shadow:0 1px 0 RGBA(var(--black),0.2),0 -1px 0 RGBA(var(--black),0.2)}.input-checkbox{padding:0;display:flex;justify-content:flex-start;align-items:center;gap:.5rem;position:relative}.input-checkbox label{font-size:1rem;font-weight:400;text-align:left;color:RGB(var(--fg-white))}.input-block{padding:.4rem .7rem;width:auto;min-height:2.3rem;display:flex;justify-content:flex-start;align-items:center;position:relative;font-size:1rem;font-weight:400;text-align:left;background-color:RGBA(var(--white),0.1);color:RGB(var(--white));border:none;border-bottom:3px solid RGBA(var(--white),0.1);border-radius:var(--rad-inner);box-shadow:0 1px 0 RGBA(var(--black),0.2),0 -1px 0 RGBA(var(--white),0.2);outline:none;cursor:pointer;transition:background-color .2s ease-in-out,color .2s ease-in-out}.input-block:not(:focus):not([value=""]):not(:placeholder-shown){border-color:RGBA(var(--white),0.3)}.input-block:hover{border-color:RGBA(var(--white),0.3)}.input-block:focus{border-color:RGB(var(--primary))}.input-block.black{color:RGB(var(--black));box-shadow:0 1px 0 RGBA(var(--black),0.2),0 -1px 0 RGBA(var(--white),0.2)}.input-block.black:hover,.input-block.black:focus-visible{background-color:RGBA(var(--black),0.1);color:RGB(var(--black));box-shadow:0 1px 0 RGBA(var(--black),0.2),0 -1px 0 RGBA(var(--black),0.2)}.fileDrop-block{padding:1rem 1.25rem;width:100%;min-height:2.3rem;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;position:relative;font-size:1rem;font-weight:400;text-align:center;background-color:RGBA(var(--white),0.1);color:RGB(var(--white));border:none;border-radius:var(--rad-inner);box-shadow:0 1px 0 RGBA(var(--black),0.2),0 -1px 0 RGBA(var(--white),0.2);outline:none;cursor:pointer;overflow:hidden;transition:background-color .2s ease-in-out,color .2s ease-in-out,box-shadow .15s ease-in-out}.fileDrop-block input{position:absolute;inset:0;opacity:0;cursor:pointer}.fileDrop-block .status{width:100%;white-space:nowrap;text-overflow:ellipsis;text-align:center;overflow:hidden}.fileDrop-block:hover,.fileDrop-block:focus-visible{background-color:RGBA(var(--white),0.2);color:RGB(var(--white));box-shadow:0 1px 0 RGBA(var(--black),0.3),0 -1px 0 RGBA(var(--white),0.3)}.fileDrop-block.active{background-color:RGBA(var(--primary),0.2);color:RGB(var(--primary));box-shadow:0 1px 0 RGBA(var(--black),0.3),0 -1px 0 RGBA(var(--primary),0.3)}.fileDrop-block.edging{background-color:RGBA(var(--white),0.2);color:RGB(var(--white));box-shadow:0 1px 0 RGBA(var(--black),0.3),0 -1px 0 RGBA(var(--white),0.3)}.fileDrop-block.edging input{display:none}.fileDrop-block.error{background-color:RGBA(var(--critical),0.2);color:RGB(var(--critical));box-shadow:0 1px 0 RGBA(var(--black),0.3),0 -1px 0 RGBA(var(--critical),0.3)}.background{width:100%;height:100vh;position:fixed;top:0;left:0;background-color:RGB(var(--bg-300));background-image:linear-gradient(to right,RGB(var(--bg-400)) 15%,RGB(var(--bg-200)) 35%,RGB(var(--bg-400)) 50%);background-size:1000px 640px;animation:imgLoading 1.8s linear infinite forwards;user-select:none;overflow:hidden;z-index:1}.background img{position:absolute;top:0;left:0;width:100%;height:100%;background-color:RGB(var(--fg-white));filter:blur(1rem) saturate(1.2);transform:scale(1.1);object-fit:cover;object-position:center center}.background span{position:absolute;top:0;left:0;width:100%;height:100%;z-index:+1}.info-container{width:27rem;height:100vh;position:absolute;top:0;left:0;display:flex;flex-direction:column;gap:0;background-color:RGB(var(--bg-200));overflow-y:auto;z-index:+4;transition:left .3s cubic-bezier(0.76,0,0.17,1)}.info-container.collapsed{left:-27rem}.info-tab{width:100%;display:flex;flex-direction:column;position:relative;background-color:RGB(var(--bg-200));border-radius:var(--rad);transition:max-height .3s cubic-bezier(0.79,0.14,0.15,0.86)}.info-tab.collapsed{height:2.5rem}.info-tab.collapsed .collapse-indicator{transform:rotate(90deg)}.info-tab.collapsed .info-table{height:0;padding:0}.collapse-indicator{margin:0;padding:0;width:1.25rem;height:1.25rem;position:absolute;top:.6rem;right:.6rem;background-color:transparent;color:RGB(var(--primary));border:none;z-index:+2;transition:transform .15s cubic-bezier(0.79,0.14,0.15,0.86);cursor:pointer}.info-header{margin:0;padding:.5rem;width:100%;height:2.5rem;display:flex;justify-content:start;align-items:center;gap:.5rem;position:sticky;top:0;z-index:+1;background-color:RGB(var(--bg-200))}.info-header svg{margin:0;padding:0;width:1.25rem;height:1.25rem;fill:RGB(var(--primary))}.info-header h2{margin:0;padding:0;font-size:1.1rem;font-weight:500;color:RGB(var(--primary));text-overflow:ellipsis;overflow:hidden}.info-table{margin:0;padding:.5rem;display:flex;flex-direction:column;gap:1rem;color:RGB(var(--fg-white));overflow-x:hidden}.info-table p{margin:0;padding:0;font-size:1rem;font-weight:400;text-overflow:ellipsis;overflow:hidden}.info-table .link{margin:0;padding:0;color:RGB(var(--primary));cursor:pointer;text-decoration:none}.info-table .link:hover{text-decoration:underline}.info-table table{margin:0;padding:0;width:100%;overflow-x:hidden;border-collapse:collapse}.info-table table tr{white-space:nowrap}.info-table table tr td{padding-bottom:.5rem;max-width:0;font-size:1rem;font-weight:400;vertical-align:top}.info-table table tr td:first-child{padding-right:.5rem;width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.info-table table tr td:last-child{width:50%;white-space:normal;word-break:break-word}.info-table table tr:last-of-type td{padding-bottom:0}.img-colours{width:100%;display:flex;gap:.5rem}.img-colours span{margin:0;padding:0;width:1.5rem;height:1.5rem;display:flex;justify-content:center;align-items:center;border-radius:var(--rad-inner)}.img-groups{width:100%;display:flex;flex-wrap:wrap;gap:.5rem}@media(max-width:1100px){.info-container{width:100%;height:100%;position:relative;display:flex;flex-direction:column;gap:.5rem}.info-container.collapsed{left:unset}}.image-container{margin:auto;padding:.5rem;width:100%;height:100%;display:flex;overflow:hidden}.image-container img{margin:auto;padding:0;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:center}.image-grid{padding:0;width:100%;height:100vh;position:relative;display:flex;flex-direction:column;gap:.5rem;z-index:3}.image-grid .image-block{margin:0 0 0 27rem;padding:0;width:calc(100% - 27rem);height:100vh;position:relative;display:flex;flex-direction:column;gap:0;z-index:3;transition:margin .3s cubic-bezier(0.76,0,0.17,1),width .3s cubic-bezier(0.76,0,0.17,1)}.image-grid .image-block .pill-row{margin-bottom:.5rem}.image-grid.collapsed .image-block{margin:0;width:100%}@media(max-width:1100px){.image-grid{padding:.5rem;height:auto}.image-grid .image-block{margin:0;width:100%;height:auto;gap:.5rem;transition:margin 0s,width 0s}.image-grid .image-block .image-container{margin:0 auto;padding:0;max-height:69vh}.image-grid .image-block .image-container img{max-height:69vh}.image-grid .image-block .pill-row{margin-bottom:0}.image-grid .image-block .pill-row #fullscreenImage{display:none}.info-container{background:transparent}.info-header{border-radius:var(--rad) var(--rad) 0 0}.info-tab.collapsed .info-header{border-radius:var(--rad)}}*{box-sizing:border-box;font-family:"Rubik",sans-serif;scrollbar-color:RGB(var(--primary)) transparent}* ::-webkit-scrollbar{width:.5rem}* ::-webkit-scrollbar-track{background:RGB(var(--bg-200))}* ::-webkit-scrollbar-thumb{background:RGB(var(--primary))}* ::-webkit-scrollbar-thumb:hover{background:RGB(var(--fg-white))}html,body{margin:0;padding:0;min-height:100vh;max-width:100vw;background-color:RGB(var(--fg-white));scroll-behavior:smooth;overflow-x:hidden}.wrapper{margin:0;padding:0 0 0 3.5rem;min-height:100vh;display:flex;flex-direction:column;background-color:RGB(var(--bg-bright));color:RGB(var(--bg-100))}.big-text{height:20rem;display:flex;flex-direction:column;justify-content:center;align-items:center;color:RGB(var(--bg-100))}.big-text h1{margin:0 2rem;font-size:4rem;font-weight:900;text-align:center}.big-text p{margin:0 2rem;max-width:40rem;font-size:1rem;font-weight:400;text-align:center}.error-page{width:100%;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:RGB(var(--bg-bright))}.error-page h1{margin:0 2rem;font-size:6.9rem;font-weight:900;text-align:center;color:var(--primary)}.error-page p{margin:0 2rem;max-width:40rem;font-size:1.25rem;font-weight:400;text-align:center;color:var(--fg-black)}@media(max-width:800px){.wrapper{padding:0 0 3.5rem 0}.big-text{height:calc(75vh - 3.5rem)}.big-text h1{font-size:3.5rem}.error-page{height:calc(100vh - 3.5rem)}.error-page h1{font-size:4.5rem}.error-page p{max-width:100%;font-size:1rem}}:root{--bg-dim:16,16,16;--bg-bright:232,227,227;--bg-100:21,21,21;--bg-200:26.1,26.1,26.1;--bg-300:31.2,31.2,31.2;--bg-400:36.3,36.3,36.3;--bg-500:41.4,41.4,41.4;--bg-600:46.5,46.5,46.5;--fg-dim:102,102,102;--fg-white:232,227,227;--fg-black:16,16,16;--black:21,21,21;--white:232,227,227;--red:182,100,103;--orange:217,140,95;--yellow:217,188,140;--green:140,151,125;--blue:141,163,185;--purple:169,136,176;--primary:var(--green);--warning:var(--orange);--critical:var(--red);--success:var(--green);--info:var(--blue);--rad:6px;--rad-inner:calc(var(--rad) / 2);--animation-smooth:cubic-bezier(0.76,0,0.17,1);--animation-bounce:cubic-bezier(.68,-0.55,.27,1.55);--breakpoint:800px} |