@vue-dnd-kit/components/src/templates/Kanban/styles.css

Components for Vue DnD Kit

:root {
  --kanban-radius: 0.5rem;
  --kanban-radius-sm: 0.25rem;
  --kanban-radius-lg: 0.75rem;

  /* Dark mode (default) */
  --kanban-bg: hsl(224, 71%, 4%);
  --kanban-border: hsl(216, 34%, 17%);
  --kanban-input: hsl(216, 34%, 17%);
  --kanban-ring: hsl(216, 34%, 17%);
  --kanban-foreground: hsl(213, 31%, 91%);
  --kanban-primary: hsl(210, 40%, 98%);
  --kanban-primary-foreground: hsl(222.2, 47.4%, 1.2%);
  --kanban-secondary: hsl(222.2, 47.4%, 11.2%);
  --kanban-secondary-foreground: hsl(210, 40%, 98%);
  --kanban-accent: hsl(216, 34%, 17%);
  --kanban-accent-foreground: hsl(210, 40%, 98%);
  --kanban-destructive: hsl(0, 63%, 31%);
  --kanban-destructive-foreground: hsl(210, 40%, 98%);
  --kanban-card: hsl(224, 71%, 4%);
  --kanban-card-foreground: hsl(213, 31%, 91%);
  --kanban-muted: hsl(223, 47%, 11%);
  --kanban-muted-foreground: hsl(215.4, 16.3%, 56.9%);
}

.vue-dnd-kanban {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 1rem;
  list-style: none;
  overflow-x: auto;
  min-height: 500px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: var(--kanban-foreground);
  background-color: var(--kanban-bg);
  scrollbar-width: thin;
  scrollbar-color: var(--kanban-muted-foreground) transparent;
}

.vue-dnd-kanban::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.vue-dnd-kanban::-webkit-scrollbar-track {
  background-color: transparent;
}

.vue-dnd-kanban::-webkit-scrollbar-thumb {
  background-color: var(--kanban-muted-foreground);
  border-radius: 9999px;
}

.vue-dnd-kanban-column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid var(--kanban-border);
  border-radius: var(--kanban-radius);
  padding: 0.75rem;
  min-width: 320px;
  width: 320px;
  background-color: var(--kanban-secondary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.2s ease, transform 0.15s ease, opacity 0.15s ease;
}

.vue-dnd-kanban-column:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.vue-dnd-kanban-column-dragging {
  opacity: 0.8;
  transform: rotate(1deg) scale(1.02);
  z-index: 10;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.vue-dnd-kanban-column-overed {
  background-color: var(--kanban-accent);
  box-shadow: 0 0 0 1px var(--kanban-border);
}

.vue-dnd-kanban-column-title {
  margin: 0;
  font-weight: 500;
  color: var(--kanban-primary);
  font-size: 0.9rem;
  letter-spacing: -0.025em;
  line-height: 1.4;
}

.vue-dnd-kanban ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vue-dnd-kanban-column-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.25rem 0;
  margin: 0;
  list-style: none;
  flex: 1;
  overflow-y: auto;
  height: 100%;
  transition: background-color 0.15s ease;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--kanban-muted-foreground) transparent;
}

.vue-dnd-kanban-column-body::-webkit-scrollbar {
  width: 4px;
}

.vue-dnd-kanban-column-body::-webkit-scrollbar-track {
  background-color: transparent;
}

.vue-dnd-kanban-column-body::-webkit-scrollbar-thumb {
  background-color: var(--kanban-muted-foreground);
  border-radius: 9999px;
}

.vue-dnd-kanban-column-body-overed {
  background-color: var(--kanban-accent);
}

.vue-dnd-kanban-column-overed .vue-dnd-kanban-column-body {
  background-color: var(--kanban-accent);
}

.vue-dnd-kanban-drag-handle {
  cursor: grab;
  color: var(--kanban-muted-foreground);
  width: 16px;
  height: 16px;
  transition: color 0.15s ease;
  opacity: 0.6;
}

.vue-dnd-kanban-drag-handle:hover {
  color: var(--kanban-primary);
  opacity: 1;
}

.vue-dnd-kanban-column-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--kanban-border);
  margin-bottom: 0.5rem;
}

.vue-dnd-kanban-column-footer {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--kanban-border);
  font-size: 0.8125rem;
  color: var(--kanban-muted-foreground);
}

.vue-dnd-kanban-item {
  padding: 0.75rem;
  border: 1px solid var(--kanban-border);
  border-radius: var(--kanban-radius-sm);
  list-style: none;
  background-color: var(--kanban-card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  cursor: grab;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease,
    border-color 0.15s ease;
  position: relative;
  font-size: 0.8125rem;
  letter-spacing: -0.011em;
  line-height: 1.5;
  color: var(--kanban-card-foreground);
}

.vue-dnd-kanban-item:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
  border-color: var(--kanban-border);
}

.vue-dnd-kanban-item-dragging {
  opacity: 0.8;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  transform: rotate(0.5deg) scale(1.01);
  z-index: 20;
  background-color: var(--kanban-card);
  border-color: var(--kanban-ring);
}

/* Item title and content styling */
.vue-dnd-kanban-item-title {
  font-weight: 500;
  margin-bottom: 0.5rem;
  line-height: 1.4;
  color: var(--kanban-primary);
}

.vue-dnd-kanban-item-content {
  font-size: 0.8125rem;
  color: var(--kanban-muted-foreground);
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.vue-dnd-kanban-item-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.5rem;
}

/* Badges styling similar to screenshot */
.vue-dnd-kanban-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  border-radius: 9999px;
  background-color: var(--kanban-secondary);
  color: var(--kanban-secondary-foreground);
  margin-right: 0.25rem;
  letter-spacing: -0.01em;
}

.vue-dnd-kanban-badge-work {
  background-color: hsl(217, 91%, 60%);
  color: hsl(0, 0%, 98%);
}

.vue-dnd-kanban-badge-important {
  background-color: hsl(0, 84%, 60%);
  color: hsl(0, 0%, 98%);
}

.vue-dnd-kanban-badge-personal {
  background-color: hsl(142, 76%, 36%);
  color: hsl(0, 0%, 98%);
}

.vue-dnd-kanban-badge-meeting {
  background-color: hsl(270, 95%, 75%);
  color: hsl(0, 0%, 98%);
}