copyparty/copyparty/web/browser.css

3195 lines
52 KiB
CSS

:root {
color-scheme: dark;
--grid-sz: 10em;
--grid-ln: 3;
--nav-sz: 16em;
--fg: #ccc;
--fg-max: #fff;
--fg2-max: #fff;
--fg-weak: #bbb;
--bg-u7: #555;
--bg-u6: #4c4c4c;
--bg-u5: #444;
--bg-u4: #383838;
--bg-u3: #333;
--bg-u2: #2b2b2b;
--bg-u1: #282828;
--bg: #222;
--bgg: var(--bg);
--bg-d1: #1c1c1c;
--bg-d2: #181818;
--bg-d3: #111;
--bg-max: #000;
--tab-alt: #f5a;
--row-alt: #282828;
--scroll: #eb0;
--a: #fc5;
--a-b: #c90;
--a-hil: #fd9;
--a-dark: #e70;
--a-gray: #666;
--btn-fg: var(--a);
--btn-bg: rgba(128,128,128,0.15);
--btn-h-fg: var(--a-hil);
--btn-h-bg: #805;
--btn-1-fg: #400;
--btn-1-bg: var(--a);
--btn-1h-fg: var(--btn-1-fg);
--btn-1h-bg: #fe8;
--chk-fg: var(--tab-alt);
--txt-sh: var(--bg-d2);
--txt-bg: var(--btn-bg);
--op-aa-fg: var(--a);
--op-aa-bg: var(--bg-d2);
--op-a-sh: rgba(0,0,0,0.5);
--u2-btn-b1: #999;
--u2-sbtn-b1: #999;
--u2-txt-bg: var(--bg-u5);
--u2-tab-bg: linear-gradient(to bottom, var(--bg), var(--bg-u1));
--u2-tab-b1: rgba(128,128,128,0.8);
--u2-tab-1-fg: #fd7;
--u2-tab-1-bg: linear-gradient(to bottom, var(#353), var(--bg) 80%);
--u2-tab-1-b1: #7c5;
--u2-tab-1-b2: #583;
--u2-tab-1-sh: #280;
--u2-b-fg: #fff;
--u2-b1-bg: #c38;
--u2-b2-bg: #d80;
--u2-inf-bg: #07a;
--u2-inf-b1: #0be;
--u2-ok-bg: #380;
--u2-ok-b1: #8e4;
--u2-err-bg: #900;
--u2-err-b1: #d06;
--ud-b1: #888;
--sort-1: #fb0;
--sort-2: #d09;
--srv-1: #aaa;
--srv-2: #a73;
--srv-3: #f4c;
--srv-3b: rgba(255,68,204,0.6);
--tree-bg: #2b2b2b;
--g-play-bg: #750;
--g-play-b1: #c90;
--g-play-b2: #da4;
--g-play-sh: #b83;
--g-sel-fg: #fff;
--g-sel-bg: #925;
--g-sel-b1: #e39;
--g-sel-sh: #b36;
--g-fsel-bg: #d39;
--g-fsel-b1: #f4a;
--g-fsel-ts: #804;
--g-dfg: var(--srv-3);
--g-fg: var(--a-hil);
--g-bg: var(--bg-u2);
--g-b1: var(--bg-u4);
--g-b2: var(--bg-u5);
--g-g1: var(--bg-u2);
--g-g2: var(--bg-u5);
--g-f-bg: var(--bg-u4);
--g-f-b1: var(--bg-u5);
--g-f-fg: var(--a-hil);
--g-sh: rgba(0,0,0,0.3);
--f-sh1: 0.33;
--f-sh2: 0.02;
--f-sh3: 0.2;
--f-h-b1: rgba(128,128,128,0.7);
--f-play-bg: #fc5;
--f-play-fg: #000;
--f-sel-sh: #fc0;
--f-gray: #999;
--fm-off: #f6c;
--mp-sh: var(--bg-d3);
--mp-b-bg: rgba(0,0,0,0.2);
--err-fg: #fff;
--err-bg: #a20;
--err-b1: #f00;
--err-ts: #500;
}
html.y {
color-scheme: light;
--fg: #222;
--fg-max: #000;
--fg-weak: #555;
--bg-d3: #fff;
--bg-d2: #fff;
--bg-d1: #fff;
--bg: #eaeaea;
--bg-u1: #fff;
--bg-u2: #f7f7f7;
--bg-u3: #eaeaea;
--bg-u4: #fff;
--bg-u5: #ccc;
--bg-u6: #ddd;
--bg-max: #fff;
--tab-alt: #c07;
--row-alt: #f2f2f2;
--scroll: #490;
--a: #06a;
--a-b: #08b;
--a-hil: #058;
--a-gray: #bbb;
--a-dark: #c0f;
--btn-fg: #555;
--btn-h-fg: #222;
--btn-h-bg: #caf;
--btn-1-fg: #fff;
--btn-1-bg: #4a0;
--btn-1h-bg: #5c0;
--chk-fg: var(--fg);
--txt-sh: #aaa;
--txt-bg: rgba(255,255,255,0.6);
--op-a-sh: #fff;
--u2-txt-bg: var(--bg-max);
--u2-tab-1-sh: #0ad;
--u2-tab-1-b1: #09c;
--u2-tab-1-b2: #05a;
--u2-tab-1-fg: var(--fg-max);
--u2-tab-1-bg: inherit;
--ud-b1: #bbb;
--sort-1: #059;
--sort-2: #f5d;
--srv-1: #555;
--srv-2: #c83;
--srv-3: #c0a;
--srv-3b: rgba(255,68,204,0.6);
--tree-bg: #fff;
--g-fg: var(--a);
--g-bg: var(--bg-u2);
--g-b1: var(--bg-u6);
--g-b2: var(--bg-u6);
--g-g1: var(--bg-u2);
--g-g2: var(--bg-u5);
--g-f-bg: var(--bg-u4);
--g-f-b1: var(--bg-u5);
--g-sh: rgba(0,0,0,0.07);
--f-sh1: 0.3;
--f-sh2: 0.5;
--f-sh3: 0.02;
--f-sel-sh: #e80;
--fm-off: #c4a;
--mp-sh: #bbb;
--mp-b-bg: transparent;
text-shadow: none;
}
html.a {
--op-aa-sh: 0 0 .2em var(--bg-d3) inset;
--u2-o-bg: #603;
--u2-o-b1: #a16;
--u2-o-sh: #a00;
--u2-o-h-bg: var(--u2-o-bg);
--u2-o-h-b1: #fb0;
--u2-o-h-sh: #fb0;
--u2-o-1-bg: #6a1;
--u2-o-1-b1: #efa;
--u2-o-1-sh: #0c0;
--u2-o-1h-bg: var(--u2-o-1-bg);
}
html.ay {
--op-aa-sh: 0 .1em .2em #ccc;
--op-aa-bg: var(--bg-max);
}
html.b {
--tree-bg: var(--bg);
--g-bg: var(--bg);
--g-b1: var(--bg);
--g-b2: var(--bg);
--g-g1: var(--bg);
--g-sh: rgba(0,0,0,0);
--op-aa-bg: rgba(255,255,255,0.06);
--u2-sbtn-b1: #fc0;
--u2-txt-bg: transparent;
--u2-tab-1-sh: var(--bg);
--u2-b1-bg: rgba(128,128,128,0.15);
--u2-b2-bg: var(--u2-b1-bg);
--u2-o-bg: var(--btn-bg);
--u2-o-h-bg: var(--btn-h-bg);
--u2-o-1-bg: var(--a);
--u2-o-1h-bg: var(--a-hil);
--f-sh1: 0.1;
--mp-b-bg: transparent;
}
html.bz {
--fg: #cce;
--fg-weak: #bbd;
--bg-u5: #3b3f58;
--bg-u4: #1e2130;
--bg-u3: #1e2130;
--bg-u1: #1e2130;
--bg: #11121d;
--bg-d1: #232536;
--bg-d2: #34384e;
--bg-d3: #34384e;
--row-alt: #181a27;
--btn-bg: #202231;
--btn-h-bg: #2d2f45;
--btn-1-bg: #ba2959;
--btn-1-fg: #fff;
--btn-1h-fg: #000;
--txt-sh: a;
--u2-tab-b1: var(--bg-u5);
--u2-tab-1-fg: var(--fg-max);
--u2-tab-1-bg: var(--bg);
--srv-1: #79b;
--g-sel-bg: #ba2959;
--g-fsel-bg: #e6336e;
--f-h-b1: #34384e;
--mp-sh: #11121d;
/*--mp-b-bg: #2c3044;*/
}
html.by {
--bg: #f2f2f2;
--row-alt: #f9f9f9;
--scroll: var(--a);
--btn-1-bg: #07a;
--btn-1h-bg: var(--a-hil);
--op-aa-bg: #fff;
--u2-sbtn-b1: #c70;
--u2-tab-1-b1: #999;
--u2-tab-1-b2: #aaa;
--u2-b-fg: #444;
}
html.c {
font-weight: bold;
--fg: #fff;
--fg-weak: #cef;
--bg-u5: #409;
--bg-u2: linear-gradient(-35deg, #fd7233, #cd27a0, #5d47a5 49.5%, #16e9fb 50%, #3b6cc8 50.4%, #0e51ac);
--bg: #37235d;
--bg-u3: #407;
--a: #f9dc22;
--a-gray: #0ae;
--tab-alt: #6ef;
--row-alt: #47237d;
--scroll: #ff0;
--btn-fg: #fff;
--btn-bg: #9019bf;
--btn-h-bg: #a039ff;
--chk-fg: #d90;
--op-aa-bg: #f9dd22;
--u2-o-1-bg: #4cf;
--srv-1: #ea0;
--mp-b-bg: transparent;
}
html.cz {
--bgg: var(--bg-u2);
--srv-3: #fff;
--u2-tab-b1: var(--bg-d3);
}
html.cy {
--fg: #fff;
--fg-weak: #fff;
--bg: #ff0;
--bg-u2: #f00;
--bg-u3: #f00;
--bg-u5: #999;
--bg-d3: #f77;
--bg-d2: #ff0;
--a: #fff;
--a-hil: #fff;
--a-h-bg: #000;
--tab-alt: #f00;
--row-alt: #fff;
--scroll: #fff;
--btn-bg: #000;
--btn-fg: #ff0;
--btn-h-fg: #fff;
--btn-1-bg: #ff0;
--btn-1-fg: #000;
--chk-fg: #fd0;
--srv-1: #f00;
--srv-3: #fff;
--op-aa-bg: #fff;
--u2-b1-bg: #f00;
--u2-b2-bg: #f00;
--u2-o-bg: #ff0;
--u2-o-1-bg: #f00;
}
html.dz {
--fg: #4d4;
--fg-max: #fff;
--fg2-max: #fff;
--fg-weak: #2a2;
--bg-u7: #020;
--bg-u6: #020;
--bg-u5: #050;
--bg-u4: #020;
--bg-u3: #020;
--bg-u2: #020;
--bg-u1: #020;
--bg: #010;
--bgg: var(--bg);
--bg-d1: #000;
--bg-d2: #020;
--bg-d3: #000;
--bg-max: #000;
--tab-alt: #6f6;
--row-alt: #030;
--scroll: #0f0;
--a: #9f9;
--a-b: #cfc;
--a-hil: #cfc;
--a-dark: #afa;
--a-gray: #2a2;
--btn-fg: var(--a);
--btn-bg: rgba(64,128,64,0.15);
--btn-h-fg: var(--a-hil);
--btn-h-bg: #050;
--btn-1-fg: #000;
--btn-1-bg: #4f4;
--btn-1h-fg: var(--btn-1-fg);
--btn-1h-bg: #3f3;
--chk-fg: var(--tab-alt);
--txt-sh: var(--bg-d2);
--txt-bg: var(--btn-bg);
--op-aa-fg: var(--a);
--op-aa-bg: var(--bg-d2);
--op-a-sh: rgba(0,0,0,0.5);
--u2-btn-b1: var(--fg-weak);
--u2-sbtn-b1: var(--fg-weak);
--u2-txt-bg: var(--bg-u5);
--u2-tab-bg: linear-gradient(to bottom, var(--bg), var(--bg-u1));
--u2-tab-b1: var(--fg-weak);
--u2-tab-1-fg: #fff;
--u2-tab-1-bg: linear-gradient(to bottom, var(#353), var(--bg) 80%);
--u2-tab-1-b1: #7c5;
--u2-tab-1-b2: #583;
--u2-tab-1-sh: #280;
--u2-b-fg: #fff;
--u2-b1-bg: #3a3;
--u2-b2-bg: #3a3;
--u2-o-bg: var(--btn-bg);
--u2-o-b1: var(--bg-u5);
--u2-o-h-bg: var(--fg-weak);
--u2-o-1-bg: var(--fg-weak);
--u2-o-1-b1: var(--a);
--u2-o-1h-bg: var(--a);
--u2-inf-bg: #07a;
--u2-inf-b1: #0be;
--u2-ok-bg: #380;
--u2-ok-b1: #8e4;
--u2-err-bg: #900;
--u2-err-b1: #d06;
--ud-b1: #888;
--sort-1: #fff;
--sort-2: #3f3;
--srv-1: #3e3;
--srv-2: #1a1;
--srv-3: #0f0;
--srv-3b: #070;
--tree-bg: #010;
--g-play-bg: #750;
--g-play-b1: #c90;
--g-play-b2: #da4;
--g-play-sh: #b83;
--g-sel-fg: #fff;
--g-sel-bg: #925;
--g-sel-b1: #c37;
--g-sel-sh: #b36;
--g-fsel-bg: #d39;
--g-fsel-b1: #d48;
--g-fsel-ts: #804;
--g-fg: var(--a-hil);
--g-bg: var(--bg-u2);
--g-b1: var(--bg-u4);
--g-b2: var(--bg-u5);
--g-g1: var(--bg-u2);
--g-g2: var(--bg-u5);
--g-f-bg: var(--bg-u4);
--g-f-b1: var(--bg-u5);
--g-f-fg: var(--a-hil);
--g-sh: rgba(0,0,0,0.3);
--f-sh1: 0.33;
--f-sh2: 0.02;
--f-sh3: 0.2;
--f-h-b1: #3b3;
--f-play-bg: #fc5;
--f-play-fg: #000;
--f-sel-sh: #fc0;
--f-gray: #999;
--fm-off: #f6c;
--mp-sh: var(--bg-d3);
--err-fg: #fff;
--err-bg: #a20;
--err-b1: #f00;
--err-ts: #500;
text-shadow: none;
font-family: 'scp', monospace, monospace;
}
html.dy {
--fg: #000;
--fg-max: #000;
--fg-weak: #000;
--bg-d3: #fff;
--bg-d2: #fff;
--bg-d1: #fff;
--bg: #fff;
--bg-u1: #fff;
--bg-u2: #fff;
--bg-u3: #fff;
--bg-u4: #fff;
--bg-u5: #fff;
--bg-u6: #fff;
--bg-max: #fff;
--tab-alt: #000;
--row-alt: #eee;
--scroll: #000;
--a: #000;
--a-b: #000;
--a-hil: #000;
--a-gray: #bbb;
--a-dark: #000;
--btn-fg: #000;
--btn-h-fg: #000;
--btn-h-bg: #fff;
--btn-1-fg: #fff;
--btn-1-bg: #000;
--btn-1h-bg: #555;
--chk-fg: a;
--txt-sh: a;
--txt-bg: a;
--op-a-sh: a;
--u2-txt-bg: a;
--u2-tab-1-sh: a;
--u2-tab-1-b1: a;
--u2-tab-1-b2: a;
--u2-tab-1-fg: a;
--u2-tab-1-bg: a;
--u2-b1-bg: #000;
--u2-b2-bg: #000;
--u2-o-h-bg: #999;
--u2-o-1h-bg: #999;
--u2-o-bg: #eee;
--u2-o-1-bg: #000;
--ud-b1: a;
--sort-1: a;
--sort-2: a;
--srv-1: a;
--srv-2: a;
--srv-3: a;
--srv-3b: a;
--tree-bg: #fff;
--g-sel-bg: #000;
--g-fsel-bg: #444;
--g-fsel-ts: #000;
--g-fg: a;
--g-bg: a;
--g-b1: a;
--g-b2: a;
--g-g1: a;
--g-g2: a;
--g-f-bg: a;
--g-f-b1: a;
--g-sh: a;
--f-sh1: a;
--f-sh2: a;
--f-sh3: a;
--f-sel-sh: #000;
--fm-off: a;
--mp-sh: a;
--mp-b-bg: #fff;
}
* {
line-height: 1.2em;
}
::selection {
color: var(--bg-d1);
background: var(--fg);
text-shadow: none;
}
html,body,tr,th,td,#files,a {
color: inherit;
background: none;
font-weight: inherit;
font-size: inherit;
padding: 0;
border: none;
}
html {
color: var(--fg);
background: var(--bgg);
font-family: sans-serif;
text-shadow: 1px 1px 0px var(--bg-max);
}
html, body {
margin: 0;
padding: 0;
}
pre, code, tt, #doc, #doc>code {
font-family: 'scp', monospace, monospace;
}
.ayjump {
position: fixed;
overflow: hidden;
width: 0;
height: 0;
}
html .ayjump:focus {
z-index: 80386;
color: #fff;
color: var(--a-hil);
background: #069;
background: var(--bg-u2);
border: .2em solid var(--a);
box-shadow: none;
outline: none;
width: auto;
height: auto;
top: .5em;
left: .5em;
padding: .5em .7em;
}
#path,
#path * {
font-size: 1em;
}
#path {
color: var(--fg);
text-shadow: 1px 1px 0 var(--bg-max);
font-weight: normal;
display: inline-block;
padding: .35em .5em .2em .5em;
margin: 1.3em 0 -.2em 0;
font-size: 1.4em;
}
html.y #path {
text-shadow: none;
}
#path #entree {
margin-left: -.7em;
}
#files {
z-index: 1;
top: -.3em;
border-spacing: 0;
position: relative;
}
#files tbody a {
display: block;
padding: .5em 0;
margin: -.3em 0;
scroll-margin-top: 45vh;
}
#files tr {
scroll-margin-top: 25vh;
scroll-margin-bottom: 20vh;
}
#files tbody div a {
color: var(--tab-alt);
}
a, #files tbody div a:last-child {
color: var(--a);
padding: .2em;
text-decoration: none;
}
a:hover {
color: var(--a-hil);
background: var(--a-h-bg);
}
#files a:hover {
color: var(--fg-max);
background: var(--bg-d3);
text-decoration: underline;
}
#files thead th {
position: sticky;
top: -1px;
}
#files thead a {
color: var(--f-gray);
font-weight: normal;
}
.s0:after,
.s1:after {
content: '⌄';
margin-left: -.1em;
}
.s0r:after,
.s1r:after {
content: '⌃';
margin-left: -.1em;
}
.s0:after,
.s0r:after {
color: var(--sort-1);
}
.s1:after,
.s1r:after {
color: var(--sort-2);
}
#files thead th:after {
margin-right: -.7em;
}
#files tbody tr:hover td,
#files tbody tr:hover td+td {
background: var(--bg-d1);
box-shadow: 0 1px 0 var(--bg-u5) inset, 0 -1px 0 var(--bg-u5) inset;
}
#files thead th {
padding: .3em;
background: var(--bg);
border-bottom: 1px solid var(--f-h-b1);
cursor: pointer;
}
html.y #files thead th {
box-shadow: 0 1px 0 rgba(0,0,0,0.12);
}
html #files.hhpick thead th {
color: #f7d;
background: #000;
box-shadow: .1em .2em 0 #f6c inset, -.1em -.1em 0 #f6c inset;
}
#files td {
margin: 0;
padding: .3em .5em;
background: var(--bg);
max-width: var(--file-td-w);
word-wrap: break-word;
overflow: hidden;
}
#files tr:nth-child(2n) td {
background: var(--row-alt);
}
#files td+td {
box-shadow: 1px 0 0 0 rgba(128,128,128,var(--f-sh1)) inset, 0 1px 0 rgba(255,255,255,var(--f-sh2)) inset, 0 -1px 0 rgba(255,255,255,var(--f-sh2)) inset;
}
#files tr:nth-child(2n+1) td+td {
box-shadow: 1px 0 0 0 rgba(128,128,128,var(--f-sh1)) inset, 0 1px 0 rgba(0,0,0,var(--f-sh3)) inset, 0 -1px 0 rgba(0,0,0,var(--f-sh3)) inset;
}
#files td:first-child {
border-radius: .25em 0 0 .25em;
white-space: nowrap;
}
#files td:last-child {
border-radius: 0 .25em .25em 0;
}
#files tbody td:nth-child(3) {
font-family: 'scp', monospace, monospace;
text-align: right;
padding-right: 1em;
white-space: nowrap;
}
#files tbody td:first-child {
color: var(--f-gray);
text-align: center;
}
#files tbody tr td:last-child {
white-space: nowrap;
}
#files thead th[style] {
width: auto !important;
}
#files .srch_hdr a {
display: inline;
}
#path a {
padding: 0 .35em;
position: relative;
z-index: 1;
/* ie: */
border-bottom: .1em solid #777\9;
margin-right: 1em\9;
}
#path a:first-child {
padding-left: .8em;
}
#path i {
width: 1.05em;
height: 1.05em;
margin: -.5em .15em -.15em -.7em;
display: inline-block;
border: 1px solid rgba(255,224,192,0.3);
border-width: .05em .05em 0 0;
transform: rotate(45deg);
background: linear-gradient(45deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.25) 75%, rgba(0,0,0,0.35));
}
html.y #path i {
background: none;
border-color: rgba(0,0,0,0.2);
border-width: .1em .1em 0 0;
}
#path a:hover {
color: var(--fg-max);
background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0.2), rgba(0,0,0,0));
}
html.y #path a:hover {
background: none;
}
.logue {
padding: .2em 0;
position: relative;
z-index: 1;
}
.logue.hidden,
.logue:empty {
display: none;
}
.logue.raw {
white-space: pre;
font-family: 'scp', 'consolas', monospace;
}
#doc>iframe,
.logue>iframe {
background: var(--bgg);
border: 1px solid var(--bgg);
border-width: 0 .3em 0 .3em;
border-radius: .5em;
visibility: hidden;
margin: 0 -.3em;
width: 100%;
height: 0;
}
#doc>iframe.focus,
.logue>iframe.focus {
box-shadow: 0 0 .1em .1em var(--a);
}
#pro.logue>iframe {
height: 100vh;
}
#pro.logue {
margin-bottom: .8em;
}
#epi.logue {
margin: .8em 0;
}
#epi.logue.mdo:before {
content: 'README.md';
text-align: center;
display: block;
margin-top: -1.5em;
}
#epi.logue.mdo {
border-top: 1px solid var(--bg-u5);
margin-top: 2.5em;
}
.mdo>h1:first-child,
.mdo>h2:first-child,
.mdo>h3:first-child {
margin-top: 1.5rem;
}
.mdo {
max-width: 52em;
}
.mdo.sb,
#epi.logue.mdo>iframe {
max-width: 54em;
}
.mdo,
.mdo * {
line-height: 1.5em;
}
#srv_info,
#srv_info2,
#acc_info {
color: var(--srv-2);
background: var(--bg);
white-space: nowrap;
}
#srv_info,
#acc_info {
position: absolute;
font-size: .8em;
top: .5em;
}
#srv_info {
left: 2em;
padding-right: .5em;
}
#acc_info,
#srv_info span,
#srv_info2 span {
color: var(--srv-1);
}
#srv_info2 {
display: none;
}
#acc_info {
right: 2em;
}
#acc_info > span:not([id]) {
color: var(--srv-1);
margin-right: .6em;
}
#acc_info span.warn {
color: var(--srv-3);
border-bottom: 1px solid var(--srv-3b);
}
#goh+span {
color: var(--bg-u5);
padding-left: .5em;
margin-left: .5em;
border-left: .2em solid var(--bg-u5);
}
#repl {
padding: .33em;
}
#files a.doc {
color: var(--a-gray);
}
#files a.doc.bri {
color: var(--tab-alt);
}
#files a.play {
color: var(--a-dark);
padding: .3em;
margin: -.3em;
}
#files tbody tr.play td,
#files tbody tr.play td+td,
#files tbody tr.play div a {
background: #fc0;
background: var(--f-play-bg);
color: var(--f-play-fg);
text-shadow: none;
}
#files tbody tr.play a {
color: inherit;
}
#files tbody tr.play a:hover {
color: var(--btn-1h-fg);
background: var(--btn-1h-bg);
}
#ggrid {
margin: -.2em -.5em;
}
#ggrid>a>span {
overflow: hidden;
display: block;
display: -webkit-box;
-webkit-line-clamp: var(--grid-ln);
-webkit-box-orient: vertical;
padding-top: .3em;
}
#ggrid>a {
display: inline-block;
width: 10em;
width: var(--grid-sz);
vertical-align: top;
overflow-wrap: break-word;
border-radius: .3em;
padding: .3em;
margin: .5em;
color: var(--g-fg);
background: var(--g-bg);
border: 1px solid var(--g-b1);
border-top: 1px solid var(--g-b2);
box-shadow: 0 .1em .3em var(--g-sh);
}
#ggrid>a:focus,
#ggrid>a:hover {
color: var(--g-f-fg);
background: var(--g-f-bg);
border-color: var(--g-f-b1);
box-shadow: 0 .1em .3em var(--g-sh);
}
#ggrid>a img {
border-radius: .2em;
max-width: 10em;
max-width: var(--grid-sz);
max-height: 8em;
max-height: calc(var(--grid-sz)/1.25);
margin: 0 auto;
display: block;
}
#ggrid.nocrop>a img {
max-height: 20em;
max-height: calc(var(--grid-sz)*2);
}
#ggrid>a.dir:before {
content: '📂';
}
#ggrid>a.dir>span {
color: var(--g-dfg);
}
#ggrid>a.au:before {
content: '💾';
}
html.np_open #ggrid>a.au:before {
content: '▶';
}
#ggrid>a:before {
display: block;
position: absolute;
padding: .3em 0;
margin: -.4em;
text-shadow: 0 0 .1em var(--bg-max);
background: linear-gradient(135deg,rgba(255,255,255,0) 50%,rgba(255,255,255,0.2));
border-radius: .3em;
font-size: 2em;
transition: font-size .15s, margin .15s;
}
#ggrid>a:focus:before,
#ggrid>a:hover:before {
font-size: 2.5em;
margin: -.2em;
}
#ggrid>a[tt] {
background: linear-gradient(135deg, var(--g-g1) 95%, var(--g-g2) 95%);
}
#ggrid>a[tt]:focus,
#ggrid>a[tt]:hover {
background: var(--g-f-bg);
}
#ggrid>a.play,
#ggrid>a[tt].play {
color: var(--g-sel-fg);
background: #fc0;
background: var(--g-play-bg);
border-color: var(--g-play-b1);
border-top: 1px solid var(--g-play-b2);
box-shadow: 0 .1em 1.2em var(--g-play-sh);
}
#files tbody tr.sel td,
#ggrid>a.sel,
#ggrid>a[tt].sel {
color: var(--g-sel-fg);
background: #f3c;
background: var(--g-sel-bg);
border-color: var(--g-sel-b1);
}
#ggrid>a.sel>span {
color: var(--g-sel-fg);
}
#ggrid>a.sel,
#ggrid>a[tt].sel {
border-top: 1px solid var(--g-fsel-b1);
box-shadow: 0 .1em 1.2em var(--g-sel-sh);
transition: all 0.2s cubic-bezier(.2, 2.2, .5, 1); /* https://cubic-bezier.com/#.4,2,.7,1 */
}
#files tbody tr.sel:hover td,
#files tbody tr.sel:focus td,
#ggrid>a.sel:hover,
#ggrid>a.sel:focus {
color: var(--g-sel-fg);
background: var(--g-fsel-bg);
border-color: var(--g-fsel-b1);
text-shadow: 1px 1px 0 var(--g-fsel-ts);
}
#ggrid>a.sel img,
#ggrid>a.play img {
opacity: .7;
filter: contrast(130%) brightness(107%);
}
#ggrid>a.sel img {
box-shadow: 0 0 1em var(--g-sel-sh);
}
#ggrid>a.play img {
box-shadow: 0 0 1em var(--g-play-sh);
}
#ggrid a {
scroll-margin-top: 25vh;
scroll-margin-bottom: 20vh;
}
#files tr.sel a,
#files tr.sel a.play {
color: var(--fg2-max);
}
#files tr.sel a:hover {
color: var(--fg-max);
text-shadow: none;
}
#files tr.sel a.play.act {
text-shadow: 0 0 1px var(--fg2-max);
}
#files tr:focus {
outline: none;
position: relative;
}
#files tr:focus td+td {
background: var(--bg-d3);
box-shadow: 0 .2em 0 var(--f-sel-sh), 0 -.2em 0 var(--f-sel-sh);
}
#files tr:focus:not(.play):not(.sel) td:first-child {
background: var(--bg-d3);
box-shadow: -.2em .2em 0 var(--f-sel-sh), -.2em -.2em 0 var(--f-sel-sh);
}
#player {
display: none;
}
#widget {
position: fixed;
font-size: 1.4em;
left: 0;
right: 0;
bottom: -6em;
height: 6em;
width: 100%;
z-index: 3;
touch-action: none;
}
#widget.anim {
transition: bottom 0.15s;
}
#widget.open {
box-shadow: 0 0 1em rgba(0,48,64,0.2);
bottom: 0;
}
html.y #widget.open {
border-top: .2em solid var(--bg-u2);
}
#widgeti {
position: relative;
z-index: 10;
width: 100%;
height: 100%;
}
#wtgrid,
#wtico {
position: relative;
font-size: .9em;
top: -.04em;
}
#wtgrid {
font-size: .75em;
padding: .1em;
top: -.12em;
}
#wtico {
cursor: url(dd/4.png), pointer;
animation: cursor 500ms;
}
#wtico:hover {
animation: cursor 500ms infinite;
}
@keyframes cursor {
0% {cursor: url(dd/2.png), pointer}
30% {cursor: url(dd/3.png), pointer}
50% {cursor: url(dd/4.png), pointer}
75% {cursor: url(dd/5.png), pointer}
85% {cursor: url(dd/4.png), pointer}
}
@keyframes spin {
100% {transform: rotate(360deg)}
}
@keyframes fadein {
0% {opacity: 0}
100% {opacity: 1}
}
#wtoggle {
position: absolute;
white-space: nowrap;
top: -1em;
right: 0;
height: 1em;
font-size: 2em;
line-height: 1em;
text-align: center;
text-shadow: none;
box-shadow: 0 0 .5em var(--mp-sh);
border-radius: .3em 0 0 0;
padding: 0 0 0 .1em;
color: var(--fg-max);
}
#wtoggle,
#widgeti {
background: #fff;
background: var(--bg-u3);
}
#wfs, #wfm, #wzip, #wnp {
display: none;
}
#wfs, #wzip, #wnp {
margin-right: .2em;
padding-right: .2em;
border: 1px solid var(--bg-u5);
border-width: 0 .1em 0 0;
}
#wfm.act+#wzip,
#wfm.act+#wzip+#wnp {
margin-left: .2em;
padding-left: .2em;
border-left-width: .1em;
}
#wfs.act,
#wfm.act {
display: inline-block;
}
#wtoggle,
#wtoggle * {
line-height: 1em;
}
#wtoggle.sel #wzip,
#wtoggle.np #wnp {
display: inline-block;
}
#wtoggle.sel.np #wnp {
display: none;
}
#wfm a,
#wnp a,
#wzip a {
font-size: .5em;
padding: 0 .3em;
margin: -.3em .1em;
position: relative;
display: inline-block;
}
#wfs {
font-size: .36em;
text-align: right;
line-height: 1.3em;
padding: 0 .3em 0 0;
border-width: 0 .25em 0 0;
}
#wfm span,
#wnp span {
font-size: .6em;
display: block;
}
#wnp span {
font-size: .7em;
}
#wfm a:not(.en) {
opacity: .3;
color: var(--fm-off);
}
#wfm a.hide {
display: none;
}
#files tbody tr.fcut td,
#ggrid>a.fcut {
animation: fcut .5s ease-out;
}
@keyframes fcut {
0% {opacity:0}
100% {opacity:1}
}
#ggrid>a.glow {
animation: gexit .6s ease-out;
}
@keyframes gexit {
0% {box-shadow: 0 0 0 2em var(--a)}
100% {box-shadow: 0 0 0em 0em var(--a)}
}
#wzip a {
font-size: .4em;
margin: -.3em .1em;
}
#wtoggle.sel .l1 {
top: -.6em;
padding: .4em .3em;
}
#barpos,
#barbuf {
position: absolute;
bottom: 1em;
left: 1em;
height: 2em;
border-radius: 9em;
width: calc(100% - 2em);
}
#barbuf {
background: var(--mp-b-bg);
z-index: 21;
}
#barpos {
box-shadow: -.03em -.03em .7em rgba(0,0,0,0.5) inset;
z-index: 22;
}
#pctl {
position: absolute;
top: .5em;
left: 1em;
}
#pctl a {
display: inline-block;
font-size: 1.25em;
width: 1.3em;
height: 1.2em;
text-align: center;
border-radius: .3em;
}
#pvol {
position: absolute;
top: .7em;
right: 1em;
height: 1.6em;
border-radius: 9em;
max-width: 12em;
width: calc(100% - 10.5em);
background: rgba(0,0,0,0.2);
}
#widget.cmp {
height: 1.6em;
bottom: -1.6em;
}
#widget.cmp.open {
bottom: 0;
}
#widget.cmp #wtoggle {
font-size: 1.2em;
}
#widget.cmp #wtgrid {
display: none;
}
#widget.cmp #pctl {
top: 0;
left: 0;
font-size: .75em;
}
#widget.cmp #pctl a {
margin: 0;
}
#widget.cmp #barpos,
#widget.cmp #barbuf {
width: calc(100% - 11em);
border-radius: 0;
left: 5em;
top: 0;
}
#widget.cmp #pvol {
top: 0;
right: 0;
max-width: 5.8em;
border-radius: 0;
}
.opview {
display: none;
}
.opview.act {
display: block;
}
#ops a {
color: var(--a);
text-shadow: 1px 1px 1px var(--op-a-sh);
font-size: 1.5em;
padding: .25em .4em;
margin: 0;
}
#ops a.act {
color: #fff;
color: var(--op-aa-fg);
background: #000;
background: var(--op-aa-bg);
border-radius: 0 0 .2em .2em;
border-bottom: .3em solid var(--a-b);
box-shadow: var(--op-aa-sh);
}
#ops a svg {
width: 1.75em;
height: 1.75em;
margin: -.5em -.3em;
}
html.y #ops svg circle {
stroke: black;
}
#ops {
padding: .3em .6em;
white-space: nowrap;
}
#noie {
color: #b60;
margin: 0 0 0 .5em;
}
.opbox {
padding: .5em;
border-radius: 0 .3em .3em 0;
border-width: 1px 1px 1px 0;
max-width: 41em;
max-width: min(41em, calc(100% - 2.6em));
}
.opbox input {
position: relative;
margin: .5em;
}
#op_cfg input[type=text] {
top: -.3em;
}
.opview input[type=text] {
color: var(--fg);
background: var(--txt-bg);
border: none;
box-shadow: 0 0 2px var(--txt-sh);
border-bottom: 1px solid #999;
border-color: var(--a);
border-radius: .2em;
padding: .2em .3em;
}
.opview input.err {
color: var(--err-fg);
background: var(--err-bg);
border-color: var(--err-b1);
box-shadow: 0 0 .7em var(--err-b1);
text-shadow: 1px 1px 0 var(--err-ts);
outline: none;
}
input[type="checkbox"]+label {
color: var(--chk-fg);
}
input[type="radio"]:checked+label,
input[type="checkbox"]:checked+label {
color: #0e0;
color: var(--a);
}
html.dz input {
font-family: 'scp', monospace, monospace;
}
.opwide div>span>input+label {
padding: .3em 0 .3em .3em;
margin: 0 0 0 -.3em;
cursor: pointer;
}
.opview input.i {
width: calc(100% - 16.2em);
}
input.drc_v,
input.eq_gain {
width: 3em;
text-align: center;
margin: 0 .6em;
}
#audio_drc table,
#audio_eq table {
border-collapse: collapse;
}
#audio_drc td,
#audio_eq td {
text-align: center;
}
#audio_eq a.eq_step {
font-size: 1.5em;
display: block;
padding: 0;
}
#au_drc,
#au_eq {
display: block;
margin-top: .5em;
padding: 1.3em .3em;
}
#au_drc {
padding: .4em .3em;
}
#ico1 {
cursor: pointer;
}
#srch_form {
padding: 0 .5em .5em 0;
}
#srch_form table {
display: inline-block;
}
#srch_form td {
padding: .6em .6em;
}
#srch_form td:first-child {
width: 3em;
padding-right: .2em;
text-align: right;
}
#srch_form:not(.tags) #tsrch_tags,
#srch_form:not(.tags) #tsrch_adv {
display: none;
}
#op_search input {
margin: .1em 0 0 0;
}
#srch_q {
white-space: pre;
color: var(--a-b);
min-height: 1em;
margin: .2em 0 -1em 1.6em;
}
#srch_q.err {
color: var(--srv-3);
}
#tq_raw {
width: calc(100% - 2em);
margin: .3em 0 0 1.4em;
}
@media (max-width: 130em) { #srch_form.tags #tq_raw { width: calc(100% - 34em) } }
@media (max-width: 95em) { #srch_form.tags #tq_raw { width: calc(100% - 2em) } }
#tq_raw td+td {
width: 100%;
}
#op_search #q_raw {
width: 100%;
display: block;
}
#files td div span {
color: var(--fg-max);
padding: 0 .4em;
font-weight: bold;
font-style: italic;
}
#files td div a:hover {
background: var(--bg-u5);
color: var(--fg-max);
}
#files td div a {
display: inline-block;
white-space: nowrap;
}
#files td div a:last-child {
width: 100%;
}
#files td div {
border-collapse: collapse;
width: 100%;
}
#wrap {
margin: 1.8em 1.5em 0 1.5em;
min-height: 70vh;
padding-bottom: 7em;
}
#tree {
display: none;
position: absolute;
left: 0;
bottom: 0;
top: 7em;
overflow-x: hidden;
overflow-y: auto;
-ms-scroll-chaining: none;
overscroll-behavior-y: none;
box-shadow: 0 0 1em var(--bg-d2), 0 -1px 0 rgba(128,128,128,0.3);
}
#tree,
html {
scrollbar-color: var(--scroll) var(--bg-u3);
}
#treeh {
position: sticky;
z-index: 1;
top: 0;
height: 2.2em;
line-height: 2.2em;
background: var(--tree-bg);
border-bottom: 1px solid var(--bg-d3);
overflow: hidden;
}
#treepar {
z-index: 1;
position: fixed;
background: var(--tree-bg);
left: -.98em;
width: calc(var(--nav-sz) - 0.5em);
border-bottom: 1px solid var(--bg-u5);
overflow: hidden;
}
#treepar.off {
display: none;
}
.np_open #thx_ff {
padding: 4.5em 0;
/* widget */
}
#tree::-webkit-scrollbar-track,
#tree::-webkit-scrollbar {
background: var(--bg-u3);
}
#tree::-webkit-scrollbar-thumb {
background: var(--scroll);
}
#tree:hover {
z-index: 2;
}
#treeul {
position: relative;
left: -2.2em;
width: calc(100% + 2em);
}
.btn {
color: var(--btn-fg);
background: #eee;
background: var(--btn-bg);
border-radius: .3em;
padding: .2em .4em;
font-size: 1.2em;
margin: .2em;
white-space: pre;
position: relative;
top: -.12em;
}
html.c .btn,
html.a .btn {
border-radius: .2em;
}
html.cz .btn {
box-shadow: 0 .1em .6em rgba(255,0,185,0.5);
border-bottom: .2em solid #709;
}
html.dz .btn {
font-size: 1em;
box-shadow: 0 0 0 .1em #080 inset;
}
html.dz .tgl.btn.on {
box-shadow: 0 0 0 .1em var(--btn-1-bg) inset;
}
.btn:hover {
color: var(--btn-h-fg);
background: var(--btn-h-bg);
}
.tgl.btn.on {
background: #000;
background: var(--btn-1-bg);
color: #fff;
color: var(--btn-1-fg);
text-shadow: none;
}
html.cz .tgl.btn.on {
box-shadow: 0 .1em .8em rgba(255,205,0,0.9);
border-bottom: .2em solid #e90;
}
.tgl.btn.on:hover {
background: var(--btn-1h-bg);
color: var(--btn-1h-fg);
}
#detree {
padding: .3em .5em;
font-size: 1.5em;
line-height: 1.5em;
}
#tree ul,
#tree li {
padding: 0;
margin: 0;
}
#tree ul {
border-left: .2em solid var(--bg-u5);
margin-left: .44em;
}
#tree li {
margin-left: .6em;
list-style: none;
border-top: 1px solid var(--bg-u5);
}
#tree li.offline>a:first-child:before {
content: '❌';
position: absolute;
margin-left: -.25em;
z-index: 3;
}
#tree ul a.sel {
background: #000;
background: var(--bg-d3);
box-shadow: -.8em 0 0 var(--g-sel-b1) inset;
color: #fff;
color: var(--fg-max);
}
#tree ul a.hl {
color: #fff;
color: var(--btn-1-fg);
background: #000;
background: var(--btn-1-bg);
text-shadow: none;
}
#tree ul a.par {
color: var(--fg-max);
}
#tree ul a {
border-radius: .3em;
display: inline-block;
}
.ntree a+a {
width: calc(100% - 2.2em);
line-height: 1em;
}
#tree.nowrap li {
min-height: 1.4em;
white-space: nowrap;
}
#tree.nowrap .ntree a+a:hover {
background: rgba(16, 16, 16, 0.67);
min-width: calc(var(--nav-sz) - 2em);
width: auto;
}
html.y #tree.nowrap .ntree a+a:hover {
background: rgba(255, 255, 255, 0.67);
color: var(--fg-max);
}
#docul a:hover,
#tree .ntree a+a:hover {
background: var(--bg-d2);
color: var(--fg-max);
}
.ntree a:first-child {
font-family: 'scp', monospace, monospace;
font-size: 1.2em;
line-height: 0;
}
.dumb_loader_thing {
display: inline-block;
margin: 1em .3em 1em 1em;
padding: 0 1.2em 0 0;
font-size: 4em;
opacity: 0;
animation: 1s linear .15s infinite forwards spin, .2s ease .15s 1 forwards fadein;
position: absolute;
z-index: 9;
}
#files .cfg {
display: none;
font-size: 2em;
white-space: nowrap;
}
#files th:hover .cfg {
display: block;
width: 1em;
border-radius: .2em;
margin: -1.2em auto 0 auto;
background: var(--bg-u5);
}
#files th span {
position: relative;
}
#files>thead>tr>th.min,
#files td.min {
display: none;
}
#files td:nth-child(2n) {
color: var(--tab-alt);
}
#plazy {
width: 1px;
height: 1px;
overflow: hidden;
white-space: nowrap;
}
#blazy {
text-align: center;
font-size: 1.2em;
margin: 1em 0;
}
#blazy code,
#blazy a {
font-size: 1.1em;
padding: 0 .2em;
}
.opwide,
#op_unpost,
#srch_form {
max-width: none;
margin-right: 1.5em;
}
.opwide>div {
display: inline-block;
vertical-align: top;
border-left: .4em solid var(--bg-u5);
margin: .7em 0 .7em .5em;
padding-left: .5em;
}
.opwide>div>div>a {
line-height: 2em;
}
.opwide>div>h3 {
color: var(--fg-weak);
margin: 0 .4em;
padding: 0;
}
#op_cfg>div>div>span {
display: inline-block;
padding: .2em .4em;
}
.opbox h3 {
margin: .8em 0 0 .6em;
padding: 0;
}
#thumbs,
#au_prescan,
#au_fullpre,
#au_os_seek,
#au_osd_cv,
#u2tdate {
opacity: .3;
}
#griden.on+#thumbs,
#au_preload.on+#au_prescan,
#au_preload.on+#au_prescan+#au_fullpre,
#au_os_ctl.on+#au_os_seek,
#au_os_ctl.on+#au_os_seek+#au_osd_cv,
#u2turbo.on+#u2tdate {
opacity: 1;
}
#wraptree.on+#hovertree {
display: none;
}
.ghead {
background: #fff;
background: var(--bg-u2);
border-radius: .3em;
padding: .2em .5em;
line-height: 2.3em;
margin-bottom: 1.5em;
}
#ghead {
position: sticky;
top: -.3em;
z-index: 1;
}
.ghead .btn {
position: relative;
top: 0;
}
.ghead>span {
white-space: pre;
padding-left: .3em;
}
#op_unpost {
padding: 1em;
}
#op_unpost td {
padding: .2em .4em;
}
#op_unpost a {
margin: 0;
padding: 0;
}
#rui {
background: #fff;
background: var(--bg);
position: fixed;
top: 0;
left: 0;
width: calc(100% - 2em);
height: auto;
overflow: auto;
max-height: calc(100% - 2em);
border-bottom: .5em solid var(--f-gray);
box-shadow: 0 0 5em rgba(0,0,0,0.8);
padding: 1em;
z-index: 765;
}
#rui div+div {
margin-top: 1em;
}
#rui table {
width: 100%;
border-collapse: collapse;
}
#rui td+td {
padding: .2em 0 .2em .5em;
}
#rn_vadv input {
font-family: 'scp', monospace, monospace;
}
#rui td+td,
#rui td input[type="text"] {
width: 100%;
}
#rn_f.m td:first-child {
white-space: nowrap;
}
#rn_f.m td+td {
width: 50%;
}
#rn_f .err td {
background: var(--err-bg);
color: var(--fg-max);
}
#rn_f .err input[readonly] {
background: var(--err-bg);
}
#rui input[readonly] {
color: var(--fg-max);
background: var(--bg-u5);
border: 1px solid rgba(255,255,255,0.2);
padding: .2em .25em;
}
#rui h1 {
margin: 0 0 .3em 0;
padding: 0;
font-size: 1.5em;
}
#doc {
overflow: visible;
background: #fff;
background: var(--bg);
margin: -1em 0 .5em 0;
padding: 1em 0 1em 0;
border-radius: .3em;
}
html.y #doc {
box-shadow: 0 0 .3em var(--bg-u5);
background: #f7f7f7;
}
#docul {
position: relative;
}
#docul li.bn {
text-align: center;
padding: .5em;
}
#docul li.bn span {
font-weight: bold;
color: var(--fg-max);
}
#doc.prism {
padding-left: 3em;
}
#doc>code {
background: none;
box-shadow: none;
z-index: 1;
}
#doc.mdo {
white-space: normal;
font-family: sans-serif;
}
#doc.prism * {
line-height: 1.5em;
}
#doc .line-highlight {
border-radius: .3em;
box-shadow: 0 0 .5em rgba(128,128,128,0.2);
background: linear-gradient(90deg, var(--bg-d3), var(--bg));
}
html.y #doc .line-highlight {
background: linear-gradient(90deg, var(--bg-max), var(--bg));
}
#docul li {
margin: 0;
}
#tree #docul li+li a {
display: block;
}
#seldoc.sel {
color: var(--fg2-max);
background: var(--g-sel-b1);
}
#pvol,
#barbuf,
#barpos,
a.btn,
#u2btn,
#u2conf label,
#rui label,
#modal-ok,
#modal-ng,
#ops,
#ico1 {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#hkhelp {
background: var(--bg);
}
#hkhelp table {
margin: 2em 2em 0 2em;
float: left;
}
#hkhelp th {
border-bottom: 1px solid var(--bg-u5);
background: var(--bg-u1);
font-weight: bold;
text-align: right;
}
#hkhelp tr+tr th {
border-top: 1.5em solid var(--bg);
}
#hkhelp td {
padding: .2em .3em;
}
#hkhelp td:first-child {
font-family: 'scp', monospace, monospace;
}
html.noscroll,
html.noscroll .sbar {
scrollbar-width: none;
}
html.noscroll::-webkit-scrollbar,
html.noscroll .sbar::-webkit-scrollbar {
display: none;
}
/* bbox */
#bbox-overlay {
display: none;
opacity: 0;
position: fixed;
overflow: hidden;
touch-action: pinch-zoom;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background: rgba(0, 0, 0, 0.8);
transition: opacity .3s ease;
}
#bbox-overlay.visible {
opacity: 1;
}
.full-image {
display: inline-block;
position: relative;
width: 100%;
height: 100%;
text-align: center;
}
.full-image figure {
display: inline;
margin: 0;
height: 100%;
}
.full-image img,
.full-image video {
display: inline-block;
outline: none;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
max-height: calc(100% - 1.4em);
margin-bottom: 1.4em;
vertical-align: middle;
transition: transform .23s, left .23s, top .23s, width .23s, height .23s;
}
.full-image img.nt,
.full-image video.nt {
transition: none;
}
.full-image.vis img,
.full-image.vis video {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}
.full-image video {
background: #222;
}
.full-image figcaption {
display: block;
position: fixed;
bottom: .1em;
width: 100%;
text-align: center;
white-space: normal;
color: var(--fg);
z-index: 1;
}
#bbox-overlay figcaption a {
background: rgba(0, 0, 0, 0.6);
border-radius: .4em;
padding: .3em .6em;
}
html.y #bbox-overlay figcaption a {
color: #0bf;
}
.full-image:before {
content: "";
display: inline-block;
height: 50%;
width: 1px;
margin-right: -1px;
}
#bbox-slider {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
white-space: nowrap;
transition: left .2s ease, transform .2s ease;
}
.bounce-from-right {
animation: bounceFromRight .3s ease-out;
}
.bounce-from-left {
animation: bounceFromLeft .3s ease-out;
}
.eog {
animation: eog .2s;
}
@keyframes bounceFromRight {
0% {margin-left: 0}
50% {margin-left: -30px}
100% {margin-left: 0}
}
@keyframes bounceFromLeft {
0% {margin-left: 0}
50% {margin-left: 30px}
100% {margin-left: 0}
}
@keyframes eog {
0% {filter: brightness(1.5)}
}
#bbox-next,
#bbox-prev {
top: 50%;
top: calc(50% - 30px);
width: 44px;
height: 60px;
}
.bbox-btn {
position: fixed;
}
.bbox-btn,
#bbox-btns {
opacity: 1;
animation: opacity .2s infinite ease-in-out;
}
.bbox-btn.off,
#bbox-btns.off {
opacity: 0;
}
#bbox-overlay button {
cursor: pointer;
outline: none;
padding: 0 .3em;
margin: 0 .4em;
border: 0;
border-radius: 15%;
background: rgba(50, 50, 50, 0.5);
color: rgba(255,255,255,0.7);
transition: background-color .3s ease;
transition: color .3s ease;
font-size: 1.4em;
line-height: 1.4em;
vertical-align: top;
font-variant: small-caps;
}
#bbox-overlay button:focus,
#bbox-overlay button:hover {
color: rgba(255,255,255,0.9);
background: rgba(50, 50, 50, 0.9);
}
#bbox-next {
right: 1%;
}
#bbox-prev {
left: 1%;
}
#bbox-btns {
top: .5em;
right: 2%;
position: fixed;
}
#bbox-halp {
color: var(--fg-max);
background: #fff;
background: var(--bg);
position: absolute;
top: 0;
left: 0;
z-index: 20;
padding: .4em;
}
#bbox-halp td {
padding: .2em .5em;
}
#bbox-halp td:first-child:not([colspan]) {
text-align: right;
}
.bbox-spinner {
width: 40px;
height: 40px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
margin-top: -20px;
margin-left: -20px;
}
.bbox-double-bounce1,
.bbox-double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #fff;
opacity: .6;
position: absolute;
top: 0;
left: 0;
animation: bounce 2s infinite ease-in-out;
}
.bbox-double-bounce2 {
animation-delay: -1s;
}
@keyframes bounce {
0%, 100% {transform: scale(0)}
50% {transform: scale(1)}
}
/* upload.css */
#op_up2k {
padding: 0 1em 1em 1em;
}
#drops {
display: none;
z-index: 3;
background: rgba(48, 48, 48, 0.7);
}
#drops.vis,
.dropzone {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.dropdesc {
position: fixed;
display: table;
left: 10%;
width: 78%;
height: 26%;
margin: 0;
font-size: 3em;
font-weight: bold;
text-shadow: .05em .05em .1em #333;
background: rgba(224, 224, 224, 0.2);
box-shadow: 0 0 0 #999;
border: .5em solid var(--ud-b1);
border-radius: .5em;
border-width: 1vw;
color: #fff;
transition: all 0.12s;
}
.dropdesc.hl.ok {
border-color: #fff;
box-shadow: 0 0 1em .4em #cf5, 0 0 1em #000 inset;
background: rgba(24, 24, 24, 0.7);
left: 8%;
width: 82%;
height: 32%;
margin: -3vh 0;
}
.dropdesc.hl.err {
background: rgba(224, 32, 65, 0.2);
box-shadow: 0 0 1em .4em #f26;
border-color: #fab;
}
.dropdesc>div {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.dropdesc>div>div {
position: absolute;
top: 40%;
top: calc(50% - .5em);
top: calc(50% - 1.2vw);
left: -.8em;
transition: top 0.12s;
}
.dropdesc>div>div+div {
left: auto;
right: -.8em;
}
.dropdesc b {
font-size: .5em;
font-size: 2vw;
margin: 0 .8em;
margin: 0 1.25vw;
transition: font-size 0.12s;
}
.dropdesc.hl.ok b {
border-bottom: .1em solid #fff;
font-size: .6em;
font-size: 2.5vw;
}
.dropdesc.hl.ok>div>div {
top: calc(50% - 1.7vw);
}
.dropzone {
z-index: 80386;
height: 50%;
}
#up_dz {
bottom: 50%;
}
#srch_dz {
top: 50%;
}
#up_zd {
top: 12%;
}
#srch_zd {
bottom: 12%;
}
.dropdesc span {
color: #fff;
background: #490;
border-bottom: .3em solid #6d2;
text-shadow: 1px 1px 1px #000;
border-radius: .3em;
padding: .4em .8em;
font-size: .4em;
}
.dropdesc.err span {
background: #904;
border-color: #d26;
}
#u2form {
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 2px;
overflow: hidden;
}
#u2form input {
background: var(--bg-u5);
border: 0px solid var(--bg-u5);
}
#u2err.err {
color: var(--a-dark);
padding: .5em;
}
#u2err.msg {
color: var(--fg-weak);
padding: .5em;
font-size: .9em;
}
#u2btn {
line-height: 1.3em;
border: .15em dashed var(--u2-btn-b1);
border-radius: .4em;
text-align: center;
font-size: 1.5em;
margin: .5em auto;
padding: .8em 0;
width: 16em;
cursor: pointer;
}
#op_up2k.srch #u2btn {
border-color: var(--u2-sbtn-b1);
}
#u2conf.ww #u2btn {
line-height: 1em;
padding: .5em 0;
margin: -2em 1em -3em 0;
}
#u2conf #u2btn {
padding: .4em 0;
margin: -2em 0;
font-size: 1.25em;
width: 100%;
max-width: 12em;
display: inline-block;
}
#u2conf #u2btn_cw {
text-align: right;
}
#u2bm {
display: block;
}
#u2bm sup {
font-weight: bold;
}
#u2notbtn {
display: none;
text-align: center;
background: var(--bg);
padding-top: 1em;
}
#u2notbtn * {
line-height: 1.3em;
}
#u2mu div {
height: 1.2em;
overflow: hidden;
}
#u2tabw {
min-height: 0;
transition: min-height .2s;
margin: 2em 0;
}
#u2tabw.na>table {
display: none;
}
#u2tab {
table-layout: fixed;
border-collapse: collapse;
width: calc(100% - 2em);
max-width: 100em;
margin: 0 auto;
}
#op_up2k.srch #u2tabf {
max-width: none;
}
#u2tab td {
word-wrap: break-word;
border: 1px solid rgba(128,128,128,0.8);
border-width: 0 0px 1px 0;
padding: .2em .3em;
}
#u2tab td:nth-child(2) {
width: 5em;
white-space: nowrap;
}
#u2tab td:nth-child(3) {
width: 40%;
}
#u2tab.up.ok td:nth-child(3),
#u2tab.up.bz td:nth-child(3),
#u2tab.up.q td:nth-child(3) {
width: 18em;
}
@media (max-width: 65em) {
#u2tab {
font-size: .9em;
}
}
@media (max-width: 50em) {
#u2tab.up.ok td:nth-child(3),
#u2tab.up.bz td:nth-child(3),
#u2tab.up.q td:nth-child(3) {
width: 16em;
}
}
#op_up2k.srch td.prog {
font-family: sans-serif;
font-size: 1em;
width: auto;
}
#u2tab tbody tr:hover td {
background: var(--bg-u2);
}
#u2etas {
padding: .2em .5em;
width: 17em;
cursor: pointer;
text-align: center;
white-space: nowrap;
display: inline-block;
font-family: 'scp', monospace, monospace;
}
#u2etas.o {
width: 20em;
}
#u2etas .o {
display: none;
}
#u2etas.o .o {
display: inherit;
display: unset;
}
#u2etaw {
width: 18em;
font-size: .94em;
margin: 1.8em auto .5em auto;
}
#u2etas.o #u2etaw {
width: 21em;
}
#u2cards {
padding: 1em 1em .42em 1em;
margin: 0 auto;
white-space: nowrap;
text-align: center;
overflow: hidden;
min-width: 24em;
}
#u2cards.w {
width: 48em;
text-align: left;
}
#u2cards.ww {
display: inline-block;
}
#u2etaw.w {
width: 55em;
text-align: right;
margin: 2em auto -2.7em auto;
}
#u2etaw.ww {
margin: -1em 2em 1em 1em;
}
#u2cards a {
padding: .2em 1em;
background: var(--u2-tab-bg);
border: 1px solid #999;
border-color: var(--u2-tab-b1);
border-width: 0 0 1px 0;
}
#u2cards a:first-child {
border-radius: .4em 0 0 0;
}
#u2cards a:last-child {
border-radius: 0 .4em 0 0;
}
#u2cards a.act {
padding-bottom: .5em;
border-width: 1px 1px .1em 1px;
border-radius: .3em .3em 0 0;
margin-left: -1px;
background: var(--u2-tab-1-bg);
box-shadow: 0 -.17em .67em var(--u2-tab-1-sh);
border-color: var(--u2-tab-1-b1) var(--u2-tab-1-b2) var(--bg) var(--u2-tab-1-b2);
color: var(--u2-tab-1-fg);
position: relative;
}
#u2cards span {
color: var(--fg-max);
font-family: 'scp', monospace;
}
#u2cards > a:nth-child(4) > span {
display: inline-block;
text-align: center;
min-width: 1.3em;
}
#u2conf {
margin: 1em auto;
width: 30em;
}
#u2conf.w {
width: 51em;
}
#u2conf.ww {
width: 82em;
}
#u2conf.ww #u2c3w {
width: 29em;
}
#u2conf.ww #u2c3w.s {
width: 39em;
}
#u2conf .c,
#u2conf .c * {
text-align: center;
line-height: 1em;
margin: 0;
padding: 0;
border: none;
}
#u2conf .txtbox {
width: 3em;
color: var(--fg-max);
background: var(--u2-txt-bg);
border: 1px solid #777;
font-size: 1.2em;
padding: .15em 0;
height: 1.05em;
}
#u2conf .txtbox.err {
color: var(--err-fg);
background: var(--err-bg);
}
#u2conf a.b {
color: var(--u2-b-fg);
background: var(--u2-b1-bg);
text-decoration: none;
border-radius: .1em;
font-size: 1.5em;
padding: .1em 0;
margin: 0 -1px;
width: 1.5em;
height: 1em;
display: inline-block;
position: relative;
bottom: -0.08em;
}
#u2conf input+a.b {
background: var(--u2-b2-bg);
}
html.b #u2conf a.b:hover {
background: var(--btn-h-bg);
}
#u2conf .c label {
font-size: 1.6em;
width: 2em;
height: 1em;
padding: .4em 0;
display: block;
border-radius: .25em;
}
#u2conf input[type="checkbox"] {
position: relative;
opacity: .02;
top: 2em;
}
#u2conf input[type="checkbox"]+label,
#u2conf input[type="checkbox"]:checked+label {
position: relative;
cursor: pointer;
background: var(--u2-o-bg);
border-bottom: .2em solid var(--u2-o-b1);
box-shadow: 0 .1em .3em var(--u2-o-sh) inset;
text-shadow: 1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000, -1px 1px 1px #000;
}
#u2conf input[type="checkbox"]:checked+label {
background: var(--u2-o-1-bg);
border-bottom: .2em solid var(--u2-o-1-b1);
box-shadow: 0 .1em .5em var(--u2-o-1-sh);
}
#u2conf input[type="checkbox"]+label:hover {
box-shadow: 0 .1em .3em var(--u2-o-h-sh);
border-color: var(--u2-o-h-b1);
background: var(--u2-o-h-bg);
}
#u2conf input[type="checkbox"]:checked+label:hover {
background: var(--u2-o-1h-bg);
}
#op_up2k.srch #u2conf td:nth-child(2)>*,
#op_up2k.srch #u2conf td:nth-child(3)>* {
background: #777;
border-color: var(--fg);
box-shadow: none;
opacity: .2;
}
#u2flagblock {
display: none;
margin: 2em auto 4em auto;
padding: .5em;
max-width: 27em;
text-align: center;
border: .2em dashed rgba(128, 128, 128, 0.3);
}
#u2foot,
#u2life {
color: var(--fg-max);
text-align: center;
margin: .8em 0;
}
#u2life {
margin: 2.5em 0;
line-height: 1.5em;
}
#u2life div {
display: inline-block;
white-space: nowrap;
margin: 0 2em;
}
#u2life div:first-child {
margin-bottom: .2em;
}
#u2life small {
opacity: .6;
}
#lifew {
border-bottom: 1px dotted var(--fg-max);
}
#u2foot {
font-size: 1.2em;
font-style: italic;
}
#u2foot .warn {
font-size: 1.2em;
padding: .5em .8em;
margin: 1em -.6em;
border-width: .1em 0;
text-align: center;
}
#u2foot .warn span {
color: var(--srv-3);
}
#u2foot span {
color: #999;
font-size: .9em;
font-weight: normal;
}
#u2foot>*+* {
margin-top: 1.5em;
}
#u2life input {
width: 4em;
text-align: right;
}
.prog {
font-family: 'scp', monospace, monospace;
}
#u2tab span.inf,
#u2tab span.ok,
#u2tab span.err {
color: #fff;
padding: .22em;
border-radius: .2em;
border: 2px solid #f0f;
}
#u2tab span.inf {
background: var(--u2-inf-bg);
border-color: var(--u2-inf-b1);
}
#u2tab span.ok {
background: var(--u2-ok-bg);
border-color: var(--u2-ok-b1);
}
#u2tab span.err {
background: var(--u2-err-bg);
border-color: var(--u2-err-b1);
}
#u2tab a>span,
#docul .bn a>span,
#unpost a>span {
font-weight: bold;
font-style: italic;
color: var(--fg-max);
padding-left: .2em;
}
.fsearch_explain {
padding-left: .7em;
font-size: 1.1em;
line-height: 0;
}
html.c #path,
html.a #path {
border-radius: 0 .3em .3em 0;
}
html.c #pctl a,
html.a #pctl a {
background: rgba(0,0,0,0.1);
margin-right: .5em;
box-shadow: -.02em -.02em .3em rgba(0,0,0,0.2) inset;
}
html.d #pctl,
html.b #pctl {
left: .5em;
}
html.d #ops,
html.c #ops,
html.a #ops {
margin: 1.7em 1.5em 0 1.5em;
border-radius: .3em;
border-width: 1px 0;
}
html.c .opbox,
html.a .opbox {
margin: 1.5em 0 0 0;
}
html.dz .opview input.i {
width: calc(100% - 18em);
}
html.c #tree,
html.c #treeh,
html.a #tree,
html.a #treeh {
border-radius: 0 .3em 0 0;
background: var(--bg-u2);
}
html.c #treepar,
html.a #treepar {
background: var(--bg-u2);
}
html.c #tree li,
html.a #tree li {
border-top: 1px solid var(--bg-u5);
border-bottom: 1px solid var(--bg-d3);
}
html.c #tree li:last-child,
html.a #tree li:last-child {
border-bottom: none;
}
html.c .opbox h3,
html.a .opbox h3 {
border-bottom: 1px solid var(--bg-u5);
}
html.c #ops,
html.c .opbox,
html.c #path,
html.c #srch_form,
html.c .ghead,
html.a #ops,
html.a .opbox,
html.a #path,
html.a #srch_form,
html.a .ghead {
background: var(--bg-u2);
border: 1px solid var(--bg-u3);
box-shadow: 0 0 .3em var(--bg-d3);
}
html.c #u2btn,
html.a #u2btn {
color: #eee;
background: var(--bg-u5);
background: -moz-linear-gradient(top, #367 0%, #489 50%, #38788a 51%, #367 100%);
background: -webkit-linear-gradient(top, #367 0%, #489 50%, #38788a 51%, #367 100%);
background: linear-gradient(to bottom, #367 0%, #489 50%, #38788a 51%, #367 100%);
box-shadow: .4em .4em 0 var(--bg-d3);
border: 1px solid #222;
}
html.ay #u2btn {
box-shadow: .4em .4em 0 #ccc;
}
html.dz #u2btn {
letter-spacing: -.033em;
}
html.c #u2conf.ww #u2btn,
html.a #u2conf.ww #u2btn {
margin: -2em .5em -3em 0;
padding: .9em 0;
}
html.c #op_up2k.srch #u2btn,
html.a #op_up2k.srch #u2btn {
background: linear-gradient(to bottom, #ca3 0%, #fd8 50%, #fc6 51%, #b92 100%);
text-shadow: 1px 1px 1px #fc6;
color: #333;
}
html.c #u2conf #u2btn,
html.a #u2conf #u2btn {
padding: .6em 0;
margin-top: -2.6em;
}
html.c #u2etas,
html.a #u2etas {
background: var(--bg-d1);
border: 1px solid var(--bg-u1);
border-width: .1em 0;
border-radius: .5em;
border-width: .25em 0;
}
html.c #u2cards,
html.a #u2cards {
margin: 0 auto -1em auto;
}
html.c #u2foot:empty,
html.a #u2foot:empty {
margin-bottom: -1em;
}
html.ay #ops,
html.ay .opbox,
html.ay #path,
html.ay #doc,
html.ay #srch_form,
html.ay .ghead,
html.ay #u2etas {
border-color: var(--bg-u2);
box-shadow: 0 0 .3em var(--bg-u5);
}
html.ay #tree li,
html.ay #treepar {
border-color: #f7f7f7 var(--bg-max) #ddd var(--bg-max);
}
html.ay #path {
background: #f7f7f7;
box-shadow: 0 0 .3em #bbb;
}
html.ay #treeh,
html.ay #treepar {
background: #f7f7f7;
border-color: #ddd;
}
html.ay #tree {
border-color: #ddd;
box-shadow: 0 0 1em #ddd;
background: #f7f7f7;
}
html.b #path {
margin: .3em 0;
line-height: 1.7em;
}
html.b.op_open #path {
margin-top: .2em;
}
html.b #srv_info {
display: none;
}
html.b #srv_info2 {
display: inline-block;
}
html.b #srv_info2:after {
content: '//';
margin: 0 .4em;
}
html.b #acc_info {
right: .5em;
}
html.b #wtoggle {
border-radius: .1em 0 0 0;
}
html.d #barpos,
html.d #barbuf,
html.d #pvol,
html.b #barpos,
html.b #barbuf,
html.b #pvol {
border-radius: .2em;
}
html.b #barpos {
box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}
html.by #barpos {
box-shadow: 0 0 0 1px rgba(0,0,0,0.2) inset;
}
html.b #ops {
max-width: 1em;
margin-bottom: 1.7em;
position: relative;
z-index: 2;
}
html.b #ops a {
background: var(--bg);
}
html.b .opview {
margin: 1em 0;
}
html.b #srch_q {
margin: .2em 0 0 1.6em;
}
html.b #srch_q:empty {
margin-bottom: -1em;
}
html.b #op_up2k {
margin-top: 3em;
}
html.b #tree {
box-shadow: 0 -1px 0 rgba(128,128,128,0.4);
}
html.bz #tree {
box-shadow: 0 -1px 0 var(--bg-d3);
}
html.b #treeh,
html.b #tree li {
border: none;
}
html.b #tree li {
margin-left: .8em;
}
html.b #docul a,
html.b .ntree a {
padding: .6em .2em;
}
html.b #treepar {
margin-left: .62em;
border-bottom: .2em solid var(--f-h-b1);
}
html.b #wrap {
margin-top: 2em;
}
html.by .ghead,
html.bz .ghead {
background: var(--bg);
padding: .2em 0;
}
html.b #files td {
padding: .5em .7em;
}
html.b #ggrid>a {
margin: .8em;
}
html.b .btn {
top: -.1em;
}
html.b #op_up2k.srch sup {
color: #fc0;
}
html.by #u2btn sup {
color: #06b;
}
html.by #op_up2k.srch sup {
color: #b70;
}
html.bz #u2cards a.act {
box-shadow: 0 -.1em .2em var(--bg-d2);
}
html.b #u2conf {
margin: 2em auto 0 auto;
}
html.b #u2conf .txtbox {
border: none;
}
html.b #u2conf a.b {
border-radius: .2em;
}
html.by #u2cards a.act {
border-width: 2px;
}
html.cy #wrap {
color: #000;
}
html.cy .mdo a {
background: #f00;
}
html.cy #op_up2k,
html.cy #files,
html.cy #files a,
html.cy #files tbody div a:last-child {
color: #000;
}
html.dz * {
border-radius: 0 !important;
}
html.d #treepar {
border-bottom: .2em solid var(--f-h-b1);
}
@media (max-width: 32em) {
#u2conf {
font-size: .9em;
}
}
@media (max-width: 28em) {
#u2conf {
font-size: .8em;
}
}
@media (min-width: 70em) {
#barpos,
#barbuf {
width: calc(100% - 21em);
left: 9.8em;
top: .7em;
height: 1.6em;
bottom: auto;
}
html.d #barpos,
html.b #barpos,
html.d #barbuf,
html.b #barbuf {
width: calc(100% - 19em);
left: 8em;
}
#widget {
bottom: -3.2em;
height: 3.2em;
}
#pvol {
max-width: 9em;
}
html.d #ops,
html.b #ops {
padding-left: 1.7em;
}
html.d .opview,
html.b .opview {
margin: 1em;
}
html.d #path,
html.b #path {
padding-left: 1.3em;
}
}
@media (max-width: 35em) {
#ops>a[data-dest="new_md"],
#ops>a[data-dest="msg"] {
display: none;
}
#op_mkdir.act+div,
#op_mkdir.act+div+div {
display: block;
margin-top: 1em;
}
}
@media (max-width: 54em) {
html.b #ops {
margin-top: 1.7em;
}
}
@supports (display: grid) and (gap: 1em) {
#ggrid {
display: grid;
margin: 0em 0.25em;
padding: unset;
grid-template-columns: repeat(auto-fit,var(--grid-sz));
justify-content: center;
gap: 1em;
}
html.b #ggrid {
padding: 0 2em 2em 0;
gap: .5em 3em;
}
#ggrid > a {
margin: unset;
padding: unset;
}
#ggrid>a>span {
text-align: center;
padding: 0.2em;
}
}
@media (prefers-reduced-motion) {
@keyframes spin { }
@keyframes gexit { }
@keyframes bounce { }
@keyframes bounceFromLeft { }
@keyframes bounceFromRight { }
#ggrid>a:before,
#widget.anim,
#u2tabw,
.dropdesc,
.dropdesc b,
.dropdesc>div>div {
transition: none;
}
}