search

immersive-web / dom-overlays

A feature incubation repo for layering DOM content on/in WebXR content. Feature lead: Piotr Bialecki
https://immersive-web.github.io/dom-overlays/
Other
70 stars 9 forks source link

Overide css for overlaid element #26

Closed devsheder closed 4 years ago

devsheder commented 4 years ago

Hi there ! I'm playing with WebXR spec and dom-overlays elements :)

I wish to know if this is possible to override the default user agent style for the pseudo class ? The pseudo class is xr-overlay like mentioned in the spec https://immersive-web.github.io/dom-overlays/#css-pseudo-class

Thanks :)

klausw commented 4 years ago

Can you give a use case? The UA stylesheet rules are mostly !important because they aren't intended to be modified.

For practical purposes, you should be able to get your desired styling by putting a nested DIV in the overlay element and styling that instead, leaving the overlay element as a transparent background.

On Fri, Mar 20, 2020, 07:58 devsheder notifications@github.com wrote:

Hi there ! I'm playing with WebXR spec and dom-overlays elements :)

I wish to know if this is possible to override the default user agent style for the pseudo class ? The pseudo class is xr-overlay like mentioned in the spec https://immersive-web.github.io/dom-overlays/#css-pseudo-class

Thanks :)

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/immersive-web/dom-overlays/issues/26, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAKT5XY65CD2VHNUC3L5KJTRIOACPANCNFSM4LQNXHZA .

devsheder commented 4 years ago

Hi, after reading documentation, I've understood that with css like .myDiv:xr-overlay {} (where myDiv is the the element passed to xr.requestSession function), I would be able to override default user agent style. Like by exemple .otherDiv:hover. Finally, I managed to override default user agent style by using an html class :

.XROverlay {
  display: flex !important;
  align-items: center;
  justify-content: center;

  /* force a transparent background */
  background: rgba(0, 0, 0, 0) !important;

  /* act as containing block for descendants */
  contain: paint !important;

  /* the following styling is identical to :fullscreen */
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;

  /* intentionally not !important */
  object-fit: contain;
}
klausw commented 4 years ago

Sorry, I'm still not understanding what you're trying to do here. Have you tried something like the following?

:xr-overlay {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

Your example used .myDiv which would match a class name, not element ID, but that should also have worked assuming you use <div class="myDiv">. I think it's easier to just leave it out since :xr-overlay only matches a single element anyway, so it's not necessary to add additional specifiers.

It should not be necessary to repeat the UA style information in your own class, it'll get those styles automatically while in DOM Overlay mode. Are you trying to keep the same styling while you're not within a WebXR session?

devsheder commented 4 years ago

Hi, yes I'm trying something like that : add my own css to the UA style. So if I juste specified :xr-overlay in my CSS file, it will add additional style to the UA style ? I thought it was a suffix like :hover or :active by example :D

No, if the WebXR session is stopped, we remove the div from the DOM.

Thanks for your repsonse !

devsheder commented 4 years ago

Hi, After several tests, I was not able to add style with pseudo class :xr-overlay On my project we are using Less, maybe there is an issue with it, however the Less generated CSS was in the html <head />

I also tried "manually" within the html <head /> :

<head>
  <style>
    :xr-overlay {
      display: flex !important;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>

In Chrome inspect, this CSS was not present on my html element.

Finally, I've done that and it's working :

.XROverlay {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

This div element html in the page is :

<div id="xr-overlay" class="src-components-XROverlay__XROverlay--2hCsL">
  <div id="otherEl"></div>
</div>

I hope that will help you

klausw commented 4 years ago

It's working for me as expected on https://klausw.github.io/aframe/examples/boilerplate/webxr-dom-overlay/ , I made some modifications in Inspector to make it easier to see:

ink

klausw commented 4 years ago

I can't really help further based on isolated snippets - if you're still having issues, it would help if you could post a link to a runnable example, for example on github or glitch. Your examples don't seem consistent, class="src-components-XROverlay__XROverlay--2hCsL should not match .XROverlay in CSS. If that's supposed to be multiple class names, they should be space separated in the "class" attribute.