Styling fix and scraper bug fix
This commit is contained in:
@@ -0,0 +1,391 @@
|
||||
/* Overview Metrics */
|
||||
.overview-metrics {
|
||||
display: grid;
|
||||
gap: var(--sp-4);
|
||||
}
|
||||
|
||||
.overview-metrics__title {
|
||||
margin: 0 0 var(--sp-4) 0;
|
||||
}
|
||||
|
||||
.overview-metrics__list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: var(--sp-4);
|
||||
}
|
||||
|
||||
.overview-metrics__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--sp-5);
|
||||
background-color: var(--c-bg);
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--c-border);
|
||||
}
|
||||
|
||||
.overview-metrics__value {
|
||||
display: block;
|
||||
font-size: var(--fs-2xl);
|
||||
font-weight: 700;
|
||||
color: var(--c-accent);
|
||||
margin-bottom: var(--sp-2);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.overview-metrics__label {
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--c-text-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Days Breakdown */
|
||||
.days-breakdown {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.days-breakdown__empty {
|
||||
color: var(--c-text-muted);
|
||||
font-size: var(--fs-sm);
|
||||
text-align: center;
|
||||
padding: var(--sp-5);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.days-breakdown__table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.days-breakdown__table th {
|
||||
padding: var(--sp-4);
|
||||
background-color: var(--c-bg);
|
||||
border-bottom: 2px solid var(--c-border);
|
||||
font-weight: 600;
|
||||
color: var(--c-text-muted);
|
||||
text-align: left;
|
||||
font-size: var(--fs-sm);
|
||||
}
|
||||
|
||||
.days-breakdown__table td {
|
||||
padding: var(--sp-3) var(--sp-4);
|
||||
border-bottom: 1px solid var(--c-border);
|
||||
font-size: var(--fs-base);
|
||||
}
|
||||
|
||||
.days-breakdown__table tbody tr:hover {
|
||||
background-color: rgba(47, 111, 79, 0.02);
|
||||
}
|
||||
|
||||
.days-breakdown__table tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.days-breakdown__table td:last-child {
|
||||
text-align: right;
|
||||
font-weight: 600;
|
||||
color: var(--c-accent);
|
||||
}
|
||||
|
||||
/* Parental Leave Breakdown */
|
||||
.parental-leave-breakdown {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-4);
|
||||
}
|
||||
|
||||
.parental-leave-breakdown__empty {
|
||||
color: var(--c-text-muted);
|
||||
font-size: var(--fs-sm);
|
||||
padding: var(--sp-4);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.parental-leave-breakdown__section {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.parental-leave-breakdown__table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.parental-leave-breakdown__table th {
|
||||
padding: var(--sp-3) var(--sp-4);
|
||||
background-color: var(--c-bg);
|
||||
border-bottom: 2px solid var(--c-border);
|
||||
font-weight: 600;
|
||||
color: var(--c-text-muted);
|
||||
text-align: left;
|
||||
font-size: var(--fs-sm);
|
||||
}
|
||||
|
||||
.parental-leave-breakdown__table td {
|
||||
padding: var(--sp-3) var(--sp-4);
|
||||
border-bottom: 1px solid var(--c-border);
|
||||
font-size: var(--fs-sm);
|
||||
}
|
||||
|
||||
.parental-leave-breakdown__table tbody tr:hover {
|
||||
background-color: rgba(47, 111, 79, 0.02);
|
||||
}
|
||||
|
||||
.parental-leave-breakdown__table tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.parental-leave-breakdown__table td:nth-child(2),
|
||||
.parental-leave-breakdown__table td:nth-child(3) {
|
||||
text-align: right;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.parental-leave-breakdown__provenance {
|
||||
padding-top: var(--sp-3);
|
||||
border-top: 1px solid var(--c-border);
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--c-text-muted);
|
||||
}
|
||||
|
||||
/* Progress Chart */
|
||||
.progress-chart {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-4);
|
||||
}
|
||||
|
||||
.progress-chart__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
margin: 0 0 var(--sp-3) 0;
|
||||
}
|
||||
|
||||
.progress-chart__header h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.progress-chart__age {
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--c-text-muted);
|
||||
}
|
||||
|
||||
.progress-chart__bar {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
background-color: var(--c-bg);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--c-border);
|
||||
}
|
||||
|
||||
.progress-chart__fill {
|
||||
height: 100%;
|
||||
background-color: var(--c-accent);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.progress-chart__stats {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--c-text-muted);
|
||||
}
|
||||
|
||||
.progress-chart__percentage {
|
||||
font-weight: 600;
|
||||
color: var(--c-accent);
|
||||
}
|
||||
|
||||
/* Button Styles */
|
||||
button {
|
||||
background-color: var(--c-accent);
|
||||
color: var(--c-surface);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
background-color: #1f5a3b;
|
||||
}
|
||||
|
||||
button:active:not(:disabled) {
|
||||
background-color: #0f4a2f;
|
||||
}
|
||||
|
||||
/* Secondary button */
|
||||
.button--secondary,
|
||||
button.secondary {
|
||||
background-color: transparent;
|
||||
color: var(--c-accent);
|
||||
border: 1px solid var(--c-accent);
|
||||
}
|
||||
|
||||
.button--secondary:hover:not(:disabled),
|
||||
button.secondary:hover:not(:disabled) {
|
||||
background-color: var(--c-accent-weak);
|
||||
}
|
||||
|
||||
/* Ghost button */
|
||||
.button--ghost,
|
||||
button.ghost {
|
||||
background-color: transparent;
|
||||
color: var(--c-text);
|
||||
border: 1px solid var(--c-border);
|
||||
}
|
||||
|
||||
.button--ghost:hover:not(:disabled),
|
||||
button.ghost:hover:not(:disabled) {
|
||||
background-color: var(--c-bg);
|
||||
border-color: var(--c-text);
|
||||
}
|
||||
|
||||
/* Form styles */
|
||||
.form-group {
|
||||
margin-bottom: var(--sp-5);
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: var(--sp-2);
|
||||
font-weight: 500;
|
||||
color: var(--c-text);
|
||||
font-size: var(--fs-base);
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
resize: vertical;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
/* Input Grid */
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: var(--sp-4);
|
||||
}
|
||||
|
||||
.form-grid .form-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-grid .form-group input,
|
||||
.form-grid .form-group select {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
/* Settings Page Messages */
|
||||
.settings-page__message {
|
||||
padding: var(--sp-4);
|
||||
border-radius: var(--radius);
|
||||
margin-bottom: var(--sp-4);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.settings-page__message--success {
|
||||
background-color: var(--c-success-weak);
|
||||
color: var(--c-success);
|
||||
border-left: 4px solid var(--c-success);
|
||||
}
|
||||
|
||||
.settings-page__message--error {
|
||||
background-color: var(--c-danger-weak);
|
||||
color: var(--c-danger);
|
||||
border-left: 4px solid var(--c-danger);
|
||||
}
|
||||
|
||||
/* Fieldsets */
|
||||
fieldset {
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--sp-4);
|
||||
margin-bottom: var(--sp-5);
|
||||
}
|
||||
|
||||
legend {
|
||||
font-weight: 600;
|
||||
color: var(--c-text);
|
||||
padding: 0 var(--sp-2);
|
||||
margin-left: calc(var(--sp-2) * -1);
|
||||
}
|
||||
|
||||
/* Input Components */
|
||||
.vacation-days-input,
|
||||
.planning-goal-selector,
|
||||
.break-periods-input,
|
||||
.parent-profile-input,
|
||||
.child-birthday-input {
|
||||
margin-bottom: var(--sp-5);
|
||||
}
|
||||
|
||||
.vacation-days-input__label,
|
||||
.planning-goal-selector__label,
|
||||
.break-periods-input__label,
|
||||
.parent-profile-input__label,
|
||||
.child-birthday-input__label {
|
||||
display: block;
|
||||
margin-bottom: var(--sp-2);
|
||||
font-weight: 500;
|
||||
color: var(--c-text);
|
||||
font-size: var(--fs-base);
|
||||
}
|
||||
|
||||
.vacation-days-input__field,
|
||||
.planning-goal-selector__select,
|
||||
.break-periods-input__field,
|
||||
.parent-profile-input__field,
|
||||
.child-birthday-input__field {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.vacation-days-input__range,
|
||||
.break-periods-input__help,
|
||||
.parent-profile-input__help,
|
||||
.child-birthday-input__help {
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--c-text-muted);
|
||||
margin-top: var(--sp-2);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 640px) {
|
||||
[data-testid='metrics-list'] {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select,
|
||||
.form-group textarea,
|
||||
.vacation-days-input__field,
|
||||
.planning-goal-selector__select,
|
||||
.break-periods-input__field,
|
||||
.parent-profile-input__field,
|
||||
.child-birthday-input__field {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.days-breakdown__table {
|
||||
font-size: var(--fs-sm);
|
||||
}
|
||||
|
||||
.days-breakdown__table th,
|
||||
.days-breakdown__table td {
|
||||
padding: var(--sp-2) var(--sp-3);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user