mirror of
https://github.com/Microsoft/vscode
synced 2024-08-27 21:09:43 +00:00
Switch to using CSS (#165185)
* Switch to using CSS * Better fallback value
This commit is contained in:
Logan Ramos
GitHub
parent
cbf6c41591
commit
cc7114b3ba
|
|
@ -13,9 +13,7 @@ import { $, addDisposableListener, append, clearNode, Dimension, reset } from 'v
|
|||
import { ICommandService } from 'vs/platform/commands/common/commands';
|
||||
import { IProductService } from 'vs/platform/product/common/productService';
|
||||
import { hiddenEntriesConfigurationKey, IResolvedWalkthrough, IResolvedWalkthroughStep, IWalkthroughsService } from 'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStartedService';
|
||||
import { IThemeService, registerThemingParticipant, ThemeIcon } from 'vs/platform/theme/common/themeService';
|
||||
import { welcomePageBackground, welcomePageProgressBackground, welcomePageProgressForeground, welcomePageTileBackground, welcomePageTileHoverBackground, welcomePageTileShadow } from 'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStartedColors';
|
||||
import { activeContrastBorder, buttonBackground, buttonForeground, buttonHoverBackground, contrastBorder, descriptionForeground, focusBorder, foreground, checkboxBackground, checkboxBorder, checkboxForeground, textLinkActiveForeground, textLinkForeground } from 'vs/platform/theme/common/colorRegistry';
|
||||
import { IThemeService, ThemeIcon } from 'vs/platform/theme/common/themeService';
|
||||
import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
|
||||
import { firstSessionDateStorageKey, ITelemetryService, TelemetryLevel } from 'vs/platform/telemetry/common/telemetry';
|
||||
import { DomScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement';
|
||||
|
|
@ -55,7 +53,6 @@ import { Schemas } from 'vs/base/common/network';
|
|||
import { IEditorOptions } from 'vs/platform/editor/common/editor';
|
||||
import { coalesce, equals, flatten } from 'vs/base/common/arrays';
|
||||
import { ThemeSettings } from 'vs/workbench/services/themes/common/workbenchThemeService';
|
||||
import { ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_BADGE_FOREGROUND } from 'vs/workbench/common/theme';
|
||||
import { startEntries } from 'vs/workbench/contrib/welcomeGettingStarted/common/gettingStartedContent';
|
||||
import { MarkdownRenderer } from 'vs/editor/contrib/markdownRenderer/browser/markdownRenderer';
|
||||
import { GettingStartedIndexList } from './gettingStartedList';
|
||||
|
|
@ -1457,131 +1454,3 @@ export class GettingStartedInputSerializer implements IEditorSerializer {
|
|||
return new GettingStartedInput({});
|
||||
}
|
||||
}
|
||||
|
||||
registerThemingParticipant((theme, collector) => {
|
||||
|
||||
const backgroundColor = theme.getColor(welcomePageBackground);
|
||||
if (backgroundColor) {
|
||||
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer { background-color: ${backgroundColor}; }`);
|
||||
}
|
||||
|
||||
const foregroundColor = theme.getColor(foreground);
|
||||
if (foregroundColor) {
|
||||
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer { color: ${foregroundColor}; }`);
|
||||
}
|
||||
|
||||
const descriptionColor = theme.getColor(descriptionForeground);
|
||||
if (descriptionColor) {
|
||||
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .description { color: ${descriptionColor}; }`);
|
||||
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .category-progress .message { color: ${descriptionColor}; }`);
|
||||
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .gettingStartedDetailsContent > .getting-started-footer { color: ${descriptionColor}; }`);
|
||||
}
|
||||
|
||||
const iconColor = theme.getColor(textLinkForeground);
|
||||
if (iconColor) {
|
||||
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .icon-widget { color: ${iconColor} }`);
|
||||
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .codicon-getting-started-step-checked { color: ${iconColor} } `);
|
||||
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step.expanded .codicon-getting-started-step-unchecked { color: ${iconColor} } `);
|
||||
}
|
||||
|
||||
const buttonColor = theme.getColor(welcomePageTileBackground);
|
||||
if (buttonColor) {
|
||||
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button { background: ${buttonColor}; }`);
|
||||
}
|
||||
|
||||
const shadowColor = theme.getColor(welcomePageTileShadow);
|
||||
if (shadowColor) {
|
||||
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideCategories .getting-started-category { filter: drop-shadow(2px 2px 2px ${buttonColor}); }`);
|
||||
}
|
||||
|
||||
const buttonHoverColor = theme.getColor(welcomePageTileHoverBackground);
|
||||
if (buttonHoverColor) {
|
||||
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button:hover { background: ${buttonHoverColor}; }`);
|
||||
}
|
||||
if (buttonColor && buttonHoverColor) {
|
||||
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button.expanded:hover { background: ${buttonColor}; }`);
|
||||
}
|
||||
|
||||
const emphasisButtonForeground = theme.getColor(buttonForeground);
|
||||
if (emphasisButtonForeground) {
|
||||
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button.emphasis { color: ${emphasisButtonForeground}; }`);
|
||||
}
|
||||
|
||||
const emphasisButtonBackground = theme.getColor(buttonBackground);
|
||||
if (emphasisButtonBackground) {
|
||||
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button.emphasis { background: ${emphasisButtonBackground}; }`);
|
||||
}
|
||||
|
||||
const pendingStepColor = theme.getColor(descriptionForeground);
|
||||
if (pendingStepColor) {
|
||||
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .codicon-getting-started-step-unchecked { color: ${pendingStepColor} } `);
|
||||
}
|
||||
|
||||
const emphasisButtonHoverBackground = theme.getColor(buttonHoverBackground);
|
||||
if (emphasisButtonHoverBackground) {
|
||||
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button.emphasis:hover { background: ${emphasisButtonHoverBackground}; }`);
|
||||
}
|
||||
|
||||
const link = theme.getColor(textLinkForeground);
|
||||
if (link) {
|
||||
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer a:not(.hide-category-button) { color: ${link}; }`);
|
||||
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .button-link { color: ${link}; }`);
|
||||
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .button-link .codicon { color: ${link}; }`);
|
||||
}
|
||||
const activeLink = theme.getColor(textLinkActiveForeground);
|
||||
if (activeLink) {
|
||||
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer a:not(.hide-category-button):hover { color: ${activeLink}; }`);
|
||||
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer a:not(.hide-category-button):active { color: ${activeLink}; }`);
|
||||
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button.button-link:hover { color: ${activeLink}; }`);
|
||||
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button.button-link:hover .codicon { color: ${activeLink}; }`);
|
||||
}
|
||||
const focusColor = theme.getColor(focusBorder);
|
||||
if (focusColor) {
|
||||
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer a:not(.codicon-close):focus { outline-color: ${focusColor}; }`);
|
||||
}
|
||||
const border = theme.getColor(contrastBorder);
|
||||
if (border) {
|
||||
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button { border: 1px solid ${border}; }`);
|
||||
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button.button-link { border: inherit; }`);
|
||||
}
|
||||
const activeBorder = theme.getColor(activeContrastBorder);
|
||||
if (activeBorder) {
|
||||
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button:hover { outline-color: ${activeBorder}; }`);
|
||||
}
|
||||
|
||||
const progressBackground = theme.getColor(welcomePageProgressBackground);
|
||||
if (progressBackground) {
|
||||
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideCategories .progress-bar-outer { background-color: ${progressBackground}; }`);
|
||||
}
|
||||
const progressForeground = theme.getColor(welcomePageProgressForeground);
|
||||
if (progressForeground) {
|
||||
collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideCategories .progress-bar-inner { background-color: ${progressForeground}; }`);
|
||||
}
|
||||
|
||||
const newBadgeForeground = theme.getColor(ACTIVITY_BAR_BADGE_FOREGROUND);
|
||||
if (newBadgeForeground) {
|
||||
collector.addRule(`.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .new-badge { color: ${newBadgeForeground}; }`);
|
||||
collector.addRule(`.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .featured .featured-icon { color: ${newBadgeForeground}; }`);
|
||||
}
|
||||
|
||||
const newBadgeBackground = theme.getColor(ACTIVITY_BAR_BADGE_BACKGROUND);
|
||||
if (newBadgeBackground) {
|
||||
collector.addRule(`.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .new-badge { background-color: ${newBadgeBackground}; }`);
|
||||
collector.addRule(`.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .featured { border-top-color: ${newBadgeBackground}; }`);
|
||||
}
|
||||
|
||||
const checkboxBackgroundColor = theme.getColor(checkboxBackground);
|
||||
if (checkboxBackgroundColor) {
|
||||
collector.addRule(`.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-checkbox { background-color: ${checkboxBackgroundColor} !important; }`);
|
||||
}
|
||||
|
||||
const checkboxForegroundColor = theme.getColor(checkboxForeground);
|
||||
if (checkboxForegroundColor) {
|
||||
collector.addRule(`.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-checkbox { color: ${checkboxForegroundColor} !important; }`);
|
||||
}
|
||||
|
||||
const checkboxBorderColor = theme.getColor(checkboxBorder);
|
||||
if (checkboxBorderColor) {
|
||||
collector.addRule(`.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-checkbox { border-color: ${checkboxBorderColor} !important; }`);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -820,3 +820,141 @@
|
|||
.monaco-workbench .part.editor>.content .gettingStartedContainer .hide-category-button:hover {
|
||||
background-color: var(--vscode-toolbar-hoverBackground);
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor > .content .gettingStartedContainer {
|
||||
background: var(--vscode-welcomePage-background);
|
||||
color: var(--vscode-foreground);
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor > .content .gettingStartedContainer .description {
|
||||
color: var(--vscode-descriptionForeground);
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor > .content .gettingStartedContainer .category-progress .message {
|
||||
color: var(--vscode-descriptionForeground);
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .gettingStartedDetailsContent > .getting-started-footer {
|
||||
color: var(--vscode-descriptionForeground);
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor > .content .gettingStartedContainer .icon-widget {
|
||||
color: var(--vscode-textLink-foreground);
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .codicon-getting-started-step-checked {
|
||||
color: var(--vscode-textLink-foreground);
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step.expanded .codicon-getting-started-step-unchecked {
|
||||
color: var(--vscode-textLink-foreground);
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor > .content .gettingStartedContainer button {
|
||||
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));
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor > .content .gettingStartedContainer button.expanded:hover {
|
||||
background: var(--vscode-welcomePage-tileBackground);
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor > .content .gettingStartedContainer button.emphasis {
|
||||
color: var(--vscode-button-foreground);
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor > .content .gettingStartedContainer button.emphasis {
|
||||
background: var(--vscode-button-background);
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .codicon-getting-started-step-unchecked {
|
||||
color: var(--vscode-descriptionForeground);
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor > .content .gettingStartedContainer button.emphasis:hover {
|
||||
background: var(--vscode-button-hoverBackground);
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor > .content .gettingStartedContainer a:not(.hide-category-button) {
|
||||
color: var(--vscode-textLink-foreground);
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor > .content .gettingStartedContainer .button-link {
|
||||
color: var(--vscode-textLink-foreground);
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor > .content .gettingStartedContainer .button-link .codicon {
|
||||
color: var(--vscode-textLink-foreground);
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor > .content .gettingStartedContainer a:not(.hide-category-button):hover {
|
||||
color: var(--vscode-textLink-activeForeground);
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor > .content .gettingStartedContainer a:not(.hide-category-button):active {
|
||||
color: var(--vscode-textLink-activeForeground);
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor > .content .gettingStartedContainer button.button-link:hover {
|
||||
color: var(--vscode-textLink-activeForeground);
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor > .content .gettingStartedContainer button.button-link:hover .codicon {
|
||||
color: var(--vscode-textLink-activeForeground);
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor > .content .gettingStartedContainer a:not(.codicon-close):focus {
|
||||
outline-color: var(--vscode-focusBorder);
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor > .content .gettingStartedContainer button {
|
||||
border: 1px solid var(--vscode-contrastBorder);
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor > .content .gettingStartedContainer button.button-link {
|
||||
border: inherit;
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideCategories .progress-bar-outer {
|
||||
background-color: var(--vscode-welcomePage-progress-background);
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideCategories .progress-bar-inner {
|
||||
background-color: var(--vscode-welcomePage-progress-foreground);
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .new-badge {
|
||||
color: var(--vscode-activityBarBadge-foreground);
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .featured .featured-icon {
|
||||
color: var(--vscode-activityBarBadge-foreground);
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .new-badge {
|
||||
background-color: var(--vscode-activityBarBadge-background);
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .featured {
|
||||
border-top-color: var(--vscode-activityBarBadge-background);
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-checkbox {
|
||||
background-color: var(--vscode-checkbox-background) !important;
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-checkbox {
|
||||
color: var(--vscode-checkbox-foreground) !important;
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-checkbox {
|
||||
border-color: var(--vscode-checkbox-border) !important;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue