diff --git a/shaarli-pro/css/style.css b/shaarli-pro/css/style.css index 9a03e31..c32d91d 100644 --- a/shaarli-pro/css/style.css +++ b/shaarli-pro/css/style.css @@ -1450,12 +1450,18 @@ body.view-notes .paging { display: none; } -/* ===== Link Card ===== */ +/* ===== Link Card ===== + Shared layout tokens for the top-strip (checkbox, badges) across the 3 views. + --link-strip-inset : distance from card edges to the strip items + --link-strip-size : size of square badge/checkbox buttons +*/ .link-outer { + --link-strip-inset: 0.75rem; + --link-strip-size: 32px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 0.75rem; - padding: 3.5rem 1.25rem 1.25rem; + padding: calc(var(--link-strip-inset) * 2 + var(--link-strip-size)) 1.25rem 1.25rem; transition: all 0.2s ease; position: relative; overflow: hidden; @@ -1487,15 +1493,15 @@ body.view-notes .paging { pointer-events: none; } -/* Selection checkbox */ +/* Selection checkbox - top-left of the top strip */ .link-select-checkbox { position: absolute; - top: 0.75rem; - left: auto; - right: 9.5rem; + top: var(--link-strip-inset); + left: var(--link-strip-inset); + right: auto; transform: none; - width: 32px; - height: 32px; + width: var(--link-strip-size); + height: var(--link-strip-size); display: flex; align-items: center; justify-content: center; @@ -1507,10 +1513,7 @@ body.view-notes .paging { z-index: 20; } -.view-grid .link-select-checkbox { - right: auto; - left: 0.75rem; -} +/* .view-grid checkbox inherits defaults (top-left of strip) */ [data-theme="dark"] .link-select-checkbox { background: rgba(30, 41, 59, 0.9); @@ -1572,10 +1575,10 @@ body.view-notes .paging { /* Hover actions overlay */ .link-hover-actions { position: absolute; - top: 0.75rem; - right: 2.9rem; + top: var(--link-strip-inset); + right: calc(var(--link-strip-inset) + var(--link-strip-size) + 0.4rem); display: flex; - gap: 0; + gap: 0.25rem; opacity: 0; transition: opacity 0.15s ease; z-index: 20; @@ -1646,7 +1649,6 @@ body.view-notes .paging { display: block; margin-bottom: 0.25rem; line-height: 1.4; - padding-right: 2.5rem; } .link-title:hover { @@ -1669,16 +1671,16 @@ body.view-notes .paging { margin-top: 0.25rem; } -/* Visibility Badge - Top Right Corner */ +/* Visibility Badge - Top Right of the top strip */ .link-visibility-badge { position: absolute; - top: 0.75rem; - right: 0.75rem; + top: var(--link-strip-inset); + right: var(--link-strip-inset); display: flex; align-items: center; justify-content: center; - width: 32px; - height: 32px; + width: var(--link-strip-size); + height: var(--link-strip-size); border-radius: 0.5rem; background: rgba(0, 0, 0, 0.1); z-index: 10; @@ -1687,12 +1689,12 @@ body.view-notes .paging { .link-readlater-badge { position: absolute; - top: 0.75rem; - right: 3.25rem; + top: var(--link-strip-inset); + right: calc(var(--link-strip-inset) + var(--link-strip-size) + 0.4rem); display: inline-flex; align-items: center; justify-content: center; - height: 32px; + height: var(--link-strip-size); padding: 0 0.6rem; border-radius: 0.5rem; background: rgba(239, 68, 68, 0.92); @@ -1895,12 +1897,13 @@ body.view-notes .paging { /* ===== List View Specific ===== */ .view-list .link-outer { + --link-strip-inset: 1.25rem; position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 1rem; - padding: 1.25rem 1.5rem 1.25rem 3.5rem; + padding: 1.25rem 1.5rem 1.25rem calc(var(--link-strip-inset) + var(--link-strip-size) + 0.75rem); background: var(--bg-card); border: 1px solid var(--border); border-radius: 0.75rem; @@ -1914,22 +1917,13 @@ body.view-notes .paging { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } -/* List view - Visibility badge positioning */ -.view-list .link-visibility-badge { - top: 1.25rem; - right: 1.5rem; -} - +/* List view - readlater badge sits just left of the lock via shared token */ .view-list .link-readlater-badge { - top: 1.25rem; - right: 3rem; + right: calc(var(--link-strip-inset) + var(--link-strip-size) + 0.4rem); } -/* List view - selection */ +/* List view - selection checkbox (inherits top/left from token) */ .view-list .link-select-checkbox { - left: 1rem; - top: 1.25rem; - transform: none; background: var(--bg-card); border: 1px solid var(--border); z-index: 10; @@ -3855,8 +3849,9 @@ select:focus { } .view-list .link-outer { + --link-strip-inset: 0.65rem; display: block; - padding: 2.9rem 0.9rem 0.95rem; + padding: calc(var(--link-strip-inset) * 2 + var(--link-strip-size)) 0.9rem 0.95rem; margin-bottom: 0.75rem; } @@ -3871,22 +3866,9 @@ select:focus { -webkit-mask-image: linear-gradient(to bottom, black 35%, transparent 100%); } - .view-list .link-select-checkbox, - .view-list .link-visibility-badge, + /* Mobile list view strip inherits tokens; readlater uses token-based offset */ .view-list .link-readlater-badge { - top: 0.65rem; - } - - .view-list .link-select-checkbox { - left: 0.65rem; - } - - .view-list .link-visibility-badge { - right: 0.65rem; - } - - .view-list .link-readlater-badge { - right: 2.5rem; + right: calc(var(--link-strip-inset) + var(--link-strip-size) + 0.4rem); } .modal-overlay, @@ -4302,8 +4284,7 @@ table { grid-template-columns: minmax(0, 2fr) minmax(0, 1.35fr) minmax(120px, 0.75fr) auto; gap: 0.85rem; align-items: center; - padding: 0.85rem 1rem 0.85rem 2.8rem; - padding-right: 3.2rem; + padding: 0.85rem 2.6rem 0.85rem 2.8rem; } .view-compact .link-header { @@ -4382,7 +4363,7 @@ table { .view-compact .link-select-checkbox { top: 50%; right: auto; - left: 0.85rem; + left: 0.65rem; transform: translateY(-50%); width: 28px; height: 28px; @@ -4390,12 +4371,16 @@ table { } .view-compact .link-visibility-badge { - top: 0.75rem; - right: 0.75rem; + top: 50%; + right: 0.65rem; left: auto; - transform: none; - width: 24px; - height: 24px; + transform: translateY(-50%); + width: 26px; + height: 26px; +} + +.view-compact .link-visibility-badge i { + font-size: 1rem; } @media (max-width: 768px) {