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

feat: afficher badge lecture ultérieure dans vue compacte avec positionnement vertical centré (top 50% transform -50% desktop, 0.7rem mobile), style icône bookmark SVG 26×26px rouge (#ef4444) avec shadow, z-index 20 pour overlay, padding-right 4.8rem sur link-title/link-content pour éviter chevauchement badge, et refactoring z-index link-outer enfants (content/actions/meta z-1, hover-actions/checkbox/visibility z-20)

Browse Source
This commit is contained in:
Bruno Charest 2026-04-22 10:26:34 -04:00
parent 3dc4d16929
commit 06526cbac4
2 changed files with 39 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
shaarli-pro/css/custom_views.css
View File

@ -1743,13 +1743,15 @@ body.view-notes .notes-masonry:empty::after {
.link-outer .link-content, .link-outer .link-content,
.link-outer .link-actions, .link-outer .link-actions,
.link-outer .link-hover-actions, .link-outer .link-meta {
.link-outer .link-meta,
.link-outer .link-select-checkbox,
.link-outer .link-visibility-badge {
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
.link-outer .link-hover-actions,
.link-outer .link-select-checkbox,
.link-outer .link-visibility-badge {
z-index: 20;
}
/* Let Background Studio font color affect bookmark tiles too */ /* Let Background Studio font color affect bookmark tiles too */
.link-outer[class*="note-color-"], .link-outer[class*="note-color-"],

38
shaarli-pro/css/style.css
View File

@ -1649,6 +1649,7 @@ body.view-notes .paging {
display: block; display: block;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
line-height: 1.4; line-height: 1.4;
padding-right: 4.8rem;
} }
.link-title:hover { .link-title:hover {
@ -4274,8 +4275,7 @@ table {
} }
.view-compact .link-thumbnail, .view-compact .link-thumbnail,
.view-compact .link-description, .view-compact .link-description {
.view-compact .link-readlater-badge {
display: none !important; display: none !important;
} }
@ -4284,7 +4284,7 @@ table {
grid-template-columns: minmax(0, 2fr) minmax(0, 1.35fr) minmax(120px, 0.75fr) auto; grid-template-columns: minmax(0, 2fr) minmax(0, 1.35fr) minmax(120px, 0.75fr) auto;
gap: 0.85rem; gap: 0.85rem;
align-items: center; align-items: center;
padding: 0.85rem 2.6rem 0.85rem 2.8rem; padding: 0.85rem 4.6rem 0.85rem 2.8rem;
} }
.view-compact .link-header { .view-compact .link-header {
@ -4383,6 +4383,28 @@ table {
font-size: 1rem; font-size: 1rem;
} }
.view-compact .link-readlater-badge {
top: 50%;
right: calc(0.65rem + 26px + 0.4rem);
left: auto;
transform: translateY(-50%);
width: 26px;
height: 26px;
padding: 0;
color: transparent;
font-size: 0;
border-radius: 0.45rem;
background: #ef4444 url('data:image/svg+xml;utf8,<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/></svg>') no-repeat center;
box-shadow: 0 2px 4px rgba(239, 68, 68, 0.35);
display: inline-flex;
align-items: center;
justify-content: center;
}
[data-theme="dark"] .view-compact .link-readlater-badge {
background-color: #f87171;
}
@media (max-width: 768px) { @media (max-width: 768px) {
.view-compact .compact-table-head { .view-compact .compact-table-head {
display: none; display: none;
@ -4401,7 +4423,7 @@ table {
.view-compact .link-content { .view-compact .link-content {
grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
gap: 0.55rem; gap: 0.55rem;
padding: 0.8rem 0.85rem 0.8rem 2.65rem; padding: 0.8rem 4.6rem 0.8rem 2.65rem;
} }
.view-compact .link-title, .view-compact .link-title,
@ -4425,7 +4447,8 @@ table {
} }
.view-compact .link-select-checkbox, .view-compact .link-select-checkbox,
.view-compact .link-visibility-badge { .view-compact .link-visibility-badge,
.view-compact .link-readlater-badge {
top: 0.7rem; top: 0.7rem;
transform: none; transform: none;
} }
@ -4435,6 +4458,11 @@ table {
right: 0.7rem; right: 0.7rem;
} }
.view-compact .link-readlater-badge {
left: auto;
right: calc(0.7rem + 26px + 0.4rem);
}
.view-compact .link-select-checkbox { .view-compact .link-select-checkbox {
right: auto; right: auto;
left: 0.7rem; left: 0.7rem;