Kumi
953edad91f
Improved the header's layout by making the logo and button positioning more intuitive and visually appealing. Adjusted header padding and button placement to be more consistent. Added text alignment to non-timed tasks for better readability.
136 lines
No EOL
2.4 KiB
CSS
136 lines
No EOL
2.4 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;
|
|
background-color: #fafafa;
|
|
border: 1px dashed #ddd;
|
|
text-align: center;
|
|
}
|
|
|
|
.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;
|
|
} |