Slackware_UK/website-speedtest.slackware.uk
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Start using new HTML5/CSS code.

Browse source
This commit is contained in:
Darren 'Tadgy' Austin 2024-08-10 23:06:12 +01:00
commit cb4688d7a6
23 changed files with 650 additions and 616 deletions
Download patch file Download diff file Expand all files Collapse all files

271
html/dark.css
View file

@ -1,126 +1,235 @@
body{
text-align: center;
a:link {
color: #4255ff;
text-decoration: none;
}
div.ip{
color: #ffffff !important;
a:visited {
color: #943cc3;
text-decoration: none;
}
div.meterText:empty:before{
color: #888888 !important;
content: "0.00";
a:hover {
text-decoration: underline;
}
div.meterText{
position: absolute;
bottom: 1.5em;
left: 0;
width: 100%;
font-size: 2.5em;
z-index: 9;
body {
background-color: #000000;
background-image: url("/circuit-dark.png");
color: #aeaeae;
padding-top: 15px;
}
div.testArea{
display: inline-block;
width: 20em;
height: 9em;
position: relative;
box-sizing: border-box;
hr {
background-color: #888888;
border: 0;
color: #888888;
height: 2px;
}
div.progressText{
margin-bottom: 2px;
img {
border: 0;
}
.bold {
font-weight: bold;
}
div.testGroup{
display: inline-block;
.box {
background: #060606;
border: 2px solid #aaaaaa;
box-shadow: 10px 10px 10px -5px rgba(128,128,128,0.5);
overflow-x: auto;
}
div.testName{
position: absolute;
top: 0.1em;
left: 0;
width: 100%;
font-size: 1.4em;
color: #ffffff !important;
z-index:9;
.boxmargins {
margin-bottom: 10px;
}
div.unit{
position: absolute;
bottom: 2em;
left: 0;
width: 100%;
color: #ffffff !important;
z-index:9;
.boxpadding {
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
}
html,body{
border: none;
padding: 0;
.donatebutton {
margin-left: 100px;
margin-right: 100px;
}
#dlText{
color: #4255ff;
.heading {
font-size: 200%;
}
#pingText,#jitText{
color: #4255ff;
.metertext {
font-size: 200%;
}
#progress{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0%;
transition: width 2s;
background-color: #4255ff;
.metertext:empty:before {
content: "0.00";
}
#progressBar{
width: 60%;
height: 0.3em;
background-color: #060606;
position: relative;
.notice {
display: block;
margin: 0 auto;
border: 2px solid #ffffff;
margin-left: auto;
margin-bottom: 25px;
margin-right: auto;
text-align: center;
width: 70%;
}
#startStopBtn{
display: inline-block;
margin: 0 auto;
color: #4255ff;
.sponsor {
margin-top: 15px;
margin-bottom: 15px;
}
.subheading {
font-size: 125%;
}
#copyright {
font-size: 10px;
text-align: center;
}
#donatebuttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 10px;
margin-top: 20px;
}
#headingbox {
margin-left: auto;
margin-right: auto;
width: fit-content;
}
#headingtext {
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
text-align: center;
}
#ipinfo {
text-align: center;
}
#logo {
display: flex;
justify-content: center;
margin-bottom: 30px;
}
#page {
margin-left: auto;
margin-right: auto;
width: 90%;
}
#progress {
background-color: #4255ff;
height: 100%;
position: absolute;
transition: width 2s;
width: 0%;
}
#progressbar {
background-color: #060606;
border: 2px solid #aaaaaa;
height: 8px;
margin-bottom: 5px;
margin-right: auto;
margin-left: auto;
position: relative;
width: 600px;
}
#progresstext {
margin-bottom: 5px;
text-align: center;
}
#startstopbutton {
#margin: 0 auto;
background-color: #060606;
border: 2px solid #4255ff;
/* border-radius: 0.3em; */
transition: all 0.3s;
box-sizing: border-box;
width: 8em;
height: 3em;
margin-bottom: 2em;
line-height: 2.7em;
color: #4255ff;
cursor: pointer;
/* box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1); */
height: 40px;
line-height: 36px;
transition: all 0.3s;
width: 150px;
margin-bottom: 30px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
#startStopBtn:before{
content: "Start";
#startstopbutton:before {
content: "Start Test";
}
#startStopBtn.running{
#startstopbutton.running {
background-color:#4255ff;
border-color:#ffffff;
color:#ffffff;
border-color:#aaaaaa;
color:#aaaaaa;
}
#startStopBtn.running:before{
#startstopbutton.running:before {
content: "Abort";
}
#test{
margin-top: 2em;
margin-bottom: 2em;
#testbox {
margin-left: auto;
margin-right: auto;
padding-left: 75px;
padding-right: 75px;
width: fit-content;
}
#tests {
column-gap: 150px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
margin-bottom: 30px;
text-align: center;
}
#theme {
column-gap: 50px;
display: grid;
grid-template-columns: auto auto auto;
}
#themetoggle {
align-self: end;
display: flex;
height: 25px;
margin-left: auto;
margin-right: 0;
max-height: 25px;
text-align: right;
}
#themetoggleimg {
height: 15px;
margin-right: 5px;
vertical-align: middle;
}
#themetoggletext {
align-content: center;
color: #888888;
font-size: 15px;
margin-left: 5px;
margin-right: 5px;
}