development/vscode
development/vscode
1
0
Fork 0
mirror of https://github.com/Microsoft/vscode synced 2024-10-30 08:06:04 +00:00
Code Issues Projects Releases Packages Wiki Activity

Polish getting started styles (#111774)

Browse source 
* Polish getting started styling

* Update margins for task description
This commit is contained in:
Miguel Solorio 2020-12-02 17:48:52 -08:00 committed by GitHub
parent af63e8263a
commit f603b548c5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 50 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

98
src/vs/workbench/contrib/welcome/gettingStarted/browser/gettingStarted.css
View file

@ -17,16 +17,15 @@
}
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.categories .header {
text-align: center;
}
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.categories .title {
display: inline-block;
margin-top: 32px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.categories .category-title {
margin-top: 6px;
margin-bottom: 2px;
margin-bottom: 4px;
}
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.categories .category-description-container {
@ -34,12 +33,12 @@
}
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.categories .category-description {
font-size: 12pt;
font-size: 12px;
}
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.categories .category-progress {
margin-top: 6px;
font-size: 8pt;
margin-top: 12px;
font-size: 12px;
}
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.categories progress {
@ -51,14 +50,13 @@
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 70%;
max-width: 900px;
margin: 20px auto;
margin: 32px auto;
}
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide .getting-started-category {
width: 330px;
min-height: 100px;
min-height: 80px;
text-align: left;
display: flex;
}
@ -68,21 +66,20 @@
}
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide .getting-started-category .codicon {
margin: 10px 8px 0 0;
margin-right: 10px;
font-size: 32px;
}
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.detail .getting-started-category {
width: 330px;
height: 100px;
display: flex;
padding: 40px 0 20px;
margin-left: 12px;
min-height: auto;
}
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.detail .getting-started-category .codicon {
margin-left:0;
margin-top: 28px;
font-size: 22pt;
}
@ -94,34 +91,35 @@
}
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.detail .getting-started-task {
display: flex;
width: 100%;
height: 26pt;
overflow: hidden;
}
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.detail .getting-started-task:not(.expanded) .task-description,
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.detail .getting-started-task:not(.expanded) button,
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.detail .getting-started-task:not(.expanded) a {
display: none;
}
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.detail .getting-started-task.expanded {
width: 100%;
height: unset;
}
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.detail .getting-started-task .task-description-container {
padding-left: 30px;
padding-right: 4px;
}
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.detail .getting-started-task .task-title {
margin-bottom: 4px;
font-size: 14pt;
}
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.detail .getting-started-task .task-description {
font-size: 11pt;
margin-top: 4px;
font-size: 13px;
}
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.detail .getting-started-task .task-next {
float: right;
margin-top: 16px;
margin-top: 24px;
margin-right: 25px;
}
@ -130,15 +128,12 @@
}
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.detail .getting-started-task .codicon {
float: left;
font-size: 20pt;
position: relative;
top: -4px;
left: -1px;
margin-right: 8px;
font-size: 20px;
}
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.detail .getting-started-task-action {
margin: 10px 0 0;
margin: 20px 0 0;
padding: 4px 8px;
font-size: 11pt;
min-width: 100px;
@ -146,7 +141,7 @@
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide.detail #getting-started-detail-left {
min-width: 330px;
width: 33%;
width: 40%;
max-width: 400px;
}
@ -162,7 +157,15 @@
margin: 10px;
color: inherit;
text-align: left;
padding: 10px;
padding: 16px;
}
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer button:hover {
cursor: pointer;
}
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer button:focus {
outline-style: solid;
}
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .prev-button {
@ -177,16 +180,6 @@
top: 2px;
}
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide .product-icon {
background-image: url('../../../../browser/media/code-icon.svg');
width: 75px;
height: 75px;
background-size: contain;
display: inline-block;
margin-right: 20px;
}
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide .skip {
display: block;
width: 150px;
@ -195,25 +188,28 @@
}
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide h1 {
font-size: 32pt;
font-size: 32px;
font-weight: normal;
border-bottom: none;
margin-bottom: 0;
margin: 0;
padding: 0;
}
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide h2 {
font-weight: normal;
margin: 0 0 4px 0;
}
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide h3 {
font-weight: normal;
margin-top: 0;
margin-bottom: 0;
font-size: 18px;
font-weight: bold;
margin: 0;
}
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .gettingStartedSlide .subtitle {
font-size: 18pt;
margin-top: 0;
font-size: 16px;
margin: 0;
padding: 0;
}
.monaco-workbench .part.editor > .content .walkThroughContent .gettingStartedContainer .footer {

2
src/vs/workbench/contrib/welcome/gettingStarted/browser/gettingStarted.ts
View file

@ -288,7 +288,7 @@ export class GettingStartedPage extends Disposable {
const categoryElements = category.content.items.map(
(task, i, arr) => $('button.getting-started-task',
{ 'x-dispatch': 'selectTask:' + task.id, id: 'getting-started-task-' + task.id },
$('.codicon' + (task.done ? '.codicon-star-full' : '.codicon-star-empty'), { id: 'done-task-' + task.id }),
$('.codicon' + (task.done ? '.codicon-pass-filled' : '.codicon-circle-large-outline'), { id: 'done-task-' + task.id }),
$('.task-description-container', {},
$('h3.task-title', {}, task.title),
$('.task-description.description', {}, task.description),

7
src/vs/workbench/contrib/welcome/gettingStarted/browser/vs_code_editor_getting_started.ts
View file

@ -11,11 +11,8 @@ export default () => `
<div class="gettingStarted" role="document">
<div id="gettingStartedSlideCategory" class="gettingStartedSlide categories">
<div class="header">
<div class="product-icon"></div>
<div class="title">
<h1 class="caption"><span id="product-name">${escape(localize('gettingStarted.vscode', "Visual Studio Code"))}</span></h1>
<p class="subtitle description">${escape(localize({ key: 'gettingStarted.editingRedefined', comment: ['Shown as subtitle on the Welcome page.'] }, "Code editing. Redefined"))}</p>
</div>
<h1 id="product-name" class="caption">${escape(localize('gettingStarted.vscode', "Visual Studio Code"))}</h1>
<p class="subtitle description">${escape(localize({ key: 'gettingStarted.editingRedefined', comment: ['Shown as subtitle on the Welcome page.'] }, "Code editing. Redefined"))}</p>
</div>
<div id="getting-started-categories-container"></div>
</div>