新布局

This commit is contained in:
libccy 2015-10-31 18:14:14 +08:00
parent c6adf17db7
commit 33190c5ffd
11 changed files with 921 additions and 536 deletions

View File

@ -1,3 +1,5 @@
1.4.1
game.print命令在命令输入框中输出结果
修正触屏问题
修正技能bug
新布局

View File

@ -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;
}

View File

@ -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;}

133
layout/mobile/equip.css Normal file
View File

@ -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);
}

130
layout/mobile/layout.css Normal file
View File

@ -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) {
}

110
layout/newlayout/equip.css Normal file
View File

@ -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);
}

368
layout/newlayout/global.css Normal file
View File

@ -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)}}

View File

@ -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';

View File

@ -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;

View File

@ -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;

View File

@ -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;