StickerService.js Visual Studio Code Additions.

First of all, I’m sorry for doing this as an issue, but by making the project construct itself from ten different places means I have no idea where or even how I should make this as a pull request. At least it is a VScode thing, so it’s the correct repo.

---

Anyway, I’ve been tuning the StrickerService.js wallpaper installation script to make more stuff transparent/wallpapered, and here are my changes to it. I kept them separated so it would be easier to handle, but any class with “background-image: url(‘${wallpaperURL}’) !important;” are identical to the one already in the CSS.

Makes the welcome screen transparent

.editor-container {
	background-image: url('${wallpaperURL}') !important;
	/* blah */
}

.editor-instance,
.welcomePageContainer,
.welcomePage,
.welcomePageFocusElement {
	background-color: transparent !important;
}

---

Fix “wallpaper” being drawn over “background”, mostly only important if they differ from each other.

/* Remove from the CSS that gives it a background */
	.split-view-view {
		background-color: transparent !important; /* Just in case. */
	}

---

“OUTPUT” panel is not transparent.

.monaco-workbench .part.panel > .content .monaco-editor .monaco-editor-background {
	background-image: url('${wallpaperURL}') !important;
	/* blah */
}

Left margin of the TERMINAL window

div.terminal-outer-container  {
	background-image: url('${wallpaperURL}') !important;
	/* blah */
}

---

DEBUG CONSOLE and warning/error popups

div.monaco-scrollable-element > div.monaco-list-rows{
	background-image: url('${wallpaperURL}') !important;
	/* blah */
}

---

So in full, line 33 onwards looks like this:

[id="workbench.parts.editor"] .split-view-view .editor-container .editor-instance>.monaco-editor  .overflow-guard>.monaco-scrollable-element::before,
.overflow-guard, 
.tab, 
.tabs-container,
.monaco-pane-view,
.composite.title, 
.content, 
.monaco-select-box, 
.pane-header, 
.xterm-cursor-layer,
.minimap-decorations-layer,
.decorationsOverviewRuler,
.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-breadcrumbs .breadcrumbs-control,
.ref-tree, /* find usages */
.head, /* find usages */
.monaco-workbench .part.editor>.content .editor-group-container>.title .editor-actions,  
/* .split-view-view, */
.editor-container,
.monaco-workbench .part.panel > .content .monaco-editor .monaco-editor-background,
div.monaco-scrollable-element > div.monaco-list-rows,
div.terminal-outer-container  
{
	background-image: url('${wallpaperURL}') !important;
	background-position: ${backgroundAnchoring} !important;
	background-attachment: fixed !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
}

/* transparencies */
.editor-instance,
.welcomePageContainer,
.welcomePage,
.welcomePageFocusElement, 
{
	background-color: transparent !important;
}

[JohnEdwa]

It breaks the illusion that the image is behind a transparent pane of glass.

There is always backdrop-filter: blur(1px): (though I think the image is like, 5 to 10px)

Annoyingly it also requires the background colour in RGBA to work properly as it needs to be set partly opaque: background-color: rgba(37, 37, 38, 0.2) !important;

[JohnEdwa]

Ah, didn’t notice that issue. Honestly the popups were an accident as I was trying to do the debug box, and noticed afterwards that it also changed those. I’ll see if I can find some other way for those, and do a proper pull request.