/* * Copyright (C) 2013 Glyptodon LLC * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. */ .status-container { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.5); padding: 1em; } .status-outer { display: table; height: 100%; width: 100%; position: fixed; left: 0; top: 0; background: rgba(0, 0, 0, 0.5); z-index: 1; } .status-middle { width: 100%; text-align: center; display: table-cell; vertical-align: middle; } .status { width: 75%; max-width: 5in; margin-left: auto; margin-right: auto; overflow: auto; background: white; border: 1px solid rgba(0, 0, 0, 0.25); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25); text-align: left; } .status .title { font-size: 1.25em; font-weight: bold; background: rgba(0, 0, 0, 0.04); border-bottom: 1px solid rgba(0, 0, 0, 0.125); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.125); margin: 0; padding: 0.5em 1em; text-transform: uppercase; } .status.error { background: #FDD; } .status > * { margin: 1.25em; } /* Fade entire status area in/out based on shown status */ .status-outer { visibility: hidden; opacity: 0; transition: opacity, visibility; transition-duration: 0.25s; } .shown.status-outer { visibility: visible; opacity: 1; } /* Hide dialog immediately based on status */ .status { visibility: hidden; } .shown .status { visibility: visible; }