Scarriffle/Calendarr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: replace chevron chars with clip-path pointed bar ends in overflow popup

Browse Source 
All-day continuation bars now use CSS clip-path polygon for the tapered
arrow shape; bars stay inset within the popup (no edge bleed). Version v51.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-06-11 20:32:29 +02:00
parent 70aaec3401
commit e6bc7eab9d
2 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/css/app.css
View File

@@ -770,9 +770,9 @@ a { color: var(--primary); text-decoration: none; }
font-size: 12px; font-weight: 500; color: var(--text-1); font-size: 12px; font-weight: 500; color: var(--text-1);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
} }
/* All-day event bars in overflow popup */ /* All-day event bars in overflow popup — pointed ends via clip-path */
.mop-bar { .mop-bar {
position: relative; display: block; display: block;
margin: 2px 8px; padding: 3px 8px; margin: 2px 8px; padding: 3px 8px;
border-radius: 4px; border-radius: 4px;
font-size: 11px; font-weight: 500; color: #fff; font-size: 11px; font-weight: 500; color: #fff;
@@ -780,16 +780,16 @@ a { color: var(--primary); text-decoration: none; }
cursor: pointer; cursor: pointer;
} }
.mop-bar:hover { filter: brightness(1.15); } .mop-bar:hover { filter: brightness(1.15); }
.mop-bar.continues-left { border-radius: 0 4px 4px 0; margin-left: 0; padding-left: 14px; } .mop-bar.continues-left {
.mop-bar.continues-right { border-radius: 4px 0 0 4px; margin-right: 0; padding-right: 14px; } clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
.mop-bar.continues-left.continues-right { border-radius: 0; } border-radius: 0; padding-left: 16px;
.mop-bar.continues-left::before {
content: '‹'; position: absolute; left: 3px; top: 50%;
transform: translateY(-50%); font-size: 12px; opacity: 0.85;
} }
.mop-bar.continues-right::after { .mop-bar.continues-right {
content: '›'; position: absolute; right: 3px; top: 50%; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
transform: translateY(-50%); font-size: 12px; opacity: 0.85; border-radius: 0; padding-right: 16px;
}
.mop-bar.continues-left.continues-right {
clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
} }
/* ── Week / Day Views ───────────────────────────────────── */ /* ── Week / Day Views ───────────────────────────────────── */

2
frontend/js/version.js
View File

@@ -1,2 +1,2 @@
// Increment APP_VERSION with every code change // Increment APP_VERSION with every code change
export const APP_VERSION = 'v50'; export const APP_VERSION = 'v51';