summaryrefslogtreecommitdiff
path: root/src/battlemap/www/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'src/battlemap/www/style.css')
-rw-r--r--src/battlemap/www/style.css502
1 files changed, 237 insertions, 265 deletions
diff --git a/src/battlemap/www/style.css b/src/battlemap/www/style.css
index 2688bdd..358c261 100644
--- a/src/battlemap/www/style.css
+++ b/src/battlemap/www/style.css
@@ -31,7 +31,7 @@
margin: 0 1em 0 1em;
}
-.battlemap-help
+.battlemap-message-board
{
grid-column: col 1 / span 3;
grid-row: row 3;
@@ -50,11 +50,6 @@
justify-content: space-between;
}
-.battlemap-help .battlemap-character-card
-{
- width: 30%;
-}
-
.battlemap-container
{
grid-column: col 2;
@@ -108,70 +103,23 @@
}
/******************************************************************************/
-/** HELP PANEL ****************************************************************/
+/** MESSAGE BOARD *************************************************************/
/******************************************************************************/
.battlemap-error
{
background-color: #550000;
}
-.battlemap-manual-controls
-{
- width: 96px;
- height: 96px;
- display: grid;
- grid-template:
- '. top .'
- 'left go right'
- '. bottom .';
- margin: auto;
-}
-
-.battlemap-manual-controls > div
-{
- width: 32px;
- height: 32px;
- background-image: url(/asset/svg/arrowhead.svg);
- background-size: 100%;
- transition: opacity 0.3s ease-out;
- opacity: 0.5;
-}
-
-.battlemap-manual-controls > div:hover
+.battlemap-message-board .battlemap-character-card
{
- opacity: 1;
+ width: 16em;
}
-.battlemap-manual-controls-go
-{
- margin: auto;
- width: 28px;
- height: 28px;
- border-radius: 100em;
- grid-area: go;
-}
-
-.battlemap-manual-controls-up
-{
- transform: rotate(-90deg);
- grid-area: top;
-}
-
-.battlemap-manual-controls-down
-{
- transform: rotate(90deg);
- grid-area: bottom;
-}
-
-.battlemap-manual-controls-left
-{
- transform: rotate(180deg);
- grid-area: left;
-}
-
-.battlemap-manual-controls-right
+.battlemap-message-attack-text
{
- grid-area: right;
+ width: 100%;
+ text-align: center;
+ font-size: 1.2em;
}
/******************************************************************************/
@@ -186,6 +134,14 @@
justify-content: center;
}
+.battlemap-end-turn-button
+{
+ animation-name: reverse-brown-alarm-bg;
+ animation-duration: 2s;
+ animation-iteration-count: infinite;
+}
+
+/** Character Card ************************************************************/
.battlemap-character-card,
.battlemap-tile-card
{
@@ -206,6 +162,51 @@
margin-top: 0.3em;
}
+.battlemap-character-portrait
+{
+ box-sizing: border-box;
+ border-radius: 5px;
+ background-size: 100% 100%;
+ width: 100px;
+ height: 100px;
+ overflow: hidden;
+}
+
+.battlemap-character-portrait:hover
+{
+ cursor: pointer;
+}
+
+.battlemap-tile-card-icon
+{
+ box-sizing: border-box;
+ border-radius: 5px;
+ background-size: 300% 300%;
+ width: 80px;
+ height: 80px;
+}
+
+.battlemap-character-portrait *
+{
+ box-sizing: border-box;
+ background-size: 100% 100%;
+ width: inherit;
+ height: inherit;
+}
+
+.battlemap-character-portrait-body
+{
+ z-index: 1;
+}
+
+.battlemap-character-portrait-armor
+{
+ position: relative;
+ z-index: 1;
+ top: -100%;
+ background-size: 200% 100%;
+}
+
.battlemap-character-card .battlemap-character-portrait,
.battlemap-tile-card-icon
{
@@ -274,7 +275,7 @@
border-radius: 5px;
z-index: 0;
top: -100%;
- transition: width 1s ease-out;
+ transition: width 3s ease-in-out;
}
.battlemap-character-card-health,
@@ -352,6 +353,66 @@
margin-top: 0.3em;
}
+/** Manual Controls ***********************************************************/
+.battlemap-manual-controls
+{
+ width: 96px;
+ height: 96px;
+ display: grid;
+ grid-template:
+ '. top .'
+ 'left go right'
+ '. bottom .';
+ margin: auto;
+}
+
+.battlemap-manual-controls > div
+{
+ width: 32px;
+ height: 32px;
+ background-image: url(/asset/svg/arrowhead.svg);
+ background-size: 100%;
+ transition: opacity 0.3s ease-out;
+ opacity: 0.5;
+}
+
+.battlemap-manual-controls > div:hover
+{
+ opacity: 1;
+}
+
+.battlemap-manual-controls-go
+{
+ margin: auto;
+ width: 28px;
+ height: 28px;
+ border-radius: 100em;
+ grid-area: go;
+}
+
+.battlemap-manual-controls-up
+{
+ transform: rotate(-90deg);
+ grid-area: top;
+}
+
+.battlemap-manual-controls-down
+{
+ transform: rotate(90deg);
+ grid-area: bottom;
+}
+
+.battlemap-manual-controls-left
+{
+ transform: rotate(180deg);
+ grid-area: left;
+}
+
+.battlemap-manual-controls-right
+{
+ grid-area: right;
+}
+
/******************************************************************************/
/** MAIN MENU *****************************************************************/
/******************************************************************************/
@@ -388,56 +449,7 @@
animation-iteration-count: infinite;
}
-.battlemap-end-turn-button
-{
- animation-name: reverse-brown-alarm-bg;
- animation-duration: 2s;
- animation-iteration-count: infinite;
-}
-
-.battlemap-character-portrait:hover
-{
- cursor: pointer;
-}
-
-.battlemap-character-portrait
-{
- box-sizing: border-box;
- border-radius: 5px;
- background-size: 100% 100%;
- width: 100px;
- height: 100px;
-}
-
-.battlemap-tile-card-icon
-{
- box-sizing: border-box;
- border-radius: 5px;
- background-size: 300% 300%;
- width: 80px;
- height: 80px;
-}
-
-.battlemap-character-portrait *
-{
- box-sizing: border-box;
- background-size: 100% 100%;
- width: inherit;
- height: inherit;
-}
-.battlemap-character-portrait-body
-{
- z-index: 1;
-}
-
-.battlemap-character-portrait-armor
-{
- position: relative;
- z-index: 1;
- top: -100%;
- background-size: 200% 100%;
-}
.battlemap-timeline-element,
.battlemap-characters-element
@@ -557,6 +569,7 @@
transform: scale(-1, 1);
}
+/** Navigator Markers *********************************************************/
.battlemap-marker-icon.battlemap-navigator-non-interactive
{
box-sizing: border-box;
@@ -679,7 +692,7 @@
}
.battlemap-can-attack-can-defend-marker.battlemap-navigator-non-interactive,
-.battlemap-can-attack-cant-defend-marker..battlemap-navigator-non-interactive
+.battlemap-can-attack-cant-defend-marker.battlemap-navigator-non-interactive
{
z-index: 5;
}
@@ -707,101 +720,116 @@
filter: contrast(35%);
}
-.battlemap-animated-character-icon
+
+/**** Selection Classes *******************************************************/
+.battlemap-character-targeted
{
- transition: top linear 0.3s, left linear 0.3s;
+ background-color: rgba(255,0,0,0.7);
+ animation-name: red-alarm-bg;
+ animation-duration: 5s;
+ animation-iteration-count: infinite;
}
-.battlemap-animated-portrait-damaged .battlemap-character-portrait > *
+.battlemap-character-selected
{
- animation: blinking 0.2s steps(2, start) 8;
+ animation-name: strongly-pulsating;
+ animation-duration: 1.5s;
+ animation-iteration-count: infinite;
}
-.battlemap-animated-portrait-absent .battlemap-character-portrait > *
+/**** Path Icons **************************************************************/
+.battlemap-path-icon
{
- visibility: hidden;
+ background-image: url("/asset/svg/arrows.svg");
+ background-size: 96px 32px;
}
-.battlemap-animated-portrait-dodges .battlemap-character-portrait,
-.battlemap-animated-portrait-dies .battlemap-character-portrait,
-.battlemap-animated-portrait-parries .battlemap-character-portrait,
-.battlemap-animated-portrait-attacks .battlemap-character-portrait
+.battlemap-path-icon-UR,
+.battlemap-path-icon-LD,
+.battlemap-path-icon-RD,
+.battlemap-path-icon-UL,
+.battlemap-path-icon-LU,
+.battlemap-path-icon-DR,
+.battlemap-path-icon-DL,
+.battlemap-path-icon-RU
{
- overflow: hidden;
+ /*** Default is -^ ***/
+ background-position: 64px 0;
}
+/*** DL/RU ***/
-.battlemap-animated-portrait
+.battlemap-path-icon-LU,
+.battlemap-path-icon-DR
{
- width: 100%;
- height: 100%;
+ transform: rotate(90deg);
}
-.battlemap-animated-portrait-dodges .battlemap-character-portrait > *
+.battlemap-path-icon-RD,
+.battlemap-path-icon-UL
{
- animation-name: dodges;
- animation-duration: 1s;
- animation-iteration-count: 1;
+ /*** ***/
+ transform: scale(1, -1);
}
-.battlemap-animated-portrait-attacks .battlemap-character-portrait > *
+.battlemap-path-icon-UR,
+.battlemap-path-icon-LD
{
- animation-name: attacks;
- animation-duration: 1s;
- animation-iteration-count: 1;
+ /*** <| ***/
+ transform: rotate(180deg);
}
-.battlemap-animated-portrait-dies .battlemap-character-portrait > *
+.battlemap-path-icon-RR,
+.battlemap-path-icon-LR,
+.battlemap-path-icon-RL,
+.battlemap-path-icon-LL
{
- animation-name: blinking, dies;
- animation-duration: 1s, 2s;
- animation-delay: 0s, 1s;
- animation-iteration-count: 1, 1;
- animation-fill: default, forwards;
+ background-position: 0 0;
}
-.battlemap-animated-portrait-parries .battlemap-character-portrait > *
+.battlemap-path-icon-markN,
+.battlemap-path-icon-NU,
+.battlemap-path-icon-ND,
+.battlemap-path-icon-NL,
+.battlemap-path-icon-NR
{
- animation-name: parries;
- animation-duration: 1s;
- animation-iteration-count: 1;
+ display: none;
}
-.battlemap-animation-move-1
-.battlemap-animation-move-R,
-.battlemap-animation-move-L,
-.battlemap-animation-move-U,
-.battlemap-animation-move-D
+.battlemap-path-icon-UU,
+.battlemap-path-icon-UD,
+.battlemap-path-icon-DU,
+.battlemap-path-icon-DD
{
- animation-duration: 0.3s;
- animation-iteration-count: 1;
- animation-fill-mode: forwards;
+ background-position: 0 0;
+ transform: rotate(90deg);
}
-.battlemap-animation-move-R { animation-name: move-right; }
-.battlemap-animation-move-L { animation-name: move-left; }
-.battlemap-animation-move-U { animation-name: move-up; }
-.battlemap-animation-move-D { animation-name: move-down; }
-
-@keyframes move-right {
- from { transform: translate(0, 0);}
- to { transform: translate(100%, 0);}
+.battlemap-path-icon-markR,
+.battlemap-path-icon-markL,
+.battlemap-path-icon-markU,
+.battlemap-path-icon-markD
+{
+ background-position: 32px 0;
}
-@keyframes move-left {
- from { transform: translate(0, 0);}
- to { transform: translate(-100%, 0);}
+.battlemap-path-icon-markL
+{
+ transform: rotate(180deg);
}
-@keyframes move-up {
- from { transform: translate(0, 0);}
- to { transform: translate(0, -100%);}
+.battlemap-path-icon-markD
+{
+ transform: rotate(90deg);
}
-@keyframes move-down {
- from { transform: translate(0, 0);}
- to { transform: translate(0, 100%);}
+.battlemap-path-icon-markU
+{
+ transform: rotate(-90deg);
}
+/******************************************************************************/
+/** Animations ****************************************************************/
+/******************************************************************************/
@keyframes red-alarm-bg {
0% {background-color: rgba(255,0,0,0.25);}
25% {background-color: rgba(255,0,0,1);}
@@ -809,12 +837,6 @@
100% {background-color: rgba(255,0,0,0.25);}
}
-@keyframes flickering-opacity {
- 0% { opacity: 1.0;}
- 50% { opacity: 0.7; }
- 100% { opacity: 1.0; }
-}
-
@keyframes pulsating {
0% { opacity: 1.0; transform: scale(1);}
25% { opacity: 1.0; transform: scale(1);}
@@ -853,6 +875,11 @@
to { visibility: hidden; }
}
+@keyframes blinking2 {
+ from { opacity: 1; }
+ to { opacity: 0; }
+}
+
@keyframes dodges {
0% { transform: translate(0, 0); }
50% { transform: translate(-75%, 0); }
@@ -873,8 +900,8 @@
}
@keyframes dies {
- from { transform: translate(0, 0); }
- to { transform: translate(0, 100%); }
+ from { transform: translate(0, 0) rotate(0); }
+ to { transform: translate(0, 100%) rotate(25deg); }
}
@keyframes blue-alarm-bd {
@@ -883,118 +910,63 @@
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: 5s;
- animation-iteration-count: infinite;
-}
-
-.battlemap-character-selected
-{
- animation-name: strongly-pulsating;
- animation-duration: 1.5s;
- 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 **************************************************************/
-.battlemap-path-icon
-{
- background-image: url("/asset/svg/arrows.svg");
- background-size: 96px 32px;
-}
-
-.battlemap-path-icon-UR,
-.battlemap-path-icon-LD,
-.battlemap-path-icon-RD,
-.battlemap-path-icon-UL,
-.battlemap-path-icon-LU,
-.battlemap-path-icon-DR,
-.battlemap-path-icon-DL,
-.battlemap-path-icon-RU
-{
- /*** Default is -^ ***/
- background-position: 64px 0;
-}
-/*** DL/RU ***/
-
-.battlemap-path-icon-LU,
-.battlemap-path-icon-DR
-{
- transform: rotate(90deg);
-}
-
-.battlemap-path-icon-RD,
-.battlemap-path-icon-UL
+/******************************************************************************/
+/** Timeline Animations *******************************************************/
+/******************************************************************************/
+/**** Character Icon Animations ***********************************************/
+.battlemap-animated-character-icon
{
- /*** ***/
- transform: scale(1, -1);
+ transition: top linear 0.3s, left linear 0.3s;
}
-.battlemap-path-icon-UR,
-.battlemap-path-icon-LD
+/**** Character Portrait Animations *******************************************/
+.battlemap-animated-portrait-damaged .battlemap-character-portrait > *
{
- /*** <| ***/
- transform: rotate(180deg);
+ animation: blinking 0.2s steps(2, start) 8;
}
-.battlemap-path-icon-RR,
-.battlemap-path-icon-LR,
-.battlemap-path-icon-RL,
-.battlemap-path-icon-LL
+.battlemap-animated-portrait-absent .battlemap-character-portrait > *
{
- background-position: 0 0;
+ visibility: hidden;
}
-.battlemap-path-icon-markN,
-.battlemap-path-icon-NU,
-.battlemap-path-icon-ND,
-.battlemap-path-icon-NL,
-.battlemap-path-icon-NR
+.battlemap-animated-portrait-dodges .battlemap-character-portrait,
+.battlemap-animated-portrait-dies .battlemap-character-portrait,
+.battlemap-animated-portrait-parries .battlemap-character-portrait,
+.battlemap-animated-portrait-attacks .battlemap-character-portrait
{
- display: none;
+ overflow: hidden;
}
-.battlemap-path-icon-UU,
-.battlemap-path-icon-UD,
-.battlemap-path-icon-DU,
-.battlemap-path-icon-DD
+.battlemap-animated-portrait
{
- background-position: 0 0;
- transform: rotate(90deg);
}
-.battlemap-path-icon-markR,
-.battlemap-path-icon-markL,
-.battlemap-path-icon-markU,
-.battlemap-path-icon-markD
+.battlemap-animated-portrait-dodges .battlemap-character-portrait > *
{
- background-position: 32px 0;
+ animation-name: dodges;
+ animation-duration: 1s;
+ animation-iteration-count: 1;
}
-.battlemap-path-icon-markL
+.battlemap-animated-portrait-attacks .battlemap-character-portrait > *
{
- transform: rotate(180deg);
+ animation-name: attacks;
+ animation-duration: 1s;
+ animation-iteration-count: 1;
}
-.battlemap-path-icon-markD
+.battlemap-animated-portrait-dies .battlemap-character-portrait > *
{
- transform: rotate(90deg);
+ animation-name: blinking2, dies;
+ animation-duration: 0.15s, 2s;
+ animation-delay: 0s, 1s;
+ animation-iteration-count: 8, 1;
}
-.battlemap-path-icon-markU
+.battlemap-animated-portrait-parries .battlemap-character-portrait > *
{
- transform: rotate(-90deg);
+ animation-name: parries;
+ animation-duration: 1s;
+ animation-iteration-count: 1;
}