Fixed uploader banner input styling in the onboarding

This commit is contained in:
Niléane 2024-03-13 00:39:05 +01:00
parent 4d95409421
commit 04dc55305e
No known key found for this signature in database
3 changed files with 69 additions and 9 deletions

View file

@ -798,7 +798,8 @@ body.app-body {
.icon-eye-slash,
.icon-eye,
.icon-eraser,
.icon-pencil
.icon-pencil,
.app-form__header-input .icon
)
path {
display: none;
@ -857,7 +858,8 @@ body.app-body {
.icon-eye-slash,
.icon-eye,
.icon-eraser,
.icon-pencil
.icon-pencil,
.app-form__header-input .icon
) {
background-repeat: no-repeat;
background-size: 100%;
@ -5869,7 +5871,25 @@ a:is(.active,
.app-body .onboarding__link svg path {
fill: var(--color-accent);
}
.app-body .app-form__avatar-input,
.app-body .app-form__header-input {
background-color: var(--color-accent-bg);
transition: all .2s;
}
.app-body .app-form__avatar-input:hover,
.app-body .app-form__header-input:hover {
background-color: color-mix(in srgb, var(--color-accent), transparent 75%);
}
.app-body .app-form__header-input {
border-top: 1px solid var(--color-lines);
}
.app-body .app-form__header-input .icon {
background-image: var(--icon-paperclip);
transform: scale(1.4) translateX(-50%) translateY(-25%);
position: absolute;
inset-inline-start: 50%;
top: 50%;
}
.app-body .onboarding__profile .app-form__avatar-input {
border-color: var(--color-content-bg);
border-radius: 50%;

View file

@ -798,7 +798,8 @@ body.app-body {
.icon-eye-slash,
.icon-eye,
.icon-eraser,
.icon-pencil
.icon-pencil,
.app-form__header-input .icon
)
path {
display: none;
@ -857,7 +858,8 @@ body.app-body {
.icon-eye-slash,
.icon-eye,
.icon-eraser,
.icon-pencil
.icon-pencil,
.app-form__header-input .icon
) {
background-repeat: no-repeat;
background-size: 100%;
@ -5869,7 +5871,25 @@ a:is(.active,
.app-body .onboarding__link svg path {
fill: var(--color-accent);
}
.app-body .app-form__avatar-input,
.app-body .app-form__header-input {
background-color: var(--color-accent-bg);
transition: all .2s;
}
.app-body .app-form__avatar-input:hover,
.app-body .app-form__header-input:hover {
background-color: color-mix(in srgb, var(--color-accent), transparent 75%);
}
.app-body .app-form__header-input {
border-top: 1px solid var(--color-lines);
}
.app-body .app-form__header-input .icon {
background-image: var(--icon-paperclip);
transform: scale(1.4) translateX(-50%) translateY(-25%);
position: absolute;
inset-inline-start: 50%;
top: 50%;
}
.app-body .onboarding__profile .app-form__avatar-input {
border-color: var(--color-content-bg);
border-radius: 50%;

View file

@ -798,7 +798,8 @@ body.app-body {
.icon-eye-slash,
.icon-eye,
.icon-eraser,
.icon-pencil
.icon-pencil,
.app-form__header-input .icon
)
path {
display: none;
@ -857,7 +858,8 @@ body.app-body {
.icon-eye-slash,
.icon-eye,
.icon-eraser,
.icon-pencil
.icon-pencil,
.app-form__header-input .icon
) {
background-repeat: no-repeat;
background-size: 100%;
@ -5869,7 +5871,25 @@ a:is(.active,
.app-body .onboarding__link svg path {
fill: var(--color-accent);
}
.app-body .app-form__avatar-input,
.app-body .app-form__header-input {
background-color: var(--color-accent-bg);
transition: all .2s;
}
.app-body .app-form__avatar-input:hover,
.app-body .app-form__header-input:hover {
background-color: color-mix(in srgb, var(--color-accent), transparent 75%);
}
.app-body .app-form__header-input {
border-top: 1px solid var(--color-lines);
}
.app-body .app-form__header-input .icon {
background-image: var(--icon-paperclip);
transform: scale(1.4) translateX(-50%) translateY(-25%);
position: absolute;
inset-inline-start: 50%;
top: 50%;
}
.app-body .onboarding__profile .app-form__avatar-input {
border-color: var(--color-content-bg);
border-radius: 50%;