新布局
This commit is contained in:
libccy
parent
c6adf17db7
commit
33190c5ffd
|
|
@ -1,3 +1,5 @@
|
|||
1.4.1
|
||||
game.print命令（在命令输入框中输出结果）
|
||||
修正触屏问题
|
||||
修正技能bug
|
||||
新布局
|
||||
|
|
|
|||
212
game/game.js
212
game/game.js
|
|
@ -171,20 +171,37 @@
|
|||
name:'布局',
|
||||
init:'newlayout',
|
||||
item:{
|
||||
default:'默认',
|
||||
newlayout:'新版',
|
||||
default:'旧版',
|
||||
newlayout:'默认',
|
||||
mobile:'紧凑'
|
||||
},
|
||||
onclick:function(layout){
|
||||
game.saveConfig('layout',layout);
|
||||
if(lib.config.mode!='chess'){
|
||||
ui.arena.hide();
|
||||
setTimeout(function(){
|
||||
var layout=ui.css.layout;
|
||||
ui.css.layout=lib.init.css('layout/'+lib.config.layout,'layout',layout);
|
||||
|
||||
setTimeout(function(){layout.remove();ui.arena.show();},100);
|
||||
},500);
|
||||
if(lib.config.layoutfixed.contains(lib.config.mode)&&layout=='default'){
|
||||
return;
|
||||
}
|
||||
setTimeout(function(){
|
||||
var layout=ui.css.layout;
|
||||
ui.css.layout=lib.init.css('layout/'+lib.config.layout,'layout',layout);
|
||||
if(lib.config.layout=='mobile'){
|
||||
ui.arena.classList.add('mobile');
|
||||
if(game.me&&game.me.node.handcards2.childNodes.length){
|
||||
while(game.me.node.handcards2.childNodes.length){
|
||||
game.me.node.handcards1.appendChild(game.me.node.handcards2.firstChild);
|
||||
}
|
||||
}
|
||||
}
|
||||
else{
|
||||
ui.arena.classList.remove('mobile');
|
||||
}
|
||||
setTimeout(function(){
|
||||
layout.remove();
|
||||
ui.arena.show();
|
||||
setTimeout(function(){
|
||||
ui.updatex();
|
||||
},500);
|
||||
},100);
|
||||
},500);
|
||||
}
|
||||
},
|
||||
ui_zoom:{
|
||||
|
|
@ -460,9 +477,6 @@
|
|||
init:true,
|
||||
},
|
||||
update:function(config,map){
|
||||
if(lib.config.layoutfixed.contains(lib.config.mode)){
|
||||
map.layout.hide();
|
||||
}
|
||||
if(lib.config.image_background=='default'){
|
||||
map.image_background_filter.hide();
|
||||
}
|
||||
|
|
@ -1342,6 +1356,20 @@
|
|||
}
|
||||
dialog.style.top=idealtop+'px';
|
||||
},
|
||||
isMobileMe:function(player){
|
||||
return lib.config.layout=='mobile'&&lib.config.mode!='chess'&&player.dataset.position==0;
|
||||
},
|
||||
isNewLayout:function(){
|
||||
if(lib.config.layout!='default') return true;
|
||||
if(lib.config.layoutfixed.contains(lib.config.mode)) return true;
|
||||
return false;
|
||||
},
|
||||
isSingleHandcard:function(){
|
||||
if(game.singleHandcard||lib.config.layout=='mobile'){
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
setHover:function(node,func,hoveration,width){
|
||||
node._hoverfunc=func;
|
||||
if(typeof hoveration=='number'){
|
||||
|
|
@ -1486,13 +1514,13 @@
|
|||
lib.init.js('character','rank');
|
||||
ui.css={};
|
||||
lib.init.css('layout/default','menu');
|
||||
var layout=lib.config.layout;
|
||||
if(lib.config.layoutfixed.indexOf(lib.config.mode)!==-1){
|
||||
lib.config.layout='newlayout';
|
||||
}
|
||||
ui.css.layout=lib.init.css('layout/'+lib.config.layout,'layout');
|
||||
if(!lib.config.touchscreen){
|
||||
if(lib.config.show_scrollbar) ui.css.scrollbar=lib.init.css('layout/default','scrollbar');
|
||||
if(layout=='default'){
|
||||
layout='newlayout';
|
||||
}
|
||||
}
|
||||
ui.css.layout=lib.init.css('layout/'+layout,'layout');
|
||||
if(lib.config.fold_card) ui.css.fold=lib.init.css('layout/default','fold');
|
||||
if(lib.config.threed_card) ui.css.threed=lib.init.css('layout/default','fold2');
|
||||
if(lib.config.blur_ui) ui.css.blur_ui=lib.init.css('layout/default','blur');
|
||||
|
|
@ -2859,7 +2887,7 @@
|
|||
cards[num].fix();
|
||||
cards[num].animate('start');
|
||||
|
||||
if(game.singleHandcard||sort>0) frag1.appendChild(cards[num]);
|
||||
if(lib.isSingleHandcard()||sort>0) frag1.appendChild(cards[num]);
|
||||
else frag2.appendChild(cards[num]);
|
||||
}
|
||||
if(event.animate=='draw'){
|
||||
|
|
@ -3365,7 +3393,7 @@
|
|||
var info=lib.character[character];
|
||||
var skills=info[3];
|
||||
this.skills.length=0;
|
||||
if(!game.minskin&&lib.config.layout=='newlayout'&&info[4].contains('fullskin')){
|
||||
if(!game.minskin&&lib.isNewLayout()&&info[4].contains('fullskin')){
|
||||
this.classList.remove('minskin');
|
||||
this.classList.add('fullskin');
|
||||
if(lib.fakeavatar&&lib.fakeavatar[character]){
|
||||
|
|
@ -3376,8 +3404,14 @@
|
|||
}
|
||||
}
|
||||
else{
|
||||
this.node.avatar.setBackground(character,'character');
|
||||
this.classList.remove('fullskin');
|
||||
if(info[4].contains('fullskin')){
|
||||
this.classList.add('fullskin');
|
||||
this.node.avatar.setBackground('character/fullskin/'+character);
|
||||
}
|
||||
else{
|
||||
this.classList.remove('fullskin');
|
||||
this.node.avatar.setBackground(character,'character');
|
||||
}
|
||||
if(info[4].contains('minskin')){
|
||||
this.classList.add('minskin');
|
||||
}
|
||||
|
|
@ -3415,7 +3449,7 @@
|
|||
if(character2){
|
||||
var info2=lib.character[character2];
|
||||
|
||||
if(lib.config.layout=='newlayout'&&lib.config.only_fullskin){
|
||||
if(lib.isNewLayout()&&lib.config.only_fullskin){
|
||||
this.classList.add('fullskin2');
|
||||
if(lib.fakeavatar&&lib.fakeavatar[character2]){
|
||||
this.node.avatar2.setBackground('character/fullskin/'+lib.fakeavatar[character2]);
|
||||
|
|
@ -3425,7 +3459,14 @@
|
|||
}
|
||||
}
|
||||
else{
|
||||
this.node.avatar2.setBackground(character2,'character');
|
||||
if(info2[4].contains('fullskin')){
|
||||
this.classList.add('fullskin2');
|
||||
this.node.avatar2.setBackground('character/fullskin/'+character2);
|
||||
}
|
||||
else{
|
||||
this.classList.remove('fullskin2');
|
||||
this.node.avatar2.setBackground(character2,'character');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -3520,8 +3561,12 @@
|
|||
hp.innerHTML=this.hp+'/'+this.maxHp;
|
||||
hp.classList.add('text');
|
||||
}
|
||||
else if(lib.config.layout=='newlayout'&&
|
||||
(this.maxHp>9||(this.maxHp>5&&this.classList.contains('minskin')))){
|
||||
else if(lib.isNewLayout()&&
|
||||
(
|
||||
this.maxHp>9||
|
||||
(this.maxHp>5&&this.classList.contains('minskin'))||
|
||||
(lib.config.layout=='mobile'&&this.dataset.position==0&&this.maxHp>7)
|
||||
)){
|
||||
hp.innerHTML=this.hp+'<br>/<br>'+this.maxHp;
|
||||
hp.classList.add('text');
|
||||
hp.classList.remove('long');
|
||||
|
|
@ -4554,7 +4599,7 @@
|
|||
directgain:function(cards){
|
||||
for(var i=0;i<cards.length;i++){
|
||||
var sort=lib.config.sort_card(cards[i]);
|
||||
if(game.singleHandcard||sort>0){
|
||||
if(lib.isSingleHandcard()||sort>0){
|
||||
this.node.handcards1.appendChild(cards[i].animate('start'));
|
||||
}
|
||||
else{
|
||||
|
|
@ -5238,6 +5283,7 @@
|
|||
player.queueCount--;
|
||||
if(player.queueCount==0){
|
||||
player.removeAttribute('style');
|
||||
player.node.avatar.style.transform='';
|
||||
if(player==game.me) ui.me.removeAttribute('style');
|
||||
}
|
||||
},time)
|
||||
|
|
@ -5700,7 +5746,15 @@
|
|||
}
|
||||
if(source.offsetLeft-this.offsetLeft>0) left=-left;
|
||||
if(source.offsetTop-this.offsetTop>0) top=-top;
|
||||
if(this.isLinked()&&lib.config.layout=='newlayout'){
|
||||
if(lib.isMobileMe(this)){
|
||||
if(this.isLinked()){
|
||||
this.node.avatar.style.webkitTransform='translate('+left+'px,'+top+'px) rotate(-90deg)';
|
||||
}
|
||||
else{
|
||||
this.node.avatar.style.webkitTransform='translate('+left+'px,'+top+'px)';
|
||||
}
|
||||
}
|
||||
else if(this.isLinked()&&lib.isNewLayout()){
|
||||
this.style.webkitTransform='translate('+left+'px,'+top+'px) rotate(-90deg)';
|
||||
}
|
||||
else{
|
||||
|
|
@ -5708,7 +5762,15 @@
|
|||
}
|
||||
}
|
||||
else{
|
||||
if(this.isLinked()&&lib.config.layout=='newlayout'){
|
||||
if(lib.isMobileMe(this)){
|
||||
if(this.isLinked()){
|
||||
this.node.avatar.style.webkitTransform='scale(0.9) rotate(-90deg)';
|
||||
}
|
||||
else{
|
||||
this.node.avatar.style.webkitTransform='scale(0.9)';
|
||||
}
|
||||
}
|
||||
else if(this.isLinked()&&lib.isNewLayout()){
|
||||
this.style.webkitTransform='scale(0.95) rotate(-90deg)';
|
||||
}
|
||||
else{
|
||||
|
|
@ -5718,6 +5780,7 @@
|
|||
this.queue();
|
||||
},
|
||||
$die:function(){
|
||||
if(lib.isMobileMe) return;
|
||||
var top0=ui.window.offsetHeight/2;
|
||||
var left0=ui.window.offsetWidth/2;
|
||||
var ratio=(left0-this.offsetLeft)/(top0-this.offsetTop);
|
||||
|
|
@ -7826,6 +7889,9 @@
|
|||
delete ui.restart;
|
||||
}
|
||||
}
|
||||
if(lib.config.mode=='identity'){
|
||||
game.me.setIdentity(game.me.identity);
|
||||
}
|
||||
},
|
||||
swapControl:function(player){
|
||||
if(player==game.me) return;
|
||||
|
|
@ -8824,6 +8890,12 @@
|
|||
ui.window.addEventListener(lib.config.touchscreen?'touchend':'click',ui.click.window);
|
||||
ui.system=ui.create.div("#system.",ui.window);
|
||||
ui.arena=ui.create.div('#arena',ui.window);
|
||||
if(lib.config.layout=='mobile'){
|
||||
ui.arena.classList.add('mobile');
|
||||
}
|
||||
else{
|
||||
ui.arena.classList.remove('mobile');
|
||||
}
|
||||
ui.backgroundMusic=document.createElement('audio');
|
||||
ui.backgroundMusic.volume=lib.config.volumn_background/8;
|
||||
game.playBackgroundMusic();
|
||||
|
|
@ -10734,6 +10806,11 @@
|
|||
}());
|
||||
|
||||
}());
|
||||
|
||||
// ui.systemButton=ui.create.div('.menubutton.round.highlight#systembutton','设',ui.arena,function(){
|
||||
//
|
||||
// });
|
||||
|
||||
clearTimeout(window.resetGameTimeout);
|
||||
delete window.resetGameTimeout;
|
||||
},
|
||||
|
|
@ -12650,7 +12727,7 @@
|
|||
if(get.config('reverse_sort')) return lib.config.sort_card(a)-lib.config.sort_card(b);
|
||||
return lib.config.sort_card(b)-lib.config.sort_card(a);
|
||||
});
|
||||
if(!game.singleHandcard){
|
||||
if(!lib.isSingleHandcard()){
|
||||
for(i=0;i<cards.length;i++){
|
||||
if(lib.config.sort_card(cards[i])>0){
|
||||
game.me.node.handcards1.appendChild(cards[i]);
|
||||
|
|
@ -12672,7 +12749,7 @@
|
|||
for(i=0;i<game.me.node.handcards2.childNodes.length;i++){
|
||||
cards2.unshift(game.me.node.handcards2.childNodes[i]);
|
||||
}
|
||||
if(!game.singleHandcard){
|
||||
if(!lib.isSingleHandcard()){
|
||||
var cards=game.me.num('h');
|
||||
for(var i=0;i<cards.length;i++) cards[i].remove();
|
||||
for(i=0;i<cards1.length;i++){
|
||||
|
|
@ -12774,29 +12851,54 @@
|
|||
ui.dialog.classList.remove('slim');
|
||||
}
|
||||
}
|
||||
if(ui.dialog.content.offsetHeight<=240||
|
||||
ui.dialog.contentContainer.offsetHeight>=ui.dialog.content.offsetHeight){
|
||||
ui.dialog.classList.remove('scroll1');
|
||||
ui.dialog.classList.remove('scroll2');
|
||||
return;
|
||||
}
|
||||
if(lib.config.touchscreen||lib.config.layout=='newlayout'){
|
||||
ui.dialog.classList.add('scroll1');
|
||||
ui.dialog.classList.add('scroll2');
|
||||
}
|
||||
if(ui.dialog.contentContainer.scrollTop>0){
|
||||
ui.dialog.classList.add('scroll1');
|
||||
if(false&&lib.config.layout=='mobile'){
|
||||
ui.dialog.style.height='';
|
||||
if(ui.dialog.contentContainer.offsetHeight>=ui.dialog.content.offsetHeight){
|
||||
ui.dialog.style.height=ui.dialog.content.offsetHeight+'px';
|
||||
}
|
||||
else{
|
||||
ui.dialog.style.height='';
|
||||
}
|
||||
if(ui.dialog.content.offsetHeight<240){
|
||||
ui.dialog.classList.add('slim');
|
||||
ui.dialog.classList.remove('scroll1');
|
||||
ui.dialog.classList.remove('scroll2');
|
||||
}
|
||||
else{
|
||||
ui.dialog.classList.remove('slim');
|
||||
ui.dialog.classList.add('scroll1');
|
||||
ui.dialog.classList.add('scroll2');
|
||||
}
|
||||
}
|
||||
else{
|
||||
ui.dialog.classList.remove('scroll1');
|
||||
}
|
||||
if(ui.dialog.contentContainer.scrollTop+ui.dialog.contentContainer.offsetHeight>=
|
||||
ui.dialog.contentContainer.scrollHeight-1){
|
||||
ui.dialog.classList.remove('scroll2');
|
||||
}
|
||||
else{
|
||||
ui.dialog.classList.add('scroll2');
|
||||
if(ui.dialog.content.offsetHeight<=240||
|
||||
ui.dialog.contentContainer.offsetHeight>=ui.dialog.content.offsetHeight){
|
||||
ui.dialog.classList.remove('scroll1');
|
||||
ui.dialog.classList.remove('scroll2');
|
||||
}
|
||||
else{
|
||||
ui.dialog.classList.add('scroll1');
|
||||
ui.dialog.classList.add('scroll2');
|
||||
}
|
||||
}
|
||||
|
||||
// if(lib.config.touchscreen||lib.config.layout=='newlayout'){
|
||||
// ui.dialog.classList.add('scroll1');
|
||||
// ui.dialog.classList.add('scroll2');
|
||||
// }
|
||||
// if(ui.dialog.contentContainer.scrollTop>0){
|
||||
// ui.dialog.classList.add('scroll1');
|
||||
// }
|
||||
// else{
|
||||
// ui.dialog.classList.remove('scroll1');
|
||||
// }
|
||||
// if(ui.dialog.contentContainer.scrollTop+ui.dialog.contentContainer.offsetHeight>=
|
||||
// ui.dialog.contentContainer.scrollHeight-1){
|
||||
// ui.dialog.classList.remove('scroll2');
|
||||
// }
|
||||
// else{
|
||||
// ui.dialog.classList.add('scroll2');
|
||||
// }
|
||||
}
|
||||
},
|
||||
recycle:function(node,key){
|
||||
|
|
@ -13441,11 +13543,11 @@
|
|||
},
|
||||
skillintro:function(name,learn,learn2){
|
||||
var str='';
|
||||
var infoitem=lib.character[item];
|
||||
var infoitem=lib.character[name];
|
||||
if(!infoitem){
|
||||
for(var itemx in lib.characterPack){
|
||||
if(lib.characterPack[itemx][item]){
|
||||
infoitem=lib.characterPack[itemx][item];break;
|
||||
if(lib.characterPack[itemx][name]){
|
||||
infoitem=lib.characterPack[itemx][name];break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -14802,7 +14904,7 @@
|
|||
if(!character[i][j][k][4]){
|
||||
character[i][j][k][4]=[];
|
||||
}
|
||||
if(lib.config.only_fullskin&&lib.config.layout=='newlayout'&&lib.config.mode!='chess'){
|
||||
if(lib.config.only_fullskin&&lib.isNewLayout()&&lib.config.mode!='chess'){
|
||||
if(!character[i][j][k][4].contains('fullskin')&&!character[i][j][k][4].contains('minskin')){
|
||||
continue;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -75,6 +75,16 @@ body>.background{z-index:-2}
|
|||
.background2{width: 90%;height: 90%;left:5%;top: 5%;margin: 0;padding:0;display: inline-block !important;}
|
||||
.background,.button,.avatar,.avatar2{transition-property: top,box-shadow,opacity,-webkit-transform;transition-duration:0.5s;}
|
||||
.intro{width: 20px;height: 20px;}
|
||||
|
||||
#systembutton{
|
||||
left:calc(-150% / 47 + 15px);
|
||||
bottom:calc(-100% / 18 + 135px);
|
||||
top:auto;
|
||||
margin:0;
|
||||
}
|
||||
#arena:not(.mobile)>#systembutton{
|
||||
display: none !important;
|
||||
}
|
||||
/*--------卡牌--------*/
|
||||
.card{width: 104px;height: 104px;margin-top:8px;margin-left:4px;margin-right: 4px;position: relative;overflow: hidden;}
|
||||
.card>.info{right: 6px;top: 9px;white-space: nowrap;}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,133 @@
|
|||
.player:not([data-position='0']) .equips,
|
||||
#arena.chess .player .equips{
|
||||
width:120px;
|
||||
height:auto;
|
||||
top:auto;
|
||||
right:auto;
|
||||
bottom:18px;
|
||||
left:12px;
|
||||
text-align:left;
|
||||
}
|
||||
.player:not([data-position='0']).minskin .equips,
|
||||
#arena.chess .player.minskin .equips{
|
||||
-webkit-transform:scale(0.73);
|
||||
-webkit-transform-origin:bottom left;
|
||||
}
|
||||
.player:not([data-position='0']) .equips>.card,
|
||||
#arena.chess .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:not([data-position='0']) .equips>.card>.image,
|
||||
#arena.chess .player .equips>.card>.image{
|
||||
display:none;
|
||||
}
|
||||
|
||||
|
||||
.player:not([data-position='0']).unseen .equips>.card,
|
||||
#arena.chess .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:not([data-position='0']).unseen .equips>.card,
|
||||
#arena.chess .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:not([data-position='0']).unseen .equips>.card:first-child,
|
||||
#arena.chess .player.unseen .equips>.card:first-child{
|
||||
border-image:linear-gradient(transparent,transparent);
|
||||
}
|
||||
.player:not([data-position='0']) .equips>.card.selected,
|
||||
#arena.chess .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:not([data-position='0']) .equips>.card.fire,
|
||||
#arena.chess .player .equips>.card.fire{
|
||||
color: rgb(255,119,63);
|
||||
}
|
||||
.player:not([data-position='0']) .equips>.card.thunder,
|
||||
#arena.chess .player .equips>.card.thunder{
|
||||
color: rgb(117,186,255);
|
||||
}
|
||||
.player:not([data-position='0']) .equips>.card.poison,
|
||||
#arena.chess .player .equips>.card.poison{
|
||||
color: rgb(104,221,127);
|
||||
}
|
||||
.player:not([data-position='0']) .equips>.card.brown,
|
||||
#arena.chess .player .equips>.card.brown{
|
||||
color: rgb(195,161,223);
|
||||
}
|
||||
|
||||
|
||||
.player:not([data-position='0']) .equips>.card>.background,
|
||||
#arena.chess .player .equips>.card>.background{
|
||||
display:none !important;
|
||||
}
|
||||
.player:not([data-position='0']) .equips>.card>.name2,
|
||||
#arena.chess .player .equips>.card>.name2{
|
||||
display:block;
|
||||
margin-left:5px;
|
||||
}
|
||||
.player:not([data-position='0']) .equips>.card>div,
|
||||
#arena.chess .player .equips>.card>div{
|
||||
-webkit-animation:none !important;
|
||||
}
|
||||
.player:not([data-position='0']) .equips>.card>.name,
|
||||
.player:not([data-position='0']) .equips>.card>.info,
|
||||
#arena.chess .player .equips>.card>.name,
|
||||
#arena.chess .player .equips>.card>.info{
|
||||
display:none !important;
|
||||
}
|
||||
|
||||
|
||||
.player:not([data-position='0']) .equips>.removing,
|
||||
#arena.chess .player .equips>.removing{
|
||||
margin-top:-12px !important;
|
||||
margin-bottom:-11px !important;
|
||||
-webkit-transform:scale(1);
|
||||
}
|
||||
.player:not([data-position='0']) .equips>.removing+.removing,
|
||||
#arena.chess .player .equips>.removing+.removing{
|
||||
margin-top:-23px !important;
|
||||
}
|
||||
|
||||
|
||||
.player:not([data-position='0']).linked .equips,
|
||||
#arena.chess .player.linked .equips{
|
||||
-webkit-transform:rotate(90deg) translate(-150px,-6px);
|
||||
-webkit-transform-origin:bottom left;
|
||||
}
|
||||
.player:not([data-position='0']).minskin.linked .equips,
|
||||
#arena.chess .player.minskin.linked .equips{
|
||||
-webkit-transform:rotate(90deg) translate(-90px,-6px) scale(0.73);
|
||||
}
|
||||
.player:not([data-position='0']).linked div:not(.equips) .card,
|
||||
.player:not([data-position='0']).linked .identity,
|
||||
#arena.chess .player.linked div:not(.equips) .card,
|
||||
#arena.chess .player.linked .identity{
|
||||
-webkit-transform:rotate(90deg);
|
||||
}
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
@import "../default/layout.css";
|
||||
@import "../newlayout/global.css";
|
||||
@import "equip.css";
|
||||
|
||||
#arena{
|
||||
width: 94%;
|
||||
height: 95%;
|
||||
left: 3%;
|
||||
}
|
||||
#control{
|
||||
width: 100%;
|
||||
bottom:130px;
|
||||
height: 40px;
|
||||
left:0;
|
||||
}
|
||||
/*#control>div{
|
||||
height: 40px;
|
||||
font-family: 'xinwei';
|
||||
font-size: 30px;
|
||||
line-height: 34px;
|
||||
}*/
|
||||
#arena:not(.chess)>#me,
|
||||
#arena:not(.chess)>#mebg{
|
||||
bottom:10px;
|
||||
width: calc(5000% / 47);
|
||||
left:calc(-150% / 47);
|
||||
top:auto;
|
||||
border-radius:0;
|
||||
height:120px;
|
||||
}
|
||||
#arena:not(.chess) #handcards1{
|
||||
height:120px;
|
||||
padding:0;
|
||||
top:calc(100% - 120px);
|
||||
width:calc(100% - 240px);
|
||||
left:120px;
|
||||
}
|
||||
#handcards2{
|
||||
display:none;
|
||||
}
|
||||
|
||||
#arena:not(.chess) .player[data-position='0']>.equips>div{
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
}
|
||||
#arena:not(.chess) .player[data-position='0']{
|
||||
width: calc(5000% / 47);
|
||||
left:calc(-150% / 47);
|
||||
height: 120px;
|
||||
top: calc(100% - 130px);
|
||||
background: none !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
#arena:not(.chess) .player[data-position='0']:not(.selected):not(.selectable):not(.glow){
|
||||
box-shadow: none !important;
|
||||
}
|
||||
#arena:not(.chess) .player[data-position='0']:not(.minskin)>.avatar,
|
||||
#arena:not(.chess) .player[data-position='0']:not(.minskin)>.equips{
|
||||
width:120px;
|
||||
height:120px;
|
||||
border-radius:0px !important;
|
||||
top:0;
|
||||
left:0;
|
||||
transition: transform 0.5s;
|
||||
pointer-events: auto;
|
||||
}
|
||||
#arena:not(.chess) .player[data-position='0']:not(.minskin)>.equips{
|
||||
left:calc(100% - 120px);
|
||||
}
|
||||
#arena:not(.chess) .player[data-position='0']>.equips>.equip1{top: 10px;left: 10px;}
|
||||
#arena:not(.chess) .player[data-position='0']>.equips>.equip2{top: 10px;right: 10px;}
|
||||
#arena:not(.chess) .player[data-position='0']>.equips>.equip3{bottom: 10px;left: 10px;}
|
||||
#arena:not(.chess) .player[data-position='0']>.equips>.equip4{bottom: 10px;right: 10px;}
|
||||
|
||||
#arena:not(.chess) .player[data-position='0']>.name{
|
||||
left:4px;
|
||||
}
|
||||
#arena:not(.chess) .player[data-position='0']>.identity{
|
||||
left: 106px;
|
||||
top: -8px;
|
||||
}
|
||||
#arena:not(.chess) .player[data-position='0']>.damage{
|
||||
width: 120px;
|
||||
}
|
||||
#arena:not(.chess) .player[data-position='0'].target{
|
||||
transform:none !important;
|
||||
}
|
||||
#arena:not(.chess) .player[data-position='0']>.hp:not(.actcount){
|
||||
bottom: 5px;
|
||||
left: 100px;
|
||||
}
|
||||
#arena:not(.chess) .player[data-position='0']:not(.minskin)>.count{
|
||||
z-index: 2;
|
||||
text-align: right;
|
||||
left: -4px;
|
||||
bottom:10px;
|
||||
}
|
||||
.popup[data-position='0']{top:calc(100% - 170px);left:0px}
|
||||
|
||||
#arena:not(.chess) .player[data-position='0'].linked{
|
||||
transform: none;
|
||||
}
|
||||
#arena:not(.chess) .player[data-position='0'].linked .avatar{
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.dialog{
|
||||
height:calc(100% - 350px);
|
||||
bottom:150px;
|
||||
}
|
||||
|
||||
@media screen and (min-height: 800px) {
|
||||
#arena{height: 760px;top: calc(50% - 350px);}
|
||||
#arena:not(.chess)>#me,
|
||||
#arena:not(.chess)>#mebg{
|
||||
bottom:10px;
|
||||
}
|
||||
#arena:not(.chess) .player[data-position='0']{
|
||||
top: calc(100% - 130px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (orientation:portrait) {
|
||||
|
||||
}
|
||||
@media screen and (orientation:landscape) {
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
.player .equips{
|
||||
width:120px;
|
||||
height:auto;
|
||||
top:auto;
|
||||
right:auto;
|
||||
bottom:18px;
|
||||
left:12px;
|
||||
text-align:left;
|
||||
}
|
||||
.player.minskin .equips{
|
||||
-webkit-transform:scale(0.73);
|
||||
-webkit-transform-origin:bottom 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>.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);
|
||||
}
|
||||
|
||||
|
||||
.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.linked .equips{
|
||||
-webkit-transform:rotate(90deg) translate(-150px,-6px);
|
||||
-webkit-transform-origin:bottom left;
|
||||
}
|
||||
.player.minskin.linked .equips{
|
||||
-webkit-transform:rotate(90deg) translate(-90px,-6px) scale(0.73);
|
||||
}
|
||||
.player.linked div:not(.equips) .card,
|
||||
.player.linked .identity{
|
||||
-webkit-transform:rotate(90deg);
|
||||
}
|
||||
|
|
@ -0,0 +1,368 @@
|
|||
.player{
|
||||
width:150px;
|
||||
height:180px;
|
||||
}
|
||||
.player .avatar{
|
||||
width:126px;
|
||||
height:156px;
|
||||
}
|
||||
.player.minskin{
|
||||
width:120px;
|
||||
height:120px;
|
||||
/*zoom:0.9;*/
|
||||
}
|
||||
.player.minskin .avatar{
|
||||
height:96px;
|
||||
width:96px;
|
||||
}
|
||||
.player.minskin .hp{
|
||||
left:86px;
|
||||
}
|
||||
.player.minskin .hp.text{
|
||||
left:86px;
|
||||
}
|
||||
.player.minskin .hp.longlong{
|
||||
left:74px;
|
||||
}
|
||||
.player .avatar2{
|
||||
width:52px;
|
||||
height:52px;
|
||||
top:73px;
|
||||
left:92px;
|
||||
}
|
||||
.player .avatar,
|
||||
.player .avatar2{
|
||||
transition-property:opacity;
|
||||
}
|
||||
.player .wunature{
|
||||
top:137px;
|
||||
}
|
||||
.player .actcount.hp{
|
||||
top: 18px;
|
||||
left: 15px;
|
||||
width: 130px;
|
||||
bottom: auto;
|
||||
right: auto;
|
||||
text-align: left;
|
||||
-webkit-transform: none;
|
||||
}
|
||||
.player.fullskin2 .avatar,
|
||||
.player.fullskin2 .avatar2{
|
||||
width:63px;
|
||||
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.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;
|
||||
-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: 20px;
|
||||
top: auto;
|
||||
left: 116px;
|
||||
z-index:3;
|
||||
-webkit-transform:rotate(180deg);
|
||||
}
|
||||
.player .hp.text{
|
||||
font-family:'huangcao';
|
||||
font-size:22px;
|
||||
-webkit-transform:none;
|
||||
transition:all 0s;
|
||||
left:114px;
|
||||
}
|
||||
.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.action{
|
||||
bottom:60px;
|
||||
}
|
||||
.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.minskin .identity{
|
||||
left:102px;
|
||||
}
|
||||
.player.linked{
|
||||
-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;}
|
||||
/*--------位置(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;
|
||||
-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:190px;
|
||||
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);
|
||||
}
|
||||
}
|
||||
@-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)}}
|
||||
|
|
@ -1,477 +1,3 @@
|
|||
@import '../default/layout.css';
|
||||
.player{
|
||||
width:150px;
|
||||
height:180px;
|
||||
}
|
||||
.player .avatar{
|
||||
width:126px;
|
||||
height:156px;
|
||||
}
|
||||
.player.minskin{
|
||||
width:120px;
|
||||
height:120px;
|
||||
/*zoom:0.9;*/
|
||||
}
|
||||
.player.minskin .avatar{
|
||||
height:96px;
|
||||
width:96px;
|
||||
}
|
||||
.player.minskin .hp{
|
||||
left:86px;
|
||||
}
|
||||
.player.minskin .hp.text{
|
||||
left:86px;
|
||||
}
|
||||
.player.minskin .hp.longlong{
|
||||
left:74px;
|
||||
}
|
||||
.player .avatar2{
|
||||
width:52px;
|
||||
height:52px;
|
||||
top:73px;
|
||||
left:92px;
|
||||
}
|
||||
.player .avatar,
|
||||
.player .avatar2{
|
||||
transition-property:opacity;
|
||||
}
|
||||
.player .wunature{
|
||||
top:137px;
|
||||
}
|
||||
.player .actcount.hp{
|
||||
top: 18px;
|
||||
left: 15px;
|
||||
width: 130px;
|
||||
bottom: auto;
|
||||
right: auto;
|
||||
text-align: left;
|
||||
-webkit-transform: none;
|
||||
}
|
||||
.player.fullskin2 .avatar,
|
||||
.player.fullskin2 .avatar2{
|
||||
width:63px;
|
||||
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.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;
|
||||
-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.minskin .equips{
|
||||
-webkit-transform:scale(0.73);
|
||||
-webkit-transform-origin:bottom 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.text{
|
||||
font-family:'huangcao';
|
||||
font-size:22px;
|
||||
-webkit-transform:none;
|
||||
transition:all 0s;
|
||||
left:114px;
|
||||
}
|
||||
.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.action{
|
||||
bottom:60px;
|
||||
}
|
||||
.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.minskin .identity{
|
||||
left:102px;
|
||||
}
|
||||
.player.linked{
|
||||
-webkit-transform:rotate(-90deg);
|
||||
}
|
||||
.player.linked .equips{
|
||||
-webkit-transform:rotate(90deg) translate(-150px,-6px);
|
||||
-webkit-transform-origin:bottom left;
|
||||
}
|
||||
.player.minskin.linked .equips{
|
||||
-webkit-transform:rotate(90deg) translate(-90px,-6px) scale(0.73);
|
||||
}
|
||||
.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;}
|
||||
/*--------位置(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;
|
||||
-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:190px;
|
||||
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);
|
||||
}
|
||||
}
|
||||
@-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)}}
|
||||
@import 'global.css';
|
||||
@import 'equip.css';
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@ html{
|
|||
background: url('grid.png'),linear-gradient(#333333, #222222) fixed;
|
||||
}
|
||||
#system>div>div,#mebg,.control,.player,.card,.avatar,.avatar2,.button,#window>.dialog.popped,
|
||||
.player.unseen .equips:not(*:empty),.menu{
|
||||
.player.unseen .equips:not(*:empty),.menu,
|
||||
#arena.mobile:not(.chess) .player[data-position='0'] .equips{
|
||||
box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.2) 0 3px 10px;
|
||||
background-image: linear-gradient(#4b4b4b, #464646);
|
||||
border-radius: 8px;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,8 @@ body{
|
|||
display: block;
|
||||
}
|
||||
#system>div>div,#mebg,.control,.player,.card,.avatar,.avatar2,.button,#window>.dialog.popped,
|
||||
.player.unseen .equips:not(*:empty){
|
||||
.player.unseen .equips:not(*:empty),
|
||||
#arena.mobile:not(.chess) .player[data-position='0'] .equips{
|
||||
box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px, rgba(0, 0, 0, 0.2) 0 3px 10px;
|
||||
background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4));
|
||||
border-radius: 8px;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@ html{
|
|||
text-shadow: black 0 0 2px;
|
||||
background: url('grid.png'),linear-gradient(#6c7989, #434b55) fixed;
|
||||
}
|
||||
#system>div>div,#mebg,.control,.player,.card,.avatar,.avatar2,.button,.dialog>.bar,.menu{
|
||||
#system>div>div,#mebg,.control,.player,.card,.avatar,.avatar2,.button,.dialog>.bar,.menu,
|
||||
#arena.mobile:not(.chess) .player[data-position='0'] .equips{
|
||||
box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
|
@ -31,10 +32,11 @@ html{
|
|||
.control .thundertext{
|
||||
color: rgba(29, 63, 137, 1);
|
||||
}
|
||||
.player,.card,.button,.dialog>.bar{
|
||||
.player,.card,.button,.dialog>.bar,
|
||||
#arena.mobile:not(.chess) .player[data-position='0'] .equips{
|
||||
background: url('wood.jpg');
|
||||
}
|
||||
.control,#system>div>div{
|
||||
.control,#system>div>div,.menubutton{
|
||||
background: url('wood2.jpg');
|
||||
color:rgba(77, 60, 51,0.8);
|
||||
text-shadow:none;
|
||||
|
|
|
|||
Loading…
Reference in New Issue