mirrors/copyparty
1
0
Fork 0
mirror of https://github.com/9001/copyparty.git synced 2026-06-21 05:32:25 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

set flat theme as default

Browse source
This commit is contained in:
Til Schmitter 2026-05-10 19:37:27 +02:00
parent d1e9163b5f
commit 59b6919f8d
3 changed files with 79 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

148
copyparty/web/browser.css
View file

@ -126,19 +126,19 @@
html.y { html.y {
--scrl-hint: var(--bg); --scrl-hint: var(--bg);
} }
html.a { html.b {
--op-aa-sh: 0 0 .2em var(--bg-d3) inset; --op-aa-sh: 0 0 .2em var(--bg-d3) inset;
--btn-bs: .1em .2em .1em var(--mp-sh); --btn-bs: .1em .2em .1em var(--mp-sh);
} }
html.az { html.bz {
--btn-1-bs: .05em .1em .2em var(--a-dark) inset; --btn-1-bs: .05em .1em .2em var(--a-dark) inset;
} }
html.ay { html.by {
--btn-bg: linear-gradient(-5deg, color-mix(in oklab, var(--btn-bg-a)80%, var(--a)), color-mix(in oklab, var(--btn-bg-a) 50%, transparent)); --btn-bg: linear-gradient(-5deg, color-mix(in oklab, var(--btn-bg-a)80%, var(--a)), color-mix(in oklab, var(--btn-bg-a) 50%, transparent));
} }
html.b { html.a {
--btn-bs: 0 .05em 0 var(--bg-d3) inset; --btn-bs: 0 .05em 0 var(--bg-d3) inset;
--btn-1-bs: 0 .05em 0 var(--btn-1h-bg) inset; --btn-1-bs: 0 .05em 0 var(--btn-1h-bg) inset;
--btn-bg: color-mix(in oklab, var(--bg-u5), transparent); --btn-bg: color-mix(in oklab, var(--bg-u5), transparent);
@ -165,7 +165,7 @@ html.b {
html.bz { html.bz {
--a: #fc5; --a: #fc5;
} }
html.by { html.ay {
--a: #07c; --a: #07c;
--bg: var(--bg-u2); --bg: var(--bg-u2);
} }
@ -747,15 +747,15 @@ html.y #files span.fsz_P { font-weight: bold }
border-right: var(--bg) solid 2px; border-right: var(--bg) solid 2px;
background: linear-gradient(70deg, transparent 40%, color-mix(in oklab, var(--bg-max) 25%, transparent) 75%, color-mix(in oklab, var(--bg-max) 35%, transparent)); background: linear-gradient(70deg, transparent 40%, color-mix(in oklab, var(--bg-max) 25%, transparent) 75%, color-mix(in oklab, var(--bg-max) 35%, transparent));
} }
html.a #path i { html.b #path i {
border-right: var(--bg) solid 1px; border-right: var(--bg) solid 1px;
} }
#path a:hover { #path a:hover {
color: var(--fg-max); color: var(--fg-max);
background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0.2), rgba(0,0,0,0)); background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0.2), rgba(0,0,0,0));
} }
html.b #ggrid>a.dir:before, html.a #ggrid>a.dir:before,
html.b #path i { html.a #path i {
background: none; background: none;
} }
html.y #path a:hover { html.y #path a:hover {
@ -2020,7 +2020,7 @@ html {
margin: 0 .1em 0 0; margin: 0 .1em 0 0;
} }
html.c .btn, html.c .btn,
html.a .btn { html.b .btn {
border-radius: var(--radius); border-radius: var(--radius);
} }
.btn:hover { .btn:hover {
@ -2617,11 +2617,11 @@ html.noscroll .sbar::-webkit-scrollbar {
-ms-interpolation-mode: nearest-neighbor; -ms-interpolation-mode: nearest-neighbor;
image-rendering: pixelated; image-rendering: pixelated;
} }
html.bb_fsc .full-image img, html.ab_fsc .full-image img,
html.bb_fsc .full-image video { html.ab_fsc .full-image video {
max-height: 100%; max-height: 100%;
} }
html.bb_fsc figcaption { html.ab_fsc figcaption {
display: none; display: none;
} }
.full-image img.nt, .full-image img.nt,
@ -3355,7 +3355,7 @@ details .setting {
#u2conf input+a.b { #u2conf input+a.b {
background: var(--u2-b2-bg); background: var(--u2-b2-bg);
} }
html.b #u2conf a.b:hover { html.a #u2conf a.b:hover {
background: var(--btn-h-bg); background: var(--btn-h-bg);
} }
#u2conf .c label { #u2conf .c label {
@ -3552,20 +3552,20 @@ html.dz .opview input.i {
background: var(--bg-u2); background: var(--bg-u2);
} }
html.c #treepar, html.c #treepar,
html.a #treepar { html.b #treepar {
background: var(--bg-u2); background: var(--bg-u2);
} }
html.c #tree li, html.c #tree li,
html.a #tree li { html.b #tree li {
border-top: 1px solid var(--bg-u5); border-top: 1px solid var(--bg-u5);
border-bottom: 1px solid var(--bg-d3); border-bottom: 1px solid var(--bg-d3);
} }
html.c #tree li:last-child, html.c #tree li:last-child,
html.a #tree li:last-child { html.b #tree li:last-child {
border-bottom: none; border-bottom: none;
} }
html.c .opbox h3, html.c .opbox h3,
html.a .opbox h3 { html.b .opbox h3 {
border-bottom: 1px solid var(--bg-u5); border-bottom: 1px solid var(--bg-u5);
} }
html.c #ops, html.c #ops,
@ -3574,18 +3574,18 @@ html.c #path,
html.c #srch_form, html.c #srch_form,
html.c .ghead, html.c .ghead,
html.a #ops, html.b #ops,
html.a .opbox, html.b .opbox,
html.a #path, html.b #path,
html.a #srch_form, html.b #srch_form,
html.a .ghead { html.b .ghead {
background: #c1d1ed; background: #c1d1ed;
background: var(--btn-bg); background: var(--btn-bg);
border: 1px solid var(--bg-u3); border: 1px solid var(--bg-u3);
border-bottom: var(--btn-bb); border-bottom: var(--btn-bb);
box-shadow: var(--btn-bs); box-shadow: var(--btn-bs);
} }
html.a, html.b,
html.cz { html.cz {
.ghead, .ghead,
#wfp .btn:not(:hover), #wfp .btn:not(:hover),
@ -3602,48 +3602,48 @@ html.cz {
html.c .modal .setting:hover { html.c .modal .setting:hover {
background: color-mix(in oklab, var(--bg-u5) 30%, transparent); background: color-mix(in oklab, var(--bg-u5) 30%, transparent);
} }
html.ay #u2btn { html.by #u2btn {
box-shadow: .4em .4em 0 #ccc; box-shadow: .4em .4em 0 #ccc;
} }
html.dz #u2btn { html.dz #u2btn {
letter-spacing: -.033em; letter-spacing: -.033em;
} }
html.c #u2conf #u2btn, html.c #u2conf #u2btn,
html.a #u2conf #u2btn { html.b #u2conf #u2btn {
padding: .6em 0; padding: .6em 0;
margin-top: .2em; margin-top: .2em;
} }
html.c #u2etas, html.c #u2etas,
html.a #u2etas { html.b #u2etas {
background: var(--bg-d1); background: var(--bg-d1);
border: 1px solid var(--bg-u1); border: 1px solid var(--bg-u1);
border-width: 2px; border-width: 2px;
border-radius: calc(var(--radius) * 1.6); border-radius: calc(var(--radius) * 1.6);
} }
html.c #u2foot:empty, html.c #u2foot:empty,
html.a #u2foot:empty { html.b #u2foot:empty {
margin-bottom: -1em; margin-bottom: -1em;
} }
html.ay #ops, html.by #ops,
html.ay .opbox, html.by .opbox,
html.ay #path, html.by #path,
html.ay #doc, html.by #doc,
html.ay #srch_form, html.by #srch_form,
html.ay .ghead, html.by .ghead,
html.ay #u2etas { html.by #u2etas {
border-color: var(--bg-u2); border-color: var(--bg-u2);
box-shadow: 0 0 .3em var(--bg-u5); box-shadow: 0 0 .3em var(--bg-u5);
} }
html.ay #tree li, html.by #tree li,
html.ay #treepar { html.by #treepar {
border-color: var(--bg) var(--bg-max) #ddd var(--bg-max); border-color: var(--bg) var(--bg-max) #ddd var(--bg-max);
} }
html.ay #treesuperh, html.by #treesuperh,
html.ay #treepar { html.by #treepar {
background: var(--bg); background: var(--bg);
border-color: #ddd; border-color: #ddd;
} }
html.ay #tree { html.by #tree {
border-color: #ddd; border-color: #ddd;
box-shadow: 0 0 1em #ddd; box-shadow: 0 0 1em #ddd;
background: var(--bg); background: var(--bg);
@ -3656,65 +3656,65 @@ html.ay #tree {
html.d #barpos, html.d #barpos,
html.d #barbuf, html.d #barbuf,
html.d #pvol, html.d #pvol,
html.b #barpos, html.a #barpos,
html.b #barbuf, html.a #barbuf,
html.b #pvol { html.a #pvol {
border-radius: .2em; border-radius: .2em;
} }
html.b #barpos { html.a #barpos {
box-shadow: 0 0 0 1px rgba(0,0,0,0.4); box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
} }
html.by #barpos { html.ay #barpos {
box-shadow: 0 0 0 1px rgba(0,0,0,0.2) inset; box-shadow: 0 0 0 1px rgba(0,0,0,0.2) inset;
} }
html.b #pathBar { html.a #pathBar {
background: var(--bg); background: var(--bg);
} }
html.b #srch_q { html.a #srch_q {
margin: .2em 0 0 1.6em; margin: .2em 0 0 1.6em;
} }
html.b #srch_q:empty { html.a #srch_q:empty {
margin-bottom: -1em; margin-bottom: -1em;
} }
html.b #tree { html.a #tree {
box-shadow: 0 -1px 0 rgba(128,128,128,0.4); box-shadow: 0 -1px 0 rgba(128,128,128,0.4);
} }
html.bz #tree { html.az #tree {
box-shadow: 0 -1px 0 var(--bg-d3); box-shadow: 0 -1px 0 var(--bg-d3);
} }
html.b #treeh, html.a #treeh,
html.b #tree li { html.a #tree li {
border: none; border: none;
} }
html.b #tree li { html.a #tree li {
margin-left: .8em; margin-left: .8em;
} }
html.b #docul a, html.a #docul a,
html.b .ntree a { html.a .ntree a {
padding: .6em .2em; padding: .6em .2em;
} }
html.dy *, html.dy *,
html.cy *, html.cy *,
html.b * { html.a * {
box-shadow: none !important; box-shadow: none !important;
} }
html.b #path, html.a #path,
html.b #ops { html.a #ops {
background: color-mix(in oklab, var(--bg-u5), transparent); background: color-mix(in oklab, var(--bg-u5), transparent);
} }
html.b #treepar { html.a #treepar {
margin-left: .63em; margin-left: .63em;
width: calc(.1em + var(--nav-sz) - var(--sbw)); width: calc(.1em + var(--nav-sz) - var(--sbw));
border-bottom: .2em solid var(--f-h-b1); border-bottom: .2em solid var(--f-h-b1);
} }
html.d #path i, html.d #path i,
html.b #path i { html.a #path i {
border-right: var(--a) solid 2px; border-right: var(--a) solid 2px;
height: 1.5em; height: 1.5em;
margin: -.4em .3em -.4em -1.7em; margin: -.4em .3em -.4em -1.7em;
} }
html.dy .ghead, html.dy .ghead,
html.b .ghead { html.a .ghead {
background: var(--bg); background: var(--bg);
padding: .2em 0; padding: .2em 0;
border-bottom: var(--btn-bb); border-bottom: var(--btn-bb);
@ -3723,31 +3723,31 @@ html.b .ghead {
padding-left: .5em; padding-left: .5em;
padding-right: .5em; padding-right: .5em;
} }
html.b #files tbody a { html.a #files tbody a {
padding: .7em; padding: .7em;
} }
html.b #op_up2k.srch sup { html.a #op_up2k.srch sup {
color: #fc0; color: #fc0;
} }
html.by #u2btn sup { html.ay #u2btn sup {
color: #06b; color: #06b;
} }
html.by #op_up2k.srch sup { html.ay #op_up2k.srch sup {
color: #b70; color: #b70;
} }
html.bz #u2cards a.act { html.az #u2cards a.act {
box-shadow: 0 -.1em .2em var(--bg-d2); box-shadow: 0 -.1em .2em var(--bg-d2);
} }
html.b #u2conf { html.a #u2conf {
margin: 2em auto 0 auto; margin: 2em auto 0 auto;
} }
html.b #u2conf .txtbox { html.a #u2conf .txtbox {
border: none; border: none;
} }
html.b #u2conf a.b { html.a #u2conf a.b {
border-radius: .2em; border-radius: .2em;
} }
html.by #u2cards a.act { html.ay #u2cards a.act {
border-width: 2px; border-width: 2px;
} }
@ -3845,7 +3845,7 @@ html.cz #wrap.thin .ghead{
top: 7.4em; top: 7.4em;
} }
html.dy #wrap.thin .ghead, html.dy #wrap.thin .ghead,
html.b #wrap.thin .ghead { html.a #wrap.thin .ghead {
top: 6.9em; top: 6.9em;
margin-left: -.5em; margin-left: -.5em;
margin-right: -.5em; margin-right: -.5em;
@ -3883,9 +3883,9 @@ html.e #wrap.thin {
z-index: -1; z-index: -1;
} }
html.dy .ghead, html.dy .ghead,
html.b .ghead, html.a .ghead,
html.dy #wrap.thin .ghead, html.dy #wrap.thin .ghead,
html.b #wrap.thin .ghead { html.a #wrap.thin .ghead {
top: 7.2em; top: 7.2em;
padding-left: 1em; padding-left: 1em;
} }
@ -3994,9 +3994,9 @@ html.e #wrap.thin {
top: 7em; top: 7em;
} }
html.cy .ghead, html.cy .ghead,
html.a .ghead, html.b .ghead,
html.cy #wrap.thin .ghead, html.cy #wrap.thin .ghead,
html.a #wrap.thin .ghead { html.b #wrap.thin .ghead {
top: 7.3em; top: 7.3em;
} }
html.cz .ghead, html.cz .ghead,

