#ignoreAllFights { font-size:13px; position:fixed; bottom:1%; margin:20px 0; left:0; width:100%; padding:0 15px; box-sizing:border-box; text-shadow:none;} #ignoreAllFights p { margin:15px auto; max-width:360px; color:rgba(255,255,255,0.6);} #ignoreAllFights a { display:inline-block; padding:8px 10px; opacity:0.6; border-radius:3px; background:#FFF; text-transform:uppercase; font-size:12px; font-weight:600; color:_NORMAL_; } #ignoreAllFights a:hover { opacity:1;} #fightContainer { position:fixed; top:0; left:0; width:100%; height:100%; opacity:0;} #fightContainer a { text-decoration:none;} #fightIntro { position:absolute; z-index:5; width:100%; left:0; box-sizing:border-box; padding:0 20px; top:50%; margin-top:-30px; transform:translateY(-50%); text-align:center; color:#FFF; } #fightIntro h1 { font-weight:600; margin:0; } #fightIntro h4 { font-weight:400; margin:0.4em 0; } #fightIntro a i { display:block; margin:5px auto; font-size:68px;} #fightIntro a { color:#FFF; opacity:0.4; transition:opacity 0.2s; margin:30px auto; width:120px; text-align:center; display:block; padding:10px; } #fightIntro a:hover { opacity:1;} .overlay#overlayFight { z-index:1500; opacity:0; color:#FFF; background:rgba(0,10,20,0.95) ; background-size:cover; overflow:hidden; text-shadow:2px 0 0 #222, -2px 0 0 #222, 0 2px 0 #222, 0 -2px 0 #222, 1px 1px #222, -1px -1px 0 #222, 1px -1px 0 #222, -1px 1px 0 #222;} .overlay.critical { background:#FFF;} #overlayFight #fightContent { position:relative; z-index:5; margin:0 auto; max-width:1000px; height:0; top:50%; box-sizing:border-box;} #fightBalance { position:absolute; top:0; left:0; width:100%; height:100%;} #fightBalance div { opacity:0.1; height:100%; width:50%; top:0; position:absolute;} #fightBalance div#bal_0 { background:_GREEN_; left:0;} #fightBalance div#bal_1 { background:_RED_; right:0;} #fightBalance.is_1 div#bal_0 { background:_RED_;} #fightBalance.is_1 div#bal_1 { background:_GREEN_; } #fightContainer .weapon { position:absolute; bottom:0; z-index:5; width:32px; height:32px; border-radius:100%; background:rgba(0,10,20,0.6); box-shadow:0 0 8px 1px rgba(0,0,0,0.9) inset, 0 0 0 1px rgba(255,255,255,0.1); margin:0 25px;} #fightContainer .weapon .itemWeapon { display:'block'; position:relative; width:32px; height:32px; } #fightContainer .weapon_1 { right:50%;} #fightContainer .weapon_2 { left:50%;} #fightContainer .weapon .itemWeapon img { position:absolute; border-radius:100%; width:102%; height:102%; box-shadow:0 0 4px 1px rgba(0,10,20,0.3); background:#FFF; position:absolute; left:-1%; top:-1%; } #fightContent .player { text-align:center; position:relative; width:180px; margin:0 15px; } #fightContent .player .name { position:absolute; bottom:100%; width:100%; margin:2px 0; left:0; z-index:5; } #fightContent .player h3 { margin:0; font-size:20px; color:#FFF;} #fightContent .player h4 { margin:0; padding:5px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; font-weight:400; color:#FFF; color:rgba(255,255,255,0.6);} #fightContent .picture { margin:0 auto; position:relative; width:100px; height:100px; border-radius:100%; padding:8px; background:rgba(0,10,20,0.2) no-repeat center center; box-shadow:0 0 5px rgba(0,10,20,0.2) inset} #fightContent .picture div { position:relative; width:100%;border:4px solid #FFF; margin:-3px; height:100%; border-radius:100%; background:_LIGHT_ no-repeat center center; border-radius:100%; background-size:cover; } #fightContent .picture svg { position:absolute; width:100%; height:100%; top:0; left:0;} #fightContent .picture strong { bottom:5%; position:absolute; line-height:100%; width:100%; left:0; text-align:center; font-size:32px; font-weight:600;} #fightContent .col { width:300px; top:0; position:absolute; top:50%; transform:translateY(-50%); } #fightContent .col.col-0 { left:0;} #fightContent .col.col-1 { right:0;} #resumeFight { position:absolute; z-index:10000; left:0; width:100%; padding:0 20px; box-sizing:border-box; top:50%; text-align:center; transform:translateY(-50%);} #resumeFight h1 { font-size:46px; line-height:100%; margin:0.6em 0; display:none; font-weight:600; } #resumeFight h2 { font-size:24px; line-height:100%; margin:1em 0; font-weight:400; display:none; } /*#resumeFight h2 strong { display:block; margin:0.25em 0;}*/ #resumeFight h2 strong { white-space:nowrap;} #resumeFight p { display:none;} #resumeFight p a { text-shadow:none;} #fightContent .col.col-0 .player { float:left;} #fightContent .col.col-1 .player { float:right;} #fightContent .troupes .damage { position:absolute; width:300px; margin:0 -150px; left:50%; text-align:center; color:#FFF; z-index:100; font-weight:800; font-size:26px; line-height:100%; } #fightContent .troupes .damage strong { position:absolute; width:100%; left:0; bottom:100%; font-size:20%; line-height:100%; color:#FFF;} #fightContent .troupes .damage.critical-1 { color:#f3db0e; font-size:52px;} #fightContent .troupes .damage.riposte-1 { color:#7efff7; font-size:52px; } #fightContent .troupes { position:absolute; border-radius:40px; top:50%; transform:translateY(-50%); } #fightContent .troupes .troupe { width:46px; height:46px; display:block; border-radius:100%; margin:6px; background:rgba(0,10,20,0.5) no-repeat center center; padding:2px; position:relative; } #fightContent .troupes .troupe.death { background-image:url(../images/pictos/skull.svg);} #fightContent .troupes .bat.hide { opacity:0; } #fightContent .troupes .bat { top:50%; transition:opacity 1s; transition-delay:0.3s; left:50%; margin:-60px; width:120px; height:120px; position:absolute; border-radius:100%; } #fightContent .troupes .bat img { position:absolute; bottom:0; width:100%; height:auto; left:0;} #fightContent .troupes .bat strong { top:50%; position:absolute; z-index:2; font-size:18px; width:120px; left:50%; font-weight:400; margin:15px -60px; text-align:center; line-height:100%;} #fightContent .circle-bg { stroke: #FFF; stroke-width: 4; } #fightContent .circle { stroke-width: 1.2; transition:stroke-dasharray 0.1s; stroke: _GREEN_; } #placeLog { position:absolute; left:0%; width:100%; bottom:25px; height:205px; overflow:hidden;} #fightLog {text-align:left; top:100%; transform:translateY(-100%); line-height:15px; color:#FFF; color:rgba(255,255,255,0.8); margin:0 auto; max-width:700px; padding:0 20px; font-size:13px; position:relative; left:0; } #fightLog strong.name { display:block; color:#FFF;} #fightLog strong.name strong { float:right;} #fightLog div { padding:4px 0 6px 0; border-bottom:1px solid rgba(255,255,255,0.3); opacity:0.4; } #fightLog div.p_1 { } #fightLog div.looseItem { line-height:30px; overflow:hidden; text-overflow:ellipsis; font-weight:600; white-space:nowrap; text-transform:uppercase; opacity:0.6; color:#FFF; } #countFight { position:absolute; width:200px; height:24px; line-height:24px; font-size:22px; margin:-10px -100px; top:50%; left:50%; font-weight:600; text-align:center;z-index:600;} #countFight strong { opacity:0.3; } #countFight div { position:absolute; width:100%; height:0;} #countFight a { color:#FFF; color:#FFF; display:inline-block; font-size:12px; text-transform:uppercase; font-weight:400; text-shadow:none; padding-left:26px; position:relative; opacity:0.3;} #countFight a:hover { opacity:0.8;} #countFight a i { position:absolute; top:50%; margin:-9px 0; left:0; border:1px solid #FFF; border-radius:3px; font-size:14px; height:16px; line-height:16px; width:20px; text-align:center;} #fightContent #countFight strong { display:block;} #fightContent .col.actif { z-index:5;} #fightContent .item { position:absolute; border:3px solid #FFF; width:40px; height:40px; backface-visibility:hidden; border-radius:100%; background:_LIGHT_ no-repeat center center; background-size:48px; left:2px;} #fightContent .item span { position:absolute; bottom:0; margin:-6px 0; width:100%; text-align:center; font-size:18px; height:20px; line-height:20px;} #fightContent .item span strong { display:inline-block; color:#FFF; padding:0 5px; min-width:10px; text-align:center; border-radius:40px;} #fightContent .troupes em { position:absolute; font-style:normal; font-weight:600; margin:30px 0; z-index:5; font-size:18px; line-height:20px; opacity:0; background:url(../images/pictos/skull2.svg) no-repeat; background-size:16px; } #fightContent .col-0 .troupes em { right:100%; padding-left:20px; background-position:0 center;} #fightContent .col-1 .troupes em { left:100%; padding-right:20px; background-position:right center;} #fightContent .troupes .item.ghost { opacity:0.20; filter:grayscale(50%); } #fightContent .troupes .troupe-1 .item { background-image:url(../images/units/troupes/1.jpg); } #fightContent .troupes .troupe-2 .item { background-image:url(../images/units/troupes/2.jpg); } #fightContent .troupes .troupe-3 .item { background-image:url(../images/units/troupes/3.jpg); } #fightContent .troupes .troupe-4 .item { background-image:url(../images/units/troupes/4.jpg); } #fightContent .troupes .troupe-5 .item { background-image:url(../images/units/troupes/5.jpg); } #fightContent .troupes .troupe-6 .item { background-image:url(../images/units/troupes/6.jpg); } #fightContent .troupes .troupe-7 .item { background-image:url(../images/units/troupes/7.jpg); } #fightContent .troupes .troupe-8 .item { background-image:url(../images/units/troupes/8.jpg); } #fightContent .troupes .troupe-9 .item { background-image:url(../images/units/troupes/9.jpg); } #fightContent .troupes .troupe-10 .item { background-image:url(../images/units/troupes/10.jpg); } #fightContent .troupes .troupe-11 .item { background-image:url(../images/units/troupes/11.jpg); } #fightContent .troupes .troupe-12 .item { background-image:url(../images/units/troupes/12.jpg); } #fightContent .troupes .troupe-13 .item { background-image:url(../images/units/troupes/13.jpg); } #fightContent .troupes .battery { position:absolute; width:20px; height:20px; background:url(../images/pictos/battery_empty.svg) no-repeat 0 0; right:100%; top:50%; margin:-10px 2px;} #fightContent .troupes .battery div { position:absolute; bottom:0; left:0; height:100%; width:100%; background:url(../images/pictos/battery_full.svg) no-repeat 0 bottom; } #fightContent .troupes .battery div strong { position:absolute; width:50px; margin:5px -25px; top:100%; text-align:center; font-size:11px; left:50%; opacity:0.5; text-indent:2px;} #fightContent .col-1 .troupes .battery { right:auto; left:100%;} #fightContent .col.col-0 .troupes , #fightContent .col.col-0 .troupes .item { right:2px;} #fightContent .col.col-1 .troupes , #fightContent .col.col-1 .troupes .item { left:2px;} div.clipped .name { bottom:auto !important; top: auto !important;} div.clipped { z-index: 9999999; font-size: 1em; width: 100%; height: 100%; position: absolute; top: auto; bottom:auto; left: 0; color:#FFF; -webkit-transition: -webkit-transform 1.4s ease-in, background 0.3s ease-in; transition: transform 1.4s ease-in, background 0.3s ease-in, color 0.3s ease-in; } .clipped-box { -webkit-transition: top 1.2s linear; transition: top 1.2s linear; width: 100%; position: absolute; backface-visibility:hidden; border-radius:0 !important; } .fightCanvas { position:fixed; top:0; left:0; width:100%; height:100%; z-index:500;} @media screen and (max-height: 820px) { #placeLog { height:164px; } } @media screen and (max-height: 760px) { #placeLog { height:123px; } } @media screen and (max-height: 680px) { #placeLog { height:82px; } } @media screen and (max-height: 520px) { #placeLog { height:41px; } } @media screen and (max-width: 840px) { #fightContent .player { width:140px; margin:0 20px; } #fightContent .picture { width:80px; height:80px;} #fightContent .col { width:250px; } #resumeFight h1 { font-size:36px; } #resumeFight h2 { font-size:22px; } #fightContent .player h3 {font-size:18px;} #fightContent .troupes .bat { width:100px; height:100px; margin:-50px; } #fightContent .picture strong { font-size:26px;} #fightContainer .weapon { width:28px; height:28px; margin:0 18px;} #fightContainer .weapon .itemWeapon { width:28px; height:28px; } } @media screen and (max-width:640px) { #resumeFight h1 { font-size:34px; } #resumeFight h2 { font-size:20px; } #fightContent .player { width:110px; margin:0 20px; } #fightContent .picture { width:70px; height:70px;} #fightContent .col { width:210px; } #fightContent .player h3 {font-size:16px;} #fightContent .player h4 { font-size:12px; } #fightContent .picture strong { font-size:24px;} #fightContent .troupes .troupe { width:40px; height:40px; } #fightContent .item { width:36px; height:36px; background-size:46px;} #fightContent .troupes em { margin:28px 0; } #fightContent .item span { font-size:16px;} #fightContent .troupes em { font-size:16px; background-size:14px; } #fightContent .troupes .bat { width:80px; height:80px; margin:-40px; } } @media screen and (min-width:501px) { #fightBalance div { height:100% !important; } } @media screen and (max-width:500px) { #placeLog { display:none; } #resumeFight h1 { font-size:30px; } #resumeFight h2 { font-size:16px; } #fightBalance div { width:100% !important; top:0; left:0; right:0; } #fightBalance div#bal_0 { top:0;} #fightBalance div#bal_1 { top:auto; bottom:0;} #overlayFight #fightContent { position:absolute; width:100%; height:100%; top:0; left:0;} #fightContent .col { width:100%; top:0; position:absolute; top:0; transform:none; } #fightContent .col.col-0 { left:0;} #fightContent .col.col-1 { right:0; top:auto; bottom:0; } #fightContent .player { width:100%; margin:70px 0; float:none; } #fightContent .player h3 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} #fightContent .col.col-1 h3 , #fightContent .col.col-0 h4 { padding:2px 0; } #fightContent .col.col-0 h3 , #fightContent .col.col-1 h4 { padding:2px 0; } #fightContent .col.col-1 .player .name { top:100%; bottom:auto; } #fightContent .picture { width:60px; height:60px;} #fightContent .picture strong { font-size:22px;} #fightContent .troupes .bat { margin:-60px -40px; } #fightContent .troupes { top:0; transform:none; margin:160px 0; width:100%; text-align:center; } #fightContent .col.col-1 .troupes { bottom:0; top:auto; } #fightContent .troupes .troupe { display:inline-block; text-align:left; margin:0 3px; } #fightContent .troupes .battery , #fightContent .troupes .battery div { background-size:16px; width:16px; height:16px;} #fightContent .troupes .battery strong { display:none;} #fightContent .troupes .battery { left:50%; top:auto; bottom:100%; margin:0px -7px; right:auto; transform-origin:center center; transform:rotate(90deg);} #fightContent .col-1 .troupes .battery { right:auto; top:100%; bottom:auto; left:50%;} #fightContainer .weapon { width:24px; height:24px; bottom:50%; margin:-12px 24px;} #fightContainer .weapon .itemWeapon { width:24px; height:24px; } #fightContent .troupes .damage { top:10%; } #fightContent .col.col-0 .troupes .damage { bottom:10%; top:auto; } }