@import '../default/layout.css'; .player{ width:150px; height:180px; } .player .avatar{ width:126px; height:107px; } .player .avatar2{ width:52px; height:52px; top:73px; left:92px; } .player .avatar, .player .avatar2{ transition-property:opacity; } .player .wunature{ top:137px; } .player.fullskin .avatar{ height:156px; } .player.fullskin2 .avatar, .player.fullskin2 .avatar2{ width:64px; background-position:50%; } .player.fullskin2 .avatar{ border-radius:8px 0 0 8px; } .player.fullskin2 .avatar2{ top:12px; left:auto; right:12px; height:156px; z-index:1; border-radius:0 8px 8px 0; } .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 .marks>div, .player .judges>div{ margin-right:0; margin-bottom:4px; margin-left:6px; line-height:20px; position:relative; display:block; -webkit-animation:card_start2xx 0.5s; } .player .marks>.removing, .player .judges>.removing{ margin-top: -12px; margin-bottom:-12px } .player .equips{ width:120px; height:auto; top:auto; right:auto; bottom:18px; left:12px; text-align:left; } .player .equips>.card{ position:relative; width:100%; height:22px; line-height:22px; margin-top:0; margin-bottom:0; background:linear-gradient(to right,rgba(0,0,0,0.3),transparent), linear-gradient(135deg,rgba(0,0,0,0.5) ,transparent 80%,transparent); box-shadow:none; color:white; text-shadow:black 0 0 2px; -webkit-animation: card_start2x 0.5s; display:block; left:0; top:0; transition:all 0.5s; border-radius:0; border-width: 1px 0 0; border-style:solid; border-image:linear-gradient(to right, rgba(0, 0, 0,0.4) 70%,transparent) 100% 0 0; } .player .equips>.card>.image{ display:none; } /*.player.unseen .equips{ box-shadow:rgba(0,0,0,0.3) 0 0 0 1px; }*/ .player.unseen .equips>.card{ background:none; /*border-image:linear-gradient(to right, transparent,rgba(0,0,0,0.4) 10%,rgba(0, 0, 0,0.4) 70%,transparent) 100% 0 0;*/ } .player.unseen .equips>.card{ border-image:linear-gradient(to right, transparent,rgba(0,0,0,0.4) 10%,rgba(0, 0, 0,0.4) 70%,transparent) 100% 0 0; } .player.unseen .equips>.card:first-child{ border-image:linear-gradient(transparent,transparent); } .player .equips>.card.selected{ background:linear-gradient(to right,rgba(0, 133, 255,0.3),transparent), linear-gradient(135deg,rgba(0, 133, 255,0.5) ,transparent 80%,transparent); box-shadow:none !important; border-width: 1px 0 0; border-style:solid; border-image:linear-gradient(to right, rgba(0, 103, 205,0.4) 70%,transparent) 100% 0 0; } .player .equips>.card.fire{ color: rgb(255,119,63); } .player .equips>.card.thunder{ color: rgb(117,186,255); } .player .equips>.card.poison{ color: rgb(104,221,127); } .player .equips>.card.brown{ color: rgb(195,161,223); } .player .judges>.card.removing, .player .marks>.card.removing{ /*margin-top: -12px;margin-bottom:-12px;*/ } .equips>.card>.background{ display:none !important; } .equips>.card>.name2{ display:block; margin-left:5px; } .equips>.card>div{ -webkit-animation:none !important; } .equips>.card>.name, .equips>.card>.info{ display:none !important; } .equips>.removing{ margin-top:-12px !important; margin-bottom:-11px !important; -webkit-transform:scale(1); } .equips>.removing+.removing{ margin-top:-23px !important; } .player .hp>div{ width:10px; height:10px; margin-left:0; } .player .hp{ width:18px; line-height: 16px; text-align: center; bottom: 20px; top: auto; left: 116px; z-index:3; -webkit-transform:rotate(180deg); } .player .hp.long{ bottom:12px; max-height:156px; } .player .hp.longlong{ width:30px; left:104px; text-align:left; } .player .hp.longlong>div{ margin-left:3px; } .player .hp.long>div:first-child{ margin-top:7px; } .player .intro{ top:96px; left:120px; } .player .count{ top:auto; bottom:30px; left:-2px; padding:2px; line-height:20px; width:10px; text-align:left; border-radius:2px; z-index:1; border-radius:2px; box-shadow: rgba(0,0,0,0.2) 1px -1px 2px inset,rgba(255,255,255,0.15) -1px 1px 5px inset; } .player .count[data-condition="none"]{ background: rgba(57, 123, 4,1); border: 1px solid rgba(39, 79, 7, 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.linked{ -webkit-transform:rotate(-90deg); } .player.linked .equips{ -webkit-transform:rotate(90deg) translate(-150px,-6px); -webkit-transform-origin:bottom left; } .player.linked div:not(.equips) .card, .player.linked .identity{ -webkit-transform:rotate(90deg); } .player.acted.linked .identity{ -webkit-transform:rotate(270deg); } .linked>.avatar,.linked>.avatar2{-webkit-transform:rotate(0deg);} .linked>.avatar2{top:73px;} .linked>.identity{top: -5px;} .linked>.count{right: auto;} /*--------位置(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; -webkit-animation: dialog_start2 0.5s; } .dialog.removing{ top:auto; } #control{ z-index:5; top:auto; bottom:190px; width: calc(100% - 300px); left:150px; } .popup{z-index:6} .dialog.scroll1, .dialog.scroll2{ 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);} } @-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;-webkit-transform:scale(0)}}