- {{ contentItemsStore.items.find(item => item.id === entry.id)?.currentRevisionLabel }}
- {{ entry.title }}
- {{ contentItemsStore.items.find(item => item.id === entry.id)?.publicationTargets }}
-
-
{{ contentItemsStore.items.find(item => item.id === entry.id)?.status }}
-
{{ formatEntryDate(entry.scheduledAt) }}
+
+
+ {{ entry.campaignLabel }}
+
+
+
+
+
+ {{ tag }}
+
+
+
+
+ {{ entry.title }}
+ {{ entry.preview }}
+
+
+
+
+
+ {{ entry.timeLabel }}
+
+
+
+
+
+
+
@@ -897,6 +1222,44 @@
+
+
+
+
+ | {{ t('contentItems.table.content') }} |
+ {{ t('contentItems.table.status') }} |
+ {{ t('contentItems.table.channels') }} |
+ {{ t('contentItems.table.revision') }} |
+ {{ t('contentItems.table.dueDate') }} |
+
+
+
+
+ |
+
+ {{ item.title }}
+
+ |
+
+ {{ item.status }}
+ |
+ {{ item.publicationTargets }} |
+ {{ item.currentRevisionLabel }} |
+ {{ formatDueDate(item.dueDate) }} |
+
+
+
+
+
.page-shell {
- @apply mx-auto flex w-full max-w-7xl flex-col gap-6 px-5 py-8 md:px-8;
- }
-
- .header {
- @apply flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between;
- }
-
- .header h1 {
- @apply text-4xl font-black;
- color: #172033;
+ @apply flex w-full flex-col gap-4 px-4 py-5 md:px-6;
}
.item-card span,
@@ -1076,11 +1430,7 @@
color: #526178;
}
- .header-actions {
- @apply flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-end;
- }
-
- .view-toggle {
+ .range-selector {
@apply inline-flex w-fit rounded-full border p-1;
background: #f8fafc;
border-color: rgba(23, 32, 51, 0.1);
@@ -1121,7 +1471,27 @@
}
.calendar-selector-title {
- @apply min-w-0 flex-1 truncate;
+ @apply min-w-0 flex-1 truncate text-left;
+ }
+
+ .source-color-control {
+ @apply relative inline-flex shrink-0 items-center;
+ }
+
+ .source-swatch-button {
+ @apply inline-flex h-7 w-7 items-center justify-center rounded-full transition;
+ }
+
+ .source-swatch-button:not(:disabled):hover {
+ background: rgba(23, 32, 51, 0.06);
+ }
+
+ .source-swatch-button:disabled {
+ cursor: default;
+ }
+
+ .source-color-palette {
+ @apply absolute left-0 top-[calc(100%+0.5rem)] z-40;
}
.calendar-selector-empty {
@@ -1199,20 +1569,22 @@
}
.calendar-card {
- @apply rounded-[1.75rem] border p-4 md:p-5;
- background: rgba(255, 255, 255, 0.94);
- border-color: rgba(23, 32, 51, 0.08);
- box-shadow: 0 18px 40px rgba(23, 32, 51, 0.06);
+ @apply flex flex-col;
+ background: #ffffff;
}
.calendar-toolbar {
- @apply mb-4 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between;
+ @apply mb-3 flex flex-col gap-2 lg:flex-row lg:items-center;
}
.calendar-nav {
@apply flex items-center gap-2;
}
+ .calendar-toolbar > .calendar-selector {
+ @apply lg:ml-auto;
+ }
+
.calendar-period {
@apply min-w-0 px-2 text-base font-bold md:text-lg;
color: #172033;
@@ -1223,12 +1595,12 @@
}
.calendar-grid {
- @apply grid gap-3;
+ @apply grid gap-2;
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.calendar-grid-head {
- @apply mb-3;
+ @apply mb-2;
}
.weekday-label {
@@ -1237,8 +1609,7 @@
}
.calendar-day {
- @apply min-h-[8.5rem] rounded-[1.25rem] border p-3;
- background: linear-gradient(180deg, rgba(255, 253, 248, 0.8) 0%, rgba(255, 255, 255, 0.96) 100%);
+ @apply min-h-[8rem] overflow-visible rounded-[1rem] border p-2.5;
border-color: rgba(23, 32, 51, 0.08);
}
@@ -1256,7 +1627,7 @@
}
.day-number {
- @apply mb-3 text-sm font-bold;
+ @apply mb-2 text-sm font-bold;
color: #172033;
}
@@ -1265,6 +1636,10 @@
@apply flex flex-col gap-2;
}
+ .day-entries {
+ @apply relative;
+ }
+
.calendar-entry {
@apply flex flex-col gap-0.5 rounded-[1rem] border px-3 py-2 no-underline transition;
}
@@ -1290,11 +1665,94 @@
color: #526178;
}
+ .content-calendar-entry,
+ .content-item-card {
+ @apply gap-2;
+ }
+
+ .content-entry-top-row,
+ .hashtag-row,
+ .content-meta-row,
+ .content-channel-row,
+ .channel-icons,
+ .planned-time {
+ @apply flex items-center;
+ }
+
+ .content-entry-top-row,
+ .hashtag-row {
+ @apply flex-wrap gap-1.5;
+ }
+
+ .campaign-chip,
+ .hashtag-chip {
+ @apply inline-flex max-w-full items-center truncate rounded-full px-2 py-0.5 text-[0.68rem] font-bold leading-5;
+ }
+
+ .campaign-chip {
+ background: rgba(23, 32, 51, 0.08);
+ color: #172033;
+ }
+
+ .hashtag-chip {
+ background: rgba(15, 118, 110, 0.1);
+ color: #0f766e;
+ }
+
+ .content-preview {
+ @apply flex min-w-0 flex-col gap-0.5;
+ }
+
+ .content-preview strong,
+ .content-preview span {
+ @apply min-w-0 overflow-hidden text-ellipsis;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ }
+
+ .content-preview strong {
+ -webkit-line-clamp: 1;
+ }
+
+ .content-preview span {
+ @apply text-xs leading-5;
+ -webkit-line-clamp: 2;
+ color: #526178;
+ }
+
+ .content-meta-row {
+ @apply gap-2;
+ }
+
+ .content-channel-row {
+ @apply justify-end;
+ }
+
+ .planned-time {
+ @apply gap-1 text-[0.7rem] font-bold uppercase;
+ color: #0f766e;
+ }
+
+ .planned-time i,
+ .channel-icons i {
+ @apply text-sm;
+ }
+
+ .channel-icons {
+ @apply justify-end gap-1;
+ color: #526178;
+ }
+
.entry-time {
@apply text-[0.7rem] font-bold uppercase tracking-[0.12em];
color: #0f766e;
}
+ .calendar-event-chip {
+ @apply block min-w-0 truncate text-[0.68rem] font-bold leading-5;
+ color: var(--calendar-source-color, #64748b);
+ }
+
.entry-more,
.day-empty {
@apply px-1 text-xs font-semibold;
@@ -1334,13 +1792,14 @@
}
.calendar-context-entry {
- border-left-width: 4px;
- background: #ffffff;
+ @apply relative z-10 min-h-7 flex-row items-center overflow-hidden rounded-full px-2 py-1;
+ max-width: none;
+ background: var(--calendar-source-tint, rgba(100, 116, 139, 0.1));
opacity: 0.86;
}
- .calendar-context-entry strong {
- color: #334155;
+ .calendar-context-entry:hover {
+ opacity: 1;
}
.calendar-upcoming-card {
@@ -1446,10 +1905,52 @@
color: #172033;
}
+ .version-chip.calendar-event-chip {
+ background: var(--calendar-source-tint, rgba(100, 116, 139, 0.1));
+ color: var(--calendar-source-color, #64748b);
+ }
+
.status-row {
@apply flex items-center justify-between gap-3;
}
+ .content-table-shell {
+ @apply overflow-x-auto rounded-[1.5rem] border;
+ background: rgba(255, 255, 255, 0.94);
+ border-color: rgba(23, 32, 51, 0.08);
+ }
+
+ .content-table {
+ @apply w-full min-w-[52rem] border-collapse text-left text-sm;
+ color: #526178;
+ }
+
+ .content-table th {
+ @apply px-5 py-4 text-xs font-black uppercase tracking-[0.14em];
+ background: #f8fafc;
+ color: #172033;
+ }
+
+ .content-table td {
+ @apply border-t px-5 py-4 align-middle;
+ border-color: rgba(23, 32, 51, 0.08);
+ }
+
+ .content-table-title {
+ @apply font-bold no-underline;
+ color: #172033;
+ }
+
+ .content-table-title:hover {
+ color: #0f766e;
+ }
+
+ .table-status {
+ @apply inline-flex rounded-full px-3 py-1 text-xs font-bold;
+ background: rgba(23, 32, 51, 0.08);
+ color: #172033;
+ }
+
@media (max-width: 960px) {
.calendar-grid {
gap: 0.5rem;
diff --git a/frontend/src/features/feedback/components/FeedbackFloatingButton.vue b/frontend/src/features/feedback/components/FeedbackFloatingButton.vue
index baf3a18..af172cc 100644
--- a/frontend/src/features/feedback/components/FeedbackFloatingButton.vue
+++ b/frontend/src/features/feedback/components/FeedbackFloatingButton.vue
@@ -35,13 +35,20 @@
.feedback-entry-button {
@apply flex h-12 items-center gap-2 rounded-full border px-4 text-sm font-bold shadow-lg transition-colors;
- background: #172033;
- border-color: rgba(255, 255, 255, 0.4);
- color: #fffaf2;
+ background: var(--socialize-accent-strong);
+ border-color: rgba(255, 255, 255, 0.55);
+ color: #ffffff;
+ box-shadow: 0 16px 34px var(--socialize-accent-strong-shadow);
}
.feedback-entry-button:hover {
- background: #0f766e;
+ background: color-mix(in srgb, var(--socialize-accent-strong) 82%, var(--socialize-primary));
+ box-shadow: 0 18px 38px var(--socialize-accent-strong-shadow);
+ }
+
+ .feedback-entry-button:focus-visible {
+ outline: 3px solid color-mix(in srgb, var(--socialize-accent) 35%, transparent);
+ outline-offset: 3px;
}
.feedback-entry-button span {
diff --git a/frontend/src/layouts/main/AppBar.vue b/frontend/src/layouts/main/AppBar.vue
index f17105a..55931c7 100644
--- a/frontend/src/layouts/main/AppBar.vue
+++ b/frontend/src/layouts/main/AppBar.vue
@@ -1,18 +1,78 @@