Finish the redesign's edges: auth page, modals, dead code, docs
The sign-in page becomes a plain centred column with the brand mark and a segmented login/register switch, modals lose their last inner boxes, the red-days list collapses every year but the current one, and the retired components' CSS, an unused list component and 23 unreferenced translation keys are removed. ARCHITECTURE.md documents the Almanacka styling conventions and the per-year balance rule. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XBRLomdLK9jF7wU7a8AA6H
This commit is contained in:
@@ -635,134 +635,10 @@
|
||||
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 > .alert {
|
||||
margin-bottom: var(--sp-4);
|
||||
}
|
||||
|
||||
.settings-page__help {
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--c-text-muted);
|
||||
margin: 0 0 var(--sp-4) 0;
|
||||
max-width: 60ch;
|
||||
}
|
||||
|
||||
.settings-page__field {
|
||||
margin-bottom: var(--sp-4);
|
||||
}
|
||||
|
||||
.settings-page__label {
|
||||
font-size: var(--fs-base);
|
||||
}
|
||||
|
||||
.settings-page__select {
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.settings-page__checkbox-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.settings-page__partner-row {
|
||||
display: flex;
|
||||
gap: var(--sp-3);
|
||||
}
|
||||
|
||||
/* Box/border/focus chrome comes from `.field__control` in primitives.css —
|
||||
* this only adds the flex sizing `.field__control`'s own rule doesn't know
|
||||
* about (it sits in an inline row next to a button, not a stacked `.field`). */
|
||||
.settings-page__partner-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.settings-page__member-list {
|
||||
list-style: none;
|
||||
margin: 0 0 var(--sp-4) 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-2);
|
||||
}
|
||||
|
||||
.settings-page__member-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: var(--sp-3);
|
||||
padding: var(--sp-2) 0;
|
||||
}
|
||||
|
||||
.settings-page__remove-confirm {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
color: var(--c-danger);
|
||||
font-size: var(--fs-sm);
|
||||
}
|
||||
|
||||
/* Vacation Days Table (multi-year) */
|
||||
.vacation-days-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 0 0 var(--sp-4) 0;
|
||||
}
|
||||
|
||||
.vacation-days-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);
|
||||
}
|
||||
|
||||
.vacation-days-table td {
|
||||
padding: var(--sp-3) var(--sp-4);
|
||||
border-bottom: 1px solid var(--c-border);
|
||||
font-size: var(--fs-base);
|
||||
}
|
||||
|
||||
.vacation-days-table tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.vacation-days-table__year {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.vacation-days-table__assumed-badge {
|
||||
margin-left: var(--sp-2);
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.vacation-days-table__input {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.vacation-days-table__empty {
|
||||
color: var(--c-text-muted);
|
||||
font-size: var(--fs-sm);
|
||||
}
|
||||
|
||||
/* Fieldsets */
|
||||
fieldset {
|
||||
border: 1px solid var(--c-border);
|
||||
@@ -812,247 +688,3 @@ legend {
|
||||
color: var(--c-text-muted);
|
||||
margin-top: var(--sp-2);
|
||||
}
|
||||
|
||||
/* Day Overrides Input */
|
||||
.day-overrides-input {
|
||||
margin-bottom: var(--sp-5);
|
||||
}
|
||||
|
||||
.day-overrides-input__empty {
|
||||
padding: var(--sp-5);
|
||||
background-color: var(--c-bg);
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--c-border);
|
||||
color: var(--c-text-muted);
|
||||
text-align: center;
|
||||
margin-bottom: var(--sp-5);
|
||||
}
|
||||
|
||||
.day-overrides-input__empty p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.day-overrides-input__list {
|
||||
margin-bottom: var(--sp-5);
|
||||
}
|
||||
|
||||
.day-overrides-input__items {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-3);
|
||||
}
|
||||
|
||||
.day-overrides-input__item {
|
||||
padding: var(--sp-4);
|
||||
background-color: var(--c-bg);
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.day-overrides-input__item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: var(--sp-3);
|
||||
margin-bottom: var(--sp-3);
|
||||
}
|
||||
|
||||
.day-overrides-input__item-date {
|
||||
flex: 0 0 auto;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.day-overrides-input__item-date strong {
|
||||
color: var(--c-text);
|
||||
}
|
||||
|
||||
.day-overrides-input__item-status {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.day-overrides-input__status {
|
||||
display: inline-block;
|
||||
padding: var(--sp-2) var(--sp-3);
|
||||
border-radius: var(--radius);
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.day-overrides-input__status--working {
|
||||
background-color: var(--c-warning-weak);
|
||||
color: var(--c-warning);
|
||||
}
|
||||
|
||||
.day-overrides-input__status--off {
|
||||
background-color: var(--c-success-weak);
|
||||
color: var(--c-success);
|
||||
}
|
||||
|
||||
.day-overrides-input__item-note {
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--c-text-muted);
|
||||
margin-bottom: var(--sp-3);
|
||||
}
|
||||
|
||||
/* Plain section, not a bordered card — matches the rest of Settings (see
|
||||
* layout.css's "sections separate by whitespace and a hairline rule, not a
|
||||
* stack of bordered/shadowed cards" comment). Only a top hairline separates
|
||||
* it from the list of existing exceptions above. */
|
||||
.day-overrides-input__form {
|
||||
padding-top: var(--sp-4);
|
||||
border-top: 1px solid var(--c-border);
|
||||
}
|
||||
|
||||
.day-overrides-input__form h3 {
|
||||
margin: 0 0 var(--sp-4) 0;
|
||||
font-size: var(--fs-lg);
|
||||
color: var(--c-text);
|
||||
}
|
||||
|
||||
.day-overrides-input__form-group {
|
||||
max-width: 400px;
|
||||
margin-bottom: var(--sp-4);
|
||||
}
|
||||
|
||||
.day-overrides-input__radio-group {
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.day-overrides-input__radio-group legend {
|
||||
padding: 0;
|
||||
margin: 0 0 var(--sp-2) 0;
|
||||
}
|
||||
|
||||
.day-overrides-input__radio-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
margin-bottom: var(--sp-2);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.day-overrides-input__radio-label:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.day-overrides-input__radio-label input[type='radio'] {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.day-overrides-input__char-count {
|
||||
display: block;
|
||||
margin-top: var(--sp-1);
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--c-text-muted);
|
||||
}
|
||||
|
||||
|
||||
/* Red Days List (§3.8 — statutory red days + workspace overrides, per year) */
|
||||
.red-days-list__pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-3);
|
||||
margin-bottom: var(--sp-4);
|
||||
}
|
||||
|
||||
.red-days-list__range {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.red-days-list__year {
|
||||
margin-bottom: var(--sp-5);
|
||||
}
|
||||
|
||||
.red-days-list__year-title {
|
||||
font-size: var(--fs-lg);
|
||||
margin: 0 0 var(--sp-2) 0;
|
||||
}
|
||||
|
||||
.red-days-list__empty {
|
||||
color: var(--c-text-muted);
|
||||
font-size: var(--fs-sm);
|
||||
}
|
||||
|
||||
.red-days-list__items {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.red-days-list__item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: var(--sp-3);
|
||||
padding: var(--sp-2) 0;
|
||||
border-bottom: 1px solid var(--c-border);
|
||||
font-size: var(--fs-sm);
|
||||
}
|
||||
|
||||
.red-days-list__date {
|
||||
font-weight: 600;
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.red-days-list__name {
|
||||
color: var(--c-text);
|
||||
}
|
||||
|
||||
/* `.red-days-list__effective` is a real `<button>` — clicking it toggles
|
||||
* that one absolute date between its statutory value and the opposite
|
||||
* override (§Task8). Sized by its own (bilingual) content, not a fixed
|
||||
* width, since the Swedish labels run longer than the English ones. */
|
||||
.red-days-list__effective {
|
||||
margin-left: auto;
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: 500;
|
||||
color: var(--c-text-muted);
|
||||
background-color: var(--c-bg);
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: var(--radius-full);
|
||||
padding: 2px var(--sp-3);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: background-color 0.2s, border-color 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.red-days-list__effective:hover:not(:disabled) {
|
||||
background-color: var(--c-accent-weak);
|
||||
border-color: var(--c-accent);
|
||||
color: var(--c-text);
|
||||
}
|
||||
|
||||
.red-days-list__effective:focus-visible {
|
||||
outline: 2px solid var(--c-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.red-days-list__effective:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.red-days-list__effective--working {
|
||||
background-color: var(--c-danger-weak);
|
||||
color: var(--c-danger);
|
||||
border-color: var(--c-danger-weak);
|
||||
}
|
||||
|
||||
.red-days-list__loading,
|
||||
.red-days-list__error,
|
||||
.red-days-list__toggle-error {
|
||||
color: var(--c-text-muted);
|
||||
font-size: var(--fs-sm);
|
||||
}
|
||||
|
||||
.red-days-list__toggle-error {
|
||||
color: var(--c-danger);
|
||||
margin: var(--sp-2) 0 0;
|
||||
}
|
||||
|
||||
@@ -84,25 +84,6 @@
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.form-grid .form-group input,
|
||||
.form-grid .form-group select {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
.vacation-days-table {
|
||||
font-size: var(--fs-sm);
|
||||
}
|
||||
|
||||
.vacation-days-table th,
|
||||
.vacation-days-table td {
|
||||
padding: var(--sp-2) var(--sp-3);
|
||||
}
|
||||
|
||||
/* Dashboard — the three key figures tighten; a year row keeps year +
|
||||
* track on the first line and wraps the per-parent figures under the
|
||||
* track, each parent on its own line. */
|
||||
@@ -143,10 +124,6 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vacation-days-table__input {
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
/* Modals — the overlay already gutters the content with its own padding
|
||||
* and `.modal__content`'s `width: min(100%, var(--modal-w))` already caps
|
||||
* it to the viewport, so only the footer's button stacking needs a
|
||||
@@ -228,10 +205,6 @@
|
||||
|
||||
/* Tablet - Medium screens (641px to 1024px) */
|
||||
@media (min-width: 641px) and (max-width: 1024px) {
|
||||
.form-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.layout__main {
|
||||
padding: var(--sp-6) var(--sp-5);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user