Kumi
53463d4e85
Added functionality to highlight the current time slot in the Kanblendar application for better time tracking. This feature updates every minute and visually indicates the active time slot by applying a specific CSS class.
135 lines
No EOL
2.5 KiB
CSS
135 lines
No EOL
2.5 KiB
CSS
.kanblendar {
|
|
display: flex;
|
|
flex: 1;
|
|
gap: 1em;
|
|
padding: 1em;
|
|
}
|
|
|
|
.kanblendar-column {
|
|
flex: 1;
|
|
background-color: #f4f4f4;
|
|
padding: 1em;
|
|
border-radius: 5px;
|
|
border: 1px solid #ddd;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.kanblendar-column h2 {
|
|
text-align: center;
|
|
border-bottom: 1px solid #ddd;
|
|
padding-bottom: 0.5em;
|
|
}
|
|
|
|
.kanblendar-non-timed-tasks {
|
|
margin-bottom: 1em;
|
|
min-height: 50px;
|
|
/* Ensure it has a minimum height */
|
|
background-color: #fafafa;
|
|
border: 1px dashed #ddd;
|
|
}
|
|
|
|
.kanblendar-task {
|
|
background-color: #fff;
|
|
margin: 0.5em 0;
|
|
padding: 0.5em;
|
|
border: 1px solid #ddd;
|
|
border-radius: 3px;
|
|
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
|
|
cursor: grab;
|
|
}
|
|
|
|
.kanblendar-time-slot {
|
|
background-color: #e9ecef;
|
|
margin: 0.5em 0;
|
|
padding: 1em;
|
|
border-radius: 5px;
|
|
border: 1px solid #ddd;
|
|
text-align: center;
|
|
min-height: 2em;
|
|
position: relative;
|
|
}
|
|
|
|
.kanblendar-time-slot::after {
|
|
content: '';
|
|
display: block;
|
|
height: 100%;
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
}
|
|
|
|
.kanblendar-drag-over {
|
|
background-color: #cce5ff;
|
|
/* Highlight color */
|
|
border-color: #004085;
|
|
}
|
|
|
|
/* Modal Styles */
|
|
.kanblendar-modal {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 1;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.kanblendar-modal-content {
|
|
background-color: #fff;
|
|
padding: 2em;
|
|
border-radius: 5px;
|
|
width: 80%;
|
|
max-width: 500px;
|
|
margin: auto;
|
|
}
|
|
|
|
.kanblendar-close {
|
|
color: #aaa;
|
|
float: right;
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.kanblendar-close:hover,
|
|
.kanblendar-close:focus {
|
|
color: black;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Form Styles */
|
|
.kanblendar-modal-content form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.kanblendar-modal-content label,
|
|
.kanblendar-modal-content input,
|
|
.kanblendar-modal-content textarea,
|
|
.kanblendar-modal-content select,
|
|
.kanblendar-modal-content button {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.kanblendar-delete-task {
|
|
background-color: #ff4c4c;
|
|
color: white;
|
|
border: none;
|
|
padding: 0.5em 1em;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Current Time Highlight */
|
|
.kanblendar-current-time {
|
|
background-color: #ffeb3b; /* Highlight color */
|
|
border-color: #fbc02d;
|
|
} |