/* * # Semantic Nag * http://github.com/quirkyinc/semantic * * * Copyright 2013 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * * Released: April 17 2013 */ /******************************* Nag *******************************/ .ui.nag { display: none; opacity: 0.95; position: absolute; top: 0px; left: 10%; z-index: 101; width: 80%; min-height: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin: 0em; padding: 0.75em 1em; background-color: #555555; -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2); font-size: 1em; text-align: center; color: rgba(255, 255, 255, 0.8); -webkit-border-radius: 0px 0px 5px 5px; -moz-border-radius: 0px 0px 5px 5px; border-radius: 0px 0px 5px 5px; -webkit-transition: 0.2s background; -moz-transition: 0.2s background; -o-transition: 0.2s background; -ms-transition: 0.2s background; transition: 0.2s background; } a.ui.nag { cursor: pointer; } .ui.nag > .title { display: inline-block; margin: 0em 0.5em; color: #FFFFFF; } .ui.nag > .icon.close { cursor: pointer; opacity: 0.4; position: absolute; top: 50%; right: 1em; margin-top: -0.5em; color: #FFFFFF; -webkit-transition: 0.1s opacity; -moz-transition: 0.1s opacity; -o-transition: 0.1s opacity; -ms-transition: 0.1s opacity; transition: 0.1s opacity; } /******************************* States *******************************/ /* Hover */ .ui.nag:hover { opacity: 1; } .ui.nag .close:hover { opacity: 1; } /******************************* Variations *******************************/ /*-------------- Static ---------------*/ .ui.static.nag { position: static; display: block; } /*-------------- Fixed ---------------*/ .ui.fixed.nag { position: fixed; } /*-------------- Bottom ---------------*/ .ui.nag.bottom { -webkit-border-radius: 5px 5px 0px 0px; -moz-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; } .ui.nag.bottom.fixed { top: auto; bottom: 0px; } /*-------------- White ---------------*/ .ui.nag.white { background-color: #F1F1F1; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); color: #ACACAC; } .ui.nag.white .close, .ui.nag.white .title { color: #333333; }