Mirrors/i2pd
2
0
Fork 0
mirror of https://github.com/PurpleI2P/i2pd.git synced 2025-04-29 04:07:49 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

More webconsole UI refinements

Browse source
This commit is contained in:
dr|z3d 2021-08-11 19:41:54 +00:00
parent b6d478977b
commit 693a78fbe6
3 changed files with 178 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

94
daemon/HTTPServer.cpp
View file

@ -559,12 +559,12 @@ namespace http {
s << "</tr></td>";
}
/*
s << "<tr><td>" << "HTTP " << tr("Proxy") << "</td><td class='" << (httpproxy ? "enabled" : "disabled") << "'>" << (httpproxy ? tr("Enabled") : tr("Disabled")) << "</td></tr>\r\n";
s << "<tr><td>" << "SOCKS " << tr("Proxy") << "</td><td class='" << (socksproxy ? "enabled" : "disabled") << "'>" << (socksproxy ? tr("Enabled") : tr("Disabled")) << "</td></tr>\r\n";
s << "<tr><td>" << "BOB" << "</td><td class='" << (bob ? "enabled" : "disabled") << "'>" << (bob ? tr("Enabled") : tr("Disabled")) << "</td></tr>\r\n";
s << "<tr><td>" << "SAM" << "</td><td class='" << (sam ? "enabled" : "disabled") << "'>" << (sam ? tr("Enabled") : tr("Disabled")) << "</td></tr>\r\n";
s << "<tr><td>" << "I2CP" << "</td><td class='" << (i2cp ? "enabled" : "disabled") << "'>" << (i2cp ? tr("Enabled") : tr("Disabled")) << "</td></tr>\r\n";
s << "<tr><td>" << "I2PControl" << "</td><td class='" << (i2pcontrol ? "enabled" : "disabled") << "'>" << (i2pcontrol ? tr("Enabled") : tr("Disabled")) << "</td></tr>\r\n";
s << "<tr><td>" << "HTTP " << tr("Proxy") << "</td><td class='" << (httpproxy ? "enabled" : "disabled") << "\">" << (httpproxy ? tr("Enabled") : tr("Disabled")) << "</td></tr>\r\n";
s << "<tr><td>" << "SOCKS " << tr("Proxy") << "</td><td class='" << (socksproxy ? "enabled" : "disabled") << "\">" << (socksproxy ? tr("Enabled") : tr("Disabled")) << "</td></tr>\r\n";
s << "<tr><td>" << "BOB" << "</td><td class='" << (bob ? "enabled" : "disabled") << "\">" << (bob ? tr("Enabled") : tr("Disabled")) << "</td></tr>\r\n";
s << "<tr><td>" << "SAM" << "</td><td class='" << (sam ? "enabled" : "disabled") << "\">" << (sam ? tr("Enabled") : tr("Disabled")) << "</td></tr>\r\n";
s << "<tr><td>" << "I2CP" << "</td><td class='" << (i2cp ? "enabled" : "disabled") << "\">" << (i2cp ? tr("Enabled") : tr("Disabled")) << "</td></tr>\r\n";
s << "<tr><td>" << "I2PControl" << "</td><td class='" << (i2pcontrol ? "enabled" : "disabled") << "\">" << (i2pcontrol ? tr("Enabled") : tr("Disabled")) << "</td></tr>\r\n";
*/
}
@ -606,7 +606,7 @@ namespace http {
{
s << "<tr><td class=\"center nopadding\" colspan=\"2\">\r\n";
s << "<div class=\"slide\"><input hidden type=\"checkbox\" class=\"toggle\" id=\"slide_b64\" />\r\n"
<< "<label for='slide_b64'>" << tr("Base64 Address") << "</label>\r\n";
<< "<label for=\"slide_b64\">" << tr("Base64 Address") << "</label>\r\n";
s << "<div class=\"slidecontent\">\r\n<div id=\"b64\">";
s << dest->GetIdentity ()->ToBase64 () << "</div>\r\n</div>\r\n</div>\r\n</td></tr>\r\n";
if (dest->IsEncryptedLeaseSet ())
@ -637,7 +637,9 @@ namespace http {
{
s << "<tr><td class=\"center nopadding\" colspan=\"2\">\r\n";
s << "<div class=\"slide\">\r\n<input hidden type=\"checkbox\" class=\"toggle\" id=\"slide_leasesets\" />\r\n"
<< "<label for='slide_leasesets'>" << tr("LeaseSets") << " [" << dest->GetNumRemoteLeaseSets () << "]</label>\r\n";
<< "<label for=\"slide_leasesets\">" << tr("LeaseSets")
<< " <span class=\"hide\">[</span><span class=\"count\">" << dest->GetNumRemoteLeaseSets ()
<< "</span><span class=\"hide\">]</span></label>\r\n";
s << "<div class=\"slidecontent\">\r\n<table>\r\n<thead>\r\n<tr>"
<< "<th class=\"left\">" << tr("Address") << "</th>"
<< "<th class=\"thin\">" << tr("Type") << "</th>"
@ -657,18 +659,24 @@ namespace http {
{
s << "<tr><td class=\"center nopadding\" colspan=\"2\">\r\n";
s << "<div class=\"slide\">\r\n<input hidden type=\"checkbox\" class=\"toggle\" id=\"slide_tunnels\" />\r\n"
<< "<label for='slide_tunnels'>" << tr("Tunnels") << "</label>\r\n";
<< "<label for=\"slide_tunnels\">" << tr("Tunnels") << "</label>\r\n";
s << "<div class=\"slidecontent\">\r\n<div class=\"list\">\r\n";
for (auto & it : pool->GetInboundTunnels ()) { // inbound tunnels
s << "<div class=\"listitem in\">"
<< "<span class=\"arrowdown\" data-tooltip=\"" << tr("Inbound") << "\">[" << tr("In") << "] </span>"
<< "<span class=\"chain inbound\">";
it->Print(s);
if(it->LatencyIsKnown())
s << " <span class=\"latency\" data-tooltip=\"" << tr("Average tunnel latency") << "\">"
<< it->GetMeanLatency() << tr(/* tr: Milliseconds */ "ms") << "</span>";
else // placeholder for alignment
if(it->LatencyIsKnown()) {
s << " <span class=\"latency\" data-tooltip=\"" << tr("Average tunnel latency") << "\">";
if (it->GetMeanLatency() >= 1000) {
s << std::fixed << std::setprecision(2);
s << (double) it->GetMeanLatency() / 1000 << tr(/* tr: seconds */ "s") << "</span>";
} else {
s << it->GetMeanLatency() << tr(/* tr: Milliseconds */ "ms") << "</span>";
}
} else { // placeholder for alignment
s << " <span class=\"latency unknown\" data-tooltip=\"" << tr("Unknown tunnel latency") << "\">---</span>";
}
ShowTunnelDetails(s, it->GetState (), false, it->GetNumReceivedBytes ());
s << "</span></div>\r\n";
}
@ -677,11 +685,17 @@ namespace http {
<< "<span class=\"arrowup\" data-tooltip=\"" << tr("Outbound") << "\">[" << tr("Out") << "] </span>"
<< "<span class=\"chain outbound\">";
it->Print(s);
if(it->LatencyIsKnown())
s << " <span class=\"latency\" data-tooltip=\"" << tr("Average tunnel latency") << "\">"
<< it->GetMeanLatency() << tr("ms") << "</span>";
else // placeholder for alignment
if(it->LatencyIsKnown()) {
s << " <span class=\"latency\" data-tooltip=\"" << tr("Average tunnel latency") << "\">";
if (it->GetMeanLatency() >= 1000) {
s << std::fixed << std::setprecision(2);
s << (double) it->GetMeanLatency() / 1000 << tr(/* tr: seconds */ "s") << "</span>";
} else {
s << it->GetMeanLatency() << tr(/* tr: Milliseconds */ "ms") << "</span>";
}
} else { // placeholder for alignment
s << " <span class=\"latency unknown\" data-tooltip=\"" << tr("Unknown tunnel latency") << "\">---</span>";
}
ShowTunnelDetails(s, it->GetState (), false, it->GetNumSentBytes ());
s << "</span></div>\r\n";
}
@ -701,7 +715,9 @@ namespace http {
<< "</td><td class=\"center thin\">" << it.second->GetNumOutgoingTags () << "</td></tr>\r\n";
out_tags += it.second->GetNumOutgoingTags ();
}
s << "<tr><th colspan=\"2\">" << tr("Outgoing Session Tags") << " [" << out_tags << "]</th></tr>\r\n"
s << "<tr><th colspan=\"2\">" << tr("Outgoing Session Tags")
<< " <span class=\"hide\">[</span><span class=\"count\">" << out_tags
<< "</span><span class=\"hide\">]</span></th></tr>\r\n"
<< "<tr><td class=\"center nopadding\" colspan=\"2\"><table>\r\n"
<< "<thead>\r\n<tr><th class=\"left\">" << tr("Destination") << "</th><th class=\"thin\">" << tr("Count")
<< "</th></thead>\r\n<tbody class=\"tableitem\">\r\n" << tmp_s.str () << "</tbody></table>\r\n</td></tr>\r\n";
@ -710,7 +726,9 @@ namespace http {
auto numECIESx25519Tags = dest->GetNumIncomingECIESx25519Tags ();
if (numECIESx25519Tags > 0) {
s << "<tr><th colspan=\"2\">ECIESx25519<br>\r\n" << tr("Incoming Tags") << " [" << numECIESx25519Tags << "]</th></tr>\r\n";
s << "<tr><th colspan=\"2\">ECIESx25519<br>\r\n" << tr("Incoming Tags")
<< " <span class=\"hide\">[</span><span class=\"count\">" << numECIESx25519Tags
<< "</span><span class=\"hide\">]</span></th></tr>\r\n";
if (!dest->GetECIESx25519Sessions ().empty ())
{
std::stringstream tmp_s; uint32_t ecies_sessions = 0;
@ -722,8 +740,9 @@ namespace http {
}
s << "<tr><td class=\"center nopadding\" colspan=\"2\">\r\n"
<< "<div class=\"slide\"><input hidden type=\"checkbox\" class=\"toggle\" id=\"slide-ecies-sessions\" />\r\n"
<< "<label for='slide-ecies-sessions'>" << tr("Tag Sessions")
<< " [" << ecies_sessions << "]</label>\r\n"
<< "<label for=\"slide-ecies-sessions\">" << tr("Tag Sessions")
<< " <span class=\"hide\">[</span><span class=\"count\">" << ecies_sessions
<< "</span><span class=\"hide\">]</span></label>\r\n"
<< "<div class=\"slidecontent\">\r\n<table>\r\n<thead><th class=\"left\">" << tr("Destination") << "</th><th>"
<< tr("Status") << "</th></thead>\r\n<tbody class=\"tableitem\">\r\n" << tmp_s.str () << "</tbody></table>\r\n</div>\r\n</div>\r\n";
} else
@ -748,7 +767,7 @@ namespace http {
// Print table with streams information
s << "<tr><td class=\"center nopadding\" colspan=\"2\">\r\n";
s << "<div class=\"slide\">\r\n<input hidden type=\"checkbox\" class=\"toggle\" id=\"slide-streams\" />\r\n"
<< "<label for='slide-streams'>" << tr("Streams") << "</label>\r\n";
<< "<label for=\"slide-streams\">" << tr("Streams") << "</label>\r\n";
s << "<div class=\"slidecontent\">\r\n<table>\r\n<thead>\r\n<tr>";
s << "<th class=\"streamid\">ID</th>";
s << "<th class=\"streamdest\">Destination</th>";
@ -886,17 +905,24 @@ namespace http {
s << "<tr><td class=\"center nopadding\" colspan=\"2\">\r\n";
s << "<div class=\"slide\">\r\n<input hidden type=\"checkbox\" class=\"toggle\" id=\"slide_tunnels_client\" />\r\n"
<< "<label for='slide_tunnels_client'>" << tr("Client Tunnels") << "</label>\r\n"; // TODO: separate client & exploratory tunnels into sections
<< "<label for=\"slide_tunnels_client\">" << tr("Client Tunnels") << "</label>\r\n"; // TODO: separate client & exploratory tunnels into sections
s << "<div class=\"slidecontent\">\r\n<div class=\"list\">\r\n";
for (auto & it : i2p::tunnel::tunnels.GetInboundTunnels ()) {
s << "<div class=\"listitem in\">"
<< "<span class=\"arrowdown\" data-tooltip=\"" << tr("Inbound") << "\">[" << tr("In") << "] </span>"
<< "<span class=\"chain inbound\">";
it->Print(s);
if(it->LatencyIsKnown())
s << " <span class=\"latency\" data-tooltip=\"" << tr("Average tunnel latency") << "\">" << it->GetMeanLatency() << tr("ms") << "</span>";
else // placeholder for alignment
if(it->LatencyIsKnown()) {
s << " <span class=\"latency\" data-tooltip=\"" << tr("Average tunnel latency") << "\">";
if (it->GetMeanLatency() >= 1000) {
s << std::fixed << std::setprecision(2);
s << (double) it->GetMeanLatency() / 1000 << tr(/* tr: seconds */ "s") << "</span>";
} else {
s << it->GetMeanLatency() << tr(/* tr: Milliseconds */ "ms") << "</span>";
}
} else { // placeholder for alignment
s << " <span class=\"latency unknown\" data-tooltip=\"" << tr("Unknown tunnel latency") << "\">---</span>";
}
ShowTunnelDetails(s, it->GetState (), (it->GetTunnelPool () == ExplPool), it->GetNumReceivedBytes ());
s << "</span></div>\r\n";
}
@ -1078,15 +1104,17 @@ namespace http {
if (!tmp_s.str ().empty ())
{
s << "<div class=\"slide\"><input hidden type=\"checkbox\" class=\"toggle\" id=\"slide_" << boost::algorithm::to_lower_copy(name)
<< "\" />\r\n<label for='slide_" << boost::algorithm::to_lower_copy(name) << "'><b>" << name
<< "</b> [" << cnt << "]</label>\r\n<div class=\"slidecontent list\">"
<< "\" />\r\n<label for=\"slide_" << boost::algorithm::to_lower_copy(name) << "\">" << name
<< " <span class=\"hide\">[</span><span class=\"count\">" << cnt
<< "</span><span class=\"hide\">]</span></label>\r\n<div class=\"slidecontent list\">"
<< tmp_s.str () << "</div>\r\n</div>\r\n";
}
if (!tmp_s6.str ().empty ())
{
s << "<div class=\"slide\"><input hidden type=\"checkbox\" class=\"toggle\" id=\"slide_" << boost::algorithm::to_lower_copy(name) << "v6\" />\r\n"
<< "<label for='slide_" << boost::algorithm::to_lower_copy(name) << "v6'><b>" << name
<< "v6</b> [" << cnt6 << "]</label>\r\n<div class=\"slidecontent list\">"
<< "<label for=\"slide_" << boost::algorithm::to_lower_copy(name) << "v6\">" << name
<< "v6 <span class=\"hide\">[</span><span class=\"count\">" << cnt6
<< "</span><span class=\"hide\">]</span></label>\r\n<div class=\"slidecontent list\">"
<< tmp_s6.str () << "</div>\r\n</div>\r\n";
}
}
@ -1109,7 +1137,8 @@ namespace http {
if (!sessions.empty ())
{
s << "<div class=\"slide\"><input hidden type=\"checkbox\" class=\"toggle\" id=\"slide_ssu\" />\r\n"
<< "<label for='slide_ssu'><b>SSU</b> [" << (int) sessions.size() << "]</label>\r\n"
<< "<label for=\"slide_ssu\">SSU <span class=\"hide\">[</span><span class=\"count\">"
<< (int) sessions.size() << "</span><span class=\"hide\">]</span></label>\r\n"
<< "<div class=\"slidecontent list\">\r\n";
for (const auto& it: sessions)
{
@ -1150,7 +1179,8 @@ namespace http {
if (!sessions6.empty ())
{
s << "<div class=\"slide\">\r\n<input hidden type=\"checkbox\" class=\"toggle\" id=\"slide_ssuv6\" />\r\n"
<< "<label for='slide_ssuv6'><b>SSUv6</b> ( " << (int) sessions6.size() << " )</label>\r\n"
<< "<label for=\"slide_ssuv6\">SSUv6 <span class=\"hide\">[</span><span class=\"count\">"
<< (int) sessions6.size() << "</span><span class=\"hide\">]</span></label>\r\n"
<< "<div class=\"slidecontent list\">\r\n";
for (const auto& it: sessions6)
{

12
libi2pd/Tunnel.cpp
View file

@ -252,10 +252,11 @@ namespace tunnel
void InboundTunnel::Print (std::stringstream& s) const
{
s << "<span class=\"hops\">";
PrintHops (s);
s << " <span class=\"arrowright zerohop\">&#8658;</span> ";
s << " <span class=\"tunnelid local\" data-tooltip=\"";
s << GetTunnelID () << "\">Local</span>";
s << GetTunnelID () << "\">Local</span></span>";
s << "<span class=\"tunnelid\">" << GetTunnelID () << "</span>";
}
@ -277,8 +278,9 @@ namespace tunnel
void ZeroHopsInboundTunnel::Print (std::stringstream& s) const
{
s << "<span class=\"hops\">";
s << "<span class=\"arrowright zerohop\">&#8658;</span> <span class=\"tunnelid local\" data-tooltip=\""
<< GetTunnelID () << "\">Local</span>";
<< GetTunnelID () << "\">Local</span></span>";
s << "<span class=\"tunnelid\">" << GetTunnelID () << "</span>";
}
@ -318,9 +320,10 @@ namespace tunnel
void OutboundTunnel::Print (std::stringstream& s) const
{
s << "<span class=\"hops\">";
s << "<span class=\"tunnelid local\" data-tooltip=\"" << GetTunnelID () << "\">Local</span>";
PrintHops (s);
s << "<span class=\"tunnelid\">" << GetTunnelID () << "</span>";
s << "</span> <span class=\"tunnelid\">" << GetTunnelID () << "</span>";
}
ZeroHopsOutboundTunnel::ZeroHopsOutboundTunnel ():
@ -354,9 +357,10 @@ namespace tunnel
void ZeroHopsOutboundTunnel::Print (std::stringstream& s) const
{
s << "<span class=\"hops\">";
s << "<span class=\"arrowright\">&#8658;</span> ";
s << "<span class=\"tunnelid local\" data-tooltip=\""
<< GetTunnelID () << "\">" << GetTunnelID () << "\">Local</span>";
<< GetTunnelID () << "\">" << GetTunnelID () << "\">Local</span></span>";
s << "<span class=\"tunnelid\">" << GetTunnelID () << "</span>";
}

130
webconsole/style.css
View file

@ -32,9 +32,10 @@
/* theme colors */
--scrollbar: #414 #101;
--ink: #dbd;
--ink-darker: #b9b;
--ink-faded: rgba(221,187,221, .5);
--notify: #5f5;
--page: #140014;
--page: #120012;
--main-boxshadow: 0 0 0 1px #000, 0 0 0 4px #313, 0 0 0 5px #000;
--link: #ae6ba8;
--link_hover: #fafafa;
@ -47,7 +48,7 @@
--active_shadow: inset 3px 3px 3px rgba(0,0,0,.6);
--hr: linear-gradient(to right, #313, #414, #313);
--highlight: inset 0 0 0 1px #101;
--tr: #1a001a;
--tr: #180818;
--tr-alt: #202;
--tr-inner: #240024;
--header: linear-gradient(to bottom, #202, #101 50%, #101 50%, #000);
@ -136,6 +137,25 @@ a, .slide label {
font-weight: 600;
}
.slide label {
font-weight: 700;
}
.count {
margin: -1px 0 -1px 3px;
padding: 0 10px;
display: inline-block;
vertical-align: baseline;
border-radius: 2px;
background: var(--ink-darker);
color: var(--page);
text-shadow: none;
}
.count:hover {
background: var(--ink);
}
a {
padding: 1px 8px;
display: inline-block;
@ -354,6 +374,10 @@ th[colspan="2"], .slide label, #routerservices {
background: var(--th);
}
th:not(.sectiontitle)[colspan="2"], .slide label {
font-size: 95%;
}
th.sectiontitle {
padding: 0 0 10px !important;
font-weight: 700;
@ -398,7 +422,7 @@ td:last-child {
}
.error, .notify {
padding: 30px 12px;
padding: 30px 12px 40px;
font-size: 110%;
color: #fff;
box-shadow: var(--highlight), inset 0 0 3px 3px rgba(0,0,0,.6);
@ -409,7 +433,7 @@ td:last-child {
display: block;
width: 100%;
height: 48px;
background: var(--error) no-repeat center top / 40px;
background: var(--error) no-repeat center top / 44px;
}
#success {
@ -463,7 +487,7 @@ td:last-child {
.arrowright, .arrowleft, .arrowleftright, .arrowup, .arrowdown {
width: 12px;
height: 12px;
height: 16px;
display: inline-block;
vertical-align: middle;
font-size: 0 !important;
@ -482,11 +506,11 @@ td:last-child {
}
.arrowup {
background: var(--arrow_up) no-repeat center center / 11px;
background: var(--arrow_up) no-repeat center center / 12px;
}
.arrowdown {
background: var(--arrow_down) no-repeat center center / 11px;
background: var(--arrow_down) no-repeat center center / 12px;
}
.listitem, .tableitem {
@ -512,13 +536,14 @@ td:last-child {
}
.listitem.out .arrowup, .listitem.in .arrowdown {
margin: 0 4px;
margin: 3px 8px 0 16px;
float: left;
}
/*
#transports .listitem .arrowup, #transports .listitem .arrowdown {
margin: 0 10px;
margin: 3px 10px 0 16px;
}
*/
.tableitem .button {
margin: 0 !important;
padding: 1px 4px !important;
@ -674,7 +699,7 @@ table.services {
}
.tunnel {
margin: 3px 5px 0;
margin: 1px 5px 0;
width: 26px;
height: 16px;
float: left;
@ -718,6 +743,10 @@ span[data-tooltip] {
position: relative;
}
.hops {
text-align: right;
}
.hop, .host {
padding: 1px 4px;
display: inline-block;
@ -736,6 +765,10 @@ span[data-tooltip] {
background: #303 var(--planet) no-repeat 4px center / 9px;
}
a[href^="https://gwhois"]:hover, a[href^="https://gwhois"]:focus {
background: none !important
}
a:hover .host, a:focus .host, a:active .host {
background: #505 var(--exploratory) no-repeat 2px center / 13px;
}
@ -747,13 +780,13 @@ a:hover .host, a:focus .host, a:active .host {
}
.latency {
padding: 2px 5px 2px 18px;
min-width: 52px;
padding: 2px 5px 2px 20px;
min-width: 40px;
display: inline-block;
vertical-align: middle;
text-align: right;
float: right;
background: var(--page) var(--time) no-repeat 3px center / 13px;
background: var(--page) var(--time) no-repeat 5px center / 13px;
border-radius: 2px;
}
@ -801,8 +834,7 @@ a[href^="https://gwhois"] {
}
span[data-tooltip]:hover::after, span[data-tooltip]:active::after,
.itag[data-tooltip]:hover::after, .itag[data-tooltip]:active::after,
/*a[href^="https://gwhois"][data-tooltip]:hover::after, a[href^="https://gwhois"][data-tooltip]:active::after*/ {
.itag[data-tooltip]:hover::after, .itag[data-tooltip]:active::after {
padding: 3px 6px;
display: inline-block;
position: absolute;
@ -888,11 +920,13 @@ input[type=checkbox]:checked + label::after {
}
.tunnel, .latency {
margin: 0 4px;
margin: 1px 6px 0 4px;
}
.tunnel {
margin-left: 8px;
.tunnel, .hops {
margin-top: 2px;
display: inline-block;
vertical-align: middle;
}
}
@ -905,7 +939,6 @@ input[type=checkbox]:checked + label::after {
max-width: 200px !important;
}
}
}
@media screen and (max-width: 800px) {
#main {
@ -924,6 +957,16 @@ input[type=checkbox]:checked + label::after {
max-width: 300px;
}
.arrowup, .arrowdown, .tunnel {
float: none;
}
.latency {
min-width: 0;
background-size: 11px;
background-color: transparent !important;
}
.hop {
margin: 0 -3px;
}
@ -939,6 +982,11 @@ input[type=checkbox]:checked + label::after {
.tunnelid[data-tooltip]:hover::after, .tunnelid[data-tooltip]:active::after {
display: none;
}
.hops {
display: inline-block;
min-width: 240px;
}
}
@media screen and (min-width: 1200px) {
@ -950,6 +998,11 @@ input[type=checkbox]:checked + label::after {
background-size: 16px;
}
.tunnelid:not(.local), .latency, .hops {
margin-top: 1px;
margin-bottom: -1px;
}
.tunnelid:not(.local) {
margin-left: 12px;
float: right;
@ -959,11 +1012,10 @@ input[type=checkbox]:checked + label::after {
min-width: 560px;
display: inline-block;
vertical-align: middle;
text-align: right;
}
#transports .chain {
min-width: 540px;
min-width: 580px;
text-align: left;
}
@ -972,6 +1024,12 @@ input[type=checkbox]:checked + label::after {
text-align: center;
}
.hops {
min-width: 280px;
display: inline-block;
text-align: right;
}
.recvd, .sent {
min-width: 64px;
}
@ -984,6 +1042,10 @@ input[type=checkbox]:checked + label::after {
min-width: 144px;
}
.host a {
margin-bottom: -1px;
}
.SSU .host {
min-width: 190px;
}
@ -999,6 +1061,7 @@ input[type=checkbox]:checked + label::after {
}
.listitem.out .arrowup, .listitem.in .arrowdown {
margin-top: 2px;
background-size: 14px;
}
@ -1006,8 +1069,18 @@ input[type=checkbox]:checked + label::after {
margin-right: 10px;
}
.itag, .host {
margin-top: 1px;
}
.itag {
padding: 2px 5px 2px 20px;
float: right;
min-width: 100px;
display: inline-block;
border-radius: 2px;
background-color: var(--menu);
background-position: 5px center;
}
.latency {
@ -1019,6 +1092,10 @@ input[type=checkbox]:checked + label::after {
.transferred {
min-width: 48px;
}
.tunnel {
margin: 2px 0 0 -48px;
}
}
@media screen and (min-width: 1200px) and (min-height: 600px) {
@ -1041,3 +1118,10 @@ input[type=checkbox]:checked + label::after {
padding-bottom: 1px;
}
}
/* enable for screenshots */
/*
.hop {
filter: blur(8px);
}
*/