diff --git a/client/src/components/Match/MatchItems.vue b/client/src/components/Match/MatchItems.vue index 7919b46..4f3956f 100644 --- a/client/src/components/Match/MatchItems.vue +++ b/client/src/components/Match/MatchItems.vue @@ -21,7 +21,7 @@ class="flex-shrink-0 w-12 h-12 ml-1 bg-center bg-cover rounded-md bg-blue-1000" >
-
{{ item.name }}
+
{{ itemName(item.name) }}
Price: {{ @@ -68,6 +68,10 @@ export default { const originalUrl = item.image const newUrl = originalUrl.includes('/global/default/assets/items/') ? originalUrl : originalUrl.replace('latest', '10.22') return `url('${newUrl}')` + }, + itemName(name) { + // Remove placeholders in item names (e.g.: for Ornn items) + return name.replace(/%[^%]*%/, '') } } } @@ -80,28 +84,40 @@ export default { } .item-description >>> stats { - color: #fff; - line-height: 1.25; + @apply text-white leading-tight; } .item-description >>> br + br { - display: none; + @apply hidden; } .item-description >>> stats br { - display: block; + @apply block; +} + +.item-description >>> li { + @apply block mt-2; +} + +.item-description >>> passive { + @apply text-white font-normal; +} + +.item-description >>> active { + @apply inline-block text-white font-bold mt-2; } .item-description >>> unique, -.item-description >>> passive, -.item-description >>> active { - color: #fff; - font-weight: bold; - display: block; - margin-top: 0.5rem; +.item-description >>> li > passive:first-child, +.item-description >>> rarityMythic { + @apply text-white font-bold block mt-2; } .item-description >>> font { - color: #63b3ed; + @apply text-blue-400; } - \ No newline at end of file + +.item-description >>> rules { + @apply block mt-2 text-blue-400 italic; +} +