.kanban { display: flex; padding: 4px; background: #e8fcf8; border-radius: 5px; } .kanban * { font-family: sans-serif; } .kanban__column { flex: 1; } .kanban__column:not(:last-child) { margin-right: 4px; } .kanban__column-title { margin-bottom: 20px; font-size: 20px; color: black; user-select: none; } .kanban__item { border-radius: 8px; border: 1px solid #000; margin-bottom: 4px } .kanban__item-input { font-size: 14px; padding: 10px 5px; box-sizing: border-box; border-radius: 5px; cursor: pointer; } .kanban__dropzone { height: 20px; transition: background 0.15s, height 0.15s; } .kanban__dropzone--active { height: 90px; background: rgba(0, 0, 0, 0.25); } .kanban__add-item { float: left; background-color: #e8fcf8; font-size: 16px; color: black; border: none; cursor: pointer; } .kanban__hide-item { float: right; background-color: #e8fcf8; font-size: 16px; color: black; border: none; cursor: pointer; } .kanban__number { float: left; } .kanban__assign { float: right; } .form-row { display: flex; flex-direction: row; margin: 0.2rem; } .form-row-buttons { display: flex; flex-direction: row; justify-content: space-between; margin: 0.2rem; } #edit-button, #save-button, #cancel-button { margin: 0.2rem 2px 0.1rem 0rem; background-color: white; border-radius: 0.2rem; width: 49.2%; border: 0.25rem solid black; padding: 0.7rem 2.7rem; border-radius: 0.3rem; font-size: 1rem; } #delete-button { margin: 0.2rem 2px 0.1rem 0rem; background-color: red; border-radius: 0.2rem; width: 49.2%; border: 0.25rem solid black; padding: 0.5rem 2.7rem; border-radius: 0.3rem; font-size: 1rem; } .datetime { font-size: .65rem; } .color-picker-square { display: inline-block; width: 18px; height: 18px; margin-right: 5px; border: 1px solid #000; } .kanban__item.color-yellow, .task-summary-container.color-yellow, .color-picker-square.color-yellow { background-color: rgb(245, 247, 196); border-color: rgb(223, 227, 45); } .kanban__item.color-blue, .task-summary-container.color-blue, .color-picker-square.color-blue { background-color: rgb(219, 235, 255); border-color: rgb(168, 207, 255); } .kanban__item.color-green, .task-summary-container.color-green, .color-picker-square.color-green { background-color: rgb(189, 244, 203); border-color: rgb(74, 227, 113); } .kanban__item.color-purple, .task-summary-container.color-purple, .color-picker-square.color-purple { background-color: rgb(223, 176, 255); border-color: rgb(205, 133, 254); } .kanban__item.color-red, .task-summary-container.color-red, .color-picker-square.color-red { background-color: rgb(255, 187, 187); border-color: rgb(255, 151, 151); } .kanban__item.color-orange, .task-summary-container.color-orange, .color-picker-square.color-orange { background-color: rgb(255, 215, 179); border-color: rgb(255, 172, 98); } .kanban__item.color-grey, .task-summary-container.color-grey, .color-picker-square.color-grey { background-color: rgb(238, 238, 238); border-color: rgb(204, 204, 204); } .kanban__item.color-brown, .task-summary-container.color-brown, .color-picker-square.color-brown { background-color: #d7ccc8; border-color: #4e342e; } .kanban__item.color-deep_orange, .task-summary-container.color-deep_orange, .color-picker-square.color-deep_orange { background-color: #ffab91; border-color: #e64a19; } .kanban__item.color-dark_grey, .task-summary-container.color-dark_grey, .color-picker-square.color-dark_grey { background-color: #cfd8dc; border-color: #455a64; } .kanban__item.color-pink, .task-summary-container.color-pink, .color-picker-square.color-pink { background-color: #f48fb1; border-color: #d81b60; } .kanban__item.color-teal, .task-summary-container.color-teal, .color-picker-square.color-teal { background-color: #80cbc4; border-color: #00695c; } .kanban__item.color-cyan, .task-summary-container.color-cyan, .color-picker-square.color-cyan { background-color: #b2ebf2; border-color: #00bcd4; } .kanban__item.color-lime, .task-summary-container.color-lime, .color-picker-square.color-lime { background-color: #e6ee9c; border-color: #afb42b; } .kanban__item.color-light_green, .task-summary-container.color-light_green, .color-picker-square.color-light_green { background-color: #dcedc8; border-color: #689f38; } .kanban__item.color-amber, .task-summary-container.color-amber, .color-picker-square.color-amber { background-color: #ffe082; border-color: #ffa000; }