Skip to content

Commit 87ede00

Browse files
author
mrleemurray
committed
Update CSS styles for improved UI consistency and adjust checkbox appearance
1 parent ef521e8 commit 87ede00

File tree

5 files changed

+95
-42
lines changed

5 files changed

+95
-42
lines changed

‎webviews/activityBarView/index.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ body {
1010
textarea {
1111
min-height: 80px;
1212
max-height: 500px;
13-
border-radius: 2px;
13+
border-radius: 4px;
1414
}
1515

1616
.form-actions {

‎webviews/common/common.css‎

Lines changed: 61 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@ button,
2525
input[type='submit'] {
2626
color: var(--vscode-button-foreground);
2727
font-family: var(--vscode-font-family);
28-
border-radius: 2px;
28+
border-radius: 4px;
2929
border: 1px solid transparent;
30-
padding: 4px 12px;
30+
padding: 3px 12px;
3131
font-size: 13px;
3232
line-height: 18px;
3333
white-space: nowrap;
@@ -40,11 +40,11 @@ input[type='submit'] {
4040
}
4141

4242
input.select-left {
43-
border-radius: 2px 0 0 2px;
43+
border-radius: 4px 0 0 4px;
4444
}
4545

4646
button.select-right {
47-
border-radius: 0 2px 2px 0;
47+
border-radius: 0 4px 4px 0;
4848
width: 24px;
4949
position: relative;
5050
}
@@ -96,7 +96,7 @@ input[type='text'] {
9696
background-color: var(--vscode-input-background);
9797
color: var(--vscode-input-foreground);
9898
font-family: var(--vscode-font-family);
99-
border-radius: 2px;
99+
border-radius: 4px;
100100
}
101101

102102
textarea::placeholder,
@@ -108,7 +108,7 @@ select {
108108
display: block;
109109
box-sizing: border-box;
110110
padding: 4px 8px;
111-
border-radius: 2px;
111+
border-radius: 4px;
112112
font-size: 13px;
113113
border: 1px solid var(--vscode-dropdown-border);
114114
background-color: var(--vscode-dropdown-background);
@@ -117,15 +117,64 @@ select {
117117

118118
textarea:focus,
119119
input[type='text']:focus,
120-
input[type='checkbox']:focus,
121120
select:focus {
122121
outline: 1px solid var(--vscode-focusBorder);
123122
}
124123

125124
input[type='checkbox'] {
125+
appearance: none;
126+
-webkit-appearance: none;
127+
-moz-appearance: none;
128+
width: 18px;
129+
height: 18px;
130+
min-width: 18px;
131+
min-height: 18px;
132+
flex-shrink: 0;
133+
margin: 0;
134+
border: 1px solid var(--vscode-checkbox-border);
135+
background-color: var(--vscode-checkbox-background);
136+
border-radius: 3px;
137+
cursor: pointer;
138+
outline: none;
139+
}
140+
141+
input[type='checkbox']:checked {
142+
background-color: var(--vscode-checkbox-selectBackground, var(--vscode-checkbox-background));
143+
}
144+
145+
.checkbox-wrapper {
146+
position: relative;
147+
display: flex;
148+
align-items: center;
149+
}
150+
151+
.checkbox-wrapper::after {
152+
content: '';
153+
position: absolute;
154+
top: 1px;
155+
left: 6px;
156+
width: 5px;
157+
height: 10px;
158+
border: solid var(--vscode-checkbox-foreground);
159+
border-width: 0 1px 1px 0;
160+
transform: rotate(45deg);
161+
pointer-events: none;
162+
opacity: 0;
163+
}
164+
165+
.checkbox-wrapper:has(input:checked)::after {
166+
opacity: 1;
167+
}
168+
169+
input[type='checkbox']:focus {
170+
outline: 1px solid var(--vscode-focusBorder);
126171
outline-offset: 1px;
127172
}
128173

174+
input[type='checkbox']:not(:checked):hover {
175+
background-color: var(--vscode-inputOption-hoverBackground);
176+
}
177+
129178
.vscode-high-contrast input[type='checkbox'] {
130179
outline: 1px solid var(--vscode-contrastBorder);
131180
}
@@ -283,9 +332,9 @@ body img.avatar {
283332
#status-checks .automerge-section {
284333
align-items: center;
285334
padding: 16px;
286-
background: var(--vscode-editorHoverWidget-background);
287-
border-bottom-left-radius: 3px;
288-
border-bottom-right-radius: 3px;
335+
background: var(--vscode-panel-background);
336+
border-bottom-left-radius: 6px;
337+
border-bottom-right-radius: 6px;
289338
}
290339

291340
.automerge-section .merge-select-container {
@@ -371,7 +420,7 @@ body img.avatar {
371420
}
372421

373422
button.split-left {
374-
border-radius: 2px 0 0 2px;
423+
border-radius: 4px 0 0 4px;
375424
flex-grow: 1;
376425
overflow: hidden;
377426
white-space: nowrap;
@@ -407,7 +456,7 @@ button.split-left {
407456
}
408457

409458
button.split-right {
410-
border-radius: 0 2px 2px 0;
459+
border-radius: 0 4px 4px 0;
411460
cursor: pointer;
412461
width: 24px;
413462
position: relative;

‎webviews/components/automergeSelect.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export const AutoMerge = ({
4848

4949
return (
5050
<div className="automerge-section">
51-
<div className="automerge-checkbox-wrapper">
51+
<div className="automerge-checkbox-wrapper checkbox-wrapper">
5252
<input
5353
id="automerge-checkbox"
5454
type="checkbox"

‎webviews/createPullRequestViewNew/index.css‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -181,17 +181,21 @@ textarea {
181181
}
182182

183183
.validation-error {
184-
padding: 5px;
184+
padding: 3px 5px;
185185
border: 1px solid var(--vscode-inputValidation-errorBorder);
186186
background-color: var(--vscode-inputValidation-errorBackground);
187187
color: var(--vscode-inputValidation-errorForeground);
188+
border-radius: 4px;
189+
margin-top: 4px
188190
}
189191

190192
.validation-warning {
191-
padding: 5px;
193+
padding: 3px 5px;
192194
border: 1px solid var(--vscode-inputValidation-warningBorder);
193195
background-color: var(--vscode-inputValidation-warningBackground);
194196
color: var(--vscode-inputValidation-warningForeground);
197+
border-radius: 4px;
198+
margin-top: 4px
195199
}
196200

197201
.below-input-error {

‎webviews/editorWebview/index.css‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -172,17 +172,17 @@ body .comment-container .review-comment-header {
172172
padding: 8px 16px;
173173
color: var(--vscode-foreground);
174174
align-items: center;
175-
background: var(--vscode-editorWidget-background);
176-
border-top-left-radius: 3px;
177-
border-top-right-radius: 3px;
175+
background: var(--vscode-panel-background);
176+
border-top-left-radius: 6px;
177+
border-top-right-radius: 6px;
178178
overflow: hidden;
179179
text-overflow: ellipsis;
180180
white-space: nowrap;
181181
}
182182

183183
.review-comment-header.no-details {
184-
border-bottom-left-radius: 3px;
185-
border-bottom-right-radius: 3px;
184+
border-bottom-left-radius: 0px;
185+
border-bottom-right-radius: 0px;
186186
}
187187

188188
.description-header {
@@ -249,9 +249,9 @@ body .comment-container .review-comment-header {
249249
}
250250

251251
.status-item:first-of-type {
252-
background: var(--vscode-editorWidget-background);
253-
border-top-left-radius: 3px;
254-
border-top-right-radius: 3px;
252+
background: var(--vscode-panel-background);
253+
border-top-left-radius: 6px;
254+
border-top-right-radius: 6px;
255255
}
256256

257257
.status-item,
@@ -315,9 +315,9 @@ button.input-box {
315315
.merge-queue-container,
316316
.ready-for-review-container {
317317
padding: 16px;
318-
background-color: var(--vscode-editorWidget-background);
319-
border-bottom-left-radius: 3px;
320-
border-bottom-right-radius: 3px;
318+
background-color: var(--vscode-panel-background);
319+
border-bottom-left-radius: 6px;
320+
border-bottom-right-radius: 6px;
321321
display: flex;
322322
justify-content: space-between;
323323
align-items: center;
@@ -344,7 +344,7 @@ button.input-box {
344344

345345
#status-checks {
346346
border: 1px solid var(--vscode-editorHoverWidget-border);
347-
border-radius: 4px;
347+
border-radius: 6px;
348348
}
349349

350350
#status-checks .label {
@@ -378,9 +378,9 @@ button.input-box {
378378
#status-checks .merge-select-container {
379379
display: flex;
380380
align-items: center;
381-
background-color: var(--vscode-editorWidget-background);
382-
border-bottom-left-radius: 3px;
383-
border-bottom-right-radius: 3px;
381+
background-color: var(--vscode-panel-background);
382+
border-bottom-left-radius: 6px;
383+
border-bottom-right-radius: 6px;
384384
}
385385

386386
#status-checks .merge-select-container>* {
@@ -434,7 +434,7 @@ body .diff .diffPath {
434434
.comment-container form,
435435
#merge-comment-form {
436436
padding: 16px;
437-
background-color: var(--vscode-editorWidget-background);
437+
background-color: var(--vscode-panel-background);
438438
}
439439

440440
body .comment-container .comment-body,
@@ -827,7 +827,7 @@ button.secondary.change-base {
827827
display: flex;
828828
margin: 0;
829829
align-items: center;
830-
border-radius: 4px;
830+
border-radius: 6px;
831831
border: 1px solid var(--vscode-editorHoverWidget-border);
832832
}
833833

@@ -851,8 +851,8 @@ button.secondary.change-base {
851851
padding: 16px;
852852
background-color: var(--vscode-editorHoverWidget-background);
853853
border-top: 1px solid var(--vscode-editorHoverWidget-border);
854-
border-bottom-left-radius: 3px;
855-
border-bottom-right-radius: 3px;
854+
border-bottom-left-radius: 6px;
855+
border-bottom-right-radius: 6px;
856856
}
857857

858858
.review-comment-container .review-comment .review-comment-header {
@@ -1104,7 +1104,7 @@ code {
11041104
.comment-body pre:not(.hljs),
11051105
.comment-body pre.hljs code>div {
11061106
padding: 16px;
1107-
border-radius: 3px;
1107+
border-radius: 6px;
11081108
overflow: auto;
11091109
}
11101110

@@ -1209,9 +1209,9 @@ code {
12091209
display: flex;
12101210
align-items: center;
12111211
justify-content: space-between;
1212-
background: var(--vscode-editorWidget-background);
1213-
border-top-left-radius: 3px;
1214-
border-top-right-radius: 3px;
1212+
background: var(--vscode-panel-background);
1213+
border-top-left-radius: 6px;
1214+
border-top-right-radius: 6px;
12151215
}
12161216

12171217
.resolved-container .diffPath:hover {
@@ -1417,14 +1417,14 @@ code {
14171417
}
14181418

14191419
.comment-body .Box-header {
1420-
background-color: var(--vscode-editorWidget-background);
1420+
background-color: var(--vscode-panel-background);
14211421
color: var(--vscode-disabledForeground);
14221422
border-bottom-style: solid;
14231423
border-bottom-width: 1px;
14241424
padding: 8px 16px;
14251425
border-bottom-color: var(--vscode-editorHoverWidget-border);
1426-
border-top-left-radius: 3px;
1427-
border-top-right-radius: 3px;
1426+
border-top-left-radius: 6px;
1427+
border-top-right-radius: 6px;
14281428
}
14291429

14301430
.comment-body .blob-num {

0 commit comments

Comments
 (0)