diff --git a/electron/package.json b/electron/package.json index 103e7ab..151ffd2 100644 --- a/electron/package.json +++ b/electron/package.json @@ -1,6 +1,6 @@ { "name": "hyprcrd", - "version": "2.0.12", + "version": "2.0.13", "description": "hyprcrd — self-hosted card manager", "main": "main.js", "scripts": { diff --git a/public/css/style.css b/public/css/style.css index 440fab2..01f5040 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -109,17 +109,14 @@ select[class*="border-t-accent"] { .prose img { border-radius: var(--ui-radius-image); } .board-card.card-has-cover { border-radius: var(--ui-radius-card); } -/* Modal containers (the inner box of each overlay) */ -#modal > div, -#detail > div, +/* Modal containers (the inner box of each overlay). Only for floating / + * framed modals — the fullscreen overlays (modal, detail, search, tasks, + * calendar, gallery, and the support / plugin overlays) fill the whole + * viewport now and don't want the rounded-corner + overflow:hidden + * combo, which would clip the top color bar and soften the edge-to-edge + * look. */ #settings-overlay > div, -#search > div, -#tasks > div, -#calendar > div, -#gallery > div, -#dialog > div, -#detail > div, -#modal > div { +#dialog > div { border-radius: var(--ui-radius-modal); box-shadow: var(--ui-shadow-modal); overflow: hidden; @@ -402,6 +399,19 @@ body.settings-peeking #settings-overlay > div { pointer-events: auto; } .due-pill { display: inline-flex; align-items: center; gap: 3px; padding: 0 5px; border-radius: 8px; font-size: 9px; line-height: 16px; color: var(--t-bg); font-family: var(--t-font-pixel); } .card-done-badge { position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 24px 24px; border-color: transparent transparent #4ade80 transparent; z-index: 1; } .card-done-badge i { position: absolute; bottom: -22px; right: 1px; font-size: 10px; color: #000; } +/* Rounded-cards variant: the corner triangle gets clipped by the + * rounded border, so toggle to a circle pill that sits comfortably + * inside any radius. JS adds `rounded-cards` on body whenever + * --ui-radius-card is > 0. */ +body.rounded-cards .card-done-badge { + width: 18px; height: 18px; + bottom: 6px; right: 6px; + border: none; + border-radius: 50%; + background: #4ade80; + display: flex; align-items: center; justify-content: center; +} +body.rounded-cards .card-done-badge i { position: static; bottom: auto; right: auto; font-size: 11px; color: #000; font-weight: bold; } .board-card:has(.card-bar-pulse) .card-bar-pulse ~ * .text-t-danger { animation: pulse-glow 2s ease-in-out infinite; } .card-spinner { animation: spin 0.8s linear infinite; display: inline-block; } diff --git a/public/index.php b/public/index.php index 4ea22de..89cbb54 100644 --- a/public/index.php +++ b/public/index.php @@ -1565,6 +1565,11 @@ if (str_starts_with($route, '/api/')) { if (d.animSpeed === 'off') document.body.classList.add('anim-off'); if (d.animSpeed === 'fast') document.body.classList.add('anim-fast'); if (d.animSpeed === 'slow') document.body.classList.add('anim-slow'); + // Rounded-card badge variant: the default "done" corner triangle + // gets clipped by a rounded border, so when the user opts into + // rounded cards we swap it for a circle pill in the BR corner + // (see .rounded-cards .card-done-badge in style.css). + document.body.classList.toggle('rounded-cards', (Number(d.radiusCard) || 0) > 0); }; window.loadDesign = function() { let saved = {}; @@ -2337,7 +2342,7 @@ if (str_starts_with($route, '/api/')) {