From f7a86b2cfe882030ef4e0a43ab8b1c83cbe25e57 Mon Sep 17 00:00:00 2001
From: CN_SZTL <cnsztl@project-openwrt.eu.org>
Date: Thu, 12 Mar 2020 23:37:19 +0800
Subject: [PATCH] luci-app-vssr: sync with upstream source

---
 .../luasrc/view/vssr/status3.htm              | 87 ++++++++++++++++---
 1 file changed, 77 insertions(+), 10 deletions(-)

diff --git a/package/ctcgfw/luci-app-vssr/luasrc/view/vssr/status3.htm b/package/ctcgfw/luci-app-vssr/luasrc/view/vssr/status3.htm
index 7afff98602..3f1f85e0d1 100644
--- a/package/ctcgfw/luci-app-vssr/luasrc/view/vssr/status3.htm
+++ b/package/ctcgfw/luci-app-vssr/luasrc/view/vssr/status3.htm
@@ -1,16 +1,83 @@
-<fieldset id="_vssr_status_fieldset" class="cbi-section">	
-	<legend>	
-		<%:Running Status%>	
+<fieldset id="_vssr_status_fieldset" class="cbi-section">
+	<legend>
+		<%:Running Status%>
 	</legend>
+  <style>
+	.pure-g{letter-spacing:-.31em;text-rendering:optimizespeed;font-family:FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){table .pure-g{display:block}}.opera-only :-o-prefocus,.pure-g{word-spacing:-.43em}.pure-u,.pure-u-1,.pure-u-1-1,.pure-u-1-12,.pure-u-1-2,.pure-u-1-24,.pure-u-1-3,.pure-u-1-4,.pure-u-1-5,.pure-u-1-6,.pure-u-1-8,.pure-u-10-24,.pure-u-11-12,.pure-u-11-24,.pure-u-12-24,.pure-u-13-24,.pure-u-14-24,.pure-u-15-24,.pure-u-16-24,.pure-u-17-24,.pure-u-18-24,.pure-u-19-24,.pure-u-2-24,.pure-u-2-3,.pure-u-2-5,.pure-u-20-24,.pure-u-21-24,.pure-u-22-24,.pure-u-23-24,.pure-u-24-24,.pure-u-3-24,.pure-u-3-4,.pure-u-3-5,.pure-u-3-8,.pure-u-4-24,.pure-u-4-5,.pure-u-5-12,.pure-u-5-24,.pure-u-5-5,.pure-u-5-6,.pure-u-5-8,.pure-u-6-24,.pure-u-7-12,.pure-u-7-24,.pure-u-7-8,.pure-u-8-24,.pure-u-9-24{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-g [class*=pure-u]{font-family:sans-serif}.pure-u-1-24{width:4.1667%}.pure-u-1-12,.pure-u-2-24{width:8.3333%}.pure-u-1-8,.pure-u-3-24{width:12.5%}.pure-u-1-6,.pure-u-4-24{width:16.6667%}.pure-u-1-5{width:20%}.pure-u-5-24{width:20.8333%}.pure-u-1-4,.pure-u-6-24{width:25%}.pure-u-7-24{width:29.1667%}.pure-u-1-3,.pure-u-8-24{width:33.3333%}.pure-u-3-8,.pure-u-9-24{width:37.5%}.pure-u-2-5{width:40%}.pure-u-10-24,.pure-u-5-12{width:41.6667%}.pure-u-11-24{width:45.8333%}.pure-u-1-2,.pure-u-12-24{width:50%}.pure-u-13-24{width:54.1667%}.pure-u-14-24,.pure-u-7-12{width:58.3333%}.pure-u-3-5{width:60%}.pure-u-15-24,.pure-u-5-8{width:62.5%}.pure-u-16-24,.pure-u-2-3{width:66.6667%}.pure-u-17-24{width:70.8333%}.pure-u-18-24,.pure-u-3-4{width:75%}.pure-u-19-24{width:79.1667%}.pure-u-4-5{width:80%}.pure-u-20-24,.pure-u-5-6{width:83.3333%}.pure-u-21-24,.pure-u-7-8{width:87.5%}.pure-u-11-12,.pure-u-22-24{width:91.6667%}.pure-u-23-24{width:95.8333%}.pure-u-1,.pure-u-1-1,.pure-u-24-24,.pure-u-6-6{width:100%}
+    .status{
+        margin: 0rem -0.5rem -0.7rem -0.5rem;
+    }
+    .block{
+        margin: 0.5rem 0.5rem;
+        padding: 0;
+        font-weight: normal;
+        font-style: normal;
+        line-height: 1;
+        font-family: inherit;
+        min-width: inherit;
+        overflow-x: auto;
+        overflow-y: hidden;
+        padding: 6px 10px 7px 8px;
+        border: 1px solid rgba(0,0,0,.05);
+        border-radius: .375rem;
+        background-color: #f4;
+        box-shadow: 0 0 2rem 0 rgba(136,152,170,.15);
+	
+    }
+    .img-con{
+        margin: 1rem;
+
+    }
+    .green{
+		font-size:1.25rem;
+        color: #2dce89;
+    }
+    .red{
+		font-size:1.25rem;
+        color: #fb6340;
+    }
+	
+	.sk-text-success{
+        color: #2dce89;
+    }
+	.sk-text-error{
+        color: #fb6340;
+    }
+	.gap{
+	margin-right:0.5rem;
+	}
+    .block img{
+        width: 48px;
+        height: auto;
+		float:right;
+    }
+    .pure-u-5-8{
+        display:flex;
+        align-items:center;
+
+    }
+
+ .block h4{
+        font-size: .8125rem;
+        font-weight: 600;
+        margin: 1rem;
+		color:#8898aa!important;
+        line-height: 1.8em;
+    }
+
+    @media screen and (max-width: 720px) {
+        .pure-u-1-6{
+            width:50%;
+        }
+		.pure-u-1-2{
+            width:100%;
+        }
+    }
+
+</style> 
 
 
-<%
-math.randomseed(os.time())
--%>
-<html>
-
-<head>
-    <link rel="stylesheet" href="/luci-static/vssr/css/vssr.css??v=<%=math.random(1,100000)%>">
+  <style>.mar-10 {margin-left: 50px; margin-right: 10px;}</style>
  </head>
  <body>
   <div class="pure-g status">