Ok, so, went on quite an adventure to figure this out. In the end, this post with the prototype linked put me on the right path.
Use Floating buttons to target them by title
Using this insight, I created 3 floating buttons and named them. It allows you to target a specific floating button (not dependent on where it is on the page).
As far as I can tell, the underlying HTML for floating buttons looks like this:
<button title="Your title">
<div class="floating-btn-style">
<div>
<svg>...</svg>
</div>
</div>
</button>
So, knowing that, I was able to place and
<pre><span><style>
/* adjust button component here: position, size, shadows, etc. */
[title="Mark complete"] {
position: fixed;
bottom:50px;
left:23%;
width:54%;
height: 60px;
filter: drop-shadow(0px 2px 16px rgba(6, 51, 54, 0.1));
}
/* "visible" part of styling goes here: button color, border, border-radius, etc. */
[title="Mark complete"] > div.floating-btn-style {
background: #53B7AD;
border-radius: 16px;
}
/* adding text to the middle button */
[title="Mark complete"] > div.floating-btn-style::before {
content: "Mark completed";
color: white;
font-size: 16px;
margin-right: 8px;
font-weight: 600;
}
/* style the icon here */
[title="Mark complete"] > div > div > svg {
fill: white;
width: 24px;
}
Still some problems with the placement though…
So far, this was the most stable CSS structure as far as the sizing/placement of the buttons goes. Except for when I try to style a list above to have margins, I run into issues again.
I’m not sure how to enable copying apps with the new team structure. I’d be happy to share it if anyone wants to dig in…