Skip to content

Commit daf0f80

Browse files
eli-w-kingeli-w-king
committed
refined
1 parent f0272b1 commit daf0f80

2 files changed

Lines changed: 112 additions & 50 deletions

File tree

‎src/vs/workbench/contrib/welcomeOnboarding/browser/media/variationA.css‎

Lines changed: 110 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
border-radius: 12px;
3939
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
4040
width: min(720px, 92vw);
41-
height: min(580px, 85vh);
41+
height: min(620px, 88vh);
4242
display: flex;
4343
flex-direction: column;
4444
overflow: hidden;
@@ -96,7 +96,7 @@
9696
flex: 1;
9797
display: flex;
9898
flex-direction: column;
99-
padding: 24px 28px;
99+
padding: 20px 28px 18px;
100100
overflow: hidden;
101101
min-height: 0;
102102
}
@@ -112,7 +112,7 @@
112112
.onboarding-a-step-subtitle {
113113
font-size: 13px;
114114
color: var(--vscode-descriptionForeground);
115-
margin: 0 0 20px;
115+
margin: 0 0 16px;
116116
line-height: 1.5;
117117
}
118118

@@ -121,7 +121,7 @@
121121
display: flex;
122122
flex-direction: column;
123123
min-height: 0;
124-
overflow-y: auto;
124+
overflow: hidden;
125125
}
126126

127127
.onboarding-a-footer {
@@ -188,12 +188,15 @@
188188

189189
/* Sign-In step */
190190
.onboarding-a-signin {
191-
display: flex;
192-
align-items: stretch;
191+
display: grid;
192+
grid-template-columns: 170px minmax(0, 1fr);
193+
align-items: center;
193194
justify-content: center;
194-
gap: 28px;
195-
padding: 8px 0;
196-
min-height: 220px;
195+
gap: 34px;
196+
width: min(640px, 100%);
197+
margin: 0 auto;
198+
padding: 4px 0;
199+
min-height: 0;
197200
flex: 1;
198201
}
199202

@@ -218,58 +221,60 @@
218221
}
219222

220223
.onboarding-a-signin-brand-icon .codicon {
221-
font-size: 96px;
224+
font-size: 118px;
222225
color: var(--vscode-textLink-foreground);
223226
}
224227

225228
.onboarding-a-signin-content {
226229
display: flex;
227230
flex-direction: column;
228-
gap: 18px;
231+
gap: 16px;
229232
flex: 1;
230233
min-height: 0;
231234
min-width: 0;
232-
max-width: 470px;
235+
max-width: 432px;
233236
}
234237

235238
.onboarding-a-signin-content-main {
236239
display: flex;
237240
flex: 1 1 auto;
238241
flex-direction: column;
239242
justify-content: center;
240-
gap: 12px;
243+
gap: 14px;
241244
}
242245

243246
.onboarding-a-signin-title {
244247
margin: 0;
245-
font-size: 22px;
248+
font-size: 28px;
246249
font-weight: 600;
247-
line-height: 1.25;
250+
line-height: 1.15;
248251
color: var(--vscode-foreground);
249252
}
250253

251254
.onboarding-a-signin-subtitle {
252255
margin: 0;
253-
font-size: 14px;
256+
font-size: 15px;
254257
line-height: 1.45;
255258
color: var(--vscode-descriptionForeground);
256-
max-width: 420px;
259+
max-width: 400px;
257260
}
258261

259262
.onboarding-a-signin-actions {
260-
display: flex;
263+
display: grid;
264+
grid-template-columns: minmax(0, 1fr) auto auto;
261265
align-items: stretch;
262-
gap: 12px;
263-
margin-top: 12px;
264-
flex-wrap: wrap;
266+
gap: 10px;
267+
margin-top: 8px;
268+
flex-wrap: nowrap;
265269
}
266270

267271
.onboarding-a-signin-footer {
268272
display: flex;
269273
flex-direction: column;
270-
gap: 10px;
274+
gap: 8px;
271275
margin-top: auto;
272-
padding-top: 18px;
276+
padding-top: 12px;
277+
border-top: 1px solid var(--vscode-widget-border, rgba(255, 255, 255, 0.08));
273278
}
274279

