skins/vector/components/watchstar.less

   1 @import "mediawiki.mixins.rotation"
   2
   3 /* Watch/Unwatch Icon Styling */
   4 #ca-unwatch.icon a,
   5 #ca-watch.icon a {
   6         margin: 0;
   7         padding: 0;
   8         outline: none;
   9         display: block;
  10         width: 26px;
  11         /* This hides the text but shows the background image */
  12         padding-top: 3.1em;
  13         margin-top: 0;
  14         /* Only applied in IE6 */
  15         margin-top: -0.8em !ie;
  16         height: 0;
  17         overflow: hidden;
  18         background-position: 5px 60%;
  19 }
  20 #ca-unwatch.icon a {
  21         .background-image-svg('images/unwatch-icon.svg', 'images/unwatch-icon.png');
  22 }
  23 #ca-watch.icon a {
  24         .background-image-svg('images/watch-icon.svg', 'images/watch-icon.png');
  25 }
  26 #ca-unwatch.icon a:hover,
  27 #ca-unwatch.icon a:focus {
  28         .background-image-svg('images/unwatch-icon-hl.svg', 'images/unwatch-icon-hl.png');
  29 }
  30 #ca-watch.icon a:hover,
  31 #ca-watch.icon a:focus {
  32         .background-image-svg('images/watch-icon-hl.svg', 'images/watch-icon-hl.png');
  33 }
  34 #ca-unwatch.icon a.loading,
  35 #ca-watch.icon a.loading {
  36         .background-image-svg('images/watch-icon-loading.svg', 'images/watch-icon-loading.png');
  37         .rotation(700ms);
  38         background-position: 50% 60%;
  39         -webkit-transform-origin: 50% 57%;
  40         transform-origin: 50% 57%;
  41 }
  42 #ca-unwatch.icon a span,
  43 #ca-watch.icon a span {
  44         display: none;
  45 }