From d0de62ea2b7158b2c5882928c7d079b4fafd1b56 Mon Sep 17 00:00:00 2001 From: Christof Marti Date: Thu, 25 May 2017 09:09:41 -0700 Subject: [PATCH] More welcome page colors (#25798) --- .../electron-browser/vs_code_welcome_page.ts | 38 +++++----- .../page/electron-browser/welcomePage.css | 69 +------------------ .../page/electron-browser/welcomePage.ts | 26 ++++++- 3 files changed, 47 insertions(+), 86 deletions(-) diff --git a/src/vs/workbench/parts/welcome/page/electron-browser/vs_code_welcome_page.ts b/src/vs/workbench/parts/welcome/page/electron-browser/vs_code_welcome_page.ts index cc27fe4978c..767ee36747a 100644 --- a/src/vs/workbench/parts/welcome/page/electron-browser/vs_code_welcome_page.ts +++ b/src/vs/workbench/parts/welcome/page/electron-browser/vs_code_welcome_page.ts @@ -14,13 +14,13 @@ export default () => `
-

${escape(localize('welcomePage.vscode', "Visual Studio Code"))}

-

${escape(localize('welcomePage.editingEvolved', "Editing evolved"))}

+

${escape(localize('welcomePage.vscode', "Visual Studio Code"))}

+

${escape(localize('welcomePage.editingEvolved', "Editing evolved"))}

-

${escape(localize('welcomePage.start', "Start"))}

+

${escape(localize('welcomePage.start', "Start"))}

-

${escape(localize('welcomePage.recent', "Recent"))}

+

${escape(localize('welcomePage.recent', "Recent"))}

-

${escape(localize('welcomePage.noRecentFolders', "No recent folders"))}

+

${escape(localize('welcomePage.noRecentFolders', "No recent folders"))}

-

${escape(localize('welcomePage.help', "Help"))}

+

${escape(localize('welcomePage.help', "Help"))}

-

+

-

${escape(localize('welcomePage.customize', "Customize"))}

+

${escape(localize('welcomePage.customize', "Customize"))}

    -
    • -
    • -
    • +
-

${escape(localize('welcomePage.learn', "Learn"))}

+

${escape(localize('welcomePage.learn', "Learn"))}

    -
    • -
    • -
    • +
    • +
    • +
-

${escape(localize('welcomePage.quickLinks', "Quick links"))}

+

${escape(localize('welcomePage.quickLinks', "Quick links"))}

    -
    • -
    • +
    • +
diff --git a/src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.css b/src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.css index 982a72d9d1b..a3c2fa3e686 100644 --- a/src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.css +++ b/src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.css @@ -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; } diff --git a/src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.ts b/src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.ts index 874bc17d8dd..86dde1dd27d 100644 --- a/src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.ts +++ b/src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.ts @@ -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}; }`); + } }); -- GitLab