.container { width: 450px; } nobr { font-size: 12px; background: #000; color: #d3bc8e; display: inline-block; padding: 1px 2px; border-radius: 3px; margin: 0 1px; } .uid-list { .game-cont { background: rgba(255, 255, 255, .65); margin: 0 0 10px; border-radius: 10px; overflow: hidden; .game-title { font-size: 16px; background: rgba(255, 255, 255, .8); padding: 8px 15px 5px; strong { margin-right: 15px; } span { font-size: 12px; color: #666; float: right; } nobr { background: none; font-size: 12px; color: #3a2702; display: inline-block; padding: 1px 2px; border-radius: 3px; margin: 0 1px; } } .cont-body { background: none; padding: 0; } } .game-ul { padding: 8px; .no-uid { font-size: 12px; text-align: center; } } .game-idx { height: 50px; padding: 20px 0 10px; margin-right: 5px; span { display: block; width: 18px; height: 22px; border-radius: 6px; background: #fff; text-align: center; font-size: 14px; line-height: 22px; } } .game-bar { height: 64px; line-height: 30px; margin: 0; border-radius: 33px; background: right top no-repeat #f0ece4; background-size: auto 100%; padding: 4px; width: 375px; display: flex; position: relative; .face { width: 56px; height: 56px; border-radius: 30px; box-shadow: 0 0 1px #000, 0 0 5px rgba(0, 0, 0, .5); border: 2px solid #fff; overflow: hidden; background-size: cover; span { display: block; width: 64px; height: 64px; background-size: auto 100%; background-repeat: no-repeat; } } .info { padding: 4px 10px; line-height: 18px; color: #414e64; div.shadow { position: relative; -webkit-text-stroke: 2px #fff; span { font-weight: normal; display: block; position: absolute; -webkit-text-stroke: 0px #fff; left: 0; top: 0; } } .uid-info { height: 25px; font-size: 24px; display: flex; margin-top: 5px; .uid { font-weight: normal; display: block; padding-right: 8px; } .type { width: 35px; font-size: 12px; font-weight: normal; background: #4a5366; height: 18px; display: block; text-align: center; border-radius: 4px; color: #fff; vertical-align: middle; transform: scale(.9); &.ck { background: #d3bc8e; color: #3a2702; font-weight: bold; box-shadow: 0 0 3px 0 #000; } &.reg { background: #666; } } } .detail { font-size: 14px; text-shadow: 0 0 2px #fff; .no-info { color: #555; font-size: 12px; text-shadow: 0 0 1px #fff; } } } &:after { display: block; content: ""; width: 36px; height: 36px; border-radius: 50%; border: 2px solid #ece5d8; opacity: 0; box-shadow: 0 0 1px #000, 0 0 5px rgba(0, 0, 0, .5); position: absolute; right: 13px; top: 12px; } } .game-li { display: flex; margin-bottom: 10px; &:last-child { margin-bottom: 0; } &.active { .game-bar { box-shadow: 0 0 1px 1px #fff, 0 0 5px 2px #d3bc8e; } .game-bar:after { opacity: 1; background: url('../../img/icon/check.webp') center center no-repeat #4a5366; background-size: 70% auto; } .game-idx span { background: #d3bc8e; color: #3a2702; box-shadow: 0 0 1px 1px #fff, 0 0 5px 2px #d3bc8e; } } } } .tips { border-radius: 10px; font-size: 12px; padding: 8px 12px 8px 24px; color: #fff; margin-bottom: 10px; background: rgba(0, 0, 0, .4); li { padding: 2px 0; } nobr { font-size: 12px; background: #000; color: #d3bc8e; display: inline-block; padding: 1px 2px; border-radius: 3px; margin: 0 1px; } }