diff --git a/src/renderer/components/input/input.scss b/src/renderer/components/input/input.scss index 11c45fb18a..8f1c338715 100644 --- a/src/renderer/components/input/input.scss +++ b/src/renderer/components/input/input.scss @@ -9,41 +9,44 @@ text-align: left; &.invalid.dirty:not(.validating) { - label:after { - width: 100%; - background: var(--colorError); + label { + border-color: var(--colorSoftError); } } - &.focused:not(.validating) { - label:after { - width: 100%; + label { + position: relative; + background: var(--inputControlBackground); + border-radius: $radius; + border: 1px solid var(--inputControlBorder); + color: var(--textColorTertiary); + padding: var(--padding); + + &:hover { + border-color: var(--inputControlHoverBorder); + } + + &:focus-within { + border-color: var(--colorInfo); + } + + &:after { + display: none; } } &.validatingLine { label:after { + display: block; width: 100%; @include stripeLinesAnimation; } } - label { - --flex-gap: $padding * 0.6667; - position: relative; - padding: $padding * 0.75 0; - border-bottom: 1px solid var(--halfGray); - line-height: 1; - - &:after { - content: ""; - position: absolute; - top: calc(100% - 1px); - left: 50%; - transform: translateX(-50%); - width: 0; - height: 2px; - background: var(--primary); + &.light { + label { + background: #f6f6f7; /* inputControlBackground from light theme */ + border-color: #cccdcf; /* inputControlBorder from light theme */ } } @@ -92,49 +95,6 @@ padding: $padding * 0.33333; } } - - //- Themes - - &.theme { - &.round { - &.invalid.dirty { - label { - border-color: var(--colorSoftError); - } - } - label { - border-radius: $radius; - border: 1px solid var(--halfGray); - color: inherit; - padding: $padding * 0.25 * 3 $padding * 0.25 * 3; - - &:focus-within { - border-color: var(--colorInfo); - } - - &:after { - display: none; - } - } - &.black { - label { - background: var(--inputControlBackground); - border-color: var(--inputControlBorder); - color: var(--textColorTertiary); - padding: $padding; - transition: border-color 0.1s; - - &:hover { - border-color: var(--inputControlHoverBorder); - } - - &:focus-within { - border-color: var(--colorInfo); - } - } - } - } - } } .Tooltip.InputTooltipError { diff --git a/src/renderer/themes/lens-dark.json b/src/renderer/themes/lens-dark.json index b48ed84cc7..ee54626ad7 100644 --- a/src/renderer/themes/lens-dark.json +++ b/src/renderer/themes/lens-dark.json @@ -121,7 +121,7 @@ "pieChartDefaultColor": "#30353a", "inputOptionHoverColor": "#87909c", "inputControlBackground": "#1e2125", - "inputControlBorder": "#414448", + "inputControlBorder": "#3c4043", "inputControlHoverBorder": "#474a4f", "lineProgressBackground": "#414448", "radioActiveBackground": "#36393e", diff --git a/src/renderer/themes/theme-vars.css b/src/renderer/themes/theme-vars.css index e0a695b72d..c49d4fb60d 100644 --- a/src/renderer/themes/theme-vars.css +++ b/src/renderer/themes/theme-vars.css @@ -121,7 +121,7 @@ --pieChartDefaultColor: #30353a; --inputOptionHoverColor: #87909c; --inputControlBackground: #1e2125; ---inputControlBorder: #414448; +--inputControlBorder: #3c4043; --inputControlHoverBorder: #474a4f; --lineProgressBackground: #414448; --radioActiveBackground: #36393e;