1816 lines
59 KiB
CSS
Executable File
1816 lines
59 KiB
CSS
Executable File
/*--------标签--------*/
|
|
html{width: 100%;height: 100%;font-size: 16px;cursor: default;overflow: hidden;
|
|
-ms-user-select:none;
|
|
-moz-user-select:none;
|
|
-webkit-user-select:none;
|
|
-webkit-font-smoothing: subpixel-antialiased;
|
|
-webkit-tap-highlight-color:rgba(0,0,0,0);
|
|
background-color: rgb(60,60,60);
|
|
}
|
|
body{
|
|
width: 100%;height: 100%;padding: 0; margin: 0;
|
|
text-rendering:optimizeLegibility;
|
|
font-family:'STHeiti','SimHei','Microsoft JhengHei','Microsoft YaHei','WenQuanYi Micro Hei',Helvetica,Arial,sans-serif
|
|
}
|
|
div{display: inline-block;position: absolute;transition: all 0.5s;}
|
|
table{table-layout: fixed;}
|
|
|
|
/*--------场景--------*/
|
|
#window{
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0px;
|
|
left: 0;
|
|
transition-property:opacity;
|
|
overflow:hidden
|
|
}
|
|
#window.ipad{
|
|
height: calc(100% - 15px);
|
|
top: 15px;
|
|
}
|
|
#window>.tutorial_tap{
|
|
width:30px;
|
|
height:30px;
|
|
border-radius: 100%;
|
|
background: rgba(255,255,255,0.5);
|
|
box-shadow: rgba(255,255,255,0.5) 0 0 5px;
|
|
left:calc(50% - 15px);
|
|
top:calc(50% - 15px);
|
|
position: absolute;
|
|
transition: all 1s;
|
|
}
|
|
#window.shortcutpaused>div:not(.background):not(#shortcut):not(#system):not(#arena):not(.hidden):not(.removing):not(.dialog){opacity: 0.3 !important}
|
|
#window.shortcutpaused>#arena>div:not(#timer):not(.removing):not(.hidden){opacity: 0.3 !important}
|
|
#window.noclick_important *{pointer-events: none !important;}
|
|
#window.noclick_important .noclick_click_important div{pointer-events: auto !important}
|
|
#shortcut{
|
|
width:100%;
|
|
height:100%;
|
|
position:absolute;
|
|
left:0;
|
|
top:0;
|
|
z-index: 10;
|
|
/*background-color: rgba(0, 0, 0, 0.6);*/
|
|
}
|
|
#shortcut>div{
|
|
width: 80px;
|
|
height: 80px;
|
|
padding: 10px;
|
|
margin: 0;
|
|
|
|
overflow: hidden;
|
|
line-height: 80px;
|
|
font-size: 50px;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
letter-spacing: -6px;
|
|
transform: scale(1.3);
|
|
}
|
|
#shortcut>div:not(.menubutton){
|
|
width: 100%;
|
|
height: 80px;
|
|
margin: 0;
|
|
padding: 0;
|
|
left: 0;
|
|
top:0;
|
|
}
|
|
#shortcut>div>span{
|
|
width: 200px;
|
|
left: -63px;
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
#shortcut>div[data-position="1"]{
|
|
left:calc(50% - 50px);
|
|
top: calc(50% - 190px);
|
|
}
|
|
#shortcut.hidden>div[data-position="1"]{
|
|
transform: scale(1) translateY(150px);
|
|
}
|
|
#shortcut>div[data-position="2"]{
|
|
left:calc(50% + 100px);
|
|
top: calc(50% - 40px);
|
|
}
|
|
#shortcut.hidden>div[data-position="2"]{
|
|
transform: scale(1) translateX(-150px);
|
|
}
|
|
#shortcut>div[data-position="3"]{
|
|
left:calc(50% - 50px);
|
|
top: calc(50% + 110px);
|
|
}
|
|
#shortcut.hidden>div[data-position="3"]{
|
|
transform: scale(1) translateY(-150px);
|
|
}
|
|
#shortcut>div[data-position="4"]{
|
|
left:calc(50% - 200px);
|
|
top: calc(50% - 40px);
|
|
}
|
|
#shortcut.hidden>div[data-position="4"]{
|
|
transform: scale(1) translateX(150px);
|
|
}
|
|
#shortcut>div[data-position="5"]{
|
|
left:calc(50% - 50px);
|
|
top: calc(50% - 50px);
|
|
}
|
|
#shortcut.hidden{
|
|
pointer-events: none;
|
|
transition: opacity 0.3s;
|
|
}
|
|
#splash{
|
|
width:100%;
|
|
height: 100%;
|
|
left:0;
|
|
top:0;
|
|
position: absolute;
|
|
text-align: center;
|
|
overflow: visible;
|
|
transition: all 0.3s;
|
|
overflow-x: scroll;
|
|
white-space: nowrap;
|
|
}
|
|
#splash.removing{
|
|
pointer-events: none;
|
|
}
|
|
#splash>div{
|
|
width:100px;
|
|
height:300px;
|
|
top:calc(50% - 150px);
|
|
margin-left:10px;
|
|
margin-right:10px;
|
|
position: relative;
|
|
transition: all 0.8s;
|
|
}
|
|
#splash:not(.touch)>div:hover{
|
|
transform: translateY(-20px);
|
|
}
|
|
#splash>div.clicked{
|
|
transform: translateY(-20px) scale(1.5);
|
|
transition: all 0.3s;
|
|
opacity: 0;
|
|
}
|
|
#splash>div.hidden{
|
|
transform: translateY(-300px) scale(0.5);
|
|
}
|
|
#splash.low_performance>div.hidden{
|
|
transform: scale(0.8);
|
|
}
|
|
#splash.low_performance>div{
|
|
transition: all 0.5s;
|
|
}
|
|
#splash>div>.splashtext{
|
|
font-family: 'huangcao','xinwei';
|
|
font-size: 50px;
|
|
position: absolute;
|
|
right: 7px;
|
|
bottom: 7px;
|
|
z-index: 1;
|
|
}
|
|
#splash>div>.avatar{
|
|
width:86px;
|
|
height:calc(100% - 14px);
|
|
left:7px;
|
|
top:7px;
|
|
background-size:cover;
|
|
}
|
|
#arena[data-global_font='xiaozhuan']{
|
|
font-family: 'xiaozhuan';
|
|
}
|
|
#arena[data-global_font='xinwei']{
|
|
font-family: 'xinwei';
|
|
}
|
|
#arena[data-global_font='huangcao']{
|
|
font-family: 'huangcao','xinwei';
|
|
}
|
|
#arena[data-global_font='xiaozhuan'] #control,
|
|
#arena[data-global_font='xinwei'] #control,
|
|
#arena[data-global_font='huangcao'] #control{
|
|
font-family:'STHeiti','SimHei','Microsoft JhengHei','Microsoft YaHei','WenQuanYi Micro Hei',Helvetica,Arial,sans-serif
|
|
}
|
|
|
|
#arena.chess>#arenalog{
|
|
display: none !important;
|
|
}
|
|
#arenalog{
|
|
width: calc(50% - 210px);
|
|
height: calc(100% - 370px);
|
|
left: calc(50% + 60px);
|
|
top:200px;
|
|
overflow: hidden;
|
|
}
|
|
#arenalog.withdialog{
|
|
opacity: 0.5;
|
|
}
|
|
#arena:not(.oldlayout)>#arenalog[data-position="center"]{
|
|
left: calc(25% + 105px);
|
|
}
|
|
#arena:not(.oldlayout)>#arenalog[data-position="left"]{
|
|
left: 150px;
|
|
}
|
|
#arena.oldlayout>#arenalog{
|
|
top:160px;
|
|
width: calc(50% - 300px);
|
|
height: calc(100% - 325px);
|
|
}
|
|
#arena.oldlayout>#arenalog[data-position="center"]{
|
|
left: calc(25% + 150px);
|
|
}
|
|
#arena.oldlayout>#arenalog[data-position="left"]{
|
|
left: 240px;
|
|
}
|
|
#arenalog>div{
|
|
position: relative;
|
|
display: block;
|
|
width: calc(100% - 20px);
|
|
left:20px;
|
|
}
|
|
/*#arena[data-font_size='14']{
|
|
font-size:14px;
|
|
}
|
|
#arena[data-font_size='16']{
|
|
font-size:16px;
|
|
}
|
|
#arena[data-font_size='18']{
|
|
font-size:18px;
|
|
}
|
|
#arena[data-font_size='20']{
|
|
font-size:20px;
|
|
}*/
|
|
#arena{width:90%;height: 90%;top: calc(5% + 10px);left: 5%;}
|
|
#arena.right:not(.noleft){left:240px;opacity: 0.6;}
|
|
#arena.left:not(.noleft){left:calc(10% - 240px);opacity: 0.6;}
|
|
#arena.top{top:-100%;}
|
|
#arena.paused,#arena.unfocus{opacity: 0.3 !important;}
|
|
#arena.paused2{opacity: 0.1 !important;}
|
|
#arena>.poplayer,
|
|
#window>.poplayer{
|
|
width:100%;
|
|
height:100%;
|
|
position:absolute;
|
|
left:0;
|
|
top:0;
|
|
z-index:20
|
|
}
|
|
#arena.only_dialog>div:not(.dialog):not(#control){
|
|
opacity: 0 !important;
|
|
pointer-events: none !important;
|
|
}
|
|
#arena>canvas{
|
|
z-index: 10;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
}
|
|
#arena.playerfocus>div:not(#timer):not(.playerfocus):not(#chess-container):not(.removing){
|
|
opacity: 0.3 !important;
|
|
}
|
|
#arena.playerfocus #chess>div:not(.playerfocus):not(.removing){
|
|
opacity: 0.3 !important;
|
|
}
|
|
.player:not(.treasure).playerfocus{
|
|
transform: scale(1.1);
|
|
}
|
|
.player.linked:not(.treasure).playerfocus{
|
|
transform: scale(1.1) rotate(-90deg);
|
|
}
|
|
.player.connect>div:not(.avatar):not(.name){
|
|
display: none !important;
|
|
}
|
|
|
|
#arena #me>div>div>.card{
|
|
position: absolute;
|
|
left:8px;
|
|
}
|
|
|
|
.roundarenabutton{
|
|
/*width: 50px;
|
|
height: 50px;*/
|
|
left:180px;
|
|
top:210px;
|
|
position: absolute;
|
|
/*background: rgba(0,0,0,0.2);
|
|
box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px;
|
|
border-radius:100%;*/
|
|
z-index: 7;
|
|
transition-property: opacity;
|
|
}
|
|
#roundmenu>div{
|
|
width: 26px;
|
|
height: 4px;
|
|
background: white;
|
|
position: absolute;
|
|
left: 12px;
|
|
border-radius: 2px;
|
|
box-shadow: black 0 0 2px;
|
|
}
|
|
#roundmenu>div:nth-of-type(even){
|
|
width: 20px;
|
|
left:18px;
|
|
}
|
|
#roundmenu>div:nth-of-type(odd){
|
|
width: 4px;
|
|
}
|
|
|
|
#roundmenu>div:nth-of-type(1),
|
|
#roundmenu>div:nth-of-type(2){
|
|
top:14px;
|
|
}
|
|
#roundmenu>div:nth-of-type(3),
|
|
#roundmenu>div:nth-of-type(4){
|
|
top:23px;
|
|
}
|
|
#roundmenu>div:nth-of-type(5),
|
|
#roundmenu>div:nth-of-type(6){
|
|
top:32px;
|
|
}
|
|
|
|
.linexy{
|
|
transition-property: transform,opacity;
|
|
width: 3px;
|
|
border-radius: 4px;
|
|
z-index: 4;
|
|
box-shadow: rgba(0,0,0,0.5) 0 0 2px;
|
|
transform-origin: top center;
|
|
}
|
|
#me,#mebg{width: 100%;height: 140px;top:calc(100% - 140px);left:0;}
|
|
#mebg{z-index:-1}
|
|
#handcards1,#handcards2{
|
|
width: calc(50% - 140px);height: 127px;padding: 10px;
|
|
text-align: left;
|
|
}
|
|
#handcards1,#handcards2{white-space:nowrap;overflow-x: visible;overflow-y:visible;display: block;}
|
|
#handcards1.scrollh,#handcards2.scrollh{overflow-x: scroll;overflow-y:hidden}
|
|
#handcards1{left: 0;top:calc(100% - 140px);}
|
|
#handcards2{left: calc(50% + 120px);top:calc(100% - 140px);}
|
|
#arena #handcards1>div,
|
|
#arena #handcards2>div{
|
|
height: 100%;
|
|
position: relative;
|
|
margin-left: 2px;
|
|
margin-right: 10px;
|
|
}
|
|
#arena:not(.mobile):not(.single-handcard) #handcards1>div,
|
|
#arena:not(.mobile):not(.single-handcard) #handcards2>div{
|
|
left:-10px;
|
|
}
|
|
#arena.single-handcard #handcards1{width: calc(100% - 120px);left:120px;}
|
|
#arena:not(.mobile).single-handcard #handcards1{width: calc(100% - 140px);}
|
|
#arena.single-handcard #handcards2{display: none;}
|
|
#system{padding: 6px;width: calc(100% - 12px);white-space: nowrap;z-index: 3;pointer-events: none}
|
|
#system>div{height: 100%;position: relative;margin: 0;padding: 0;}
|
|
#system>div>div{pointer-events: auto}
|
|
#system>div:last-child{text-align: right;float:right}
|
|
#system>div>div{position: relative;padding-top: 6px;padding-bottom: 6px;padding-left: 8px;padding-right: 8px;text-align: center;margin:4px;transition: all 0.1s}
|
|
#paused,#click{left: 0;top:0;width: 100%;height: 100%;z-index: 5;}
|
|
#paused2{font-size: 30px;top:calc(50% - 17px);left:calc(50% - 45px);}
|
|
#sidebar,#sidebar2,#sidebar3{
|
|
left: 0;top: 0;width: 200px;height: calc(100% - 40px);text-align: left;padding: 20px;overflow-y: scroll;z-index: 6;
|
|
}
|
|
#sidebar3{text-align:right}
|
|
#paused>#sidebar.right,#sidebar2.right,#sidebar3{left: calc(100% - 240px);}
|
|
#sidebar3.left{left:0;text-align:left;}
|
|
.dialog.popped #sidebar,
|
|
.dialog.popped #sidebar2{padding:0;}
|
|
.dialog .poppedpile{
|
|
width: 100%;
|
|
padding-bottom: 10px;
|
|
}
|
|
.dialog .poppedpile>div{
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
#sidebar>div,#sidebar3>div{margin: 10px;position: relative;display: block;min-height: 5px;}
|
|
#scrollzone1{left: 0;}
|
|
#scrollzone2{left: calc(50% - 140px);}
|
|
#scrollzone3{right: calc(50% - 140px);}
|
|
#scrollzone4{right: 0;}
|
|
.scrollzone{width: 20px;height: 140px;}
|
|
body>.background.paused{
|
|
filter:blur(3px);
|
|
-webkit-filter:blur(3px);
|
|
}
|
|
body>.background{z-index:-5}
|
|
.popup{padding: 5px;}
|
|
.removing,.hidden{opacity: 0 !important;}
|
|
#system>div>div.hidden{opacity:0.5 !important;}
|
|
.transparent{opacity: 0.3 !important;}
|
|
.out{opacity: 0.3 !important;
|
|
filter:blur(3px);
|
|
-webkit-filter:blur(3px)
|
|
}
|
|
.blur{
|
|
filter:blur(3px) !important;
|
|
-webkit-filter:blur(3px) !important;
|
|
}
|
|
.blur2{
|
|
filter:blur(6px) !important;
|
|
-webkit-filter:blur(6px) !important;
|
|
}
|
|
.zoominanim{-webkit-animation:zoomin 0.5s;}
|
|
.zoomin{transform: scale(1.05) !important;}
|
|
.zoomout{transform: scale(0.95) !important;}
|
|
.zoomin2{transform: scale(2) !important;}
|
|
.zoomin3{transform: scale(3) !important;}
|
|
.zoomout2{transform: scale(0.5) !important;}
|
|
.zoomout3{transform: scale(0.3) !important;}
|
|
.rotateleft{transform: rotate(-3deg) !important;}
|
|
.rotateright{transform: rotate(3deg) !important;}
|
|
.exclude{opacity: 0.6 !important;}
|
|
.button.buttonclick{
|
|
animation:buttonclick 0.8s;
|
|
-webkit-animation:buttonclick 0.8s
|
|
}
|
|
.background{width: 100%;height: 100%;left:0;top: 0;margin: 0;padding:0;display: inline-block !important;}
|
|
.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,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;}
|
|
.card>.range{bottom: 5px;right: 5px;text-align: right;}
|
|
.card>.name{top:9px;left: 6px;text-align: center;}
|
|
.card>.name2{display:none;}
|
|
.card>.intro{top:85px;right: 0;}
|
|
div:not(.handcards)>.card>.info,
|
|
.handcards>.card:last-child>.info,
|
|
div:not(.handcards)>.card>.name,
|
|
.handcards>.card:last-child>.name{transform: none !important}
|
|
div:not(.handcards)>.card>.info>span,
|
|
.handcards>.card:last-child>.info>span{display: inline !important}
|
|
.card>.image{
|
|
width: 100%;
|
|
height: 100%;
|
|
position:absolute;
|
|
left:0;
|
|
top:0;
|
|
background-size: cover;
|
|
}
|
|
.card.infohidden>div{
|
|
display:none !important;
|
|
}
|
|
.card.cardflip{
|
|
animation:cardflip 0.3s ease-out;
|
|
animation-fill-mode: none;
|
|
-webkit-animation:cardflip 0.3s ease-out;
|
|
-webkit-animation-fill-mode:none;
|
|
}
|
|
.player .playerjiu{
|
|
animation:game_start 0.5s;
|
|
-webkit-animation:game_start 0.5s;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left:0;
|
|
top:0;
|
|
z-index: 4;
|
|
pointer-events: none;
|
|
background: rgba(255, 0, 0, 0.3);
|
|
}
|
|
.player.playerbright{
|
|
filter:brightness(1.2);
|
|
-webkit-filter:brightness(1.2);
|
|
}
|
|
.player.playerflip{
|
|
animation:playerflip 0.3s ease-out;
|
|
-webkit-animation:playerflip 0.3s ease-out;
|
|
}
|
|
.button.card.button>.intro{top:69px;}
|
|
.buttons.smallzoom{
|
|
zoom:0.65
|
|
}
|
|
.buttons .card.button>.name{
|
|
transform:scale(0.8);
|
|
transform-origin:top left;
|
|
}
|
|
.buttons .card.button>.info{
|
|
transform:scale(0.8);
|
|
transform-origin:top right;
|
|
}
|
|
.buttons .card.button>.addinfo{
|
|
transform:scale(0.8);
|
|
transform-origin:bottom left;
|
|
}
|
|
.dialog .buttons>.button.character,
|
|
.button.character.longcharacter{
|
|
height:108px;
|
|
background-size: cover;
|
|
}
|
|
.card.center{top:calc(50% - 52px);left:calc(50% - 52px);}
|
|
.card>.background{font-size: 80px;height: 80px;padding-top: 14px;text-align: center;}
|
|
.equips>.card>.background{font-size: 36px;height: 36px;padding-top: 3px;}
|
|
#arena.low_performance .player .equips,
|
|
#arena.low_performance .player .name{transition: all 0s}
|
|
.judges>.card>.background,.marks>.card>.background{font-size: 20px;height: 20px;padding-top: 3px;}
|
|
.button.card>.background{font-size: 68px;height: 68px;padding-top: 12px;}
|
|
.card>.background{font-family:'xiaozhuan'}
|
|
.card>.background.tight{letter-spacing: -0.2em}
|
|
.marks>.card>.background.skillmark{font-family:'huangcao','xinwei';padding-top:4px;}
|
|
.marks>.card.overflowmark{
|
|
overflow: visible;
|
|
}
|
|
.marks>div>.markcount.menubutton{
|
|
font-family: 'xinwei';
|
|
font-size: 9px;
|
|
width: 12px;
|
|
height: 12px;
|
|
padding: 0;
|
|
line-height: 14px;
|
|
position: absolute;
|
|
left: 16px;
|
|
top: 14px;
|
|
border-radius: 100%;
|
|
z-index: 1;
|
|
display: block !important;
|
|
}
|
|
/*--------窗口--------*/
|
|
.dialog{text-align: center;z-index:4;transition-property:opacity,background,box-shadow}
|
|
.dialog{width: calc(90% - 420px);height: calc(100% / 3 - 160px / 3 + 120px);}
|
|
.dialog.fullheight{height:calc(100% - 80px) !important;top:40px !important}
|
|
.dialog.fullwidth{left:calc(5% + 60px) !important;width:calc(90% - 120px) !important}
|
|
.dialog.halfleft,.dialog.halfright{width:43% !important;opacity: 1 !important}
|
|
.dialog.halfleft{left:5% !important}
|
|
.dialog.halfright{left:52% !important}
|
|
.dialog{top:calc(100% / 3 - 100px / 3);left: calc(5% + 210px);}
|
|
.dialog.nobutton{width: 400px;left:calc(50% - 200px);bottom:auto !important;min-height: 0px !important;}
|
|
.dialog.nobutton .content>div:last-child{padding-bottom: 8px;}
|
|
#window>.dialog.popped{
|
|
z-index:5;
|
|
width:220px;
|
|
background: rgba(0,0,0,0.2);
|
|
box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px;
|
|
border-radius:6px;
|
|
transition: opacity 0.3s;
|
|
}
|
|
#window.reduce_radius>.dialog.popped{
|
|
border-radius:4px;
|
|
}
|
|
#window>.dialog.popped>.bar{
|
|
display:none !important;
|
|
}
|
|
#window>.dialog.popped>.content-container{
|
|
height:100%;
|
|
top:0;
|
|
}
|
|
.content>table{width: 100%}
|
|
.content>div{position: relative;margin: 8px;}
|
|
.content>.config{height: 20px;line-height:20px;}
|
|
.content>.config.removing{margin-top:-28px;}
|
|
.config>.configinfo{margin-top:28px;}
|
|
.config>.configinfo>ul{margin:0;padding-left:20px}
|
|
.config>.configinfo>.dashedline{
|
|
border-bottom: 1px dashed white;
|
|
display: block;
|
|
height: 0;
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.content>.placeholder{display:block;height: 5px;}
|
|
.content>.placeholder.slim{margin:1px;}
|
|
.content>.placeholder.removing{margin-top: -13px;}
|
|
.content{display: block;width: 100%;}
|
|
.dialog:not(.popped) .content{
|
|
vertical-align: top;
|
|
}
|
|
.dialog:not(.popped) .content>.config{
|
|
width:200px;
|
|
left:0;
|
|
margin-left: 20px;
|
|
display:inline-block;
|
|
}
|
|
.dialog:not(.popped) .content>.config>.switcher{
|
|
position: absolute;
|
|
}
|
|
.dialog .content>.volumn{
|
|
margin:0;
|
|
font-family: 'xinwei';
|
|
}
|
|
.dialog .content>.volumn>span{
|
|
margin-left:2px;
|
|
margin-right:2px;
|
|
}
|
|
.config{text-align: left;width: 90%;left: 5%;display: block;overflow: hidden;border-radius: 2px;}
|
|
.config>div{text-align: left;left: 0;}
|
|
.config>div>div{position: relative;padding-right: 10px;height:20px}
|
|
.dialog>.content>.config{width:300px;left:calc(50% - 150px);}
|
|
.toggle{right: 16px;left: auto !important;min-width: 16px;text-align: right !important;}
|
|
.switcher{width: 88%;position: relative;}
|
|
.dialog.popped .caption{transition: all 0s;}
|
|
.caption{padding-top: 8px;font-size: 20px;display: block;}
|
|
.caption:only-child{padding-bottom:8px;}
|
|
.caption:not(.normal)>div{text-align: left;display: block;width: 100%;}
|
|
.caption>div{position: relative;}
|
|
.caption>.text{font-size:16px;text-align:left}
|
|
.caption>.text.center{text-align:center}
|
|
.caption>.text.chat{word-break: break-all;margin-bottom: 3px;margin-left: 10px;width: calc(100% - 20px)}
|
|
.caption>.text.textlink{margin-left: 10px;}
|
|
.caption>.text.textlink:not(*:first-child){margin-top: 6px;}
|
|
.caption>.text.textlink:hover{text-decoration: underline;}
|
|
.caption>div>div{font-size: 16px;position: relative;width: calc(100% - 70px);vertical-align: top;margin: 0;padding: 0;}
|
|
.skill{left: 0 !important;width: 70px !important;}
|
|
.caption>.ctext{text-align:center;font-size:16px;}
|
|
.button.character,.button.card{width: 90px;height: 90px;position: relative;margin: 6px;}
|
|
.button.card{font-size: 14px;}
|
|
.button.character>.name{left:5px;top:22px;}
|
|
.button.character>.hp{left:5px;top:3px;}
|
|
.button.character>.hp.text{
|
|
top:8px;
|
|
left:6px;
|
|
font-family:'huangcao','xinwei';
|
|
font-size:20px;
|
|
letter-spacing:3px;
|
|
}
|
|
.button.nodisplay{display: none;}
|
|
.dialog .content>.nodisplay{display: none;}
|
|
.button.character>.intro{top:71px;left:0;}
|
|
.button.character>.identity{top:-6px;left:72px;}
|
|
/*--------确认--------*/
|
|
#control{text-align: center;z-index: 5;top: calc(200% / 3);left: calc(5% + 240px);width: calc(90% - 480px);pointer-events: none}
|
|
#control>*{pointer-events: auto;}
|
|
#control.nozoom>div{transition-property: opacity}
|
|
.control{padding-top: 2px;padding-bottom: 2px;padding-left: 4px;padding-right: 4px;}
|
|
.control{font-size: 18px;white-space: nowrap;overflow: hidden;opacity:0}
|
|
/*.control:not(.nozoom){width:0}*/
|
|
.control.removing.removing2{transform: scale(0.2)}
|
|
.control>div{position: relative;padding: 3px;margin: 0}
|
|
#control>div{
|
|
position: absolute;
|
|
left: 50%;
|
|
}
|
|
/*--------角色--------*/
|
|
.player>.avatar>.action{
|
|
margin: 5px;
|
|
font-family: 'xinwei';
|
|
font-size: 20px;
|
|
letter-spacing: -2px;
|
|
right:5px;
|
|
text-align: right;
|
|
}
|
|
.player>.avatar.hidden,
|
|
.player>.avatar2.hidden{
|
|
pointer-events: none !important;
|
|
}
|
|
.player>.avatar>.action:not(.freecolor){
|
|
text-shadow: black 0 0 1px, rgba(10, 155, 67, 1) 0 0 5px, rgba(10, 155, 67, 1) 0 0 10px;
|
|
}
|
|
.player:not(.current_action) .avatar>.action{opacity: 0}
|
|
#arena.chess:not(.selecting) .player.current_action .avatar>.action{opacity: 0}
|
|
.player.controlfakeme{width:100px;height:120px;top:calc(100% - 140px)}
|
|
.player.controlfakeme>.avatar{width: 100%;height: 100%;box-shadow: none;left: 0;top: 0}
|
|
.player{z-index: 2;width: 240px;height: 120px;}
|
|
.player.minskin{width:120px;}
|
|
.player.replaceme{
|
|
animation:replaceme 0.5s;
|
|
-webkit-animation:replaceme 0.5s
|
|
}
|
|
.player.replaceenemy{
|
|
animation:replaceenemy 0.5s;
|
|
-webkit-animation:replaceenemy 0.5s
|
|
}
|
|
.player>div{z-index: 2;}
|
|
.player.dead,.player.likedead{z-index: 1;
|
|
filter:grayscale(1);
|
|
-webkit-filter:grayscale(1);
|
|
}
|
|
|
|
#arena[data-name_font='xiaozhuan'] .player>.name,
|
|
#arena[data-name_font='xiaozhuan'] .button.character>.name{
|
|
font-family: 'xiaozhuan';
|
|
}
|
|
#arena[data-name_font='xinwei'] .player>.name,
|
|
#arena[data-name_font='xinwei'] .button.character>.name{
|
|
font-family: 'xinwei';
|
|
}
|
|
#arena[data-name_font='huangcao'] .player>.name,
|
|
#arena[data-name_font='huangcao'] .button.character>.name{
|
|
font-family: 'huangcao','xinwei';
|
|
}
|
|
|
|
.player>.nameol{
|
|
left:0;
|
|
top:13px;
|
|
width: 100%;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
/*opacity: 0;*/
|
|
}
|
|
.player:hover>.nameol{
|
|
opacity: 1;
|
|
}
|
|
.player>.name{left: 16px;top:24px;font-size:20px;font-family: 'xinwei';}
|
|
.player>.name.name2{left:81px}
|
|
#arena.slim_player .player>.name{
|
|
left:13px;
|
|
top:21px;
|
|
}
|
|
#arena.slim_player .player>.name.name2{
|
|
left:78px
|
|
}
|
|
|
|
#arena .player.minskin>.name,
|
|
#arena.slim_player .player.minskin>.name{
|
|
top:17px;
|
|
}
|
|
#arena .player.linked.minskin>.name,
|
|
#arena.slim_player .player.linked.minskin>.name{
|
|
transform: rotate(90deg) translate(81px,-66px);
|
|
}
|
|
|
|
.button.character>.name{
|
|
font-family: 'xinwei'
|
|
}
|
|
.player>.intro{top:87px;left: 18px;}
|
|
.player>.damage,
|
|
#window>.damage{
|
|
font-family: 'huangcao','xinwei';
|
|
font-size:72px;
|
|
width: 100%;
|
|
text-align: center;
|
|
top:calc(50% - 36px);
|
|
left:0;
|
|
opacity: 0;
|
|
transform:scale(0.7);
|
|
white-space: nowrap;
|
|
z-index: 5;
|
|
pointer-events: none;
|
|
}
|
|
#window>.damage{
|
|
transform:scale(2);
|
|
font-size: 120px;
|
|
}
|
|
.damage.normal-font{
|
|
font-family: xinwei;
|
|
font-size: 30px;
|
|
top: calc(50% - 15px);
|
|
}
|
|
.player.minskin>.damage.normal-font{
|
|
font-size: 26px;
|
|
top: calc(50% - 13px);
|
|
}
|
|
.player[data-position='0']>.damage.dieidentity,
|
|
.player:not(.dead)>.damage.dieidentity{
|
|
opacity: 0 !important
|
|
}
|
|
.player>.damage.dieidentity{
|
|
transition-property: opacity;
|
|
}
|
|
.player>.cardeffect{
|
|
font-family: 'huangcao','xinwei';
|
|
font-size:108px;
|
|
width: 100%;
|
|
text-align: center;
|
|
top:calc(50% - 54px);
|
|
left:0;
|
|
animation:cardeffect 1s;
|
|
-webkit-animation:cardeffect 1s;
|
|
|
|
animation-fill-mode: forwards;
|
|
-webkit-animation-fill-mode: forwards;
|
|
}
|
|
.player>.damage.damageadded,
|
|
#window>.damage.damageadded{
|
|
opacity: 1;
|
|
transform:scale(1);
|
|
}
|
|
.player.linked>.damage{
|
|
transform:scale(0.7) rotate(90deg);
|
|
}
|
|
.player.linked>.damage.damageadded{
|
|
transform:scale(1) rotate(90deg);
|
|
}
|
|
.avatar{width: 100px;height: 100px;left: 10px;top: 10px;overflow: hidden;}
|
|
.avatar2{width: 42px;height: 42px;top: 70px;left: 70px;overflow: hidden;}
|
|
.equips{width: 96px;height: 96px;right: 14px;top:12px;}
|
|
.equips>div{width: 42px;height: 42px;margin: 0;position: absolute;}
|
|
.equips>.equip1{top: 0;left: 0;}
|
|
.equips>.equip2{top: 0;right: 0;}
|
|
.equips>.equip3{bottom: 0;left: 0;}
|
|
.equips>.equip4{bottom: 0;right: 0;}
|
|
.equips>.equip5{top: calc(50% - 21px);left:calc(50% - 21px);border-radius: 21px;z-index: 1}
|
|
.equips>div>div:not(.image),.judges>div>div:not(.image),.marks>div>div:not(.image){display: none;}
|
|
.equips>div>.image,.judges>div>.image,.marks>div>.image{width:120%;height:120%;left:-20%;top:-20%;}
|
|
.equips>div:hover>.info{display: inline-block;
|
|
animation:equip_hover 1s;
|
|
-webkit-animation:equip_hover 1s;
|
|
left: 0;right: auto;width: 42px;text-align: center;}
|
|
.equips>div:hover>.background {
|
|
animation:equip_hover2 1s;
|
|
animation-fill-mode: forwards;
|
|
-webkit-animation:equip_hover2 1s;
|
|
-webkit-animation-fill-mode: forwards;
|
|
}
|
|
.judges{height: 24px;left: 14px;top: -18px;}
|
|
.marks{height: 24px;left: 14px;top: 112px;}
|
|
.player>.marks{z-index: 4}
|
|
.judges>div,.marks>div{width: 24px;height: 24px;margin-left: 0;margin-top: 0;margin-right: 4px;opacity: 1;}
|
|
.hp{left: 18px;top:14px;width: 72px;line-height: 14px;text-align: left;}
|
|
.hp.text{top:18px;}
|
|
|
|
.hp>div{
|
|
width: 8px;height: 8px;margin-left: 3px;position: relative;
|
|
border-radius: 100%;
|
|
box-shadow: rgba(0,0,0,0.2) 1px -1px 2px inset,rgba(255,255,255,0.15) -1px 1px 5px inset;
|
|
position: relative;
|
|
filter: brightness(1.5);
|
|
-webkit-filter: brightness(1.5);
|
|
transition: all 0.5s;
|
|
}
|
|
.button .hp>div{
|
|
width:6px;
|
|
height:6px;
|
|
background: white;
|
|
box-shadow:0px 1px 1px rgba(0,0,0,0.5);
|
|
border:1px solid #fff;
|
|
}
|
|
.hp[data-condition="high"]>div:not(.lost){
|
|
background: rgba(57, 123, 4,1);
|
|
border: 1px solid rgba(39, 79, 7, 1);
|
|
}
|
|
.hp[data-condition="mid"]>div:not(.lost){
|
|
background: rgba(166, 140, 6,1);
|
|
border: 1px solid rgba(79, 64, 7, 1);
|
|
}
|
|
.hp[data-condition="low"]>div:not(.lost){
|
|
background: rgba(148, 27, 27,1);
|
|
border: 1px solid rgba(79, 7, 7, 1);
|
|
}
|
|
.hp.actcount>div:not(.lost){
|
|
background: rgba(63, 119, 173,1);
|
|
border: 1px solid rgba(31, 82, 131, 1);
|
|
}
|
|
.hp.actcount>div.overflow:not(.lost){
|
|
background: rgb(154, 154, 154);
|
|
border: 1px solid rgb(109, 109, 109);
|
|
}
|
|
.hp.actcount.overflow2>div.overflow:not(.lost){
|
|
background: rgb(173, 129, 63);
|
|
border: 1px solid rgb(131, 109, 31);
|
|
}
|
|
.hp.actcount>.lost{
|
|
background: rgba(63, 119, 173,1);
|
|
border: 1px solid rgba(31, 82, 131, 1);
|
|
filter: grayscale(1);
|
|
-webkit-filter: grayscale(1);
|
|
}
|
|
.hp>.lost{
|
|
background: rgba(57, 123, 4,1);
|
|
border: 1px solid rgba(39, 79, 7, 1);
|
|
filter: grayscale(1);
|
|
-webkit-filter: grayscale(1);
|
|
}
|
|
.hp.text[data-condition="low"]{
|
|
text-shadow: black 0 0 1px,rgba(232, 53, 53,1) 0 0 2px,rgba(232, 53, 53,1) 0 0 5px,rgba(232, 53, 53,1) 0 0 10px
|
|
}
|
|
.hp.text[data-condition="mid"]{
|
|
text-shadow: black 0 0 1px,rgba(255, 203, 0,1) 0 0 2px,rgba(255, 203, 0,1) 0 0 5px,rgba(255, 203, 0,1) 0 0 10px
|
|
}
|
|
.hp.text[data-condition="high"]{
|
|
text-shadow: rgba(57, 123, 4,1) 0 0 2px,rgba(57, 123, 4,1) 0 0 5px,rgba(57, 123, 4,1) 0 0 10px
|
|
}
|
|
|
|
|
|
|
|
|
|
/*.hp>div{width: 6px;height: 6px;margin-left: 3px;position: relative;}*/
|
|
.count.p2{right: 174px;}
|
|
.count{right: 140px;top:86px;text-align: right;font-size: 14px;}
|
|
.player.minskin .count{right:20px;}
|
|
.identity{left: 90px;top:5px;}
|
|
.identity{text-align: center;width: 22px;height: 22px;}
|
|
.identity>div{position: relative;top: 2px;}
|
|
.unseen>.avatar,.unseen>.name:not(.name2),
|
|
.unseen2>.avatar2,.unseen2>.name2{opacity: 0 !important;}
|
|
.player[data-position='0'].unseen>.avatar,
|
|
.player[data-position='0'].unseen2>.avatar2,
|
|
.player[data-position='0'].unseen>.name:not(.name2):not(.name_seat),
|
|
.player[data-position='0'].unseen2>.name2{opacity: 0.2 !important}
|
|
.player>.name_seat{
|
|
opacity: 0;
|
|
}
|
|
.player:not([data-position='0']).unseen.unseen2>.name_seat{
|
|
opacity: 1 !important;
|
|
}
|
|
.linked>.avatar,.linked>.avatar2{transform:rotate(-90deg);}
|
|
.linked>.avatar2{top: 5px;}
|
|
.linked>.identity{top: 88px;}
|
|
.linked>.count{right: 154px;}
|
|
.acted>.identity{transform:rotate(180deg);}
|
|
|
|
/*--------位置(8人)------*/
|
|
[data-number='8']>.player[data-position='1']{top:calc(200% / 3 - 90px);left:calc(100% - 240px);}
|
|
[data-number='8']>.player[data-position='2']{top:calc(100% / 3 - 40px);left:calc(100% - 240px);}
|
|
[data-number='8']>.player[data-position='3']{top:10px;left:calc(75% - 60px);}
|
|
[data-number='8']>.player[data-position='4']{top:0;left:calc(50% - 120px);}
|
|
[data-number='8']>.player[data-position='5']{top:10px;left:calc(25% - 180px);}
|
|
[data-number='8']>.player[data-position='6']{top:calc(100% / 3 - 40px);left:0;}
|
|
[data-number='8']>.player[data-position='7']{top:calc(200% / 3 - 90px);left:0;}
|
|
[data-number='8']>.card[data-position='1']{top:calc(200% / 3 - 90px);left:calc(100% - 240px);}
|
|
[data-number='8']>.card[data-position='2']{top:calc(100% / 3 - 40px);left:calc(100% - 240px);}
|
|
[data-number='8']>.card[data-position='3']{top:10px;left:calc(75% - 60px);}
|
|
[data-number='8']>.card[data-position='4']{top:0;left:calc(50% - 52px);}
|
|
[data-number='8']>.card[data-position='5']{top:10px;left:calc(25% - 60px);}
|
|
[data-number='8']>.card[data-position='6']{top:calc(100% / 3 - 40px);left:120px;}
|
|
[data-number='8']>.card[data-position='7']{top:calc(200% / 3 - 90px);left:120px;}
|
|
[data-number='8']>.popup[data-position='1']{top:calc(200% / 3 - 78px);left:calc(100% - 270px);}
|
|
[data-number='8']>.popup[data-position='2']{top:calc(100% / 3 - 28px);left:calc(100% - 270px);}
|
|
[data-number='8']>.popup[data-position='3']{top:140px;left:calc(75% - 80px);}
|
|
[data-number='8']>.popup[data-position='4']{top:130px;left:calc(50% - 106px);}
|
|
[data-number='8']>.popup[data-position='5']{top:140px;left:calc(25% + 60px);}
|
|
[data-number='8']>.popup[data-position='6']{top:calc(100% / 3 - 28px);left:250px;}
|
|
[data-number='8']>.popup[data-position='7']{top:calc(200% / 3 - 78px);left:250px;}
|
|
/*--------位置(7人)------*/
|
|
[data-number='7']>.player[data-position='1']{top:calc(200% / 3 - 90px);left:calc(100% - 240px);}
|
|
[data-number='7']>.player[data-position='2']{top:calc(100% / 3 - 40px);left:calc(100% - 240px);}
|
|
[data-number='7']>.player[data-position='3']{top:10px;left:calc(75% - 180px);}
|
|
[data-number='7']>.player[data-position='4']{top:10px;left:calc(25% - 60px);}
|
|
[data-number='7']>.player[data-position='5']{top:calc(100% / 3 - 40px);left:0;}
|
|
[data-number='7']>.player[data-position='6']{top:calc(200% / 3 - 90px);left:0;}
|
|
[data-number='7']>.card[data-position='1']{top:calc(200% / 3 - 90px);left:calc(100% - 240px);}
|
|
[data-number='7']>.card[data-position='2']{top:calc(100% / 3 - 40px);left:calc(100% - 240px);}
|
|
[data-number='7']>.card[data-position='3']{top:10px;left:calc(75% - 180px);}
|
|
[data-number='7']>.card[data-position='4']{top:10px;left:calc(25% + 60px);}
|
|
[data-number='7']>.card[data-position='5']{top:calc(100% / 3 - 40px);left:120px;}
|
|
[data-number='7']>.card[data-position='6']{top:calc(200% / 3 - 90px);left:120px;}
|
|
[data-number='7']>.popup[data-position='1']{top:calc(200% / 3 - 78px);left:calc(100% - 270px);}
|
|
[data-number='7']>.popup[data-position='2']{top:calc(100% / 3 - 28px);left:calc(100% - 270px);}
|
|
[data-number='7']>.popup[data-position='3']{top:140px;left:calc(75% - 210px);}
|
|
[data-number='7']>.popup[data-position='4']{top:140px;left:calc(25% + 180px);}
|
|
[data-number='7']>.popup[data-position='5']{top:calc(100% / 3 - 28px);left:250px;}
|
|
[data-number='7']>.popup[data-position='6']{top:calc(200% / 3 - 78px);left:250px;}
|
|
/*--------位置(6人)------*/
|
|
[data-number='6']>.player[data-position='1']{top:calc(200% / 3 - 325px / 3);left:calc(100% - 240px);}
|
|
[data-number='6']>.player[data-position='2']{top:calc(100% / 3 - 230px / 3);left:calc(100% - 240px);}
|
|
[data-number='6']>.player[data-position='3']{top:0;left:calc(50% - 120px);}
|
|
[data-number='6']>.player[data-position='4']{top:calc(100% / 3 - 230px / 3);left:0;}
|
|
[data-number='6']>.player[data-position='5']{top:calc(200% / 3 - 325px / 3);left:0;}
|
|
[data-number='6']>.card[data-position='1']{top:calc(200% / 3 - 325px / 3);left:calc(100% - 240px);}
|
|
[data-number='6']>.card[data-position='2']{top:calc(100% / 3 - 230px / 3);left:calc(100% - 240px);}
|
|
[data-number='6']>.card[data-position='3']{top:0;left:calc(50% - 52px);}
|
|
[data-number='6']>.card[data-position='4']{top:calc(100% / 3 - 230px / 3);left:120px;}
|
|
[data-number='6']>.card[data-position='5']{top:calc(200% / 3 - 325px / 3);left:120px;}
|
|
[data-number='6']>.popup[data-position='1']{top:calc(200% / 3 - 289px / 3);left:calc(100% - 270px);}
|
|
[data-number='6']>.popup[data-position='2']{top:calc(100% / 3 - 194px / 3);left:calc(100% - 270px);}
|
|
[data-number='6']>.popup[data-position='3']{top:130px;left:calc(50% - 106px);}
|
|
[data-number='6']>.popup[data-position='4']{top:calc(100% / 3 - 194px / 3);left:250px;}
|
|
[data-number='6']>.popup[data-position='5']{top:calc(200% / 3 - 289px / 3);left:250px;}
|
|
/*--------位置(5人)------*/
|
|
[data-number='5']>.player[data-position='1']{top:calc(150% / 3 - 65px);left:calc(100% - 240px);}
|
|
[data-number='5']>.player[data-position='2']{top:10px;left:calc(75% - 120px);}
|
|
[data-number='5']>.player[data-position='3']{top:10px;left:calc(25% - 120px);}
|
|
[data-number='5']>.player[data-position='4']{top:calc(150% / 3 - 65px);left:0;}
|
|
[data-number='5']>.card[data-position='1']{top:calc(150% / 3 - 65px);left:calc(100% - 240px);}
|
|
[data-number='5']>.card[data-position='2']{top:10px;left:calc(75% - 120px);}
|
|
[data-number='5']>.card[data-position='3']{top:10px;left:calc(25% - 0px);}
|
|
[data-number='5']>.card[data-position='4']{top:calc(150% / 3 - 65px);left:120px;}
|
|
[data-number='5']>.popup[data-position='1']{top:calc(150% / 3 - 53px);left:calc(100% - 270px);}
|
|
[data-number='5']>.popup[data-position='2']{top:140px;left:calc(75% - 150px);}
|
|
[data-number='5']>.popup[data-position='3']{top:140px;left:calc(25% + 120px);}
|
|
[data-number='5']>.popup[data-position='4']{top:calc(150% / 3 - 53px);left:250px;}
|
|
/*--------位置(4人)------*/
|
|
[data-number='4']>.player[data-position='1']{top:calc(100% / 3 - 40px);left:calc(100% - 240px);}
|
|
[data-number='4']>.player[data-position='2']{top:0;left:calc(50% - 120px);}
|
|
[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 - 40px);left:calc(100% - 240px);}
|
|
[data-number='4']>.card[data-position='2']{top:0;left:calc(50% - 52px);}
|
|
[data-number='4']>.card[data-position='3']{top:calc(100% / 3 - 40px);left:120px;}
|
|
[data-number='4']>.popup[data-position='1']{top:calc(100% / 3 - 28px);left:calc(100% - 270px);}
|
|
[data-number='4']>.popup[data-position='2']{top:130px;left:calc(50% - 106px);}
|
|
[data-number='4']>.popup[data-position='3']{top:calc(100% / 3 - 28px);left:250px;}
|
|
/*--------位置(3人)------*/
|
|
[data-number='3']>.player[data-position='1']{top:10px;left:calc(75% - 60px);}
|
|
[data-number='3']>.player[data-position='2']{top:10px;left:calc(25% - 180px);}
|
|
[data-number='3']>.card[data-position='1']{top:10px;left:calc(75% - 60px);}
|
|
[data-number='3']>.card[data-position='2']{top:10px;left:calc(25% - 60px);}
|
|
[data-number='3']>.popup[data-position='1']{top:140px;left:calc(75% - 80px);}
|
|
[data-number='3']>.popup[data-position='2']{top:140px;left:calc(25% + 60px);}
|
|
/*--------位置(2人)------*/
|
|
[data-number='2']>.player[data-position='1']{top:0;left:calc(50% - 120px);}
|
|
[data-number='2']>.card[data-position='1']{top:0;left:calc(50% - 52px);}
|
|
[data-number='2']>.popup[data-position='1']{top:130px;left:calc(50% - 106px);}
|
|
/*--------位置(1人)------*/
|
|
.player[data-position='0']{top:calc(100% - 130px);left:calc(50% - 120px);}
|
|
.card[data-position='0']{top:calc(100% - 130px);left:calc(50% - 52px);}
|
|
.popup[data-position='0']{top:calc(100% - 176px);left:calc(50% - 106px);}
|
|
|
|
#window>.player.connect[data-position='0']{left:calc(25% - 180px);top:calc(300% / 7 - 155px);}
|
|
#window>.player.connect[data-position='1']{left:calc(50% - 120px);top:calc(300% / 7 - 155px);}
|
|
#window>.player.connect[data-position='2']{left:calc(75% - 60px);top:calc(300% / 7 - 155px);}
|
|
#window>.player.connect[data-position='3']{left:calc(25% - 180px);top:calc(400% / 7 - 75px);}
|
|
#window>.player.connect[data-position='4']{left:calc(75% - 60px);top:calc(400% / 7 - 75px);}
|
|
#window>.player.connect[data-position='5']{left:calc(25% - 180px);top:calc(500% / 7 + 5px);}
|
|
#window>.player.connect[data-position='6']{left:calc(50% - 120px);top:calc(500% / 7 + 5px);}
|
|
#window>.player.connect[data-position='7']{left:calc(75% - 60px);top:calc(500% / 7 + 5px);}
|
|
|
|
.connectbutton{
|
|
top:calc(400% / 7 - 35px);
|
|
width:130px;
|
|
left:calc(50% - 65px);
|
|
}
|
|
|
|
|
|
/*--------动画--------*/
|
|
.start,.equips>.card,.judges>.card,.marks>.card,.popup{
|
|
animation: game_start 0.5s;
|
|
-webkit-animation: game_start 0.5s;
|
|
}
|
|
.start2{
|
|
animation: card_start 0.5s;
|
|
-webkit-animation: card_start 0.5s;
|
|
}
|
|
.dialog.popped{
|
|
animation: dialog_start2 0.3s;
|
|
-webkit-animation: dialog_start2 0.3s;
|
|
}
|
|
/*.dialog.removing{top: 100px}*/
|
|
.card.drawing{
|
|
animation: drawing 1s;
|
|
animation-fill-mode: forwards;
|
|
-webkit-animation: drawing 1s;
|
|
-webkit-animation-fill-mode: forwards;
|
|
}
|
|
.card.thrown{position: absolute;opacity: 1;margin:0;z-index: 3;}
|
|
#arena>.card.thrown{pointer-events: none}
|
|
#arena.thrownhighlight>.card.thrown:not(.thrownhighlight){
|
|
opacity: 0.5;
|
|
transform:scale(0.95);
|
|
/*-webkit-filter:blur(3px);*/
|
|
}
|
|
.card.start{
|
|
animation: card_start 0.5s;
|
|
-webkit-animation: card_start 0.5s;
|
|
}
|
|
.judgestart{
|
|
animation: card_judgestart 1s;
|
|
-webkit-animation: card_judgestart 1s;
|
|
}
|
|
#me>div>div>.card.start{
|
|
animation: card_start2 0.5s;
|
|
-webkit-animation: card_start2 0.5s;
|
|
}
|
|
#me>div>div>.card.drawinghidden{
|
|
opacity: 0;
|
|
transform: scale(0.2) !important;
|
|
}
|
|
|
|
#me>.fakeme.avatar{
|
|
width:120px;
|
|
height:120px;
|
|
border-radius:8px;
|
|
top:10px;
|
|
left:10px;
|
|
background-size:cover;
|
|
}
|
|
#window.reduce_radius #me>.fakeme.avatar{
|
|
border-radius:4px;
|
|
}
|
|
|
|
.card.removing{transform:scale(0);}
|
|
#me>div>div>.card.removing{margin-left: -52px;margin-right: -52px;}
|
|
.card.thrown.removing{width: 104px;height: 104px;transform:none}
|
|
#sidebar.sidebar{
|
|
animation:sidebar 0.5s;
|
|
-webkit-animation:sidebar 0.5s
|
|
}
|
|
.button.zoom{
|
|
animation:zoom_button 0.5s;
|
|
-webkit-animation:zoom_button 0.5s
|
|
}
|
|
.content>.config.start{
|
|
animation:config 0.5s;
|
|
-webkit-animation:config 0.5s;
|
|
}
|
|
.flash{
|
|
animation:flash 1s;
|
|
-webkit-animation:flash 1s;
|
|
}
|
|
.flip{
|
|
animation:flip 1s;
|
|
-webkit-animation:flip 1s;
|
|
}
|
|
/*--------样式--------*/
|
|
#arena.selecting:not(.video) .player[data-position='0'] .card:not(.selectable)>.background,
|
|
#arena.selecting:not(.video) .player[data-position='0'] .card:not(.selectable)>.image,
|
|
#arena.selecting:not(.video) .player[data-position='0'] .card:not(.selectable)>.name,
|
|
#arena.selecting:not(.video) .player[data-position='0'] .card:not(.selectable)>.name2,
|
|
#arena.selecting:not(.video) .player[data-position='0'] .card:not(.selectable)>.info,
|
|
#arena.selecting:not(.video) .player[data-position='0'] .card:not(.selectable)>.range,
|
|
#arena.selecting:not(.video) #me .card:not(.selectable)>.background,
|
|
#arena.selecting:not(.video) #me .card:not(.selectable)>.image,
|
|
#arena.selecting:not(.video) #me .card:not(.selectable)>.name,
|
|
#arena.selecting:not(.video) #me .card:not(.selectable)>.name2,
|
|
#arena.selecting:not(.video) #me .card:not(.selectable)>.info,
|
|
#arena.selecting:not(.video) #me .card:not(.selectable)>.range,
|
|
#arena.selecting:not(.video) #me .card:not(.selectable)>.addinfo,
|
|
#arena.selecting:not(.video) .dialog:not(.noselect) .button:not(.selectable):not(.noclick),
|
|
.dead,.likedead{opacity: 0.6;}
|
|
.unselectable:not(.selected):not(.removing){opacity: 0.6 !important}
|
|
.unselectable2{opacity: 0.4 !important}
|
|
.mark>.background{opacity: 1 !important;}
|
|
#arena.selecting:not(.video) #me .card:not(.selectable){
|
|
opacity:0.8
|
|
}
|
|
|
|
.card.selectable>.background,
|
|
.card.selectable>.name,
|
|
.card.selectable>.name2,
|
|
.card.selectable>.info,
|
|
.card.selectable>.range,
|
|
.button.selectable{opacity: 1;}
|
|
.card{color: rgba(0,0,0,0.3);text-shadow:none;}
|
|
.fire{color: rgba(255,0,0,0.3);}
|
|
.thunder{color: rgba(0,80,255,0.3);}
|
|
.poison{color: rgba(30, 133, 51,0.4);}
|
|
.brown{color: rgba(133, 92, 30, 0.4);}
|
|
.purple{color: rgba(177, 62, 177,0.4);}
|
|
.player,.button.character{color: white;text-shadow: black 0 0 2px;}
|
|
.turnedover>div{opacity: 0.3;}
|
|
.intro:not(.showintro){opacity: 0;display:none !important}
|
|
.intro.showintro{white-space: nowrap}
|
|
div:hover>.intro{opacity: 1;}
|
|
/*.hp>div{background: white;box-shadow:0px 1px 1px rgba(0,0,0,0.5);border:1px solid #fff;border-radius: 8px;}*/
|
|
/*.hp>.lost{background: rgba(128,128,128,0.3);}*/
|
|
.identity{border-radius: 12px;border:1px solid rgba(0, 0, 0, 0.3);}
|
|
.player .identity{z-index:4}
|
|
.info{border-radius: 10px;}
|
|
|
|
.dialog>.bar{
|
|
position:absolute;
|
|
width:100%;
|
|
height:5px;
|
|
left:0;
|
|
opacity:0;
|
|
}
|
|
.dialog>.bar.top{
|
|
top:0;
|
|
}
|
|
.dialog>.bar.bottom{
|
|
bottom:0;
|
|
}
|
|
.dialog>.content-container{
|
|
width:100%;
|
|
height:calc(100% - 0px);
|
|
/*height:calc(100% - 5px);*/
|
|
left:0;
|
|
top:0px;
|
|
/*top:5px;*/
|
|
position:absolute;
|
|
overflow:scroll;
|
|
}
|
|
/*.dialog.scroll1>.bar.top{opacity:1}
|
|
.dialog.scroll2>.bar.bottom{opacity:1}*/
|
|
.dialog.slim{top:300px;bottom:auto;min-height: none}
|
|
/*.dialog.scroll1{box-shadow:0 -10px 10px -9px rgba(0,0,0,0.1),0 -10px 0 -9px rgba(0,0,0,0.05);}
|
|
.dialog.scroll2{box-shadow:0 10px 10px -9px rgba(0,0,0,0.1),0 10px 0 -9px rgba(0,0,0,0.05)}
|
|
.dialog.scroll1.scroll2{box-shadow:0 -10px 10px -9px rgba(0,0,0,0.1),0 -10px 0 -9px rgba(0,0,0,0.05),
|
|
0 10px 10px -9px rgba(0,0,0,0.1),0 10px 0 -9px rgba(0,0,0,0.05);}*/
|
|
.selected,.target{/*transform: scale(1.05);*/}
|
|
/*.player.target{-webkit-filter:brightness(1.2)}*/
|
|
|
|
.target{box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px,rgba(255, 0, 0, 0.4) 0 0 5px, rgba(255, 0, 0, 0.5) 0 0 12px, rgba(255, 0, 0, 0.8) 0 0 15px !important}
|
|
#arena[data-target_shake='shake'] .target{transform: rotate(-3deg);}
|
|
#arena[data-target_shake='shake'] .target2{transform: rotate(3deg);}
|
|
|
|
#arena[data-target_shake='zoom'] .target,
|
|
#arena[data-target_shake='zoom'] .target2{transform: scale(1.03);}
|
|
|
|
.content>.config.line2{
|
|
transform:translateX(-5px);
|
|
}
|
|
#sidebar2>.config:not(.line2){
|
|
transform:translateX(5px);
|
|
}
|
|
.popup{
|
|
background: rgba(0,0,0,0.2);
|
|
box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px;
|
|
border-radius:4px;
|
|
}
|
|
.shadowed,
|
|
.menubutton.large.shadowed{
|
|
background: rgba(0,0,0,0.2);
|
|
box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px;
|
|
border-radius:8px;
|
|
color: white !important;
|
|
}
|
|
#window.reduce_radius .shadowed{
|
|
border-radius: 4px;
|
|
}
|
|
.underline,.underlinenode{
|
|
padding:3px;
|
|
width:auto;
|
|
display:inline-block;
|
|
border-width: 0 0 2px;
|
|
border-style:solid;
|
|
border-color:transparent;
|
|
}
|
|
.underlinenode.slim{
|
|
padding-bottom: 0;
|
|
}
|
|
.on>.underline,.underlinenode.on{
|
|
border-color:rgb(0, 133, 255);
|
|
}
|
|
.config.underlined{
|
|
overflow:visible;
|
|
}
|
|
.config.underlined>div{
|
|
border-width: 0 0 2px;
|
|
border-style:solid;
|
|
border-color:rgb(0, 133, 255);
|
|
padding-bottom:1px;
|
|
}
|
|
|
|
.newgame{
|
|
width:calc(100% - 16px);
|
|
display:flex;
|
|
}
|
|
.newgame>div{
|
|
padding:3px;
|
|
position:relative;
|
|
margin:auto;
|
|
}
|
|
|
|
.player .identity{
|
|
border:none;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 100%;
|
|
display:inline-flex;
|
|
transition: all 0.2s;
|
|
}
|
|
#arena[data-identity_font='xiaozhuan'] .player .identity>div{
|
|
font-family: 'xiaozhuan';
|
|
}
|
|
#arena[data-identity_font='xinwei'] .player .identity>div{
|
|
font-family: 'xinwei';
|
|
}
|
|
#arena[data-identity_font='huangcao'] .player .identity>div{
|
|
font-family: 'huangcao','xinwei';
|
|
}
|
|
|
|
|
|
#arena[data-cardtext_font='xiaozhuan'] .card div:not(.info):not(.background){
|
|
font-family: 'xiaozhuan';
|
|
}
|
|
#arena[data-cardtext_font='xinwei'] .card div:not(.info):not(.background){
|
|
font-family: 'xinwei';
|
|
}
|
|
#arena[data-cardtext_font='huangcao'] .card div:not(.info):not(.background){
|
|
font-family: 'huangcao','xinwei';
|
|
}
|
|
|
|
.player .identity>div{
|
|
margin: auto;
|
|
position: relative;
|
|
font-family: 'huangcao','xinwei';
|
|
font-size: 24px;
|
|
top:0;
|
|
}
|
|
.player .identity.animate{
|
|
animation:identity 0.8s;
|
|
-webkit-animation:identity 0.8s;
|
|
}
|
|
.player .identity[data-color="zhu"],
|
|
div[data-nature='fire'],
|
|
span[data-nature='fire']{
|
|
text-shadow: black 0 0 1px,rgba(232, 53, 53,1) 0 0 2px,rgba(232, 53, 53,1) 0 0 5px,rgba(232, 53, 53,1) 0 0 10px,
|
|
rgba(232, 53, 53,1) 0 0 10px,rgba(232, 53, 53,1) 0 0 20px,rgba(232, 53, 53,1) 0 0 20px
|
|
}
|
|
div[data-nature='firem'],
|
|
span[data-nature='firem']{
|
|
text-shadow: black 0 0 1px,rgba(232, 53, 53,1) 0 0 2px,rgba(232, 53, 53,1) 0 0 5px,rgba(232, 53, 53,1) 0 0 5px,
|
|
rgba(232, 53, 53,1) 0 0 5px,black 0 0 1px;
|
|
}
|
|
.player .identity[data-color="zhong"],
|
|
.player .identity[data-color="mingzhong"],
|
|
.player .identity[data-color="qun"],
|
|
div[data-nature='metal'],
|
|
span[data-nature='metal']{
|
|
text-shadow: black 0 0 1px,rgba(255, 203, 0,1) 0 0 2px,rgba(255, 203, 0,1) 0 0 5px,rgba(255, 203, 0,1) 0 0 10px,
|
|
rgba(255, 203, 0,1) 0 0 10px
|
|
}
|
|
div[data-nature='metalm'],
|
|
span[data-nature='metalm']{
|
|
text-shadow: black 0 0 1px,rgba(255, 203, 0,1) 0 0 2px,rgba(255, 203, 0,1) 0 0 5px,rgba(255, 203, 0,1) 0 0 5px,
|
|
rgba(255, 203, 0,1) 0 0 5px,black 0 0 1px;
|
|
}
|
|
div[data-nature='metalmm'],
|
|
span[data-nature='metalmm']{
|
|
text-shadow: black 0 0 1px,rgba(255, 203, 0,1) 0 0 2px,rgba(255, 203, 0,1) 0 0 2px,rgba(255, 203, 0,1) 0 0 2px,
|
|
rgba(255, 203, 0,1) 0 0 2px,black 0 0 1px;
|
|
}
|
|
.player .identity[data-color="nei"],
|
|
.player .identity[data-color="ye"],
|
|
div[data-nature='thunder'],
|
|
span[data-nature='thunder']{
|
|
text-shadow: rgba(100, 74, 139,1) 0 0 2px,rgba(100, 74, 139,1) 0 0 5px,rgba(100, 74, 139,1) 0 0 10px,
|
|
rgba(100, 74, 139,1) 0 0 10px,rgba(100, 74, 139,1) 0 0 20px,rgba(100, 74, 139,1) 0 0 20px,black 0 0 1px;
|
|
}
|
|
div[data-nature='thunderm'],
|
|
span[data-nature='thunderm']{
|
|
text-shadow: rgba(100, 74, 139,1) 0 0 2px,rgba(100, 74, 139,1) 0 0 5px,rgba(100, 74, 139,1) 0 0 5px,
|
|
rgba(100, 74, 139,1) 0 0 5px,black 0 0 1px;
|
|
}
|
|
.player .identity[data-color="fan"],
|
|
.player .identity[data-color="wu"],
|
|
div[data-nature='wood'],
|
|
span[data-nature='wood']{
|
|
text-shadow: rgba(57, 123, 4,1) 0 0 2px,rgba(57, 123, 4,1) 0 0 5px,rgba(57, 123, 4,1) 0 0 10px,
|
|
rgba(57, 123, 4,1) 0 0 10px,rgba(57, 123, 4,1) 0 0 20px,rgba(57, 123, 4,1) 0 0 20px,black 0 0 1px;
|
|
}
|
|
div[data-nature='woodm'],
|
|
span[data-nature='woodm']{
|
|
text-shadow: rgba(57, 123, 4,1) 0 0 2px,rgba(57, 123, 4,1) 0 0 5px,rgba(57, 123, 4,1) 0 0 5px,
|
|
rgba(57, 123, 4,1) 0 0 5px,black 0 0 1px;
|
|
}
|
|
div[data-nature='woodmm'],
|
|
span[data-nature='woodmm']{
|
|
text-shadow: rgba(57, 123, 4,1) 0 0 2px,rgba(57, 123, 4,1) 0 0 2px,rgba(57, 123, 4,1) 0 0 2px,
|
|
rgba(57, 123, 4,1) 0 0 2px,black 0 0 1px;
|
|
}
|
|
.player .identity[data-color="cai"],
|
|
.player .identity[data-color="wei"],
|
|
div[data-nature='water'],
|
|
span[data-nature='water']{
|
|
text-shadow: rgba(78, 117, 140,1) 0 0 2px,rgba(78, 117, 140,1) 0 0 5px,rgba(78, 117, 140,1) 0 0 10px,
|
|
rgba(78, 117, 140,1) 0 0 10px,rgba(78, 117, 140,1) 0 0 20px,rgba(78, 117, 140,1) 0 0 20px,black 0 0 1px;
|
|
}
|
|
div[data-nature='waterm'],
|
|
span[data-nature='waterm']{
|
|
text-shadow: rgba(78, 117, 140,1) 0 0 2px,rgba(78, 117, 140,1) 0 0 5px,rgba(78, 117, 140,1) 0 0 5px,
|
|
rgba(78, 117, 140,1) 0 0 5px,black 0 0 1px;
|
|
}
|
|
div[data-nature='watermm'],
|
|
span[data-nature='watermm']{
|
|
text-shadow: rgba(78, 117, 140,1) 0 0 2px,rgba(78, 117, 140,1) 0 0 2px,rgba(78, 117, 140,1) 0 0 2px,
|
|
rgba(78, 117, 140,1) 0 0 2px,black 0 0 1px;
|
|
}
|
|
.player .identity[data-color="shu"],
|
|
div[data-nature='soil'],
|
|
span[data-nature='soil']{
|
|
text-shadow: rgba(128, 59, 2,1) 0 0 2px,rgba(128, 59, 2,1) 0 0 5px,rgba(128, 59, 2,1) 0 0 10px,
|
|
rgba(128, 59, 2,1) 0 0 10px,rgba(128, 59, 2,1) 0 0 20px,rgba(128, 59, 2,1) 0 0 20px,black 0 0 1px;
|
|
}
|
|
div[data-nature='soilm'],
|
|
span[data-nature='soilm']{
|
|
text-shadow: rgba(128, 59, 2,1) 0 0 2px,rgba(128, 59, 2,1) 0 0 5px,rgba(128, 59, 2,1) 0 0 5px,
|
|
rgba(128, 59, 2,1) 0 0 5px,black 0 0 1px;
|
|
}
|
|
div[data-nature='soilmm'],
|
|
span[data-nature='soilmm']{
|
|
text-shadow: rgba(128, 59, 2,1) 0 0 2px,rgba(128, 59, 2,1) 0 0 2px,rgba(128, 59, 2,1) 0 0 2px,
|
|
rgba(128, 59, 2,1) 0 0 2px,black 0 0 1px;
|
|
}
|
|
.player .identity[data-color="unknownx"],
|
|
div[data-nature='black'],
|
|
span[data-nature='black']{
|
|
text-shadow: rgba(0,0,0,0.5) 0 0 2px,rgba(0,0,0,0.5) 0 0 5px,rgba(0,0,0,0.5) 0 0 10px,
|
|
rgba(0,0,0,0.5) 0 0 10px,rgba(0,0,0,0.5) 0 0 20px,rgba(0,0,0,0.5) 0 0 20px,black 0 0 1px;
|
|
}
|
|
div[data-color="unknownm"],
|
|
span[data-color="unknownm"]{
|
|
text-shadow: rgba(0,0,0,0.5) 0 0 2px,rgba(0,0,0,0.2) 0 0 5px,rgba(0,0,0,0.2) 0 0 5px,
|
|
rgba(0,0,0,0.2) 0 0 5px,black 0 0 1px;
|
|
}
|
|
|
|
.card.fullskin>.background{display:none !important}
|
|
.card:not(.fullskin)>.image{display:none !important}
|
|
|
|
|
|
.card.fullskin>.name{
|
|
top: 8px;
|
|
left: 7px;
|
|
/*border:1px solid #631515;*/
|
|
border-radius: 4px;
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
padding-left: 1px;
|
|
padding-right: 1px;
|
|
/*color:#631515;*/
|
|
border:1px solid rgb(74, 29, 1);
|
|
color:rgb(74, 29, 1);
|
|
text-shadow: none;
|
|
text-align:center;
|
|
line-height: 18px;
|
|
}
|
|
.card.fullskin.thunder>.name{
|
|
color:#152E63;
|
|
border:1px solid #152E63;
|
|
}
|
|
.card.fullskin.fire>.name{
|
|
color:#631515;
|
|
border:1px solid #631515;
|
|
}
|
|
/*.card.fullskin.fire>.image{
|
|
-webkit-filter:saturate(2);
|
|
}*/
|
|
.card.fullskin>.info{
|
|
top: 8px;
|
|
right: 6px;
|
|
color: rgba(0,0,0,0.8);
|
|
text-shadow: none;
|
|
}
|
|
.card.fullskin>.info.red{
|
|
color:#631515;
|
|
}
|
|
.config>.toggle.onoff{
|
|
height:100%;
|
|
width:30px;
|
|
display:inline-flex;
|
|
}
|
|
.config>.toggle.onoff>div{
|
|
height:12px;
|
|
width:100%;
|
|
border:1px solid white;
|
|
border-radius:12px;
|
|
box-shadow: black 0 0 2px,black 0 0 1px inset;
|
|
margin:auto;
|
|
overflow:hidden
|
|
}
|
|
.config>.toggle.onoff:not(.on)>div,
|
|
.config.disabled{
|
|
opacity:0.4;
|
|
}
|
|
.config>.toggle.onoff>div>div{
|
|
width:8px;
|
|
height:8px;
|
|
border-radius:100%;
|
|
position:absolute;
|
|
left:1px;
|
|
top:1px;
|
|
background:white;
|
|
border:1px solid white;
|
|
box-shadow:black 0 0 2px;
|
|
}
|
|
.config>.toggle.onoff.on>div>div{
|
|
left:calc(100% - 11px);
|
|
}
|
|
|
|
#arena>.skillbar{
|
|
width: 65px;
|
|
height: 65px;
|
|
border-radius: 100%;
|
|
font-size: 55px;
|
|
font-family: 'huangcao';
|
|
top:calc(50% - 110px);
|
|
line-height: 65px;
|
|
text-align: center;
|
|
}
|
|
#arena>.skillbar.left{
|
|
left:0;
|
|
right: auto;
|
|
}
|
|
#arena>.skillbar.right{
|
|
right:0;
|
|
left:auto;
|
|
}
|
|
#arena>.skillbar>div{
|
|
border-radius: 100%;
|
|
width: 55px;
|
|
height: 55px;
|
|
position: absolute;
|
|
margin: 0;
|
|
padding: 0;
|
|
left: 5px;
|
|
top: 5px;
|
|
overflow: hidden;
|
|
}
|
|
#arena>.skillbar>.skillbarshadow{
|
|
box-shadow: 0px 0px 8px #222 inset;
|
|
z-index: 1;
|
|
}
|
|
#arena>.skillbar>.skillbarfill>div{
|
|
box-shadow: 0px 0px 10px #555 inset,rgba(0, 0, 0, 0.05) 0 0 0 1px;
|
|
width: 200%;
|
|
height: 200%;
|
|
position: absolute;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: rgba(63, 119, 173,1);
|
|
left: -50%;
|
|
top: 100%;
|
|
}
|
|
#arena>.skillbar.full>.skillbarfill>div{
|
|
box-shadow: none;
|
|
background-color: red;
|
|
}
|
|
#arena>.skillbar.full{
|
|
/*transform: scale(1.1);*/
|
|
/*box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px;
|
|
-webkit-animation:skillbarglow 3s infinite;*/
|
|
}
|
|
#arena>.skillbar>.skillbartext{
|
|
font-family: 'xinwei';
|
|
font-size: 35px;
|
|
width: 100%;
|
|
text-align: center;
|
|
height: 35px;
|
|
line-height: 40px;
|
|
overflow: visible;
|
|
margin: 0;
|
|
padding: 0;
|
|
left: 0;
|
|
top: 15px;
|
|
z-index: 2;
|
|
opacity: 0;
|
|
}
|
|
|
|
.firetext{
|
|
color: rgb(255,119,63);
|
|
}
|
|
.yellowtext{
|
|
color: #FFFF7A;
|
|
}
|
|
.bluetext{
|
|
color: rgb(150, 202, 255);
|
|
}
|
|
.greentext{
|
|
color: rgb(104,221,127);
|
|
}
|
|
.thundertext,
|
|
.controlthundertext{
|
|
color: rgb(117,186,255);
|
|
}
|
|
.poisontext{
|
|
color: rgb(104,221,127);
|
|
}
|
|
.browntext{
|
|
color: rgb(195,161,223);
|
|
}
|
|
#window>canvas.fun{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: -2;
|
|
pointer-events: none;
|
|
}
|
|
#window.canvas_top>canvas.fun{
|
|
z-index: 20;
|
|
}
|
|
.coin_menu .content>.caption>.coin_buy{
|
|
line-height: 36px;
|
|
font-family: 'xinwei';
|
|
font-size: 24px;
|
|
}
|
|
.coin_menu .content>.caption>.coin_buy>.menubutton{
|
|
width: auto;
|
|
display: inline-block;
|
|
position: relative;
|
|
float: right;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
height: auto;
|
|
font-size: 24px;
|
|
margin-left: 10px;
|
|
}
|
|
.coin_menu .content>.caption>.coin_buy>.menubutton.disabled{
|
|
opacity: 0.5;
|
|
}
|
|
.wunature{
|
|
font-family:'huangcao','xinwei';
|
|
font-size: 24px;
|
|
color:white !important;
|
|
pointer-events: none;
|
|
}
|
|
.player .wunature{
|
|
display: none;
|
|
}
|
|
#arena>.player .wunature,
|
|
#chess>.player .wunature{
|
|
display: block;
|
|
}
|
|
div:hover>.wunature{
|
|
/*opacity: 0.5;*/
|
|
}
|
|
.button.noclick .wunature,
|
|
.player.treasure .wunature{
|
|
display: none !important;
|
|
}
|
|
.player .actcount.hp{
|
|
left: 216px;
|
|
top: 9px;
|
|
width: 20px;
|
|
}
|
|
.player .actcount.hp>div{
|
|
width:12px;
|
|
height:12px;
|
|
margin-left:4px;
|
|
margin-bottom: 3px;
|
|
animation:game_start 0.5s;
|
|
-webkit-animation:game_start 0.5s;
|
|
}
|
|
.player .wunature{
|
|
top:77px;
|
|
left:14px;
|
|
}
|
|
.player{
|
|
top:47px;
|
|
left:14px;
|
|
}
|
|
.card .wunature{
|
|
top:74px;
|
|
right:6px;
|
|
}
|
|
/*.card.equip1 .wunature,
|
|
.card.equip3 .wunature,
|
|
.card.equip4 .wunature{
|
|
top:56px;
|
|
right:4px;
|
|
}*/
|
|
.card .addinfo{
|
|
bottom:6px;
|
|
left:6px;
|
|
}
|
|
.button.card .wunature{
|
|
top:59px;
|
|
}
|
|
|
|
#arena.oldlayout .player>.timerbar>div{top:100px;left:15px;width: 90px;}
|
|
#arena.oldlayout .player>.nameol{left:15px;top:85px;text-align: left}
|
|
.timerbar>div{left: 25px;box-shadow:0px 1px 3px rgba(0,0,0,0.3);border-radius: 8px;height: 5px;width: 100px;}
|
|
.timerbar>div:first-child{background: rgba(255,255,255,0.6);}
|
|
.timerbar>div{top:165px;}
|
|
.timerbar>div:last-child{background: linear-gradient(#FFDA47, #CE0404);transition-timing-function: linear;}
|
|
/*.timerbar>div:last-child{background: linear-gradient(#FFFFFF,#F0F0F0);}
|
|
.timerbar[data-color="red"]>div:last-child{background: linear-gradient(#FF0000, #CE0404)}
|
|
.timerbar[data-color="blue"]>div:last-child{background: linear-gradient(#8EE0FA, #0F637E)}
|
|
.timerbar[data-color="green"]>div:last-child{background: linear-gradient(#7AFF00, #589103)}
|
|
.timerbar[data-color="purple"]>div:last-child{background: linear-gradient(#E247FF, #CE0404)}
|
|
.timerbar[data-color="orange"]>div:last-child{background: linear-gradient(#FFDA47, #CE0404)}*/
|
|
|
|
.player.selectable{
|
|
box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 133, 255, 0.5) 0 0 5px, rgba(0, 133, 255, 0.6) 0 0 12px, rgba(0, 133, 255, 0.8) 0 0 15px;
|
|
}
|
|
.selected,.selectedx{
|
|
box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px,rgba(255, 0, 0, 0.4) 0 0 5px, rgba(255, 0, 0, 0.4) 0 0 12px, rgba(255, 0, 0, 0.8) 0 0 15px !important;
|
|
}
|
|
#me .card.selected{
|
|
box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px,rgb(255, 0, 0) 0 0 5px, rgba(255, 0, 0, 1) 0 0 10px !important;
|
|
}
|
|
#me .card.glow{
|
|
box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px,rgb(0, 133, 255) 0 0 5px, rgba(0, 133, 255,1) 0 0 10px !important;
|
|
}
|
|
#me>#handcards1:not(.scrollh),
|
|
#me>#handcards2:not(.scrollh){
|
|
z-index: 3;
|
|
}
|
|
/*#me>div:not(.scrollh)>.handcards>.card{
|
|
top:0;
|
|
}
|
|
#me>div:not(.scrollh)>.handcards>.card.selected{
|
|
top:-20px;
|
|
}*/
|
|
.glow{
|
|
box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 133, 255, 0.4) 0 0 5px, rgba(0, 133, 255, 0.5) 0 0 12px, rgba(0, 133, 255, 0.8) 0 0 15px !important;
|
|
}
|
|
.glow2:not(.player.glow_phase)>.avatar{
|
|
/*-webkit-animation:control_glow 4s infinite;*/
|
|
box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(10, 155, 67, 1) 0 0 15px, rgba(10, 155, 67, 1) 0 0 15px !important;
|
|
}
|
|
.player:not(.glow_phase)>.avatar.glow2,
|
|
.button.glow2:not(.selected){
|
|
box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(10, 155, 67, 1) 0 0 5px, rgba(10, 155, 67, 1) 0 0 5px, rgba(10, 155, 67, 1) 0 0 10px, rgba(10, 155, 67, 1) 0 0 10px !important
|
|
}
|
|
#arena[data-glow_phase="yellow"] .player:not(.selectable):not(.selected).glow_phase{
|
|
box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgb(235, 239, 59) 0 0 15px, rgb(199, 64, 64) 0 0 15px !important;
|
|
}
|
|
#arena[data-glow_phase="green"] .player:not(.selectable):not(.selected).glow_phase{
|
|
box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(10, 155, 67, 1) 0 0 15px, rgba(10, 155, 67, 1) 0 0 15px !important;
|
|
}
|
|
#arena[data-glow_phase="purple"] .player:not(.selectable):not(.selected).glow_phase{
|
|
box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgb(178, 59, 239) 0 0 15px, rgb(199, 64, 101) 0 0 15px !important;
|
|
}
|
|
|
|
.control.blue{
|
|
background-image: linear-gradient(rgba(47,101,150,1), rgba(43, 90, 132,1));
|
|
}
|
|
.control.red{
|
|
background-image: linear-gradient(rgba(150, 47, 47, 1), rgba(132, 43, 43, 1));
|
|
}
|
|
.control.red,.control.blue{
|
|
color:white;
|
|
text-shadow:black 0 0 2px;
|
|
}
|
|
.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;
|
|
}
|
|
#window.reduce_radius .dialog.scroll1,
|
|
#window.reduce_radius .dialog.scroll2,
|
|
#window.reduce_radius .dialog.withbg{
|
|
border-radius:4px;
|
|
}
|
|
|
|
/*--------动画--------*/
|
|
@keyframes cardeffect{
|
|
0%{opacity: 0;transform: scale(0.8)}
|
|
2%{opacity: 1;transform: scale(1)}
|
|
50%{opacity: 1;transform: scale(1)}
|
|
100%{opacity: 0;transform: scale(0.8)}
|
|
/*from{box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(10, 155, 67, 1) 0 0 15px, rgba(10, 155, 67, 1) 0 0 15px !important;}
|
|
to{box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px !important}*/
|
|
}
|
|
@keyframes control_glow{
|
|
0%{box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px}
|
|
30%{box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(10, 155, 67, 1) 0 0 15px, rgba(10, 155, 67, 1) 0 0 15px}
|
|
70%{box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(10, 155, 67, 1) 0 0 15px, rgba(10, 155, 67, 1) 0 0 15px}
|
|
100%{box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px}
|
|
/*from{box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(10, 155, 67, 1) 0 0 15px, rgba(10, 155, 67, 1) 0 0 15px !important;}
|
|
to{box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px !important}*/
|
|
}
|
|
@-webkit-keyframes control_glow{
|
|
0%{box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px}
|
|
30%{box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(10, 155, 67, 1) 0 0 15px, rgba(10, 155, 67, 1) 0 0 15px}
|
|
70%{box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(10, 155, 67, 1) 0 0 15px, rgba(10, 155, 67, 1) 0 0 15px}
|
|
100%{box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px}
|
|
/*from{box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(10, 155, 67, 1) 0 0 15px, rgba(10, 155, 67, 1) 0 0 15px !important;}
|
|
to{box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px !important}*/
|
|
}
|
|
@keyframes cardflip{
|
|
from {transform:perspective(600px) rotateY(-90deg) translateX(52px)}
|
|
to{transform:perspective(600px) rotateY(0deg) translateX(0)}
|
|
}
|
|
@-webkit-keyframes cardflip{
|
|
from {transform:perspective(600px) rotateY(-90deg) translateX(52px)}
|
|
to{transform:perspective(600px) rotateY(0deg) translateX(0)}
|
|
}
|
|
@keyframes playerflip{
|
|
from {transform:perspective(1200px) rotateY(-90deg) translateX(150px)}
|
|
to{transform:perspective(1200px) rotateY(0deg) translateX(0)}
|
|
}
|
|
@keyframes playerflip{
|
|
from {transform:perspective(1200px) rotateY(-90deg) translateX(150px)}
|
|
to{transform:perspective(1200px) rotateY(0deg) translateX(0)}
|
|
}
|
|
@-webkit-keyframes playerflip{
|
|
from {transform:perspective(1200px) rotateY(-90deg) translateX(150px)}
|
|
to{transform:perspective(1200px) rotateY(0deg) translateX(0)}
|
|
}
|
|
@keyframes splash{from {opacity: 0;transform:translateY(-300px)}}
|
|
@-webkit-keyframes splash{from {opacity: 0;transform:translateY(-300px)}}
|
|
@keyframes game_start{from {opacity: 0;}}
|
|
@-webkit-keyframes game_start{from {opacity: 0;}}
|
|
@keyframes equip_hover{0% {opacity: 0;}50% {opacity: 0;}}
|
|
@-webkit-keyframes equip_hover{0% {opacity: 0;}50% {opacity: 0;}}
|
|
@keyframes buttonclick{0% {transform: scale(1);}50% {transform: scale(0.9);}}
|
|
@-webkit-keyframes buttonclick{0% {transform: scale(1);}50% {transform: scale(0.9);}}
|
|
@keyframes equip_hover2{0% {}50% {opacity: 0.6}100%{opacity: 0.3}}
|
|
@-webkit-keyframes equip_hover2{0% {}50% {opacity: 0.6}100%{opacity: 0.3}}
|
|
@keyframes dialog_start{from {opacity: 0;top:100px;}}
|
|
@-webkit-keyframes dialog_start{from {opacity: 0;top:100px;}}
|
|
@keyframes dialog_start2{from {opacity: 0;transform:scale(0.8);}}
|
|
@-webkit-keyframes dialog_start2{from {opacity: 0;transform:scale(0.8);}}
|
|
@keyframes replaceme{from {opacity: 0;transform:translateY(120px)}}
|
|
@-webkit-keyframes replaceme{from {opacity: 0;transform:translateY(120px)}}
|
|
@keyframes replaceenemy{from {opacity: 0;transform:translateY(-120px)}}
|
|
@-webkit-keyframes replaceenemy{from {opacity: 0;transform:translateY(-120px)}}
|
|
@keyframes drawing{0% {opacity: 0;left:calc(50% - 52px);top:calc(50% - 52px);}50%{opacity: 1}100%{opacity: 0}}
|
|
@-webkit-keyframes drawing{0% {opacity: 0;left:calc(50% - 52px);top:calc(50% - 52px);}50%{opacity: 1}100%{opacity: 0}}
|
|
@keyframes drawing2{0% {opacity: 0}50%{opacity: 1}100%{opacity: 0}}
|
|
@-webkit-keyframes drawing2{0% {opacity: 0}50%{opacity: 1}100%{opacity: 0}}
|
|
@keyframes card_start{from {opacity: 0;transform:scale(0);}}
|
|
@-webkit-keyframes card_start{from {opacity: 0;transform:scale(0);}}
|
|
@keyframes card_start2{from {opacity: 0;transform:scale(0);margin-left: -52px;margin-right: -52px;}}
|
|
@-webkit-keyframes card_start2{from {opacity: 0;transform:scale(0);margin-left: -52px;margin-right: -52px;}}
|
|
@keyframes card_judgestart{from {opacity: 0;transform:scale(0) rotateY(-180deg) perspective(600px);}}
|
|
@-webkit-keyframes card_judgestart{from {opacity: 0;transform:scale(0) rotateY(-180deg) perspective(600px);}}
|
|
@keyframes sidebar{from {left: -120px;opacity: 0}}
|
|
@-webkit-keyframes sidebar{from {left: -120px;opacity: 0}}
|
|
@keyframes zoom_button{from {margin-top: -48px;margin-bottom: -48px;transform:scale(0);opacity: 0}}
|
|
@-webkit-keyframes zoom_button{from {margin-top: -48px;margin-bottom: -48px;transform:scale(0);opacity: 0}}
|
|
@keyframes config{from {margin-top:-28px;opacity: 0}}
|
|
@-webkit-keyframes config{from {margin-top:-28px;opacity: 0}}
|
|
@keyframes zoomin{from {opacity: 0;transform:scale(0.5);}}
|
|
@-webkit-keyframes zoomin{from {opacity: 0;transform:scale(0.5);}}
|
|
@keyframes zoomout{from {opacity: 0;transform:scale(2);}}
|
|
@-webkit-keyframes zoomout{from {opacity: 0;transform:scale(2);}}
|
|
@keyframes zoomout3{from {opacity: 0;transform:scale(3);}}
|
|
@-webkit-keyframes zoomout3{from {opacity: 0;transform:scale(3);}}
|
|
@keyframes zoomout4{from {opacity: 0;transform:scale(4);}}
|
|
@-webkit-keyframes zoomout4{from {opacity: 0;transform:scale(4);}}
|
|
@keyframes flash{0%{opacity: 1;}50%{opacity: 0;}100%{opacity: 1;}}
|
|
@-webkit-keyframes flash{0%{opacity: 1;}50%{opacity: 0;}100%{opacity: 1;}}
|
|
@keyframes flip{from{transform:perspective(1000px) rotateY(0);}to{transform:perspective(1000px) rotateY(360deg);}}
|
|
@-webkit-keyframes flip{from{transform:perspective(1000px) rotateY(0);}to{transform:perspective(1000px) rotateY(360deg);}}
|
|
/*--------其它--------*/
|
|
::-webkit-scrollbar{display: none;}
|
|
@media screen and (min-height: 800px) and (orientation:landscape) {
|
|
#arena{height: 720px;top: calc(50% - 350px);}
|
|
}
|
|
@media screen and (min-width: 1280px) {
|
|
#arena{width: 1152px;left: calc(50% - 576px);}
|
|
}
|
|
@media screen and (min-width: 1600px) {
|
|
#arena.right:not(.noleft){left: calc(50% - 576px);}
|
|
#arena.left:not(.noleft){left: calc(50% - 576px);}
|
|
}
|