Link hover content with transparent background and weird font styles

[compadrejunior]

Hi folks,

When I mouse over a link the preview card renders a the title and description with a transparent background, no borders and weird font styles.

Here`s an example?

First time I install the plugin, it works fine. After closing and reopening Logseq the error occurs and then persists.

Thanks in advance.

Regards,

José Compadre Junior

[pengx17]

Can you try using the default theme and see if the style looks fine?

[sagiwei]

I use logseq-awesome-styler plugin, but even switch to Logseq original theme, preview still with a transparent background like @compadrejunior 's snapshot.

[sagiwei]

I use logseq-awesome-styler plugin, but even switch to Logseq original theme, preview still with a transparent background like @compadrejunior 's snapshot.

Finally, I found it caused by logseq-awesome-styler plugin, error occurs whenever this plugin turns on.

[yoyurec]

CSS vars missed

looks like AwStyler loads little longer and script can't get them. What about wrap with setTimeout for ~1 or 2sec? https://github.com/pengx17/logseq-plugin-link-preview/blob/master/src/App.tsx#L12-L38

[yoyurec]

fixed + improved // FIXME: adapt for dynamic theme mode change )

[DutchPete]

I just installed this plug-in and have the Awesome Styler also. The transparent background still occurs, so I am not sure what @yoyurec means by “fixed + improved”.

Edit: turning off Awesome Styler “fixes” the problem.

[Gitbreast]

@DutchPete @sagiwei @compadrejunior @pengx17 Use with Awesome Series:

Found a way to temporally personally locally solve this. I found out it’s a mistake about variables reference cause this, so just use a fixed color and do not use variables. Find your plugin folder, for MacOS is /Users/UserName/.logseq/plugins/logseq-link-preview/dist/assets.(Could use Developer Tools to locate) Edit the .css file, change the lines indicating colors which are using variables, I edit it like this, change the color as you like:

.link_preview__root {
border: 1px solid #c0c0c033;
}
.link_preview__root:hover {
    border: 1px solid rgba(192, 192, 192, .8)
}
.link_preview__card-container {
    background-color: #f1f1f1b3;
}
.link_preview__text-container-title {
    color: #303030;
}
.link_preview__text-container-description {
    color: #303030;
}
.link_preview__text-container-url-container {
    color: #2573a7;
}

Then, for a little glass effect, I add this in custom.css:

/* link preview fix */
#logseq-link-preview_lsp_main {
  backdrop-filter: blur(3px) ; 
}

[DutchPete]

@Gitbreast thanks a lot.