icingaweb2/public/css/themes/Winter.less

/*! Icinga Web 2 | (c) 2015 Icinga Development Team | GPLv2+ */

@icinga-blue: #001E5b;

#icinga-logo {
    background-image: url('../img/winter/logo_icinga_big_winter.png');
}

@tr-active-color: #dadeea;
@tr-hover-color: #c6cfe4;

/* Snow, from http://codepen.io/NickyCDK/pen/AIonk */
#header, #login {
    background-image: url('../img/winter/snow1.png'), url('../img/winter/snow2.png'), url('../img/winter/snow3.png');
    -webkit-animation: snow 10s linear infinite;
    -moz-animation: snow 10s linear infinite;
    -ms-animation: snow 10s linear infinite;
    animation: snow 10s linear infinite;
}

@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

#menu .nav-level-2 > .nav-item.active {
  > a:focus, > a:hover {
    opacity: 1;
  }
}

#menu ul.nav-level-1 > .nav-item {
  &:focus, &:hover {
    background-image: url('../img/winter/snow1.png'), url('../img/winter/snow2.png'), url('../img/winter/snow3.png');
    -webkit-animation: snow 10s linear infinite;
    -moz-animation: snow 10s linear infinite;
    -ms-animation: snow 10s linear infinite;
    animation: snow 10s linear infinite;
  }

  > a:hover, > a:focus {
    color: white;
  }
}