Mercurial > hg > rr-repo
annotate modules/overlay/overlay-parent.css @ 0:ff03f76ab3fe
initial version
author | danieleb <danielebarchiesi@me.com> |
---|---|
date | Wed, 21 Aug 2013 18:51:11 +0100 |
parents | |
children |
rev | line source |
---|---|
danielebarchiesi@0 | 1 |
danielebarchiesi@0 | 2 /** |
danielebarchiesi@0 | 3 * @file |
danielebarchiesi@0 | 4 * Basic styling for the Overlay module. |
danielebarchiesi@0 | 5 */ |
danielebarchiesi@0 | 6 |
danielebarchiesi@0 | 7 html.overlay-open, |
danielebarchiesi@0 | 8 html.overlay-open body { |
danielebarchiesi@0 | 9 height: 100%; |
danielebarchiesi@0 | 10 overflow: hidden; |
danielebarchiesi@0 | 11 } |
danielebarchiesi@0 | 12 |
danielebarchiesi@0 | 13 #overlay-container, |
danielebarchiesi@0 | 14 .overlay-modal-background, |
danielebarchiesi@0 | 15 .overlay-element { |
danielebarchiesi@0 | 16 height: 100%; |
danielebarchiesi@0 | 17 left: 0; |
danielebarchiesi@0 | 18 position: absolute; |
danielebarchiesi@0 | 19 top: 0; |
danielebarchiesi@0 | 20 width: 100%; |
danielebarchiesi@0 | 21 z-index: 500; |
danielebarchiesi@0 | 22 } |
danielebarchiesi@0 | 23 |
danielebarchiesi@0 | 24 .overlay-modal-background { |
danielebarchiesi@0 | 25 /* Using a transparent png renders faster than using opacity */ |
danielebarchiesi@0 | 26 background: transparent url(images/background.png) repeat; |
danielebarchiesi@0 | 27 } |
danielebarchiesi@0 | 28 |
danielebarchiesi@0 | 29 .overlay-element { |
danielebarchiesi@0 | 30 background: transparent; |
danielebarchiesi@0 | 31 left: -200%; |
danielebarchiesi@0 | 32 z-index: 501; |
danielebarchiesi@0 | 33 } |
danielebarchiesi@0 | 34 .overlay-element.overlay-active { |
danielebarchiesi@0 | 35 left: 0; |
danielebarchiesi@0 | 36 } |
danielebarchiesi@0 | 37 |
danielebarchiesi@0 | 38 html.overlay-open .displace-top, |
danielebarchiesi@0 | 39 html.overlay-open .displace-bottom { |
danielebarchiesi@0 | 40 z-index: 600; |
danielebarchiesi@0 | 41 } |
danielebarchiesi@0 | 42 |
danielebarchiesi@0 | 43 /** |
danielebarchiesi@0 | 44 * Within the overlay parent, the message about disabling the overlay is for |
danielebarchiesi@0 | 45 * screen-reader users only. It is always kept invisible with the |
danielebarchiesi@0 | 46 * element-invisible class, and removed from the tab order. Overlay-child.css |
danielebarchiesi@0 | 47 * contains styling for the same message appearing within the overlay, and |
danielebarchiesi@0 | 48 * intended for sighted users. |
danielebarchiesi@0 | 49 */ |
danielebarchiesi@0 | 50 #overlay-disable-message { |
danielebarchiesi@0 | 51 display: none; |
danielebarchiesi@0 | 52 } |
danielebarchiesi@0 | 53 html.overlay-open #overlay-disable-message { |
danielebarchiesi@0 | 54 display: block; |
danielebarchiesi@0 | 55 } |