Frontend annoyances

This commit is contained in:
Simon Martens
2026-01-09 08:28:16 +01:00
parent 492d398d27
commit a08a7e5710
9 changed files with 717 additions and 473 deletions

View File

@@ -46,6 +46,57 @@
position: relative;
}
/* Relations editor abstracted classes */
.rel-section-container {
@apply flex flex-col gap-2 mt-1 px-2;
}
.rel-row {
@apply border border-stone-200 rounded-xs bg-stone-50 px-3 py-2;
}
.rel-grid {
@apply grid grid-cols-[1fr_14rem_5.5rem_7rem] gap-3 items-center;
}
.rel-name-col {
@apply flex flex-col min-w-0;
}
.rel-link {
@apply text-base text-gray-800 no-underline hover:text-slate-900 truncate;
}
.rel-detail {
@apply text-xs text-gray-600 truncate;
}
.rel-new-badge {
@apply text-sm text-gray-600 ml-1;
}
.rel-uncertain-container {
@apply flex items-center gap-2;
}
.rel-uncertain-label {
@apply text-sm text-gray-700;
}
.rel-button-container {
@apply flex justify-end;
}
.rel-empty-text {
@apply px-1.5 italic text-gray-600;
}
/* Disabled form controls in deleted relations */
[data-rel-row].bg-red-50 select:disabled,
[data-rel-row].bg-red-50 input[type="checkbox"]:disabled:not([data-delete-toggle]) {
@apply opacity-50 cursor-not-allowed;
}
/* Diagonal hatching pattern for deleted relations, items, and pills */
[data-rel-row],
.items-row,
@@ -62,13 +113,7 @@
left: 0;
right: 0;
bottom: 0;
background: repeating-linear-gradient(
-45deg,
transparent,
transparent 6px,
rgba(220, 38, 38, 0.2) 6px,
rgba(220, 38, 38, 0.2) 10px
);
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;
@@ -94,13 +139,7 @@
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
);
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;
@@ -345,7 +384,7 @@
}
.mss-toggle-button {
@apply text-gray-700 hover:text-gray-900 font-semibold text-lg px-2 py-0.5 rounded-xs border border-transparent bg-transparent whitespace-nowrap leading-none;
@apply text-gray-700 hover:text-gray-900 font-semibold text-lg py-0.5 rounded-xs border border-transparent bg-transparent whitespace-nowrap leading-none;
}
.mss-options-list {