vendoo/public/publish-center-ux.css

/* Vendoo Publish Center UX 1.44.0
 * Klare Trennung zwischen Vorbereitung, direktem Publishing und Betriebsansichten.
 */

#publish.ux-publish-ready {
  --ux-publish-list-width: minmax(300px, .72fr);
}

.ux-publish-guide {
  align-items: center;
  background: linear-gradient(135deg, var(--vd-surface-raised), var(--vd-surface-muted));
  border: 1px solid var(--vd-line);
  border-radius: var(--vd-radius-lg);
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(240px, .9fr) minmax(460px, 1.3fr);
  margin-bottom: 16px;
  padding: 18px 20px;
}

.ux-publish-guide-eyebrow {
  color: var(--vd-brand);
  display: block;
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .08em;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.ux-publish-guide-copy h3 {
  color: var(--vd-ink);
  font-size: clamp(18px, 2vw, 23px);
  letter-spacing: -.025em;
  line-height: 1.16;
  margin: 0 0 6px;
}

.ux-publish-guide-copy p {
  color: var(--vd-ink-secondary);
  line-height: 1.5;
  margin: 0;
}

.ux-publish-stages {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ux-publish-stage {
  align-items: center;
  background: var(--vd-surface);
  border: 1px solid var(--vd-line);
  border-radius: var(--vd-radius-md);
  display: grid;
  gap: 9px;
  grid-template-columns: 29px minmax(0, 1fr);
  min-height: 58px;
  padding: 9px 10px;
}

.ux-publish-stage-number {
  align-items: center;
  background: var(--vd-surface-muted);
  border-radius: 50%;
  color: var(--vd-ink-muted);
  display: inline-flex;
  font-size: 11px;
  font-weight: 760;
  height: 29px;
  justify-content: center;
  width: 29px;
}

.ux-publish-stage-copy strong,
.ux-publish-stage-copy small {
  display: block;
}

.ux-publish-stage-copy strong {
  color: var(--vd-ink);
  font-size: 11px;
}

.ux-publish-stage-copy small {
  color: var(--vd-ink-muted);
  font-size: 8.5px;
  line-height: 1.3;
  margin-top: 2px;
}

.ux-publish-stage.is-active {
  background: color-mix(in srgb, var(--vd-brand-soft) 46%, var(--vd-surface));
  border-color: color-mix(in srgb, var(--vd-brand) 42%, var(--vd-line));
}

.ux-publish-stage.is-active .ux-publish-stage-number,
.ux-publish-stage.is-complete .ux-publish-stage-number {
  background: var(--vd-brand);
  color: white;
}

.ux-publish-stage.is-complete {
  border-color: color-mix(in srgb, var(--vd-success) 28%, var(--vd-line));
}

#publish .publish-view-tabs {
  background: transparent;
  border: 0;
  margin-bottom: 14px;
  overflow: visible;
  padding: 0;
}

.ux-publish-view-groups {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(300px, .82fr) minmax(430px, 1.18fr);
}

.ux-publish-view-group {
  background: var(--vd-surface-raised);
  border: 1px solid var(--vd-line);
  border-radius: var(--vd-radius-md);
  min-width: 0;
  padding: 10px;
}

.ux-publish-view-group-label {
  color: var(--vd-ink-muted);
  display: block;
  font-size: 8.5px;
  font-weight: 760;
  letter-spacing: .08em;
  margin: 0 3px 7px;
  text-transform: uppercase;
}

.ux-publish-view-group-items {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ux-publish-view-group[data-publish-view-group="betrieb"] .ux-publish-view-group-items {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#publish .publish-view-tab {
  align-items: center;
  background: var(--vd-surface);
  border: 1px solid transparent;
  border-radius: var(--vd-radius-sm);
  color: var(--vd-ink-secondary);
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-height: 51px;
  padding: 8px 9px;
  text-align: left;
  white-space: normal;
}

#publish .publish-view-tab:hover {
  border-color: var(--vd-line-strong);
  color: var(--vd-ink);
}

#publish .publish-view-tab.active {
  background: var(--vd-brand-soft);
  border-color: color-mix(in srgb, var(--vd-brand) 42%, var(--vd-line));
  color: var(--vd-brand);
  box-shadow: none;
}

.ux-publish-tab-copy {
  min-width: 0;
}

.ux-publish-tab-title,
.ux-publish-tab-help {
  display: block;
}

