feat: iconenen aangepast

webui/html/style.css

@@ -347,60 +347,61 @@ button:disabled {
 }
 
 .entry-media-icon {
-  width: 14px;
-  height: 14px;
-  position: relative;
-  display: inline-block;
+  width: 18px;
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-muted);
 }
 
-.entry-media-icon.folder::before {
-  content: "";
-  position: absolute;
-  left: 1px;
-  top: 4px;
-  width: 12px;
-  height: 8px;
-  border: 1.5px solid var(--color-text-muted);
-  border-radius: 2px;
-  background: transparent;
+.entry-media-svg {
+  width: 18px;
+  height: 18px;
+  display: block;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.55;
+  stroke-linecap: round;
+  stroke-linejoin: round;
 }
 
-.entry-media-icon.folder::after {
-  content: "";
-  position: absolute;
-  left: 2px;
-  top: 2px;
-  width: 5px;
-  height: 3px;
-  border: 1.5px solid var(--color-text-muted);
-  border-bottom: 0;
-  border-radius: 2px 2px 0 0;
-  background: transparent;
+.entry-media-icon.folder {
+  color: color-mix(in srgb, #d1a85e 72%, var(--color-text-muted));
 }
 
-.entry-media-icon.file::before {
-  content: "";
-  position: absolute;
-  left: 2px;
-  top: 1px;
-  width: 9px;
-  height: 12px;
-  border: 1.5px solid var(--color-text-muted);
-  border-radius: 2px;
-  background: transparent;
+.entry-media-icon.file {
+  color: var(--color-text-muted);
 }
 
-.entry-media-icon.file::after {
-  content: "";
-  position: absolute;
-  right: 1px;
-  top: 1px;
-  width: 4px;
-  height: 4px;
-  background: var(--color-button-secondary-bg);
-  border-top: 1.5px solid var(--color-text-muted);
-  border-right: 1.5px solid var(--color-text-muted);
-  transform: skew(-12deg, -12deg);
+.entry-media-icon.image {
+  color: color-mix(in srgb, #62a58c 70%, var(--color-text-muted));
+}
+
+.entry-media-icon.video {
+  color: color-mix(in srgb, #7f8ed1 70%, var(--color-text-muted));
+}
+
+.entry-media-icon.pdf {
+  color: color-mix(in srgb, #d06b6b 70%, var(--color-text-muted));
+}
+
+.entry-media-icon.markdown,
+.entry-media-icon.text,
+.entry-media-icon.yaml,
+.entry-media-icon.xml {
+  color: color-mix(in srgb, #8ea0b8 82%, var(--color-text-muted));
+}
+
+.entry-media-icon.json,
+.entry-media-icon.javascript,
+.entry-media-icon.typescript,
+.entry-media-icon.css,
+.entry-media-icon.html,
+.entry-media-icon.shell,
+.entry-media-icon.python,
+.entry-media-icon.docker {
+  color: color-mix(in srgb, var(--color-accent) 60%, var(--color-text-muted));
 }
 
 .entry-label {