.player{ width:150px; height:180px; } .player .avatar{ width:130px; height:160px; } #arena.slim_player .player:not(.minskin):not(.fakeme) .avatar{ width: 136px; height: 166px; left:7px; top:7px; } .player.minskin{ width:120px; height:120px; /*zoom:0.9;*/ } .player.minskin .avatar{ height:100px; width:100px; } #arena.slim_player .player.minskin:not(.fakeme) .avatar:not(.fakeme){ width: 106px; height: 106px; left:7px; top:7px; } .player.minskin .hp, .player.minskin .hp.text{ left:88px; } #arena.slim_player .player.minskin .hp, #arena.slim_player .player.minskin .hp.text{ left:91px; } .player .avatar2{ width:52px; height:52px; top:73px; left:92px; } .player .avatar, .player .avatar2{ transition-property:opacity; } .player .wunature{ top:137px; } .player.minskin .wunature{ top:80px; } .player .actcount.hp{ top: 18px; left: 15px; width: 130px; bottom: auto; right: auto; text-align: left; transform: none; } #arena.slim_player .player .actcount.hp{ left: 12px; top: 15px; } .player.fullskin2 .avatar, .player.fullskin2 .avatar2{ width:65px; background-position:50%; } #arena.slim_player .player.fullskin2:not(.minskin) .avatar, #arena.slim_player .player.fullskin2:not(.minskin) .avatar2{ width: 68px; } .player.fullskin2 .avatar{ border-radius:8px 0 0 8px; } .player.fullskin2 .avatar2{ top:10px; left:auto; right:10px; height:160px; z-index:1; border-radius:0 8px 8px 0; } #arena.slim_player .player.fullskin2:not(.minskin) .avatar2{ top:7px; right:7px; height: 166px; } .player .marks, .player .judges{ width:36px; text-align:center; padding-bottom:10px; } .player .marks{ left:-24px; top:14px; height:auto; max-height:160px; } .player .judges{ right:-24px; top:26px; height:auto; max-height:148px; left:auto; } .player.noidentity .judges{ top:14px; } .player .marks>div, .player .judges>div{ margin-right:0; margin-bottom:4px; margin-left:6px; line-height:20px; position:relative; display:block; animation:card_start2xx 0.5s; -webkit-animation:card_start2xx 0.5s; } .player .marks>.removing, .player .judges>.removing{ margin-top: -12px; margin-bottom:-12px } .player .judges>.card.removing, .player .marks>.card.removing{ /*margin-top: -12px;margin-bottom:-12px;*/ } .player .hp>div{ width:10px; height:10px; margin-left:0; } .player .hp{ width:18px; line-height: 16px; text-align: center; bottom: 18px; top: auto; left: 118px; z-index:3; transform:rotate(180deg); } #arena.slim_player .player .hp{ bottom: 15px; left:121px; } .player .hp.text{ font-family:'huangcao','xinwei'; font-size:22px; transform:none; transition:all 0s; left:114px; } #arena.slim_player .player .hp.text{ left:117px; } .player .hp.long{ bottom:12px; max-height:160px; } #arena.slim_player .player .hp.long{ bottom:9px } .player .hp.long>div:first-child{ margin-top:7px; } .player .intro{ top:96px; left:120px; } .player .count{ top:auto; bottom:30px; left:-3px; padding:2px; line-height:20px; width:8px; text-align:left; border-radius:2px; z-index:1; border-radius:3px 0 0 3px; box-shadow: rgba(0,0,0,0.2) 1px -1px 2px inset,rgba(255,255,255,0.15) -1px 1px 5px inset; } #arena.slim_player .player .count{ left: -6px; } .player .count.action{ bottom:60px; } .player .count[data-condition="none"]{ background: rgba(57, 123, 4,1); border: 1px solid rgba(39, 79, 7, 1); filter: grayscale(1); -webkit-filter: grayscale(1); } .player .count[data-condition="high"]{ background: rgba(85, 134, 57,1); border: 1px solid rgba(39, 79, 7, 1); } .player .count[data-condition="higher"]{ background: rgba(63, 119, 173,1); border: 1px solid rgba(31, 82, 131, 1); } .player .count[data-condition="mid"]{ background: rgba(194, 167, 30,1); border: 1px solid rgba(87, 71, 8, 1); } .player .count[data-condition="low"]{ background: rgba(148, 27, 27,1); border: 1px solid rgba(86, 9, 9, 1); } .player .identity{ top: -8px; left: 132px; } .player.minskin .identity{ left:102px; } .player.linked{ transform:rotate(-90deg); } .player.linked.target{ transform:rotate(-93deg); } .player.acted.linked .identity{ transform:rotate(270deg); } .linked>.avatar,.linked>.avatar2{transform:rotate(0deg);} .linked>.avatar2{top:73px;} .linked>.identity{top: -5px;} .linked>.count{right: auto;} /*--------位置(n人)------*/ /*--------位置(8人)------*/ [data-number='8']>.player[data-position='1']{top:calc(200% / 3 - 160px);left:calc(100% - 150px);} [data-number='8']>.player[data-position='2']{top:calc(100% / 3 - 170px);left:calc(100% - 150px);} [data-number='8']>.player[data-position='3']{top:0;left:calc(75% - 112.5px);} [data-number='8']>.player[data-position='4']{top:0;left:calc(50% - 75px);} [data-number='8']>.player[data-position='5']{top:0;left:calc(25% - 37.5px);} [data-number='8']>.player[data-position='6']{top:calc(100% / 3 - 170px);left:0;} [data-number='8']>.player[data-position='7']{top:calc(200% / 3 - 160px);left:0;} [data-number='8']>.card[data-position='1']{top:calc(200% / 3 - 122px);left:calc(100% - 127px);} [data-number='8']>.card[data-position='2']{top:calc(100% / 3 - 132px);left:calc(100% - 127px);} [data-number='8']>.card[data-position='3']{top:38px;left:calc(75% - 89.5px);} [data-number='8']>.card[data-position='4']{top:38px;left:calc(50% - 52px);} [data-number='8']>.card[data-position='5']{top:38px;left:calc(25% - 14.5px);} [data-number='8']>.card[data-position='6']{top:calc(100% / 3 - 132px);left:23px;} [data-number='8']>.card[data-position='7']{top:calc(200% / 3 - 122px);left:23px;} [data-number='8']>.popup[data-position='1']{top:calc(200% / 3 - 150px);left:calc(100% - 186px);} [data-number='8']>.popup[data-position='2']{top:calc(100% / 3 - 160px);left:calc(100% - 186px);} [data-number='8']>.popup[data-position='3']{top:190px;left:calc(75% + 10.5px);} [data-number='8']>.popup[data-position='4']{top:190px;left:calc(50% - 61px);} [data-number='8']>.popup[data-position='5']{top:190px;left:calc(25% - 37.5px);} [data-number='8']>.popup[data-position='6']{top:calc(100% / 3 - 160px);left:160px;} [data-number='8']>.popup[data-position='7']{top:calc(200% / 3 - 150px);left:160px;} /*--------位置(7人)------*/ [data-number='7']>.player[data-position='1']{top:calc(200% / 3 - 160px);left:calc(100% - 150px);} [data-number='7']>.player[data-position='2']{top:calc(100% / 3 - 170px);left:calc(100% - 150px);} [data-number='7']>.player[data-position='3']{top:0;left:calc(62.5% - 75px);} [data-number='7']>.player[data-position='4']{top:0;left:calc(37.5% - 75px);} [data-number='7']>.player[data-position='5']{top:calc(100% / 3 - 170px);left:0;} [data-number='7']>.player[data-position='6']{top:calc(200% / 3 - 160px);left:0;} [data-number='7']>.card[data-position='1']{top:calc(200% / 3 - 122px);left:calc(100% - 127px);} [data-number='7']>.card[data-position='2']{top:calc(100% / 3 - 132px);left:calc(100% - 127px);} [data-number='7']>.card[data-position='3']{top:38px;left:calc(62.5% - 52px);} [data-number='7']>.card[data-position='4']{top:38px;left:calc(37.5% - 52px);} [data-number='7']>.card[data-position='5']{top:calc(100% / 3 - 132px);left:23px;} [data-number='7']>.card[data-position='6']{top:calc(200% / 3 - 122px);left:23px;} [data-number='7']>.popup[data-position='1']{top:calc(200% / 3 - 150px);left:calc(100% - 186px);} [data-number='7']>.popup[data-position='2']{top:calc(100% / 3 - 160px);left:calc(100% - 186px);} [data-number='7']>.popup[data-position='3']{top:190px;left:calc(62.5% + 48px);} [data-number='7']>.popup[data-position='4']{top:190px;left:calc(37.5% - 75px);} [data-number='7']>.popup[data-position='5']{top:calc(100% / 3 - 160px);left:160px;} [data-number='7']>.popup[data-position='6']{top:calc(200% / 3 - 150px);left:160px;} /*--------位置(6人)------*/ [data-number='6']>.player[data-position='1']{top:calc(200% / 3 - 160px);left:calc(100% - 150px);} [data-number='6']>.player[data-position='2']{top:calc(100% / 3 - 170px);left:calc(100% - 150px);} [data-number='6']>.player[data-position='3']{top:0;left:calc(50% - 75px);} [data-number='6']>.player[data-position='4']{top:calc(100% / 3 - 170px);left:0;} [data-number='6']>.player[data-position='5']{top:calc(200% / 3 - 160px);left:0;} [data-number='6']>.card[data-position='1']{top:calc(200% / 3 - 122px);left:calc(100% - 127px);} [data-number='6']>.card[data-position='2']{top:calc(100% / 3 - 132px);left:calc(100% - 127px);} [data-number='6']>.card[data-position='3']{top:38px;left:calc(50% - 52px);} [data-number='6']>.card[data-position='4']{top:calc(100% / 3 - 132px);left:23px;} [data-number='6']>.card[data-position='5']{top:calc(200% / 3 - 122px);left:23px;} [data-number='6']>.popup[data-position='1']{top:calc(200% / 3 - 150px);left:calc(100% - 186px);} [data-number='6']>.popup[data-position='2']{top:calc(100% / 3 - 160px);left:calc(100% - 186px);} [data-number='6']>.popup[data-position='3']{top:190px;left:calc(50% - 61px);} [data-number='6']>.popup[data-position='4']{top:calc(100% / 3 - 160px);left:160px;} [data-number='6']>.popup[data-position='5']{top:calc(200% / 3 - 150px);left:160px;} /*--------位置(5人)------*/ [data-number='5']>.player[data-position='1']{top:calc(200% / 3 - 220px);left:calc(100% - 150px);} [data-number='5']>.player[data-position='2']{top:0;left:calc(200% / 3 - 50px);} [data-number='5']>.player[data-position='3']{top:0;left:calc(100% / 3 - 100px);} [data-number='5']>.player[data-position='4']{top:calc(200% / 3 - 220px);left:0;} [data-number='5']>.card[data-position='1']{top:calc(150% / 3 - 65px);left:calc(100% - 127px);} [data-number='5']>.card[data-position='2']{top:38px;left:calc(200% / 3 - 27px);} [data-number='5']>.card[data-position='3']{top:38px;left:calc(100% / 3 - 77px);} [data-number='5']>.card[data-position='4']{top:calc(150% / 3 - 65px);left:23px;} [data-number='5']>.popup[data-position='1']{top:calc(200% / 3 - 210px);left:calc(100% - 186px);} [data-number='5']>.popup[data-position='2']{top:190px;left:calc(200% / 3 + 73px);} [data-number='5']>.popup[data-position='3']{top:190px;left:calc(100% / 3 - 100px);} [data-number='5']>.popup[data-position='4']{top:calc(200% / 3 - 210px);left:160px;} /*--------位置(4人)------*/ [data-number='4']>.player[data-position='1']{top:calc(100% / 3 - 40px);left:calc(100% - 150px);} [data-number='4']>.player[data-position='2']{top:0;left:calc(50% - 75px);} [data-number='4']>.player[data-position='3']{top:calc(100% / 3 - 40px);left:0;} [data-number='4']>.card[data-position='1']{top:calc(100% / 3 - 2px);left:calc(100% - 127px);} [data-number='4']>.card[data-position='2']{top:38px;left:calc(50% - 52px);} [data-number='4']>.card[data-position='3']{top:calc(100% / 3 - 2px);left:23px;} [data-number='4']>.popup[data-position='1']{top:calc(100% / 3 - 30px);left:calc(100% - 186px);} [data-number='4']>.popup[data-position='2']{top:190px;left:calc(50% - 61px);} [data-number='4']>.popup[data-position='3']{top:calc(100% / 3 - 30px);left:160px;} /*--------位置(3人)------*/ [data-number='3']>.player[data-position='1']{top:20px;left:calc(75% + 30px);} [data-number='3']>.player[data-position='2']{top:20px;left:calc(25% - 180px);} [data-number='3']>.card[data-position='1']{top:58px;left:calc(75% + 53px);} [data-number='3']>.card[data-position='2']{top:58px;left:calc(25% - 157px);} [data-number='3']>.popup[data-position='1']{top:210px;left:calc(75% + 153px);} [data-number='3']>.popup[data-position='2']{top:210px;left:calc(25% - 180px);} /*--------位置(2人)------*/ [data-number='2']>.player[data-position='1']{top:0;left:calc(50% - 75px);} [data-number='2']>.card[data-position='1']{top:0;left:calc(50% - 52px);} [data-number='2']>.popup[data-position='1']{top:190px;left:calc(50% - 61px);} /*--------位置(1人)------*/ .player[data-position='0']{top:calc(100% - 170px);left:calc(50% - 75px);} .card[data-position='0']{top:calc(100% - 130px);left:calc(50% - 52px);} .popup[data-position='0']{top:calc(100% - 206px);left:calc(50% - 61px);} #me,#mebg{top:calc(100% - 150px);} #handcards1,#handcards2{width: calc(50% - 95px);height: 127px;padding: 10px;} #handcards2{left: calc(50% + 75px);} .dialog{ width: calc(90% - 300px); left: calc(5% + 150px); top:auto; bottom:185px; height:calc(100% - 385px); z-index:4; transition-property:opacity,background,box-shadow; animation: dialog_start2 0.5s; -webkit-animation: dialog_start2 0.5s; } #arena.stone .dialog{ width: calc(90% - 440px); left: calc(5% + 220px); } .dialog.removing{ top:auto; } #control{ z-index:5; top:auto; bottom:210px; width: calc(100% - 300px); left:150px; } .popup{z-index:6} .dialog.scroll1, .dialog.scroll2, .dialog.withbg{ background: rgba(0,0,0,0.2); box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px; border-radius:8px; min-height:240px; } .dialog>.bar{ display:none !important; } .dialog>.content-container{ height:100%; top:0; } .bordered{ border:1px solid white; box-shadow:black 0 0 2px; } @media screen and (min-width: 1150px) { .dialog{ width: 630px; left: calc(50% - 315px); } .dialog.bosscharacter{ width: 735px; left: calc(50% - 367.5px); } #arena.stone .dialog{ width: calc(90% - 440px); left: calc(5% + 220px); } } @keyframes card_start2x{from {opacity: 0;margin-top: -13px;margin-bottom:-11px}} @keyframes card_start2xx{from {opacity: 0;margin-top: -12px;margin-bottom:-12px;transform:scale(0)}} @keyframes card_start2xxx{from {opacity: 0;margin-top: -12px;margin-bottom:-12px;transform:scale(0) rotate(90deg)}} @-webkit-keyframes card_start2x{from {opacity: 0;margin-top: -13px;margin-bottom:-11px}} @-webkit-keyframes card_start2xx{from {opacity: 0;margin-top: -12px;margin-bottom:-12px;transform:scale(0)}} @-webkit-keyframes card_start2xxx{from {opacity: 0;margin-top: -12px;margin-bottom:-12px;transform:scale(0) rotate(90deg)}}