/* From https://github.com/microsoft/vscode-extension-samples/blob/main/webview-view-sample/media/vscode.css */ :root { --container-paddding: 20px; --input-padding-vertical: 6px; --input-padding-horizontal: 4px; --input-margin-vertical: 4px; --input-margin-horizontal: 0; } body { padding: 0 var(--container-paddding); color: var(--vscode-foreground); font-size: var(--vscode-font-size); font-weight: var(--vscode-font-weight); font-family: var(--vscode-font-family); background-color: var(--vscode-editor-background); } ol, ul { padding-left: var(--container-paddding); } body > *, form > * { margin-block-start: var(--input-margin-vertical); margin-block-end: var(--input-margin-vertical); } *:focus { outline-color: var(--vscode-focusBorder) !important; } a { color: var(--vscode-textLink-foreground); } a:hover, a:active { color: var(--vscode-textLink-activeForeground); } code { font-size: var(--vscode-editor-font-size); font-family: var(--vscode-editor-font-family); } button { border: none; padding: var(--input-padding-vertical) var(--input-padding-horizontal); width: 100%; text-align: center; outline: 1px solid transparent; outline-offset: 2px !important; color: var(--vscode-button-foreground); background: var(--vscode-button-background); } button:hover { cursor: pointer; background: var(--vscode-button-hoverBackground); } button:focus { outline-color: var(--vscode-focusBorder); } button.secondary { color: var(--vscode-button-secondaryForeground); background: var(--vscode-button-secondaryBackground); } button.secondary:hover { background: var(--vscode-button-secondaryHoverBackground); } input:not([type='checkbox']), textarea { display: block; width: 100%; border: none; font-family: var(--vscode-font-family); padding: var(--input-padding-vertical) var(--input-padding-horizontal); color: var(--vscode-input-foreground); outline-color: var(--vscode-input-border); background-color: var(--vscode-input-background); } input::placeholder, textarea::placeholder { color: var(--vscode-input-placeholderForeground); }