@font-face {
font-family: 'e2icon';
src: url('/e2fileviewer/e2fileviewer.php?file=iconfont') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
[data-ic]:before {
font-family: 'e2icon';
speak: none;
font-style: normal;
font-weight: normal;
font-display: swap;
-webkit-font-smoothing: antialiased;
text-decoration: none !important;
}
* { border: 0; margin: 0; padding: 0; outline: 0; }
:root { --app-width: 1240px; --app-padding: 20px; --bar-height: 50px; --font-size-base: 14px; --primary-dark-rgb: 19, 87, 107; --primary-accent-rgb: 218, 184, 108; --state-success-rgb: 116, 161, 2; --state-info-rgb: 238, 161, 0; --state-error-rgb: 187, 49, 43; --overlay-bg-rgb: 20, 40, 50; --overlay-close-rgb: 242, 109, 125; --text-primary-rgb: 179, 202, 209; --text-secondary-rgb: 255, 255, 255; --text-light-rgb: 255, 255, 255; --bg-page-rgb: 0, 38, 49; --bg-controler-rgb: 19, 87, 107; --border-light-rgb: 255, 255, 255; --border-accent-rgb: 195, 174, 76; --border-success-rgb: 142, 171, 53; --border-error-rgb: 191, 60, 81; --shadow-small: 1px 1px 3px rgba(0, 0, 0, 0.2); --shadow-medium: 0px 4px 5px -4px rgba(0, 0, 0, 0.5); --shadow-large: 3px 3px 8px rgba(0, 0, 0, 0.4); --shadow-controler: 0px 0px 6px rgba(0, 0, 0, 0.5); --shadow-action: 2px 2px 2px rgba(0, 0, 0, 0.3); --shadow-popover: 0px 18px 25px -10px rgba(0, 0, 0, 0.6); --bg-input: rgb(0, 38, 49); --text-input: rgb(255, 255, 255); --overlay-blur: 3px; --overlay-opacity: 0.3; --transition-fast: all 140ms; --transition-normal: all 200ms; --transition-slow: all 300ms; }
body { background-color: rgb(var(--bg-page-rgb)); color: rgb(var(--text-primary-rgb)); overflow: auto; font-size: var(--font-size-base); line-height: 130%; font-family: "Segoe UI", Segoe, Calibri, Tahoma, Geneva, sans-serif; text-align: left; text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2); }
:-webkit-autofill { -webkit-transition-delay: 99999s !important; }
::-webkit-input-placeholder { color: rgba(var(--text-secondary-rgb), 0.2); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4) inset; border-radius: 4px; }
::-webkit-scrollbar-thumb { border-radius: 4px; background: rgba(var(--text-secondary-rgb), 0.4); }
@media (max-width: 460px) { body { --app-padding: 12px; }
}
@media (max-width: 300px) { body { --app-padding: 8px; }
}
h1 { font-weight: 100; margin: 0 0 16px 0; color: rgb(var(--text-light-rgb)); }
h1 small { margin-top: 4px; display: block; font-size: 40%; line-height: 120%; opacity: 0.6; }
a { color: rgb(var(--primary-accent-rgb)); text-decoration: none; transition: var(--transition-normal); }
a:hover { color: rgb(var(--text-light-rgb)); }
input, select { margin: 0; padding: 8px 12px; display: inline-block; max-width: 100%; color: var(--text-input); box-sizing: border-box; border-radius: 3px; border: 1px solid rgba(var(--border-light-rgb), 0.2); background: var(--bg-input); line-height: 128%; font-size: 12px; transition: var(--transition-normal); vertical-align: middle; appearance: none; -webkit-appearance: none; }
input[type="submit"] { text-align: center; text-decoration: none; background-color: #71c0d3; color: rgb(var(--text-light-rgb)); border: 1px solid rgba(0, 0, 0, 0.01); font-weight: bold; letter-spacing: 1px; text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2); min-width: 60px; box-shadow: var(--shadow-medium); }
input[type="submit"][disabled] { opacity: 0.1; pointer-events: none; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus, select:-webkit-autofill:active { -webkit-text-fill-color: var(--text-input) !important; -webkit-box-shadow: 0 0 0 30px var(--bg-input) inset !important; box-shadow: 0 0 0 30px var(--bg-input) inset !important; background-color: var(--bg-input) !important; caret-color: var(--text-input); border: 1px solid rgba(var(--border-light-rgb), 0.2); }
input:-moz-autofill, select:-moz-autofill { filter: none !important; color: var(--text-input) !important; background-color: var(--bg-input) !important; border: 1px solid rgba(var(--border-light-rgb), 0.2); }
input.small { padding: 4px 5px; font-size: 10px; }
select optgroup { font-size: 14px; line-height: 120%; background: #ddd; color: #444; }
select option { padding: 4px 8px; }
#main-submit { position: fixed; display: block; bottom: 8vh; left: calc(50% - 40px); height: 80px; width: 80px; line-height: 24px; opacity: 1; z-index: 40; font-size: 20px; background: rgb(var(--state-error-rgb)); box-shadow: 0px 0px 20px 20px rgb(var(--primary-dark-rgb)); color: rgb(var(--text-light-rgb)); border-radius: 50%; pointer-events: none; transform: scale(0.4) rotateZ(40deg); transition: var(--transition-normal); opacity: 0.0001; }
body.mark-on #main-submit { pointer-events: auto; transform: scale(1) rotateZ(0); opacity: 1; }
#main-submit small { position: absolute; left: 0; bottom: 11px; width: 100%; font-size: 10px; line-height: 120%; }
#page { max-width: var(--app-width); box-sizing: border-box; margin: 0px auto; padding: 60px var(--app-padding) calc(100vh - 200px); position: relative; }
#controler_out { position: fixed; top: 0; left: 0; width: 100%; background: rgba(var(--primary-dark-rgb), 0.92); z-index: 40; box-sizing: border-box; text-align: left; box-shadow: var(--shadow-controler); }
#controler { position: relative; margin: 0px auto; max-width: var(--app-width); height: var(--bar-height); box-sizing: border-box; padding: 0 var(--app-padding); display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; }
@media (max-width: 460px) { #controler { padding: 0; }
}
#controler>*, #controler>button { margin: 0; border: none; background: transparent; color: rgb(var(--text-light-rgb)); flex: 0; box-shadow: none; align-self: center; cursor: pointer; font-size: 8px; text-transform: uppercase; padding: 0 25px; line-height: var(--bar-height); margin: 0 1px 0 0; text-align: center; position: relative; transition: var(--transition-fast); text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3); font-family: inherit; }
@media (max-width: 800px) { #controler>*, #controler>button { padding: 0 20px; }
}
@media (max-width: 700px) { #controler>*, #controler>button { padding: 0 10px; }
}
#controler>*.marked, #controler>button.marked { color: rgb(var(--primary-accent-rgb)); }
#controler input { position: absolute; top: -500px; left: 0px; opacity: 0.1; }
#controler>a>img, #controler>a>.ic, #controler>*::before, #controler>button::before { font-size: 24px; padding: 0 8px 0 0; vertical-align: middle; height: 36px; line-height: 120%; }
#controler>a:first-child { padding: 0; }
#controler>a:first-child>img { padding: 0 10px; transform: translateY(1px); }
#controler>a:first-child>.ic { display: inline-block; min-width: 16px; font-size: 30px; padding: 0 20px; }
@media (max-width: 560px) { #controler>*, #controler>button { font-size: 0px; }
#controler>*::before, #controler>button::before { padding: 0px 10px; }
}
@media (max-width: 440px) { #controler>*::before, #controler>button::before { padding: 0px 4px; }
}
#controler>*:hover, #controler>button:hover { background: rgba(var(--text-secondary-rgb), 0.06); }
#controler>#logout-button, #controler>#login-button { justify-content: flex-end; margin-left: auto; }
ul#smart-message { z-index: 38; position: fixed; left: 0; top: 50px; width: 100%; margin: 0; display: block; list-style-type: none; pointer-events: none; }
ul#smart-message>li { display: block; margin: 0px auto; box-sizing: border-box; padding: 4px; text-align: center; border: 0; font-size: 14px; line-height: 120%; font-weight: 400; border-bottom: 1px solid rgb(var(--border-accent-rgb)); text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.8); color: rgb(var(--border-accent-rgb)); background: rgba(0, 0, 0, 0.4); }
.notify-thumb { width: 20px; height: 20px; vertical-align: middle; border-radius: 3px; margin: 0 2px; object-fit: cover; }
.notify-thumb-more { display: inline-block; width: 20px; height: 20px; background: rgba(0, 0, 0, 0.6); border-radius: 3px; text-align: center; line-height: 20px; font-size: 10px; color: white; margin: 0 2px; vertical-align: middle; }
@media (max-width: 600px) { ul#smart-message>li { font-size: 12px; }
}
ul#smart-message>li.success_message { border-color: rgb(var(--border-success-rgb)); color: rgb(var(--border-success-rgb)); }
ul#smart-message>li.error_message { border-color: rgb(var(--border-error-rgb)); color: rgb(var(--border-error-rgb)); }
#login-form input[type="password"] { width: 200px; }
@media (max-width: 430px) { #login-form input[type="password"] { width: 120px; }
}
.overlay-active #content, body[data-elayer="loading"] #content, body[data-elayer="show"] #content, body:has([popover]:popover-open) #content { filter: blur(var(--overlay-blur)); pointer-events: none; opacity: var(--overlay-opacity); transition: var(--transition-normal); }
#content * { scroll-margin: 120px; }
p.path { color: rgba(var(--text-secondary-rgb), 0.5); overflow: auto; padding: 10px 0; white-space: nowrap; margin: 0 0 4px 0; display: block; box-sizing: border-box; width: calc(100% - 170px); }
p.path>* { font-size: 11px; line-height: 11px; display: inline-block; padding: 8px 11px; vertical-align: bottom; }
p.path a { margin: 0px 1px; border-radius: 999px; text-align: center; min-width: 28px; box-sizing: border-box; }
p.path a:hover { background: rgba(0, 0, 0, 0.2); }
p.path b { font-size: 14px; padding-left: 3px; padding-right: 3px; }
@media (max-width: 900px) { p.path a { padding-left: 7px; padding-right: 7px; }
p.path b { padding-left: 1px; padding-right: 1px; }
}
#sort-form { margin: 10px 0 0 0; width: 168px; float: right; }
#sort-form select { font-size: 10px; margin: 0 1px; padding: 4px 8px; width: calc(50% - 4px); border: 1px solid rgba(var(--border-light-rgb), 0.1); float: right; text-align: right; border-radius: 3px; }
@media (max-width: 800px) { p.path { width: calc(100% - 130px); }
#sort-form { width: 126px; }
}
.infobox { margin: 10px 0 0; padding: 10px 0; display: block; position: sticky; bottom: 0; }
.infobox span { color: rgba(var(--text-secondary-rgb), 0.5); font-size: 11px; line-height: 14px; padding: 0px 10px; display: inline-block; }
.infobox span::before { margin: 0 4px 0 0; display: inline-block; }
:root { --bg-elist-item-rgb: 13, 52, 63; --bg-elist-marked-rgb: 153, 128, 70; --bg-elist-thumb-rgb: 0, 0, 0; --bg-elist-thumb-ic-rgb: 13, 52, 63; }
ul.elist { list-style-type: none; text-align: center; display: flex; flex-wrap: wrap; }
ul.elist li { width: calc(20% - 4px); max-width: 100%; height: 64px; margin: 2px; box-sizing: border-box; position: relative; border-radius: 5px; padding: 0; display: block; text-align: left; background: none 50% 40% no-repeat transparent; background-size: cover; transition: opacity 240ms linear, background-position 240ms ease-out; align-items: stretch; box-shadow: var(--shadow-small); perspective: 350px; }
@media (max-width: 1180px) { ul.elist li { width: calc(25% - 4px); }
}
@media (max-width: 900px) { ul.elist li { width: calc((100% / 3) - 4px); }
}
@media (max-width: 700px) { ul.elist li { width: calc(50% - 4px); }
}
@media (max-width: 480px) { ul.elist li { width: calc(100% - 4px); }
}
ul.elist li:hover { background-position: 50% 60%; transition: background-position 3s ease-out; }
ul.elist a.main-link { display: block; height: 100%; overflow: hidden; text-decoration: none; line-height: 120%; color: rgba(var(--text-secondary-rgb), 0.6); padding-left: 60px; box-sizing: border-box; background: rgba(var(--bg-elist-item-rgb), 0.95); transition: background 240ms, opacity 240ms; border-radius: 5px; }
ul.elist li.dir a.main-link { background: rgba(var(--primary-accent-rgb), 0.2); }
body.share-on ul.elist li a.main-link, body.download-on ul.elist li a.main-link, ul.elist li:hover a.main-link { background: rgba(var(--primary-dark-rgb), 0.5); color: rgb(var(--text-light-rgb)); }
ul.elist a.main-link:target, ul.elist a.main-link:focus { background: rgba(var(--primary-dark-rgb), 0.8); color: rgb(var(--text-light-rgb)); }
body.mark-on ul.elist li.marked a.main-link { background-color: rgba(var(--bg-elist-marked-rgb), 0.8); color: rgb(var(--text-light-rgb)); }
body.mark-on ul.elist a.main-link { pointer-events: none; }
ul.elist li a[data-elayer="show"] { background: rgba(var(--text-secondary-rgb), 0.5); }
ul.elist a.action-link { display: block; opacity: 0; position: absolute; height: 48px; width: 48px; top: 8px; left: 8px; overflow: hidden; transform-origin: 0 0; border-radius: 50%; z-index: 20; background: rgb(var(--primary-accent-rgb)); color: rgb(var(--text-light-rgb)); text-align: center; box-shadow: var(--shadow-action); transform-origin: center center; pointer-events: none; transition: var(--transition-normal); }
body.share-on ul.elist a.action-link[href^="#"], body.download-on ul.elist a.action-link[download] { opacity: 1; pointer-events: auto; }
ul.elist a.action-link::before { display: block; font-size: 22px; line-height: 50px; }
ul.elist .thimb { display: block; position: absolute; height: 56px; width: 56px; left: 4px; top: 4px; margin: 0; padding: 4px; z-index: 9; border-radius: 4px; background: rgba(var(--bg-elist-item-rgb), 0.9); font-size: 10px; line-height: 12px; color: rgba(var(--text-secondary-rgb), 0.6); box-sizing: border-box; overflow: hidden; white-space: nowrap; }
body.share-on ul.elist .thimb, body.download-on ul.elist .thimb { display: none; }
ul.elist .thumb { display: block; position: absolute; height: 56px; width: 56px; left: 4px; top: 4px; margin: 0; padding: 0px; z-index: 10; background: transparent no-repeat center center; background-size: cover; overflow: hidden; border-radius: 4px; transition: var(--transition-slow), transform 300ms ease-out, opacity 250ms ease-out 50ms; transform-origin: 0 0; transform-style: preserve-3d; }
ul.elist .thumb[data-ic] { background: rgba(var(--bg-elist-thumb-rgb), 0.3); text-align: center; line-height: 56px; font-size: 20px; color: rgba(var(--text-secondary-rgb), 0.8); }
ul.elist li:hover .thumb { transform: rotateY(75deg); opacity: 0; }
ul.elist li:hover .thumb[data-ic] { transform: rotateY(50deg); opacity: 0.7; }
body.share-on ul.elist li:not(.dir) .thumb, body.download-on ul.elist li:not(.dir) .thumb { transform: rotateY(0deg); opacity: 0.001; transition: var(--transition-normal) !important; }
ul.elist .thumb[data-ic] { font-size: 8px; line-height: 10px; text-transform: uppercase; }
ul.elist li.dir .thumb[data-ic] { color: rgba(var(--text-secondary-rgb), 0.3); }
ul.elist .thumb[data-ic]::before { display: block; margin: 12px 0 0 0; font-size: 28px; line-height: 28px; }
ul.elist .main-link .thumb[data-ic="eye-slash"]::before, ul.elist li.dir .thumb[data-ic]::before { color: rgb(var(--primary-accent-rgb)); }
ul.elist .percent { display: block; position: absolute; right: 7px; bottom: 4px; background: rgba(0, 0, 0, 0.2); height: 2px; width: 45px; border-radius: 1px; }
ul.elist .percent>span { position: absolute; right: 0; display: block; background: rgba(var(--text-secondary-rgb), 0.2); height: 100%; min-width: 1px; border-radius: 1px; }
ul.elist li.dir .percent>span { position: absolute; right: 0; display: block; background: rgba(var(--primary-accent-rgb), 0.7); height: 100%; min-width: 1px; border-radius: 1px; }
ul.elist i { display: block; padding: 6px 6px 4px; font-style: normal; word-break: break-all; }
ul.elist .micro { font-size: 65%; line-height: 120%; }
ul.elist .ribo .micro { display: block; margin: 0 0 1px 0; }
ul.elist .lebo .micro { padding-left: 1px; display: inline-block; }
ul.elist .ribo, ul.elist .lebo { position: absolute; font-size: 80%; opacity: 0.4; line-height: 120%; }
ul.elist .ribo { text-align: right; right: 8px; bottom: 7px; }
ul.elist .lebo { left: 66px; bottom: 4px; }
ul.elist label { position: absolute; left: 0; top: 0; display: none; width: 100%; height: 100%; z-index: 30; border-radius: 2px; cursor: pointer; background: transparent; }
body.mark-on ul.elist label { display: block; }
ul.elist input { position: absolute; right: 10px; bottom: 10px; display: none; }
:root { --nav-size: 50px; --nav-line-size: 1px; }
#elayer { --close-color: rgb(var(--overlay-close-rgb)); position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(var(--overlay-bg-rgb), 0.9); box-sizing: border-box; display: grid; grid-template-rows: calc(var(--nav-size) + var(--nav-line-size)) auto; font-family: Arial; user-select: none; z-index: 99999; }
body[data-elayer="show"], body[data-elayer="loading"] { overflow: hidden; }
body[data-elayer="closed"] #elayer { display: none; }
#elayer * { margin: 0; padding: 0; border: 0; }
#elayer_control-container { display: block; border: 0px solid rgba(var(--text-secondary-rgb), 0.2); border-bottom-width: var(--nav-line-size); position: relative; }
#elayer_progress { position: absolute; background: rgba(var(--text-secondary-rgb), 0.6); transition: 160ms ease-out 0ms; pointer-events: none; }
#elayer_progress[style*="100%"] { background-color: var(--close-color); }
@media (orientation: landscape) { #elayer_progress { bottom: 0; left: calc(var(--nav-line-size) * -1); width: 1px !important; }
}
@media (orientation: portrait) { #elayer_progress { left: 0; bottom: calc(var(--nav-line-size) * -1); height: 1px !important; }
}
#elayer_control { max-width: 1000px; max-height: 1000px; margin: auto; height: 100%; width: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, auto); grid-template-areas: 'i d p n c'; grid-auto-flow: dense; align-content: start; justify-content: end; grid-gap: 2px; box-sizing: border-box; }
#elayer_control > a { height: var(--nav-size); width: var(--nav-size); line-height: 100%; color: rgb(var(--text-light-rgb)); box-sizing: border-box; margin: 0; font-size: calc(var(--nav-size) * 0.14); text-align: center; text-decoration: none; position: relative; padding: 0; padding-top: calc(var(--nav-size) - (var(--nav-size) * 0.26)); overflow: hidden; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); transition: var(--transition-normal); }
#elayer_control > a[href="#download"] { grid-area: d; }
#elayer_control > a[href="#prev"] { grid-area: p; }
#elayer_control > a[href="#next"] { grid-area: n; }
#elayer_control > a[href="#close"] { grid-area: c; }
#elayer_control > a::before { content: '◯'; line-height: 100%; position: absolute; left: 0; top: calc(var(--nav-size) * 0.1); width: 100%; display: block; font-size: calc(var(--nav-size) * 0.6); }
#elayer_control > a[href="#download"]::before { font-family: 'e2icon'; content: '\f019'; }
#elayer_control > a[href="#prev"]::before { font-family: 'e2icon'; content: '\f104'; }
#elayer_control > a[href="#next"]::before { font-family: 'e2icon'; content: '\f105'; }
#elayer_control > a[href="#close"]::before { content: '✕'; color: var(--close-color); }
#elayer_main::after { content: '✦'; }
#elayer_control > a[data-elayer-status="loading"], #elayer_control > a[data-elayer-status="inactive"] { pointer-events: none; }
#elayer_control > a[data-elayer-status="loading"] { opacity: 0.5; }
#elayer_control > a[data-elayer-status="inactive"] { opacity: 0.1; transform: scale(0.6); }
#elayer_control > a:hover { background: rgba(0, 0, 0, 0.4); }
#elayer_main { overflow: hidden; position: relative; }
#elayer_main::after { pointer-events: none; display: block; width: 100px; height: 100px; line-height: 100px; font-size: 50px; text-align: center; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; color: rgb(var(--text-light-rgb)); transition: opacity 200ms; opacity: 0; }
#elayer_content_close { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 5; }
body[data-elayer-zoom="in"] #elayer_content_close { width: calc(100% - 16px); height: calc(100% - 16px); }
#elayer_zoom-info { width: 240px; padding: 10px 14px; box-sizing: border-box; background: rgba(0, 0, 0, 0.9); color: rgb(var(--text-light-rgb)); margin-left: -120px; position: absolute; left: 50%; bottom: 10%; z-index: 11; font-size: 13px; text-align: center; border-radius: 8px; pointer-events: none; transition: all 1s; opacity: 1; }
#elayer_content { display: grid; width: 100%; height: 100%; position: relative; padding: 10px; box-sizing: border-box; overflow: auto; }
body[data-elayer-zoom="loading"] #elayer_content, body[data-elayer-zoom="in"] #elayer_content { padding: 0px; }
@keyframes example { 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
body[data-elayer="loading"] #elayer_main::after { animation: example 1s linear infinite; opacity: 1; }
#elayer_content > * { max-height: 100%; max-width: 100%; height: auto; width: auto; box-sizing: border-box; align-self: center; justify-self: center; border-radius: 2px; box-shadow: var(--overlay-shadow); transform-origin: center center; transition: var(--transition-fast); position: relative; z-index: 9; }
body[data-elayer-zoom="loading"] #elayer_content > * { transition: all 0ms linear 0ms !important; }
body[data-elayer="loading"] #elayer_content > * { transform: scale(0.94); opacity: 0.005; }
#elayer_content > img { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlMaAMa+N+MAAAAPSURBVAjXY/jPgB3hkAAAfr8P8eDDzn8AAAAASUVORK5CYII='); background-size: 20px auto; overflow: scroll; }
#elayer_content > audio { width: 400px; height: 60px; box-shadow: none; }
#elayer_content > iframe { background: rgba(var(--text-light-rgb), 0.67); max-height: 1200px; max-width: 1200px; height: 100%; width: 100%; box-shadow: none; }
#elayer_content > iframe[src*="youtube.com"] { width: 800px; height: 450px; max-height: 100%; max-width: 100%; }
@media (orientation: landscape) { #elayer { grid-template-rows: auto; grid-template-columns: auto calc(var(--nav-size) + var(--nav-line-size)); grid-auto-flow: dense; }
#elayer_control-container { grid-column-start: 2; grid-column-end: 3; border-width: 0; border-left-width: var(--nav-line-size); }
#elayer_control { grid-template-columns: auto; grid-template-rows: repeat(5, auto); grid-template-areas: 'c' 'n' 'p' 'd' 'i'; }
#elayer_main { grid-column-start: 1; grid-column-end: 2; }
@media (min-width: 1600px) { #elayer { grid-template-columns: auto calc(10vw + var(--nav-line-size)); }
#elayer_control { padding-top: 20px; }
#elayer_control > a { width: 10vw; font-size: calc(var(--nav-size) * 0.2); padding: 12px 5px; line-height: 120%; height: auto; }
#elayer_control > a::before { font-size: calc(var(--nav-size) * 0.2); line-height: 120%; position: relative; top: auto; left: auto; display: inline-block; vertical-align: middle; width: auto; font-size: 20px; margin-right: 10px; }
}
}
[popover] { margin: 0; border: none; padding: 20px 20px 26px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.2); background: rgb(var(--primary-dark-rgb)); width: 400px; box-sizing: border-box; text-align: left; border-radius: 4px; color: rgb(var(--text-light-rgb)); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); opacity: 0; transition: transform 200ms 20ms, opacity 200ms 20ms; }
[popover]:popover-open { opacity: 1; transform: translate(-50%, -50%) scale(1); box-shadow: var(--shadow-popover); }
[popover] input { width: 100% !important; }
[popover] input[type="submit"] { width: 100px !important; float: right; margin: 8px 0 0 0; }
#upload-form input[name="dir"] { margin-top: 8px; width: 160px !important; }
#popover-backdrop { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: transparent; z-index: 30; pointer-events: auto; -webkit-tap-highlight-color: transparent; touch-action: none; }
#popover-backdrop.active { display: block; }
body:has([popover]:popover-open) { overflow: hidden; position: fixed; width: 100%; height: 100%; }
@media (max-width: 480px) { [popover] { width: calc(100% - 30px); left: 15px; right: 15px; transform: translate(0, -50%) scale(0.2); }
[popover]:popover-open { transform: translate(0, -50%) scale(1); }
#upload-form input[name="dir"] { width: 100% !important; }
}
body::before { content: ''; position: fixed; top: 0; left: 0; width: var(--loading-progress, 0%); height: 3px; background: rgb(var(--state-success-rgb)); z-index: 9999; transition: width 0.1s ease-out; box-shadow: 0 0 8px rgba(59, 130, 246, 0.5); pointer-events: none; }
body[data-loading-state="loaded"]::before, body[data-loading-state="loaded"]::after { opacity: 0; transition: opacity 0.2s ease 0.1s; }
body[data-loading-state="loading"]::before { background: rgb(var(--state-success-rgb)); animation: pulse 1s ease-in-out infinite; width: 100% !important; }
body[data-loading-state="loading"]::after { display: none; }
body[data-loading-state="uploading"]::before { background: rgb(var(--state-success-rgb)); transition: width 0.1s ease-out; animation: none; }
body[data-loading-state="uploading"]::after { content: '📤 'attr(data-loading-progress) '%'; background: rgba(16, 185, 129, 0.8); display: block; }
body[data-loading-state="timeout"]::before, body[data-loading-state="error"]::before { background: rgb(var(--state-error-rgb)); animation: none; }
body[data-loading-state="timeout"]::after, body[data-loading-state="error"]::after { display: none; }
body[data-loading-state="loading"], body[data-loading-state="uploading"] { cursor: wait; }
@keyframes pulse { 0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
[data-ic="adjust"]::before{content: "\f042";}[data-ic="adn"]::before{content: "\f170";}[data-ic="align-center"]::before{content: "\f037";}[data-ic="align-justify"]::before{content: "\f039";}[data-ic="align-left"]::before{content: "\f036";}[data-ic="align-right"]::before{content: "\f038";}[data-ic="ambulance"]::before{content: "\f0f9";}[data-ic="anchor"]::before{content: "\f13d";}[data-ic="android"]::before{content: "\f17b";}[data-ic="angle-double-down"]::before{content: "\f103";}[data-ic="angle-double-left"]::before{content: "\f100";}[data-ic="angle-double-right"]::before{content: "\f101";}[data-ic="angle-double-up"]::before{content: "\f102";}[data-ic="angle-down"]::before{content: "\f107";}[data-ic="angle-left"]::before{content: "\f104";}[data-ic="angle-right"]::before{content: "\f105";}[data-ic="angle-up"]::before{content: "\f106";}[data-ic="apple"]::before{content: "\f179";}[data-ic="archive"]::before{content: "\f187";}[data-ic="arrow-circle-down"]::before{content: "\f0ab";}[data-ic="arrow-circle-left"]::before{content: "\f0a8";}[data-ic="arrow-circle-o-down"]::before{content: "\f01a";}[data-ic="arrow-circle-o-left"]::before{content: "\f190";}[data-ic="arrow-circle-o-right"]::before{content: "\f18e";}[data-ic="arrow-circle-o-up"]::before{content: "\f01a";}[data-ic="arrow-circle-right"]::before{content: "\f0a9";}[data-ic="arrow-circle-up"]::before{content: "\f0aa";}[data-ic="arrow-down"]::before{content: "\f063";}[data-ic="arrow-left"]::before{content: "\f060";}[data-ic="arrow-right"]::before{content: "\f061";}[data-ic="arrow-up"]::before{content: "\f062";}[data-ic="arrows"]::before{content: "\f047";}[data-ic="arrows-alt"]::before{content: "\f0b2";}[data-ic="arrows-h"]::before{content: "\f07e";}[data-ic="arrows-v"]::before{content: "\f07d";}[data-ic="asterisk"]::before{content: "\f069";}[data-ic="backward"]::before{content: "\f04a";}[data-ic="ban"]::before{content: "\f05e";}[data-ic="bar-chart-o"]::before{content: "\f080";}[data-ic="barcode"]::before{content: "\f02a";}[data-ic="bars"]::before{content: "\f0c9";}[data-ic="beer"]::before{content: "\f0fc";}[data-ic="bell"]::before{content: "\f0f3";}[data-ic="bell-o"]::before{content: "\f0a2";}[data-ic="bitbucket"]::before{content: "\f171";}[data-ic="bitbucket-square"]::before{content: "\f172";}[data-ic="bold"]::before{content: "\f032";}[data-ic="book"]::before{content: "\f02d";}[data-ic="bookmark"]::before{content: "\f02e";}[data-ic="bookmark-o"]::before{content: "\f097";}[data-ic="briefcase"]::before{content: "\f0b1";}[data-ic="btc"]::before{content: "\f15a";}[data-ic="bug"]::before{content: "\f188";}[data-ic="building-o"]::before{content: "\f0f7";}[data-ic="bullhorn"]::before{content: "\f0a1";}[data-ic="bullseye"]::before{content: "\f140";}[data-ic="calendar"]::before{content: "\f073";}[data-ic="calendar-o"]::before{content: "\f133";}[data-ic="camera"]::before{content: "\f030";}[data-ic="camera-retro"]::before{content: "\f083";}[data-ic="caret-down"]::before{content: "\f0d7";}[data-ic="caret-left"]::before{content: "\f0d9";}[data-ic="caret-right"]::before{content: "\f0da";}[data-ic="caret-square-o-down"]::before{content: "\f150";}[data-ic="caret-square-o-left"]::before{content: "\f191";}[data-ic="caret-square-o-right"]::before{content: "\f152";}[data-ic="caret-square-o-up"]::before{content: "\f151";}[data-ic="caret-up"]::before{content: "\f0d8";}[data-ic="certificate"]::before{content: "\f0a3";}[data-ic="check"]::before{content: "\f00c";}[data-ic="check-circle"]::before{content: "\f058";}[data-ic="check-circle-o"]::before{content: "\f05d";}[data-ic="check-square"]::before{content: "\f14a";}[data-ic="check-square-o"]::before{content: "\f046";}[data-ic="chevron-circle-down"]::before{content: "\f13a";}[data-ic="chevron-circle-left"]::before{content: "\f137";}[data-ic="chevron-circle-right"]::before{content: "\f138";}[data-ic="chevron-circle-up"]::before{content: "\f139";}[data-ic="chevron-down"]::before{content: "\f078";}[data-ic="chevron-left"]::before{content: "\f053";}[data-ic="chevron-right"]::before{content: "\f054";}[data-ic="chevron-up"]::before{content: "\f077";}[data-ic="circle"]::before{content: "\f111";}[data-ic="circle-o"]::before{content: "\f10c";}[data-ic="clock-o"]::before{content: "\f017";}[data-ic="cloud"]::before{content: "\f0c2";}[data-ic="cloud-download"]::before{content: "\f0ed";}[data-ic="cloud-upload"]::before{content: "\f0ee";}[data-ic="code"]::before{content: "\f121";}[data-ic="code-fork"]::before{content: "\f126";}[data-ic="coffee"]::before{content: "\f0f4";}[data-ic="columns"]::before{content: "\f0db";}[data-ic="comment"]::before{content: "\f075";}[data-ic="comment-o"]::before{content: "\f0e5";}[data-ic="comments"]::before{content: "\f086";}[data-ic="comments-o"]::before{content: "\f0e6";}[data-ic="compass"]::before{content: "\f14e";}[data-ic="compress"]::before{content: "\f066";}[data-ic="credit-card"]::before{content: "\f09d";}[data-ic="crop"]::before{content: "\f125";}[data-ic="crosshairs"]::before{content: "\f05b";}[data-ic="css3"]::before{content: "\f13c";}[data-ic="cut"]::before{content: "\f0c4";}[data-ic="cutlery"]::before{content: "\f0f5";}[data-ic="desktop"]::before{content: "\f108";}[data-ic="dot-circle-o"]::before{content: "\f192";}[data-ic="download"]::before{content: "\f019";}[data-ic="dribbble"]::before{content: "\f17d";}[data-ic="dropbox"]::before{content: "\f16b";}[data-ic="eject"]::before{content: "\f052";}[data-ic="ellipsis-h"]::before{content: "\f141";}[data-ic="ellipsis-v"]::before{content: "\f142";}[data-ic="envelope"]::before{content: "\f0e0";}[data-ic="envelope-o"]::before{content: "\f003";}[data-ic="eraser"]::before{content: "\f12d";}[data-ic="eur"]::before{content: "\f153";}[data-ic="exchange"]::before{content: "\f0ec";}[data-ic="exclamation"]::before{content: "\f12a";}[data-ic="exclamation-circle"]::before{content: "\f06a";}[data-ic="expand"]::before{content: "\f065";}[data-ic="external-link"]::before{content: "\f08e";}[data-ic="external-link-square"]::before{content: "\f14c";}[data-ic="eye"]::before{content: "\f06e";}[data-ic="eye-slash"]::before{content: "\f070";}[data-ic="facebook"]::before{content: "\f09a";}[data-ic="facebook-square"]::before{content: "\f082";}[data-ic="fast-backward"]::before{content: "\f049";}[data-ic="fast-forward"]::before{content: "\f050";}[data-ic="female"]::before{content: "\f182";}[data-ic="fighter-jet"]::before{content: "\f0fb";}[data-ic="file"]::before{content: "\f15b";}[data-ic="file-o"]::before{content: "\f016";}[data-ic="file-text"]::before{content: "\f15c";}[data-ic="file-text-o"]::before{content: "\f0f6";}[data-ic="files-o"]::before{content: "\f0c5";}[data-ic="film"]::before{content: "\f008";}[data-ic="filter"]::before{content: "\f0b0";}[data-ic="fire"]::before{content: "\f06d";}[data-ic="fire-extinguisher"]::before{content: "\f134";}[data-ic="flag"]::before{content: "\f024";}[data-ic="flag-checkered"]::before{content: "\f11e";}[data-ic="flag-o"]::before{content: "\f11d";}[data-ic="flash"]::before{content: "\f0e7";}[data-ic="flask"]::before{content: "\f0c3";}[data-ic="flickr"]::before{content: "\f16e";}[data-ic="folder"]::before{content: "\f07b";}[data-ic="folder-o"]::before{content: "\f114";}[data-ic="folder-open"]::before{content: "\f07c";}[data-ic="folder-open-o"]::before{content: "\f115";}[data-ic="font"]::before{content: "\f031";}[data-ic="forward"]::before{content: "\f04e";}[data-ic="foursquare"]::before{content: "\f180";}[data-ic="frown-o"]::before{content: "\f119";}[data-ic="gamepad"]::before{content: "\f11b";}[data-ic="gavel"]::before{content: "\f0e3";}[data-ic="gbp"]::before{content: "\f154";}[data-ic="gear"]::before{content: "\f013";}[data-ic="gears"]::before{content: "\f085";}[data-ic="gift"]::before{content: "\f06b";}[data-ic="github"]::before{content: "\f09b";}[data-ic="github-alt"]::before{content: "\f113";}[data-ic="github-square"]::before{content: "\f092";}[data-ic="gittip"]::before{content: "\f184";}[data-ic="glass"]::before{content: "\f000";}[data-ic="globe"]::before{content: "\f0ac";}[data-ic="google-plus"]::before{content: "\f0d5";}[data-ic="google-plus-square"]::before{content: "\f0d4";}[data-ic="group"]::before{content: "\f0c0";}[data-ic="h-square"]::before{content: "\f0fd";}[data-ic="hand-o-down"]::before{content: "\f0a7";}[data-ic="hand-o-left"]::before{content: "\f0a5";}[data-ic="hand-o-right"]::before{content: "\f0a4";}[data-ic="hand-o-up"]::before{content: "\f0a6";}[data-ic="hdd-o"]::before{content: "\f0a0";}[data-ic="headphones"]::before{content: "\f025";}[data-ic="heart"]::before{content: "\f004";}[data-ic="heart-o"]::before{content: "\f08a";}[data-ic="home"]::before{content: "\f015";}[data-ic="hospital-o"]::before{content: "\f0f8";}[data-ic="html5"]::before{content: "\f13b";}[data-ic="inbox"]::before{content: "\f01c";}[data-ic="indent"]::before{content: "\f03c";}[data-ic="info"]::before{content: "\f129";}[data-ic="info-circle"]::before{content: "\f05a";}[data-ic="inr"]::before{content: "\f156";}[data-ic="instagram"]::before{content: "\f16d";}[data-ic="italic"]::before{content: "\f033";}[data-ic="jpy"]::before{content: "\f157";}[data-ic="key"]::before{content: "\f084";}[data-ic="keyboard-o"]::before{content: "\f11c";}[data-ic="krw"]::before{content: "\f159";}[data-ic="laptop"]::before{content: "\f109";}[data-ic="leaf"]::before{content: "\f06c";}[data-ic="lemon-o"]::before{content: "\f094";}[data-ic="level-down"]::before{content: "\f149";}[data-ic="level-up"]::before{content: "\f148";}[data-ic="lightbulb-o"]::before{content: "\f0eb";}[data-ic="link"]::before{content: "\f0c1";}[data-ic="linkedin"]::before{content: "\f0e1";}[data-ic="linkedin-square"]::before{content: "\f08c";}[data-ic="linux"]::before{content: "\f17c";}[data-ic="list"]::before{content: "\f03a";}[data-ic="list-alt"]::before{content: "\f022";}[data-ic="list-ol"]::before{content: "\f0cb";}[data-ic="list-ul"]::before{content: "\f0ca";}[data-ic="location-arrow"]::before{content: "\f124";}[data-ic="lock"]::before{content: "\f023";}[data-ic="long-arrow-down"]::before{content: "\f175";}[data-ic="long-arrow-left"]::before{content: "\f177";}[data-ic="long-arrow-right"]::before{content: "\f178";}[data-ic="long-arrow-up"]::before{content: "\f176";}[data-ic="magic"]::before{content: "\f0d0";}[data-ic="magnet"]::before{content: "\f076";}[data-ic="mail-reply-all"]::before{content: "\f122";}[data-ic="male"]::before{content: "\f183";}[data-ic="map-marker"]::before{content: "\f041";}[data-ic="maxcdn"]::before{content: "\f136";}[data-ic="medkit"]::before{content: "\f0fa";}[data-ic="meh-o"]::before{content: "\f11a";}[data-ic="microphone"]::before{content: "\f130";}[data-ic="microphone-slash"]::before{content: "\f131";}[data-ic="minus"]::before{content: "\f068";}[data-ic="minus-circle"]::before{content: "\f056";}[data-ic="minus-square"]::before{content: "\f146";}[data-ic="minus-square-o"]::before{content: "\f147";}[data-ic="mobile"]::before{content: "\f10b";}[data-ic="money"]::before{content: "\f0d6";}[data-ic="moon-o"]::before{content: "\f186";}[data-ic="music"]::before{content: "\f001";}[data-ic="outdent"]::before{content: "\f03b";}[data-ic="pagelines"]::before{content: "\f18c";}[data-ic="paperclip"]::before{content: "\f0c6";}[data-ic="paste"]::before{content: "\f0ea";}[data-ic="pause"]::before{content: "\f04c";}[data-ic="pencil"]::before{content: "\f040";}[data-ic="pencil-square"]::before{content: "\f14b";}[data-ic="pencil-square-o"]::before{content: "\f044";}[data-ic="phone"]::before{content: "\f095";}[data-ic="phone-square"]::before{content: "\f098";}[data-ic="picture-o"]::before{content: "\f03e";}[data-ic="pinterest"]::before{content: "\f0d2";}[data-ic="pinterest-square"]::before{content: "\f0d3";}[data-ic="plane"]::before{content: "\f072";}[data-ic="play"]::before{content: "\f04b";}[data-ic="play-circle"]::before{content: "\f144";}[data-ic="play-circle-o"]::before{content: "\f01d";}[data-ic="plus"]::before{content: "\f067";}[data-ic="plus-circle"]::before{content: "\f055";}[data-ic="plus-square"]::before{content: "\f0fe";}[data-ic="power-off"]::before{content: "\f011";}[data-ic="print"]::before{content: "\f02f";}[data-ic="puzzle-piece"]::before{content: "\f12e";}[data-ic="qrcode"]::before{content: "\f029";}[data-ic="question"]::before{content: "\f128";}[data-ic="question-circle"]::before{content: "\f059";}[data-ic="quote-left"]::before{content: "\f10d";}[data-ic="quote-right"]::before{content: "\f10e";}[data-ic="random"]::before{content: "\f074";}[data-ic="refresh"]::before{content: "\f021";}[data-ic="renren"]::before{content: "\f18b";}[data-ic="repeat"]::before{content: "\f01e";}[data-ic="reply"]::before{content: "\f112";}[data-ic="reply-all"]::before{content: "\f122";}[data-ic="retweet"]::before{content: "\f079";}[data-ic="road"]::before{content: "\f018";}[data-ic="rocket"]::before{content: "\f135";}[data-ic="rss"]::before{content: "\f09e";}[data-ic="rss-square"]::before{content: "\f143";}[data-ic="rub"]::before{content: "\f158";}[data-ic="save"]::before{content: "\f0c7";}[data-ic="search"]::before{content: "\f002";}[data-ic="search-minus"]::before{content: "\f010";}[data-ic="search-plus"]::before{content: "\f00e";}[data-ic="share"]::before{content: "\f064";}[data-ic="share-square"]::before{content: "\f14d";}[data-ic="share-square-o"]::before{content: "\f045";}[data-ic="shield"]::before{content: "\f132";}[data-ic="shopping-cart"]::before{content: "\f07a";}[data-ic="sign-in"]::before{content: "\f090";}[data-ic="sign-out"]::before{content: "\f08b";}[data-ic="signal"]::before{content: "\f012";}[data-ic="sitemap"]::before{content: "\f0e8";}[data-ic="skype"]::before{content: "\f17e";}[data-ic="smile-o"]::before{content: "\f118";}[data-ic="sort"]::before{content: "\f0dc";}[data-ic="sort-alpha-asc"]::before{content: "\f15d";}[data-ic="sort-alpha-desc"]::before{content: "\f15e";}[data-ic="sort-amount-asc"]::before{content: "\f160";}[data-ic="sort-amount-desc"]::before{content: "\f161";}[data-ic="sort-asc"]::before{content: "\f0dd";}[data-ic="sort-desc"]::before{content: "\f0de";}[data-ic="sort-numeric-asc"]::before{content: "\f162";}[data-ic="sort-numeric-desc"]::before{content: "\f163";}[data-ic="spinner"]::before{content: "\f110";}[data-ic="square"]::before{content: "\f0c8";}[data-ic="square-o"]::before{content: "\f096";}[data-ic="stack-exchange"]::before{content: "\f18d";}[data-ic="stack-overflow"]::before{content: "\f16c";}[data-ic="star"]::before{content: "\f005";}[data-ic="star-half"]::before{content: "\f089";}[data-ic="star-half-o"]::before{content: "\f123";}[data-ic="star-o"]::before{content: "\f006";}[data-ic="step-backward"]::before{content: "\f048";}[data-ic="step-forward"]::before{content: "\f051";}[data-ic="stethoscope"]::before{content: "\f0f1";}[data-ic="stop"]::before{content: "\f04d";}[data-ic="strikethrough"]::before{content: "\f0cc";}[data-ic="subscript"]::before{content: "\f12c";}[data-ic="suitcase"]::before{content: "\f0f2";}[data-ic="sun-o"]::before{content: "\f185";}[data-ic="superscript"]::before{content: "\f12b";}[data-ic="table"]::before{content: "\f0ce";}[data-ic="tablet"]::before{content: "\f10a";}[data-ic="tachometer"]::before{content: "\f0e4";}[data-ic="tag"]::before{content: "\f02b";}[data-ic="tags"]::before{content: "\f02c";}[data-ic="tasks"]::before{content: "\f0ae";}[data-ic="terminal"]::before{content: "\f120";}[data-ic="text-height"]::before{content: "\f034";}[data-ic="text-width"]::before{content: "\f035";}[data-ic="th"]::before{content: "\f00a";}[data-ic="th-large"]::before{content: "\f009";}[data-ic="th-list"]::before{content: "\f00b";}[data-ic="thumb-tack"]::before{content: "\f08d";}[data-ic="thumbs-down"]::before{content: "\f165";}[data-ic="thumbs-o-down"]::before{content: "\f088";}[data-ic="thumbs-o-up"]::before{content: "\f087";}[data-ic="thumbs-up"]::before{content: "\f164";}[data-ic="ticket"]::before{content: "\f145";}[data-ic="times"]::before{content: "\f00d";}[data-ic="times-circle"]::before{content: "\f057";}[data-ic="times-circle-o"]::before{content: "\f05c";}[data-ic="tint"]::before{content: "\f043";}[data-ic="trash-o"]::before{content: "\f014";}[data-ic="trello"]::before{content: "\f181";}[data-ic="trophy"]::before{content: "\f091";}[data-ic="truck"]::before{content: "\f0d1";}[data-ic="try"]::before{content: "\f195";}[data-ic="tumblr"]::before{content: "\f173";}[data-ic="tumblr-square"]::before{content: "\f174";}[data-ic="twitter"]::before{content: "\f099";}[data-ic="twitter-square"]::before{content: "\f081";}[data-ic="umbrella"]::before{content: "\f0e9";}[data-ic="underline"]::before{content: "\f0cd";}[data-ic="undo"]::before{content: "\f0e2";}[data-ic="unlink"]::before{content: "\f127";}[data-ic="unlock"]::before{content: "\f09c";}[data-ic="unlock-alt"]::before{content: "\f13e";}[data-ic="upload"]::before{content: "\f093";}[data-ic="usd"]::before{content: "\f155";}[data-ic="user"]::before{content: "\f007";}[data-ic="user-md"]::before{content: "\f0f0";}[data-ic="video-camera"]::before{content: "\f03d";}[data-ic="vimeo-square"]::before{content: "\f194";}[data-ic="vk"]::before{content: "\f189";}[data-ic="volume-down"]::before{content: "\f027";}[data-ic="volume-off"]::before{content: "\f026";}[data-ic="volume-up"]::before{content: "\f028";}[data-ic="warning"]::before{content: "\f071";}[data-ic="weibo"]::before{content: "\f18a";}[data-ic="wheelchair"]::before{content: "\f193";}[data-ic="windows"]::before{content: "\f17a";}[data-ic="wrench"]::before{content: "\f0ad";}[data-ic="xing"]::before{content: "\f168";}[data-ic="xing-square"]::before{content: "\f169";}[data-ic="youtube"]::before{content: "\f167";}[data-ic="youtube-play"]::before{content: "\f16a";}[data-ic="youtube-square"]::before{content: "\f166";}