jacobh2
c5587c5b46
Deleting a period or a day went through the browser's own confirmation box. It halts the page while it is open, which meant the delete path could not be driven by anything automated, and it looks nothing like the rest of the app. Both now ask inline: the first click offers the choice, and only the second one deletes. That matters more than it did, since deleting a period now takes its days with it.
191 lines
3.2 KiB
CSS
191 lines
3.2 KiB
CSS
.period-popover__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;
|
|
}
|
|
|
|
.period-popover__content {
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
|
max-width: 480px;
|
|
width: 90%;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.period-popover__header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
}
|
|
|
|
.period-popover__header h2 {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.period-popover__close {
|
|
background: none;
|
|
border: none;
|
|
font-size: 28px;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
color: #666;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.period-popover__close:hover {
|
|
color: #000;
|
|
}
|
|
|
|
.period-popover__body {
|
|
padding: 20px;
|
|
}
|
|
|
|
.period-popover__error {
|
|
background-color: #ffebee;
|
|
color: #c62828;
|
|
padding: 12px;
|
|
border-radius: 4px;
|
|
margin-bottom: 16px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.period-popover__adhoc-notice {
|
|
font-size: 13px;
|
|
color: #666;
|
|
margin: 0 0 12px 0;
|
|
}
|
|
|
|
.period-popover__date-range {
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
|
|
.period-popover__field {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.period-popover__label {
|
|
display: block;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
margin-bottom: 6px;
|
|
color: #333;
|
|
}
|
|
|
|
.period-popover__input,
|
|
.period-popover__select {
|
|
width: 100%;
|
|
padding: 8px 10px;
|
|
border: 1px solid #d0d0d0;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.period-popover__input:disabled,
|
|
.period-popover__select:disabled {
|
|
background-color: #f5f5f5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.period-popover__fieldset {
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0 0 16px 0;
|
|
}
|
|
|
|
.period-popover__radio-label,
|
|
.period-popover__checkbox-label {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.period-popover__radio-label input,
|
|
.period-popover__checkbox-label input {
|
|
margin-right: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.period-popover__footer {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: flex-end;
|
|
padding: 16px 20px;
|
|
border-top: 1px solid #e0e0e0;
|
|
background-color: #fafafa;
|
|
}
|
|
|
|
.period-popover__button {
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
border: none;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.period-popover__button:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.period-popover__button--primary {
|
|
background-color: #0066cc;
|
|
color: #fff;
|
|
}
|
|
|
|
.period-popover__button--primary:hover:not(:disabled) {
|
|
background-color: #0052a3;
|
|
}
|
|
|
|
.period-popover__button--secondary {
|
|
background-color: #e0e0e0;
|
|
color: #333;
|
|
}
|
|
|
|
.period-popover__button--secondary:hover:not(:disabled) {
|
|
background-color: #d0d0d0;
|
|
}
|
|
|
|
.period-popover__button--danger {
|
|
background-color: #d32f2f;
|
|
color: #fff;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.period-popover__button--danger:hover:not(:disabled) {
|
|
background-color: #b71c1c;
|
|
}
|
|
|
|
.period-popover__delete-confirm {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
width: 100%;
|
|
}
|
|
|
|
.period-popover__delete-confirm-text {
|
|
font-size: 14px;
|
|
color: #333;
|
|
margin-right: auto;
|
|
}
|