Ham/meshtastic-map
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move css to separate file

Browse source
This commit is contained in:
Alexander Heinke 2026-02-21 10:27:49 +01:00
parent c090352c32
commit 6e6bb22a9c
2 changed files with 117 additions and 119 deletions
Download patch file Download diff file Expand all files Collapse all files

115
src/public/assets/css/styles.css Normal file
View file

@ -0,0 +1,115 @@
/* used to prevent ui flicker before vuejs loads */
[v-cloak] {
display: none;
}
.icon-longfast {
background-color: #009016;
border-radius: 25px;
border: 1px solid #2C2D3C;
}
.icon-mediumfast {
background-color: #326be7;
border-radius: 25px;
border: 1px solid #2C2D3C;
}
.icon-shortslow {
background-color: #0077e6;
border-radius: 25px;
border: 1px solid #2C2D3C;
}
.icon-mqtt-connected {
background-color: #2563eb; /* Change to use same color as disconnected // #16a34a; */
border-radius: 25px;
border: 1px solid #2C2D3C;
}
.icon-mqtt-disconnected {
background-color: #2563eb;
border-radius: 25px;
border: 1px solid #2C2D3C;
}
.icon-offline {
background-color: #e2286c;
border-radius: 25px;
border: 1px solid #2C2D3C;
}
.icon-position-history {
background-color: #a855f7;
border-radius: 25px;
border: 1px solid #2C2D3C;
}
.icon-traceroute-start {
background-color: #16a34a; /* green */
border-radius: 25px;
border: 1px solid #2C2D3C;
}
.icon-traceroute-end {
background-color: #dc2626; /* red */
border-radius: 25px;
border: 1px solid #2C2D3C;
}
.waypoint-label {
font-size: 26px;
background-color: transparent;
}
.link {
color: #2563eb;
}
.link:hover {
text-decoration: underline;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltip-text {
visibility: hidden;
width: 80px;
background-color: black;
color: #fff;
text-align: center;
padding: 4px 0;
border-radius: 6px;
position: absolute;
z-index: 10000;
top: 100%;
left: 50%;
margin-top: 8px;
margin-left: -40px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
.tooltip .tooltip-text::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltip-text {
visibility: visible;
}
.z-search {
z-index: 1001;
}
.z-sidebar {
z-index: 1002;
}

121
src/public/index.html
View file

@ -48,125 +48,8 @@
<script src="assets/js/chart.js@4.4.2/dist/chart.umd.js"></script> <script src="assets/js/chart.js@4.4.2/dist/chart.umd.js"></script>
<script src="assets/js/chartjs-adapter-moment/chartjs-adapter-moment.js"></script> <script src="assets/js/chartjs-adapter-moment/chartjs-adapter-moment.js"></script>
<style> <!-- map css style -->
<link rel="stylesheet" href="assets/css/styles.css"/>
/* used to prevent ui flicker before vuejs loads */
[v-cloak] {
display: none;
}
.icon-longfast {
background-color: #009016;
border-radius: 25px;
border: 1px solid #2C2D3C;
}
.icon-mediumfast {
background-color: #326be7;
border-radius: 25px;
border: 1px solid #2C2D3C;
}
.icon-shortslow {
background-color: #0077e6;
border-radius: 25px;
border: 1px solid #2C2D3C;
}
.icon-mqtt-connected {
background-color: #2563eb; /* Change to use same color as disconnected // #16a34a; */
border-radius: 25px;
border: 1px solid #2C2D3C;
}
.icon-mqtt-disconnected {
background-color: #2563eb;
border-radius: 25px;
border: 1px solid #2C2D3C;
}
.icon-offline {
background-color: #e2286c;
border-radius: 25px;
border: 1px solid #2C2D3C;
}
.icon-position-history {
background-color: #a855f7;
border-radius: 25px;
border: 1px solid #2C2D3C;
}
.icon-traceroute-start {
background-color: #16a34a; /* green */
border-radius: 25px;
border: 1px solid #2C2D3C;
}
.icon-traceroute-end {
background-color: #dc2626; /* red */
border-radius: 25px;
border: 1px solid #2C2D3C;
}
.waypoint-label {
font-size: 26px;
background-color: transparent;
}
.link {
color: #2563eb;
}
.link:hover {
text-decoration: underline;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltip-text {
visibility: hidden;
width: 80px;
background-color: black;
color: #fff;
text-align: center;
padding: 4px 0;
border-radius: 6px;
position: absolute;
z-index: 10000;
top: 100%;
left: 50%;
margin-top: 8px;
margin-left: -40px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
.tooltip .tooltip-text::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltip-text {
visibility: visible;
}
.z-search {
z-index: 1001;
}
.z-sidebar {
z-index: 1002;
}
</style>
</head> </head>
<body class="h-full bg-gray-200"> <body class="h-full bg-gray-200">