1/* Container for the whole board */ 2.kanban-board { 3 display: flex; 4 overflow-x: auto; 5 padding: 10px; 6 background-color: #f4f5f7; 7 gap: 15px; 8 align-items: flex-start; 9} 10 11/* Individual Workflow Columns */ 12.kanban-col { 13 background-color: #ebecf0; 14 border-radius: 5px; 15 /* width: 25%; */ 16 width: 360px; 17 min-width: 360px; 18 padding: 10px; 19 box-shadow: 0 1px 3px rgba(0,0,0,0.12); 20} 21 22.kanban-col h3 { 23 margin-top: 0; 24 font-size: 1.1em; 25 color: #172b4d; 26} 27 28/* Card Styling */ 29.kanban-card { 30 background: #fff; 31 border-radius: 3px; 32 box-shadow: 0 1px 0 rgba(9,30,66,.25); 33 margin-bottom: 8px; 34 padding: 10px; 35 cursor: grab; 36 37} 38 39/* Tripple Lines Container Setup */ 40.triple-lines { 41 width: 100%; 42 height: 20px; 43 /* Creates 3 lines by repeating a gradient pattern */ 44 background: linear-gradient( 45 to bottom, 46 #333 2px, transparent 2px, 47 transparent 6px, #333 8px, transparent 8px, 48 transparent 12px, #333 14px, transparent 14px 49 ); 50} 51 52.is-dragging { 53 /* Increase size by 10% */ 54 transform: scale(1.1); 55 /* Increase shadow blur and spread to simulate "lifting" */ 56 box-shadow: 0 20px 35px rgba(0, 0, 0, 0.3); 57 /* Smooth the transition when the drag starts */ 58 transition: transform 0.2s ease, box-shadow 0.2s ease; 59 opacity: 0.9 !important; 60 cursor: grabbing !important; 61 transform: rotate(5deg); 62 63} 64 65.is-left-dragging { 66 /* Increase size by 10% */ 67 transform: scale(1.1); 68 /* Increase shadow blur and spread to simulate "lifting" */ 69 box-shadow: 0 20px 35px rgba(0, 0, 0, 0.3); 70 /* Smooth the transition when the drag starts */ 71 transition: transform 0.2s ease, box-shadow 0.2s ease; 72 opacity: 0.9 !important; 73 cursor: grabbing !important; 74 transform: rotate(-5deg); 75 76} 77 78.kanban-card label{ 79 color:black; 80} 81 82/* Important - Top Placeholder for each card container */ 83.kanban-card-locked{ 84 opacity:0.9; 85 pointer-events:none; 86 cursor:default; 87 background-color:#ebecf0; 88 box-shadow:0 0 0; 89} 90 91/* Class applied when dragging */ 92.card.dragging { 93 transform: rotate(5deg); /* Or rotateY(10deg) for 3D flip */ 94} 95 96/* Ensure contents don't interfere with mouse events */ 97.card * { 98 pointer-events: none; 99} 100 101/* Importance Rating Colors */ 102.kanban-card.high { border-left: 5px solid #eb5a46; } 103.kanban-card.medium { border-left: 5px solid #f2d600;} 104.kanban-card.low { border-left: 5px solid #61bd4f; } 105 106.card{ 107 /* Optional: Enables 3D perspective for better visuals */ 108 /* perspective: 1000px; */ 109 transition: transform 0.5s ease; 110 transform-origin: center; 111} 112/* Card Formatting */ 113.card-desc { 114 font-size:12px; 115 color:black; 116 } 117.card-title { 118 font-size:14px; 119 color:black; 120 } 121.card-note { 122 font-size:10px; 123 color:black; 124 } 125 126/* Drag and Drop Placeholder */ 127.ui-sortable-placeholder { 128 visibility: visible !important; 129 background: rgba(0,0,0,0.05); 130 border: 2px dashed #ccc; 131 height: 50px; 132} 133