Kumi
38d9d36312
Introduced the Kanblendar project, which combines a Kanban board and a daily calendar. Users can create, edit, and organize tasks in columns and time slots, with notification support for upcoming tasks. Added README.md with detailed usage instructions and LICENSE file for licensing under MIT. Created example files (HTML, CSS, JS) to illustrate the usage of Kanblendar, and essential styles and scripts for its functionality.
129 lines
No EOL
2.3 KiB
CSS
129 lines
No EOL
2.3 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;
|
|
} |