Hide backgrounds `n33A01B2FromDepth0ToInwardForAllBackgrounds` doesnt work for ipynb files

[Norlandz]

For people who use blockman for Jupyter notebooks, and wants to remove the background.

From the doc: "blockman.n33A01B2FromDepth0ToInwardForAllBackgrounds": "45,0,0,2; none",
it should remove the black background,
and it does remove for js, py language, but not for ipynb.

Just a heads up.

[leodevbro]

@Norlandz, Hello, thanks for reporting it. Well, Blockman currently cannot render truly transparent backgrounds, it just tries to render VS Code document background color to create an illusion of transparent blocks. I will think about how to fix it. For now you can probably just set the same color as the ipynb file background which is I guess #252526 or maybe #252525, but yeah I understand that then the py file will have the same problem.

Yeah, this is super pity thing and super disappointing that in 2024 there is a problem to render transparent and partially transparent rectangles. The main technical explanation is that basically it can render transparent and partially transparent rectangles but then it will not be able to render radius-rounded gradient borders. Blockman is currently using a special trick to be able to render radius-rounded gradient borders, but it sacrificed the ability of transparency.

[leodevbro]

I tried CSS mask method:

padding: var(--border-thickness); // padding acts as a border
padding-bottom: 0px; // padding acts as a border
border-top-left-radius: calc(var(--basic-border-radius) + var(--border-thickness));
border-top-right-radius: calc(var(--basic-border-radius) + var(--border-thickness));
background: linear-gradient(to right, white 0%, #c070155e 0%, #ff990177 90%, rgba(255, 255, 255, 0.486));

mask:
    linear-gradient(#000 0 0) exclude,
    linear-gradient(#000 0 0) content-box;

And it works correctly, but unfortunately it slows down the extension too much. It is probably 5 times slower, maybe 10 times. I can feel the UI slowdown too much. It does not seem to be appropriate for production.

[Norlandz]

@leodevbro
Thanks for the reply.

Blockman currently cannot render truly transparent backgrounds, it just tries to render VS Code document background color to create an illusion of transparent blocks.
(//...)
The main technical explanation is that basically it can render transparent and partially transparent rectangles but then it will not be able to render radius-rounded gradient borders.

Is that "cannot render truly transparent backgrounds" due to Vscode problem, or just css linear-gradient problem?

it slows down the extension too much

(I guess I will stick with the "inner black block" for now, not a big issue. Cuz slow speed will add distraction when im coding.)

[leodevbro]

Is that "cannot render truly transparent backgrounds" due to Vscode problem, or just css linear-gradient problem?

Not VS Code problem. It is a fundamental CSS problem. CSS div styling is limited to be able to have a div with rounded gradient border and at the same time transparent background. CSS mask is relatively new feature of modern CSS, and it works fine, but as I said, it is too CPU intensive.

I am trying to implement SVG rendering instead of current CSS div::before rendering. SVG is so much more flexible and I guess fast performant too.