overlay-parent.css 1.1 KB

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