diff --git a/apps/client/src/widgets/FloatingButtonsDefinitions.tsx b/apps/client/src/widgets/FloatingButtonsDefinitions.tsx
index 8670fbcdc..4cd6e1c5f 100644
--- a/apps/client/src/widgets/FloatingButtonsDefinitions.tsx
+++ b/apps/client/src/widgets/FloatingButtonsDefinitions.tsx
@@ -393,7 +393,7 @@ export function BacklinksList({ note }: { note: FNote }) {
});
return backlinks.map(backlink => (
-
+
))
)}
-
+
));
}
diff --git a/apps/client/src/widgets/layout/StatusBar.css b/apps/client/src/widgets/layout/StatusBar.css
index a30b4b89e..d9a177a61 100644
--- a/apps/client/src/widgets/layout/StatusBar.css
+++ b/apps/client/src/widgets/layout/StatusBar.css
@@ -155,6 +155,91 @@
max-height: 90vh;
overflow: scroll;
}
+
+ .backlinks-widget > .dropdown-menu {
+ --menu-padding-size: .9em;
+
+ max-height: 60vh;
+ overflow-y: scroll;
+
+ /* Backlink card */
+ li {
+ --border-radius: 8px;
+
+ max-width: 600px;
+ padding: 10px 20px;
+ background: var(--card-background-color);
+
+ & + li {
+ margin-top: 2px;
+ }
+
+ &:first-child {
+ border-radius: var(--border-radius) var(--border-radius) 0 0;
+ }
+
+ &:last-child {
+ border-radius: 0 0 var(--border-radius) var(--border-radius);
+ }
+
+ /* Card header */
+ & > span:first-child {
+ display: block;
+
+ > span {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+
+ /* Note path */
+ > small {
+ flex: 100%;
+ order: -1;
+ font-size: .65rem;
+
+ .note-path {
+ padding: 0;
+ }
+ }
+
+ /* Note icon */
+ > .bx {
+ color: var(--menu-item-icon-color);
+ }
+
+ /* Note title */
+ > a {
+ margin-inline-start: 4px;
+ color: currentColor;
+ font-weight: 500;
+ }
+ }
+ }
+
+ /* Card content - excerpt */
+ & > span:nth-child(2) > div {
+ all: unset; /* TODO: Remove after disposing the old style from FloatingButtons.css */
+ display: block;
+
+ margin: 8px 0;
+ border-radius: 4px;
+ background: var(--quick-search-result-content-background);
+ padding: 8px;
+ font-size: .75rem;
+
+ a {
+ background: transparent;
+ color: var(--quick-search-result-highlight-color);
+ text-decoration: underline;
+ }
+
+ p {
+ margin: 0;
+ }
+ }
+
+ }
+ }
}
> .attribute-list {