275280
.onboarding-a-signin-inline-link {
@@ -299,7 +304,7 @@
299304
font-size: 11px;
300305
line-height: 1.5;
301306
color: var(--vscode-descriptionForeground);
302-
max-width: 440px;
307+
max-width: 400px;
303308
}
304309

305310
.onboarding-a-signin-disclaimer p {
@@ -321,7 +326,7 @@
321326
justify-content: center;
322327
gap: 12px;
323328
min-width: 0;
324-
flex: 1 1 320px;
329+
width: 100%;
325330
padding: 0 20px;
326331
height: 52px;
327332
border-radius: 8px;
@@ -387,9 +392,31 @@
387392
.onboarding-a-personalize {
388393
display: flex;
389394
flex-direction: column;
390-
gap: 24px;
395+
justify-content: space-between;
396+
gap: 14px;
397+
flex: 1;
391398
width: min(664px, 100%);
399+
min-height: 0;
392400
margin: 0 auto;
401+
padding: 0;
402+
}
403+
404+
.onboarding-a-personalize-section {
405+
display: flex;
406+
flex-direction: column;
407+
padding: 14px 18px;
408+
border-radius: 12px;
409+
border: 1px solid var(--vscode-widget-border, rgba(255, 255, 255, 0.08));
410+
background: var(--vscode-editorWidget-background, var(--vscode-sideBar-background));
411+
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
412+
}
413+
414+
.onboarding-a-personalize-section-theme {
415+
justify-content: center;
416+
}
417+
418+
.onboarding-a-personalize-section-keymap {
419+
gap: 2px;
393420
}
394421

395422
.onboarding-a-section-label {
@@ -408,7 +435,7 @@
408435
}
409436

410437
.onboarding-a-theme-card {
411-
border-radius: 8px;
438+
border-radius: 10px;
412439
border: 2px solid var(--vscode-widget-border, rgba(255, 255, 255, 0.1));
413440
cursor: pointer;
414441
overflow: hidden;
@@ -436,7 +463,7 @@
436463
font-family: var(--monaco-monospace-font, 'Cascadia Code', 'Fira Code', Menlo, monospace);
437464
font-size: 10px;
438465
line-height: 1.5;
439-
min-height: 80px;
466+
min-height: 82px;
440467
text-align: left;
441468
}
442469

@@ -496,32 +523,41 @@
496523
.onboarding-a-sessions {
497524
display: flex;
498525
flex-direction: column;
499-
gap: 18px;
526+
justify-content: space-between;
527+
gap: 14px;
528+
flex: 1;
500529
width: min(664px, 100%);
530+
min-height: 0;
501531
margin: 0 auto;
532+
padding: 0;
502533
}
503534

504535
.onboarding-a-sessions-features {
505536
display: grid;
506537
grid-template-columns: repeat(3, minmax(0, 1fr));
507-
gap: 14px;
538+
gap: 12px;
539+
padding: 14px;
540+
border-radius: 14px;
541+
border: 1px solid var(--vscode-widget-border, rgba(255, 255, 255, 0.08));
542+
background: var(--vscode-editorWidget-background, var(--vscode-sideBar-background));
543+
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
508544
}
509545

510546
.onboarding-a-feature-card {
511547
display: flex;
512548
flex-direction: column;
513-
gap: 10px;
514-
padding: 18px;
515-
border-radius: 8px;
516-
background: var(--vscode-editorWidget-background, var(--vscode-sideBar-background));
549+
gap: 12px;
550+
padding: 18px 16px;
551+
border-radius: 12px;
552+
background: var(--vscode-editor-background);
517553
border: 1px solid var(--vscode-widget-border, rgba(255, 255, 255, 0.08));
518554
cursor: pointer;
519555
transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
520556
outline: none;
521557
font-family: inherit;
522558
text-align: left;
523559
color: inherit;
524-
min-height: 148px;
560+
min-height: 154px;
525561
}
526562

527563
.onboarding-a-feature-card:hover {
@@ -536,18 +572,18 @@
536572
}
537573

538574
.onboarding-a-feature-card .codicon {
539-
font-size: 20px;
575+
font-size: 22px;
540576
color: var(--vscode-textLink-foreground, #3794ff);
541577
}
542578

543579
.onboarding-a-feature-title {
544-
font-size: 13px;
580+
font-size: 14px;
545581
font-weight: 600;
546582
color: var(--vscode-editor-foreground);
547583
}
548584

549585
.onboarding-a-feature-desc {
550-
font-size: 12px;
586+
font-size: 13px;
551587
color: var(--vscode-descriptionForeground);
552588
line-height: 1.5;
553589
}
@@ -556,7 +592,9 @@
556592
display: flex;
557593
flex-wrap: wrap;
558594
gap: 16px;
559-
margin-top: 4px;
595+
margin-top: 0;
596+
padding-top: 10px;
597+
border-top: 1px solid var(--vscode-widget-border, rgba(255, 255, 255, 0.08));
560598
}
561599

562600
.onboarding-a-doc-link {
@@ -580,7 +618,7 @@
580618
}
581619

582620
.onboarding-a-signin-icon-btn {
583-
width: 52px;
621+
width: 48px;
584622
height: 52px;
585623
border-radius: 12px;
586624
border: 1px solid var(--vscode-widget-border, rgba(255, 255, 255, 0.1));
@@ -618,16 +656,17 @@
618656
.onboarding-a-theme-hint {
619657
font-size: 11px;
620658
color: var(--vscode-descriptionForeground);
621-
margin-top: 6px;
622-
font-style: italic;
659+
margin-top: 8px;
623660
}
624661

625662
@media (max-width: 720px) {
626663
.onboarding-a-signin {
664+
display: flex;
627665
flex-direction: column;
628666
align-items: flex-start;
629667
gap: 20px;
630668
min-height: 0;
669+
width: 100%;
631670
}
632671

633672
.onboarding-a-signin-brand {
@@ -655,8 +694,16 @@
655694
justify-content: flex-start;
656695
}
657696

697+
.onboarding-a-signin-actions {
698+
grid-template-columns: repeat(2, minmax(0, 1fr));
699+
}
700+
658701
.onboarding-a-signin-btn {
659-
flex-basis: 100%;
702+
grid-column: 1 / -1;
703+
}
704+
705+
.onboarding-a-signin-icon-btn {
706+
width: 100%;
660707
}
661708

662709
.onboarding-a-theme-grid {
@@ -667,6 +714,10 @@
667714
grid-template-columns: 1fr;
668715
}
669716

717+
.onboarding-a-ext-list {
718+
grid-template-columns: 1fr;
719+
}
720+
670721
.onboarding-a-ext-row {
671722
grid-template-columns: auto 1fr;
672723
}
@@ -675,6 +726,11 @@
675726
grid-column: 2;
676727
justify-self: start;
677728
}
729+
730+
.onboarding-a-personalize,
731+
.onboarding-a-sessions {
732+
justify-content: flex-start;
733+
}
678734
}
679735

680736
/* Mini VS Code skeleton in theme cards */
@@ -744,22 +800,25 @@
744800
.onboarding-a-extensions {
745801
display: flex;
746802
flex-direction: column;
803+
flex: 1;
804+
min-height: 0;
747805
width: min(664px, 100%);
748806
margin: 0 auto;
749807
}
750808

751809
.onboarding-a-ext-list {
752-
display: flex;
753-
flex-direction: column;
810+
display: grid;
811+
grid-template-columns: repeat(2, minmax(0, 1fr));
812+
align-content: start;
754813
gap: 10px;
755814
}
756815

757816
.onboarding-a-ext-row {
758817
display: grid;
759818
grid-template-columns: auto minmax(0, 1fr) auto;
760819
align-items: center;
761-
gap: 14px;
762-
padding: 14px 16px;
820+
gap: 12px;
821+
padding: 12px 14px;
763822
border-radius: 8px;
764823
border: 1px solid var(--vscode-widget-border, rgba(255, 255, 255, 0.08));
765824
background: var(--vscode-editorWidget-background, var(--vscode-sideBar-background));
@@ -806,7 +865,10 @@
806865
font-size: 12px;
807866
color: var(--vscode-descriptionForeground);
808867
line-height: 1.4;
809-
white-space: normal;
868+
display: -webkit-box;
869+
-webkit-line-clamp: 2;
870+
-webkit-box-orient: vertical;
871+
overflow: hidden;
810872
}
811873

812874
.onboarding-a-ext-install {

0 commit comments

Comments
 (0)