diff --git a/front/src/components/ui/input.scss b/front/src/components/ui/input.scss index 0822ef9dc..e6720d175 100644 --- a/front/src/components/ui/input.scss +++ b/front/src/components/ui/input.scss @@ -1,7 +1,7 @@ .funkwhale { form label { - display: block; + display: flex; margin-bottom: 8px; color: var(--form-label-color); font-size: .92857143em; @@ -9,21 +9,24 @@ form label { text-transform: none; } - &.input { + > input { background-color: var(--fw-bg-color); box-shadow: inset 0 0 0 4px var(--fw-border-color); + outline: none; + width: 100%; + padding: 8px 12px; + font-size: 14px; + font-family: $font-main; + line-height: inherit; + border: none; + border-radius: var(--fw-border-radius); + cursor: text; - input { - &::placeholder { - color: var(--fw-placeholder-color); - } - @include dark-theme { - color: var(--fw-gray-300); - } + &:focus-visible { + outline: none !important; } - .prefix, - .input-right { + &::placeholder { color: var(--fw-placeholder-color); } @@ -43,6 +46,7 @@ form label { } @include dark-theme { + color: var(--fw-gray-300); --fw-bg-color: var(--fw-gray-850); --fw-border-color: var(--fw-bg-color); --fw-placeholder-color: var(--fw-gray-300); @@ -57,49 +61,36 @@ form label { } } - position: relative; - display: flex; - align-items: center; - border-radius: var(--fw-border-radius); - overflow: hidden; - cursor: text; - &.has-icon { input { padding-left: 36px; } } + } - input { - display: block; - width: 100%; - padding: 8px 12px; - font-size: 14px; - font-family: $font-main; - background-color: transparent; - line-height: inherit; - border: none; - } + .prefix, + .input-right { + display: flex; + align-items: center; + font-size: 14px; + writing-mode: horizontal-tb; + color: var(--fw-placeholder-color); - .prefix, - .input-right { - display: flex; - align-items: center; - font-size: 14px; - writing-mode: horizontal-tb; - } - - .prefix { - position: absolute; - top: 0; - left: 4px; - bottom: 0; - width: 32px; - justify-content: center; - } - - .input-right { - padding-right: 12px; + & .button, + & .button:hover { + background-color: transparent !important; + border: none !important; } } + + .prefix { + width: 32px; + justify-content: center; + position: absolute; + top: 0; + left: 4px; + bottom: 0; + width: 32px; + justify-content: center; + } }