Canvas: support transparent background colors for cards

[PracticalPanda]

Use case or problem

I’d be awesome to be able to set HSLA, RGBA etc colors for cards (allowing transparency) as is done with groups. This will open up a host of options including being able to create “custom groups” from standard cards. This will also allow for overlapping cards when creating diagrams.

Proposed solution

Support HSLA, RGBA, HEX with 8 digits.

Current workaround (optional)

I’ve tried playing around with the document’s .css, and see that you can set the div with class="canvas-node-container" to background: transparent

Related feature requests (optional)

Allowing this would also somewhat solve: Canvas: transparent background for .svg files

[Tre]

Use case or problem

Obsidian need some form of non-cards texts, for example, to comment on parts of pictures. The easiest way to implement this is to add the possibility of completely transparent cards to the color menu, obviously such cards always must be shown at the top of other entities.
I would also like to see:

1. Ability to separately select colors of the rim and background of the card.
2. Ability to add new colors to the quick pick list.

[Sharknader27]

+1 for transparent cards.

[transmitthis]

I think the issue here is we don’t have png support in canvas.

Images have a set background colour, which is sometimes fine, but other times not.

If we could have actually transparency then we could solve a lot of display issues, along with the ability to send cards to the “back” or bring them to the “front” ie layering.

As for Tre colour issues, I think the colour picker is easy enough to select the rim or background of the card if needed.

The point about not having enough colours in the quick pick list may be best solved by having a hex picker to quickly paste the #4a37a0 for example - But I just realised their actually is one already there.
So just keep a list of hex colours you use and copy paste in that colour picker

Would be nice if the hex option was sticky - or the window was larger so all options could be seen at once, but early days I guess

[Sharknader27]

Btw, you can create transparent cards using CSS and apply that to “non-themed” (aka default grey) cards.

.canvas-node:not(.is-themed) .canvas-node-container {
   background-color: transparent; 
    border: 2px solid transparent;
} 

canvas-node-container {
    box-shadow:transparent;
}

[joezhouchenye]

Using non-themed the card will still have a background color and I cannot find the CSS class for this.

Instead, I change the first color in the color picker to a transparent color. The CSS snippet is attached below:

.canvas-wrapper .canvas-node.is-themed.mod-canvas-color-1 .canvas-node-container {
    background-color: transparent;
    border: 2px solid transparent; /*Change this if you want to have border*/
}

.mod-canvas-color-1 {
    --canvas-color: transparent;
}

/*Hide file name*/
.canvas-node.is-themed.mod-canvas-color-1 .canvas-node-label {
    display: none;
}

[untitled]

+1 for this feature request.

I needed this feature when a certain node started to overlap the arrow. I don’t want to move the nodes themselves to make the arrow visible - what matters to me is the existing arrangement of the nodes and the order on the canvas as a whole. Just as I don’t want to attach the arrow to the other side of the node, because that would affect the meaning of the arrow.

What does this situation look like on my canvas (arrowheads (as well as arrow text) are overlapped by nodes):

Another feature request that is relevant to me in this situation: Canvas element arrangement: bring-to-front, send-to-back