.ux-publish-tab-title {
  font-size: 10.5px;
  line-height: 1.2;
}

.ux-publish-tab-help {
  color: var(--vd-ink-muted);
  font-size: 7.8px;
  font-weight: 520;
  line-height: 1.3;
  margin-top: 3px;
}

#publish .publish-view-tab.active .ux-publish-tab-help {
  color: color-mix(in srgb, var(--vd-brand) 72%, var(--vd-ink-muted));
}

#publish .publish-tab-count,
#publish .publish-tab-badge {
  flex: 0 0 auto;
  margin: 0;
}

.ux-publish-status-drawer {
  background: var(--vd-surface-raised);
  border: 1px solid var(--vd-line);
  border-radius: var(--vd-radius-md);
  margin-bottom: 14px;
}

.ux-publish-status-summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  list-style: none;
  min-height: 58px;
  padding: 10px 14px;
}

.ux-publish-status-summary::-webkit-details-marker {
  display: none;
}

.ux-publish-status-summary::after {
  color: var(--vd-ink-muted);
  content: '›';
  font-size: 19px;
  order: 3;
  transform: rotate(90deg);
  transition: transform .15s ease;
}

.ux-publish-status-drawer:not([open]) .ux-publish-status-summary::after {
  transform: rotate(0deg);
}

.ux-publish-status-summary-copy {
  min-width: 0;
}

.ux-publish-status-summary-copy strong,
.ux-publish-status-summary-copy small {
  display: block;
}

.ux-publish-status-summary-copy strong {
  color: var(--vd-ink);
  font-size: 11px;
}

.ux-publish-status-summary-copy small {
  color: var(--vd-ink-muted);
  font-size: 8.5px;
  margin-top: 3px;
}

.ux-publish-health {
  background: var(--vd-success-soft);
  border: 1px solid color-mix(in srgb, var(--vd-success) 30%, var(--vd-line));
  border-radius: 999px;
  color: var(--vd-success);
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 720;
  padding: 5px 9px;
}

.ux-publish-health.is-active {
  background: var(--vd-warning-soft);
  border-color: color-mix(in srgb, var(--vd-warning) 34%, var(--vd-line));
  color: var(--vd-warning);
}

.ux-publish-health.is-danger {
  background: var(--vd-danger-soft);
  border-color: color-mix(in srgb, var(--vd-danger) 34%, var(--vd-line));
  color: var(--vd-danger);
}

.ux-publish-status-content {
  border-top: 1px solid var(--vd-line);
  padding: 12px;
}

.ux-publish-status-content .publish-status-rail {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
}

.ux-publish-status-content .publish-rail-section {
  margin: 0;
  min-width: 0;
}

#publish .publish-center-grid {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: var(--ux-publish-list-width) minmax(0, 1.5fr);
}

#publish[data-publish-operational] .publish-center-grid {
  grid-template-columns: minmax(0, 1fr);
}

#publish[data-publish-operational] .publish-list-panel {
  display: none;
}

#publish[data-publish-operational] .publish-workspace-panel {
  min-width: 0;
  width: 100%;
}

#publish .publish-list-panel,
#publish .publish-workspace-panel {
  border-radius: var(--vd-radius-md);
}

#publish .publish-list-panel-head {
  align-items: center;
  gap: 10px;
}

#publish .publish-list-filters {
  gap: 8px;
}

.ux-publish-active-filters {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0 12px 10px;
}

.ux-publish-active-filters.is-empty {
  display: none;
}

.ux-publish-active-filters > strong {
  color: var(--vd-ink-muted);
  font-size: 8px;
  letter-spacing: .06em;
  margin-right: 2px;
  text-transform: uppercase;
}

.ux-publish-filter-chip {
  align-items: center;
  background: var(--vd-surface-muted);
  border: 1px solid var(--vd-line);
  border-radius: 999px;
  color: var(--vd-ink-secondary);
  display: inline-flex;
  font-size: 8.5px;
  gap: 4px;
  min-height: 25px;
  padding: 0 3px 0 8px;
}

.ux-publish-filter-clear {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--vd-ink-muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  height: 19px;
  justify-content: center;
  padding: 0;
  width: 19px;
}

.ux-publish-filter-clear:hover {
  background: var(--vd-surface-raised);
  color: var(--vd-danger);
}

