More cats, meh selection/target indicators.

1 files changed, 49 insertions, 6 deletions

diff --git a/src/battlemap/www/style.css b/src/battlemap/www/style.css
index 66ecd12..96c7317 100644
--- a/src/battlemap/www/style.css
+++ b/src/battlemap/www/style.css
@@ -219,7 +219,8 @@
 {
    margin: 0.5em;
    box-sizing: border-box;
-   border: 2px solid rgba(0,0,0,0.5);
+   border-radius: 5px;
+   background-size: 100% 100%;
    width: 100px;
    height: 100px;
 }
@@ -308,17 +309,17 @@
 .battlemap-character-icon
 {
    box-sizing: border-box;
-   border: 2px solid rgba(0,0,0,0.5);
+   border-radius: 5px;
+   background-size: 100% 100%;
 }
 
 .battlemap-character-ally
 {
-   border-radius: 25px 25px 0 25px;
 }
 
 .battlemap-character-enemy
 {
-   border-radius: 25px 25px 25px 0;
+   transform: scale(-1, 1);
 }
 
 .battlemap-marker-icon
@@ -376,8 +377,50 @@
 .battlemap-character-icon-disabled
 {
    opacity: 0.4;
-   filter: grayscale(50%);
-   border: 2px dotted rgba(0,0,0,0.7);
+}
+
+@keyframes red-alarm-bg {
+    0% {background-color: rgba(255,0,0,0.25);}
+    75% {background-color: rgba(255,0,0,1);}
+    100% {background-color: rgba(255,0,0,0.25);}
+}
+
+@keyframes blue-alarm-bg {
+    0% {background-color: rgba(0,0,255,0.25);}
+    75% {background-color: rgba(0,0,255,1);}
+    100% {background-color: rgba(0,0,255,0.25);}
+}
+
+@keyframes blue-alarm-bd {
+    0% {border-color: rgba(0,0,255,0.25);}
+    75% {border-color: rgba(0,0,255,1);}
+    100% {border-color: rgba(0,0,255,0.25);}
+}
+
+.battlemap-character-targeted
+{
+   background-color: rgba(255,0,0,0.7);
+   animation-name: red-alarm-bg;
+   animation-duration: 2s;
+   animation-iteration-count: infinite;
+}
+
+.battlemap-character-selected
+{
+   background-color: rgba(0,0,255,0.7);
+   animation-name: blue-alarm-bg;
+   animation-duration: 2s;
+   animation-iteration-count: infinite;
+}
+
+.battlemap-tile-selected
+{
+   box-sizing: border-box;
+   border-size: 2px solid;
+   border-color: rgba(0,0,255,0.7);
+   animation-name: blue-alarm-bg;
+   animation-duration: 2s;
+   animation-iteration-count: infinite;
 }
 
 /**** Path Icons **************************************************************/