Plantilla:Control/style.css Ver historial

/* limpia los márgenes y el espaciado */
ul {
    padding: 0;
    margin: 0;
}

/* define la separación inferior entre botones */
li {
    margin-bottom: .15rem;
}

/* Establece las propiedades del contenedor de los botones */
.contenedor {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

/* Define las propiedades del botón y los coloca en horizontal */
.btn {
    display: inline-block;
    min-width:16em;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.btn:focus, .btn:hover {
    text-decoration: none;
}
.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
}
.btn.disabled, .btn:disabled {
    opacity: .65;
}
.btn:not([disabled]):not(.disabled) {
    cursor: pointer;
}
.btn:not([disabled]):not(.disabled).active, .btn:not([disabled]):not(.disabled):active {
    background-image: none;
}

/* Botón azul */
.btn-azul {
    color: #fff;
    background-color: #0075E3;
    border-color: #0075E3;
}
.btn-azul:hover {
    color: #fff;
    background-color: #225AA8;
    border-color: #225AA8;
}
.btn-azul.focus, .btn-azul:focus {
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .5);
}

/* Botón gris */
.btn-gris {
    color: #fff;
    background-color: #868e96;
    border-color: #868e96;
}
.btn-gris:hover {
    color: #fff;
    background-color: #727b84;
    border-color: #6c757d;
}
.btn-gris.focus, .btn-gris:focus {
    box-shadow: 0 0 0 .2rem rgba(134, 142, 150, .5);
}

/* Botón verde */
.btn-verde {
    color: #fff;
    background-color: #1BAB50;
    border-color: #1BAB50;
}
.btn-verde:hover {
    color: #fff;
    background-color: #0B7039;
    border-color: #0B7039;
}
.btn-verde.focus, .btn-verde:focus {
    box-shadow: 0 0 0 .2rem rgba(40, 167, 69, .5);
}

/* Botón cielo */
.btn-cielo {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}
.btn-cielo:hover {
    color: #fff;
    background-color: #138496;
    border-color: #117a8b;
}
.btn-cielo.focus, .btn-cielo:focus {
    box-shadow: 0 0 0 .2rem rgba(23, 162, 184, .5);
}

/* Botón naranja*/
.btn-naranja {
    color: #212529;
    background-color: #FFA600;
    border-color: #FFA600;
}
.btn-naranja:hover {
    color: #212529;
    background-color: #F18200;
    border-color: #F18200;
}
.btn-naranja.focus, .btn-naranja:focus {
    box-shadow: 0 0 0 .2rem rgba(255, 193, 7, .5);
}

/* Botón rojo */
.btn-rojo {
    color: #fff;
    background-color: #CB0000;
    border-color: #CB0000;
}
.btn-rojo:hover {
    color: #fff;
    background-color: #75011D;
    border-color: #75011D;
}
.btn-rojo.focus, .btn-rojo:focus {
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .5);
}

/* Botón gris claro*/
.btn-blanco {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}
.btn-blanco:hover {
    color: #212529;
    background-color: #E8EAED;
    border-color: #E8EAED;
}
.btn-blanco.focus, .btn-blanco:focus {
    box-shadow: 0 0 0 .2rem rgba(248, 249, 250, .5);
}

/* Botón negro*/
.btn-negro {
    color: #fff;
    background-color: #3C4043;
    border-color: #3C4043;
}
.btn-negro:hover {
    color: #fff;
    background-color: #202124;
    border-color: #202124;
}
.btn-negro.focus, .btn-negro:focus {
    box-shadow: 0 0 0 .2rem rgba(52, 58, 64, .5);
}

/* Posición del número */
.btn .insignia {
    position: relative;
    top: -1px;
}

/* Propiedades del número */
.insignia {
    display: inline-block;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
}
.insignia:empty {
    display: none;
}
.btn .insignia {
    position: relative;
    top: -1px;
}
.insignia-pastilla {
    padding-right: .6em;
    padding-left: .6em;
    border-radius: 10rem;
}

/* número azul */
.insignia-azul {
    color: #fff;
    background-color: #0075E3;
}

/* número gris */
.insignia-gris {
    color: #fff;
    background-color: #868e96;
}

/* número verde */
.insignia-verde {
    color: #fff;
    background-color: #1BAB50;
}

/* número cielo */
.insignia-cielo {
    color: #fff;
    background-color: #17a2b8;
}

/* número Naranja */
.insignia-naranja {
    color: #212529;
    background-color: #FFA600;
}

/* número rojo */
.insignia-rojo {
    color: #fff;
    background-color: #CB0000;
}

/* número blanco */
.insignia-blanco {
    color: #212529;
    background-color: #f8f9fa;
}

/* número negro */
.insignia-negro {
    color: #fff;
    background-color: #3C4043;
}

/* enlaces blancos para azul, cielo, verde, rojo y negro */
li.btn-azul > a, li.btn-cielo > a, li.btn-verde > a, li.btn-rojo > a, li.btn-negro > a {
    color: #ffffff;
    text-decoration: none;
    background-color: transparent;
}
li.btn-azul > a:hover, li.btn-cielo > a:hover, li.btn-verde > a:hover, li.btn-rojo > a:hover, li.btn-negro > a:hover {
    color: #ffffff;
    text-decoration: none;
}

/* enlaces negros para naranja, gris y blanco */
li.btn-naranja > a, li.btn-blanco > a, li.btn-gris > a {
    color: #000000;
    text-decoration: none;
    background-color: transparent;
}
li.btn-naranja > a:hover, li.btn-blanco > a:hover {
    color: #000000;
    text-decoration: none;
}