/*--------标签--------*/ 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):not(.centermenu):not(.popup-container){opacity: 0.3 !important} #window.shortcutpaused>#arena>div:not(#timer):not(.removing):not(.hidden):not(#autonode){opacity: 0.3 !important} #window.systempaused>#system{opacity: 0.3 !important;} #window.noclick_important *{pointer-events: none !important;} #window.noclick_important .noclick_click_important div{pointer-events: auto !important} #window.blur_ui #arena.paused, #window.blur_ui #arena.unfocus, #window.blur_ui #arena.right, #window.blur_ui #arena.menupaused, #window.blur_ui.shortcutpaused>#arena{ filter:blur(3px); -webkit-filter:blur(3px); } #window.blur_ui #arena.menupaused{ opacity: 0.6; } #window.blur_ui #arena.thrownhighlight>.card.thrown:not(.thrownhighlight){ filter:blur(2px); -webkit-filter:blur(2px); } #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>div:first-child{ margin-left: 20px; } #splash>div:last-child{ margin-right: 20px; } #splash:not(.touch)>div:hover:not(.clicked){ 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='lishu']{ font-family: 'lishu'; } #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='lishu'] #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.playerhidden>.player, #arena.playerhidden>#mebg, #arena.markhidden>.player>.marks{ visibility: hidden; opacity: 0; } #arena.chess>#arenalog{ display: none !important; } #arena.observe .handcards>.card>div{ opacity: 0 !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; line-height: 18px; } #arena:not(.low_performance) #arenalog>div{ -webkit-animation: game_start 0.5s; } /*#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):not(#autonode){ 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):not(.nameol):not(.hp.room):not(.gaming){ display: none !important; } .player.connect>.gaming{ left:16px; top:auto; bottom: 16px; font-family: 'xinwei' } #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} #autonode{z-index: 10;width: 100%;height: 140px;top:calc(100% - 140px);left:0;display: table;text-align: center;font-size: 60px;font-family: 'xinwei';text-shadow: black 0 0 10px} #arena:not(.chess):not(.mobile)>#autonode{display: none} #arena:not(.auto)>#autonode{opacity: 0;pointer-events: none} #arena.auto #handcards1,#arena.auto #handcards2{opacity: 0.5} #autonode>div{display: table-cell;vertical-align: middle;position: relative} #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; } .dialog.character>.content-container{ width: calc(100% - 136px); left: 136px; } .dialog.character>.packnode{ width: 136px; left: 0; height: 100%; position: absolute; overflow: scroll; } .dialog.character>.packnode>div{ /*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: 4px; font-family:'STXinwei','xinwei'; text-align:center; display:inline-block; padding:5px;*/ font-size:26px; line-height:26px; width: calc(100% - 30px); margin-top: 9px; margin-left: 10px; white-space: nowrap; position: relative; } .dialog.character>.packnode>div:last-child{ margin-bottom: 9px; } #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} body>.background.upper{z-index:-4} .popup{padding: 5px;} .forcehide{display: none !important;} .removing,.hidden{opacity: 0 !important;} #system>div>div.hidden{opacity:0.5 !important;} .transparent{opacity: 0.3 !important;} .transparent2{opacity: 0.6 !important;} .out{opacity: 0.3 !important; filter:blur(3px); -webkit-filter:blur(3px) } .blurbg{ filter:blur(3px) !important; -webkit-filter:blur(3px) !important; transform: scale(1.2); } .blur{ filter:blur(3px) !important; -webkit-filter:blur(3px) !important; } .blur2{ filter:blur(6px) !important; -webkit-filter:blur(6px) !important; } .invert-color{ -webkit-filter:invert(1); } .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).menu-buttons>.button.card>.name{ transform: scale(0.9) !important; transform-origin: top left; } div:not(.handcards).menu-buttons>.button.card>.info{ transform: scale(0.9) !important; transform-origin: top right; } 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;} .judges>.card.fakejudge.fullskin>.image{display: none !important} .judges>.card.fakejudge.fullskin>.background{display: block !important;font-family: 'huangcao' !important;padding-top: 4px !important;} .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; } #arena.oldlayout .player:not(.linked2) .marks>div:first-child, #arena.oldlayout .player .marks .removing{ margin-left: -12px; margin-right:-12px; opacity:0; } /*--------窗口--------*/ .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='lishu'] .player>.name, #arena[data-name_font='lishu'] .button.character>.name{ font-family: 'lishu'; } #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% - 120px);top:calc(300% / 7 - 155px);} #window>.player.connect[data-position='1']{left:calc(50% - 60px);top:calc(300% / 7 - 155px);} #window>.player.connect[data-position='2']{left:calc(75% - 0px);top:calc(300% / 7 - 155px);} #window>.player.connect[data-position='3']{left:calc(25% - 120px);top:calc(400% / 7 - 75px);} #window>.player.connect[data-position='4']{left:calc(75% - 0px);top:calc(400% / 7 - 75px);} #window>.player.connect[data-position='5']{left:calc(25% - 120px);top:calc(500% / 7 + 5px);} #window>.player.connect[data-position='6']{left:calc(50% - 60px);top:calc(500% / 7 + 5px);} #window>.player.connect[data-position='7']{left:calc(75% - 0px);top:calc(500% / 7 + 5px);} #window>.player.connect[data-position='c0']{left:calc(50% - 120px);top:calc(50% - 200px)} #window>.player.connect[data-position='c1']{left:calc(50% - 120px);top:calc(50% - 60px)} #window>.player.connect[data-position='c2']{left:calc(50% - 120px);top:calc(50% + 80px)} #window>.player.connect[data-position='c0']{left:calc(50% - 140px);top:calc(50% - 200px)} #window>.player.connect[data-position='c1']{left:calc(50% - 140px);top:calc(50% - 60px)} #window>.player.connect[data-position='c2']{left:calc(50% - 140px);top:calc(50% + 80px)} #window>.player.connect[data-position='c3']{left:calc(50% + 20px);top:calc(50% - 200px)} #window>.player.connect[data-position='c4']{left:calc(50% + 20px);top:calc(50% - 60px)} #window>.player.connect[data-position='c5']{left:calc(50% + 20px);top:calc(50% + 80px)} #window>.player.connect{ width: 120px; } .connectbutton{ top:calc(400% / 7 - 35px); width:130px; left:calc(50% - 70px); } /*--------动画--------*/ .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):not(.drawingcard){ 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} #mebg.target{transform: none !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='lishu'] .player .identity>div{ font-family: 'lishu'; } #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='lishu'] .card div:not(.info):not(.background){ font-family: 'lishu'; } #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"], .player .identity[data-color="truezhu"], .player .identity[data-color="enemy"], 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="qun"], .player .identity[data-color="neutral"], .player .identity[data-color="friend2"], 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 } .player .identity[data-color="mingzhong"]{ text-shadow: black 0 0 1px,rgba(255, 120, 0,1) 0 0 2px,rgba(255, 120, 0,1) 0 0 5px,rgba(255, 120, 0,1) 0 0 10px, rgba(255, 120, 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"], .player .identity[data-color="falsezhu"], .player .identity[data-color="friend"], .water, 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>.name.long{ top:5px; } .card.fullskin.thunder>.name{ color:#152E63; border:1px solid #152E63; } .card.fullskin.fire>.name{ color:#631515; border:1px solid #631515; } .card.fullskin.poison>.name{ color:#00312d; border:1px solid #00312d; } .card.fullskin.epic>.name{ color: white; background: rgba(0, 66, 165, 0.6); border: 1px solid rgba(0, 66, 165, 1); box-shadow: rgba(0,0,0,0.4) 0 0 10px inset; } .card.fullskin.epic>.name2{ color: rgb(117,186,255); } .card.fullskin.legend>.name{ color: white; background: rgba(106, 27, 154, 0.6); border: 1px solid rgba(106, 27, 154, 1); box-shadow: rgba(0,0,0,0.4) 0 0 10px inset; } .card.fullskin.legend>.name2{ color: rgb(233, 131, 255); /*color: rgb(117,186,0);*/ } /*.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; } .menubutton.large.disabled{ opacity: 0.5; } .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); } .whitetext .thundertext{ color: white; } .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;*/ -webkit-filter:drop-shadow(blue 0 0 5px); } .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;*/ -webkit-filter:drop-shadow(red 0 0 5px); } #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;*/ -webkit-filter:drop-shadow(red 0 0 5px); } #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;*/ -webkit-filter:drop-shadow(red 0 0 5px); } #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; } .glow3{ box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px, rgba(0, 133, 255, 0.8) 0 0 10px, rgba(0, 133, 255, 0) 0 0 40px, rgba(0, 133, 255, 0.8) 0 0 60px !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);} }