From 8755ad6c021707a71fe6196aee8ef96b660e7aa2 Mon Sep 17 00:00:00 2001 From: Aiday Marlen Kyzy Date: Tue, 20 Jun 2023 11:51:39 +0200 Subject: [PATCH] removing the css changes that have been previously done and setting the z-index to 50 on the hover widget --- src/vs/base/browser/ui/hover/hover.css | 99 +++++++++---------- src/vs/base/browser/ui/hover/hoverWidget.ts | 2 +- .../contrib/hover/browser/contentHover.ts | 2 +- src/vs/editor/contrib/hover/browser/hover.css | 10 +- src/vs/editor/contrib/hover/browser/hover.ts | 6 +- .../standalone/browser/standalone-tokens.css | 2 +- 6 files changed, 59 insertions(+), 62 deletions(-) diff --git a/src/vs/base/browser/ui/hover/hover.css b/src/vs/base/browser/ui/hover/hover.css index fbccf837739..49be4a7cbc7 100644 --- a/src/vs/base/browser/ui/hover/hover.css +++ b/src/vs/base/browser/ui/hover/hover.css @@ -4,10 +4,6 @@ *--------------------------------------------------------------------------------------------*/ .monaco-hover { - z-index: 50; -} - -.monaco-hover-container { cursor: default; position: absolute; overflow: hidden; @@ -18,52 +14,53 @@ line-height: 1.5em; } -.monaco-hover-container.hidden { +.monaco-hover.hidden { display: none; } -.monaco-hover-container a:hover:not(.disabled) { +.monaco-hover a:hover:not(.disabled) { cursor: pointer; } -.monaco-hover-container .hover-contents:not(.html-hover-contents) { +.monaco-hover .hover-contents:not(.html-hover-contents) { padding: 4px 8px; } -.monaco-hover-container .markdown-hover > .hover-contents:not(.code-hover-contents) { +.monaco-hover .markdown-hover > .hover-contents:not(.code-hover-contents) { + max-width: 500px; word-wrap: break-word; } -.monaco-hover-container .markdown-hover > .hover-contents:not(.code-hover-contents) hr { +.monaco-hover .markdown-hover > .hover-contents:not(.code-hover-contents) hr { min-width: 100%; } -.monaco-hover-container p, -.monaco-hover-container .code, -.monaco-hover-container ul, -.monaco-hover-container h1, -.monaco-hover-container h2, -.monaco-hover-container h3, -.monaco-hover-container h4, -.monaco-hover-container h5, -.monaco-hover-container h6 { +.monaco-hover p, +.monaco-hover .code, +.monaco-hover ul, +.monaco-hover h1, +.monaco-hover h2, +.monaco-hover h3, +.monaco-hover h4, +.monaco-hover h5, +.monaco-hover h6 { margin: 8px 0; } -.monaco-hover-container h1, -.monaco-hover-container h2, -.monaco-hover-container h3, -.monaco-hover-container h4, -.monaco-hover-container h5, -.monaco-hover-container h6 { +.monaco-hover h1, +.monaco-hover h2, +.monaco-hover h3, +.monaco-hover h4, +.monaco-hover h5, +.monaco-hover h6 { line-height: 1.1; } -.monaco-hover-container code { +.monaco-hover code { font-family: var(--monaco-monospace-font); } -.monaco-hover-container hr { +.monaco-hover hr { box-sizing: border-box; border-left: 0px; border-right: 0px; @@ -74,87 +71,87 @@ height: 1px; } -.monaco-hover-container p:first-child, -.monaco-hover-container .code:first-child, -.monaco-hover-container ul:first-child { +.monaco-hover p:first-child, +.monaco-hover .code:first-child, +.monaco-hover ul:first-child { margin-top: 0; } -.monaco-hover-container p:last-child, -.monaco-hover-container .code:last-child, -.monaco-hover-container ul:last-child { +.monaco-hover p:last-child, +.monaco-hover .code:last-child, +.monaco-hover ul:last-child { margin-bottom: 0; } /* MarkupContent Layout */ -.monaco-hover-container ul { +.monaco-hover ul { padding-left: 20px; } -.monaco-hover-container ol { +.monaco-hover ol { padding-left: 20px; } -.monaco-hover-container li > p { +.monaco-hover li > p { margin-bottom: 0; } -.monaco-hover-container li > ul { +.monaco-hover li > ul { margin-top: 0; } -.monaco-hover-container code { +.monaco-hover code { border-radius: 3px; padding: 0 0.4em; } -.monaco-hover-container .monaco-tokenized-source { +.monaco-hover .monaco-tokenized-source { white-space: pre-wrap; } -.monaco-hover-container .hover-row.status-bar { +.monaco-hover .hover-row.status-bar { font-size: 12px; line-height: 22px; } -.monaco-hover-container .hover-row.status-bar .info { +.monaco-hover .hover-row.status-bar .info { font-style: italic; padding: 0px 8px; } -.monaco-hover-container .hover-row.status-bar .actions { +.monaco-hover .hover-row.status-bar .actions { display: flex; padding: 0px 8px; } -.monaco-hover-container .hover-row.status-bar .actions .action-container { +.monaco-hover .hover-row.status-bar .actions .action-container { margin-right: 16px; cursor: pointer; } -.monaco-hover-container .hover-row.status-bar .actions .action-container .action .icon { +.monaco-hover .hover-row.status-bar .actions .action-container .action .icon { padding-right: 4px; } -.monaco-hover-container .markdown-hover .hover-contents .codicon { +.monaco-hover .markdown-hover .hover-contents .codicon { color: inherit; font-size: inherit; vertical-align: middle; } -.monaco-hover-container .hover-contents a.code-link:hover, -.monaco-hover-container .hover-contents a.code-link { +.monaco-hover .hover-contents a.code-link:hover, +.monaco-hover .hover-contents a.code-link { color: inherit; } -.monaco-hover-container .hover-contents a.code-link:before { +.monaco-hover .hover-contents a.code-link:before { content: '('; } -.monaco-hover-container .hover-contents a.code-link:after { +.monaco-hover .hover-contents a.code-link:after { content: ')'; } -.monaco-hover-container .hover-contents a.code-link > span { +.monaco-hover .hover-contents a.code-link > span { text-decoration: underline; /** Hack to force underline to show **/ border-bottom: 1px solid transparent; @@ -162,12 +159,12 @@ white-space: pre-wrap; color: var(--vscode-textLink-foreground); } -.monaco-hover-container .hover-contents a.code-link > span:hover { +.monaco-hover .hover-contents a.code-link > span:hover { color: var(--vscode-textLink-activeForeground); } /** Spans in markdown hovers need a margin-bottom to avoid looking cramped: https://github.com/microsoft/vscode/issues/101496 **/ -.monaco-hover-container .markdown-hover .hover-contents:not(.code-hover-contents):not(.html-hover-contents) span { +.monaco-hover .markdown-hover .hover-contents:not(.code-hover-contents):not(.html-hover-contents) span { margin-bottom: 4px; display: inline-block; } diff --git a/src/vs/base/browser/ui/hover/hoverWidget.ts b/src/vs/base/browser/ui/hover/hoverWidget.ts index 3f09ed882ee..96e99cbec4a 100644 --- a/src/vs/base/browser/ui/hover/hoverWidget.ts +++ b/src/vs/base/browser/ui/hover/hoverWidget.ts @@ -26,7 +26,7 @@ export class HoverWidget extends Disposable { super(); this.containerDomNode = document.createElement('div'); - this.containerDomNode.className = 'monaco-hover-container'; + this.containerDomNode.className = 'monaco-hover'; this.containerDomNode.tabIndex = 0; this.containerDomNode.setAttribute('role', 'tooltip'); diff --git a/src/vs/editor/contrib/hover/browser/contentHover.ts b/src/vs/editor/contrib/hover/browser/contentHover.ts index 9b4cf8cfe97..1961fedc042 100644 --- a/src/vs/editor/contrib/hover/browser/contentHover.ts +++ b/src/vs/editor/contrib/hover/browser/contentHover.ts @@ -488,7 +488,7 @@ export class ContentHoverWidget extends ResizableContentWidget { this._hoverFocusedKey = EditorContextKeys.hoverFocused.bindTo(_contextKeyService); dom.append(this._resizableNode.domNode, this._hover.containerDomNode); - this._resizableNode.domNode.classList.add('monaco-hover'); + this._resizableNode.domNode.style.zIndex = '50'; this._disposableStore.add(this._editor.onDidLayoutChange(() => this._layout())); this._disposableStore.add(this._editor.onDidChangeConfiguration((e: ConfigurationChangedEvent) => { diff --git a/src/vs/editor/contrib/hover/browser/hover.css b/src/vs/editor/contrib/hover/browser/hover.css index fbe1f340d28..34695750fd4 100644 --- a/src/vs/editor/contrib/hover/browser/hover.css +++ b/src/vs/editor/contrib/hover/browser/hover.css @@ -7,26 +7,26 @@ background-color: var(--vscode-editor-hoverHighlightBackground); } -.monaco-editor .monaco-hover-container { +.monaco-editor .monaco-hover { color: var(--vscode-editorHoverWidget-foreground); background-color: var(--vscode-editorHoverWidget-background); border: 1px solid var(--vscode-editorHoverWidget-border); border-radius: 3px; } -.monaco-editor .monaco-hover-container a { +.monaco-editor .monaco-hover a { color: var(--vscode-textLink-foreground); } -.monaco-editor .monaco-hover-container a:hover { +.monaco-editor .monaco-hover a:hover { color: var(--vscode-textLink-activeForeground); } -.monaco-editor .monaco-hover-container .hover-row .actions { +.monaco-editor .monaco-hover .hover-row .actions { background-color: var(--vscode-editorHoverWidget-statusBarBackground); } -.monaco-editor .monaco-hover-container code { +.monaco-editor .monaco-hover code { background-color: var(--vscode-textCodeBlock-background); } diff --git a/src/vs/editor/contrib/hover/browser/hover.ts b/src/vs/editor/contrib/hover/browser/hover.ts index 4977d897b45..a38025b1a07 100644 --- a/src/vs/editor/contrib/hover/browser/hover.ts +++ b/src/vs/editor/contrib/hover/browser/hover.ts @@ -691,8 +691,8 @@ HoverParticipantRegistry.register(MarkerHoverParticipant); registerThemingParticipant((theme, collector) => { const hoverBorder = theme.getColor(editorHoverBorder); if (hoverBorder) { - collector.addRule(`.monaco-editor .monaco-hover-content .hover-row:not(:first-child):not(:empty) { border-top: 1px solid ${hoverBorder.transparent(0.5)}; }`); - collector.addRule(`.monaco-editor .monaco-hover-content hr { border-top: 1px solid ${hoverBorder.transparent(0.5)}; }`); - collector.addRule(`.monaco-editor .monaco-hover-content hr { border-bottom: 0px solid ${hoverBorder.transparent(0.5)}; }`); + collector.addRule(`.monaco-editor .monaco-hover .hover-row:not(:first-child):not(:empty) { border-top: 1px solid ${hoverBorder.transparent(0.5)}; }`); + collector.addRule(`.monaco-editor .monaco-hover hr { border-top: 1px solid ${hoverBorder.transparent(0.5)}; }`); + collector.addRule(`.monaco-editor .monaco-hover hr { border-bottom: 0px solid ${hoverBorder.transparent(0.5)}; }`); } }); diff --git a/src/vs/editor/standalone/browser/standalone-tokens.css b/src/vs/editor/standalone/browser/standalone-tokens.css index d81607d46d0..0df4a9bac81 100644 --- a/src/vs/editor/standalone/browser/standalone-tokens.css +++ b/src/vs/editor/standalone/browser/standalone-tokens.css @@ -20,7 +20,7 @@ stroke-width: 1.2px; } -.monaco-hover-container p { +.monaco-hover p { margin: 0; }