Overlay hiding stars

Hey y'all! I've run into a general CSS/design problem that I'm kinda stumped on solving. In the image the red circles are highlighting the star(s) in the constellation that are overlaid by my absolute positioned elements and therefore are uninteractable without stretching to some insane dimensions. Any suggestions?
I've thought about maybe adding a margin to the image but that just makes the scrolling even worse :(

Maybe add a hover zone near the top that makes the overlay appear temporarily? It could fade out after a few seconds if not interacted with.

So it's not very intuitive but the "Boons spent on Other" line also has a hover listener. Any idea if you can have nested hovers like that?

Additionally, I just thought about what if there was a button that collapsed/expanded it? Would that work?

Yeah, I think you can

Yes, I think it would also work

@arcanist gave LeaguePoints™ to @Ethck (#19 • 90)

Unrelated, but I think you should add some padding to the left part of the overlay

Hmm, well those are certainly some ideas to work with then. Thanks @arcanist !

@Ethck gave LeaguePoints™ to @arcanist (#16 • 127)

CSS is not my strong suit lol

Do you mean for the text?

here's a better picture of that

It's inside of a tidy5e sheet

I mean the entire box which has all of those labels and input fields

Even more padding???

Just around this part, yes

Wait, padding for the inside of the box or on the outside?

Padding is on the inside; margin is on the outside

🤦

With 5px? Is that good or do you recommend more?

It's good like that, but you should probably avoid using fixed values.
I usually use em, vh, vw, or just a percentage.
Try 1% for padding, maybe?
It lets it be more dynamic when you use it on different sized screens or when resizing the window

Keep in mind that I'm also not a CSS expert, having just started development in general

1%

So it looks like either way I'm going I need to make a collapsible field for this. Any advice on making things collapse? Most collapsing I've done was with summary and details lol

Yeah, that works well.
Maybe try something like this, if you want a simple alternative https://github.com/arcanistzed/toggle-banner/blob/main/scripts/module.js

The scaling and transition in the CSS make it much more dynamic https://github.com/arcanistzed/toggle-banner/blob/main/styles/module.css

Seems simple enough. Your "commands" if you will are based on the logo, what would you recommend for my use case? Add small button to display it?

I'm not entirely sure what you mean... I'll post a more full picture for reference though
(ignore the health value lol)

Ooooh, I like that... Let me see if I can pull it off easily.

Oh man, that's so much easier! Thanks @mclemente !

@Ethck gave LeaguePoints™ to @mclemente (#48 • 32)

Recommendations? Definitely need to change the colors but I'm still thinking it might be cool to do the collapsing section.

No, this was actually for a commission. No clue what Cytoscape is.

Hmm, flexrow isn't what I was looking for apparently. I want the big section to be left aligned but the right section (level, cost) to be aligned to the right, just like in the original. Any ideas?

This makes me wish I had found it sooner... I've done crude approximations based on percentages...

Turns out details/summary makes that trivial...

changed the color to make it visible while messing with it, but align-items: end gets closer.

So the big box on the left should be on the left (basically where it is) and the Level/Cost should be on the right and it should be tiny (like 15% width)

Man, I wish I could do CSS while still waking up 🤣

Can it do Chrome & Firefox?

Awesome!

And Voila!

Thanks tons @Nekro Darkmoon ! Now I just need to find color choices...

@Ethck gave LeaguePoints™ to @Nekro Darkmoon (#22 • 75)

Wait, the right side or the left side?

Okay, just making sure lol

You never really know with the dark magic that is CSS...

I swear I've built data pipelines for billions of records in less time than it took me to solve this lol

With the collapsing?

I had it that way originally, but no collapsing :(

Close, but not what I intended lol

I semi reverted back to position absolute and got this :)

Yeah, idk why that happened

🤷

So, here's a bit of a code dump but maybe you can help me figure out that last row...

.astrology .boon-tracker {
    background-color:rgba(225, 224, 214, .9);
    z-index: 10;
    position: absolute;
}

.astrology .boon-tracker.left {
    width: 40%;
    top: 35%;
    left: 5%;
    padding: 1%;
}

.astrology .boon-tracker.right {
    top: 35%;
    right: 5%;
    margin-left: auto;
    font-size: 20px;
    padding: 5px;
    width: 15%;
}

.astrology .boon-tracker.left div input {
    flex-basis: 20%;
    flex-grow: 0;
    background-color:rgba(223, 221, 213, 1);
    box-shadow: 0 0 0 1px var(--primary-accent) inset;
    padding:5px;
}

Man, there's just so much here that I don't know...