ux tweaks

README.md

@@ -814,8 +814,8 @@ also, `--force-js` disables the plain HTML folder listing, making things harder
 you can change the default theme with `--theme 2`, and add your own themes by modifying `browser.css` or providing your own css to `--css-browser`, then telling copyparty they exist by increasing `--themes`
 
 <table><tr><td width="33%" align="center"><a href="https://user-images.githubusercontent.com/241032/165864907-17e2ac7d-319d-4f25-8718-2f376f614b51.png"><img src="https://user-images.githubusercontent.com/241032/165867551-fceb35dd-38f0-42bb-bef3-25ba651ca69b.png"></a>
-0. classic dark</td><td width="33%" align="center"><a href="https://user-images.githubusercontent.com/241032/165864904-c5b67ddd-f383-4b9e-9f5a-a3bde183d256.png"><img src="https://user-images.githubusercontent.com/241032/165867556-077b6068-2488-4fae-bf88-1fce40e719bc.png"></a>
+0. classic dark</td><td width="33%" align="center"><a href="https://user-images.githubusercontent.com/241032/168644399-68938de5-da9b-445f-8d92-b51c74b5f345.png"><img src="https://user-images.githubusercontent.com/241032/168644404-8e1a2fdc-6e59-4c41-905e-ba5399ed686f.png"></a>
-2. flat dark</td><td width="33%" align="center"><a href="https://user-images.githubusercontent.com/241032/165864901-db13a429-a5da-496d-8bc6-ce838547f69d.png"><img src="https://user-images.githubusercontent.com/241032/165867560-aa834aef-58dc-4abe-baef-7e562b647945.png"></a>
+2. flat pm-monokai</td><td width="33%" align="center"><a href="https://user-images.githubusercontent.com/241032/165864901-db13a429-a5da-496d-8bc6-ce838547f69d.png"><img src="https://user-images.githubusercontent.com/241032/165867560-aa834aef-58dc-4abe-baef-7e562b647945.png"></a>
 4. vice</td></tr><tr><td align="center"><a href="https://user-images.githubusercontent.com/241032/165864905-692682eb-6fb4-4d40-b6fe-27d2c7d3e2a7.png"><img src="https://user-images.githubusercontent.com/241032/165867555-080b73b6-6d85-41bb-a7c6-ad277c608365.png"></a>
 1. classic light</td><td align="center"><a href="https://user-images.githubusercontent.com/241032/165864903-7fba1cb9-036b-4f11-90d5-28b7c0724353.png"><img src="https://user-images.githubusercontent.com/241032/165867557-b5cc0010-d880-48b1-8156-9c84f7bbc521.png"></a>
 3. flat light

copyparty/web/browser.css

@@ -8,7 +8,7 @@
 	--fg: #ccc;
 	--fg-max: #fff;
 	--fg2-max: #fff;
-	--fg-weak: #aaa;
+	--fg-weak: #bbb;
 
 	--bg-u7: #555;
 	--bg-u6: #4c4c4c;
@@ -18,7 +18,7 @@
 	--bg-u2: #2b2b2b;
 	--bg-u1: #282828;
 	--bg: #222;
-	--bgg: #222;
+	--bgg: var(--bg);
 	--bg-d1: #1c1c1c;
 	--bg-d2: #181818;
 	--bg-d3: #111;
@@ -45,9 +45,11 @@
 	--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;
@@ -124,7 +126,7 @@
 html.y {
 	color-scheme: light;
 
-	--fg: #333;
+	--fg: #222;
 	--fg-max: #000;
 	--fg-weak: #555;
 
@@ -132,7 +134,6 @@ html.y {
 	--bg-d2: #fff;
 	--bg-d1: #fff;
 	--bg: #eaeaea;
-	--bgg: #eaeaea;
 	--bg-u1: #fff;
 	--bg-u2: #f7f7f7;
 	--bg-u3: #eaeaea;
@@ -141,12 +142,12 @@ html.y {
 	--bg-u6: #ddd;
 	--bg-max: #fff;
 
-	--tab-alt: #d38;
+	--tab-alt: #d08;
 	--row-alt: #f2f2f2;
 
 	--scroll: #490;
 
-	--a: #07a;
+	--a: #06a;
 	--a-b: #08b;
 	--a-hil: #058;
 	--a-gray: #bbb;
@@ -158,7 +159,10 @@ html.y {
 	--btn-1-bg: #4a0;
 	--btn-1h-bg: #5c0;
 	--chk-fg: var(--fg);
-	--txt-sh: #888;
+	--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;
@@ -171,7 +175,7 @@ html.y {
 	--sort-1: #059;
 	--sort-2: #f5d;
 
-	--srv-1: #666;
+	--srv-1: #555;
 	--srv-2: #c83;
 	--srv-3: #c0a;
 	--srv-3b: rgba(255,68,204,0.6);
@@ -197,6 +201,8 @@ html.y {
 	--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;
@@ -242,13 +248,13 @@ html.b {
 	--f-sh1: 0.1;
 }
 html.bz {
-	--fg: #bbd;
+	--fg: #cce;
+	--fg-weak: #bbd;
 	--bg-u5: #3b3f58;
 	--bg-u4: #1e2130;
 	--bg-u3: #1e2130;
 	--bg-u1: #1e2130;
 	--bg: #11121d;
-	--bgg: #11121d;
 	--bg-d1: #232536;
 	--bg-d2: #34384e;
 	--bg-d3: #34384e;
@@ -274,9 +280,13 @@ html.bz {
 	--mp-sh: #11121d;
 }
 html.by {
+	--bg: #f2f2f2;
+
+	--row-alt: #f9f9f9;
+
 	--scroll: var(--a);
 
-	--btn-1-bg: var(--a);
+	--btn-1-bg: #07a;
 	--btn-1h-bg: var(--a-hil);
 
 	--op-aa-bg: #fff;
@@ -289,11 +299,10 @@ html.by {
 html.c {
 	font-weight: bold;
 	--fg: #fff;
-	--fg-weak: #5df;
+	--fg-weak: #cef;
 	--bg-u5: #409;
 	--bg-u2: linear-gradient(-35deg, #fd7233, #cd27a0, #5d47a5 49.5%, #16e9fb 50%, #3b6cc8 50.4%, #0e51ac);
 	--bg: #37235d;
-	--bgg: var(--bg-u2);
 	--bg-u3: #407;
 
 	--a: #f9dc22;
@@ -313,11 +322,13 @@ html.c {
 
 	--srv-1: #ea0;
 }
+html.cz {
+	--bgg: var(--bg-u2);
+}
 html.cy {
 	--fg: #fff;
 	--fg-weak: #fff;
 	--bg: #ff0;
-	--bgg: #ff0;
 	--bg-u2: #f00;
 	--bg-u3: #f00;
 	--bg-u5: #999;
@@ -361,9 +372,6 @@ html {
 	font-family: sans-serif;
 	text-shadow: 1px 1px 0px var(--bg-max);
 }
-html.y {
-	text-shadow: none;
-}
 html, body {
 	margin: 0;
 	padding: 0;
@@ -581,11 +589,15 @@ html.y #path a:hover {
 #acc_info {
 	color: var(--srv-2);
 	background: var(--bg);
+	white-space: nowrap;
 }
-#srv_info {
+#srv_info,
+#acc_info {
 	position: absolute;
 	font-size: .8em;
 	top: .5em;
+}
+#srv_info {
 	left: 2em;
 	padding-right: .5em;
 }
@@ -598,10 +610,6 @@ html.y #path a:hover {
 	display: none;
 }
 #acc_info {
-	position: absolute;
-	white-space: nowrap;
-	font-size: .81em;
-	top: .5em;
 	right: 2em;
 }
 #acc_info > span:not([id]) {
@@ -977,7 +985,7 @@ html.y #widget.open {
 }
 #ops a {
 	color: var(--a);
-	text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
+	text-shadow: 1px 1px 1px var(--op-a-sh);
 	font-size: 1.5em;
 	padding: .25em .4em;
 	margin: 0;
@@ -1016,7 +1024,7 @@ html.y #ops svg circle {
 }
 .opview input[type=text] {
 	color: var(--fg);
-	background: var(--btn-bg);
+	background: var(--txt-bg);
 	border: none;
 	box-shadow: 0 0 2px var(--txt-sh);
 	border-bottom: 1px solid #999;
@@ -1076,7 +1084,6 @@ input.eq_gain {
 
 
 #srch_form {
-	margin-bottom: 0;
 	padding: 0 .5em .5em 0;
 }
 #srch_form table {
@@ -1349,6 +1356,7 @@ html.y #tree.nowrap .ntree a+a:hover {
 	line-height: 2em;
 }
 .opwide>div>h3 {
+	color: var(--fg-weak);
 	margin: 0 .4em;
 	padding: 0;
 }
@@ -2280,6 +2288,11 @@ 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 {
@@ -2309,15 +2322,6 @@ html.a .ghead {
 	border: 1px solid var(--bg-u3);
 	box-shadow: 0 0 .3em var(--bg-d3);
 }
-html.c #tree,
-html.c #treeh,
-html.c #treepar,
-
-html.a #tree,
-html.a #treeh,
-html.a #treepar {
-	background: var(--bg-u2);
-}
 html.c #u2btn,
 html.a #u2btn {
 	color: #eee;

copyparty/web/browser.js

@@ -298,7 +298,7 @@ var Ls = {
 		"u_ehssrch": "server rejected the request to perform search",
 		"u_ehsinit": "server rejected the request to initiate upload",
 
-		"lang_set": "refresh now to make the change take effect?",
+		"lang_set": "refresh to make the change take effect?",
 	},
 	"nor": {
 		"tt": "Norsk",
@@ -596,7 +596,7 @@ var Ls = {
 		"u_ehssrch": "server nektet forespørselen om å utføre søk",
 		"u_ehsinit": "server nektet forespørselen om å begynne en ny opplastning",
 
-		"lang_set": "siden må lastes på nytt for at endringen skal tre i kraft -- passer det nå?",
+		"lang_set": "passer det å laste siden på nytt?",
 	},
 };
 var L = Ls[sread("lang") || lang];

copyparty/web/splash.css

@@ -2,8 +2,6 @@ html {
 	color: #333;
 	background: #f7f7f7;
 	font-family: sans-serif;
-}
-html {
 	touch-action: manipulation;
 }
 #wrap {

copyparty/web/splash.html

@@ -39,7 +39,7 @@
 			</table>
 		</td><td>
 			<table class="vols">
-				<thead><tr><th>vol</th><th>action</th><th>status</th></tr></thead>
+				<thead><tr><th>vol</th><th id="t">action</th><th>status</th></tr></thead>
 				<tbody>
 					{% for mp in avol %}
 					{%- if mp in vstate and vstate[mp] %}

copyparty/web/splash.js

@@ -5,7 +5,7 @@ var Ls = {
 		"c1": "logg ut",
 		"d1": "tilstand",
 		"d2": "vis tilstanden til alle tråder",
-		"e1": "les cfg",
+		"e1": "last innst.",
 		"e2": "leser inn konfigurasjonsfiler på nytt$N(kontoer, volumer, volumbrytere)$Nog kartlegger alle e2ds-volumer",
 		"f1": "du kan betrakte:",
 		"g1": "du kan laste opp til:",
@@ -22,6 +22,7 @@ var Ls = {
 		"q1": 'du må logge inn eller <a href="/?h">gå hjem</a>',
 		"r1": "gå hjem",
 		".s1": "kartlegg",
+		"t1": "handling",
 	}
 },
 	d = Ls[sread("lang") || "{{ this.args.lang }}"];