Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-05-01 22:12:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #294934 from microsoft/mrleemurray/lively-amethyst-rooster

Browse Source 
Refactor theme styles for buttons and quick input widgets
This commit is contained in:
Lee Murray
2026-02-13 17:50:26 +00:00
committed by GitHub
parent d2f1885c82 61ce2a354b
commit 2e0ae5f4f1
2 changed files with 18 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
extensions/theme-2026/themes/styles.css
View File

@@ -7,28 +7,22 @@
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
/* --radius-lg: 12px; */
--shadow-xs: 0 0 2px rgba(0, 0, 0, 0.06);
--shadow-sm: 0 0 4px rgba(0, 0, 0, 0.08);
--shadow-md: 0 0 6px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 0 12px rgba(0, 0, 0, 0.14);
--shadow-xl: 0 0 20px rgba(0, 0, 0, 0.15);
--shadow-2xl: 0 0 20px rgba(0, 0, 0, 0.18);
--shadow-hover: 0 0 8px rgba(0, 0, 0, 0.12);
--shadow-sm-strong: 0 0 4px rgba(0, 0, 0, 0.18);
--shadow-button-active: inset 0 1px 2px rgba(0, 0, 0, 0.1);
--shadow-inset-white: inset 0 0 4px rgba(255, 255, 255, 0.1);
--shadow-active-tab: 0 8px 12px rgba(0, 0, 0, 0.02);
--backdrop-blur-sm: blur(12px);
--backdrop-blur-md: blur(20px) saturate(180%);
--backdrop-blur-lg: blur(40px) saturate(180%);
}
/* Dark theme: add brightness reduction for contrast-safe luminosity blending over bright backgrounds */
.monaco-workbench.vs-dark {
--backdrop-blur-sm: blur(12px) brightness(0.55);
--backdrop-blur-md: blur(20px) saturate(180%) brightness(0.55);
--backdrop-blur-lg: blur(40px) saturate(180%) brightness(0.55);
}
@@ -131,7 +125,6 @@
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active {
box-shadow: inset var(--shadow-active-tab);
/* background: var(--vs) */
position: relative;
z-index: 5;
border-radius: 0;
@@ -194,7 +187,7 @@
.monaco-workbench .quick-input-widget .quick-input-action,
.monaco-workbench .quick-input-widget .quick-input-message,
.monaco-workbench .quick-input-widget .monaco-list,
.monaco-workbench .quick-input-widget .monaco-list-row {
.monaco-workbench .quick-input-widget .monaco-list-row:not(:has(.quick-input-list-separator-border)) {
border-color: transparent !important;
outline: none !important;
}
@@ -211,6 +204,10 @@
border-radius: var(--radius-lg);
}
.monaco-workbench .quick-input-widget .monaco-list-rows {
background: transparent !important;
}
.monaco-workbench .quick-input-widget .monaco-inputbox {
box-shadow: none !important;
background: transparent !important;
@@ -347,7 +344,7 @@
/* Dialog */
.monaco-workbench .monaco-dialog-box {
box-shadow: var(--shadow-2xl);
box-shadow: var(--shadow-xl);
border-radius: var(--radius-lg);
backdrop-filter: var(--backdrop-blur-lg);
-webkit-backdrop-filter: var(--backdrop-blur-lg);
@@ -362,8 +359,8 @@
.monaco-workbench .monaco-editor .peekview-widget {
box-shadow: var(--shadow-hover);
background: color-mix(in srgb, var(--vscode-peekViewEditor-background) 60%, transparent) !important;
backdrop-filter: var(--backdrop-blur-sm);
-webkit-backdrop-filter: var(--backdrop-blur-sm);
backdrop-filter: var(--backdrop-blur-md);
-webkit-backdrop-filter: var(--backdrop-blur-md);
}
.monaco-workbench.vs-dark .monaco-editor .peekview-widget {
@@ -475,13 +472,6 @@
}
/* Buttons */
.monaco-workbench .monaco-button {
box-shadow: var(--shadow-xs);
}
.monaco-workbench .monaco-button:hover {
box-shadow: var(--shadow-sm);
}
.monaco-workbench .monaco-button:active {
box-shadow: var(--shadow-button-active);
@@ -516,11 +506,6 @@
border-radius: var(--radius-lg);
}
/* Terminal */
.monaco-workbench.vs .pane-body.integrated-terminal {
box-shadow: var(--shadow-inset-white);
}
/* SCM */
.monaco-workbench .scm-view .scm-provider {
box-shadow: var(--shadow-sm);
@@ -681,10 +666,6 @@
background: transparent;
}
.monaco-workbench .quick-input-list .quick-input-list-entry.quick-input-list-separator-border {
border-top-width: 0;
}
/* Quick Input List - use descriptionForeground color for descriptions */
.monaco-workbench .quick-input-list .monaco-icon-label .label-description {
opacity: 1;