overlay-parent.css 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. html.overlay-open,
  2. html.overlay-open body {
  3. height: 100%;
  4. overflow: hidden;
  5. }
  6. #overlay-container,
  7. .overlay-modal-background,
  8. .overlay-element {
  9. height: 100%;
  10. left: 0;
  11. position: absolute;
  12. top: 0;
  13. width: 100%;
  14. z-index: 500;
  15. }
  16. .overlay-modal-background {
  17. /* Using a transparent png renders faster than using opacity */
  18. background: transparent url(images/background.png) repeat;
  19. }
  20. .overlay-element {
  21. background: transparent;
  22. left: -200%;
  23. z-index: 501;
  24. }
  25. .overlay-element.overlay-active {
  26. left: 0;
  27. }
  28. html.overlay-open .displace-top,
  29. html.overlay-open .displace-bottom {
  30. z-index: 600;
  31. }
  32. /**
  33. * Within the overlay parent, the message about disabling the overlay is for
  34. * screen-reader users only. It is always kept invisible with the
  35. * element-invisible class, and removed from the tab order. Overlay-child.css
  36. * contains styling for the same message appearing within the overlay, and
  37. * intended for sighted users.
  38. */
  39. #overlay-disable-message {
  40. display: none;
  41. }
  42. html.overlay-open #overlay-disable-message {
  43. display: block;
  44. }