Projets/Shaarli_bm_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ajouter support pour les images de fond et les filtres CSS sur les notes avec des classes spécifiques, incluant des styles pour les éléments .link-outer et .note-card, ainsi que des ajustements pour la gestion des couleurs de texte et de fond dans le studio de personnalisation

Browse Source
This commit is contained in:
bruno
2026-04-21 13:47:30 -04:00
parent 1313f78b93
commit c1b48ad584
2 changed files with 234 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shaarli-pro/css/custom_views.css
+97 -1
View File
@@ -1592,6 +1592,13 @@ body.view-notes .notes-masonry:empty::after {
background-repeat: no-repeat;
}
.link-outer.note-has-bg {
background-image: var(--note-bg-image, none) !important;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.note-modal.note-has-bg {
background-image: var(--note-bg-image, none) !important;
background-size: cover;
@@ -1612,7 +1619,14 @@ body.view-notes .notes-masonry:empty::after {
.note-card.note-filter-grid::after,
.note-card.note-filter-noise::after,
.note-card.note-filter-dots::after,
.note-card.note-filter-stripes::after {
.note-card.note-filter-stripes::after,
.link-outer.note-filter-glass::after,
.link-outer.note-filter-vignette::after,
.link-outer.note-filter-lined::after,
.link-outer.note-filter-grid::after,
.link-outer.note-filter-noise::after,
.link-outer.note-filter-dots::after,
.link-outer.note-filter-stripes::after {
content: "";
position: absolute;
inset: 0;
@@ -1628,11 +1642,21 @@ body.view-notes .notes-masonry:empty::after {
-webkit-backdrop-filter: blur(2px);
}
.link-outer.note-filter-glass::after {
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
/* Filter: Vignette — dark edges */
.note-card.note-filter-vignette::after {
background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.42) 100%);
}
.link-outer.note-filter-vignette::after {
background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.42) 100%);
}
/* Filter: Lined — horizontal ruled lines */
.note-card.note-filter-lined::after {
background-image: repeating-linear-gradient(
@@ -1644,6 +1668,16 @@ body.view-notes .notes-masonry:empty::after {
);
}
.link-outer.note-filter-lined::after {
background-image: repeating-linear-gradient(
to bottom,
transparent 0px,
transparent 27px,
rgba(128, 128, 128, 0.18) 27px,
rgba(128, 128, 128, 0.18) 28px
);
}
/* Filter: Grid — squared grid */
.note-card.note-filter-grid::after {
background-image:
@@ -1651,18 +1685,34 @@ body.view-notes .notes-masonry:empty::after {
repeating-linear-gradient(to bottom, rgba(128, 128, 128, 0.15) 0px, rgba(128, 128, 128, 0.15) 1px, transparent 1px, transparent 28px);
}
.link-outer.note-filter-grid::after {
background-image:
repeating-linear-gradient(to right, rgba(128, 128, 128, 0.15) 0px, rgba(128, 128, 128, 0.15) 1px, transparent 1px, transparent 28px),
repeating-linear-gradient(to bottom, rgba(128, 128, 128, 0.15) 0px, rgba(128, 128, 128, 0.15) 1px, transparent 1px, transparent 28px);
}
/* Filter: Noise — subtle stipple effect */
.note-card.note-filter-noise::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
background-repeat: repeat;
}
.link-outer.note-filter-noise::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
background-repeat: repeat;
}
/* Filter: Dots — dot pattern */
.note-card.note-filter-dots::after {
background-image: radial-gradient(circle, rgba(128, 128, 128, 0.3) 1px, transparent 1px);
background-size: 14px 14px;
}
.link-outer.note-filter-dots::after {
background-image: radial-gradient(circle, rgba(128, 128, 128, 0.3) 1px, transparent 1px);
background-size: 14px 14px;
}
/* Filter: Stripes — diagonal lines */
.note-card.note-filter-stripes::after {
background-image: repeating-linear-gradient(
@@ -1674,9 +1724,55 @@ body.view-notes .notes-masonry:empty::after {
);
}
.link-outer.note-filter-stripes::after {
background-image: repeating-linear-gradient(
-45deg,
transparent 0px,
transparent 8px,
rgba(128, 128, 128, 0.12) 8px,
rgba(128, 128, 128, 0.12) 9px
);
}
/* Keep card inner content above the filter overlay */
.note-card .note-inner,
.note-card .note-hover-actions {
position: relative;
z-index: 1;
}
.link-outer .link-content,
.link-outer .link-actions,
.link-outer .link-hover-actions,
.link-outer .link-meta,
.link-outer .link-select-checkbox,
.link-outer .link-visibility-badge {
position: relative;
z-index: 1;
}
/* Let Background Studio font color affect bookmark tiles too */
.link-outer[class*="note-color-"],
.link-outer[class*="note-color-"] .link-title,
.link-outer[class*="note-color-"] .link-title a,
.link-outer[class*="note-color-"] .link-url,
.link-outer[class*="note-color-"] .link-url a,
.link-outer[class*="note-color-"] .link-description,
.link-outer[class*="note-color-"] .link-meta,
.link-outer[class*="note-color-"] .link-meta a,
.link-outer[class*="note-color-"] .link-actions,
.link-outer[class*="note-color-"] .link-actions a,
.link-outer[class*="note-color-"] .link-actions button,
.view-list .link-outer[class*="note-color-"],
.view-list .link-outer[class*="note-color-"] a,
.view-list .link-outer[class*="note-color-"] button {
color: var(--note-card-fg, var(--tile-text));
}
/* Let Background Studio font color affect note/todo body text */
.note-card[class*="note-color-"] .note-title,
.note-card[class*="note-color-"] .note-body,
.note-card[class*="note-color-"] .todo-checklist-preview-item,
.note-card[class*="note-color-"] .todo-checklist-preview-text {
color: var(--note-card-fg, var(--special-view-strong));
}