gallery.min.css

@charset "utf-8";:root{--highlight-icon-color:rgba(240,240,240,1);--default-icon-color:rgba(220,220,220,0.9);--dark-icon-color:rgba(220,220,220,0.7);--highlight-text-color:rgba(220,220,220,0.9);--default-text-color:rgba(220,220,220,0.7);--dark-text-color:rgba(220,220,220,0.5);--darkest-text-color:rgba(220,220,220,0.4);--subtle-text-color:rgba(220,220,220,0.3);--default-ui-color:rgb(130,130,130);--disabled-ui-color:rgb(110,110,110);--highlight-ui-color:rgb(140,140,140);--default-highlight-pink:hsl(300,25%,45%);--bright-highlight-pink:hsl(300,30%,50%);--brighter-highlight-pink:hsl(300,40%,60%);--darkest-highlight-pink:hsl(300,25%,45%,0.5);--default-font-size:0.875rem;--darkest-bg:rgb(12,12,12);--dark-bg:rgb(26,26,26);--default-bg:rgb(32,32,32);--panel-bg:rgb(42,42,42);--highlight-bg:rgb(60,60,60);--bright-bg:rgb(80,80,80);--border:rgb(64,64,64)}.test{display:flex;align-items:center;justify-content:center;padding:1rem 3rem 1rem 3rem;color:#0ff}body{background-color:#fff;display:grid;grid-template-areas:"head head" "side main";grid-template-rows:3.5rem 1fr;grid-template-columns:15rem 1fr;height:100vh;max-height:100vh;margin:0;font-family:Roboto,sans-serif;font-size:var(--default-font-size);background-color:var(--darkest-bg)}.header{grid-area:head;z-index:3;background-color:var(--default-bg);box-shadow:0 .1vw .4vw 0 rgba(0,0,0,.32);position:relative;display:flex;justify-content:flex-end;align-items:center;color:var(--default-text-color);font-size:1.5rem;padding-left:18.5rem;padding-right:3.5rem}p{margin:0}.navigation a{color:inherit;text-decoration:none;padding-left:2rem;padding-right:2rem;height:100%;align-items:center;display:flex;transition:color .15s}.navigation{align-self:center;margin-left:auto;margin-right:auto;display:flex;font-size:1.125rem;color:var(--default-text-color);height:100%}.icons{width:2rem}.navigation a[active]{background-color:var(--darkest-bg);color:var(--highlight-icon-color)}.navigation a:hover{color:var(--highlight-icon-color)}.youtube-link{color:var(--default-icon-color)}.youtube-link:hover{color:var(--highlight-icon-color)}.youtube-link:active{color:var(--dark-icon-color)}.sidebar{display:flex;flex-direction:column;grid-area:side;z-index:2;background-color:var(--dark-bg);overflow:hidden;box-shadow:.1rem 0 .4rem 0 rgba(0,0,0,.32);position:relative;pointer-events:auto;width:15rem}.side-container{min-width:200%;max-width:200%;display:grid;grid-template-columns:1fr 1fr;transition:transform 1s;will-change:transform;position:relative;flex:1;visibility:visible}.side1{padding-top:.75rem;padding-left:.3rem;padding-right:.3rem;overflow:hidden;width:15rem;box-sizing:border-box}.side2{display:flex;flex-direction:column;width:15rem}@media (max-width:62rem){.sidebar{grid-template-columns:1fr}}.main{overflow-y:auto;padding:1rem 3rem 1rem 3rem;box-sizing:border-box;height:calc(100vh - 3.5rem);box-shadow:0 0 0 2rem #000;filter:blur(0) brightness(100%);grid-row:1;grid-column:1;transition:filter .9s;position:relative}.audio-controls{width:80%;height:3.5rem;display:flex;align-self:center;margin-bottom:1rem;color:var(--default-text-color);position:relative}.audio-controls-volume{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;align-items:center;justify-content:center;font-size:2rem;width:3.5rem;height:3.5rem;margin-left:.25rem;user-select:none;-ms-user-select:none;-moz-user-select:none;cursor:pointer}.audio-controls-volume i{grid-row:1;grid-column:1;justify-self:center;align-self:flex-start;z-index:2;opacity:1;transition:opacity .25s;display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;position:relative;pointer-events:none}.audio-controls-volume[active2]{cursor:default}.audio-controls-volume[active2] i{opacity:0}.audio-controls-volume:hover .audio-controls-volume-text{opacity:1}.audio-controls-volume[active2] .audio-controls-volume-text{margin-bottom:10.25rem;opacity:1}.audio-controls-volume[active2] .audio-controls-volume-sliderbg{height:10rem}.audio-controls-volume-sliderbg{height:3.5rem;width:3.5rem;grid-row:1;grid-column:1;background-color:var(--panel-bg);box-shadow:0 .1rem .1rem 0 rgba(0,0,0,.32),0 0 0 .05rem rgba(0,0,0,.08);transition:height .5s;display:flex;position:absolute;bottom:0;z-index:1}.audio-controls-volume-sliderfilled{width:100%;height:50%;background-color:var(--bright-bg);align-self:flex-end;box-shadow:-.1rem 0 .1rem 0 rgba(0,0,0,.32),0 0 0 .05rem rgba(0,0,0,.08);position:relative}.audio-controls-volume-text{position:absolute;bottom:0;grid-row:1;grid-column:1;user-select:none;transition:margin-bottom .5s,opacity .15s;opacity:0;margin-bottom:3.75rem;width:3.5rem;font-size:1.5rem;display:flex;justify-content:center;pointer-events:none}.audio-controls-play{display:flex;align-items:center;justify-content:center;font-size:2rem;width:3.5rem;height:100%;background-color:#404040;box-shadow:0 .1rem .1rem 0 rgba(0,0,0,.32),0 0 0 .05rem rgba(0,0,0,.08);margin-right:.25rem;user-select:none;-ms-user-select:none;-moz-user-select:none;cursor:pointer;transition:background .15s}.audio-controls-progress{box-shadow:0 .1rem .1rem 0 rgba(0,0,0,.32),0 0 0 .05rem rgba(0,0,0,.08);background-color:var(--panel-bg);overflow:hidden;height:100%;flex-grow:1;display:grid;grid-template-rows:1fr;grid-template-columns:1fr;user-select:none;-ms-user-select:none;-moz-user-select:none}.audio-controls-progress-bar{grid-row:1;grid-column:1;height:100%;width:0%;box-shadow:.1rem 0 .1rem 0 rgba(0,0,0,.08)}.audio-controls-progress-elapsed{grid-row:1;grid-column:1;align-self:center;justify-self:flex-start;width:fit-content;margin-left:.75rem;font-size:1.1rem;user-select:none;-ms-user-select:none;-moz-user-select:none;pointer-events:none;cursor:default}.audio-controls-progress-total{grid-row:1;grid-column:1;align-self:center;justify-self:flex-end;width:fit-content;margin-right:.75rem;font-size:1.1rem;user-select:none;-ms-user-select:none;-moz-user-select:none;pointer-events:none;cursor:default}.highlight{grid-row:1;grid-column:1;display:grid;grid-template-rows:1fr;grid-template-columns:1fr;z-index:1;opacity:0;pointer-events:none;padding-left:3rem;padding-right:3rem;padding-top:3rem;padding-bottom:3rem;height:calc(100vh - 3.5rem);box-sizing:border-box;transition:opacity .25s;position:relative}.highlight-image-container{grid-row:1;grid-column:1;display:none;grid-template-rows:1fr;grid-template-columns:1fr;max-width:100%;height:fit-content;align-self:center;justify-self:center;border:.125rem solid var(--border);z-index:1;position:relative}.highlight-song-resize{grid-row:1;grid-column:1;display:flex;flex-direction:column;justify-content:center;pointer-events:none;position:relative}.highlight-song-container{display:none;flex-direction:column;box-sizing:border-box;flex-grow:1;flex-shrink:1;height:auto;max-height:28rem;width:calc((100vh - 9rem) * (16/9) - .25rem);max-width:calc(28rem * (16/9) - .25rem);align-self:center;justify-self:center;border:.125rem solid var(--border);background-color:var(--dark-bg);overflow:hidden;pointer-events:all;z-index:1;position:relative}.highlight-image{max-width:100%;max-height:calc(100vh - 9rem - .25rem);width:auto;object-fit:scale-down;box-sizing:border-box;grid-row:1;grid-column:1}.highlight-song{display:none}.highlight-load{padding:2rem;color:var(--default-text-color);background-color:var(--dark-bg);border:.125rem solid var(--border);grid-row:1;grid-column:1;z-index:100;opacity:1;transition:opacity 0s;align-self:center;justify-self:center;pointer-events:none;user-select:none;-ms-user-select:none;-moz-user-select:none;position:relative}.highlight-image-container:hover .highlight-image-overlay-container{opacity:1}.highlight-image-overlay-container{display:fiex;height:25%;width:auto;min-height:10rem;opacity:0;transition:opacity .5s;z-index:1;grid-row:1;grid-column:1;align-self:flex-end;position:relative}.highlight-image-overlay-falloff{width:auto;height:40%;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.22),rgba(0,0,0,.43),rgba(0,0,0,.65))}.highlight-image-overlay{width:auto;height:60%;background:rgba(0,0,0,.65);display:flex;flex-direction:column}.highlight-image-overlay-download{margin-left:2rem;margin-bottom:2rem;margin-right:2rem;margin-top:auto;display:flex;align-items:flex-end;cursor:pointer;color:var(--dark-text-color);transition:color .15s;height:fit-content;width:fit-content}.highlight-image-overlay-download:hover{color:var(--highlight-text-color)}.highlight-image-overlay-download:active{color:var(--darkest-text-color);transition:color 0s}.highlight-song-overlay{width:100%;flex-grow:1;z-index:1;color:var(--default-text-color);display:flex;flex-direction:column;align-items:center;max-height:100%;margin-bottom:2rem}.highlight-song-overlay-title{font-size:1.1rem;margin-bottom:2rem;user-select:none;-ms-user-select:none;-moz-user-select:none;cursor:default;white-space:nowrap;max-width:100%;text-overflow:ellipsis;overflow:hidden;padding-left:2rem;padding-right:2rem;box-sizing:border-box}.highlight-song-overlay-type{margin-top:2rem;font-size:2rem;margin-bottom:1.5rem;font-weight:700;user-select:none;-ms-user-select:none;-moz-user-select:none;cursor:default;max-width:100%;text-overflow:ellipsis;overflow:hidden;box-sizing:border-box}.highlight-song-overlay-download{flex-grow:1;margin-left:auto;margin-right:auto;display:flex;justify-content:center;align-items:center;cursor:pointer;color:var(--highlight-bg);transition:color .15s;min-height:3rem}.highlight-song-overlay-download:hover{color:var(--subtle-text-color)}.highlight-song-overlay-download:active{color:var(--panel-bg);transition:color 0s}.main-wrapper{grid-area:main;overflow:hidden;display:grid;grid-template-columns:1fr;grid-template-rows:1fr}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));grid-gap:1rem;width:calc(100vw - 15rem - 6rem)}.sixteenbynine{position:relative;padding-top:calc((100% - 4px) * .5625);margin:2px;background-color:#202020;transition:background-color 3s}.sixteenbynine.reduced{margin:0;padding-top:56.25%}.gallery-image{position:absolute;object-fit:cover;width:100%;height:100%;top:0;left:0;right:0;bottom:0;opacity:0;flex-direction:column;color:#202020;transition:opacity 3s;box-shadow:inset 0 .1rem .1rem 0 rgba(0,0,0,.16),0 0 0 .05rem rgba(0,0,0,.08);visibility:visible}.grid-item{overflow:hidden;box-shadow:0 .25rem 1.5rem -.55rem rgba(0,0,0,.75);position:relative;cursor:pointer}.image-ui-container{position:absolute;top:0;left:0;bottom:0;right:0;z-index:1;filter:drop-shadow(0 0 .2rem rgba(0,0,0,.5));visibility:visible}.image-ui-container.reduced{position:relative;z-index:0;clip-path:initial;filter:initial}.image-ui-container.reduced .image-frame{display:none}.image-bar{position:absolute;top:0;left:0;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;color:#dcdcdc;background-color:#202020;padding-top:.75rem;padding-bottom:.75rem;padding-left:.75rem;padding-right:2.5rem;transition:background-color 2s;clip-path:polygon(0 0,100% 0,calc(100% - 2rem) 100%,0 100%)}.image-bar.reduced{padding-right:.75rem;clip-path:initial;position:relative}.image-frame{position:absolute;top:0;left:0;bottom:0;right:0;z-index:1;background-color:#202020;transition:background-color 2s;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 0,2px 2px,2px calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 2px,2px 2px)}@supports(-ms-ime-align:auto){.image-frame{opacity:0}.image-bar{padding-right:.75rem;clip-path:initial;position:relative;width:calc(100% - 1.5rem)}.image-bar.reduced{padding-right:.75rem;clip-path:initial;position:relative}.sixteenbynine{margin:0}.image-ui-container{position:relative;z-index:0;clip-path:initial}.main{filter:brightness(100%)}}.image-title{font-weight:500;font-size:1rem;align-self:center;justify-self:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1rem;user-select:none;-ms-user-select:none;-moz-user-select:none;overflow:visible}.loadmore{display:none;height:3rem;grid-template-columns:1fr;align-items:center;justify-content:center;margin-top:2rem;margin-bottom:1rem;width:fit-content;color:rgba(220,220,220,.9);margin-left:auto;margin-right:auto}#loadmore2{align-self:center;justify-self:center}#loadmore{visibility:visible}#loadmore-indicator{width:15rem;height:3rem;border:none;font-size:1rem;outline:0;cursor:pointer;background-color:var(--bright-bg);color:var(--default-text-color);transition:background-color .15s}#loadmore-indicator:hover{background-color:var(--default-ui-color)}#loadmore-indicator:active{background-color:var(--panel-bg);transition:background-color 0s}.spinnerContainer{display:flex;justify-content:center;align-items:center;width:100%;height:100%;opacity:0;transition:opacity .5s}.scrollbar-measure{overflow-y:scroll;width:100px;height:100px;position:absolute;top:-9999px}img{text-align:center;width:100%;display:block;position:relative;overflow:hidden}img:after{content:"🔗" " Image Error";color:#dcdcdc;display:block;position:absolute;z-index:2;padding-top:20%;top:0;left:0;width:100%;height:100%;background-color:#202020}.explorer{padding-left:.3rem;padding-right:.3rem;padding-top:.5rem;padding-bottom:.5rem;color:var(--default-text-color);height:calc(100vh - 10rem);box-sizing:border-box;overflow-y:auto;display:grid;grid-template-columns:1fr;grid-template-rows:100%}.explorer-loaded{grid-row:1;grid-column:1}.explorer-loading{grid-row:1;grid-column:1;background-color:#1a1a1a;outline:5px solid #1a1a1a;z-index:1;display:flex;justify-content:center;align-items:center;height:100%}.explorer::-webkit-scrollbar,.main::-webkit-scrollbar,.scrollbar-measure::-webkit-scrollbar{width:.5rem}.explorer::-webkit-scrollbar-thumb,.main::-webkit-scrollbar-thumb{background-color:#646464}.explorer-box-files,.explorer-box-images{background-color:#1a1a1a;height:fit-content;overflow:hidden}.explorer-box-item{background-color:var(--panel-bg);display:grid;grid-template-columns:1fr 3rem;height:3rem;box-sizing:border-box;margin:2px;margin-top:1px;box-shadow:0 .1rem .1rem 0 rgba(0,0,0,.32),0 0 0 .05rem rgba(0,0,0,.08);position:relative;cursor:pointer;border:solid .0625rem var(--panel-bg);transition:border .15s}.explorer-box-item:hover{background-color:var(--highlight-bg)}.explorer-box-item[active]{border:solid .0625rem #8f568f}.explorer-box-item-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;user-select:none;-ms-user-select:none;-moz-user-select:none;padding-left:.9375rem;height:100%;display:block;line-height:3rem;align-items:center;transition:background .15s}.explorer-box-item:hover .item-options{visibility:visible}.item-options{min-width:3rem;display:flex;height:100%;width:auto;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;visibility:hidden;font-size:1.3rem}.fa-ellipsis-v{transition:color .15s}.item-options:hover .fa-ellipsis-v{color:rgba(220,220,220,.95)}.explorer-box-content{display:grid}.explorer-box-files-title,.explorer-box-images-title{margin-left:.75rem;margin-bottom:.75rem;user-select:none;-ms-user-select:none;-moz-user-select:none;cursor:default;font-weight:500;font-size:var(--default-font-size);font-family:Roboto;color:var(--dark-text-color)}.explorer-box-images-title{margin-top:2rem}.explorer-box-files-title{margin-top:1.5rem}.spinner{width:40px;height:40px;position:relative;margin-right:17px;margin-bottom:17px}.cube1,.cube2{background-color:rgba(100,100,100,.8);width:15px;height:15px;position:absolute;top:0;left:0;animation:sk-cubemove 1.8s infinite ease-in-out}.cube2{animation-delay:-.9s}@keyframes sk-cubemove{25%{transform:translateX(42px) rotate(-90deg) scale(.5)}50%{transform:translateX(42px) translateY(42px) rotate(-179deg)}50.1%{transform:translateX(42px) translateY(42px) rotate(-180deg)}75%{transform:translateX(0) translateY(42px) rotate(-270deg) scale(.5)}100%{transform:rotate(-360deg)}}.return{width:3rem;min-width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--dark-text-color);font-size:1.35rem;transition:color .15s}.return:hover{color:var(--highlight-text-color)}.return-title{color:var(--default-text-color);justify-self:center;align-self:center;font-size:1rem;font-weight:500;overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap;flex-grow:1;padding-left:.8rem;padding-right:.5rem;user-select:none;-ms-user-select:none;-moz-user-select:none;cursor:default}.side2-header{width:100%;display:flex;flex-direction:row;background-color:#1a1a1a;transition:background-color .75s}.cred-divider{height:.05rem;margin-bottom:1rem;width:calc(100% - 3rem);background-color:rgba(220,220,220,.3)}.side-divider{height:.05rem;margin-top:1rem;margin-bottom:1.5rem;margin-left:.5rem;margin-right:.5rem;background-color:rgba(220,220,220,.3)}.cred{cursor:default;grid-column:1/-1;color:var(--subtle-text-color);margin-top:.8rem;margin-bottom:1rem;display:flex;flex-direction:column;justify-content:center;align-items:center;visibility:visible;user-select:none;-ms-user-select:none;-moz-user-select:none}.option{margin-top:.5rem;margin-bottom:.5rem;margin-left:.5rem;color:var(--default-text-color);font-weight:400;display:grid;grid-template-columns:1fr min-content;grid-auto-rows:2.25rem;height:2.25rem;max-height:2.25rem;align-items:center}.option-title{display:flex;align-items:center;height:100%;user-select:none;-ms-user-select:none;-moz-user-select:none}.option-toggle{position:relative;width:2.25rem;height:100%;overflow:visible;cursor:pointer;padding-right:.5rem;padding-left:.5rem}.option-toggle-line{position:absolute;height:.75rem;width:calc(100% - 1rem);right:.5rem;top:.75rem;border-radius:.5rem;background-color:#0c0c0c}.option-toggle-circle{position:absolute;height:1.25rem;width:1.25rem;right:.5rem;top:.5rem;z-index:3;border-radius:1rem;background-color:var(--disabled-ui-color);transform:translateX(0);transition:transform 60ms ease,background-color 60ms ease;box-shadow:0 .1rem .2rem 0 rgba(0,0,0,.3)}.option-toggle:hover .option-toggle-circle{transition:transform 60ms ease,background-color .15s ease;background-color:var(--highlight-ui-color)}.option-toggle-cover{position:absolute;height:.75rem;width:calc(100% - 1rem);right:-.5rem;top:-.25rem;z-index:2;border-radius:2rem;border-color:#1a1a1a;border-style:solid;border-width:1rem;background-color:rgba(0,0,0,0);pointer-events:none}.option-toggle-trail{position:absolute;height:.75rem;width:calc(100% - 1rem);right:.5rem;transform:translateX(calc(100% - .25rem));top:.75rem;border-radius:.5rem;background-color:var(--darkest-highlight-pink);transition:transform 60ms ease;z-index:1;pointer-events:none}.option-toggle[noanim] .option-toggle-circle,.option-toggle[noanim] .option-toggle-line,.option-toggle[noanim] .option-toggle-trail{transition:initial}.option-toggle[checked] .option-toggle-circle{transform:translateX(calc(-100% + .25rem));background-color:var(--bright-highlight-pink)}.option-toggle[checked]:hover .option-toggle-circle{background-color:var(--brighter-highlight-pink)}.option-toggle[checked] .option-toggle-trail{transform:translateX(0)}.option-dropdown{display:grid;grid-template-columns:min-content min-content min-content;color:var(--default-text-color);cursor:pointer;height:100%;padding-right:.5rem;padding-left:.5rem;transition:background-color .15s ease}.option-dropdown[active]{cursor:default}.option-dropdown:hover:not([active]){background-color:var(--highlight-bg)}.option-dropdown-selection{display:flex;align-items:center;grid-row:1;grid-column:1;padding-right:.5rem;white-space:nowrap;user-select:none;-ms-user-select:none;-moz-user-select:none}.option-dropdown-arrow{grid-row:1;grid-column:2;display:flex;align-items:center;height:100%;color:var(--default-ui-color);z-index:1;font-size:1rem}.option-dropdown-items{background-color:rgba(0,0,0,0);position:fixed;grid-row:1;grid-column:3;height:fit-content;width:fit-content;display:none;z-index:3;margin-left:.5rem;margin-top:-.0625rem}.option-dropdown-shadowblocker{width:.3rem;position:absolute;top:-.2rem;left:0;bottom:-.3rem;background-color:#1c1c1c;z-index:3}.option-dropdown-items-bg{background-color:#1c1c1c;box-shadow:0 .1rem .2rem .15rem rgba(0,0,0,.32),0 0 0 .05rem rgba(0,0,0,.08);margin-left:.3rem;position:relative}.option-dropdown[active] .option-dropdown-items{display:flex;flex-direction:row}.option-dropdown-item{display:flex;align-items:center;height:1.25rem;border-left:solid .25rem #1c1c1c;padding-left:.5rem;padding-right:.75rem;padding-top:.5rem;padding-bottom:.5rem;cursor:pointer;transition:border .15s ease,background-color .15s ease;user-select:none;-ms-user-select:none;-moz-user-select:none}.option-dropdown-item:hover{background-color:var(--highlight-bg)}.option-dropdown-items-bg:hover .option-dropdown-item[checked]:not(:hover){border-left:solid .25rem var(--default-bg)}.option-dropdown-item:hover,.option-dropdown-item[checked]{border-left:solid .25rem var(--default-highlight-pink)}.option-title{cursor:default}.search-form{background-color:var(--darkest-bg);height:2.375rem;margin-top:.75rem;margin-bottom:.75rem;display:block;color:initial;box-shadow:initial}.search-field{border:none;outline:0;outline:solid .0625rem var(--default-bg);box-shadow:inset 0 0 0 .05rem rgba(0,0,0,.08);padding:0;padding-left:.5rem;padding-right:.5rem;width:calc(100% - 1rem);height:100%;color:var(--dark-text-color);position:relative;font-size:var(--default-font-size);font-family:Roboto,sans-serif;background-color:initial;min-width:initial}.search-field:focus{outline:solid .0625rem var(--default-highlight-pink);outline-offset:0}.search-field:focus::placeholder{color:transparent}.search-field::placeholder{color:var(--darkest-text-color)}.search-field::-ms-input-placeholder{color:var(--darkest-text-color)}