From 892610fb679630a9bf6d27a4c48b7b11a7aaee1f Mon Sep 17 00:00:00 2001 From: nang-dev Date: Mon, 17 Mar 2025 21:36:45 -0400 Subject: [PATCH] Added bubbly --- .../editor/media/multieditortabscontrol.css | 8 ++- .../browser/parts/media/compositepart.css | 1 + .../browser/parts/panel/media/panelpart.css | 57 ++++++++++++++++++- .../browser/parts/views/media/views.css | 2 + 4 files changed, 63 insertions(+), 5 deletions(-) diff --git a/src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css b/src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css index 93559402aa575..d416f2195180f 100644 --- a/src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css +++ b/src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css @@ -44,6 +44,7 @@ .monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container { display: flex; position: relative; /* position tabs border bottom or editor actions (when tabs wrap) relative to this container */ + margin: 6px 0px; } .monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container.empty { @@ -77,6 +78,8 @@ display: flex; height: var(--editor-group-tab-height); scrollbar-width: none; /* Firefox: hide scrollbar */ + gap: 6px; + padding: 0 6px; } .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container.scroll { @@ -116,9 +119,6 @@ .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active { background-color: var(--vscode-tab-unfocusedActiveBackground); } -.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.active { - background-color: var(--vscode-tab-activeBackground); -} /* Tab Foreground Color in/active group/tab */ .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab { @@ -132,6 +132,8 @@ } .monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.active { color: var(--vscode-tab-activeForeground); + border: 1px solid rgba(255, 255, 255, 0.1) !important; + background-color: rgba(0, 0, 0, 0.135) !important; } .monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.selected:not(.active) { diff --git a/src/vs/workbench/browser/parts/media/compositepart.css b/src/vs/workbench/browser/parts/media/compositepart.css index 98f07d9cf18fb..73cddf3690fe3 100644 --- a/src/vs/workbench/browser/parts/media/compositepart.css +++ b/src/vs/workbench/browser/parts/media/compositepart.css @@ -10,6 +10,7 @@ .monaco-workbench .part > .composite.header-or-footer, .monaco-workbench .part > .composite.title { display: flex; + margin: 6px 0px; } .monaco-workbench .part > .composite.title > .title-actions { diff --git a/src/vs/workbench/browser/parts/panel/media/panelpart.css b/src/vs/workbench/browser/parts/panel/media/panelpart.css index e1c147d8e88a3..6217b12f36e5c 100644 --- a/src/vs/workbench/browser/parts/panel/media/panelpart.css +++ b/src/vs/workbench/browser/parts/panel/media/panelpart.css @@ -7,11 +7,11 @@ display: none !important; visibility: hidden !important; } - +/* .monaco-workbench .part.panel.bottom .composite.title { border-top-width: 1px; border-top-style: solid; -} +} */ .monaco-workbench.nomaineditorarea .part.panel.bottom .composite.title { border-top-width: 0; /* no border when main editor area is hiden */ @@ -98,3 +98,56 @@ display: inline-block; transform: rotate(180deg); } + + +/* TABS STYLING - styling for the container of the tabs */ +.monaco-workbench .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item { + margin-right: 2px; + padding: 0 2px; + font-size: 12px; + text-transform: uppercase; + transition: all 0.2s ease; + background: transparent; +} + +/* Style the tab labels to be bubbly */ +.monaco-workbench .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .action-label { + border-radius: 10px; + padding: 2px 10px; + margin: 1px 0; + border: none !important; + background: var(--vscode-tab-inactiveBackground) !important; +} + +/* HOVERED TABS */ +.monaco-workbench .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label { + /* box-shadow: 0 1px 3px rgba(155, 155, 155, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ + +} +.monaco-workbench .panel { + padding: 6px; +} + +/* ACTIVE TABS */ +.monaco-workbench .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label { + background: rgba(0, 0, 0, 0.135) !important; + border: 1px solid rgba(255, 255, 255, 0.1) !important; +} + +/* REMOVE ACTIVE TAB INDICATOR */ +.monaco-workbench .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .active-item-indicator:before { + border-top: none !important; + height: 0 !important; +} + +.tab.tab-actions-right.sizing-fit.has-icon { + border-radius: 10px; + background-color: var(--vscode-tab-activeBackground); +} + +.title .tabs.show-file-icons { + background: transparent !important; +} + + + diff --git a/src/vs/workbench/browser/parts/views/media/views.css b/src/vs/workbench/browser/parts/views/media/views.css index 262a5c34bbf5e..d1dfd0a62422f 100644 --- a/src/vs/workbench/browser/parts/views/media/views.css +++ b/src/vs/workbench/browser/parts/views/media/views.css @@ -266,6 +266,8 @@ height: 24px; font-size: 12px; flex: 1; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 8px; } .pane-header .viewpane-filter-container > .viewpane-filter .monaco-inputbox .monaco-inputbox {