Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Different input fields have slightly different border colors. #21

Closed
mimoguz opened this issue Oct 23, 2022 · 4 comments
Closed

Different input fields have slightly different border colors. #21

mimoguz opened this issue Oct 23, 2022 · 4 comments
Labels
bug Something isn't working

Comments

@mimoguz
Copy link
Contributor

mimoguz commented Oct 23, 2022

Examples use Nord Dark color theme.

e1

More noticeable on an editable combo-box:

e2

Using a color picker, arrow button border reads #5d6575, while text input border reads #6e7787.

@mkpaz
Copy link
Owner

mkpaz commented Oct 24, 2022

Color is the same as well as border width. The difference is that spinner uses border color (stroke) while text inputs use background insets (two rectangles one on top of another). The latter is preferred option because of performance. Nor sure why I implemented spinner CSS this way, it needs some investigation.

@mimoguz
Copy link
Contributor Author

mimoguz commented Oct 24, 2022

Maybe that is the problem? The border color is semitransparent, isn't it?. Background insets approach is mixing the border color with container's background (unless you have an another rectangle under the border), while border color approach is mixing it with the control's background? The problem, then, of course, the container and the control have both same background color :)

@mimoguz
Copy link
Contributor Author

mimoguz commented Oct 24, 2022

I delved into the code a bit today. The issue with the editable combo-box was that both the combo-box itself and its text field had borders, so the border was being drawn twice. Setting text-field border transparent fixed it.

@mkpaz
Copy link
Owner

mkpaz commented Oct 27, 2022

Thanks for investigating this! I think I'll also remove border opacity. At least from the Nord.

@mkpaz mkpaz added the bug Something isn't working label Oct 27, 2022
mkpaz added a commit that referenced this issue Feb 8, 2023
@mkpaz mkpaz closed this as completed Feb 8, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants