MediaWiki:Common.css

/* Размещённый здесь CSS будет применяться ко всем темам оформления */

:root {
  --mask-rarity:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath d='M 0.5,0 0,0.5 0.5,1 1,0.5 Z M 0.5,0.2 0.8,0.5 0.5,0.8 0.2,0.5 Z'%3E%3C/path%3E%3C/svg%3E");
  --mask-rarity-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath d='M 0,0.5 0.5,0 1,0.5 0.5,1 Z'%3E%3C/path%3E%3C/svg%3E");
  --mask-rarity-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath d='M 0.5,0 0,0.5 0.2,0.7 0.7,0.2 Z m 0.3,0.3 -0.5,0.5 L 0.5,1 1,0.5 Z'%3E%3C/path%3E%3C/svg%3E");
  --mask-rarity-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath d='M 0.5,0 0,0.5 0.1,0.6 0.6,0.1 Z m 0.2,0.2 -0.5,0.5 0.1,0.1 0.5,-0.5 z M 0.9,0.4 0.4,0.9 l 0.1,0.1 L 1,0.5 Z'%3E%3C/path%3E%3C/svg%3E");
  --mask-rarity-4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath d='M 0.5,0 0.3,0.2 0.5,0.4 0.7,0.2 Z M 0.8,0.3 0.6,0.5 0.8,0.7 1,0.5 Z m -0.6,0 L 0,0.5 0.2,0.7 0.4,0.5 Z M 0.5,0.6 0.3,0.8 0.5,1 0.7,0.8 Z'%3E%3C/path%3E%3C/svg%3E");
  --mask-rarity-5: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath d='M 0.5,0 0.3,0.2 0.4,0.3 0.5,0.2 0.6,0.3 0.7,0.2 Z M 0.8,0.3 0.7,0.4 0.8,0.5 0.7,0.6 0.8,0.7 1,0.5 Z m -0.3,0 -0.2,0.2 0.2,0.2 0.2,-0.2 z m -0.3,0 L 0,0.5 0.2,0.7 0.3,0.6 0.2,0.5 0.3,0.4 Z M 0.6,0.7 0.5,0.8 0.4,0.7 0.3,0.8 0.5,1 0.7,0.8 Z'%3E%3C/path%3E%3C/svg%3E");
}

.rarity {
  display: inline-block;
  width: .85em;
  height: .85em;
  background: currentColor;
  mask-image: var(--mask-rarity);
  vertical-align: -.1em;
}
.rarity-1 { mask-image: var(--mask-rarity-1); }
.rarity-2 { mask-image: var(--mask-rarity-2); }
.rarity-3 { mask-image: var(--mask-rarity-3); }
.rarity-4 { mask-image: var(--mask-rarity-4); }
.rarity-5 { mask-image: var(--mask-rarity-5); }
.rarity-any { animation: rarity-any 5s linear infinite normal; }

@keyframes rarity-any {
  0%   { mask-image: var(--mask-rarity-1); }
  20%  { mask-image: var(--mask-rarity-2); }
  40%  { mask-image: var(--mask-rarity-3); }
  60%  { mask-image: var(--mask-rarity-4); }
  80%  { mask-image: var(--mask-rarity-5); }
  100% { mask-image: var(--mask-rarity-1); }
}