Support different colors
Opened this issue · 6 comments
At the moment, the background always seems to be white (unless I m missing something).
It would be nice, if the color could be either set via a parameter or in the plugin configuration (similar to admonition).
In case this is still relevant for someone:
I am using a CSS snippet ("Options" → "Appearance" → "CSS snippets"). Simply put a .css
file with the following content into your snippets folder:
.auto-card-link-container {
border-color: var(--background-modifier-border);
}
.auto-card-link-container:hover {
border-color: var(--background-modifier-border-hover);
}
.auto-card-link-error-container {
background-color: var(--background-modifier-error);
}
.auto-card-link-error-container:hover {
background-color: var(--background-modifier-error-hover);
}
.auto-card-link-card {
color: var(--text-normal);
background-color: var(--background-secondary);
}
.auto-card-link-description {
color: var(--text-muted);
}
This should ensure that card links work in basically all light and dark themes. However, which exact variables you use is up to personal preference (e.g., --background-secondary
vs. --background-primary-alt
).
Gonna share mine here as well:
.auto-card-link-container {
border-width: 2px;
border-color: var(--text-faint);
transition: border-color .3s;
}
.auto-card-link-container:hover {
border-color: var(--text-accent);
}
.auto-card-link-error-container {
background: var(--background-modifier-error);
}
.auto-card-link-card {
background: var(--background-secondary);
color: var(--text-normal);
}
.auto-card-link-card:hover {
text-decoration: none;
}
.auto-card-link-main {
padding: 20px 10px;
}
.auto-card-link-description {
color: var(--text-muted);
}
.auto-card-link-host {
color: var(--text-faint);
}
You may find all available variables here and the original stylesheet here
This really needs to be a core feature of the plugin.
By default the card uses --background-primary-alt
as background, which is set by the active theme and usually is a solid color. What you describe could be done by adding some transparency to the background.
I've noticed that in a canvas card the colors of text, code blocks, and other text elements don't change when setting a theme, so I don't know if the cardlink should.
Try with this snippet
.auto-card-link-card {
background: rgba(0, 0, 0, 0.05);
}
Thanks! I got want I wanted with the following css (also solves #53):
.is-themed .auto-card-link-card {
background-color: rgba(0, 0, 0, 0.2);
.auto-card-link-host,
.auto-card-link-title {
color: rgb(var(--canvas-color));
}
}
.auto-card-link-thumbnail {
width: 33% !important;
min-width: 33% !important;
max-width: 33% !important;
}