nessar
609b3dece9
- Updated dark-light mode button styles for improved responsiveness. - Enhanced rules panel with additional buttons for moving rules up and down, and updated styles for better layout. - Added active rule count display in the rules panel header. - Improved user input component layout with section headings and updated button styles. - Refactored day input component to use grid layout for better alignment and responsiveness. - Added new translations for user input and rules panel features. - Implemented tests for new functionality in rules panel and day input components. - Added application routes test to ensure correct routing configuration.
119 lines
1.5 KiB
SCSS
119 lines
1.5 KiB
SCSS
.user-input {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.25rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.section-heading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.375rem;
|
|
|
|
h2,
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
p {
|
|
max-width: 55ch;
|
|
color: var(--ui-text-secondary, #45464f);
|
|
line-height: 1.5;
|
|
}
|
|
}
|
|
|
|
.listOfDays {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.day-input-wrapper {
|
|
animation: slide-fade-in 200ms ease-out;
|
|
|
|
@starting-style {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
}
|
|
|
|
.day-enter {
|
|
animation: slide-fade-in 200ms ease-out;
|
|
}
|
|
|
|
.day-leave {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
transition:
|
|
opacity 200ms ease-in,
|
|
transform 200ms ease-in;
|
|
}
|
|
|
|
@keyframes slide-fade-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.add-day-button,
|
|
.calculate-button {
|
|
width: 100%;
|
|
min-height: 3rem;
|
|
}
|
|
|
|
.add-day-button {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.calculate-button {
|
|
min-height: 3.25rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.warning-card {
|
|
background: var(--ui-warning-bg, #fff4d6);
|
|
color: var(--ui-warning-text, #4f3800);
|
|
}
|
|
|
|
.warning-content {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.75rem;
|
|
|
|
mat-icon {
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
.warning {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
min-width: 0;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
:host {
|
|
display: block;
|
|
container: user-input / inline-size;
|
|
max-width: 100%;
|
|
}
|