more theme porting

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-sbtn-b1: #999;
-	--u2-tab-sh: #280;
+	--u2-txt-bg: var(--bg-u5);
-	--u2-tab-b1: #7c5;
+	--u2-tab-bg: linear-gradient(to bottom, var(--bg), var(--bg-u1));
-	--u2-tab-b2: #583;
+	--u2-tab-1-fg: #fd7;
-	--u2-tab-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;
@@ -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-txt-bg: var(--bg-max);
-	--u2-tab-b1: #09c;
+	--u2-tab-1-sh: #0ad;
-	--u2-tab-b2: #05a;
+	--u2-tab-1-b1: #09c;
-	--u2-tab-fg: var(--fg-max);
+	--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,
+.opview input.err {
-html.y .opview input[type="text"].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%);
+	background: var(--u2-tab-1-bg);
-	box-shadow: 0 -.17em .67em var(--u2-tab-sh);
+	box-shadow: 0 -.17em .67em var(--u2-tab-1-sh);
-	border-color: var(--u2-tab-b1) var(--u2-tab-b2) var(--bg) var(--u2-tab-b2);
+	border-color: var(--u2-tab-1-b1) var(--u2-tab-1-b2) var(--bg) var(--u2-tab-1-b2);
-	color: var(--u2-tab-fg);
+	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 {

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;
 	}