Comments (7)
klausw
commented on June 14, 2024
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 ***@***.***> 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
<#26>, or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAKT5XY65CD2VHNUC3L5KJTRIOACPANCNFSM4LQNXHZA>
.
from dom-overlays.
devsheder
commented on June 14, 2024
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;
}from dom-overlays.
klausw
commented on June 14, 2024
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?
from dom-overlays.
devsheder
commented on June 14, 2024
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 !
from dom-overlays.
devsheder
commented on June 14, 2024
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
from dom-overlays.
klausw
commented on June 14, 2024
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:
from dom-overlays.
klausw
commented on June 14, 2024
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.
from dom-overlays.
Related Issues (20)
- Add DOM Overlay test to WPT HOT 1
- Spell out how optional Fullscreen API integration works HOT 6
- Interoperability and compatibility - browser vendors & web developers support for DOM Overlay HOT 1
- Clarification on domOverlay element and sizing HOT 8
- DOM overlay not well-defined for non-roots HOT 9
- Cross origin content and input
- Consider calling out XFO and `frame-ancestors` in addition to `frame-src`.
- Rethink non-goals: placing DOM elements in the 3D scene HOT 9
- Spec forces a choice of pointing ray
- Accessibility out of scope? HOT 2
- `beforexrselect` confusion HOT 1
- Feature 'dom-overlay' is not supported for mode: immersive-vr HOT 4
- CSS Backdrop FIlter Behaviour HOT 2
- XRDOMOverlayState should be an interface
- Use cases for DOM Overlays in VR HOT 31
- Android devices and iPhones support the WebXR?
- Decide on the feature name HOT 3
- Request for Examples HOT 4
- At what distance should this overlay be placed w/ Head Mounted MR devices HOT 10
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dom-overlays.