@@ -258,49 +258,92 @@ export class ReleaseNotesManager {
258258 ${ DEFAULT_MARKDOWN_STYLES }
259259 ${ css }
260260
261+ /* codesetting */
262+
263+ code:has(.codesetting)+code {
264+ display: none;
265+ }
266+
267+ code:has(.codesetting) {
268+ background-color: var(--vscode-textPreformat-background);
269+ color: var(--vscode-textPreformat-foreground);
270+ padding-left: 1px;
271+ margin-right: 3px;
272+ padding-right: 0px;
273+ }
274+
275+ code:has(.codesetting):focus {
276+ border: 1px solid var(--vscode-button-border, transparent);
277+ }
278+
261279 .codesetting {
262- color: var(--vscode-button-foreground);
263- background-color: var(--vscode-button-background);
264- width: fit-content;
280+ color: var(--vscode-textPreformat-foreground);
265281 padding: 0px 1px 1px 0px;
266- font-size: 12px ;
282+ font-size: 0px ;
267283 overflow: hidden;
268284 text-overflow: ellipsis;
269285 outline-offset: 2px !important;
270286 box-sizing: border-box;
271- border-radius: 2px;
272287 text-align: center;
273288 cursor: pointer;
274- border: 1px solid var(--vscode-button-border, transparent);
275- line-height: 9px;
289+ display: inline;
290+ margin-right: 3px;
291+ }
292+ .codesetting svg {
293+ font-size: 12px;
294+ text-align: center;
295+ cursor: pointer;
296+ border: 1px solid var(--vscode-button-secondaryBorder, transparent);
276297 outline: 1px solid transparent;
298+ line-height: 9px;
299+ margin-bottom: -5px;
300+ padding-left: 0px;
301+ padding-top: 2px;
302+ padding-bottom: 2px;
303+ padding-right: 2px;
277304 display: inline-block;
278- margin-top: 3px;
279- margin-bottom: -4px !important;
305+ text-decoration: none;
306+ text-rendering: auto;
307+ text-transform: none;
308+ -webkit-font-smoothing: antialiased;
309+ -moz-osx-font-smoothing: grayscale;
310+ user-select: none;
311+ -webkit-user-select: none;
312+ }
313+ .codesetting .setting-name {
314+ font-size: 13px;
315+ padding-left: 2px;
316+ padding-right: 3px;
317+ padding-top: 1px;
318+ padding-bottom: 1px;
319+ margin-left: -5px;
320+ margin-top: -3px;
280321 }
281322 .codesetting:hover {
282- background-color: var(--vscode-button-hoverBackground);
323+ color: var(--vscode-textPreformat-foreground) !important;
324+ text-decoration: none !important;
325+ }
326+ code:has(.codesetting):hover {
327+ filter: brightness(140%);
283328 text-decoration: none !important;
284- color: var(--vscode-button-hoverForeground) !important;
285329 }
286330 .codesetting:focus {
287331 outline: 0 !important;
288332 text-decoration: none !important;
289333 color: var(--vscode-button-hoverForeground) !important;
290- border: 1px solid var(--vscode-button-border, transparent);
291334 }
292- .codesetting svg {
335+ .codesetting .separator {
336+ width: 1px;
337+ height: 14px;
338+ margin-bottom: -3px;
293339 display: inline-block;
294- text-decoration: none;
295- text-rendering: auto;
296- text-align: center;
297- text-transform: none;
298- -webkit-font-smoothing: antialiased;
299- -moz-osx-font-smoothing: grayscale;
300- user-select: none;
301- -webkit-user-select: none;
340+ background-color: var(--vscode-editor-background);
341+ font-size: 12px;
342+ margin-right: 8px;
302343 }
303344
345+ /* codefeature */
346+
304347 .codefeature-container {
305348 display: flex;
306349 }
@@ -357,66 +400,6 @@ export class ReleaseNotesManager {
357400 content: "${ nls . localize ( 'enableFeature' , "Enable this feature" ) }
358401 }
359402
360- .codefeature-container {
361- display: flex;
362- }
363-
364- .codefeature {
365- position: relative;
366- display: inline-block;
367- width: 58px;
368- height: 30px;
369- }
370-
371- .codefeature-container input {
372- display: none;
373- }
374-
375- .toggle {
376- position: absolute;
377- cursor: pointer;
378- top: 0;
379- left: 0;
380- right: 0;
381- bottom: 0;
382- background-color: var(--vscode-disabledForeground);
383- transition: .4s;
384- border-radius: 30px;
385- }
386-
387- .toggle:before {
388- position: absolute;
389- content: "";
390- height: 22px;
391- width: 22px;
392- left: 4px;
393- bottom: 4px;
394- background-color: var(--vscode-editor-foreground);
395- transition: .4s;
396- border-radius: 50%;
397- }
398-
399- input:checked+.codefeature > .toggle:before {
400- transform: translateX(26px);
401- }
402-
403- input:checked+.codefeature > .toggle {
404- background-color: var(--vscode-button-background);
405- }
406-
407- .codefeature-container:has(input) .title {
408- line-height: 30px;
409- padding-left: 4px;
410- font-weight: bold;
411- }
412-
413- .codefeature-container:has(input:checked) .title:after {
414- content: "${ nls . localize ( 'disableFeature' , "Disable this feature" ) }
415- }
416- .codefeature-container:has(input:not(:checked)) .title:after {
417- content: "${ nls . localize ( 'enableFeature' , "Enable this feature" ) }
418- }
419-
420403 header { display: flex; align-items: center; padding-top: 1em; }
421404 </style>
422405 </head>
@@ -486,6 +469,15 @@ export class ReleaseNotesManager {
486469 }
487470 });
488471
472+ window.addEventListener('keypress', event => {
473+ if (event.keyCode === 13) {
474+ if (event.target.children.length > 0 && event.target.children[0].href) {
475+ const clientRect = event.target.getBoundingClientRect();
476+ vscode.postMessage({ type: 'clickSetting', value: { uri: event.target.children[0].href, x: clientRect.right , y: clientRect.bottom }});
477+ }
478+ }
479+ });
480+
489481 input.addEventListener('change', event => {
490482 vscode.postMessage({ type: 'showReleaseNotes', value: input.checked }, '*');
491483 });
0 commit comments