diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css index ac66a2b..df3231a 100644 --- a/TangerineUI-cherry.css +++ b/TangerineUI-cherry.css @@ -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%; diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 8c6f338..dcde4ce 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -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%; diff --git a/TangerineUI.css b/TangerineUI.css index a494817..9f90aea 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -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%;