Overlay hiding stars

EEthck8/12/2021
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 :(
Aarcanist8/12/2021
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.
EEthck8/12/2021
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?
EEthck8/12/2021
Additionally, I just thought about what if there was a button that collapsed/expanded it? Would that work?
Aarcanist8/12/2021
Yeah, I think you can
Aarcanist8/12/2021
Yes, I think it would also work :vote:
LTLLLeo The League Lion8/12/2021
@arcanist gave :vote: LeaguePoints™ to @Ethck (#19 • 90)
Aarcanist8/12/2021
Unrelated, but I think you should add some padding to the left part of the overlay
EEthck8/12/2021
Hmm, well those are certainly some ideas to work with then. Thanks @arcanist !
LTLLLeo The League Lion8/12/2021
@Ethck gave :vote: LeaguePoints™ to @arcanist (#16 • 127)
EEthck8/12/2021
CSS is not my strong suit lol
EEthck8/12/2021
Do you mean for the text?
EEthck8/12/2021
here's a better picture of that
EEthck8/12/2021
It's inside of a tidy5e sheet
Aarcanist8/12/2021
I mean the entire box which has all of those labels and input fields
EEthck8/12/2021
Even more padding???
Aarcanist8/12/2021
Just around this part, yes
EEthck8/12/2021
Wait, padding for the inside of the box or on the outside?
Aarcanist8/12/2021
Padding is on the inside; margin is on the outside
EEthck8/12/2021
🤦
EEthck8/12/2021
With 5px? Is that good or do you recommend more?
Aarcanist8/12/2021
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
Aarcanist8/12/2021
Keep in mind that I'm also not a CSS expert, having just started development in general
EEthck8/12/2021
1%
EEthck8/12/2021
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
Aarcanist8/12/2021
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
Aarcanist8/12/2021
The scaling and transition in the CSS make it much more dynamic https://github.com/arcanistzed/toggle-banner/blob/main/styles/module.css
EEthck8/12/2021
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?
UUUnknown User8/12/2021
Message Not Public
Sign In & Join Server To View
EEthck8/12/2021
I'm not entirely sure what you mean... I'll post a more full picture for reference though
(ignore the health value lol)
UUUnknown User8/12/2021
Message Not Public
Sign In & Join Server To View
EEthck8/12/2021
Ooooh, I like that... Let me see if I can pull it off easily.
EEthck8/12/2021
Oh man, that's so much easier! Thanks @mclemente !
LTLLLeo The League Lion8/12/2021
@Ethck gave :vote: LeaguePoints™ to @mclemente (#48 • 32)
UUUnknown User8/12/2021
2 Messages Not Public
Sign In & Join Server To View
EEthck8/12/2021
Recommendations? Definitely need to change the colors but I'm still thinking it might be cool to do the collapsing section.
EEthck8/12/2021
No, this was actually for a commission. No clue what Cytoscape is.
UUUnknown User8/12/2021
2 Messages Not Public
Sign In & Join Server To View
EEthck8/12/2021
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?
EEthck8/12/2021
This makes me wish I had found it sooner... I've done crude approximations based on percentages...
UUUnknown User8/12/2021
Message Not Public
Sign In & Join Server To View
Aarcanist8/12/2021
align-items: end;
EEthck8/12/2021
Turns out details/summary makes that trivial...
EEthck8/12/2021
changed the color to make it visible while messing with it, but align-items: end gets closer.
UUUnknown User8/12/2021
2 Messages Not Public
Sign In & Join Server To View
EEthck8/12/2021
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)
UUUnknown User8/12/2021
2 Messages Not Public
Sign In & Join Server To View
EEthck8/12/2021
Man, I wish I could do CSS while still waking up 🤣
UUUnknown User8/12/2021
Message Not Public
Sign In & Join Server To View
EEthck8/12/2021
Can it do Chrome & Firefox?
UUUnknown User8/12/2021
Message Not Public
Sign In & Join Server To View
EEthck8/12/2021
Awesome!
EEthck8/12/2021
And Voila!
EEthck8/12/2021
Thanks tons @Nekro Darkmoon ! Now I just need to find color choices...
LTLLLeo The League Lion8/12/2021
@Ethck gave :vote: LeaguePoints™ to @Nekro Darkmoon (#22 • 75)
UUUnknown User8/12/2021
3 Messages Not Public
Sign In & Join Server To View
EEthck8/12/2021
Wait, the right side or the left side?
UUUnknown User8/12/2021
Message Not Public
Sign In & Join Server To View
EEthck8/12/2021
EEthck8/12/2021
Okay, just making sure lol
UUUnknown User8/12/2021
Message Not Public
Sign In & Join Server To View
EEthck8/12/2021
You never really know with the dark magic that is CSS...
EEthck8/12/2021
I swear I've built data pipelines for billions of records in less time than it took me to solve this lol
UUUnknown User8/12/2021
2 Messages Not Public
Sign In & Join Server To View
EEthck8/12/2021
With the collapsing?
UUUnknown User8/12/2021
Message Not Public
Sign In & Join Server To View
EEthck8/12/2021
I had it that way originally, but no collapsing :(
UUUnknown User8/12/2021
2 Messages Not Public
Sign In & Join Server To View
EEthck8/12/2021
Close, but not what I intended lol
EEthck8/12/2021
UUUnknown User8/12/2021
2 Messages Not Public
Sign In & Join Server To View
EEthck8/12/2021
UUUnknown User8/12/2021
Message Not Public
Sign In & Join Server To View
EEthck8/12/2021
I semi reverted back to position absolute and got this :)
EEthck8/12/2021
Yeah, idk why that happened
EEthck8/12/2021
🤷
UUUnknown User8/12/2021
2 Messages Not Public
Sign In & Join Server To View
EEthck8/12/2021
EEthck8/12/2021
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;
}
UUUnknown User8/12/2021
4 Messages Not Public
Sign In & Join Server To View
EEthck8/12/2021
Man, there's just so much here that I don't know...
UUUnknown User8/12/2021
6 Messages Not Public
Sign In & Join Server To View