itflow/css/tickets_kanban.css

84 lines
1.6 KiB
CSS

/* General Popover Styling */
.popover {
max-width: 600px;
}
/* Kanban Board Container */
#kanban-board {
display: flex;
overflow-x: auto;
box-sizing: border-box;
min-width: 400px;
height: calc(100vh - 210px);
}
/* Kanban Column */
.kanban-column {
flex: 1;
min-width: 300px;
max-width: 300px;
margin: 0 10px;
background: #f4f4f4;
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
min-height: calc(100vh - 230px);
max-height: calc(100vh - 230px);
box-sizing: border-box;
display: flex;
flex-direction: column;
}
/* Column Inner Scrollable Task Area */
.kanban-status {
flex: 1;
overflow-y: auto;
min-height: 60px;
position: relative;
padding: 5px;
background-color: #f9f9f9;
border-radius: 4px;
}
/* Individual Task Cards */
.task {
background: #fff;
margin: 5px 0;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
cursor: grab;
user-select: none;
}
/* Grabbing Cursor State */
.task:active {
cursor: grabbing;
}
/* Drag Handle (shown on mobile or with class targeting) */
.drag-handle-class {
float: right;
touch-action: none;
cursor: grab;
}
/* Placeholder shown in empty columns */
.empty-placeholder {
border: 2px dashed #ccc;
background-color: #fcfcfc;
color: #999;
font-style: italic;
padding: 12px;
margin: 10px 0;
text-align: center;
border-radius: 4px;
pointer-events: none;
}
/* Sortable drop zone feedback (optional visual cue) */
.kanban-status.sortable-over {
background-color: #eaf6ff;
transition: background-color 0.2s ease;
}