microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-04-21 02:01:43 -05:00
Code Issues Packages Projects Releases 177 Wiki Activity

Merge pull request #299756 from microsoft/mrleemurray/yappiest-amaranth-tapir

Browse Source 
Refactor dialog CSS styles for improved layout and spacing
This commit is contained in:
Lee Murray
2026-03-09 15:28:58 +01:00
committed by GitHub
parent 75be16739a 235346a65c
commit 01b0d3a7b3
1 changed files with 18 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/vs/base/browser/ui/dialog/dialog.css
View File

@@ -25,13 +25,13 @@
display: flex;
flex-direction: column-reverse;
width: min-content;
min-width: 500px;
min-width: 480px;
max-width: 90vw;
max-height: 90vh;
min-height: 75px;
padding: 10px;
padding: 8px;
transform: translate3d(0px, 0px, 0px);
border-radius: var(--vscode-cornerRadius-large);
border-radius: var(--vscode-cornerRadius-xLarge);
box-shadow: var(--vscode-shadow-xl);
}
@@ -41,7 +41,7 @@
/** Dialog: Title Actions Row */
.monaco-dialog-box .dialog-toolbar-row {
height: 22px;
height: 20px;
padding-bottom: 4px;
}
@@ -55,7 +55,7 @@
display: flex;
flex-grow: 1;
align-items: center;
padding: 0 10px;
padding: 0 8px 0 12px;
min-height: 0; /* allow flex item to shrink below content size */
overflow: hidden;
}
@@ -69,9 +69,9 @@
}
.monaco-dialog-box .dialog-message-row > .dialog-icon.codicon {
flex: 0 0 48px;
height: 48px;
font-size: 48px;
flex: 0 0 24px;
height: 24px;
font-size: 24px;
}
.monaco-dialog-box.align-vertical .dialog-message-row > .dialog-icon.codicon {
@@ -108,7 +108,7 @@
.monaco-dialog-box:not(.align-vertical) .dialog-message-row .dialog-message-container,
.monaco-dialog-box:not(.align-vertical) .dialog-footer-row {
padding-left: 24px;
padding-left: 12px;
}
.monaco-dialog-box.align-vertical .dialog-message-row .dialog-message-container,
@@ -124,20 +124,20 @@
/** Dialog: Message */
.monaco-dialog-box .dialog-message-row .dialog-message-container .dialog-message {
line-height: 22px;
font-size: 18px;
font-size: 14px;
font-weight: 600;
flex: 1; /* let the message always grow */
white-space: normal;
word-wrap: break-word; /* never overflow long words, but break to next line */
min-height: 48px; /* matches icon height */
margin-bottom: 8px;
min-height: 22px;
margin-bottom: 4px;
display: flex;
align-items: center;
}
/** Dialog: Details */
.monaco-dialog-box .dialog-message-row .dialog-message-container .dialog-message-detail {
line-height: 22px;
line-height: 20px;
flex: 1; /* let the message always grow */
}
@@ -180,12 +180,8 @@
align-items: center;
padding-right: 1px;
overflow: hidden; /* buttons row should never overflow */
}
.monaco-dialog-box > .dialog-buttons-row {
display: flex;
white-space: nowrap;
padding: 20px 10px 10px;
padding: 20px 0px 0px;
}
/** Dialog: Buttons */
@@ -209,8 +205,8 @@
.monaco-dialog-box > .dialog-buttons-row > .dialog-buttons > .monaco-button {
overflow: hidden;
text-overflow: ellipsis;
margin: 4px 5px; /* allows button focus outline to be visible */
outline-offset: 2px !important;
margin: 4px; /* allows button focus outline to be visible */
outline-offset: 1px !important;
}
.monaco-dialog-box.align-vertical > .dialog-buttons-row > .dialog-buttons > .monaco-button {
@@ -253,5 +249,5 @@
}
.monaco-dialog-modal-block .dialog-shadow {
border-radius: var(--vscode-cornerRadius-large);
border-radius: var(--vscode-cornerRadius-xLarge);
}