Fiksa litt css

This commit is contained in:
Trygve 2021-04-13 21:28:13 +02:00
parent 618fa4d421
commit fb8e284e12
4 changed files with 69 additions and 45 deletions

View File

@ -7,6 +7,8 @@
--dark-text-color: #eeeeee;
--dark-btn-color: #303f9f;
--dark-link-color: #5C6BC0;
--dark-shadow-color: #1a1a1a;
}
body {
min-height: 100%;
@ -20,6 +22,7 @@ body {
--text-color: black;
--btn-color: #303f9f;
--link-color: #3949AB;
--shadow-color: rgba(0,0,0,.15);
background-color: var(--bg-color);
color: var(--text-color);
@ -78,6 +81,7 @@ a {
/* Container for main content */
.cont {
margin: auto;
min-width: 20%;
background: var(--cont-bg-color);
border-radius: 1rem;
grid-area: main;
@ -99,17 +103,16 @@ a {
background-repeat: no-repeat;
width: 10rem;
height: 8rem;
border: thin solid #3c4043;
border-radius: 0.5rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.service-list li:hover {
.service-list li a:focus {
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
box-shadow: 0 0 2px 2px var(--accent-color), 0 .5rem 1rem rgba(0,0,0,.15) !important;
box-shadow: 0 0 2px 2px var(--accent-color), 0 .5rem 1rem var(--shadow-color) !important;
}
.service-list li a:hover {
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
box-shadow: 0 0 2px 2px var(--accent-color), 0 .5rem 1rem var(--shadow-color) !important;
}
.service-list li a {
font-size: 1.5rem;
@ -124,6 +127,10 @@ a {
flex-flow: column;
align-items: center;
justify-content: center;
border: thin solid #3c4043;
border-radius: 0.5rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.service-list li a div {
@ -140,10 +147,23 @@ a {
@media screen and (max-width:600px){
.cont {
max-width: 100%;
width: calc(100% - 0.5rem);
padding: 0.25rem;
}
}
@media only screen and (max-width:800px){
.cont {
max-width: 90%;
}
}
@media only screen and (min-width:800px){
.cont {
max-width: 80%;
}
}
@media only screen and (min-width:1000px){
.cont {
padding: 1rem;
@ -161,6 +181,9 @@ a {
html {
font-size: 20px;
}
.cont {
max-width: 40%;
}
}
@ -175,6 +198,7 @@ a {
--btn-color: var(--dark-btn-color);
--accent-color: var(--dark-accent-color);
--link-color: var(--dark-link-color);
--shadow-color: var(--dark-shadow-color);
}
#li-nextcloud { }
#li-matrix { filter: invert(); }

View File

@ -14,7 +14,7 @@
<div class="cont">
<h1>Flere saker</h1>
<h1 class="center-txt">Flere saker</h1>
<ul>
<li><a href="/phpsysinfo/">Server info</a></li>
<li><a href="/active-forks/">Gaffelsøker</a></li>

View File

@ -48,11 +48,11 @@ session_start();
Her kan du laste opp filer for å dele med andre. Filene kan være maks 5GB.<br /> Serveren ligger i Kristiansand og har 500/500 internet <br />
All opplasting skjer eget ansvar.
</p>
<div>
<a class="center-txt" href="http://trygve.me/filopplasting/filer/">Se alle filer</a>
<div class="center-txt">
<a href="http://trygve.me/filopplasting/filer/">Se alle filer</a>
</div>
<hr class="my-4">
<div>
<div class="center-txt">
<form action="upload.php" method="post" enctype="multipart/form-data">
<div class="form-group">
<input type="hidden" name="<?php echo ini_get("session.upload_progress.name"); ?>" value="123" />

View File

@ -17,40 +17,40 @@
<?php include "../common/header.html"; ?>
<div class="cont">
<button id="startStopBtn" onclick="startStop()"></button>
<div id="test">
<div class="testGroup">
<div class="testArea2">
<div class="testName">Ping</div>
<div id="pingText" class="meterText" style="color:#3949ab"></div>
<div class="unit">ms</div>
</div>
<div class="testArea2">
<div class="testName">Jitter</div>
<div id="jitText" class="meterText" style="color:#3949ab"></div>
<div class="unit">ms</div>
</div>
</div>
<div class="testGroup">
<div class="testArea">
<div class="testName">Download</div>
<canvas id="dlMeter" class="meter"></canvas>
<div id="dlText" class="meterText"></div>
<div class="unit">Mbps</div>
</div>
<div class="testArea">
<div class="testName">Upload</div>
<canvas id="ulMeter" class="meter"></canvas>
<div id="ulText" class="meterText"></div>
<div class="unit">Mbps</div>
</div>
</div>
<div id="ipArea">
<span id="ip"></span>
</div>
</div>
<a href="https://github.com/librespeed/speedtest">Source code</a>
<h1 class="center-txt">Nettverkstest</h1>
<button id="startStopBtn" onclick="startStop()"></button>
<div id="test">
<div class="testGroup">
<div class="testArea2">
<div class="testName">Ping</div>
<div id="pingText" class="meterText" style="color:#3949ab"></div>
<div class="unit">ms</div>
</div>
<div class="testArea2">
<div class="testName">Jitter</div>
<div id="jitText" class="meterText" style="color:#3949ab"></div>
<div class="unit">ms</div>
</div>
</div>
<div class="testGroup">
<div class="testArea">
<div class="testName">Download</div>
<canvas id="dlMeter" class="meter"></canvas>
<div id="dlText" class="meterText"></div>
<div class="unit">Mbps</div>
</div>
<div class="testArea">
<div class="testName">Upload</div>
<canvas id="ulMeter" class="meter"></canvas>
<div id="ulText" class="meterText"></div>
<div class="unit">Mbps</div>
</div>
</div>
<div id="ipArea">
<span id="ip"></span>
</div>
</div>
<a href="https://github.com/librespeed/speedtest">Source code</a>
</div>
<script type="text/javascript">setTimeout(function(){initUI()},100);</script>