Logros-de-la-vida/css/main.less

216 lines
3.9 KiB
Plaintext
Raw Normal View History

2014-07-20 15:36:23 +02:00
//Variables
@tamanyoIcono: 60px;
@colorGris: #a8a8a8;
@colorRojo: #D94D43;
@colorNaranja: #F76B39;
@colorAmarillo: #FFB742;
@colorAzulClaro: #52C6DE;
@colorAzulOscuro: #4A5A6B;
@nivelSaturacion: -50%;
@font-face {
font-family: champage;
src: url('../fonts/champage.ttf');
}
body {
padding-top: 50px;
padding-bottom: 20px;
transition: all 1s;
margin-top: 30px;
background-color: @colorAmarillo;
border: none;
}
#cajaTitulo {
font-family: champage;
text-align: center;
}
#cajaTitulo h1 {
padding-top: 5px;
padding-bottom: 5px;
font-weight: bolder;
color: white;
background-color: @colorNaranja;
}
#cajaTitulo h2 {
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 30px;
color: @colorAzulOscuro;
background-color: @colorRojo;
color: white;
font-size: 1.5em;
}
.itemLogro {
transition: all 1s;
}
.cajaIcono {
height: @tamanyoIcono;
width: @tamanyoIcono;
background: @colorAzulClaro;
border-radius: 5px;
text-align: center;
line-height: 78px;
margin: 0 auto;
color: black;
}
.desactivado .cajaIcono {
color: @colorGris;
background-color: @colorAzulOscuro;
}
.desactivado .panel-heading h2, .desactivado .panel-body {
color: @colorGris;
}
.desactivado .panel-heading {
background-color: saturate(@colorRojo, @nivelSaturacion) !important;
}
.desactivado .panel {
background-color: saturate(@colorNaranja, @nivelSaturacion);
}
.desactivado .panel-default {
border-color: saturate(@colorRojo, @nivelSaturacion);
}
.desactivado .btn-primary.active {
background-color: @colorAzulOscuro;
border-color: @colorAzulOscuro;
}
i {
margin-top: 5px;
font-size: 3em;
}
.cajaBotones {
float: right;
}
#cajaCrearCuenta {
margin-top: 30px;
}
#botonCrearCuenta {
margin-top: 20px;
}
.nav-tabs.nav-justified>.active>a, .nav-tabs.nav-justified>.active>a:hover, .nav-tabs.nav-justified>.active>a:focus {
background-color: @colorAmarillo;
font-weight: bolder;
border: none;
color: @colorRojo;
cursor: pointer;
}
.nav-tabs.nav-justified>li>a {
color: @colorRojo;
border-bottom: none;
}
.nav-tabs.nav-justified>li>a:hover {
background-color: @colorAmarillo;
border-color: @colorAmarillo;
font-weight: bolder;
}
.nav i {
font-size: 2em;
}
.panel {
background-color: @colorNaranja;
}
.panel-default>.panel-heading {
background-image: none;
}
.panel-heading {
height: 58px;
background-color: @colorRojo !important;
border: none;
}
.panel-heading h2 {
color: white;
}
.navbar-toggle {
border: 1px solid @colorRojo;
}
.panel-default {
border-color: @colorRojo;
color: white;
}
.icon-bar {
background: @colorRojo;
}
.navbar {
background-color: @colorAmarillo;
box-shadow: 0px 10px 5px rgba(0,0,0,0.5);
}
.btn-primary.active {
background-image: none;
background-color: @colorAzulClaro;
border-color: @colorAzulClaro;
}
.btn-default {
background-image: none;
background-color: white;
border-color: white;
}
#sinRed {
display: none;
position: absolute;
height: 100px;
width: 100%;
text-align: center;
top: 40%;
margin: 0 auto;
color: @colorRojo;
}
#botonReconectar {
background-color: @colorRojo;
border: none;
color: white;
font-size: 1.2em;
}
#botonReconectar:hover {
background-color: white;
color: @colorRojo;
}
.table-responsive {
padding-left: 5%;
padding-right: 5%;
margin-top: 10px;
border: none;
}
.table {
font-size: 1.2em;
}
.table td, .table th {
text-align: center;
}
.table th {
color: white;
}
.table td {
color: #4A5A6B;
}
.cargaBoton {
width: 40px;
height: 40px;
background-color: @colorAzulOscuro;
-webkit-animation: aniCarga 1s infinite; /* Chrome, Safari, Opera */
animation: aniCarga 1s infinite;
border-left: 5px solid white;
border-right: 5px solid white;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes aniCarga {
from {
-webkit-transform:rotate(0deg);;
} to {
-webkit-transform:rotate(360deg);
}
}
/* Standard syntax */
@keyframes aniCarga {
from {
transform:rotate(0deg);;
} to {
transform:rotate(360deg);
}
}
#cajaForm {
padding-right: 40px;
padding-left: 40px;
}