Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-05-08 09:08:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

Polish walkthrough steps (#166644)

Browse Source 
* Remove til shadows and fix fonts

* More polish
This commit is contained in:
David Dossett
2022-11-17 14:28:20 -08:00
committed by GitHub
parent b2b020d77c
commit 44bfa311d3
3 changed files with 32 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted.ts
+1 -1
View File
@@ -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'))]
: []),
)
);
src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStartedColors.ts
+1 -2
View File
@@ -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.'));
src/vs/workbench/contrib/welcomeGettingStarted/browser/media/gettingStarted.css
+30 -15
View File
@@ -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));