diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index 9d8d3d70..5f7239c7 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -32,19 +32,29 @@ --a-dark: #e70; --a-gray: #666; - --btn-0h-bg: #805; + --btn-fg: var(--a); + --btn-bg: rgba(128,128,128,0.15); + --btn-h-fg: var(--a); + --btn-h-bg: #805; --btn-1-fg: #400; --btn-1-bg: var(--a); --btn-1h-bg: #fe8; --chk-fg: var(--tab-alt); --txt-sh: var(--bg-d2); + --op-aa-fg: var(--a); + --op-aa-bg: var(--bg-d2); + --u2-btn-b1: #999; - --u2-tab-gr: #353; - --u2-tab-sh: #280; - --u2-tab-b1: #7c5; - --u2-tab-b2: #583; - --u2-tab-fg: #fd7; + --u2-sbtn-b1: #999; + --u2-txt-bg: var(--bg-u5); + --u2-tab-bg: linear-gradient(to bottom, var(--bg), var(--bg-u1)); + --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; @@ -53,7 +63,7 @@ --u2-ok-b1: #8e4; --u2-err-bg: #900; --u2-err-b1: #d06; - + --sort-1: #fb0; --sort-2: #d09; @@ -94,6 +104,7 @@ --fm-off: #f6c; --mp-sh: var(--bg-d3); + --mp-b-bg: rgba(0,0,0,0.2); --err-fg: #fff; --err-bg: #a20; @@ -128,17 +139,20 @@ html.y { --a-gray: #bbb; --a-dark: #c0f; - --btn-0h-bg: #caf; + --btn-fg: #555; + --btn-h-bg: #caf; --btn-1-fg: #fff; --btn-1-bg: #4a0; --btn-1h-bg: #5c0; --chk-fg: var(--fg); --txt-sh: #888; - --u2-tab-sh: #0ad; - --u2-tab-b1: #09c; - --u2-tab-b2: #05a; - --u2-tab-fg: var(--fg-max); + --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; --sort-1: #059; --sort-2: #f5d; @@ -164,19 +178,66 @@ html.y { --fm-off: #c4a; --mp-sh: #bbb; + --mp-b-bg: transparent; +} +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); + + --btn-h-fg: #fff; + + --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-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); +} +html.bz { + --u2-tab-bg: linear-gradient(to bottom, var(--bg), var(--bg-u2)); + --u2-tab-1-fg: var(--fg-max); + --u2-tab-1-bg: var(--bg); } html.by { --scroll: #049; --btn-1-bg: var(--a); --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; } * { line-height: 1.2em; @@ -754,12 +815,9 @@ html.y #widget.open { width: calc(100% - 2em); } #barbuf { - background: rgba(0,0,0,0.2); + background: var(--mp-b-bg); z-index: 21; } -html.y #barbuf { - background: none; -} #barpos { box-shadow: -.03em -.03em .7em rgba(0,0,0,0.5) inset; z-index: 22; @@ -843,10 +901,11 @@ html.y #barbuf { outline: none; } #ops a.act { - background: var(--bg-d2); + color: var(--op-aa-fg); + background: var(--op-aa-bg); border-radius: 0 0 .2em .2em; border-bottom: .3em solid var(--a-b); - -padding-top: .37em; + box-shadow: var(--op-aa-sh); } #ops a svg { width: 1.75em; @@ -872,15 +931,14 @@ html.y #ops svg circle { } .opview input[type=text] { color: var(--fg); - background: var(--bg-u4); + background: var(--btn-bg); border: none; box-shadow: 0 0 2px var(--txt-sh); border-bottom: 1px solid var(--a); border-radius: .2em; padding: .2em .3em; } -.opview input.err, -html.y .opview input[type="text"].err { +.opview input.err { color: var(--err-fg); background: var(--err-bg); border-color: var(--err-b1); @@ -1020,6 +1078,7 @@ input.eq_gain { #treepar { z-index: 1; position: fixed; + background: var(--tree-bg); left: -.75em; width: calc(var(--nav-sz) - 0.5em); border-bottom: 1px solid var(--bg-u5); @@ -1048,7 +1107,9 @@ input.eq_gain { width: calc(100% + 2em); } .btn { - background: var(--bg-u4); + color: var(--btn-fg); + background: var(--btn-bg); + border-radius: .3em; padding: .2em .4em; font-size: 1.2em; margin: .2em; @@ -1056,8 +1117,11 @@ input.eq_gain { position: relative; top: -.2em; } +html.a .btn { + border-radius: .2em; +} .btn:hover { - background: var(--btn-0h-bg); + background: var(--btn-h-bg); } .tgl.btn.on { background: var(--btn-1-bg); @@ -1745,7 +1809,7 @@ html.y #bbox-overlay figcaption a { } #u2btn { line-height: 1.3em; - border: .15em dashed #999; + border: .15em dashed var(--u2-btn-b1); border-radius: .4em; text-align: center; font-size: 1.5em; @@ -1754,6 +1818,9 @@ html.y #bbox-overlay figcaption a { width: 16em; cursor: pointer; } +#op_up2k.srch #u2btn { + border-color: var(--u2-sbtn-b1); +} #u2conf.ww #u2btn { line-height: 1em; padding: .5em 0; @@ -1876,9 +1943,9 @@ html.y #bbox-overlay figcaption a { } #u2cards a { padding: .2em 1em; + background: var(--u2-tab-bg); border: 1px solid rgba(128,128,128,0.8); border-width: 0 0 1px 0; - background: linear-gradient(to bottom, var(--bg), var(--bg-u1)); } #u2cards a:first-child { border-radius: .4em 0 0 0; @@ -1891,15 +1958,12 @@ html.y #bbox-overlay figcaption a { border-width: 1px 1px .1em 1px; border-radius: .3em .3em 0 0; margin-left: -1px; - background: linear-gradient(to bottom, var(--u2-tab-gr), var(--bg) 80%); - box-shadow: 0 -.17em .67em var(--u2-tab-sh); - border-color: var(--u2-tab-b1) var(--u2-tab-b2) var(--bg) var(--u2-tab-b2); - color: var(--u2-tab-fg); + 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; } -html.y #u2cards a.act { - background: inherit; -} #u2cards span { color: var(--fg-max); } @@ -1933,7 +1997,7 @@ html.y #u2cards a.act { #u2conf .txtbox { width: 3em; color: var(--fg-max); - background: var(--bg-u5); + background: var(--u2-txt-bg); border: 1px solid #777; font-size: 1.2em; padding: .15em 0; @@ -1944,7 +2008,7 @@ html.y #u2cards a.act { background: var(--err-bg); } #u2conf a.b { - color: var(--fg-max); + color: var(--u2-b-fg); background: var(--u2-b1-bg); text-decoration: none; border-radius: .1em; @@ -1957,6 +2021,9 @@ html.y #u2cards a.act { position: relative; bottom: -0.08em; } +html.b #u2conf a.b:hover { + background: var(--btn-h-bg); +} #u2conf .c label { font-size: 1.6em; width: 2em; @@ -1973,8 +2040,25 @@ html.y #u2cards a.act { #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(1)>*, #op_up2k.srch #u2conf td:nth-child(2)>*, #op_up2k.srch #u2conf td:nth-child(3)>* { @@ -2069,10 +2153,6 @@ html.a #pctl a { margin-right: .5em; box-shadow: -.02em -.02em .3em rgba(0,0,0,0.2) inset; } -html.a #ops a.act { - box-shadow: 0 0 .2em var(--bg-d3) inset; - padding-bottom: .3em; -} html.a #ops { margin: 1.7em 1.5em 0 1.5em; border-radius: .3em; @@ -2085,9 +2165,6 @@ html.a #tree, html.a #treeh { border-radius: 0 .3em 0 0; } -html.a .btn { - border-radius: .3em; -} html.a #tree li { border-top: 1px solid var(--bg-u5); border-bottom: 1px solid var(--bg-d3); @@ -2150,24 +2227,6 @@ html.a #u2cards { html.a #u2conf input+a.b { background: var(--u2-b2-bg); } -html.ay #u2conf .txtbox { - background: var(--bg-max); -} -html.a #u2conf input[type="checkbox"]+label { - position: relative; - background: #603; - border-bottom: .2em solid #a16; - box-shadow: 0 .1em .3em #a00 inset; -} -html.a #u2conf input[type="checkbox"]:checked+label { - background: #6a1; - border-bottom: .2em solid #efa; - box-shadow: 0 .1em .5em #0c0; -} -html.a #u2conf input[type="checkbox"]+label:hover { - box-shadow: 0 .1em .3em #fb0; - border-color: #fb0; -} html.a #u2foot:empty { margin-bottom: -1em; } @@ -2181,15 +2240,6 @@ html.ay #u2etas { border-color: var(--bg-u2); box-shadow: 0 0 .3em var(--bg-u5); } -html.ay #ops a.act { - box-shadow: 0 .1em .2em #ccc; - background: var(--bg-max); -} -html.ay .btn { - color: #666; - background: #ddd; - box-shadow: none; -} html.ay #tree li, html.ay #treepar { border-color: #f7f7f7 var(--bg-max) #ddd var(--bg-max); @@ -2254,12 +2304,6 @@ html.b #ops { html.b #ops a { background: var(--bg); } -html.b #ops a.act { - background: rgba(255,255,255,0.06); -} -html.by #ops a.act { - background: #fff; -} html.b .opview { margin: 1em 0; } @@ -2287,23 +2331,6 @@ html.b #treeul>li:first-child { html.b .btn { top: -.1em; } -html.by #u2conf a.b, -html.by .btn { - color: #555; -} -html.b #u2conf input[type="checkbox"]+label:hover, -html.b #u2conf a.b:hover, -html.b .btn:hover { - background: #805; - color: #fff; -} -html.b #u2conf input[type="checkbox"]:checked+label { - color: #400; - background: #fc4; -} -html.b #u2conf input[type="checkbox"]:checked+label:hover { - background: #fe8; -} html.bz .ghead { background: var(--bg); padding: .2em 0; @@ -2311,24 +2338,6 @@ html.bz .ghead { html.b #rui input[readonly] { background: #333; } -html.bz #treeh, -html.bz #treepar { - background: var(--bg); -} -html.b .btn, -html.b #u2conf input[type="checkbox"]+label, -html.b .opview input[type=text] { - background: rgba(128,128,128,0.15); - border-radius: .2em; -} -html.by #u2conf input[type="checkbox"]+label:hover, -html.by #u2conf a.b:hover { - background: #caf; -} -html.by #u2conf input[type="checkbox"]:checked+label { - background: #4a0; - color: #fff; -} html.by #treeh, html.by #tree li { border-color: #bbb; @@ -2342,23 +2351,16 @@ html.by #u2btn sup { html.by #op_up2k.srch sup { color: #b70; } -html.bz #u2cards a { - background: linear-gradient(to bottom, var(--bg), var(--bg-u2)); -} html.bz #u2cards a.act { box-shadow: 0 -.1em .2em var(--bg-d2); - background: var(--bg); - color: var(--fg-max); } html.b #u2conf { margin: 2em auto 0 auto; } html.b #u2conf .txtbox { - background: transparent; border: none; } html.b #u2conf a.b { - background: rgba(128,128,128,0.15); border-radius: .2em; } html.by #u2cards a.act { diff --git a/copyparty/web/md.css b/copyparty/web/md.css index 23d9e2a0..aef4609d 100644 --- a/copyparty/web/md.css +++ b/copyparty/web/md.css @@ -161,7 +161,7 @@ blink { height: 1.05em; margin: -.2em .3em -.2em -.4em; display: inline-block; - border: 1px solid rgba(0,0,0,0.2); + border: 1px solid rgba(154,154,154,0.6); border-width: .2em .2em 0 0; transform: rotate(45deg); } @@ -236,9 +236,6 @@ blink { html.z #toc li { border-width: 0; } - html.z #mn a:not(:last-child)::after { - border-color: rgba(255,255,255,0.3); - } html.z #mn a { color: #ccc; }