5
copyparty/web/browser.js
View file

@ -9375,9 +9375,6 @@ var settheme = (function () {
theme = sread('cpp_thm') || 'a'; theme = sread('cpp_thm') || 'a';
if (!/^[a-x][yz]/.exec(theme)){ if (!/^[a-x][yz]/.exec(theme)){
theme = dtheme; theme = dtheme;
// set default theme to flat on firefox mobile to avoid glitchy gradients (2026-04-26)
if(FIREFOX && MOBILE)
theme = 'b';
} }
themen = theme.split(/ /)[0]; themen = theme.split(/ /)[0];
@ -9397,7 +9394,7 @@ var settheme = (function () {
var html = [], var html = [],
cb = ebi('themes'), cb = ebi('themes'),
itheme = ax.indexOf(theme[0]) * 2 + (light ? 1 : 0), itheme = ax.indexOf(theme[0]) * 2 + (light ? 1 : 0),
names = ['classic dark', 'classic light', 'flat dark', 'flat light', 'vice', 'hotdog stand', 'hacker', 'hi-con', 'phi95 dark', 'phi95']; names = ['flat dark', 'flat light', 'gradient dark', 'gradient light', 'vice', 'hotdog stand', 'hacker', 'hi-con', 'phi95 dark', 'phi95'];
for (var a = 0; a < themes; a++) for (var a = 0; a < themes; a++)
html.push('<option value="{0}">{0} ┃ {1}</option>'.format(a, names[a] || 'custom')); html.push('<option value="{0}">{0} ┃ {1}</option>'.format(a, names[a] || 'custom'));

8
copyparty/web/ui.css
View file

@ -311,7 +311,7 @@ html {
html.y #tt { html.y #tt {
border-color: #888 #000 #777 #000; border-color: #888 #000 #777 #000;
} }
html.bz #tt { html.az #tt {
border-color: #3b3f58; border-color: #3b3f58;
} }
html.y #tt, html.y #tt,
@ -685,7 +685,7 @@ hr {
border-top: .4em solid rgba(203, 203, 203, 0.634); border-top: .4em solid rgba(203, 203, 203, 0.634);
border-bottom: .4em solid #4c4c4c; border-bottom: .4em solid #4c4c4c;
} }
html.bz .mdo h1 { html.az .mdo h1 {
background: #202231; background: #202231;
border: 1px solid #2d2f45; border: 1px solid #2d2f45;
border-width: 0 0 .4em 0; border-width: 0 0 .4em 0;
@ -694,8 +694,8 @@ hr {
background: #444; background: #444;
border-bottom: .22em solid #555; border-bottom: .22em solid #555;
} }
html.bz .mdo h2, html.az .mdo h2,
html.bz .mdo h3 { html.az .mdo h3 {
background: transparent; background: transparent;
border-color: #3b3f58; border-color: #3b3f58;
} }