#publish .publish-batch-bar {
  align-items: center;
  background: var(--vd-surface-raised);
  border-top: 1px solid var(--vd-line);
  display: none;
  gap: 7px;
  padding: 9px 10px;
}

#publish[data-has-publish-selection] .publish-batch-bar {
  display: flex;
}

.ux-publish-batch-primary {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: 6px;
}

.ux-publish-batch-more {
  position: relative;
}

.ux-publish-batch-more > summary {
  align-items: center;
  border: 1px solid var(--vd-line);
  border-radius: 7px;
  color: var(--vd-ink-secondary);
  cursor: pointer;
  display: inline-flex;
  font-size: 9px;
  font-weight: 650;
  list-style: none;
  min-height: 31px;
  padding: 0 9px;
}

.ux-publish-batch-more > summary::-webkit-details-marker {
  display: none;
}

.ux-publish-batch-more > summary::after {
  content: '⌄';
  margin-left: 6px;
}

.ux-publish-batch-secondary {
  background: var(--vd-surface-raised);
  border: 1px solid var(--vd-line);
  border-radius: var(--vd-radius-sm);
  box-shadow: var(--vd-shadow-float);
  display: grid;
  gap: 5px;
  min-width: 185px;
  padding: 7px;
  position: absolute;
  right: 0;
  top: calc(100% + 7px);
  z-index: 45;
}

.ux-publish-batch-secondary .vd-button {
  justify-content: flex-start;
  width: 100%;
}

#publish .publish-list-card {
  border-color: transparent;
  min-height: 86px;
}

#publish .publish-list-card:hover,
#publish .publish-list-card:focus-visible {
  border-color: var(--vd-line-strong);
}

#publish .publish-list-card.is-active {
  border-color: color-mix(in srgb, var(--vd-brand) 46%, var(--vd-line));
  box-shadow: inset 3px 0 0 var(--vd-brand);
}

#publish .publish-list-card:focus-visible,
#publish .publish-view-tab:focus-visible,
.ux-publish-status-summary:focus-visible,
.ux-publish-filter-clear:focus-visible,
.ux-publish-batch-more > summary:focus-visible {
  outline: 3px solid var(--vd-focus);
  outline-offset: 2px;
}

#publish[data-publish-mode="smart"] .publish-workspace-panel,
#publish[data-publish-mode="direct"] .publish-workspace-panel {
  min-height: 520px;
}

#publish[data-publish-operational] .publish-operation-header,
#publish[data-publish-operational] .publishing-hardened-header {
  position: sticky;
  top: calc(var(--vd-topbar-height) + 8px);
  z-index: 10;
}

#publish[data-publish-operational] .publishing-toolbar {
  grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(130px, auto));
}

#publish .publish-heading-actions #publish-add-selected-ebay[hidden] {
  display: none;
}

@media (max-width: 1180px) {
  .ux-publish-guide,
  .ux-publish-view-groups {
    grid-template-columns: 1fr;
  }

  #publish .publish-center-grid {
    grid-template-columns: minmax(270px, .7fr) minmax(0, 1.3fr);
  }

  .ux-publish-status-content .publish-status-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ux-publish-status-content .publish-activity-section {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .ux-publish-stages {
    grid-template-columns: 1fr;
  }

  #publish .publish-center-grid {
    grid-template-columns: 1fr;
  }

  #publish:not([data-publish-operational]) .publish-list-panel {
    max-height: 520px;
  }

  .ux-publish-status-content .publish-status-rail {
    grid-template-columns: 1fr;
  }

  .ux-publish-status-content .publish-activity-section {
    grid-column: auto;
  }

  #publish[data-publish-operational] .publishing-toolbar {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .ux-publish-guide {
    padding: 15px;
  }

  .ux-publish-view-group-items,
  .ux-publish-view-group[data-publish-view-group="betrieb"] .ux-publish-view-group-items {
    grid-template-columns: 1fr;
  }

  .ux-publish-status-summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .ux-publish-health {
    margin-left: 0;
  }

  #publish .publish-batch-bar,
  .ux-publish-batch-primary {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .ux-publish-batch-primary .vd-button,
  .ux-publish-batch-more,
  .ux-publish-batch-more > summary {
    justify-content: center;
    width: 100%;
  }

  .ux-publish-batch-secondary {
    left: 0;
    right: auto;
    width: 100%;
  }

  #publish[data-publish-operational] .publishing-toolbar {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ux-publish-status-summary::after {
    transition: none;
  }
}