monaco-editor
Version:
A browser based code editor
164 lines (134 loc) • 4.77 kB
CSS
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
.monaco-quick-open-widget {
position: absolute;
width: 600px;
z-index: 2000;
padding-bottom: 6px;
left: 50%;
margin-left: -300px;
}
.monaco-quick-open-widget .monaco-progress-container {
position: absolute;
left: 0;
top: 38px;
z-index: 1;
height: 2px;
}
.monaco-quick-open-widget .monaco-progress-container .progress-bit {
height: 2px;
}
.monaco-quick-open-widget .quick-open-input {
width: 588px;
border: none;
margin: 6px;
}
.monaco-quick-open-widget .quick-open-input .monaco-inputbox {
width: 100%;
height: 25px;
}
.monaco-quick-open-widget .quick-open-result-count {
position: absolute;
left: -10000px;
}
.monaco-quick-open-widget .quick-open-tree {
line-height: 22px;
}
.monaco-quick-open-widget .quick-open-tree .monaco-tree-row > .content > .sub-content {
overflow: hidden;
}
.monaco-quick-open-widget.content-changing .quick-open-tree .monaco-scrollable-element .slider {
display: none; /* scrollbar slider causes some hectic updates when input changes quickly, so hide it while quick open changes */
}
.monaco-quick-open-widget .quick-open-tree .quick-open-entry {
overflow: hidden;
text-overflow: ellipsis;
display: flex;
flex-direction: column;
height: 100%;
}
.monaco-quick-open-widget .quick-open-tree .quick-open-entry > .quick-open-row {
display: flex;
align-items: center;
}
.monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon {
overflow: hidden;
width: 16px;
height: 16px;
margin-right: 4px;
display: inline-block;
vertical-align: middle;
flex-shrink: 0;
}
.monaco-quick-open-widget .quick-open-tree .monaco-icon-label,
.monaco-quick-open-widget .quick-open-tree .monaco-icon-label .monaco-icon-label-description-container {
flex: 1; /* make sure the icon label grows within the row */
}
.monaco-quick-open-widget .quick-open-tree .quick-open-entry .monaco-highlighted-label span {
opacity: 1;
}
.monaco-quick-open-widget .quick-open-tree .quick-open-entry-meta {
opacity: 0.7;
line-height: normal;
}
.monaco-quick-open-widget .quick-open-tree .content.has-group-label .quick-open-entry-keybinding {
margin-right: 8px;
}
.monaco-quick-open-widget .quick-open-tree .quick-open-entry-keybinding .monaco-keybinding-key {
vertical-align: text-bottom;
}
.monaco-quick-open-widget .quick-open-tree .results-group {
margin-right: 18px;
}
.monaco-quick-open-widget .quick-open-tree .monaco-tree-row.focused > .content.has-actions > .results-group,
.monaco-quick-open-widget .quick-open-tree .monaco-tree-row:hover:not(.highlighted) > .content.has-actions > .results-group,
.monaco-quick-open-widget .quick-open-tree .focused .monaco-tree-row.focused > .content.has-actions > .results-group {
margin-right: 0px;
}
.monaco-quick-open-widget .quick-open-tree .results-group-separator {
border-top-width: 1px;
border-top-style: solid;
box-sizing: border-box;
margin-left: -11px;
padding-left: 11px;
}
/* Actions in Quick Open Items */
.monaco-tree .monaco-tree-row > .content.actions {
position: relative;
display: flex;
}
.monaco-tree .monaco-tree-row > .content.actions > .sub-content {
flex: 1;
}
.monaco-tree .monaco-tree-row > .content.actions .action-item {
margin: 0;
}
.monaco-tree .monaco-tree-row > .content.actions > .primary-action-bar {
line-height: 22px;
}
.monaco-tree .monaco-tree-row > .content.actions > .primary-action-bar {
display: none;
padding: 0 0.8em 0 0.4em;
}
.monaco-tree .monaco-tree-row.focused > .content.has-actions > .primary-action-bar {
width: 0; /* in order to support a11y with keyboard, we use width: 0 to hide the actions, which still allows to "Tab" into the actions */
display: block;
}
.monaco-tree .monaco-tree-row:hover:not(.highlighted) > .content.has-actions > .primary-action-bar,
.monaco-tree.focused .monaco-tree-row.focused > .content.has-actions > .primary-action-bar,
.monaco-tree .monaco-tree-row > .content.has-actions.more > .primary-action-bar {
width: inherit;
display: block;
}
.monaco-tree .monaco-tree-row > .content.actions > .primary-action-bar .action-label {
margin-right: 0.4em;
margin-top: 4px;
background-repeat: no-repeat;
width: 16px;
height: 16px;
}
.monaco-quick-open-widget .quick-open-tree .monaco-highlighted-label .highlight {
font-weight: bold;
}