Overriding the default CSS for the iOS motion prompt

[jasonwebb]

I’ve been trying to customize the iOS motion prompt but I’m having a hard time figuring out what styles are applied by 8th Wall in order to properly override them. The docs provide some CSS selectors, but not all rules or the HTML used, so getting the specificity right is tricky. I’ve been poking around the xrextras Github repo but I haven’t found the relevant HTML or CSS there yet - if I’m just missing it let me know!

I don’t own any iOS or Mac devices so real-time debugging isn’t possible for me. Since this prompt can’t be triggered in the Simulator I’m having to rely on screenshots from non-technical team members, which takes a while.

Attached is the latest iteration I have in my app. It looks like I’m specifically having issues with the sizing of the two buttons. I’ve tried adjusting their padding, making their width auto, setting overflow: visible, and removing the background images, but still the primary CTA on the right is getting cut off on some devices. I’d appreciate any insight into what determines the sizing for these buttons and how I can get these looking good!

[Evan]

Hey Jason!

This screen is not actually apart of the loading module, it is being injected by our engine at runtime if it detects a user gesture is required to request permissions (like on an iOS device).

Hopefully these images/code snippets help:

HTML:

<div class="prompt-box-8w">
  <p>AR requires access to device motion sensors</p>
  <div class="prompt-button-container-8w">
    <button class="prompt-button-8w">Cancel</button>
    <button class="prompt-button-8w button-primary-8w">Continue</button>
  </div>
</div>

CSS:

.prompt-box-8w {
    font-family: 'Nunito-SemiBold', 'Nunito', sans-serif;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 15em;
    max-width: 100%;
    font-size: 20px;
    z-index: 888;
    background-color: white;
    filter: drop-shadow(0 0 3px #0008);
    overflow: hidden;
    border-radius: 10px;
    padding: 0.5em;
    color: #323232;
    text-align: center;
  }

  .prompt-box-8w * {
    font-family: inherit;
  }

  .prompt-box-8w p {
    margin: 0.5em 0.5em 1em;
  }

  .prompt-button-container-8w {
    display: flex;
  }

  .prompt-button-8w {
    flex: 1 0 0;
    min-width: 5em;
    text-align: center;
    color: white;
    background-color: #818199;
    font-size: inherit;
    font-family: inherit;
    display: block;
    outline: none;
    border: none;
    margin: 0;
    border-radius: 10px;
    padding: 0.37em;
  }

  .prompt-button-8w:not(:last-child) {
    margin-right: 0.5em;
  }

  .button-primary-8w {
    background-color: #7611B7;
  }

The width of the .prompt-box-8w and the min-width of the .prompt-button-8w are probably affecting the width of the buttons most directly.

[jasonwebb]

Thanks Evan, that’s exactly what I needed! You’re right that with my larger, more spaced-out typography, the box’s width and buttons’ min-widths caused a bit of a traffic jam. I had some extra horizontal padding on the buttons too that wasn’t helping. I set the button widths to auto and that pretty much did the trick, but I also made the button font-size fluid for good measure too.

font-size: clamp(11px, 5vw, 16px);

Thanks for the assist! This could be some great info to have in the docs for customizing the loading screen, but having this forum topic around will help some folks I’m sure.