微件:RarityFilter：修订间差异
来自植物大战僵尸杂交版Wiki
更多操作
无编辑摘要 |
无编辑摘要 |
||
| 第11行： | 第11行： | ||
} | } | ||
.pvzhe-rarity-btn { | .pvzhe-rarity-btn { | ||
padding: | padding: 4px 10px; | ||
border-radius: 20px; | border-radius: 20px; | ||
font-size: | font-size: 14px; | ||
cursor: pointer; | cursor: pointer; | ||
border: 2px solid transparent; | border: 2px solid transparent; | ||
| 第20行： | 第20行： | ||
white-space: nowrap; | white-space: nowrap; | ||
flex: 0 1 auto; | flex: 0 1 auto; | ||
display: flex; | |||
align-items: center; | |||
gap: 4px; | |||
} | } | ||
.pvzhe-rarity-btn:hover { border-color: #ccc; } | .pvzhe-rarity-btn:hover { border-color: #ccc; } | ||
| 第25行： | 第28行： | ||
.pvzhe-rarity-btn.all { border-color: #4CAF50; color: #4CAF50; } | .pvzhe-rarity-btn.all { border-color: #4CAF50; color: #4CAF50; } | ||
.pvzhe-rarity-btn.all.active { background: #4CAF50; color: #fff; } | .pvzhe-rarity-btn.all.active { background: #4CAF50; color: #fff; } | ||
.pvzhe-rarity-btn | .pvzhe-rarity-btn img { height: 28px; } | ||
@media screen and (max-width: 480px) { | @media screen and (max-width: 480px) { | ||
.pvzhe-rarity-btn { | .pvzhe-rarity-btn { | ||
padding: 6px | padding: 3px 6px; | ||
font-size: | font-size: 11px; | ||
gap: 2px; | |||
gap: | |||
} | } | ||
.pvzhe-rarity-btn img { height: 20px; } | |||
.pvzhe-rarity-filter { gap: 4px; } | |||
} | } | ||
</style> | </style> | ||
| 第51行： | 第42行： | ||
<div class="pvzhe-rarity-filter" id="pvzhe-rarity-filter"> | <div class="pvzhe-rarity-filter" id="pvzhe-rarity-filter"> | ||
<button class="pvzhe-rarity-btn all active" data-rarity="all">全部</button> | <button class="pvzhe-rarity-btn all active" data-rarity="all">全部</button> | ||
<button class="pvzhe-rarity-btn white" data-rarity="white">白卡</button> | <button class="pvzhe-rarity-btn white" data-rarity="white"><img src="https://new.pvzhe.wiki/images/b/b9/%E7%99%BD%E5%8D%A1.png">白卡</button> | ||
<button class="pvzhe-rarity-btn gold" data-rarity="gold">至尊金卡</button> | <button class="pvzhe-rarity-btn gold" data-rarity="gold"><img src="https://new.pvzhe.wiki/images/8/83/%E9%87%91%E5%8D%A1.png">至尊金卡</button> | ||
<button class="pvzhe-rarity-btn diamond" data-rarity="diamond">臻享钻卡</button> | <button class="pvzhe-rarity-btn diamond" data-rarity="diamond"><img src="https://new.pvzhe.wiki/images/b/bb/%E9%92%BB%E5%8D%A1.png">臻享钻卡</button> | ||
<button class="pvzhe-rarity-btn rainbow" data-rarity="rainbow">梦幻彩卡</button> | <button class="pvzhe-rarity-btn rainbow" data-rarity="rainbow"><img src="https://new.pvzhe.wiki/images/1/10/%E5%BD%A9%E5%8D%A11.png">梦幻彩卡</button> | ||
<button class="pvzhe-rarity-btn star" data-rarity="star">星光闪卡</button> | <button class="pvzhe-rarity-btn star" data-rarity="star"><img src="https://new.pvzhe.wiki/images/e/e9/%E6%98%9F%E5%8D%A11.png">星光闪卡</button> | ||
<button class="pvzhe-rarity-btn original" data-rarity="original">原卡</button> | <button class="pvzhe-rarity-btn original" data-rarity="original"><img src="https://new.pvzhe.wiki/images/6/68/%E5%8E%9F%E5%8D%A1.png">原卡</button> | ||
</div> | </div> | ||
</includeonly> | </includeonly> | ||