Bilibili-Evolved/utils/medal-helper/medal-helper.css
2019-07-07 12:10:09 +08:00

169 lines
3.1 KiB
CSS

/* .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;
}
.round-corner .medal-popup ul>li
{
border-radius: var(--corner-radius);
}
.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
}