Custom CSS (works great)

[h-listov-saabye]

Well, not an issue at all.... I recently started a linkding instance but didn't really like the overall look and feel of the list of bookmarks. Too condenced.. But the new Custom CSS introduced in v1.25.0 allowed me to make a few adjustments: Custom CSS: (for the dark theme - adjusted for v1.26.0)

li[ld-bookmark-item] .title img + a {
  padding-left: 30px;
}
li[ld-bookmark-item] .title {
  font-size: 0.9rem;
  line-height: 1.1;
}
li[ld-bookmark-item] .title img {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  margin-top: 1px;
  margin-right: 4px;
}
li[ld-bookmark-item] {
  padding: 7px 7px 7px 7px;
  border-radius: 10px/10px;
  background-color: #202331;
}

Thanks :-) Regards Henrik

[sissbruecker]

Cool! v.1.26.0 has some minor breaking changes, but it looks like you figured that out. Just noting that there are now also three CSS variables for controlling the overall font size in the app: https://github.com/sissbruecker/linkding/blob/master/docs/how-to.md#increase-the-font-size.

[grand-lotus-iroh]

Thanks!

I've added your favicon tweak to my CSS:

ul.bookmark-list .notes {
    display: block;
    margin: 0;
}
input.form-input {
    text-align: center;
}

li[ld-bookmark-item] .actions,
li[ld-bookmark-item] .description span:not(:has(a)) {
    opacity: 0.15;
}

li[ld-bookmark-item] .description {
    color: #161822;
}

li[ld-bookmark-item] .title a {
    border: 1px solid #161822;
    padding: .2rem 0;
    overflow: visible;
}

li[ld-bookmark-item] .title a:hover {
    background: #202331;
    text-decoration: none;
}

li[ld-bookmark-item] .title img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

li[ld-bookmark-item]:hover .actions,
li[ld-bookmark-item]:hover .description span:not(:first-child),
li[ld-bookmark-item]:hover .description span:not(:has(a)) {
    opacity: 1;
}

li[ld-bookmark-item]:hover .description {
    color: inherit;
}

span.confirmation .btn.btn-link {
    color: #CC3333 !important;
}

textarea#id_custom_css {
    display: block;
    min-height: 500px;
}

[sissbruecker]

Let me close this for now, people can still find the issue through the search function to discover the CSS customizations.