Skip to content

Commit be6adb1

Browse files
committed
feat: Add CSS styling for project indicator icons (#191)
- Add .task-card__project-indicator styles with hover effects - Position icons at right: 44px after recurring indicator - Include smooth transitions and scale effects on hover - Follow existing BEM naming conventions and design patterns
1 parent d2b26ab commit be6adb1

File tree

1 file changed

+30
-0
lines changed

1 file changed

+30
-0
lines changed

styles/task-card-bem.css

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -246,6 +246,36 @@
246246
height: 100%;
247247
}
248248

249+
.tasknotes-plugin .task-card__project-indicator {
250+
position: absolute;
251+
top: 8px;
252+
right: 44px; /* Position after recurring indicator */
253+
width: 16px;
254+
height: 16px;
255+
color: var(--tn-text-muted);
256+
opacity: 0.8;
257+
z-index: 1;
258+
display: flex;
259+
align-items: center;
260+
justify-content: center;
261+
border-radius: var(--radius-s);
262+
padding: 2px;
263+
cursor: pointer;
264+
transition: all var(--tn-transition-fast);
265+
}
266+
267+
.tasknotes-plugin .task-card__project-indicator:hover {
268+
opacity: 1;
269+
color: var(--interactive-accent);
270+
background: var(--background-modifier-hover);
271+
transform: scale(1.1);
272+
}
273+
274+
.tasknotes-plugin .task-card__project-indicator svg {
275+
width: 100%;
276+
height: 100%;
277+
}
278+
249279
.tasknotes-plugin .task-card__context-menu {
250280
position: absolute;
251281
top: 8px;

0 commit comments

Comments
 (0)