1.darken::before { 2 content: ' '; 3 position: fixed; 4 top: 0; 5 left: 0; 6 width: 100vw; 7 height: 100vh; 8 display: block; 9 background: black; 10 opacity: 0.5; 11} 12 13.code-container .cm-scroller { 14 padding-top: 10px !important; 15 height: 100%; 16 font-family: inherit; 17} 18.code-container .cm-content { 19 padding-bottom: 50vh; 20} 21.code-container .cm-line > * { 22 background: var(--lineBackground); 23} 24 25.code-container .cm-editor { 26 background-color: transparent !important; 27 height: 100%; 28 z-index: 11; 29} 30 31.code-container .cm-theme { 32 width: 100%; 33 height: 100%; 34} 35 36.code-container .cm-theme-light { 37 width: 100%; 38} 39 40.code-container .cm-cursorLayer { 41 animation-name: inherit !important; 42} 43 44.code-container .cm-cursor { 45 border-left: 2px solid currentcolor !important; 46} 47 48.code-container .cm-foldGutter { 49 display: none !important; 50} 51 52.code-container .cm-focused { 53 outline: none; 54} 55 56.code-container .cm-matchingBracket { 57 text-decoration: underline 0.18rem; 58 text-underline-offset: 0.22rem; 59}
Override default styles from the codemirror inline css for autocomplete info tooltip
62.cm-tooltip.cm-completionInfo { 63 padding: 0 !important; 64 border: 1px solid var(--foreground) !important; 65 border-radius: 4px !important; 66 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; 67 max-width: 500px !important; 68 min-width: 300px !important; 69 max-height: 400px !important; 70 background-color: var(--lineHighlight) !important; 71 overflow: auto; 72 background: var(--background) !important; 73}
Main tooltip container
76.autocomplete-info-container { 77 padding: 12px !important; 78 border-radius: 4px !important; 79 color: var(--foreground); 80 font-family: var(--font-family, 'SF Mono', 'Monaco', monospace); 81 font-size: var(--font-size, 13px); 82 line-height: 1.4; 83 max-width: 600px; 84 height: 100%; 85 min-width: 400px; 86 white-space: normal !important; 87 overflow-y: auto !important; 88}
90.autocomplete-info-tooltip { 91 overflow-y: auto !important; 92} 93 94.autocomplete-info-function-description { 95 white-space: pre-wrap !important; 96} 97 98.autocomplete-info-function-name { 99 font-size: 15px; 100 font-weight: 600; 101 color: var(--foreground); 102 margin: 0 0 8px 0; 103} 104 105.autocomplete-info-function-synonyms { 106 margin: 0 0 12px 0; 107 color: var(--foreground); 108 line-height: 1.5; 109 opacity: 0.8; 110} 111 112.autocomplete-info-function-description { 113 margin: 0 0 12px 0; 114 color: var(--foreground); 115 line-height: 1.5; 116 opacity: 0.8; 117} 118 119.autocomplete-info-section-title { 120 font-size: 12px; 121 font-weight: 600; 122 color: var(--foreground); 123 margin: 16px 0 6px 0; 124 text-transform: uppercase; 125 letter-spacing: 0.5px; 126} 127 128.autocomplete-info-section-title:first-child { 129 margin-top: 0; 130} 131 132.autocomplete-info-params-section { 133 margin-top: 12px; 134} 135 136.autocomplete-info-params-list { 137 list-style: none; 138 margin: 0; 139 padding: 0; 140} 141 142.autocomplete-info-param-item { 143 margin-bottom: 8px; 144 padding: 8px; 145 background-color: var(--lineBackground); 146 border-radius: 3px; 147 border-left: 2px solid var(--foreground, #555); 148} 149 150.autocomplete-info-param-item:last-child { 151 margin-bottom: 0; 152} 153 154.autocomplete-info-param-name { 155 font-weight: 600; 156 color: var(--variable, var(--foreground)); 157 margin-right: 8px; 158} 159 160.autocomplete-info-param-type { 161 color: var(--comment); 162 font-size: 12px; 163 background-color: var(--gutterForeground); 164 padding: 1px 4px; 165 border-radius: 2px; 166} 167 168.autocomplete-info-param-desc { 169 color: var(--foreground); 170 font-size: 10px; 171 margin-top: 4px; 172 line-height: 1.4; 173 opacity: 0.7; 174} 175 176.autocomplete-info-examples-section { 177 margin-top: 12px; 178} 179 180.autocomplete-info-example-code { 181 background: var(--lineBackground); 182 color: var(--foreground); 183 padding: 8px; 184 border-radius: 3px; 185 font-family: var(--font-family, 'SF Mono', 'Monaco', monospace); 186 font-size: 12px; 187 line-height: 1.5; 188 margin: 4px 0; 189 overflow-x: auto; 190 white-space: pre; 191 border: 1px solid var(--foreground, #3a3a3a); 192} 193 194.autocomplete-info-tooltip::-webkit-scrollbar { 195 width: 4px; 196} 197 198.autocomplete-info-tooltip::-webkit-scrollbar-track { 199} 200 201.autocomplete-info-tooltip::-webkit-scrollbar-thumb { 202 border-radius: 2px; 203} 204 205.autocomplete-info-tooltip::-webkit-scrollbar-thumb:hover { 206}