MOAR DIVS!!

velping/statics/style.css

@@ -1,8 +1,4 @@
-::selection {
-	background-color: #2563eb;
-	color: #fff;
-}
-
+::selection,
 ::-moz-selection {
 	background-color: #2563eb;
 	color: #fff;
@@ -24,44 +20,45 @@ body {
 	padding-top: 10px;
 }
 
-.green,
-.green::selection,
-.green::-moz-selection {
-	color: #5cdd8b;
-}
-
-.red,
-.red::selection,
-.red::-moz-selection {
-	color: #dc3545;
-}
-
-.grey,
-.grey::selection,
-.grey::-moz-selection {
-	color: #dadada;
-}
-
 .service {
 	width: 400px;
 	height: 20px;
 	padding: 10px;
 	margin-bottom: 10px;
 	display: flex;
+	justify-content: space-between;
 	align-items: center;
 	border-radius: 10px;
 	background-color: #040407;
 }
 
-.service p {
-	width: 33%
-}
-
 .status {
 	display: flex;
-	width: 66%
+	gap: 0;
 }
 
 .status p {
 	width: 9px;
 }
+
+.grey {
+	background-color: #dadada;
+}
+
+.green {
+	background-color: #5cdd8b;
+}
+
+.red {
+	background-color: #dc3545;
+}
+
+.block {
+	width: 9px;
+	height: 22px;
+	transition: 0.05s ease;
+}
+
+.block:hover {
+	opacity: 0.8;
+}

velping/templates/index.xht

@@ -31,11 +31,11 @@
 				<div class="status">
 					{% for ping in uptime[service.name] %}
 						{% if ping == "I" %}
-							<p class="green">█</p>
+							<div class="green block"></div>
 						{% elif ping == "O" %}
-							<p class="red">█</p>
+							<div class="red block"></div>
 						{% else %}
-							<p class="grey">█</p>
+							<div class="grey block"></div>
 						{% endif %}
 					{% endfor %}
 				</div>