jacobh2
c2e64b504d
Planning used to mean filling in a wish list on one tab, pressing a button to see a suggestion, then pressing another to accept it — with nothing on screen telling you whether a plan was active. Dragging a range on the calendar now creates the period directly, clicking a band opens it for editing, and each change is recomputed and saved in one step. A period repeats never or yearly, matching what the planner can actually express. Clicking a day edits that day: its funding type, which pins it so the planner leaves it alone, and whether the day counts as worked or off. That switch used to be a mode covering the whole grid, which is what made the calendar confusing. The season presets move to a rail beside the grid. Picking one lets the planner choose the placement, then jumps there and flashes it, rather than asking the user to guess dates the engine already knows. A sync that funds nothing now says so, naming the period and how many days it fell short, instead of leaving the screen unchanged and looking broken.
190 lines
3.3 KiB
CSS
190 lines
3.3 KiB
CSS
.planned-day-modal__overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.planned-day-modal__content {
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
|
max-width: 500px;
|
|
width: 90%;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.planned-day-modal__header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
}
|
|
|
|
.planned-day-modal__header h2 {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.planned-day-modal__close {
|
|
background: none;
|
|
border: none;
|
|
font-size: 28px;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
color: #666;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.planned-day-modal__close:hover {
|
|
color: #000;
|
|
}
|
|
|
|
.planned-day-modal__body {
|
|
padding: 20px;
|
|
}
|
|
|
|
.planned-day-modal__date {
|
|
font-size: 14px;
|
|
color: #666;
|
|
margin: 0 0 16px 0;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.planned-day-modal__error {
|
|
background-color: #ffebee;
|
|
color: #c62828;
|
|
padding: 12px;
|
|
border-radius: 4px;
|
|
margin-bottom: 16px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.planned-day-modal__field {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.planned-day-modal__label {
|
|
display: block;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
margin-bottom: 6px;
|
|
color: #333;
|
|
}
|
|
|
|
.planned-day-modal__select {
|
|
width: 100%;
|
|
padding: 8px 10px;
|
|
border: 1px solid #d0d0d0;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
background-color: #fff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.planned-day-modal__select:disabled {
|
|
background-color: #f5f5f5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.planned-day-modal__checkbox-label {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.planned-day-modal__checkbox-label input[type='checkbox'] {
|
|
margin-right: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.planned-day-modal__checkbox-label input[type='checkbox']:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.planned-day-modal__hint {
|
|
font-size: 12px;
|
|
color: #999;
|
|
margin-top: 6px;
|
|
margin-left: 24px;
|
|
font-style: italic;
|
|
}
|
|
|
|
.planned-day-modal__pinned-notice {
|
|
font-size: 12px;
|
|
color: #666;
|
|
margin: -8px 0 16px 0;
|
|
}
|
|
|
|
.planned-day-modal__override-switch {
|
|
display: flex;
|
|
gap: 16px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.planned-day-modal__override-switch .planned-day-modal__checkbox-label {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.planned-day-modal__footer {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: flex-end;
|
|
padding: 16px 20px;
|
|
border-top: 1px solid #e0e0e0;
|
|
background-color: #fafafa;
|
|
}
|
|
|
|
.planned-day-modal__button {
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
border: none;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.planned-day-modal__button:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.planned-day-modal__button--primary {
|
|
background-color: #0066cc;
|
|
color: #fff;
|
|
}
|
|
|
|
.planned-day-modal__button--primary:hover:not(:disabled) {
|
|
background-color: #0052a3;
|
|
}
|
|
|
|
.planned-day-modal__button--secondary {
|
|
background-color: #e0e0e0;
|
|
color: #333;
|
|
}
|
|
|
|
.planned-day-modal__button--secondary:hover:not(:disabled) {
|
|
background-color: #d0d0d0;
|
|
}
|
|
|
|
.planned-day-modal__button--danger {
|
|
background-color: #d32f2f;
|
|
color: #fff;
|
|
}
|
|
|
|
.planned-day-modal__button--danger:hover:not(:disabled) {
|
|
background-color: #b71c1c;
|
|
}
|