MediaWiki:Common.css: различия между версиями

мНет описания правки
Нет описания правки
Строка 2: Строка 2:


:root {
: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:  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-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-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-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-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");
--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");
 
--team-0: #444;
--team-1: #B00;
--team-2: #0B0;
--team-3: #08F;
 
--level-1: #FECE5A; --level-2: #FFA630;
--level-3: #FF7315; --level-4: #E40000;
--level-5: #FD2992; --level-6: #EB26CD;
--level-7: #C124E0; --level-8: #9627F4;
--level-9: #6D00F5; --level-10: #3A00F7;
}
}


.item-icon {
.item-icon {
  display: inline-block;
display: inline-block;
  width: .85em;
width: .85em;
  height: .85em;
height: .85em;
  background: currentColor;
background: currentColor;
  vertical-align: -.1em;
vertical-align: -.1em;
}
}
.item-icon.core { border-radius: 1em; }
.item-icon.core { border-radius: 1em; }
Строка 28: Строка 39:


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