diff --git a/css/avgrund.css b/css/avgrund.css new file mode 100644 index 0000000..23d9f70 --- /dev/null +++ b/css/avgrund.css @@ -0,0 +1,127 @@ + +.avgrund-popin { + position: absolute; + background: #fff; + padding: 0px; + overflow: hidden; + visibility: hidden; + opacity: 0; + filter: alpha(opacity=0); + top: 50%; + left: 50%; + border-radius: 10px; + z-index: 1000; + box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .5); + + -webkit-transform: scale(0.8); + -moz-transform: scale(0.8); + -ms-transform: scale(0.8); + -o-transform: scale(0.8); + transform: scale(0.8); +} + +.avgrund-overlay { + background: #000; + width: 100%; + position: relative; + top: -1500px; + left: 0; + z-index: 101; + visibility: hidden; + opacity: 0; + filter: alpha(opacity=0); +} + +body.avgrund-ready, +.avgrund-ready .avgrund-popin, +.avgrund-ready .avgrund-overlay { + -webkit-transform-origin: 50% 50%; + -moz-transform-origin: 50% 50%; + -ms-transform-origin: 50% 50%; + -o-transform-origin: 50% 50%; + transform-origin: 50% 50%; + + -webkit-transition: 0.3s all ease-out; + -moz-transition: 0.3s all ease-out; + -ms-transition: 0.3s all ease-out; + -o-transition: 0.3s all ease-out; + transition: 0.3s all ease-out; +} + +body.avgrund-active { + -webkit-transform: scale(0.9); + -moz-transform: scale(0.9); + -ms-transform: scale(0.9); + -o-transform: scale(0.9); + transform: scale(0.9); + overflow: hidden; +} + +.avgrund-active .avgrund-popin { + visibility: visible; + opacity: 1; + filter: alpha(opacity=100); + + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -ms-transform: scale(1.1); + -o-transform: scale(1.1); + transform: scale(1.1); +} + +.avgrund-active .avgrund-overlay { + visibility: visible; + opacity: .5; + filter: alpha(opacity=50); + height: 20000px; +} + +.avgrund-popin.stack { + -webkit-transform: scale(1.5); + -moz-transform: scale(1.5); + -ms-transform: scale(1.5); + -o-transform: scale(1.5); + transform: scale(1.5); +} + +.avgrund-active .avgrund-popin.stack { + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -ms-transform: scale(1.1); + -o-transform: scale(1.1); + transform: scale(1.1); +} + +.avgrund-active .avgrund-blur { + -webkit-filter: blur(1px); + -moz-filter: blur(1px); + -ms-filter: blur(1px); + -o-filter: blur(1px); + filter: blur(1px); +} + +/* Optional close button styles */ +.avgrund-close { + position: absolute; + top: 26px; + right: 10px; + width:25px; + height:25px; + display:block; + text-transform:uppercase; + text-decoration:none; + color: #A2A2A2; + background: #FFF; + font-family:"Tahoma", Helvetica, sans-serif; + text-align:center; + font-size:18px; + line-height:1.4em; + border-radius:50%; + -moz-border-radius:50%; + -webkit-border-radius:50%; + box-shadow:0px 0px 2px 0px #666; + -moz-box-shadow:0px 0px 2px 0px #666; + -webkit-box-shadow:0px 0px 2px 0px #666; + text-indent:1px; + font-weight:bold; +}