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

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

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

Write Preview
Loading…
Cancel
Save