wekan/client/components/cards/minicard.css

.minicard-wrapper {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 1.2vh;
}
.minicard-wrapper.placeholder {
  background: #ccc;
  border-radius: 1.2vw;
}
.minicard-wrapper.ui-sortable-helper {
  cursor: grabbing;
  transform: rotate(4deg);
  display: block !important;
}
.minicard-wrapper.ui-sortable-helper .and-n-other {
  width: 100%;
  height: 2.5vh;
  padding: 0.5vh;
  background-color: #f2f2f2;
  text-align: center;
  border-radius: 0.4vw;
}
.minicard-wrapper.ui-sortable-helper .multi-selection-checkbox {
  display: none;
}
.minicard-wrapper .multi-selection-checkbox + .minicard {
  margin-left: 1vw;
}
@media only screen {
  .minicard {
    padding: 0.8vh 1vw 0.3vh;
    position: relative;
    flex: 1;
    flex-wrap: wrap;
    background-color: #fff;
    min-height: 2.5vh;
    box-shadow: 0 0.2vh 0.3vh rgba(0,0,0,0.15);
    border-radius: 0.3vw;
    color: #4d4d4d;
    overflow: hidden;
    transition: transform 0.2s, border-radius 0.2s;
  }
}
.minicard-details-menu-with-handle {
  float: right;
  font-size: clamp(14px, 3vw, 18px);
  padding-right: 4vw;
  padding-left: 0.7vw;
}
.minicard-details-menu {
  float: right;
  font-size: clamp(14px, 3vw, 18px);
  padding-left: 0.7vw;
}
@media print {
  .minicard-details-menu,
  .minicard-details-menu-with-handle {
    display: none;
  }
}
.minicard.linked-board .linked-icon,
.minicard.linked-card .linked-icon {
  display: inline-block;
  margin-right: 1.5vw;
  vertical-align: baseline;
  font-size: 0.9em;
}
.minicard.linked-board .linked-archived,
.minicard.linked-card .linked-archived {
  color: #937760;
}
.is-selected .minicard {
  transform: translateX(1.5vw);
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  z-index: 25;
  box-shadow: -0.3vw 0.2vh 0.3vh rgba(0,0,0,0.2);
}
.minicard:hover:not(.minicard-composer),
.is-selected .minicard,
.draggable-hover-card .minicard {
  background: #f7f7f7;
}
.draggable-hover-card .minicard {
  background: #ededed;
}
.minicard .minicard-cover {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 20vh;
  user-select: none;
  margin: 0.8vh -1vw 0.8vh -1vw;
  border-radius: top 0.3vw;
}
.minicard .minicard-labels {
  float: none;
}
.minicard .minicard-labels .minicard-label {
  width: clamp(12px, 1.5vw, 16px);
  height: clamp(12px, 1.5vw, 16px);
  border-radius: 0.3vw;
  margin-right: 0.4vw;
  margin-bottom: 0.4vh;
}
.minicard .minicard-labels-no-text {
  display: flex;
  flex-wrap: wrap;
}
.minicard .minicard-custom-fields {
  display: block;
}
.minicard .minicard-custom-field {
  display: flex;
}
.minicard .minicard-custom-field-item {
  flex-grow: 1;
  display: block;
  word-wrap: break-word;
  max-width: 13vw;
  margin-right: 0.5vw;
}
.minicard .minicard-custom-field-item-fullwidth {
  flex-grow: 1;
  display: block;
  word-wrap: break-word;
  max-width: 100%;
  margin-right: 0.5vw;
}
.minicard .handle {
  width: clamp(20px, 2.5vw, 28px);
  height: clamp(20px, 2.5vw, 28px);
  position: absolute;
  right: 0.7vw;
  top: 0.7vh;
  display: none;
}
@media only screen {
  .minicard .handle {
    display: block;
  }
}
.minicard .handle .fa-arrows {
  font-size: clamp(16px, 3vw, 20px);
  color: #ccc;
}
.minicard .minicard-title .card-number {
  color: #b3b3b3;
  display: inline-block;
  margin-right: 0.7vw;
}
@media only screen {
  .minicard .minicard-title p:last-child {
    margin-bottom: 0;
  }
  .minicard .minicard-title .viewer {
    display: block;
    word-wrap: break-word;
  }
}
.minicard .dates {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.minicard .date {
  margin-right: 0.4vw;
}

/* Unicode icons for minicard dates - matching cardDate.css */
.minicard .card-date.end-date time::before {
  content: "🏁"; /* Finish flag - represents end/completion */
}
.minicard .card-date.due-date time::before {
  content: "⏰"; /* Alarm clock - represents due/deadline */
}
.minicard .card-date.start-date time::before {
  content: "🚀"; /* Rocket - represents start/launch */
}
.minicard .card-date.received-date time::before {
  content: "📥"; /* Inbox tray - represents received/incoming */
}

.minicard .card-date time::before {
  font-size: inherit;
  margin-right: 0.3em;
  display: inline-block;
}

/* Date type specific colors for minicards - matching cardDate.css */
.minicard .card-date.received-date {
  background-color: #dbdbdb; /* Grey for received - same as base card-date */
}

.minicard .card-date.received-date:hover,
.minicard .card-date.received-date.is-active {
  background-color: #b3b3b3;
}

.minicard .card-date.start-date {
  background-color: #90ee90; /* Light green for start */
  color: #000; /* Black text for start */
}

.minicard .card-date.start-date:hover,
.minicard .card-date.start-date.is-active {
  background-color: #7dd87d;
}

.minicard .card-date.due-date {
  background-color: #ffd700; /* Yellow for due */
  color: #000; /* Black text for due */
}

.minicard .card-date.due-date:hover,
.minicard .card-date.due-date.is-active {
  background-color: #e6c200;
}

.minicard .card-date.end-date {
  background-color: #ffb3b3; /* Light red for end */
  color: #000; /* Black text for end */
}

.minicard .card-date.end-date:hover,
.minicard .card-date.end-date.is-active {
  background-color: #ff9999;
}

/* Date status colors for minicards - matching cardDate.css */
.minicard .card-date.overdue {
  background-color: #ff4444 !important; /* Red for overdue */
  color: #fff !important;
}
.minicard .card-date.overdue:hover,
.minicard .card-date.overdue.is-active {
  background-color: #cc3333 !important;
}

.minicard .card-date.due-soon {
  background-color: #ffaa00 !important; /* Amber for due soon */
  color: #000 !important;
}
.minicard .card-date.due-soon:hover,
.minicard .card-date.due-soon.is-active {
  background-color: #e69900 !important;
}

.minicard .card-date.not-due {
  /* No special background - uses default date type colors */
}

.minicard .card-date.current {
  background-color: #5ba639 !important; /* Green for current/active */
  color: #fff !important;
}
.minicard .card-date.current:hover,
.minicard .card-date.current.is-active {
  background-color: #46802c !important;
}

.minicard .card-date.completed {
  background-color: #90ee90 !important; /* Light green for completed */
  color: #000 !important;
}
.minicard .card-date.completed:hover,
.minicard .card-date.completed.is-active {
  background-color: #7dd87d !important;
}

.minicard .card-date.completed-early {
  background-color: #4caf50 !important; /* Green for completed early */
  color: #fff !important;
}
.minicard .card-date.completed-early:hover,
.minicard .card-date.completed-early.is-active {
  background-color: #45a049 !important;
}

.minicard .card-date.completed-late {
  background-color: #ff9800 !important; /* Orange for completed late */
  color: #fff !important;
}
.minicard .card-date.completed-late:hover,
.minicard .card-date.completed-late.is-active {
  background-color: #f57c00 !important;
}

.minicard .card-date.completed-on-time {
  background-color: #2196f3 !important; /* Blue for completed on time */
  color: #fff !important;
}
.minicard .card-date.completed-on-time:hover,
.minicard .card-date.completed-on-time.is-active {
  background-color: #1976d2 !important;
}

/* Font Awesome icons in minicard dates */
.minicard .card-date i.fa {
  margin-right: 0.3vw;
  font-size: 0.9em;
  vertical-align: middle;
}

/* Font Awesome icons in minicard spent time */
.minicard .card-time i.fa {
  margin-right: 0.3vw;
  font-size: 0.9em;
  vertical-align: middle;
}
.minicard .badges {
  float: left;
  margin-top: 1vh;
  color: #808080;
}
.minicard .badges:empty {
  display: none;
}
.minicard .badges .badge {
  float: left;
  margin-right: 1.5vw;
  margin-bottom: 0.4vh;
  font-size: 0.9em;
}
.minicard .badges .badge.is-finished {
  background: #3cb500;
  padding: 0 0.4vw;
  border-radius: 0.4vw;
  color: #fff;
}
.minicard .badges .badge:last-of-type {
  margin-right: 0;
}
.minicard .badges .badge .badge-icon,
.minicard .badges .badge .badge-text {
  vertical-align: middle;
}
.minicard .badges .badge .badge-icon.badge-comment,
.minicard .badges .badge .badge-text.badge-comment {
  margin-bottom: 0.1rem;
}
.minicard .badges .badge .badge-text {
  font-size: 0.9em;
  padding-left: 0.3vw;
  line-height: 1.2;
}
.minicard .badges .badge .check-list-text {
  padding-left: 0px;
  line-height: 1.1;
}
.minicard .minicard-members,
.minicard .minicard-assignees,
.minicard .minicard-creator {
  float: right;
  margin-left: 0.7vw;
  margin-bottom: 0.5vh;
}
.minicard .minicard-members .member,
.minicard .minicard-assignees .member,
.minicard .minicard-creator .member {
  float: right;
  border-radius: 50%;
  height: clamp(24px, 3.5vw, 32px);
  width: clamp(24px, 3.5vw, 32px);
  margin-bottom: 0.5vh;
}
.minicard .minicard-members .assignee,
.minicard .minicard-assignees .assignee,
.minicard .minicard-creator .assignee {
  float: right;
  border-radius: 50%;
  height: clamp(24px, 3.5vw, 32px);
  width: clamp(24px, 3.5vw, 32px);
}
.minicard .minicard-members + .badges,
.minicard .minicard-assignees + .badges,
.minicard .minicard-creator + .badges {
  margin-top: 0.7vh;
}
.minicard .minicard-assignees {
  border-bottom: 1px solid #f00;
}
.minicard .minicard-creator {
  border-bottom: 1px solid #008000;
}
.minicard .minicard-members:empty,
.minicard .minicard-assignees:empty {
  display: none;
}
.minicard .minicard-description {
  padding: 0.8vh 0 0 1vw;
  color: #000;
  background-color: #eee;
  width: 100%;
  margin-bottom: 0.3vh;
  margin-left: -0.5vw;
  border-radius: 0.4vw;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.minicard.minicard-composer {
  margin-bottom: 1.3vh;
}
.minicard.minicard-composer textarea.minicard-composer-textarea,
.minicard.minicard-composer textarea.minicard-composer-textarea:focus {
  resize: none;
  background: none;
  border: none;
  box-shadow: none;
  height: auto;
  margin: 0;
  padding: 0;
  max-height: 22vh;
  min-height: 5vh;
  margin-bottom: 2.5vh;
  overflow-y: auto;
}
.parent-prefix {
  color: #b3b3b3;
  font-size: 0.9em;
}
.parent-subtext {
  color: #b3b3b3;
  font-size: 0.9em;
}
@media screen and (max-width: 800px) {
  .is-selected .minicard {
    transform: translateX(0px);
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    z-index: 15;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  }
}
/* https://github.com/wekan/wekan/issues/4254#issuecomment-1037192960 */
.minicard-green {
  background-color: #3cb500 !important;
  color: #fff !important;
}
.minicard-green:hover:not(.minicard-composer),
.is-selected .minicard-green,
.draggable-hover-card .minicard-green {
  background: #3ab000;
}
.draggable-hover-card .minicard-green {
  background: #38a800;
}
.minicard-yellow {
  background-color: #fad900 !important;
}
.minicard-yellow:hover:not(.minicard-composer),
.is-selected .minicard-yellow,
.draggable-hover-card .minicard-yellow {
  background: #f3d200;
}
.draggable-hover-card .minicard-yellow {
  background: #e9ca00;
}
.minicard-orange {
  background-color: #ff9f19 !important;
}
.minicard-orange:hover:not(.minicard-composer),
.is-selected .minicard-orange,
.draggable-hover-card .minicard-orange {
  background: #ff9b11;
}
.draggable-hover-card .minicard-orange {
  background: #ff9705;
}
.minicard-red {
  background-color: #eb4646 !important;
  color: #fff !important;
}
.minicard-red:hover:not(.minicard-composer),
.is-selected .minicard-red,
.draggable-hover-card .minicard-red {
  background: #ea3e3e;
}
.draggable-hover-card .minicard-red {
  background: #e93333;
}
.minicard-purple {
  background-color: #a632db !important;
  color: #fff !important;
}
.minicard-purple:hover:not(.minicard-composer),
.is-selected .minicard-purple,
.draggable-hover-card .minicard-purple {
  background: #a32bda;
}
.draggable-hover-card .minicard-purple {
  background: #9e25d5;
}
.minicard-blue {
  background-color: #0079bf !important;
  color: #fff !important;
}
.minicard-blue:hover:not(.minicard-composer),
.is-selected .minicard-blue,
.draggable-hover-card .minicard-blue {
  background: #0075b9;
}
.draggable-hover-card .minicard-blue {
  background: #0071b2;
}
.minicard-pink {
  background-color: #ff78cb !important;
}
.minicard-pink:hover:not(.minicard-composer),
.is-selected .minicard-pink,
.draggable-hover-card .minicard-pink {
  background: #ff6dc7;
}
.draggable-hover-card .minicard-pink {
  background: #ff5ec1;
}
.minicard-sky {
  background-color: #00c2e0 !important;
  color: #fff !important;
}
.minicard-sky:hover:not(.minicard-composer),
.is-selected .minicard-sky,
.draggable-hover-card .minicard-sky {
  background: #00bcd9;
}
.draggable-hover-card .minicard-sky {
  background: #00b4d0;
}
.minicard-black {
  background-color: #4d4d4d !important;
  color: #fff !important;
}
.minicard-black:hover:not(.minicard-composer),
.is-selected .minicard-black,
.draggable-hover-card .minicard-black {
  background: #4b4b4b;
}
.draggable-hover-card .minicard-black {
  background: #484848;
}
.minicard-lime {
  background-color: #51e898 !important;
}
.minicard-lime:hover:not(.minicard-composer),
.is-selected .minicard-lime,
.draggable-hover-card .minicard-lime {
  background: #49e793;
}
.draggable-hover-card .minicard-lime {
  background: #3ee58d;
}
.minicard-silver {
  background-color: #c0c0c0 !important;
}
.minicard-silver:hover:not(.minicard-composer),
.is-selected .minicard-silver,
.draggable-hover-card .minicard-silver {
  background: #bababa;
}
.draggable-hover-card .minicard-silver {
  background: #b3b3b3;
}
.minicard-peachpuff {
  background-color: #ffdab9 !important;
}
.minicard-peachpuff:hover:not(.minicard-composer),
.is-selected .minicard-peachpuff,
.draggable-hover-card .minicard-peachpuff {
  background: #ffd3ac;
}
.draggable-hover-card .minicard-peachpuff {
  background: #ffca9a;
}
.minicard-crimson {
  background-color: #dc143c !important;
  color: #fff !important;
}
.minicard-crimson:hover:not(.minicard-composer),
.is-selected .minicard-crimson,
.draggable-hover-card .minicard-crimson {
  background: #d5133a;
}
.draggable-hover-card .minicard-crimson {
  background: #cd1338;
}
.minicard-plum {
  background-color: #dda0dd !important;
}
.minicard-plum:hover:not(.minicard-composer),
.is-selected .minicard-plum,
.draggable-hover-card .minicard-plum {
  background: #da98da;
}
.draggable-hover-card .minicard-plum {
  background: #d68cd6;
}
.minicard-darkgreen {
  background-color: #006400 !important;
  color: #fff !important;
}
.minicard-darkgreen:hover:not(.minicard-composer),
.is-selected .minicard-darkgreen,
.draggable-hover-card .minicard-darkgreen {
  background: #006100;
}
.draggable-hover-card .minicard-darkgreen {
  background: #005d00;
}
.minicard-slateblue {
  background-color: #6a5acd !important;
  color: #fff !important;
}
.minicard-slateblue:hover:not(.minicard-composer),
.is-selected .minicard-slateblue,
.draggable-hover-card .minicard-slateblue {
  background: #6453cb;
}
.draggable-hover-card .minicard-slateblue {
  background: #5c4ac8;
}
.minicard-magenta {
  background-color: #f0f !important;
  color: #fff !important;
}
.minicard-magenta:hover:not(.minicard-composer),
.is-selected .minicard-magenta,
.draggable-hover-card .minicard-magenta {
  background: #f700f7;
}
.draggable-hover-card .minicard-magenta {
  background: #ed00ed;
}
.minicard-gold {
  background-color: #ffd700 !important;
}
.minicard-gold:hover:not(.minicard-composer),
.is-selected .minicard-gold,
.draggable-hover-card .minicard-gold {
  background: #f7d100;
}
.draggable-hover-card .minicard-gold {
  background: #edc800;
}
.minicard-navy {
  background-color: #000080 !important;
  color: #fff !important;
}
.minicard-navy:hover:not(.minicard-composer),
.is-selected .minicard-navy,
.draggable-hover-card .minicard-navy {
  background: #00007c;
}
.draggable-hover-card .minicard-navy {
  background: #007;
}
.minicard-gray {
  background-color: #808080 !important;
  color: #fff !important;
}
.minicard-gray:hover:not(.minicard-composer),
.is-selected .minicard-gray,
.draggable-hover-card .minicard-gray {
  background: #7c7c7c;
}
.draggable-hover-card .minicard-gray {
  background: #777;
}
.minicard-saddlebrown {
  background-color: #8b4513 !important;
  color: #fff !important;
}
.minicard-saddlebrown:hover:not(.minicard-composer),
.is-selected .minicard-saddlebrown,
.draggable-hover-card .minicard-saddlebrown {
  background: #874312;
}
.draggable-hover-card .minicard-saddlebrown {
  background: #814012;
}
.minicard-paleturquoise {
  background-color: #afeeee !important;
}
.minicard-paleturquoise:hover:not(.minicard-composer),
.is-selected .minicard-paleturquoise,
.draggable-hover-card .minicard-paleturquoise {
  background: #a5ecec;
}
.draggable-hover-card .minicard-paleturquoise {
  background: #97e9e9;
}
.minicard-mistyrose {
  background-color: #ffe4e1 !important;
}
.minicard-mistyrose:hover:not(.minicard-composer),
.is-selected .minicard-mistyrose,
.draggable-hover-card .minicard-mistyrose {
  background: #ffd7d3;
}
.draggable-hover-card .minicard-mistyrose {
  background: #ffc6bf;
}
.minicard-indigo {
  background-color: #4b0082 !important;
  color: #fff !important;
}
.minicard-indigo:hover:not(.minicard-composer),
.is-selected .minicard-indigo,
.draggable-hover-card .minicard-indigo {
  background: #49007e;
}
.draggable-hover-card .minicard-indigo {
  background: #460079;
}
.text-red {
  color: #f00;
}
.text-green {
  color: #008000;
}

/* Drag and drop file upload visual feedback */
.minicard.is-dragging-over {
  border: 2px dashed #0079bf;
  background-color: #e3f2fd !important;
  transform: scale(1.02);
  transition: all 0.2s ease;
}

/* List name display on minicard */
.minicard-list-name {
  font-size: 0.75em;
  color: #8c8c8c;
  margin-top: 0.2vh;
  display: flex;
  align-items: center;
  gap: 0.3vw;
}

.minicard-list-name i.fa {
  font-size: 0.8em;
  opacity: 0.7;
}