feat (ui): netwerken en files verfraaid

webui/html/assets/css/app.css

@@ -436,6 +436,7 @@ pre{
     .sidebar .navLabel { display: none; }
     .sidebar .tab { justify-content: center; }
 }
+/* Files tree (Portainer-ish) */
 .file-folder-row{
     display:flex;
     align-items:center;
@@ -443,16 +444,64 @@ pre{
     gap:10px;
     cursor:pointer;
     user-select:none;
+
+    padding: 10px 12px;
+    border: 1px solid rgba(36,52,95,.75);
+    border-radius: 12px;
+    background: rgba(17,26,46,.35);
+    transition: background .12s ease, border-color .12s ease, transform .06s ease;
+}
+
+.file-folder-row:hover{
+    background: rgba(96,165,250,.08);
+    border-color: rgba(96,165,250,.35);
+}
+
+.file-folder-row:active{
+    transform: translateY(1px);
 }
 
 .file-folder-left{
     display:flex;
     align-items:center;
     gap:10px;
+    min-width: 0;
+}
+
+.folder-toggle{
+    display:inline-flex;
+    align-items:center;
+    justify-content:center;
+    width: 18px;
+    height: 18px;
+    border-radius: 6px;
+    border: 1px solid rgba(36,52,95,.8);
+    background: rgba(8,12,25,.35);
+    font-size: 12px;
+    opacity: .9;
+    flex: 0 0 auto;
+}
+
+.file-folder-left span:last-child{
+    overflow:hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .file-folder-files{
-    margin-left: 18px;
+    margin-left: 0;
+    margin-top: 6px;
+    padding-left: 12px;
+    border-left: 1px dashed rgba(36,52,95,.55);
+}
+
+/* File rows inside folders (werkt ook met inline styles die je nu al hebt) */
+.file-folder-files > div{
+    border-radius: 10px;
+}
+
+.file-folder-files > div:hover{
+    background: rgba(96,165,250,.06);
 }
 .data-table {
     width: 100%;
@@ -636,4 +685,126 @@ pre{
 .mapDetailKey{ opacity: 0.75; }
 .mapDetailList{ margin: 8px 0 0 0; padding-left: 18px; }
 .mapDetailList li{ margin: 4px 0; }
-.mapDetailLink{ cursor: pointer; text-decoration: underline; }
+.mapDetailLink{ cursor: pointer; text-decoration: underline; }
+
+/* ===== Netwerken kaart split layout ===== */
+.mapSplit{
+  display:grid;
+  grid-template-columns: 1fr 360px;
+  gap: 12px;
+  align-items: start;
+}
+
+.mapMain{ min-width: 0; }
+.mapSide{ min-width: 0; }
+
+@media (max-width: 1100px){
+  .mapSplit{ grid-template-columns: 1fr; }
+}
+
+/* ===== Legenda horizontaal ===== */
+.mapLegend{
+  display:flex;
+  align-items:center;
+  gap:18px;
+  flex-wrap:wrap;
+}
+
+.mapLegend .legendTitle{
+  font-weight:600;
+  margin-right:10px;
+}
+
+.mapLegend .legendRow{
+  display:flex;
+  align-items:center;
+  gap:6px;
+}
+
+/* ===== Legenda horizontaal + compact (override) ===== */
+.mapLegend{
+  display:flex !important;
+  flex-direction: row;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+  max-width: none;         /* was 360px */
+  padding: 10px 12px;
+}
+
+.mapLegend .legendTitle{
+  margin: 0;
+  font-weight: 800;
+}
+
+.mapLegend .legendRow{
+  margin: 0;               /* haalt verticale spacing weg */
+  display:flex;
+  align-items:center;
+  gap: 8px;
+  white-space: nowrap;     /* voorkomt rare afbreking */
+}
+
+/* ===== Legenda badge stijl ===== */
+
+.mapLegend{
+  display:flex;
+  align-items:center;
+  gap:12px;
+  flex-wrap:wrap;
+}
+
+.mapLegend .legendTitle{
+  font-weight:800;
+  margin-right:6px;
+}
+
+.mapLegend .legendRow{
+  display:inline-flex;
+  align-items:center;
+  gap:8px;
+  padding:6px 10px;
+  border:1px solid rgba(255,255,255,0.12);
+  border-radius:20px;
+  background:rgba(255,255,255,0.03);
+  font-size:13px;
+  white-space:nowrap;
+  transition:all .15s ease;
+}
+
+.mapLegend .legendRow:hover{
+  border-color:rgba(255,255,255,0.25);
+  background:rgba(255,255,255,0.06);
+}
+
+
+/* Files tree: actions only on hover */
+.file-folder-row .file-folder-actions{
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity .12s ease;
+}
+
+.file-folder-row:hover .file-folder-actions{
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.file-folder-meta{
+    display:inline-flex;
+    align-items:center;
+    gap:8px;
+    flex: 0 0 auto;
+}
+
+.file-badge{
+    display:inline-flex;
+    align-items:center;
+    gap:6px;
+    padding: 3px 8px;
+    border-radius: 999px;
+    border: 1px solid rgba(36,52,95,.8);
+    background: rgba(8,12,25,.35);
+    font-size: 12px;
+    opacity: .92;
+}