diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss index 7e1696fff..bd3c69d20 100644 --- a/ui/scss/component/_form-field.scss +++ b/ui/scss/component/_form-field.scss @@ -363,8 +363,9 @@ fieldset-group { border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); border-color: var(--color-input-border); - color: var(--color-text-help); - background-color: var(--color-input-bg); + border-right-color: var(--color-input-prefix-border); + color: var(--color-text); + background-color: var(--color-input-prefix-bg); } } diff --git a/ui/scss/init/_color.scss b/ui/scss/init/_color.scss index 5b1fd4e52..ce5c91d19 100644 --- a/ui/scss/init/_color.scss +++ b/ui/scss/init/_color.scss @@ -45,18 +45,6 @@ --color-link: var(--color-primary); --color-link-hover: var(--color-black); - // Input - --color-input-color: #111111; - --color-input-label: var(--color-gray-5); - --color-input-placeholder: #212529; - --color-input-bg: var(--color-gray-1); - --color-input-bg-copyable: #434b53; - --color-input-border: var(--color-border); - --color-input-border-active: var(--color-secondary); - --color-input-toggle: var(--color-secondary); - --color-input-toggle-bg: var(--color-gray-1); - --color-input-toggle-bg-hover: var(--color-secondary-alt); - // Table --color-table-highlight: var(--color-white-alt); diff --git a/ui/scss/themes/dark.scss b/ui/scss/themes/dark.scss index 1e01798e2..4926db6dd 100644 --- a/ui/scss/themes/dark.scss +++ b/ui/scss/themes/dark.scss @@ -90,6 +90,8 @@ --color-input-toggle-bg: var(--color-input-bg); --color-input-toggle-bg-hover: var(--color-secondary); --color-input-bg-selected: var(--color-primary-alt); + --color-input-prefix-bg: var(--color-gray-5); + --color-input-prefix-border: var(--color-gray-4); --select-toggle-background: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23ffffff'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A"); // Menu diff --git a/ui/scss/themes/light.scss b/ui/scss/themes/light.scss index 50d97064e..8a94b691b 100644 --- a/ui/scss/themes/light.scss +++ b/ui/scss/themes/light.scss @@ -53,6 +53,17 @@ --color-text-warning--background: var(--lbry-yellow-1); --color-blockquote: var(--color-gray-3); --color-blockquote-bg: var(--color-gray-1); + --color-input-color: #111111; + --color-input-label: var(--color-gray-5); + --color-input-placeholder: #212529; + --color-input-bg: var(--color-gray-1); + --color-input-border: var(--color-border); + --color-input-border-active: var(--color-secondary); + --color-input-toggle: var(--color-secondary); + --color-input-toggle-bg: var(--color-gray-1); + --color-input-toggle-bg-hover: var(--color-secondary-alt); + --color-input-prefix-bg: var(--color-gray-2); + --color-input-prefix-border: var(--color-gray-5); --color-input-bg-selected: var(--color-primary-alt); --select-toggle-background: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23212529'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");