wlxsp
/
test1
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Fixes webview issues with vscode insiders builds 

See https://github.com/Microsoft/vscode/issues/68211
main
Eric Amodio 5 years ago
parent
b91f015dd3
commit
ea734c8bca
3 changed files with 114 additions and 100 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +63
    -63
      src/ui/scss/main.scss
  2. +12
    -12
      src/ui/scss/popup.scss
  3. +39
    -25
      src/ui/shared/app-base.ts

+ 63
- 63
src/ui/scss/main.scss View File

@ -3,8 +3,8 @@ html {
}
body {
background-color: var(--background-color);
color: var(--color);
background-color: var(--color-background);
color: var(--color-foreground);
font-family: var(--font-family);
height: 100%;
line-height: 1.4;
@ -35,7 +35,7 @@ canvas.snow {
a {
border: 0;
color: var(--link-color);
color: var(--color-link-foreground);
font-weight: 400;
outline: none;
text-decoration: none;
@ -47,7 +47,7 @@ a {
}
&:focus {
outline-color: var(--focus-border-color);
outline-color: var(--color-focus-border);
}
}
@ -58,18 +58,18 @@ b {
code,
.shortcut-key {
border-radius: 4px;
color: var(--color);
color: var(--color-foreground);
padding: 2px 6px 0 6px;
vertical-align: baseline;
.vscode-dark & {
background-color: var(--background-color--lighten-15);
border-bottom: 2px solid var(--background-color--lighten-15);
background-color: var(--color-background--lighten-15);
border-bottom: 2px solid var(--color-background--lighten-15);
}
.vscode-light & {
background-color: var(--background-color--darken-15);
border-bottom: 2px solid var(--background-color--darken-15);
background-color: var(--color-background--darken-15);
border-bottom: 2px solid var(--color-background--darken-15);
}
}
@ -81,13 +81,13 @@ code,
vertical-align: text-top;
.vscode-dark & {
background-color: var(--background-color--lighten-15);
border-bottom: 2px solid var(--background-color--lighten-15);
background-color: var(--color-background--lighten-15);
border-bottom: 2px solid var(--color-background--lighten-15);
}
.vscode-light & {
background-color: var(--background-color--darken-15);
border-bottom: 2px solid var(--background-color--darken-15);
background-color: var(--color-background--darken-15);
border-bottom: 2px solid var(--color-background--darken-15);
}
}
@ -153,7 +153,7 @@ input[type='checkbox'] {
}
&[disabled] {
color: var(--color--75);
color: var(--color-foreground--75);
cursor: default;
}
}
@ -161,7 +161,7 @@ input[type='checkbox'] {
input[type='text'],
input:not([type]) {
background: none;
color: var(--color);
color: var(--color-foreground);
margin: 0 0.75em;
max-width: 300px;
padding: 4px;
@ -176,7 +176,7 @@ input:not([type]) {
}
&:focus {
outline-color: var(--focus-border-color);
outline-color: var(--color-focus-border);
.vscode-light & {
background-color: rgba(255, 255, 255, 0.4);
@ -188,7 +188,7 @@ input:not([type]) {
}
&[disabled] {
color: var(--color--75);
color: var(--color-foreground--75);
cursor: default;
}
@ -208,17 +208,17 @@ section {
padding: 1rem;
.vscode-light & {
background-color: var(--background-color--darken-05);
background-color: var(--color-background--darken-05);
}
.vscode-dark & {
background-color: var(--background-color--lighten-05);
background-color: var(--color-background--lighten-05);
}
}
select {
background: none;
color: var(--color);
color: var(--color-foreground);
cursor: pointer;
margin: 0 0.75em;
padding: 2px;
@ -232,7 +232,7 @@ select {
}
&:focus {
outline-color: var(--focus-border-color);
outline-color: var(--color-focus-border);
.vscode-light & {
background-color: rgba(255, 255, 255, 0.4);
}
@ -243,22 +243,22 @@ select {
}
&[disabled] {
color: var(--color--75);
color: var(--color-foreground--75);
cursor: default;
}
}
select option {
.vscode-light & {
background-color: var(--background-color--darken-05);
background-color: var(--color-background--darken-05);
}
.vscode-dark & {
background-color: var(--background-color--lighten-05);
background-color: var(--color-background--lighten-05);
}
&:focus {
outline-color: var(--focus-border-color);
outline-color: var(--color-focus-border);
.vscode-light & {
background-color: rgba(255, 255, 255, 0.4);
}
@ -313,8 +313,8 @@ ul {
&:hover {
.vscode-light & {
background-color: var(--button-background-color--darken-30);
border-color: var(--button-background-color--darken-30);
background-color: var(--color-button-background--darken-30);
border-color: var(--color-button-background--darken-30);
color: white !important;
}
.vscode-dark & {
@ -348,16 +348,16 @@ ul {
}
.button--flat-primary {
background-color: var(--button-background-color);
border: 1px solid var(--button-background-color);
color: var(--button-color) !important;
background-color: var(--color-button-background);
border: 1px solid var(--color-button-background);
color: var(--color-button-foreground) !important;
font-weight: 600;
transition: background-color 250ms, border-color 250ms, color 250ms;
&:hover {
.vscode-light & {
background-color: var(--button-background-color--darken-30);
border-color: var(--button-background-color--darken-30);
background-color: var(--color-button-background--darken-30);
border-color: var(--color-button-background--darken-30);
color: white !important;
}
.vscode-dark & {
@ -405,11 +405,11 @@ ul {
.about {
font-size: 1em;
color: var(--color--75);
color: var(--color-foreground--75);
margin: 3em 1em;
b {
color: var(--color--85);
color: var(--color-foreground--85);
}
}
@ -418,12 +418,12 @@ ul {
margin: 2em;
.vscode-light & {
background-color: var(--background-color--darken-05);
background-color: var(--color-background--darken-05);
box-shadow: inset 0 0 6px 0px rgba(0, 0, 0, 0.05);
}
.vscode-dark & {
background-color: var(--background-color--lighten-075);
background-color: var(--color-background--lighten-075);
box-shadow: inset 0 0 6px 0px rgba(255, 255, 255, 0.075);
}
}
@ -498,7 +498,7 @@ ul {
}
.changelog__hint {
color: var(--color--75);
color: var(--color-foreground--75);
font-weight: 200;
margin: 1em;
}
@ -533,11 +533,11 @@ ul {
padding-top: 2em;
.vscode-dark & {
border-top: 1px solid var(--background-color--lighten-30);
border-top: 1px solid var(--color-background--lighten-30);
}
.vscode-light & {
border-top: 1px solid var(--background-color--darken-30);
border-top: 1px solid var(--color-background--darken-30);
}
}
@ -630,7 +630,7 @@ ul {
}
.header__blurb {
color: var(--color--75);
color: var(--color-foreground--75);
flex: 55% 2 1;
font-size: 1.2em;
font-weight: 200;
@ -643,13 +643,13 @@ ul {
}
.header__link {
color: var(--color);
color: var(--color-foreground);
outline: none;
&:hover,
&:active,
&:focus {
color: var(--color);
color: var(--color-foreground);
outline: none;
}
}
@ -664,7 +664,7 @@ ul {
}
.header__subtitle {
color: var(--color--50);
color: var(--color-foreground--50);
display: block;
font-size: 2em;
font-weight: 100;
@ -673,7 +673,7 @@ ul {
}
.icon {
background-color: var(--color);
background-color: var(--color-foreground);
display: inline-block;
height: 24px;
margin-bottom: -9px;
@ -711,7 +711,7 @@ ul {
}
.label__hint {
color: var(--color--75);
color: var(--color-foreground--75);
display: block;
font-weight: 200;
margin: 1em 2em;
@ -719,7 +719,7 @@ ul {
.list-button {
border: none;
color: var(--color);
color: var(--color-foreground);
cursor: pointer;
font-size: 1em;
height: 5em;
@ -730,21 +730,21 @@ ul {
width: calc(100% - 2px);
.vscode-light & {
background-color: var(--background-color--darken-05);
background-color: var(--color-background--darken-05);
}
.vscode-dark & {
background-color: var(--background-color--lighten-05);
background-color: var(--color-background--lighten-05);
}
&:hover,
&:focus {
.vscode-light & {
background-color: var(--background-color--darken-075);
background-color: var(--color-background--darken-075);
}
.vscode-dark & {
background-color: var(--background-color--lighten-075);
background-color: var(--color-background--lighten-075);
}
}
@ -752,11 +752,11 @@ ul {
outline: 0;
.vscode-light & {
border: 1px solid var(--background-color--darken-15);
border: 1px solid var(--color-background--darken-15);
}
.vscode-dark & {
border: 1px solid var(--background-color--lighten-15);
border: 1px solid var(--color-background--lighten-15);
}
}
}
@ -771,7 +771,7 @@ ul {
}
.list-button__detail {
color: var(--color--75);
color: var(--color-foreground--75);
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
@ -785,7 +785,7 @@ ul {
}
.page-header--sticky {
background: var(--background-color);
background: var(--color-background);
margin: 1em 0 1em 0;
padding-bottom: 1em;
position: sticky;
@ -823,12 +823,12 @@ ul {
select,
option {
background-color: var(--background-color) !important;
background-color: var(--color-background) !important;
}
}
.page-header__subtitle {
color: var(--color--75);
color: var(--color-foreground--75);
font-size: 1.2em;
margin: 0.25em 0 0 0;
}
@ -865,7 +865,7 @@ ul {
position: relative;
&:after {
background-color: var(--color--75);
background-color: var(--color-foreground--75);
content: '';
height: 40px;
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125"><path d="M50 62a3 3 0 0 1-2-1L26 44a3 3 0 0 1 3-5l21 16 21-16a3 3 0 1 1 3 5L52 61a3 3 0 0 1-2 1z"/></svg>');
@ -900,7 +900,7 @@ ul {
}
.section__title-hint {
color: var(--color--75);
color: var(--color-foreground--75);
font-weight: 200;
margin: 0.25em 0;
}
@ -985,13 +985,13 @@ ul {
}
.settings-group__header-hint {
color: var(--color--75);
color: var(--color-foreground--75);
font-weight: 200;
margin-top: -1em;
}
.settings-group__hint {
color: var(--color--75);
color: var(--color-foreground--75);
font-weight: 200;
margin-left: 2.3em;
text-indent: -2.75em;
@ -1027,14 +1027,14 @@ ul {
&[disabled] {
label {
color: var(--color--75);
color: var(--color-foreground--75);
cursor: default;
}
}
}
.settings-group__setting--small {
color: var(--color--75);
color: var(--color-foreground--75);
font-size: 0.8em;
margin-top: -0.75em;
@ -1049,7 +1049,7 @@ ul {
}
.setting__hint {
color: var(--color--50);
color: var(--color-foreground--50);
font-size: 0.9em;
margin: -1em 0 1em 1em;
}

+ 12
- 12
src/ui/scss/popup.scss View File

@ -10,7 +10,7 @@
&:before {
background: transparent;
border: 12px solid transparent;
content: "";;
content: '';;
left: 50%;
position: absolute;
pointer-events: none;
@ -18,32 +18,32 @@
z-index: 1001;
.vscode-light & {
border-bottom-color: var(--background-color--darken-075);
border-bottom-color: var(--color-background--darken-075);
}
.vscode-dark & {
border-bottom-color: var(--background-color--lighten-075);
border-bottom-color: var(--color-background--lighten-075);
}
}
.vscode-light & {
background: var(--background-color--darken-075);
background: var(--color-background--darken-075);
}
.vscode-dark & {
background: var(--background-color--lighten-075);
background: var(--color-background--lighten-075);
}
}
.token-popup__hint {
color: var(--color--75);
color: var(--color-foreground--75);
display: inline-block;
font-weight: 200;
margin: 1.25em 0.5em 0 0.25em;
}
.token-popup__title {
color: var(--color);
color: var(--color-foreground);
font-weight: 400;
margin: 0.25em 0 1em 0;
text-align: center;
@ -51,7 +51,7 @@
.token-popup__table {
border-collapse: collapse;
color: var(--color--75);
color: var(--color-foreground--75);
table-layout: fixed;
& tr:nth-child(even) {
@ -82,8 +82,8 @@
}
.token {
background: var(--link-color--darken-20);
border-bottom: 2px solid var(--link-color--darken-20);
background: var(--color-link-foreground--darken-20);
border-bottom: 2px solid var(--color-link-foreground--darken-20);
border-radius: 3px;
color: white;
cursor: pointer;
@ -91,10 +91,10 @@
padding: 1px 8px !important;
&:before {
content: "${";
content: '${';
}
&:after {
content: "}";
content: '}';
}
}

+ 39
- 25
src/ui/shared/app-base.ts View File

@ -307,36 +307,50 @@ export abstract class App {
const computedStyle = getComputedStyle(body);
const bodyStyle = body.style;
let color = computedStyle.getPropertyValue('--color').trim();
bodyStyle.setProperty('--color--85', opacity(color, 85));
bodyStyle.setProperty('--color--75', opacity(color, 75));
bodyStyle.setProperty('--color--50', opacity(color, 50));
color = computedStyle.getPropertyValue('--background-color').trim();
bodyStyle.setProperty('--background-color--lighten-05', lighten(color, 5));
bodyStyle.setProperty('--background-color--darken-05', darken(color, 5));
bodyStyle.setProperty('--background-color--lighten-075', lighten(color, 7.5));
bodyStyle.setProperty('--background-color--darken-075', darken(color, 7.5));
bodyStyle.setProperty('--background-color--lighten-15', lighten(color, 15));
bodyStyle.setProperty('--background-color--darken-15', darken(color, 15));
bodyStyle.setProperty('--background-color--lighten-30', lighten(color, 30));
bodyStyle.setProperty('--background-color--darken-30', darken(color, 30));
color = computedStyle.getPropertyValue('--link-color').trim();
bodyStyle.setProperty('--link-color--darken-20', darken(color, 20));
bodyStyle.setProperty('--font-size', computedStyle.getPropertyValue('--vscode-editor-font-size').trim());
bodyStyle.setProperty(
'--focus-border-color',
computedStyle.getPropertyValue('--vscode-focusBorder').trim()
'--font-family',
computedStyle.getPropertyValue('--vscode-editor-font-family').trim()
);
color = computedStyle.getPropertyValue('--vscode-button-background').trim();
bodyStyle.setProperty('--button-background-color', color);
bodyStyle.setProperty('--button-background-color--darken-30', darken(color, 30));
bodyStyle.setProperty(
'--button-color',
computedStyle.getPropertyValue('--vscode-button-foreground').trim()
'--font-weight',
computedStyle.getPropertyValue('--vscode-editor-font-weight').trim()
);
let color = computedStyle.getPropertyValue('--vscode-editor-background').trim();
bodyStyle.setProperty('--color-background', color);
bodyStyle.setProperty('--color-background--lighten-05', lighten(color, 5));
bodyStyle.setProperty('--color-background--darken-05', darken(color, 5));
bodyStyle.setProperty('--color-background--lighten-075', lighten(color, 7.5));
bodyStyle.setProperty('--color-background--darken-075', darken(color, 7.5));
bodyStyle.setProperty('--color-background--lighten-15', lighten(color, 15));
bodyStyle.setProperty('--color-background--darken-15', darken(color, 15));
bodyStyle.setProperty('--color-background--lighten-30', lighten(color, 30));
bodyStyle.setProperty('--color-background--darken-30', darken(color, 30));
color = computedStyle.getPropertyValue('--vscode-button-background').trim();
bodyStyle.setProperty('--color-button-background', color);
bodyStyle.setProperty('--color-button-background--darken-30', darken(color, 30));
color = computedStyle.getPropertyValue('--vscode-button-foreground').trim();
bodyStyle.setProperty('--color-button-foreground', color);
color = computedStyle.getPropertyValue('--vscode-editor-foreground').trim();
if (!color) {
color = computedStyle.getPropertyValue('--vscode-foreground').trim();
}
bodyStyle.setProperty('--color-foreground', color);
bodyStyle.setProperty('--color-foreground--85', opacity(color, 85));
bodyStyle.setProperty('--color-foreground--75', opacity(color, 75));
bodyStyle.setProperty('--color-foreground--50', opacity(color, 50));
color = computedStyle.getPropertyValue('--vscode-focusBorder').trim();
bodyStyle.setProperty('--color-focus-border', color);
color = computedStyle.getPropertyValue('--vscode-textLink-foreground').trim();
bodyStyle.setProperty('--color-link-foreground', color);
bodyStyle.setProperty('--color-link-foreground--darken-20', darken(color, 20));
};
const observer = new MutationObserver(onColorThemeChanged);

Write Preview
Loading…
Cancel
Save