From c5c2dc5a10927caaea4cd81260bff42a3e83c109 Mon Sep 17 00:00:00 2001
From: adrien <adrien@malingrey.fr>
Date: Thu, 10 Apr 2025 17:26:17 +0200
Subject: [PATCH] tweak style
---
style.css | 51 +++++++++++++++++++--------------------------------
1 file changed, 19 insertions(+), 32 deletions(-)
diff --git a/style.css b/style.css
index 0c25bb3..afb4204 100644
--- a/style.css
+++ b/style.css
@@ -138,8 +138,8 @@ main {
height: 2em;
cursor: help;
transition: 0.2s background-color;
- border: 2px inset #476079;
- border-image-width: 4px;
+ border: 3px inset #476079;
+ border-image-width: 5px;
border-image-slice: 3;
border-image-source: url(rj45.svg);
border-image-repeat: stretch;
@@ -158,7 +158,7 @@ main {
.vlan {
--pvid: 0;
color: #ecf0f1;
- text-shadow: 0 1px 2px black;
+ text-shadow: 1px 2px 2px black;
background-color: hsl(
calc(var(--hue) * var(--pvid)) var(--saturation) var(--lightness)
);
@@ -170,41 +170,28 @@ main {
}
.trunk:not(.shutdown) {
- font-weight: bold;
background-image: linear-gradient(
- 127deg,
+ 145deg,
+ transparent 60%,
red,
orange,
yellow,
green,
blue,
violet
- ) !important;
+ );
+ background-size: cover;
+ background-position: center;
+ background-origin: border-box;
}
-/*.trunk:not(.shutdown) {
- font-weight: bold;
- border: 4px solid;
- border-image-slice: 1 !important;
- border-image-source: linear-gradient(
- 127deg,
- red,
- orange,
- yellow,
- green,
- blue,
- violet
- ) !important;
-}*/
-
/*.hybrid {
--tagged: 0;
--untagged: var(--pvid);
background-image: linear-gradient(
135deg,
- hsl(calc(var(--hue) * var(--tagged)) var(--saturation) var(--lightness)) 50%,
- hsl(calc(var(--hue) * var(--untagged)) var(--saturation) var(--lightness))
- 50%
+ hsl(calc(var(--hue) * var(--tagged)) var(--saturation) var(--lightness)) 60%,
+ hsl(calc(var(--hue) * var(--untagged)) var(--saturation) var(--lightness)) 60%
);
background-size: cover;
background-position: center;
@@ -218,20 +205,20 @@ main {
text-shadow: none;
}
-.poe::before {
- content: "⚡";
- position: absolute;
- top: -0.5em;
- right: -0.5em;
-}
-
-.voice_vlan::after {
+.voice_vlan::before {
content: "📞";
position: absolute;
bottom: -0.4em;
left: -0.4em;
}
+.poe::after {
+ content: "⚡";
+ position: absolute;
+ top: -0.5em;
+ right: -0.5em;
+}
+
.legend {
border-spacing: 0;
}