/* Dark mode default */ :root{--m:#7f7f7f;--gA50:rgba(127,127,127,.5);--gA30:rgba(127,127,127,.3);--gA15:rgba(127,127,127,.15);--green:#31B050;--red:#DB2525;--redA30:rgba(219,37,37,.3);--greenA30:rgba(49,176,80,.3);--gold:#CFAA55;--goldA30:rgba(207,170,85,.3)} [data-theme="dark"] {--bg:#000;--box:#1c1c1c;--btnBG:#333;--btnBorder:#000;--border:#333;--g0:#000;--g100:#fff;--gA0:rgba(0,0,0,.8);--gA100:rgba(255,255,255,.8)} [data-theme="light"] {--bg:#fff;--box:#eee;--btnBG:#ddd;--btnBorder:#fff;--border:#ddd;--g0:#fff;--g100:#000;--gA0:rgba(255,255,255,.8);--gA100:rgba(0,0,0,.8)} html {font-size: 16px;} body{padding:0;margin:0;overflow: hidden;font-family: 'Arial', serif; -webkit-font-smoothing: antialiased;color:var(--m);background:var(--bg);} /* launch pane */ #launchPane{position:absolute;left:0;top:0;bottom:0;right:0;display:none;flex-direction:row;align-items:center;justify-content:center;color:var(--g100);background:var(--gA100);text-align:center;line-height:1.6;z-index:100;} .pane{width:70%;padding:4rem 2rem 2rem;border:.5rem solid var(--bg);background:var(--box);border-radius:1rem;box-shadow:0 0 3rem var(--gA0);position:relative;} p{font-size:1.3rem;} h2{font-size:2.3rem;} .subPane{padding:1rem 2rem 2rem;border:1px solid var(--border);background:var(--bg);border-radius:1rem;margin-top:2rem;} .textLink{color:#26A6A6;} #highResCanvas {display:none;} #qrcode{margin:2rem;} #layout{position:absolute;left:1rem;top:1rem;bottom:1rem;right:1rem;display:flex;flex-direction:row;align-items:stretch;} #btnSeg{width:15rem;display:flex;flex-direction:column;} #btns0, #btns1{flex: 1 1 0;display:flex;flex-direction:column;gap:.9rem;} /* header */ #header{height:2rem;margin-bottom:.5rem;position:absolute;right:1rem;top:1rem;width:15rem;z-index:1;} #regenThbsToggle{display:none;} .toggle{width:2rem;height:2rem;background:var(--box);border-radius:.25rem;color:var(--m);display:flex;flex-direction:row;align-items:center;justify-content:center;cursor:pointer;font-size:.8rem;} #project{flex-grow:1;color:var(--g100);display:flex;flex-direction:row;align-items:center;height:2rem;padding:0 .7rem; } #userIcon{display:none;width:2rem;height:2rem;position:relative;background: transparent url(../../img/curate/user.png) no-repeat 50% 55%;background-size: 1.6rem;opacity:.4;cursor:pointer;} #userXhandle{display:none;position:absolute;right:0;top:0;padding:.5rem 1rem;background:var(--box);color:var(--g100);border-radius:.5rem;white-space: nowrap;border:1px solid var(--border)} #userIcon:hover{opacity:1;} #userIcon:hover #userXhandle{display:block;} .at{line-height:3.5rem;font-size:1.5rem;color:var(--border);font-weight:bold;} #themeToggle{background: transparent url(../../img/curate/light.png) no-repeat 50% 50%;background-size: 1.8rem;} /* thumbs */ #thbsContainer{flex-grow:1;position:relative;margin-top:3rem;} #thbsScroll{overflow-y: auto;overflow-x: hidden;position:absolute;left:.5rem;top:0;bottom:.5rem;right:0;line-height:1;font-size:0;} .thbCell{margin:.25rem;background:var(--box);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;overflow: hidden;cursor:pointer;vertical-align: top;width:100px; height:100px;position:relative;border-radius:.2rem} .actionedThb{position:absolute;left:0;top:0;bottom:0;right:0;display:flex;flex-direction:row;align-items:center;justify-content:center;color:var(--g100);font-size:.7rem;background:var(--gA0);text-align:center;line-height:1.4;} #thbCover{position:absolute;left:0;top:0;bottom:0;right:0;background:transparent;} /* button container */ #btnContainer{background:var(--box);border-bottom-right-radius:1rem;border-top-right-radius:1rem;padding:2rem;display:flex;flex-direction:column;gap:2rem;position:relative;} #wrapper{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-grow:1;background:var(--box);border-radius:1rem;border-bottom-right-radius:0;position:relative;} .btns{display:flex;gap:.9rem;flex-direction:column;} /* buttons */ .iconBtn{background-color: var(--btnBG);border:0.25rem solid var(--btnBorder);flex-grow:1;border-radius:.7rem;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--g100);font-size:.9rem;height:3rem;font-weight:bold;} /* .iconBtn:hover{background:#333;} */ .collect{height:4rem;} .regen{height:3rem;padding-top:3rem;background: var(--btnBG);position:relative;} .regen::before {content: "";position: absolute;top: 33%;left: 50%;width: 3rem;height: 3rem;margin: -1.5rem 0 0 -1.5rem;background: url(../../img/curate/regenW.png) no-repeat 50% 50%; background-size: 2rem;z-index: 0;} .regen.spin::before {animation: spin 2s linear infinite;} @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .download{background: var(--btnBG) url(../../img/curate/printW.png) no-repeat calc(100% - 1rem) 50%;background-size: 1.8rem;justify-content:start;padding-left:1.1rem;} .numBubble{display:inline-block;padding:.2rem .4rem;background:var(--gA30);color:var(--m);font-size:.8rem;margin-left:.4rem;border-radius:.3rem;} .btnLabel{color:#999; font-size:0.8rem;text-align:center;} #btnCover{position:absolute;left:1rem;top:1rem;bottom:1rem;right:1rem;background:var(--box);opacity:.7;} .row{display:flex;flex-direction:row;gap:.5rem;} #mintBtns{display:none;} /* iframe */ /* box-shadow: 0 0.3rem 0.5rem rgba(0,0,0,0.3); */ #artShadow{position:absolute;} #iframeContainer{border:none;z-index:2;} #loaderCont{position:absolute;left:0;top:0;bottom:0;right:0;display:flex;align-items:center;justify-content:center;z-index:1;flex-direction:column;gap:1rem;} #loader { border:0.2rem solid #aaa; border-radius:50%; border-top:0.2rem solid var(--g100); width:15vh; height:15vh; animation:spinner 4s linear infinite;box-sizing: border-box; } #loaderText { text-align:center;font-size: 1rem;color:#999; } @keyframes spinner { 0% { transform:rotate(0deg); }100% { transform:rotate(360deg); } } /* Black out */ #blackOut{position:fixed;top:0;left:0;bottom:0;right:0;background:var(--bg);display:none;z-index:10;flex-direction:column;align-items:center;justify-content:center;padding:3rem;gap:2rem;} .blackoutOptions{display:flex;flex-direction:row;align-items:center;justify-content:center;} #msg{color:var(--g100);font-size:2rem;line-height:2rem;} #countDown{color:var(--g100);font-size:1.2rem;line-height:2rem;} #captureEmail{flex-direction:column;gap:0.5rem;color:var(--g100);align-items:center;justify-content:center;font-size:2rem;} #userX{font-size:1rem;width:20rem;padding:0 1.2rem;border:0.25rem solid var(--g100);background:var(--box);border-radius:.7rem;display:inline-block;color:var(--m);height:3rem; line-height:3rem;} #userX.invalid{border-color:var(--red)} #userX.inFocus{color:var(--g100);height:3rem; line-height:3rem;} .submitBtn{background-color: var(--btnBG);border-radius:.7rem;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--g100);font-size:.9rem;height:3.5rem;font-weight:bold;padding:0 2rem;margin-left:.3rem;cursor:pointer;} #submitXhandle{justify-content:center;color:var(--m);display:none;} .proceedToMint{padding:1rem 2rem;font-size:2rem;border:0.25rem solid #444;margin-top:1rem;} .note{font-size:1rem;} .close{position:relative;width:3rem; height:3rem;cursor:pointer;z-index:10} .close:before, .close:after {position: absolute;left: 46%;content: ' ';top:6%;height: 88%;width: 8%;background-color: var(--g100);} .close:before {transform: rotate(45deg);} .close:after {transform: rotate(-45deg);} .close:hover{background-color: var(--g0);} #blackOut .close{position:absolute;top:1rem;right:1rem;} .pane .close{position:absolute;top:1rem;right:1rem;} #seedInput{font-size:1rem;width:3rem;padding:1rem;border:0.25rem solid var(--g0);background:var(--gA50);text-align:center; border-radius:.7rem;display:block;color:var(--g100);height:1rem;margin:0;} #prevOutput, #nextOutput{width:2rem;} #gallery{position:absolute;top:0;right:0;left:0;bottom:0;display:none;z-index:10;} #galleryScroll{position:absolute;top:3rem;left:0;bottom:0;right:0;background:var(--bg);padding:1rem 0;text-align:center;} .blackoutMSG{line-height:1.4;text-align:center;margin-bottom:2rem;padding:0 2rem;} .link{width:16rem;color:var(--g100);background:var(--box);cursor:pointer;margin:0.8rem auto;text-align:center;padding:0.5rem 1rem; border:1px solid var(--border); border-radius:0.5rem;} .linkList{position:absolute;top:5rem;right:0;left:0;bottom:0;padding:1rem 0 3rem;} .linkNote{color:var(--m);margin-top:.4rem;font-size:.9rem;} .scrollable-element { overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; /* Ensures smooth momentum scrolling on iOS */ } /* 2. Force the WebKit scrollbar engine to register a custom size */ .scrollable-element::-webkit-scrollbar { -webkit-appearance: none; width: 8px; /* Thickness of vertical scrollbar */ height: 8px; /* Thickness of horizontal scrollbar */ } /* 3. Style the track (background of the scrollbar) */ .scrollable-element::-webkit-scrollbar-track { background: var(--box); border-radius: 4px; border:1px solid var(--border); } /* 4. Style the thumb (the moving bar) to make it visible */ .scrollable-element::-webkit-scrollbar-thumb { background-color: var(--gA50); /* Semi-transparent black */ border-radius: 4px; } #galleryTopBar{position:absolute;top:0;right:0;left:0;height:3rem;display:flex;justify-content:space-between;padding-left: 1rem;color:var(--m);align-items:center;background:var(--box);z-index:20;box-shadow: 0 0 0.6rem rgba(0,0,0,0.6);border-bottom:1px solid var(--m);} #galleryTopBar.starBorder{border-bottom:1px solid var(--gold);} #findNextTitle{display:none;cursor:pointer;text-decoration:underline;} .totalTab{cursor:pointer;padding:.4rem .7rem;border:1px solid var(--gA30);border-radius:.25rem;} .totalTab:hover{background:var(--g0)} .selectedTab{border:none;border-top:.25rem solid transparent;border-bottom:.25rem solid var(--g100);border-radius:0;cursor:default;padding:.5rem .7rem;margin:0 1px;} .selectedTab .totalNum{color:var(--g100)} .totalTab.selectedTab:hover{background:transparent;} .totalNum{color:var(--m);cursor:pointer;font-weight:bold;} #galContainer{display: flex; flex-wrap: wrap;justify-content:center;gap:.5rem;} .galCell{position:relative;width:27rem;height:27rem;background:var(--box);display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:1rem;} .galCell.addTitleInput{height:29.7rem;} .imgCell{position:relative;width:27rem;height:27rem;display:flex;flex-direction:row;align-items:center;justify-content:center;} .imgCell img{max-width:25rem; max-height:25rem;opacity: 0;transition: opacity .5s ease-in-out;} .discardBtn, .launchBtn{top:.5rem;} .starBtn, .titleBtn,.titleChars{bottom:.5rem;} .discardBtn, .launchBtn, .starBtn, .titleBtn{position:absolute;width:2.6rem; height:2.6rem;background-color: transparent;border-radius:.25rem;cursor:pointer;border-radius:50%;} .discardBtn, .starBtn{right:.5rem;} .launchBtn, .titleBtn, .titleChars{left:.5rem;} .showGallery{background: var(--box) url(../../img/curate/galW.png) no-repeat calc(100% - 1rem) 50%;background-size: 1.5rem;height:3rem;flex-grow:0;justify-content:start;padding-left:1rem;margin:.5rem;border:1px solid var(--border);border-radius:.4rem;display:none;box-shadow:none;cursor:pointer;display:flex;align-items:center;justify-content:start;color:var(--g100);font-size:.9rem;height:3rem;font-weight:bold;} #pdfOptions{display:none;} #formatBtns{justify-content:center;} .radio{position:relative;height:2rem;line-height:2rem;margin-right:3rem;color:var(--g100);cursor:pointer;} .radio::before{position: absolute;right:-2rem;content: ' ';top:0;height: 1.6rem;width: 1.6rem;background-color: var(--box);border-radius:50%;border:1px solid var(--border);box-sizing:border-box} .radioSelected::after{position: absolute;right:-2rem;content: ' ';top:0;height: 1.6rem;width: 1.6rem;background-color: var(--g100);border-radius:50%;box-sizing:border-box;border:7px solid var(--border);} #msgs{position:absolute;height:3rem;right:0;left:0;bottom:0;z-index:50;width:16rem;left:50%;margin-left:-8rem;} .msg{position:absolute;color:var(--g100);background:var(--g0);bottom:0;padding:1rem 0;right:0;left:0;text-align:center;display:none;box-shadow: 0 0 0.6rem rgba(0,0,0,0.6);} #msg_discard, #msg_error{background:var(--red)} #toTop{position:absolute;bottom:0;right:0;height:3rem;background-color: var(--box);border-top-left-radius:1rem;cursor:pointer;color:var(--m);line-height:3rem;padding:0 1rem;display:none;} .launchBtn{background: var(--gA15) url(../../img/curate/launchW.png) no-repeat 67% 50%;background-size: 1.6rem;} .titleBtn{background: var(--gA15) url(../../img/curate/titleW.png) no-repeat 50% 50%;background-size: 1.4rem;} .starBtn{background: var(--gA15) url(../../img/curate/starW.png) no-repeat 50% 50%;background-size: contain;} .discardBtn{background: var(--gA15)} /* .discardBtn.discarded{background-color: rgba(255,0,0,.3);} */ .titleChars{display:none;align-items:end;justify-content:center;font-weight:bold;color:var(--m);opacity:.5;position:absolute;width:2.6rem; height:2.6rem;font-size:.7rem;} .titleChars.invalid{color:var(--red)} .discardBtn:before, .discardBtn:after {position: absolute;left: 46.3%;content: ' ';top:10%;height: 80%;width: 7.4%;background-color: var(--bg);} .discardBtn:before {transform: rotate(45deg);} .discardBtn:after {transform: rotate(-45deg);} .discardBtn:hover{background-color: var(--redA30);} .discardBtn.discarded:hover{background-color: var(--m);} .launchBtn:hover, .titleBtn:hover, .starBtn:hover{background-color: var(--gA30);} #discarded, .msgDiscarded{color: var(--red);} #discarded{display:none;} #starred, .msgStarred{color: var(--gold)} .galCell, #wrapper, #btnContainer{border:1px solid var(--border);} #btnContainer{border-left:none;} .starBtn.starred{border-radius:50%;} .starBtn.starred,.discardBtn.discarded, .addstar:hover{background-color: var(--goldA30);} .starBtn.starred:hover{background-color: var(--gA30);} .undoDiscard{border-bottom:1px solid var(--m);margin-left:.4rem;line-height:1.1rem;display:inline-block;color:var(--m);cursor:pointer;} input.titleCell{border:none;background:var(--gA15);border-radius:1rem;display:block;color:var(--m);padding:.5rem 1rem;font-size:1rem;width:calc(100% - 1rem);font-style:italic;text-align:center;box-sizing:border-box;cursor:pointer;} input.titleCell.titled{background:transparent;font-size:.9rem;} input.titleCell:focus, input.titleCell.titled:focus{color:var(--g100);background:var(--gA30);text-align:left;cursor:auto;} input.titleCell.invalid{color:var(--red)} [data-theme="light"]{ .regen::before{background-image: url(../../img/curate/regenB.png); } .showGallery{background-image: url(../../img/curate/galB.png); } .starBtn{background-image: url(../../img/curate/starW.png); } .launchBtn{background-image: url(../../img/curate/launchW.png); } .titleBtn{background-image: url(../../img/curate/titleW.png); } .galCell img, #artShadow{box-shadow: 0.1rem 0.3rem 0.6rem rgba(0,0,0,0.4);} #themeToggle{background-image: url(../../img/curate/dark.png);} .iconBtn{box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,0.1);} #toTop{box-shadow: 0 0 .8rem rgba(0,0,0,.3);} .download{background-image: url(../../img/curate/printB.png);} } [data-theme="dark"]{ .regen::before{ background-image: url(../../img/curate/regenW.png); } .showGallery{ background-image: url(../../img/curate/galW.png); } .starBtn{ background-image: url(../../img/curate/starB.png); } .launchBtn{ background-image: url(../../img/curate/launchB.png); } .titleBtn{background-image: url(../../img/curate/titleB.png); } .galCell img, #artShadow{box-shadow: 0.1rem 0.3rem 0.8rem rgba(0,0,0,1);} #themeToggle{background-image: url(../../img/curate/light.png);} .iconBtn{box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,0.3);} #toTop{box-shadow: 0 0 1rem rgba(0,0,0,1);} .download{background-image: url(../../img/curate/printW.png);} } @media screen and (max-width: 1000px){ #btnContainer{padding:1.3rem;} } @media screen and (max-width: 460px){ html{font-size: 15px;} } @media screen and (max-width: 430px){ html{font-size: 14px;} } @media screen and (max-width: 400px){ html{font-size: 13px;} } @media screen and (max-width: 360px){ html{font-size: 12px;} } /* Portrait (height > width) */ @media (max-aspect-ratio: 1/1) { #layout{flex-direction:column;} .btns{flex-direction:row;} #thbsContainer{display:none;} #btnContainer{border-bottom-left-radius:1rem;border-top-right-radius:0;border:1px solid var(--border);border-top:none;} #btnSeg{width:auto;} #wrapper{border-bottom-left-radius:0} #layout{top:4rem;} #header{left:1rem;width:auto;} .intro, .at{display:none;} #submitXhandle{flex-direction:column;} #userX{width:auto;} }