frontend: folders

frontend/src/styles.css

@@ -71,6 +71,25 @@ body {
   overflow: hidden;
 }
 
+a {
+  color: var(--accent);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.18em;
+  transition: color 0.15s ease, text-decoration-color 0.15s ease;
+}
+
+a:visited {
+  color: color-mix(in oklch, var(--accent) 75%, var(--fg) 25%);
+}
+
+a:hover,
+a:focus-visible {
+  color: var(--accent-hover);
+  outline: none;
+  text-decoration-color: currentColor;
+}
+
 #app {
   height: 100%;
   background: var(--bg);
@@ -1821,6 +1840,32 @@ button.danger:hover:not([disabled]) {
   color: var(--muted);
 }
 
+.detail-panel .detail-folder-path {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  align-items: center;
+}
+
+.detail-panel .detail-folder-path__link {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+.detail-panel .detail-folder-path__link:hover,
+.detail-panel .detail-folder-path__link:focus-visible {
+  text-decoration: underline;
+  outline: none;
+}
+
+.detail-panel .detail-folder-path__separator {
+  color: var(--muted);
+}
+
+.detail-panel .detail-folder-path__segment {
+  color: var(--fg);
+}
+
 .detail-panel .doc-title-row {
   display: flex;
   align-items: center;