Fix button border styles for disabled state and split buttons#8410
Fix button border styles for disabled state and split buttons#8410mrleemurray merged 1 commit intomainfrom
Conversation
There was a problem hiding this comment.
Pull request overview
This PR updates button border styles in the webviews CSS, specifically targeting disabled button states and split button groups. The changes aim to improve visual consistency by modifying border colors for disabled UI elements.
Changes:
- Modified disabled button border styling to use
--vscode-button-backgroundinstead of--vscode-button-border - Added explicit top and bottom borders to disabled split buttons using
--vscode-button-background
| input[type='submit']:disabled { | ||
| opacity: 0.4; | ||
| border: 1px solid var(--vscode-button-border, transparent) !important; | ||
| border: 1px solid var(--vscode-button-background, transparent) !important; |
There was a problem hiding this comment.
Using --vscode-button-background for border styling is semantically incorrect. The variable --vscode-button-background is intended for background colors, not borders. This could cause visual inconsistencies in themes where these variables have different color values. Consider using --vscode-button-border if the goal is to maintain a border, or removing the border entirely for disabled buttons with border: 1px solid transparent !important;.
| border: 1px solid var(--vscode-button-background, transparent) !important; | |
| border: 1px solid var(--vscode-button-border, transparent) !important; |
| border-top: 1px solid var(--vscode-button-background); | ||
| border-bottom: 1px solid var(--vscode-button-background); |
There was a problem hiding this comment.
Using --vscode-button-background for border styling is semantically incorrect. The non-disabled .split class uses --vscode-button-border for its top and bottom borders (lines 386-387), so the disabled state should maintain the same semantic variable usage. Consider keeping --vscode-button-border or using a transparent border instead.
| border-top: 1px solid var(--vscode-button-background); | |
| border-bottom: 1px solid var(--vscode-button-background); | |
| border-top: 1px solid var(--vscode-button-border); | |
| border-bottom: 1px solid var(--vscode-button-border); |
This pull request makes minor style adjustments to the
webviews/common/common.cssfile, focusing on improving the appearance of disabled buttons and split button groups.Button styling updates:
--vscode-button-backgroundinstead of--vscode-button-borderfor better visual consistency..split.disabledelements, using--vscode-button-backgroundto enhance the visual separation of disabled split buttons.