fix no-js account popup

copyparty/web/browser.css

@@ -18,7 +18,7 @@
 	--btn-bg-a: rgba(128,128,128,0.15);
 	--btn-bg-a: color-mix(in oklab, var(--bg-max) 85%, var(--fg-max) 20%);
 	--btn-bg: rgba(128,128,128,0.15);
-	--btn-bg: linear-gradient(-5deg, color-mix(in oklab, var(--btn-bg-a) 40%, transparent), color-mix(in oklab, var(--btn-bg-a)70%, var(--a-gray)));
+	--btn-bg: color-mix(in oklab, var(--bg-u5), transparent);
 	--btn-h-fg: var(--a-hil);
 	--btn-h-bg: color-mix(in oklab, var(--a-gray) 45%, var(--bg-max));
 	--btn-1-fg: var(--bg);
@@ -129,6 +129,7 @@ html.y {
 html.b {
 	--op-aa-sh: 0 0 .2em var(--bg-d3) inset;
 
+	--btn-bg: linear-gradient(-5deg, color-mix(in oklab, var(--btn-bg-a) 40%, transparent), color-mix(in oklab, var(--btn-bg-a)70%, var(--a-gray)));
 	--btn-bs: .1em .2em .1em var(--mp-sh);
 }
 html.bz {
@@ -141,7 +142,6 @@ html.by {
 html.a {
 	--btn-bs: 0 .05em 0 var(--bg-d3) inset;
 	--btn-1-bs: 0 .05em 0 var(--btn-1h-bg) inset;
-	--btn-bg: color-mix(in oklab, var(--bg-u5), transparent);
 
 	--tree-bg: var(--bg);
 
@@ -1705,6 +1705,7 @@ html.b #mu_outer {
 .opview.splitsub {
 	margin-bottom: 0;
 }
+#acc_cbopen:checked+span,
 .opview.act {
 	display: block;
 }
@@ -1812,6 +1813,9 @@ html.y #ops svg circle {
 .pfp.placeholder {
 	text-shadow: 1px 1px 0 var(--bg-half), 1px -1px 0 var(--bg-half), -1px -1px 0 var(--bg-half), -1px 1px 0 var(--bg-half);
 }
+#op_acc:not(.act) {
+	display: none;
+}
 .opbox {
 	padding: .5em;
 	border-radius: 5px;
@@ -2308,6 +2312,9 @@ html.b .btn {
 #u2tdate {
 	opacity: .3;
 }
+.disabled {
+	cursor: default;
+}
 #up_quick.disabled {
 	display: none;
 }
@@ -5078,6 +5085,9 @@ html.e #wtc {
 	margin-top: .3em;
 	text-align: right;
 }
+#opa_acc label {
+	cursor: pointer !important;
+}
 #ops input[type=submit],
 #ops #goh {
 	font-size: medium;

copyparty/web/browser.html

@@ -37,18 +37,6 @@
 				<div id="spaceUsed_bar" style="width: {{ space_used_percent }}%;"></div>
 				<div id="spaceMax"></div>
 			</div>
-
-			<span id="op_acc" class="opview popup under">
-				<div id="acc_button" class="tgl btn on">
-					<p id="acc_name"></p>
-				</div>
-				<div id="accessType" style="display: block;"></div>
-				<a href="{{ r }}/?h" id="goh" style="display: block;">control-panel</a>
-				<form id="flogout" style="display: block;" method="post" enctype="multipart/form-data">
-					<input type="hidden" name="act" value="logout" />
-					<input id="blogout" type="submit" />
-				</form>
-			</span>
 		</div>
 	</div>
 
@@ -68,17 +56,32 @@
 
 			<div id="actionsArea">
 				<div id="ops">
-					<a href="#" id="opa_srch" data-perm="read" data-dep="idx" data-dest="search">🔎</a>
+					<a href="#" class="disabled" id="opa_srch" data-perm="read" data-dep="idx" data-dest="search">🔎</a>
-					<a href="#" id="opa_del" data-perm="write" data-dest="unpost">🧯</a>
+					<a href="#" class="disabled" id="opa_del" data-perm="write" data-dest="unpost">🧯</a>
-					<a href="#" id="opa_up" data-dest="up2k">🚀</a>
+					<a href="#" class="disabled" id="opa_up" data-dest="up2k">🚀</a>
-					<a href="#" id="opa_bup" data-perm="write" data-dest="bup">🎈</a>
+					<a href="#" class="disabled" id="opa_bup" data-perm="write" data-dest="bup">🎈</a>
-					<a href="#" id="opa_mkd" data-perm="write" data-dest="mkdir"><p class="overlay_plus">+</p>📂</a>
+					<a href="#" class="disabled" id="opa_mkd" data-perm="write" data-dest="mkdir"><p class="overlay_plus">+</p>📂</a>
-					<a href="#" id="opa_msg" data-dest="msg">📟</a>
+					<a href="#" class="disabled" id="opa_msg" data-dest="msg">📟</a>
-					<a href="#" id="opa_cfg" data-dest="cfg">⚙️</a>
+					<a href="#" class="disabled" id="opa_cfg" data-dest="cfg">⚙️</a>
-					<a href="#" id="opa_acc" data-dest="acc"><span id="acc_pfp" class="pfp">👤</span></a>
+					<a href="#" id="opa_acc" data-dest="acc">
-					<div id="opdesc"></div>
+						<label for="acc_cbopen" id="acc_pfp" class="pfp">👤</label>
+					</a>
 				</div>
 
+				<input type="checkbox" id="acc_cbopen" style="display: none;" />
+				<span id="op_acc" class="opview popup under">
+					<a id="acc_button" class="tgl btn on" href="{{ r }}/?h">
+						<p id="acc_name">Login</p>
+					</a>
+					<div id="accessType" style="display: block;">{{ srv_info }}</div>
+					<a href="{{ r }}/?h" id="goh" style="display: block;">control-panel</a>
+					<form id="flogout" style="display: block;" method="post" enctype="multipart/form-data">
+						<input type="hidden" name="act" value="logout" />
+						<input id="blogout" type="submit" />
+					</form>
+				</span>
+				<div id="opdesc"></div>
+
 				<div id="srchfolder_div">
 					<input id="folder_search" type="text" />
 					<span id="srch_quickopts" class="popup under">

copyparty/web/browser.js

@@ -1531,7 +1531,6 @@ ebi('rcm').innerHTML = (
 			ops[a].href = '#v=' + v;
 	}
 
-	ebi('opa_acc').appendChild(ebi('op_acc'));
 	ebi('op_acc').onclick = function (e){
 		e.stopPropagation();
 	};
@@ -8987,18 +8986,20 @@ function apply_perms(res) {
 		ebi('acc_pfp').innerHTML = acct.substring(0, 1);
 		ebi('accessType').innerHTML = '<span' + aclass + axs + L.access + '</span>';
 		ebi('blogout').value = L.logout;
-		ebi('acc_button').onclick = function(){};
 	}
 	else{
 		ebi('blogout').style.display = 'none';
 		ebi('acc_name').innerHTML = L.login;
 		ebi('acc_pfp').innerHTML = fun_tgl ? '👤' : 'acc';
-		ebi('acc_button').onclick = goHome;
 	}
 	clmod(ebi('acc_pfp'), 'placeholder', acct == '*');
 
-	var o = QSA('#ops>a[data-perm]');
+	var o = QSA('#ops>a');
 	for (var a = 0; a < o.length; a++) {
+		if(!o[a].hasAttribute('data-perm')){
+			clmod(o[a], 'disabled', false);
+			continue;
+		}
 		var display = '';
 		var enabled = true;
 		var needed = o[a].getAttribute('data-perm').split(' ');