/* .medal-popup { position: absolute; top: calc(100% + 2px); transition: all .16s ease-out; transform-origin: top; transform: scaleY(0) translateX(-50%); left: 50%; background: white; box-shadow: 0px 3px 20px 2px #0004; z-index: 100; } .medal-popup.opened { transform: scaleY(1) translateX(-50%); } */ .medal-popup * { transition: all 0.2s; } .medal-popup ul { list-style: none; margin: 0; padding: 0; } .medal-popup ul>li.active { box-shadow: 0 0 4px 0 var(--theme-color); } .medal-popup ul>li:hover { background-color: rgba(0,0,0,0.16); } .medal-popup label { display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 8px; } .medal-popup label>* { flex-shrink: 0; } .medal-popup input[type=radio] { visibility: collapse; width: 0; margin: 0; padding: 0; } .medal-popup input[type=radio] ~ i { opacity: 0; transform: scale(0.8); margin: 0; } .medal-popup input[type=radio] ~ .fans-medal-item { margin: 0 8px; } .medal-popup input[type=radio]:checked ~ i { opacity: 1; } .title-image { display: inline-block; vertical-align: middle; height: 20px; } .fans-medal-item .label { width: 40px; text-align: center; padding: 0 2px; color: #fff } .fans-medal-item .level { width: 16px; background-color: #fff; text-align: center; color: #61decb } .fans-medal-item .label,.fans-medal-item .level { position: relative; display: block; float: left } .fans-medal-item { display: inline-block; height: 14px; line-height: 14px; color: #fff; border: 1px solid #61decb; border-left: 0; white-space: nowrap; border-radius: 2px; flex-shrink: 0; font-size: 12px; } .level-1, .level-2, .level-3, .level-4 { border-color: #61decb } .level-1 .label,.level-2 .label,.level-3 .label,.level-4 .label { background-color: #61decb } .level-1 .level,.level-2 .level,.level-3 .level,.level-4 .level { color: #61decb } .level-5, .level-6, .level-7, .level-8 { border-color: #5896de } .level-5 .label,.level-6 .label,.level-7 .label,.level-8 .label { background-color: #5896de } .level-5 .level,.level-6 .level,.level-7 .level,.level-8 .level { color: #5896de } .level-9, .level-10, .level-11, .level-12 { border-color: #a068f1 } .level-9 .label,.level-10 .label,.level-11 .label,.level-12 .label { background-color: #a068f1 } .level-9 .level,.level-10 .level,.level-11 .level,.level-12 .level { color: #a068f1 } .level-13, .level-14, .level-15, .level-16 { border-color: #ff86b2 } .level-13 .label,.level-14 .label,.level-15 .label,.level-16 .label { background-color: #ff86b2 } .level-13 .level,.level-14 .level,.level-15 .level,.level-16 .level { color: #ff86b2 } .level-17, .level-18, .level-19,.level-20 { border-color: #f6be18 } .level-17 .label,.level-18 .label,.level-19 .label,.level-20 .label { background-color: #f6be18 } .level-17 .level,.level-18 .level,.level-19 .level,.level-20 .level { color: #f6be18 }