MediaWiki:AttackPattern.css

/* Attack Pattern Grid CSS Authors: luxionmk2 & AntiDuffman Created: Dec 5th, 2012

Updates:

div#ap-grid { background-color:green; position:relative; width:336px; height:195px; padding:0; border:0; margin:0; }

.translucent { opacity: 0.4; filter: alpha(opacity = 40); /* For IE */ }

div#ap-bgmap, div#ap-content { position: absolute; top: 0; left: 0; }

div#ap-bgmap { background-size:336px 280px; background-position:0px -42px; width:336px; height:195px; }

div#ap-bgmap.outpost {background-image: url('http://luxions-workshop.com/bn/images/BattleMap.png');} div#ap-bgmap.marin {background-image: url('http://luxions-workshop.com/bn/images/BattleMapMarin.png');} div#ap-bgmap.snow {background-image: url('http://luxions-workshop.com/bn/images/BattleMapSnow.png');} div#ap-bgmap.jungle {background-image: url('http://luxions-workshop.com/bn/images/BattleMapRaider.png');} div#ap-bgmap.frontier {background-image: url('http://luxions-workshop.com/bn/images/BattleMapFrontier.png');} div#ap-bgmap.frontiertown {background-image: url('http://luxions-workshop.com/bn/images/BattleMapFrontierTown.png');}

table#ap-bottom-grid { position:relative; top: 78px; left:20px; transform:rotate(45deg) skew(-15deg, -15deg); -webkit-transform:rotate(45deg) skew(-15deg, -15deg); /* Safari and Chrome */ -moz-transform: rotate(45deg) skew(-15deg, -15deg); }

table#ap-top-grid { left: 130px; top:-97px; position:relative; transform:rotate(-135deg) skew(-15deg, -15deg); -webkit-transform:rotate(-135deg) skew(-15deg, -15deg); /* Safari and Chrome */ -moz-transform: rotate(-135deg) skew(-15deg, -15deg); }

table#ap-bottom-grid td, table#ap-top-grid td { line-height:0; font:16px arial; color:white; text-align:center; width:34px; height:34px; max-width:34px; max-height:34px; padding:0px; overflow-x:visible; overflow-y:visible; }

td.ap-grid { background: rgba(53,219,46,.4); border: solid 1px rgb(53,219,46); }

td.ap-grid-top { border-top: solid 2px rgb(53,219,46); }

td.ap-grid-left { border-left: solid 2px rgb(53,219,46); }

td.ap-grid-right { border-right: solid 2px rgb(53,219,46); }

td.ap-grid-bottom { border-bottom: solid 2px rgb(53,219,46); }

td.ap-highlight-attacker { background: rgba(255,60,60,0.8); } td.ap-highlight-targetable { background: rgba(58,181,155,.7); } td.ap-highlight-50 { background: rgba(56,250,205,.7); } td.ap-highlight-100 { background: rgba(56,250,205,.9); } td.ap-highlight-white { background: rgba(205,240,205,.9); } td.ap-highlight-splash-20 { background: rgba(231,242,15,.5); } td.ap-highlight-splash-60 { background: rgba(231,242,15,.8); }

img.ap-attacker { position: relative; z-index: 10; }

img#straighten-bottom-crosshair { position: relative; z-index: 1; width: 80px; margin: -16px -23px; -webkit-transform: rotate(-45deg) scale(0.5,1); /* Safari and Chrome */ -moz-transform: rotate(-45deg) scale(0.5,1); transform:rotate(-45deg) scale(0.5,.8); }

td#bg-bottom-crosshair { background-image: url('http://luxions-workshop.com/bn/images/aoe.png'); background-size: 34px 34px; background-repeat: no-repeat; }

img#straighten-top-crosshair { position: relative; z-index: 1; width: 80px; margin: -16px -23px; -webkit-transform: rotate(135deg) scale(0.5,.8); /* Safari and Chrome */ -moz-transform: rotate(135deg) scale(0.5,.8); transform:rotate(135deg) scale(0.5,.8); }

img#straighten-bottom-image { width: 60px; margin: -18px -16px -12px -32px; border:0px; padding:0px; z-index: 10; -webkit-transform: rotate(-45deg) scale(0.5,1); /* Safari and Chrome */ -moz-transform: rotate(-45deg) scale(0.5,1); transform:rotate(-45deg) scale(0.5,.8); }

img#straighten-top-image { width: 80px; margin:-39px -59px -47px -32px; border:0px; padding:0px; -webkit-transform: rotate(135deg) scale(0.5,.8); /* Safari and Chrome */ -moz-transform: rotate(135deg) scale(0.5,.8); transform:rotate(135deg) scale(0.5,.8); }