Skip to content

V
vscode

xxadev / vscode
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
V
vscode

体验新版 GitCode，发现更多精彩内容 >>

提交 d0de62ea 编写于 作者: C Christof Marti 提交者： Dirk Baeumer
浏览文件
操作

More welcome page colors (#25798)

上级 3356f282
隐藏空白更改
内联 并排
Showing with 47 addition and 86 deletion
src/vs/workbench/parts/welcome/page/electron-browser/vs_code_welcome_page.ts
浏览文件 @ d0de62ea
......@@ -14,13 +14,13 @@ export default () => `
<div class="welcomePageContainer">
<div class="welcomePage">
<div class="title">
<h1>${escape(localize('welcomePage.vscode', "Visual Studio Code"))}</h1>
<p class="subtitle">${escape(localize('welcomePage.editingEvolved', "Editing evolved"))}</p>
<h1 class="caption">${escape(localize('welcomePage.vscode', "Visual Studio Code"))}</h1>
<p class="subtitle detail">${escape(localize('welcomePage.editingEvolved', "Editing evolved"))}</p>
</div>
<div class="row">
<div class="splash">
<div class="section start">
<h2>${escape(localize('welcomePage.start', "Start"))}</h2>
<h2 class="caption">${escape(localize('welcomePage.start', "Start"))}</h2>
<ul>
<li><a href="command:workbench.action.files.newUntitledFile">${escape(localize('welcomePage.newFile', "New file"))}</a></li>
<li class="mac-only"><a href="command:workbench.action.files.openFileFolder">${escape(localize('welcomePage.openFolder', "Open folder..."))}</a></li>
......@@ -29,15 +29,15 @@ export default () => `
</ul>
</div>
<div class="section recent">
<h2>${escape(localize('welcomePage.recent', "Recent"))}</h2>
<h2 class="caption">${escape(localize('welcomePage.recent', "Recent"))}</h2>
<ul class="list">
<!-- Filled programmatically -->
<li class="moreRecent"><a href="command:workbench.action.openRecent">${escape(localize('welcomePage.moreRecent', "More..."))}</a><span class="path if_shortcut" data-command="workbench.action.openRecent">(<span class="shortcut" data-command="workbench.action.openRecent"></span>)</span></li>
<li class="moreRecent"><a href="command:workbench.action.openRecent">${escape(localize('welcomePage.moreRecent', "More..."))}</a><span class="path detail if_shortcut" data-command="workbench.action.openRecent">(<span class="shortcut" data-command="workbench.action.openRecent"></span>)</span></li>
</ul>
<p class="none">${escape(localize('welcomePage.noRecentFolders', "No recent folders"))}</p>
<p class="none detail">${escape(localize('welcomePage.noRecentFolders', "No recent folders"))}</p>
</div>
<div class="section help">
<h2>${escape(localize('welcomePage.help', "Help"))}</h2>
<h2 class="caption">${escape(localize('welcomePage.help', "Help"))}</h2>
<ul>
<li class="keybindingsReferenceLink"><a href="command:workbench.action.keybindingsReference">${escape(localize('welcomePage.keybindingsCheatsheet', "Printable keyboard cheatsheet"))}</a></li>
<li><a href="command:workbench.action.openIntroductoryVideosUrl">${escape(localize('welcomePage.introductoryVideos', "Introductory videos"))}</a></li>
......@@ -46,36 +46,36 @@ export default () => `
<li><a href="http://stackoverflow.com/questions/tagged/vscode?sort=votes&pageSize=50">${escape(localize('welcomePage.stackOverflow', "Stack Overflow"))}</a></li>
</ul>
</div>
<p class="showOnStartup"><input type="checkbox" id="showOnStartup"> <label for="showOnStartup">${escape(localize('welcomePage.showOnStartup', "Show welcome page on startup"))}</label></p>
<p class="showOnStartup"><input type="checkbox" id="showOnStartup"> <label class="caption" for="showOnStartup">${escape(localize('welcomePage.showOnStartup', "Show welcome page on startup"))}</label></p>
</div>
<div class="commands">
<div class="section customize">
<h2>${escape(localize('welcomePage.customize', "Customize"))}</h2>
<h2 class="caption">${escape(localize('welcomePage.customize', "Customize"))}</h2>
<ul>
<li class="showLanguageExtensions"><button data-href="command:workbench.extensions.action.showLanguageExtensions"><h3>${escape(localize('welcomePage.installExtensionPacks', "Tools and languages"))}</h3> <span>${escape(localize('welcomePage.installExtensionPacksDescription', "Install support for {0} and {1}"))
<li class="showLanguageExtensions"><button data-href="command:workbench.extensions.action.showLanguageExtensions"><h3 class="caption">${escape(localize('welcomePage.installExtensionPacks', "Tools and languages"))}</h3> <span class="detail">${escape(localize('welcomePage.installExtensionPacksDescription', "Install support for {0} and {1}"))
.replace('{0}', `<span class="extensionPackList"></span>`)
.replace('{1}', `<a href="command:workbench.extensions.action.showLanguageExtensions">${escape(localize('welcomePage.moreExtensions', "more"))}</a>`)}
</span></button></li>
<li class="showRecommendedKeymapExtensions"><button data-href="command:workbench.extensions.action.showRecommendedKeymapExtensions"><h3>${escape(localize('welcomePage.installKeymapDescription', "Install keyboard shortcuts"))}</h3> <span>${escape(localize('welcomePage.installKeymapExtension', "Install the keyboard shortcuts of {0} and {1}"))
<li class="showRecommendedKeymapExtensions"><button data-href="command:workbench.extensions.action.showRecommendedKeymapExtensions"><h3 class="caption">${escape(localize('welcomePage.installKeymapDescription', "Install keyboard shortcuts"))}</h3> <span class="detail">${escape(localize('welcomePage.installKeymapExtension', "Install the keyboard shortcuts of {0} and {1}"))
.replace('{0}', `<span class="keymapList"></span>`)
.replace('{1}', `<a href="command:workbench.extensions.action.showRecommendedKeymapExtensions">${escape(localize('welcomePage.others', "others"))}</a>`)}
</span></button></li>
<li class="selectTheme"><button data-href="command:workbench.action.selectTheme"><h3>${escape(localize('welcomePage.colorTheme', "Color theme"))}</h3> <span>${escape(localize('welcomePage.colorThemeDescription', "Make the editor and your code look the way you love"))}</span></button></li>
<li class="selectTheme"><button data-href="command:workbench.action.selectTheme"><h3 class="caption">${escape(localize('welcomePage.colorTheme', "Color theme"))}</h3> <span class="detail">${escape(localize('welcomePage.colorThemeDescription', "Make the editor and your code look the way you love"))}</span></button></li>
</ul>
</div>
<div class="section learn">
<h2>${escape(localize('welcomePage.learn', "Learn"))}</h2>
<h2 class="caption">${escape(localize('welcomePage.learn', "Learn"))}</h2>
<ul>
<li class="showCommands"><button data-href="command:workbench.action.showCommands"><h3>${escape(localize('welcomePage.showCommands', "Find and run all commands"))}</h3> <span>${escape(localize('welcomePage.showCommandsDescription', "Rapidly access and search commands from the control panel ({0})")).replace('{0}', '<span class="shortcut" data-command="workbench.action.showCommands"></span>')}</span></button></li>
<li class="showInterfaceOverview"><button data-href="command:workbench.action.showInterfaceOverview"><h3>${escape(localize('welcomePage.interfaceOverview', "Interface overview"))}</h3> <span>${escape(localize('welcomePage.interfaceOverviewDescription', "Get a visual overlay highlighting the major components of the UI"))}</span></button></li>
<li class="showInteractivePlayground"><button data-href="command:workbench.action.showInteractivePlayground"><h3>${escape(localize('welcomePage.interactivePlayground', "Interactive playground"))}</h3> <span>${escape(localize('welcomePage.interactivePlaygroundDescription', "Try essential editor features out in a short walkthrough"))}</span></button></li>
<li class="showCommands"><button data-href="command:workbench.action.showCommands"><h3 class="caption">${escape(localize('welcomePage.showCommands', "Find and run all commands"))}</h3> <span class="detail">${escape(localize('welcomePage.showCommandsDescription', "Rapidly access and search commands from the control panel ({0})")).replace('{0}', '<span class="shortcut" data-command="workbench.action.showCommands"></span>')}</span></button></li>
<li class="showInterfaceOverview"><button data-href="command:workbench.action.showInterfaceOverview"><h3 class="caption">${escape(localize('welcomePage.interfaceOverview', "Interface overview"))}</h3> <span class="detail">${escape(localize('welcomePage.interfaceOverviewDescription', "Get a visual overlay highlighting the major components of the UI"))}</span></button></li>
<li class="showInteractivePlayground"><button data-href="command:workbench.action.showInteractivePlayground"><h3 class="caption">${escape(localize('welcomePage.interactivePlayground', "Interactive playground"))}</h3> <span class="detail">${escape(localize('welcomePage.interactivePlaygroundDescription', "Try essential editor features out in a short walkthrough"))}</span></button></li>
</ul>
</div>
<div class="section quickLinks">
<h2>${escape(localize('welcomePage.quickLinks', "Quick links"))}</h2>
<h2 class="caption">${escape(localize('welcomePage.quickLinks', "Quick links"))}</h2>
<ul>
<li class="keybindingsReference"><button data-href="command:workbench.action.keybindingsReference"><h3>${escape(localize('welcomePage.keybindingsReference', "Keyboard shortcuts reference"))}</h3> <span>${escape(localize('welcomePage.keybindingsReferenceDescription', "A printable PDF with the most common keyboard shortcuts"))}</span></button></li>
<li class="openGlobalSettings"><button data-href="command:workbench.action.openGlobalSettings"><h3>${escape(localize('welcomePage.configureSettings', "Configure settings"))}</h3> <span>${escape(localize('welcomePage.configureSettingsDescription', "Unlock the full power of VS Code by tweaking the settings"))}</span></button></li>
<li class="keybindingsReference"><button data-href="command:workbench.action.keybindingsReference"><h3 class="caption">${escape(localize('welcomePage.keybindingsReference', "Keyboard shortcuts reference"))}</h3> <span class="detail">${escape(localize('welcomePage.keybindingsReferenceDescription', "A printable PDF with the most common keyboard shortcuts"))}</span></button></li>
<li class="openGlobalSettings"><button data-href="command:workbench.action.openGlobalSettings"><h3 class="caption">${escape(localize('welcomePage.configureSettings', "Configure settings"))}</h3> <span class="detail">${escape(localize('welcomePage.configureSettingsDescription', "Unlock the full power of VS Code by tweaking the settings"))}</span></button></li>
</ul>
</div>
</div>
......
src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.css
浏览文件 @ d0de62ea
......@@ -16,9 +16,6 @@
max-width: 1200px;
font-size: 10px;
}
.vs .monaco-workbench > .part.editor > .content .welcomePage {
color: #6C6C6C;
}
.monaco-workbench > .part.editor > .content .welcomePage .row {
display: flex;
......@@ -41,66 +38,36 @@
}
.monaco-workbench > .part.editor > .content .welcomePage a {
color: #2e70c0;
text-decoration: none;
}
.vs-dark .monaco-workbench > .part.editor > .content .welcomePage a {
color: #4080D0;
}
.monaco-workbench > .part.editor > .content .welcomePage a:focus {
outline: 1px solid -webkit-focus-ring-color;
outline-offset: -1px;
}
.monaco-workbench > .part.editor > .content .welcomePage a:hover {
color: #6ea0dc;
}
.hc-black .monaco-workbench > .part.editor > .content .welcomePage a {
color: #0b9eff;
}
.hc-black .monaco-workbench > .part.editor > .content .welcomePage a:hover {
color: #f38518;
}
.monaco-workbench > .part.editor > .content .welcomePage h1 {
padding: 0;
margin: 0;
border: none;
font-weight: normal;
color: rgba(0,0,0,.8);
font-size: 3.6em;
white-space: nowrap;
}
.vs-dark .monaco-workbench > .part.editor > .content .welcomePage h1 {
color: rgba(255,255,255,.76);
}
.hc-black .monaco-workbench > .part.editor > .content .welcomePage h1 {
color: white;
}
.monaco-workbench > .part.editor > .content .welcomePage .title {
margin-top: 1em;
margin-bottom: 1em;
flex: 1 100%;
}
.monaco-workbench > .part.editor > .content .welcomePage .subtitle {
margin-top: .8em;
font-size: 2.6em;
color: rgba(0,0,0,.53);
display: block;
}
.vs-dark .monaco-workbench > .part.editor > .content .welcomePage .subtitle {
color: rgba(255,255,255,.46);
}
.hc-black .monaco-workbench > .part.editor > .content .welcomePage .subtitle {
color: white;
font-weight: 200;
}
......@@ -150,22 +117,6 @@
}
.monaco-workbench > .part.editor > .content .welcomePage .splash .recent .path {
padding-left: 1em;
color: rgba(255,255,255,.46);
}
.monaco-workbench > .part.editor > .content .welcomePage .splash .recent .none,
.monaco-workbench > .part.editor > .content .welcomePage .splash .recent .path {
color: rgba(0,0,0,.53);
}
.vs-dark .monaco-workbench > .part.editor > .content .welcomePage .splash .recent .none,
.vs-dark .monaco-workbench > .part.editor > .content .welcomePage .splash .recent .path {
color: rgba(255,255,255,.46);
}
.hc-black .monaco-workbench > .part.editor > .content .welcomePage .splash .recent .none,
.hc-black .monaco-workbench > .part.editor > .content .welcomePage .splash .recent .path {
color: white;
}
.monaco-workbench > .part.editor > .content .welcomePage .splash .title,
......@@ -207,41 +158,27 @@
margin-bottom: .25em;
}
.vs .monaco-workbench > .part.editor > .content .welcomePage .commands li button h3 {
color: #2c2c2c;
}
.monaco-workbench > .part.editor > .content .welcomePage .commands li button {
color: #6c6c6c;
border: none;
}
.vs-dark .monaco-workbench > .part.editor > .content .welcomePage .commands li button > h3 {
color: #ccc;
}
.hc-black .monaco-workbench > .part.editor > .content .welcomePage .commands li button > h3 {
font-weight: bold;
}
.vs-dark .monaco-workbench > .part.editor > .content .welcomePage .commands li button {
color: #828282;
}
.monaco-workbench > .part.editor > .content .welcomePage .commands li button:focus {
outline-style: solid;
outline-width: 1px;
}
.hc-black .monaco-workbench > .part.editor > .content .welcomePage .commands li button {
color: white;
border-color: #f38518;
border-width: 1px;
border-style: solid;
}
.hc-black .monaco-workbench > .part.editor > .content .welcomePage .commands li button:hover {
outline: 1px dashed #f38518;
outline-width: 1px;
outline-style: dashed;
outline-offset: -5px;
}
......
src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.ts
浏览文件 @ d0de62ea
......@@ -35,7 +35,7 @@ import { IDisposable, dispose } from 'vs/base/common/lifecycle';
import { tildify } from 'vs/base/common/labels';
import { isLinux } from 'vs/base/common/platform';
import { IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
import { registerColor } from 'vs/platform/theme/common/colorRegistry';
import { registerColor, textLinkForeground, foreground, contrastBorder, activeContrastBorder } from 'vs/platform/theme/common/colorRegistry';
import { getExtraColor } from 'vs/workbench/parts/welcome/walkThrough/node/walkThroughUtils';
used();
......@@ -240,6 +240,7 @@ class WelcomePage {
const span = document.createElement('span');
span.classList.add('path');
span.classList.add('detail');
span.innerText = tildify(parentFolder, this.environmentService.userHome);
span.title = folder;
li.appendChild(span);
......@@ -446,10 +447,21 @@ class WelcomePage {
// theming
const caption = registerColor('welcomePage.caption', { dark: '#FFFFFFC2', light: '#000000D4', hc: foreground }, localize('welcomePage.caption', 'Caption color on the Welcome page.'));
const detail = registerColor('welcomePage.detail', { dark: '#FFFFFF76', light: '#00000088', hc: foreground }, localize('welcomePage.detail', 'Detail color on the Welcome page.'));
const quickLinkBackground = registerColor('welcomePage.quickLinkBackground', { dark: null, light: null, hc: null }, localize('welcomePage.quickLinkBackground', 'Background color for the quick links on the Welcome page.'));
const quickLinkHoverBackground = registerColor('welcomePage.quickLinkHoverBackground', { dark: null, light: null, hc: null }, localize('welcomePage.quickLinkHoverBackground', 'Hover background color for the quick links on the Welcome page.'));
registerThemingParticipant((theme, collector) => {
const captionColor = theme.getColor(caption);
if (captionColor) {
collector.addRule(`.monaco-workbench > .part.editor > .content .welcomePage .caption { color: ${captionColor}; }`);
}
const detailColor = theme.getColor(detail);
if (detailColor) {
collector.addRule(`.monaco-workbench > .part.editor > .content .welcomePage .detail { color: ${detailColor}; }`);
}
const color = getExtraColor(theme, quickLinkBackground, { dark: 'rgba(0, 0, 0, .2)', extra_dark: 'rgba(200, 235, 255, .042)', light: 'rgba(0,0,0,.04)', hc: 'black' });
if (color) {
collector.addRule(`.monaco-workbench > .part.editor > .content .welcomePage .commands li button { background: ${color}; }`);
......@@ -458,4 +470,16 @@ registerThemingParticipant((theme, collector) => {
if (hover) {
collector.addRule(`.monaco-workbench > .part.editor > .content .welcomePage .commands li button:hover { background: ${hover}; }`);
}
const link = theme.getColor(textLinkForeground);
if (link) {
collector.addRule(`.monaco-workbench > .part.editor > .content .welcomePage a { color: ${link}; }`);
}
const border = theme.getColor(contrastBorder);
if (border) {
collector.addRule(`.monaco-workbench > .part.editor > .content .welcomePage .commands li button { border-color: ${border}; }`);
}
const activeBorder = theme.getColor(activeContrastBorder);
if (activeBorder) {
collector.addRule(`.monaco-workbench > .part.editor > .content .welcomePage .commands li button:hover { outline-color: ${activeBorder}; }`);
}
});
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或