From e8e72a4a5634c994b522699ca46dd91037b2adc2 Mon Sep 17 00:00:00 2001 From: Til Schmitter Date: Sun, 26 Apr 2026 14:34:48 +0200 Subject: [PATCH] alternate theme fixes --- copyparty/web/browser.css | 59 ++++++++++++++++++++++++++++----------- 1 file changed, 43 insertions(+), 16 deletions(-) diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index 521123da..bb792c05 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -48,8 +48,10 @@ --a-gray: hsl(from var(--a) h 0 l); --btn-fg: var(--a); + --btn-bg-a: rgba(128,128,128,0.15); + --btn-bg-a: color-mix(var(--bg-max) 85%, var(--fg-max) 20%); --btn-bg: rgba(128,128,128,0.15); - --btn-bg: color-mix(var(--bg-max) 85%, var(--fg-max) 20%); + --btn-bg: linear-gradient(-5deg, var(--btn-bg-a), color-mix(var(--a-gray) 30%, transparent)); --btn-h-fg: var(--a-hil); --btn-h-bg: hsl(from color-mix(var(--a-gray) 65%, var(--bg-max) 35%) h 0 l); --btn-1-fg: var(--bg); @@ -61,10 +63,11 @@ --btn-1h-fg: var(--btn-1-fg); --btn-1h-bg: var(--a-hil); --btn-1h-bs: var(--btn-1-bs); + --btn-bb: 1px solid var(--bg-u3); --btn-1h-bb: var(--btn-1-bb); --chk-fg: var(--tab-alt); --txt-sh: var(--bg-d2); - --txt-bg: var(--btn-bg); + --txt-bg: var(--btn-bg-a); --op-aa-fg: var(--a); --op-aa-bg: var(--bg-d2); @@ -213,7 +216,6 @@ html.a { --op-aa-sh: 0 0 .2em var(--bg-d3) inset; --btn-bs: .1em .2em .1em var(--bg-half); - --btn-bb: 1px solid var(--bg-u3); } html.az { --btn-1-bs: .05em .1em .2em var(--a-dark) inset; @@ -300,7 +302,7 @@ html.c { --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: #376ac5; --bg-u3: #407; --a: #f9dc22; @@ -310,7 +312,7 @@ html.c { --row-alt: #47237d; --btn-fg: #fff; - --btn-bg: #9019bf; + --btn-bg-a: #9019bf; --btn-h-bg: #a039ff; --chk-fg: #d90; @@ -445,7 +447,7 @@ html.dy { --bg: #fff; --bg-u1: #fff; --bg-u2: #fff; - --bg-u3: #fff; + --bg-u3: #000; --bg-u5: #fff; --bg-max: #fff; @@ -457,6 +459,7 @@ html.dy { --a-gray: #bbb; --a-dark: #000; + --btn-bg: #fff; --btn-fg: #000; --btn-h-fg: #000; --btn-h-bg: #fff; @@ -513,6 +516,9 @@ html.dy { --mp-sh: a; --mp-b-bg: #fff; } +html.dy #spaceUsed_bar { + background: #000; +} * { line-height: 1.2em; } @@ -604,7 +610,7 @@ html .ayjump:focus-visible { white-space: nowrap; overflow-x: auto; overflow-y: hidden; - background: var(--bg); + background: var(--bg-u2); border-radius: var(--b-radius); } #pathBar #folder_search { @@ -819,7 +825,7 @@ html.y #files span.fsz_P { font-weight: bold } margin: -1em .3em -1em -1.7em; display: inline-block; transform: skew(-25deg); - border-right: var(--bg) solid 1px; + border-right: var(--bg) solid 2px; background: linear-gradient(70deg, transparent 40%, color-mix(var(--bg-max) 25%, transparent) 75%, color-mix(var(--bg-max) 35%, transparent)); } #path a:hover { @@ -1635,6 +1641,7 @@ html.y #ops svg circle { display: flex; height: 2em; border-radius: var(--b-radius); + background: var(--bg-u2); } #noie { color: #b60; @@ -1651,7 +1658,7 @@ html.y #ops svg circle { box-shadow: var(--btn-1-bs); color: var(--bg); - border: var(--btn-bg) solid 1px; + border: var(--btn-bg-a) solid 1px; border-radius: var(--b-radius); justify-content: center; display: flex; @@ -1700,7 +1707,6 @@ input[type=color] { .opview select { padding: .3em; margin: .2em 0 ; - background: var(--bg-u3); } .opview input.err { color: var(--err-fg); @@ -1926,7 +1932,7 @@ html { .btn { color: var(--btn-fg); background: #eee; - background: linear-gradient(-5deg, var(--btn-bg), color-mix(var(--a-gray) 30%, transparent)); + background: var(--btn-bg); box-shadow: var(--btn-bs); border: 1px solid var(--bg-u3); border-bottom: var(--btn-bb); @@ -3188,7 +3194,7 @@ html.b #u2conf a.b:hover { #u2conf input[type="checkbox"]:checked+label { position: relative; cursor: pointer; - background: var(--btn-bg); + background: var(--btn-bg-a); box-shadow: var(--btn-bs); border-bottom: var(--btn-bb); text-shadow: 1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000, -1px 1px 1px #000; @@ -3389,7 +3395,6 @@ html.a .opbox h3 { html.c #ops, html.c .opbox, html.c #path, -html.c #wfp, html.c #srch_form, html.c .ghead, @@ -3399,15 +3404,19 @@ html.a #path, html.a #srch_form, html.a .ghead { background: #ccc; - background: linear-gradient(-5deg, var(--btn-bg), color-mix(var(--a-gray) 30%, transparent)); + background: var(--btn-bg); border: 1px solid var(--bg-u3); - box-shadow: 0 0 .3em var(--bg-d3); + border-bottom: var(--btn-bb); + box-shadow: var(--btn-bs); backdrop-filter: blur(10px); } html.a .btn, html.c .btn { backdrop-filter: blur(10px); } +html.c .setting:hover { + background: color-mix(var(--bg-u5) 30%, transparent); +} /* html.c #u2btn, html.a #u2btn { color: #eee; @@ -3534,10 +3543,14 @@ html.b #docul a, html.b .ntree a { padding: .6em .2em; } +html.dy *, +html.cy *, html.b * { box-shadow: none !important; - backdrop-filter: unset; + backdrop-filter: none !important; } +html.b #path, +html.b #ops, html.b #pctl .btn:not(:hover), html.b .btn:not(:hover):not(.on) { background: color-mix(var(--bg-u5), transparent); @@ -3612,6 +3625,9 @@ html.cy #barbuf { html.cy #pvol { filter: hue-rotate(4deg) contrast(2.2); } +html.cy #path i { + background: transparent; +} @@ -3664,6 +3680,9 @@ html:not(.e) #wrap.thin { padding: .3em; } } +html.b #wrap.thin #ghead { + top: 7em; +} #wrap.thin { .td_w { width: calc(100vw - 8.5em); @@ -3690,6 +3709,9 @@ html.e #wrap.thin { } } @media (max-width: 50em){ + html.b #wrap.thin #ghead { + top: 7.3em; + } .ntree a + a { padding: .6em .2em; } @@ -4055,6 +4077,7 @@ html.ez { html.e { text-shadow: none; + --bg-u1: #0002; } html.e * { border-radius: 0 !important; @@ -4084,6 +4107,10 @@ html.e input[type="submit"] { background: var(--bg); border: 0; } +html.e #ops, +html.e #treesuperh { + background: transparent; +} html.e details[open] summary, a.s0r, html.e #ghead a.s0,