mirror of
https://github.com/microsoft/vscode.git
synced 2026-09-27 19:08:21 +01:00
consolidate stylings and fix color when item is active and focused
This commit is contained in:
@@ -156,30 +156,6 @@ registerThemingParticipant((theme, collector) => {
|
||||
`);
|
||||
}
|
||||
|
||||
// Title focus
|
||||
const focusBorderColor = theme.getColor(focusBorder);
|
||||
if (focusBorderColor) {
|
||||
collector.addRule(`
|
||||
.monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus .active-item-indicator:before {
|
||||
border-top-color: ${focusBorderColor};
|
||||
}
|
||||
`);
|
||||
collector.addRule(`
|
||||
.monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus {
|
||||
outline: none;
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
const titleActiveBorder = theme.getColor(PANEL_ACTIVE_TITLE_BORDER);
|
||||
if (titleActiveBorder) {
|
||||
collector.addRule(`
|
||||
.monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked .active-item-indicator:before {
|
||||
border-top-color: ${titleActiveBorder};
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
// Styling with Outline color (e.g. high contrast theme)
|
||||
const outline = theme.getColor(activeContrastBorder);
|
||||
if (outline) {
|
||||
|
||||
@@ -1015,49 +1015,6 @@ registerThemingParticipant((theme, collector) => {
|
||||
`);
|
||||
}
|
||||
|
||||
// Title focus
|
||||
const focusBorderColor = theme.getColor(focusBorder);
|
||||
if (focusBorderColor) {
|
||||
collector.addRule(`
|
||||
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus .active-item-indicator:before {
|
||||
border-top-color: ${focusBorderColor};
|
||||
}
|
||||
`);
|
||||
collector.addRule(`
|
||||
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus {
|
||||
outline: none;
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
const titleActiveBorder = theme.getColor(PANEL_ACTIVE_TITLE_BORDER);
|
||||
if (titleActiveBorder) {
|
||||
collector.addRule(`
|
||||
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked .active-item-indicator:before {
|
||||
border-top-color: ${titleActiveBorder};
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
// Styling with Outline color (e.g. high contrast theme)
|
||||
const outline = theme.getColor(activeContrastBorder);
|
||||
if (outline) {
|
||||
collector.addRule(`
|
||||
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked .action-label,
|
||||
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label {
|
||||
outline-color: ${outline};
|
||||
outline-width: 1px;
|
||||
outline-style: solid;
|
||||
border-bottom: none;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:not(.checked):hover .action-label {
|
||||
outline-style: dashed;
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
const inputBorder = theme.getColor(PANEL_INPUT_BORDER);
|
||||
if (inputBorder) {
|
||||
collector.addRule(`
|
||||
@@ -1066,4 +1023,50 @@ registerThemingParticipant((theme, collector) => {
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
|
||||
// Base Panel Styles
|
||||
// Title focus
|
||||
const focusBorderColor = theme.getColor(focusBorder);
|
||||
if (focusBorderColor) {
|
||||
collector.addRule(`
|
||||
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus .active-item-indicator:before {
|
||||
border-top-color: ${focusBorderColor};
|
||||
}
|
||||
`);
|
||||
collector.addRule(`
|
||||
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus {
|
||||
outline: none;
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
const titleActiveBorder = theme.getColor(PANEL_ACTIVE_TITLE_BORDER);
|
||||
if (titleActiveBorder) {
|
||||
collector.addRule(`
|
||||
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked:not(:focus) .active-item-indicator:before,
|
||||
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked.clicked:focus .active-item-indicator:before {
|
||||
border-top-color: ${titleActiveBorder};
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
// Styling with Outline color (e.g. high contrast theme)
|
||||
const outline = theme.getColor(activeContrastBorder);
|
||||
if (outline) {
|
||||
collector.addRule(`
|
||||
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked .action-label,
|
||||
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label {
|
||||
outline-color: ${outline};
|
||||
outline-width: 1px;
|
||||
outline-style: solid;
|
||||
border-bottom: none;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item:not(.checked):hover .action-label {
|
||||
outline-style: dashed;
|
||||
}
|
||||
`);
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user