Theodor-Springmann-Stiftung/musenalm
1
0
Fork 0
mirror of https://github.com/Theodor-Springmann-Stiftung/musenalm.git synced 2026-02-04 02:25:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

better deletion styles

Browse Source
This commit is contained in:
Simon Martens
2026-01-09 06:05:19 +01:00
parent aff194f400
commit 492d398d27
7 changed files with 166 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
views/transform/form.css
View File

@@ -46,16 +46,109 @@
position: relative;
}
.relation-strike.is-removed::after,
.entries-agent-strike.is-removed::after {
/* Diagonal hatching pattern for deleted relations, items, and pills */
[data-rel-row],
.items-row,
.mss-selected-item-pill.bg-red-100 {
position: relative;
}
[data-rel-row].bg-red-50::before,
.items-row.bg-red-50::before,
.mss-selected-item-pill.bg-red-100::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
border-top: 2px solid #dc2626;
bottom: 0;
background: repeating-linear-gradient(
-45deg,
transparent,
transparent 6px,
rgba(220, 38, 38, 0.2) 6px,
rgba(220, 38, 38, 0.2) 10px
);
border-radius: 0.25rem;
pointer-events: none;
z-index: 1;
}
[data-rel-row] > *,
.items-row > *,
.mss-selected-item-pill.bg-red-100 > * {
position: relative;
z-index: 2;
}
/* Apply hatching to items heading when row is deleted */
.items-row.bg-red-50 .items-summary > div.bg-stone-100 {
position: relative;
background: transparent;
}
.items-row.bg-red-50 .items-summary > div.bg-stone-100::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: repeating-linear-gradient(
-45deg,
#f5f5f4,
#f5f5f4 6px,
rgba(220, 38, 38, 0.25) 6px,
rgba(220, 38, 38, 0.25) 10px
);
border-radius: 0.25rem;
pointer-events: none;
z-index: 0;
}
.items-row.bg-red-50 .items-summary > div.bg-stone-100 > * {
position: relative;
z-index: 1;
}
/* Ensure buttons are above the hatching */
[data-rel-row] button,
.items-row button {
position: relative;
z-index: 10;
}
/* Default styling for delete buttons */
[data-delete-toggle],
.items-remove-button {
@apply text-red-700 transition-colors;
}
[data-delete-toggle]:hover,
.items-remove-button:hover {
@apply text-red-900;
}
/* Style delete/revert button in removed state */
[data-rel-row].bg-red-50 [data-delete-toggle],
.items-row.bg-red-50 .items-remove-button {
@apply bg-red-600 text-white px-2 py-1 rounded-xs transition-colors;
}
[data-rel-row].bg-red-50 [data-delete-toggle]:hover,
.items-row.bg-red-50 .items-remove-button:hover {
@apply bg-orange-500 text-white;
}
/* Reduce padding for items delete button */
.items-row.bg-red-50 .items-remove-button {
@apply px-1.5 py-0.5;
}
/* Ensure all text inside delete buttons is white in removed state */
[data-rel-row].bg-red-50 [data-delete-toggle] *,
.items-row.bg-red-50 .items-remove-button * {
@apply text-white;
}
/* Multi-Select-Role example styles */