MediaWiki:BattlePattern.css

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

Updates:

divbp-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#bp-bgmap, div#bp-content { position: absolute; top: 0; left: 0; }

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

div#bp-bgmap.outpost {background-image: url('https://images.wikia.nocookie.net/battlenations/images/f/f2/BattleMap.png');} div#bp-bgmap.marin {background-image: url('https://images.wikia.nocookie.net/battlenations/images/0/02/BattleMapMarin.png');} div#bp-bgmap.raider {background-image: url('https://images.wikia.nocookie.net/battlenations/images/b/b6/BattleMapRaider.png');} div#bp-bgmap.snow {background-image: url('https://images.wikia.nocookie.net/battlenations/images/b/b8/BattleMapSnow.png');} div#bp-bgmap.jungle {background-image: url('https://images.wikia.nocookie.net/battlenations/images/5/56/BattleMapJungle.png');} div#bp-bgmap.frontier {background-image: url('https://images.wikia.nocookie.net/battlenations/images/3/34/BattleMapFrontier.png');} div#bp-bgmap.frontiertown {background-image: url('https://images.wikia.nocookie.net/battlenations/images/d/d9/BattleMapFrontierTown.png');} div#bp-bgmap.sky {background-image: url('https://images.wikia.nocookie.net/battlenations/images/b/bd/CustomMapSky.png');}

table#bp-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); z-index: 2; }

table#bp-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); z-index: 1; }

table#bp-bottom-grid td, table#bp-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.bp-grid { background: rgba(53,219,46,.4); border: solid 1px rgb(53,219,46); }

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

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

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

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

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

.bp-attacker { z-index: 10; }

/* experimental use of crosshair as "background" */ td#bg-bottom-crosshair { background-image: url('https://images.wikia.nocookie.net/battlenations/images/5/57/Aoe_targeting.png'); background-size: 34px 34px; background-repeat: no-repeat; } /* END experimental use of crosshair as "background" */

/* div container for crosshair image */ div#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); }

div#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); } /* END div container for crosshair image */

/* div container for straightening images in respective skewed tables */ div#straighten-bottom-image { margin: -18px -16px -12px -32px; -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); }

div#straighten-top-image { width: 80px; margin: -15px -10px; -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); } /* END div container for straightening images in respective skewed tables */