From cb45dbc9ad1fb8ac0c6845fbebcc32be4e251bd9 Mon Sep 17 00:00:00 2001 From: zzz Date: Thu, 20 Jan 2022 09:07:00 -0500 Subject: [PATCH] CSS, form, icon updates patch by drzed 0.0.2-beta3 --- resources/images/socks.svg | 2 +- resources/images/socksproxy-32.png | Bin 1433 -> 1658 bytes resources/socksoutproxy.css | 81 ++++++++++++------ .../i2p/socksoutproxy/web/ProxyServlet.java | 24 +++--- 4 files changed, 70 insertions(+), 37 deletions(-) diff --git a/resources/images/socks.svg b/resources/images/socks.svg index f587aa0..c6cf673 100644 --- a/resources/images/socks.svg +++ b/resources/images/socks.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/resources/images/socksproxy-32.png b/resources/images/socksproxy-32.png index 2917265be50de49c55c153a06a64666e8e19b5a5..fac4cb1e4918ccfa7cab96dab22e76064d7aa446 100644 GIT binary patch delta 1642 zcmV-w29^1l3;GO@BYy@#NklNx=}}M6DpUj&5e00Of+G%xM=f|D11eS=>QOla5{|t7yCiE8c9Zn@ zXWk_9_TTru{~h1|7Q?h%V?&2vEP*Y?5=LMwej>&eq+@LSLVvHI|D+BN$5?PhA;yU)N0L(QiH(9Tq>3wDpe`ft<}hpn5V7Gus{r#ekHZ zrU1LmLA-M|)PHZXlwJ+9k{tH3Z{N7Uxz(Guu=x|CuUgPMH+v((kH>UzeeImzt7M zWi|+api;>O0YcA*&75;Kf8XfQE~O@h^BSj)UsykUqj<^Z5ML-d!K{o3zFz-qPO5KIh#0% z8~g@Cl~50|yv-%iuFkE?9OgGK{K8#qZxsj*b0WaTDGD4GZv!VmA|&TDK-O)bB)hB) z@@~9<&41BpVg&vkeKh$?`nH;^+Fi`-yQxBpHdY(v`prCW3puU?KrS18xJ%SPC4HOX zXO&Yy^sMZm=S-UqmA=bNEr7itexYclagm?Fc;NJenQk2kMJyow|3 z2_FjGu{^Z^UTm=h_mEUt0Ns zYTSpS)Pz9P^d%)cTL}P< z7bN1Jrm_q2o!n~Ur z4F_z=gV60)wE{cg^KafEr`MEIpiqQX=00MIgpf!g*l@X6eK!!Nw-X+KsJ-PH0c=Zo zAlA_rJXS5jaH8J0FGUIryYpWZZLJ+4lx6 z=fADBhry$Sbrcm7zEv-y{svwpJb!L*=c}M$B!Ks;Cy;G3RjtgKD1+hj#tsgW}?WEcs6kffX!aJsCE*7489 zwNQEPIMk)@0&B-8r8L5dL6GRe1CHSmITu{OhT@}D1`;&Asu0Bhj`y!-PJcUE`Cn&J zAmYwHgHt6Pl;aC!@1g$3P3VNPsgv4Ti=ft*1<(C;A;-fATrFIC3_ds~#&&;(F&wo8 z4Q0-lv!lg(Z8ilWHtPwb6gI*63JJVE9ITXQqSB|C_;-BC^?%Fb`oEcEfBnRip#3N*7@LSZG-{8D^OIb)dZkG`z3HST0{|Tn|YM z9f&F1_067Px# delta 1416 zcmV;31$X-T44Dg%BYyx1a7bBm000MJ000MJ0hPnJwg3PC8FWQhbW?9;ba!ELWdL_~ zcP?peYja~^aAhuUa%Y?FJQ@H11tv*EK~z}7tygPI6jv0UkS0L2`m52tY^AWUD3B^h zkywG9eekfbt{_!ttEd%YLbYjype9s-wpc)rH!JdHhgV1wtAD12+KM$uELJP1ZEDcg z0I97OMC^~RcV?H_xy!x~Z*n%9dy{j%bM86c{f1$jU6Bn77^UGIMq#L8Sgw!QD6z*T z8#V5=Rx*m#L?*QBIp(P?MT?9$){_7e#Neb&FiNhPQMP$KdEgMvon(82IQwrFfh~=% z&KFErjoa*k^MA-$?#dhjTiTC|y8Q*`g0pRJnC^6jqh)Ln&V+}eGa?*^)myMBG83#O z2Y%`zELQ6A4BKKGgp#|>DBAp;$$Zq7lT3Ciu7r3BHX13z)CQj!c1O1o1KKrci`Bw~ zHOvGN#x1rUoWCapH?UAyho%S(DiyKVtKNwS&1YDyE`P=%)p3+5v?73eG2T`INX=c@ zXf2U`p}%H!yU=jh#C{?M`BOz_Ijr^-&;E&hVgMkCW?30EW4C9pDPoY3NID2x*ozf~ zeb656L{hd-me&2T2&%tj2KsD!8edZ1u#y^i>$=TsSOY zbs~VjqJQZM1eFY6Y1xoq^126D);MX`T-5FMCZp8Ma1xU7$-01qECcqW7vsZh1NLV( zq2OQ+|)AAdzsx*oxK-wS8Hb@v?ta8Eqrm?6o} z7zLp0hE)JjM=y!ZS)KSk-mDsS2;jv7LyiE9@BpT!H(V60h|cPO-_d?kqnQD$E9e&i z@OC;%i9k{nyC51Sv2go2djK9$02akG3eGRD_C|4XDuN_ghE(6h&#S#C5V@&`99F@% z{(m7BZ2Q430PzZ5Syx8|I2ElzP|b+wjMHtT&d(`=9RhFwVuWf!S9J?6h5AxK@^@s4 zj&ymwq&hO{JWxO46bO0kINTCWS!+Tfqa>SpZ4wor@2vm?NJu9wqn2ESw|G@vq-o_& zOayPQetyg1bu^SSf`*f92ClCX97{p4$A1PXN4g`uXkDLxW?iCbVy;70W4#i~8y+I1 zpc|DLx#&tu!#s^dGbmf*$urE&7idueA|)}KD)p+ui`KI|aStBl=CSo8P3zk*A)bfn zhjDR70`;COiLEzNF(2C~M2LX2Xb{DQ5_}beU8e%ung2O6^hcn~lt83+mkISC+b)Jbl>1sn45|zSo!?r6ygZL@jAJ;-XG0e&^7VV9(7&$bXOW~i= zj^?;{L71lNKEktVvGf06BDj|vdq$#KIK!U|75SVjA0E4W`=XT{s*Wg WOWLYMQ^x=R002ovPDHLkU;%>Vh?-~s diff --git a/resources/socksoutproxy.css b/resources/socksoutproxy.css index 8c3f7eb..835b340 100644 --- a/resources/socksoutproxy.css +++ b/resources/socksoutproxy.css @@ -13,11 +13,13 @@ --border_inner: 1px solid #9898b3; --btn_border: 1px solid #97a2ce; --btn_hover: linear-gradient(180deg, #ddd, #fff); + --btn_active: var(--btn_hover); --btn: linear-gradient(180deg, #fff, #e8e8ff); --btn_shadow_active: var(--highlight), inset 4px 4px 4px rgba(0,0,0,.5); --container: linear-gradient(90deg, #fff, #efefff, #fff); + --filter_shadow: drop-shadow(0 0 1px var(--hover)) drop-shadow(0 0 2px var(--hover)); --highlight: inset 0 0 0 1px #fff; - --highlight_notice: var(--highlight), inset 0 0 1px 1px #bbf, 0 0 2px 2px rgba(0,0,0,.5); + --highlight_notice: var(--highlight), inset 0 0 1px 1px #900, 0 0 2px 2px rgba(0,0,0,.2); --hover: #f60; --ink: #4f4f63; --ink_light: #5b5b71; @@ -25,6 +27,7 @@ --input_text: var(--bg_table); --input_text_focus: #fff; --monospaced: Droid Sans Mono, Noto Mono, DejaVu Sans Mono, Lucida Console, monospace; + --outline: 0 0 0 1px rgba(255,96,0,.5); --rowEven: repeating-linear-gradient(135deg, rgba(252,252,255,.5) 2px, rgba(240, 240, 255, .3) 3px, #fafaff 5px) #f0f0ff; --rowOdd: repeating-linear-gradient(45deg, rgba(255,255,255,.5) 2px, rgba(220, 220, 255, .3) 3px, #fafaff 5px), #fafaff; --scrollbar_hover: rgba(16,16,48,.4) var(--bg); @@ -36,12 +39,18 @@ --th_sub: linear-gradient(180deg, #fdfdff, #f0f0ff); --txtshadow_title: 0 1px 1px #fff, 0 -1px 1px #e2e2ff, 0 2px 1px #ddf; --visited: #2c4e8f; - --configure: url("images/configure.svg"); - --cross: url("images/cross.svg"); - --infohelp: url("images/infohelp.svg"); - --socks: url("images/socks.svg"); - --starting: url("images/starting.svg"); - --tick: url("images/tick.svg"); + --configure: url(images/configure.svg); + --cross: url(images/cross.svg); + --infohelp: url(images/infohelp.svg); + --socks: url(images/socks.svg); + --starting: url(images/starting.svg); + --tick: url(images/tick.svg); +} + +@media (prefers-color-scheme: light) { + #status .subtitle + tr, #status .subtitle + tr td { + border-bottom: none !important; + } } @media (prefers-color-scheme: dark) { @@ -55,11 +64,11 @@ --bg_table: #222; --bodybg: var(--bg); --border: 1px solid #444; - --border_inner: 1px solid #222; + --border_inner: 1px solid #181818; --btn_border: 1px solid #97a2ce; --btn_active: linear-gradient(180deg, #333, #444); - --btn_hover: linear-gradient(180deg, #444 50%, #333 50%, #111); - --btn: linear-gradient(180deg, #444, #333); + --btn_hover: linear-gradient(180deg, #444, #333 50%, #111); + --btn: linear-gradient(180deg, #333, #181818); --container: #222; --highlight: inset 0 0 0 1px rgba(255,255,255,.1); --highlight_notice: var(--highlight), inset 0 0 1px 1px #300, 0 0 2px 2px rgba(0,0,0,.5); @@ -83,7 +92,7 @@ filter: invert(1) opacity(.7); } #expand:hover img, #collapse:hover img { - filter: invert(1) opacity(.8) drop-shadow(0 0 1px var(--hover)) !important; + filter: invert(1) opacity(.95) var(--filter_shadow) !important; } #status { border-collapse: separate; @@ -99,9 +108,6 @@ #container { padding: 0 !important; } - input[type=submit]:active { - background: var(--btn_active) !important; - } } html, body { @@ -249,6 +255,11 @@ tr { animation: none; } +input.accept { + padding: 5px 9px 2px 26px; + background: var(--tick) no-repeat 9px center / 16px; +} + @keyframes spin { from {transform: rotate(0)} to {transform: rotate(360deg)} @@ -388,10 +399,28 @@ th, #configtitle { height: 8px; display: inline-block; vertical-align: middle; + transform: scaleX(.6); +} + +#collapse img { + transform: scaleY(.6); } #expand:hover img, #collapse:hover img { - filter: drop-shadow(0 0 1px var(--hover)); + filter: var(--filter_shadow); + transform: scaleY(1.2) scaleX(.8); +} + +#collapse:hover img { + transform: scaleX(1.2) scaleY(.8); +} + +#expand::before, #collapse::before { + content: ""; + display: inline-block; + height: 100%; + width: 100%; + background: #f00; } #configuration td:nth-child(2) code { @@ -467,24 +496,27 @@ input[type=text]:focus, input[type=password]:focus { } input[type=submit] { - padding: 5px 9px 2px 29px; + padding: 7px 14px 7px 30px; color: var(--ink); border-radius: 4px; box-shadow: var(--highlight); - background: var(--tick) no-repeat 9px center / 16px; + background: var(--tick) no-repeat 12px center / 12px, var(--btn); cursor: pointer; } input[type=submit]:hover { color: var(--ink_lighter); + background: var(--tick) no-repeat 12px center / 12px, var(--btn_hover); + box-shadow: var(--highlight), var(--outline); } input[type=submit]:active { - box-shadow: var(--btn_shadow_active); + box-shadow: var(--btn_shadow_active), var(--outline); + background: var(--tick) no-repeat 12px center / 12px, var(--btn_active); } #message { - padding: 15px; + padding: 45px 15px 20px; width: 400px; display: inline-block; position: absolute; @@ -493,8 +525,9 @@ input[type=submit]:active { text-align: center; border: var(--border); box-shadow: var(--highlight_notice); - background: var(--th_sub); - animation: slideLeft .5s linear .1s both, toast 2s ease 4s both; + background: var(--infohelp) no-repeat center 22px / 24px, var(--th_sub); + animation: slideLeft .75s ease-in .1s both, toast 2s ease 4s both; + filter: opacity(0); } #message td { @@ -509,14 +542,14 @@ input[type=submit]:active { } @keyframes slideLeft { - from {top: 0; right: -1000px} - to {top: 0; right: 0} + from {top: 0; right: -800px; filter: opacity(0)} + to {top: 0; right: 0; filter: opacity(1)} } @media screen and (max-width: 1000px) { body {margin: 3px} - #container {margin: 0} body, table {font-size: 9.5pt} + #container {margin: 0} #title {font-size: 14pt} #configtitle {font-size: 12pt} .subtitle th {font-size: 10pt} diff --git a/src/java/net/i2p/socksoutproxy/web/ProxyServlet.java b/src/java/net/i2p/socksoutproxy/web/ProxyServlet.java index 32b30f4..24e9f50 100644 --- a/src/java/net/i2p/socksoutproxy/web/ProxyServlet.java +++ b/src/java/net/i2p/socksoutproxy/web/ProxyServlet.java @@ -31,11 +31,11 @@ public class ProxyServlet extends BasicServlet { private static final String DEFAULT_NAME = "outproxy"; private static final String DOCTYPE = "\n"; - private static final String FOOTER = "\n\n\n"; + private static final String FOOTER = "\n\n\n\n"; // for now, use console bundle, hope to pick up a few translations for free private static final String BUNDLE = "net.i2p.router.web.messages"; private static final String RESOURCES = "/outproxy/resources/"; - private static final String VERSION = "0.2-beta2"; + private static final String VERSION = "0.2-beta3"; public ProxyServlet() { super(); @@ -194,12 +194,12 @@ public class ProxyServlet extends BasicServlet { out.write("\n"); out.write("\n"); out.write("\n"); - out.write("\n"); + out.write("\n"); out.write("\n"); out.write("\n\n"); - out.write("\n
\n\n" + + out.write("\n
\n
\n" + "\n"); out.write("\n
" + _t("Socks Outproxy") + "
\n
\n\n" + "" + @@ -243,13 +243,13 @@ public class ProxyServlet extends BasicServlet { private static String getHTMLConfig(SocksOutproxy tc) { StringBuilder buf = new StringBuilder(1024); - buf.append(""); + buf.append("\n"); buf.append("\n"); buf.append("
\n
" + _t("Status") + "
\n"); - buf.append("\n"); - buf.append("\n"); + buf.append("\n"); + buf.append("\n"); String user = tc.getUser(); if (user == null) user = ""; @@ -261,14 +261,14 @@ public class ProxyServlet extends BasicServlet { else pw = DataHelper.escapeHTML(pw); buf.append(""); - buf.append(""); + buf.append(""); buf.append(""); buf.append("\n"); - buf.append(""); + buf.append(""); buf.append(""); buf.append("\n"); buf.append("\n"); - buf.append("
"); - buf.append("SOCKS host
"); - buf.append("SOCKS port
"); + buf.append("Host
"); + buf.append("Port
SOCKS UsernameUsername
SOCKS PasswordPassword
"); + buf.append("
\n\n"); return buf.toString(); }