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