eae5d8c807
These conflicts will be resolved in the following commits. We do it this way so that PR review is possible.
116 lines
2.2 KiB
CSS
116 lines
2.2 KiB
CSS
/*---------------------------------------------------------------------------------------------
|
|
* Copyright (c) Microsoft Corporation. All rights reserved.
|
|
* Licensed under the MIT License. See License.txt in the project root for license information.
|
|
*--------------------------------------------------------------------------------------------*/
|
|
|
|
:root {
|
|
--container-paddding: 20px;
|
|
--input-padding-vertical: 2px;
|
|
--input-padding-horizontal: 4px;
|
|
--input-margin-vertical: 4px;
|
|
--input-margin-horizontal: 0;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
min-height: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
button {
|
|
border: none;
|
|
padding: var(--input-padding-vertical) var(--input-padding-horizontal);
|
|
text-align: center;
|
|
outline: 1px solid transparent;
|
|
outline-offset: 2px !important;
|
|
color: var(--vscode-icon-foreground);
|
|
background: none;
|
|
}
|
|
|
|
button:hover:not(:disabled) {
|
|
cursor: pointer;
|
|
background: var(--vscode-button-hoverBackground);
|
|
}
|
|
|
|
button:disabled {
|
|
opacity: 0.5;
|
|
background: var(--vscode-button-background);
|
|
}
|
|
|
|
button:focus {
|
|
outline-color: var(--vscode-focusBorder);
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
margin: 0.4em 1em;
|
|
}
|
|
|
|
.url-input {
|
|
flex: 1;
|
|
}
|
|
|
|
.controls {
|
|
display: flex;
|
|
}
|
|
|
|
.controls button {
|
|
display: flex;
|
|
margin-right: 0.3em;
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
}
|
|
|
|
.iframe-focused-alert {
|
|
display: none;
|
|
position: absolute;
|
|
bottom: 1em;
|
|
background: var(--vscode-editorWidget-background);
|
|
color: var(--vscode-editorWidget-foreground);
|
|
padding: 0.2em 0.2em;
|
|
border-radius: 4px;
|
|
|
|
font-size: 8px;
|
|
font-family: monospace;
|
|
user-select: none;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.iframe-focused.enable-focus-lock-indicator .iframe-focused-alert {
|
|
display: block;
|
|
}
|