From 44bfa311d3b0eac0e94871ece6389315608ee85e Mon Sep 17 00:00:00 2001 From: David Dossett Date: Thu, 17 Nov 2022 14:28:20 -0800 Subject: [PATCH] Polish walkthrough steps (#166644) * Remove til shadows and fix fonts * More polish --- .../browser/gettingStarted.ts | 2 +- .../browser/gettingStartedColors.ts | 3 +- .../browser/media/gettingStarted.css | 45 ++++++++++++------- 3 files changed, 32 insertions(+), 18 deletions(-) diff --git a/src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted.ts b/src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted.ts index e6e015a1bce..84c129302d4 100644 --- a/src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted.ts +++ b/src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted.ts @@ -1340,7 +1340,7 @@ export class GettingStartedPage extends EditorPane { $('.done-next-container', {}, $('button.button-link.all-done', { 'x-dispatch': 'allDone' }, $('span.codicon.codicon-check-all'), localize('allDone', "Mark Done")), ...(showNextCategory - ? [$('button.button-link.next', { 'x-dispatch': 'nextSection' }, localize('nextOne', "Next Section"), $('span.codicon.codicon-arrow-small-right'))] + ? [$('button.button-link.next', { 'x-dispatch': 'nextSection' }, localize('nextOne', "Next Section"), $('span.codicon.codicon-arrow-right'))] : []), ) ); diff --git a/src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStartedColors.ts b/src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStartedColors.ts index 90af3e2eee4..b469ad52dab 100644 --- a/src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStartedColors.ts +++ b/src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStartedColors.ts @@ -3,7 +3,7 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -import { darken, inputBackground, editorWidgetBackground, lighten, registerColor, textLinkForeground, widgetShadow } from 'vs/platform/theme/common/colorRegistry'; +import { darken, inputBackground, editorWidgetBackground, lighten, registerColor, textLinkForeground } from 'vs/platform/theme/common/colorRegistry'; import { localize } from 'vs/nls'; // Seprate from main module to break dependency cycles between welcomePage and gettingStarted. @@ -11,7 +11,6 @@ export const welcomePageBackground = registerColor('welcomePage.background', { l export const welcomePageTileBackground = registerColor('welcomePage.tileBackground', { dark: editorWidgetBackground, light: editorWidgetBackground, hcDark: '#000', hcLight: editorWidgetBackground }, localize('welcomePage.tileBackground', 'Background color for the tiles on the Get Started page.')); export const welcomePageTileHoverBackground = registerColor('welcomePage.tileHoverBackground', { dark: lighten(editorWidgetBackground, .2), light: darken(editorWidgetBackground, .1), hcDark: null, hcLight: null }, localize('welcomePage.tileHoverBackground', 'Hover background color for the tiles on the Get Started.')); -export const welcomePageTileShadow = registerColor('welcomePage.tileShadow', { light: widgetShadow, dark: widgetShadow, hcDark: null, hcLight: null }, localize('welcomePage.tileShadow', 'Shadow color for the Welcome page walkthrough category buttons.')); export const welcomePageProgressBackground = registerColor('welcomePage.progress.background', { light: inputBackground, dark: inputBackground, hcDark: inputBackground, hcLight: inputBackground }, localize('welcomePage.progress.background', 'Foreground color for the Welcome page progress bars.')); export const welcomePageProgressForeground = registerColor('welcomePage.progress.foreground', { light: textLinkForeground, dark: textLinkForeground, hcDark: textLinkForeground, hcLight: textLinkForeground }, localize('welcomePage.progress.foreground', 'Background color for the Welcome page progress bars.')); diff --git a/src/vs/workbench/contrib/welcomeGettingStarted/browser/media/gettingStarted.css b/src/vs/workbench/contrib/welcomeGettingStarted/browser/media/gettingStarted.css index 23cb924678c..bb8bb4e7839 100644 --- a/src/vs/workbench/contrib/welcomeGettingStarted/browser/media/gettingStarted.css +++ b/src/vs/workbench/contrib/welcomeGettingStarted/browser/media/gettingStarted.css @@ -399,6 +399,7 @@ width: 100%; margin: 4px 0; overflow: hidden; + border-radius: 3px; } .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .button-container:not(:last-of-type) { @@ -407,6 +408,7 @@ .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step.expanded { cursor: default !important; + border: 1px solid var(--vscode-editorWidget-border); } .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step.expanded>.codicon { @@ -455,12 +457,12 @@ } .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .shortcut-message { - opacity: 0.8; - font-size: 8pt; + color: var(--vscode-descriptionForeground); + font-size: 12px; } .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .shortcut-message .keybinding { - font-weight: bold; + font-weight: 600; } .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .step-next { @@ -626,9 +628,14 @@ cursor: pointer; } +/* Don't show focus outline on mouse click. Instead only show outline on keyboard focus. */ .monaco-workbench .part.editor>.content .gettingStartedContainer button:focus { - outline-style: solid; - outline-width: 1px; + outline: none; +} + +.monaco-workbench .part.editor>.content .gettingStartedContainer button:focus-visible { + outline: 1px solid var(--vscode-focusBorder); + outline-offset: -1px; } .monaco-workbench .part.editor>.content .gettingStartedContainer .prev-button.button-link { @@ -668,12 +675,12 @@ left: -4px; } -.monaco-workbench .part.editor>.content .gettingStartedContainer .button-link .codicon-arrow-small-right { - padding-left: 8px; +.monaco-workbench .part.editor>.content .gettingStartedContainer .button-link .codicon-arrow-right { + padding-left: 4px; } .monaco-workbench .part.editor>.content .gettingStartedContainer .button-link .codicon-check-all { - padding-right: 8px; + padding-right: 4px; } .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .skip { @@ -684,9 +691,9 @@ } .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails h2 { + font-size: 26px; font-weight: normal; - line-height: 26px; - margin: 0 0 4px 0; + margin: 0 0 8px 0; } .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails h2 .codicon { @@ -695,7 +702,7 @@ .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails h3 { font-size: 13px; - font-weight: 700; + font-weight: 600; margin: 0; } @@ -800,6 +807,10 @@ visibility: visible; } +.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .step-description-container span { + line-height: 1.3em; +} + .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .step-description-container .monaco-button, .monaco-workbench .part.editor>.content .gettingStartedContainer .max-lines-3 { /* Supported everywhere: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp#browser_compatibility */ -webkit-line-clamp: 3; @@ -808,6 +819,13 @@ overflow: hidden; } +.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .step-description-container .monaco-button { + height: 26px; + display: flex; + margin-bottom: 8px; + align-items: center; +} + .monaco-workbench .part.editor>.content .gettingStartedContainer .hide-category-button { padding: 3px; border-radius: 5px; @@ -828,6 +846,7 @@ .monaco-workbench .part.editor > .content .gettingStartedContainer .description { color: var(--vscode-descriptionForeground); + line-height: 1.4em; } .monaco-workbench .part.editor > .content .gettingStartedContainer .category-progress .message { @@ -854,10 +873,6 @@ background: var(--vscode-welcomePage-tileBackground); } -.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideCategories .getting-started-category { - filter: drop-shadow(2px 2px 2px var(--vscode-welcomePage-tileShadow)); -} - .monaco-workbench .part.editor > .content .gettingStartedContainer button:hover { background: var(--vscode-welcomePage-tileHoverBackground); outline-color: var(--vscode-contrastActiveBorder, var(--vscode-focusBorder));