src/themes/_widgets.css


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/* Star Widget */

@keyframes wiggle {
  12.5% { transform: rotate(15deg); }
  37.5% { transform: rotate(-15deg); }
  62.5% { transform: rotate(15deg); }
  87.5% { transform: rotate(-15deg); }
}

star {
  color: alpha(@theme_fg_color, 0.1);
  transition: color 400ms;
}

star:hover {
  color: alpha(@theme_fg_color, 0.4);
  transition: color 250ms;
}

star:checked {
  color: @theme_selected_bg_color;
  transition: color 250ms;

  animation-name: wiggle;
  animation-duration: 400ms;
  animation-timing-function: linear;
}