diff --git a/example-multipleServers-pretty.html b/example-multipleServers-pretty.html
index 4316eabf6..7579f25f3 100755
--- a/example-multipleServers-pretty.html
+++ b/example-multipleServers-pretty.html
@@ -107,6 +107,7 @@
body{
text-align:center;
font-family:"Roboto",sans-serif;
+
}
h1{
color:#404040;
@@ -149,10 +150,12 @@
height:9em;
position:relative;
box-sizing:border-box;
+ border: 2px solid black;
}
div.testName{
position:absolute;
- top:0.1em; left:0;
+ top:0.4em; left:0;
+
width:100%;
font-size:1.4em;
z-index:9;
@@ -173,6 +176,11 @@
#pingText,#jitText{
color:#AA6060;
}
+ #ipArea {
+ position: relative;
+ top:1em
+
+ }
div.meterText:empty:before{
color:#505050 !important;
content:"0.00";
@@ -232,8 +240,8 @@
LibreSpeed Example
ms
-
- IP Address:
+
IP Address:
+
Source code
diff --git a/example-singleServer-customSettings.html b/example-singleServer-customSettings.html
index b1c0cfbba..f96b95582 100755
--- a/example-singleServer-customSettings.html
+++ b/example-singleServer-customSettings.html
@@ -63,20 +63,22 @@
#startStopBtn{
display:inline-block;
margin:0 auto;
- color:#6060AA;
- background-color:rgba(0,0,0,0);
+
+ background-color:rgba(87, 28, 28, 0);
border:0.15em solid #6060FF;
border-radius:0.3em;
- transition:all 0.3s;
+
box-sizing:border-box;
width:8em; height:3em;
line-height:2.7em;
+
+
cursor:pointer;
- box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
- }
- #startStopBtn:hover{
- box-shadow: 0 0 2em rgba(0,0,0,0.1), inset 0 0 1em rgba(0,0,0,0.1);
+
}
+
+
+
#startStopBtn.running{
background-color:#FF3030;
border-color:#FF6060;
@@ -88,6 +90,38 @@
#startStopBtn.running:before{
content:"Abort";
}
+ #startStopBtn:hover, .testArea:hover{
+ background-image: linear-gradient(
+ to right,
+ #E7484F,
+ #E7484F 16.65%,
+ #F68B1D 16.65%,
+ #F68B1D 33.3%,
+ #FCED00 33.3%,
+ #FCED00 49.95%,
+ #009E4F 49.95%,
+ #009E4F 66.6%,
+ #00AAC3 66.6%,
+ #00AAC3 83.25%,
+ #732982 83.25%,
+ #732982 100%,
+ #E7484F 100%
+
+
+
+ );
+ animation:slidebg 2s linear infinite;
+ }
+ @keyframes slidebg {
+ to {
+ background-position:20vw;
+ }
+ }
+
+
+
+
+
#test{
margin-top:2em;
margin-bottom:12em;
@@ -98,6 +132,8 @@
height:9em;
position:relative;
box-sizing:border-box;
+ border: 3px solid black;
+
}
div.testName{
position:absolute;
diff --git a/example-singleServer-gauges.html b/example-singleServer-gauges.html
index 9a49705f0..1bfc895b6 100755
--- a/example-singleServer-gauges.html
+++ b/example-singleServer-gauges.html
@@ -135,6 +135,33 @@
cursor:pointer;
box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
}
+ #startStopBtn:hover{
+ background-image: linear-gradient(
+ to right,
+ #E7484F,
+ #E7484F 16.65%,
+ #F68B1D 16.65%,
+ #F68B1D 33.3%,
+ #FCED00 33.3%,
+ #FCED00 49.95%,
+ #009E4F 49.95%,
+ #009E4F 66.6%,
+ #00AAC3 66.6%,
+ #00AAC3 83.25%,
+ #732982 83.25%,
+ #732982 100%,
+ #E7484F 100%
+
+
+
+ );
+ animation:slidebg 2s linear infinite;
+ }
+ @keyframes slidebg {
+ to {
+ background-position:20vw;
+ }
+ }
#startStopBtn:hover{
box-shadow: 0 0 2em rgba(0,0,0,0.1), inset 0 0 1em rgba(0,0,0,0.1);
}
diff --git a/example-singleServer-pretty.html b/example-singleServer-pretty.html
index 771553538..5b1fe2af6 100755
--- a/example-singleServer-pretty.html
+++ b/example-singleServer-pretty.html
@@ -85,6 +85,33 @@
#startStopBtn:before{
content:"Start";
}
+ #startStopBtn:hover, .testArea:hover{
+ background-image: linear-gradient(
+ to right,
+ #E7484F,
+ #E7484F 16.65%,
+ #F68B1D 16.65%,
+ #F68B1D 33.3%,
+ #FCED00 33.3%,
+ #FCED00 49.95%,
+ #009E4F 49.95%,
+ #009E4F 66.6%,
+ #00AAC3 66.6%,
+ #00AAC3 83.25%,
+ #732982 83.25%,
+ #732982 100%,
+ #E7484F 100%
+
+
+
+ );
+ animation:slidebg 2s linear infinite;
+ }
+ @keyframes slidebg {
+ to {
+ background-position:20vw;
+ }
+ }
#startStopBtn.running:before{
content:"Abort";
}
diff --git a/example-singleServer-progressBar.html b/example-singleServer-progressBar.html
index f9e7007c3..024cb6ff1 100755
--- a/example-singleServer-progressBar.html
+++ b/example-singleServer-progressBar.html
@@ -94,6 +94,33 @@
margin-top:2em;
margin-bottom:12em;
}
+ #startStopBtn:hover, .testArea:hover{
+ background-image: linear-gradient(
+ to right,
+ #E7484F,
+ #E7484F 16.65%,
+ #F68B1D 16.65%,
+ #F68B1D 33.3%,
+ #FCED00 33.3%,
+ #FCED00 49.95%,
+ #009E4F 49.95%,
+ #009E4F 66.6%,
+ #00AAC3 66.6%,
+ #00AAC3 83.25%,
+ #732982 83.25%,
+ #732982 100%,
+ #E7484F 100%
+
+
+
+ );
+ animation:slidebg 2s linear infinite;
+ }
+ @keyframes slidebg {
+ to {
+ background-position:20vw;
+ }
+ }
div.testArea{
display:inline-block;
width:14em;