Fexbox, Chrome overlay/dialog and chrome buttons experiments

Example of the flexbox CSS3 properties and clone of Chrome dialogs modern-cross-browser-compatible.

by jrdiaz

HTML

<!-- Overlay/dialog -->
<div id="overlay" class="overlay">
    <div id="myDialog" class="dialog">

        <!-- Título del diálogo -->
        <h1>Título del Diálogo</h1>

        <!-- Cuerpo del diálogo -->
        <div class="dialog-area">
            <p>CUERPO</p>
            <br/>
            
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget nunc urna. Morbi condimentum libero at diam fringilla lobortis. Ut quis sapien eros. In vel lacus et massa mattis molestie. Phasellus eu eros id eros luctus gravida ut non elit. In vitae dapibus dolor. Vivamus id quam tortor. Ut eu ultrices diam. Aliquam enim mauris, mattis sed ultricies vitae, aliquet ac purus. Nunc vel elit nisl, ut pharetra urna. Cras rutrum pulvinar congue. In hac habitasse platea dictumst.</p>         
        </div

        <!-- Pie del diálogo -->
        <div class="dialog-footer">
            <div class="extensible">PIE con botones a la derecha sin float</div>
            <input type="button" value="Botón1"/>
            <input type="button" value="Botón2"/>
        </div>

    </div>
</div>


<!-- Sample page content -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget nunc urna. Morbi condimentum libero at diam fringilla lobortis. Ut quis sapien eros. In vel lacus et massa mattis molestie. Phasellus eu eros id eros luctus gravida ut non elit. In vitae dapibus dolor. Vivamus id quam tortor. Ut eu ultrices diam. Aliquam enim mauris, mattis sed ultricies vitae, aliquet ac purus. Nunc vel elit nisl, ut pharetra urna. Cras rutrum pulvinar congue. In hac habitasse platea dictumst.</p>
<br/>

<p>In tempor ornare nulla, elementum imperdiet mi auctor vel. Vivamus dui justo, dignissim at vulputate eu, ullamcorper ac est. Sed et risus justo, ac adipiscing lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tristique neque vel sapien mattis porta. Praesent fringilla dapibus sapien eget cursus. Integer posuere imperdiet ante, non...

CSS

/* ================================================================================ */
/* Sample styles */
html {
    font-family: arial;
}

/* Sample dialog styles */
#myDialog {
    background-color: white;
    margin-bottom: 6px;
    margin-top: 6px;
    width: 500px;
}


/* ================================================================================ */
/* Overlay/Dialog styles */
.overlay {
    -webkit-transition: 0.25s opacity;
       -moz-transition: 0.25s opacity;
        -ms-transition: 0.25s opacity;
         -o-transition: 0.25s opacity;
            transition: 0.25s opacity;  

    background: -webkit-radial-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
    background:    -moz-radial-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
    background:      -o-radial-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
    background:     -ms-radial-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
    background:         radial-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
    
    position: fixed;
    left: 0; top: 0; right: 0; bottom: 0;
    padding: 20px; padding-bottom: 130px;
    z-index: 10;
}


.overlay .dialog {
    -webkit-user-select: none;
       -moz-user-select: none;

    -webkit-box-shadow: 0px 5px 80px #505050;
       -moz-box-shadow: 0px 5px 80px #505050;
         -o-box-shadow: 0px 5px 80px #505050;
        -ms-box-shadow: 0px 5px 80px #505050;
            box-shadow: 0px 5px 80px #505050;

    background: white;
    border: 1px solid #BCC1D0;

    -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
     -khtml-border-radius: 2px;
            border-radius: 2px;

    position: relative;
    min-width: 400px;
    padding: 0;
}


/* Dialog heading */
.overlay .dialog h1 {
    -webkit-padding-end: 24px; /* Specifies the space between an element's...