LOEFD
Join ServerOverlay 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 :(
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
Try
It lets it be more dynamic when you use it on different sized screens or when resizing the window
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
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?
Message Not Public
Sign In & Join Server To View
I'm not entirely sure what you mean... I'll post a more full picture for reference though
(ignore the health value lol)
(ignore the health value lol)
Message Not Public
Sign In & Join Server To View
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)

2 Messages Not Public
Sign In & Join Server To View
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.
2 Messages Not Public
Sign In & Join Server To View
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...
Message Not Public
Sign In & Join Server To View
align-items: end;
Turns out details/summary makes that trivial...
changed the color to make it visible while messing with it, but align-items: end gets closer.
2 Messages Not Public
Sign In & Join Server To View
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)
2 Messages Not Public
Sign In & Join Server To View
Man, I wish I could do CSS while still waking up 🤣
Message Not Public
Sign In & Join Server To View
Can it do Chrome & Firefox?
Message Not Public
Sign In & Join Server To View
Awesome!
And Voila!
Thanks tons @Nekro Darkmoon ! Now I just need to find color choices...
@Ethck gave
LeaguePoints™ to @Nekro Darkmoon (#22 • 75)

3 Messages Not Public
Sign In & Join Server To View
Wait, the right side or the left side?
Message Not Public
Sign In & Join Server To View
Okay, just making sure lol
Message Not Public
Sign In & Join Server To View
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
2 Messages Not Public
Sign In & Join Server To View
With the collapsing?
Message Not Public
Sign In & Join Server To View
I had it that way originally, but no collapsing :(
2 Messages Not Public
Sign In & Join Server To View
Close, but not what I intended lol
2 Messages Not Public
Sign In & Join Server To View
Message Not Public
Sign In & Join Server To View
I semi reverted back to position absolute and got this :)
Yeah, idk why that happened
🤷
2 Messages Not Public
Sign In & Join Server To View
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;
}
4 Messages Not Public
Sign In & Join Server To View
Man, there's just so much here that I don't know...
6 Messages Not Public
Sign In & Join Server To View