style.css

body {font-family:Arial;color:#F0F0F0;background-color:#202020;font-size:16px;line-height:20px;text-align:left;margin:0;padding:0 0 14px 0;overflow-y:scroll;}
div,img,span {border:none;margin:0;padding:0;}
a:link, a:visited {color:#FFF;text-decoration:none;}

/* head */
.header {font-size:18px;line-height:44px;padding-left:8px;background-color:#1B1B1B;box-shadow:0 3px 6px 0 #000;margin-bottom:14px;}
.header a:hover {text-decoration:underline;}
#breadcrumbs {display:inline;}
.optionsBar {float:right;margin:8px 0;line-height:0;}
.floatClearBar {clear:both;}
select {appearance:none;font-size:14px;color:white;background:none;padding:4px 8px;margin-right:6px;vertical-align:top;border:1px solid #777;border-bottom-color:#000;border-right-color:#000;border-radius:21px;cursor:pointer;}
select option {font-size:16px;color:#FFF;background:#202020;}
select:hover {border-color:#000;border-bottom-color:#777;border-right-color:#777;}
select:focus {outline:none;}

/* files */
.dirs {margin-bottom:8px;}
.dirs a {display:inline-block;padding:15px 6px;margin:6px;background:linear-gradient(to bottom,#333,#202020);border-bottom:1px solid black;border-radius:7px;}
.dirs a:hover {background:linear-gradient(to bottom,#444,#222);}

.imgContainer {position:relative;line-height:0;margin-bottom:10px;border-radius:10px;overflow:hidden;box-sizing:border-box;}
.imgErrContainer {position:relative;min-height:84px;min-width:120px;margin-bottom:10px;border:5px solid #B00;box-sizing:border-box;}

.picsRow {display:flex;flex-flow:row wrap;width:100%;}
.picsRow .imgContainer {height:268px;margin:5px;flex-grow:1;}
.picsRow .imgErrContainer {margin:5px;}
.picsRow img {height:100%;width:100%;border-radius:10px;object-fit:cover;object-position:center;box-sizing:border-box;}

.picsCol .col {display:inline-block;padding:0 5px;box-sizing:border-box;vertical-align:top;}
.picsCol img {width:100%;box-sizing:border-box;}

.picsRow div:hover span, .picsCol .col div:hover span {height:64px;}
.picsRow span, .picsCol span {display:flex;align-items:end;position:absolute;bottom:0;left:0;height:0;width:100%;padding:0 4px;line-height:20px;box-sizing:border-box;overflow:hidden;transition:.3s ease;color:#CCC;background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,1));overflow-wrap:anywhere;white-space:pre-wrap;pointer-events:none;}

@media (min-width:2570px) and (min-height:1450px) {.picsRow div {height:310px;}}

/* albums */
#albumContainer {display:none;margin:12px;background-color:#383838;border:3px solid #5c275e;border-radius:7px;}
#albumContainer h1 {display:block;font-size:30px;padding:8px 12px;margin:0;background-color:#5c275e;}
.albumLink {display:block;background-color:#444;padding:4px 10px;margin:6px;border-bottom:1px solid black;border-radius:5px;}
.albumLink:hover {background-color:#555;}

/* FS viewer */
#fullViewImg {max-height:100%;max-width:100%;margin:auto;object-fit:contain;cursor:zoom-in;}
.viewer {display:none;justify-content:start;align-items:center;position:fixed;z-index:1;inset:0;background:#000B;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;}
.viewer::-webkit-scrollbar {display:none;}
.viewer span {display:flex;position:fixed;font-size:10vh;line-height:8vh;font-weight:bold;width:10%;color:#999;opacity:.25;}
.viewer span[close] {top:0;right:0;height:12.5%;justify-content:end;align-items:start;}
.viewer span[next] {top:37.5%;right:0;height:25%;justify-content:end;align-items:center;}
.viewer span[previous] {top:37.5%;left:0;height:25%;justify-content:start;align-items:center;}
.viewer span[fullscreen] {top:0;left:0;height:12.5%;justify-content:start;align-items:start;}
.viewer span[carousel] {bottom:0;right:0;height:12.5%;justify-content:end;align-items:end;}
.viewer span:hover {opacity:.6;cursor:pointer;}

:root {scrollbar-width:thin !important;scrollbar-color:#000 #0000 !important;}
::selection {color:#990000;background:#000000;}