mirror of
https://github.com/openspeedtest/Speed-Test.git
synced 2024-05-10 18:54:51 +00:00
383 lines
7.0 KiB
CSS
383 lines
7.0 KiB
CSS
/* roboto-regular - latin */
|
|
@font-face {
|
|
font-family: "Roboto";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url("..fonts/roboto-v30-latin-regular.eot"); /* IE9 Compat Modes */
|
|
src: local(""),
|
|
url("../fonts/roboto-v30-latin-regular.eot?#iefix")
|
|
format("embedded-opentype"),
|
|
/* IE6-IE8 */ url("../fonts/roboto-v30-latin-regular.woff2")
|
|
format("woff2"),
|
|
/* Super Modern Browsers */
|
|
url("../fonts/roboto-v30-latin-regular.woff") format("woff"),
|
|
/* Modern Browsers */ url("../fonts/roboto-v30-latin-regular.ttf")
|
|
format("truetype"),
|
|
/* Safari, Android, iOS */
|
|
url("../fonts/roboto-v30-latin-regular.svg#Roboto") format("svg"); /* Legacy iOS */
|
|
}
|
|
/* roboto-500 - latin */
|
|
@font-face {
|
|
font-family: "Roboto";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-display: swap;
|
|
src: url("assets/fonts/roboto-v30-latin-500.eot"); /* IE9 Compat Modes */
|
|
src: local(""),
|
|
url("assets/fonts/roboto-v30-latin-500.eot?#iefix")
|
|
format("embedded-opentype"),
|
|
/* IE6-IE8 */ url("../fonts/roboto-v30-latin-500.woff2")
|
|
format("woff2"),
|
|
/* Super Modern Browsers */ url("../fonts/roboto-v30-latin-500.woff")
|
|
format("woff"),
|
|
/* Modern Browsers */ url("../fonts/roboto-v30-latin-500.ttf")
|
|
format("truetype"),
|
|
/* Safari, Android, iOS */
|
|
url("../fonts/roboto-v30-latin-500.svg#Roboto") format("svg"); /* Legacy iOS */
|
|
}
|
|
|
|
body {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
display: block;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
html {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.Credits {
|
|
color: rgb(125 119 119);
|
|
text-align: center;
|
|
font-size:14px;
|
|
font-family: Roboto-Medium, Roboto;
|
|
font-weight: 500;
|
|
}
|
|
.Credits a {
|
|
text-decoration: none;
|
|
color: rgb(113, 113, 113);
|
|
}
|
|
.Credits a:hover {
|
|
color: #14b0fe;
|
|
}
|
|
|
|
.ConnectError {
|
|
display: none;
|
|
|
|
}
|
|
|
|
.openSpeedtestApp {
|
|
|
|
height: 100vh;
|
|
width: 100vw;
|
|
display: none;
|
|
overflow: hidden;
|
|
}
|
|
.main-Gaugebg {
|
|
fill: none;
|
|
stroke: rgb(231, 231, 232);
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-width: 22px;
|
|
stroke-dasharray: 681;
|
|
}
|
|
.main-GaugeBlue {
|
|
fill: none;
|
|
stroke: url(#gradient);
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-width: 22px;
|
|
stroke-dasharray: 681;
|
|
stroke-opacity: 0;
|
|
}
|
|
.main-GaugeWhite {
|
|
fill: none;
|
|
stroke: rgb(255, 255, 255);
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-width: 15px;
|
|
stroke-dasharray: 0, 681;
|
|
stroke-dashoffset: 1;
|
|
stroke-opacity: 0;
|
|
}
|
|
.oDo-Meter {
|
|
font-size: 16.633283615112305px;
|
|
fill: gray;
|
|
font-family: Roboto-Medium, Roboto;
|
|
font-weight: 500;
|
|
}
|
|
.oDoLive-Speed {
|
|
font-size: 28px;
|
|
fill: #201e1e;
|
|
font-family: Roboto-Medium, Roboto;
|
|
font-weight: 500;
|
|
text-anchor: middle;
|
|
}
|
|
|
|
.oDoLive-Status {
|
|
font-size: 10px;
|
|
fill: #d2d1d2;
|
|
font-family: Roboto-Medium, Roboto;
|
|
font-weight: 500;
|
|
text-anchor: middle;
|
|
}
|
|
.uiBg {
|
|
fill: #d2d1d2;
|
|
}
|
|
.progressbg {
|
|
stroke: rgb(231, 231, 232);
|
|
stroke-width: 8px;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-dasharray: 400;
|
|
stroke-dashoffset: 0;
|
|
}
|
|
.Cards {
|
|
fill: #f2f2f2;
|
|
}
|
|
.Symbol {
|
|
fill: url(#gradient);
|
|
}
|
|
.rtext {
|
|
font-size: 12px;
|
|
fill: #333;
|
|
font-family: Roboto-Medium, Roboto;
|
|
font-weight: 500;
|
|
}
|
|
.rtextnum {
|
|
font-size: 23px;
|
|
fill: #201e1e;
|
|
font-family: Roboto-Medium, Roboto;
|
|
font-weight: 500;
|
|
text-anchor: middle;
|
|
}
|
|
.rtextmbms {
|
|
font-size: 12px;
|
|
fill: #5f5f5f;
|
|
font-family: Roboto-Medium, Roboto;
|
|
font-weight: 500;
|
|
text-anchor: middle;
|
|
}
|
|
.jitter-Mob {
|
|
font-size: 9px;
|
|
fill: #5f5f5f;
|
|
font-family: Roboto-Medium, Roboto;
|
|
font-weight: 500;
|
|
text-anchor: middle;
|
|
}
|
|
.startButton {
|
|
fill: url(#RadialGradient1);
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
-webkit-tap-highlight-color: transparent;
|
|
cursor: pointer;
|
|
pointer-events: visible;
|
|
}
|
|
.buttonTxt {
|
|
font-size: 40px;
|
|
fill: #ffffff;
|
|
font-family: Roboto-Medium, Roboto;
|
|
font-weight: 500;
|
|
text-anchor: middle;
|
|
}
|
|
|
|
.intro-Progress {
|
|
stroke: #56c4fb;
|
|
stroke-width: 8px;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-dasharray: 400;
|
|
stroke-dashoffset: 0;
|
|
}
|
|
.progressElmstart {
|
|
stroke: #56c4fb;
|
|
stroke-width: 8px;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-dasharray: 400;
|
|
stroke-dashoffset: 0;
|
|
display: block;
|
|
}
|
|
.Startsettings {
|
|
fill: url(#RadialGradient1);
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
-webkit-tap-highlight-color: transparent;
|
|
cursor: pointer;
|
|
pointer-events: visible;
|
|
opacity: 0.1;
|
|
transition: opacity 1s ease-in-out;
|
|
}
|
|
.Startsettings:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.progressbg {
|
|
stroke: rgb(231, 231, 232);
|
|
stroke-width: 8px;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-dasharray: 400;
|
|
stroke-dashoffset: 0;
|
|
}
|
|
.deskStart {
|
|
fill: none;
|
|
stroke: rgb(231, 231, 232);
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-width: 22px;
|
|
stroke-dasharray: 681;
|
|
stroke: url(#gradient);
|
|
}
|
|
#UI-Desk {
|
|
display: none;
|
|
}
|
|
#UI-Mob {
|
|
display: none;
|
|
}
|
|
.oDoTop-Speed {
|
|
font-size: 16.96px;
|
|
fill: gray;
|
|
font-family: Roboto-Medium, Roboto;
|
|
font-weight: 500;
|
|
text-anchor: end;
|
|
}
|
|
#upSymbolDesk {
|
|
fill: #14b0fe;
|
|
display: none;
|
|
}
|
|
#downSymbolDesk {
|
|
fill: #14b0fe;
|
|
display: none;
|
|
}
|
|
#upSymbolMob {
|
|
fill: #14b0fe;
|
|
display: none;
|
|
}
|
|
#downSymbolMob {
|
|
fill: #14b0fe;
|
|
display: none;
|
|
}
|
|
|
|
#ipMob {
|
|
font-size: 15px;
|
|
fill: #201e1e;
|
|
font-family: Roboto-Medium, Roboto;
|
|
font-weight: 500;
|
|
text-anchor: middle;
|
|
display: none;
|
|
}
|
|
#ipDesk {
|
|
font-size: 15px;
|
|
fill: #201e1e;
|
|
font-family: Roboto-Medium, Roboto;
|
|
font-weight: 500;
|
|
text-anchor: middle;
|
|
display: none;
|
|
}
|
|
|
|
.spinner {
|
|
position: absolute;
|
|
z-index: 999;
|
|
top: 50vh;
|
|
left: 50vw;
|
|
text-align: center;
|
|
}
|
|
|
|
.spinner > div {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-color: #2196f3;
|
|
|
|
border-radius: 100%;
|
|
display: inline-block;
|
|
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
|
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
|
}
|
|
|
|
.spinner .bounce1 {
|
|
-webkit-animation-delay: -0.32s;
|
|
animation-delay: -0.32s;
|
|
}
|
|
|
|
.spinner .bounce2 {
|
|
-webkit-animation-delay: -0.16s;
|
|
animation-delay: -0.16s;
|
|
}
|
|
|
|
@-webkit-keyframes sk-bouncedelay {
|
|
0%,
|
|
80%,
|
|
100% {
|
|
-webkit-transform: scale(0);
|
|
}
|
|
40% {
|
|
-webkit-transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes sk-bouncedelay {
|
|
0%,
|
|
80%,
|
|
100% {
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0);
|
|
}
|
|
40% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.darkmode {
|
|
margin-bottom: -15px;
|
|
fill: #75757a99;
|
|
padding-top: 16px;
|
|
display: none;
|
|
cursor: pointer;
|
|
margin-right: 30px;
|
|
}
|
|
#daymode {
|
|
margin-right: 40px;
|
|
}
|
|
.darkmode:hover {
|
|
fill: #000000;
|
|
}
|
|
|
|
.Mobile,
|
|
.Desktop {
|
|
visibility: hidden;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
|
|
@media only screen and (orientation: landscape) {
|
|
.Mobile {
|
|
visibility: hidden;
|
|
}
|
|
.Desktop {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
@media only screen and (orientation: portrait) {
|
|
.spinner {
|
|
top: 42vh;
|
|
left: 42vw;
|
|
}
|
|
.Mobile {
|
|
visibility: visible;
|
|
}
|
|
.Desktop {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 300px) {
|
|
.Credits{
|
|
display: none;
|
|
}
|
|
}
|