From 93b51e71e7009a286b6cf168bb59bcea1c83bd89 Mon Sep 17 00:00:00 2001 From: nsensfel Date: Wed, 11 Jul 2018 17:56:00 +0200 Subject: "Battlemap" -> "Battle". --- src/battle/www/style.css | 1059 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 1059 insertions(+) create mode 100644 src/battle/www/style.css (limited to 'src/battle/www/style.css') diff --git a/src/battle/www/style.css b/src/battle/www/style.css new file mode 100644 index 0000000..af30c76 --- /dev/null +++ b/src/battle/www/style.css @@ -0,0 +1,1059 @@ +/******************************************************************************/ +/** LAYOUT ********************************************************************/ +/******************************************************************************/ +.fullscreen-module {} + + +.battle-main-menu +{ + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3em; + + display: flex; + + flex-direction: row; + flex-wrap: wrap; + + border: 3px solid #502D16; + border-top: none; + border-radius: 0 0 15px 15px; + + padding: 0.5em; + + background-color: #917C6F; + + margin: 0 1em 0 1em; +} + +.battle-message-board +{ + position: absolute; + bottom: 0; + left: 0; + right: 0; + + height: 10em; + + border: 3px solid #502D16; + border-radius: 15px 15px 0 0; + border-bottom: none; + + padding: 0.5em; + margin: 0 1em 0 1em; + + background-color: #917C6F; + + display: flex; + flex-flow: row; + justify-content: space-between; +} + +.battle-container-centerer +{ + position: absolute; + top: 4em; + left: 16em; + right: 21em; + bottom: 11em; + + display: flex; +} + +.battle-container +{ + display: inline-block; + max-height: 100%; + max-width: 100%; + /* + * 4em: main-menu + margin. + * 11em: message-board + margin. + */ + /*margin: 0 1em 0 1em; */ + overflow: scroll; + + margin: auto; + resize: both; + + border: 3px solid #502D16; + border-radius: 15px; +} + +.battle-controlled +{ + position: absolute; + left: 0; + top: 4em; + width: 15em; + /* + * 4em: main-menu + margin. + * 11em: message-board + margin. + */ + height: calc(100% - 11em - 4em); + + display: flex; + flex-flow: column; + + justify-content: space-between; + + padding: 0.5em; + + border: 3px solid #502D16; + border-radius: 0 15px 15px 0; + border-left: none; + + background-color: #917C6F; +} + +.battle-sub-menu +{ + position: absolute; + right: 0; + top: 4em; + width: 20em; + /* + * 4em: main-menu + margin. + * 11em: message-board + margin. + */ + height: calc(100% - 11em - 4em); + padding: 0.5em; + overflow: auto; + + border: 3px solid #502D16; + border-radius: 15px 0 0 15px; + border-right: none; + + background-color: #917C6F; +} + +/******************************************************************************/ +/** MESSAGE BOARD *************************************************************/ +/******************************************************************************/ +.battle-error +{ + background-color: #550000; +} + +.battle-message-board .battle-character-card +{ + width: 16em; +} + +.battle-message-attack-text +{ + width: 100%; + text-align: center; + font-size: 1.2em; +} + +.battle-message-board-help +{ + display: block; +} + +.battle-message-board-help h1 +{ + margin: 0; + margin-bottom: 0.3em; + font-size: 1.5em; + text-align: center; +} + +.battle-message-board-help-figure +{ + width: 1.5em; + height: 1.5em; + background-size: 100%; + display: inline-block; + vertical-align: middle; +} + +.battle-help-guide-icon +{ + margin-right: 0.5em; + width: 1.5em; + height: 1.5em; + background-image: url("/asset/svg/help-icon.svg"); + background-size: 100%; + display: inline-block; + vertical-align: middle; +} + +/******************************************************************************/ +/** CONTROLLED PANEL **********************************************************/ +/******************************************************************************/ +.battle-controlled-actions +{ + display: flex; + flex-flow: row wrap; + + align-items: center; + justify-content: center; +} + +.battle-end-turn-button +{ + animation-name: reverse-brown-alarm-bg; + animation-duration: 2s; + animation-iteration-count: infinite; +} + +/** Character Card ************************************************************/ +.battle-character-card, +.battle-tile-card +{ + display: flex; + flex-flow: column; +} + +.battle-character-card-top, +.battle-tile-card-top +{ + margin-top: 0.5em; + position: relative; +} + +.battle-character-portrait +{ + box-sizing: border-box; + border-radius: 5px; + background-size: 100% 100%; + width: 100px; + height: 100px; + overflow: hidden; +} + +.battle-character-portrait +{ + cursor: pointer; +} + +.battle-tile-card-icon +{ + box-sizing: border-box; + border-radius: 5px; + background-size: 300% 300%; + width: 80px; + height: 80px; +} + +.battle-character-portrait * +{ + box-sizing: border-box; + background-size: 100% 100%; + width: inherit; + height: inherit; +} + +.battle-character-portrait-body +{ + z-index: 1; +} + +.battle-character-portrait-armor +{ + position: relative; + z-index: 1; + top: -100%; + background-size: 200% 100%; +} + +.battle-character-card .battle-character-portrait, +.battle-tile-card-icon +{ + top: 0; + left: 0; + margin: 0; + box-sizing: border-box; + box-shadow: + 1px 0px 2px #333, + -1px 0px 2px #333, + 0px 1px 2px #333, + 0px -1px 2px #333; +} + +.battle-character-portrait-team-0 { background-color: rgba(57, 106, 177, 0.3); } +.battle-character-portrait-team-1 { background-color: rgba(204, 37, 41, 0.3); } +.battle-character-portrait-team-2 { background-color: rgba(62, 150, 81, 0.3); } +.battle-character-portrait-team-3 { background-color: rgba(218, 124, 48, 0.3); } +.battle-character-portrait-team-4 { background-color: rgba(83, 81, 84, 0.3); } +.battle-character-portrait-team-5 { background-color: rgba(107, 76, 154, 0.3); } +.battle-character-portrait-team-6 { background-color: rgba(127, 167, 169, 0.3); } +.battle-character-portrait-team-7 { background-color: rgba(231, 167, 169, 0.3); } + +.battle-tile-card-top +{ + margin:0.3em; +} + +.battle-character-card-name, +.battle-tile-card-name, +.battle-tile-card-cost, +.battle-tile-card-location +{ + display:flex; + justify-content:center; + align-items:center; + border-radius: 5px; + background-color: #6C5D53; + width: 100%; +} + +.battle-gauge +{ + position: relative; + border-radius: 5px; + border: 2px solid #6C5D53; + text-align: center; + height: 2em; +} + +.battle-gauge-text +{ + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + z-index: 1; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.battle-gauge-bar +{ + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + z-index: 0; + + border-radius: 5px; + z-index: 0; + transition: width 3s ease-in-out; +} + +.battle-character-card-health, +.battle-tile-card-cost +{ + position: absolute; + left: 100px; + top: 0; + margin-left: 0.5em; + width: calc(100% - 100px - 0.5em); +} + + +.battle-character-card-health > .battle-gauge-bar +{ + background-color: darkred; +} + +.battle-character-card-movement, +.battle-tile-card-location +{ + position: absolute; + left: 100px; + top: calc(1.5em + 1em); + margin-left: 0.5em; + width: calc(100% - 100px - 0.5em); +} + +.battle-character-card-statuses +{ + position: absolute; + left: 100px; + top: calc(2*(1.5em + 0.5em) + 0.7em); + margin-left: 0.5em; + width: calc(100% - 100px - 0.5em); + display: flex; +} + +.battle-character-card-status +{ + height: 1.5em; + width: 1.5em; + background-size: 100%; +} + +.battle-character-card-target-status +{ + background-image: url("/asset/svg/status/target.svg"); +} + +.battle-character-card-commander-status +{ + background-image: url("/asset/svg/status/commander.svg"); +} + +.battle-character-card-movement > .battle-gauge-bar +{ + background-color: darkgrey; +} + +.battle-character-card-weapon, +.battle-character-card-weapon-summary +{ + display: grid; + + border-radius: 5px; + + padding: 0.3em; + margin-top: 0.3em; +} + +.battle-character-card-weapon +{ + background-color: #6C5D53; +} + +.battle-character-card-weapon-summary +{ + background-color: #393939; +} + +.battle-character-card-armor +{ + display: grid; + border-radius: 5px; + background-color: #6C5D53; + + padding: 0.3em; + margin-top: 0.3em; +} + +.battle-character-card-armor-stats +{ + display: grid; + grid-template-columns: [col] 25% [col] 25% [col] 25% [col] 25%; +} + +.battle-character-card-stats +{ + display: grid; + grid-template-columns: [col] 25% [col] 25% [col] 25% [col] 25%; + + border-radius: 5px; + background-color: #6C5D53; + + padding: 0.3em; + margin-top: 0.3em; +} + +/** Manual Controls ***********************************************************/ +.battle-manual-controls +{ + width: 96px; + height: 96px; + display: grid; + grid-template: + '. top .' + 'left go right' + '. bottom .'; + margin: auto; +} + +.battle-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; +} + +.battle-manual-controls > div:hover +{ + opacity: 1; +} + +.battle-manual-controls-go +{ + margin: auto; + width: 28px; + height: 28px; + border-radius: 100em; + grid-area: go; +} + +.battle-manual-controls-up +{ + transform: rotate(-90deg); + grid-area: top; +} + +.battle-manual-controls-down +{ + transform: rotate(90deg); + grid-area: bottom; +} + +.battle-manual-controls-left +{ + transform: rotate(180deg); + grid-area: left; +} + +.battle-manual-controls-right +{ + grid-area: right; +} + +/******************************************************************************/ +/** MAIN MENU *****************************************************************/ +/******************************************************************************/ +.battle-main-menu +{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; +} + +.battle-main-menu button +{ + flex: 1; + + text-transform: uppercase; +} + +/******************************************************************************/ +/** SUB-MENU ******************************************************************/ +/******************************************************************************/ +.battle-tabmenu-characters-tab +{ + display: flex; + flex-grow: 1; + flex-direction: column; + flex-wrap: wrap; +} + +.battle-characters-element-active +{ + animation-name: brown-alarm-bg; + animation-duration: 5s; + animation-iteration-count: infinite; +} + + + +.battle-timeline-element, +.battle-characters-element +{ + flex: 2; + margin: 0.5em 0.5em 0 0.5em; + text-align: center; + border-radius: 5px; + border: 1px solid #502D16; + border-bottom-width: 2px; + padding: 0.5em; +} + +.battle-timeline-element .battle-character-portrait +{ + display: inline-block; + vertical-align: middle; + width: 36px; + height: 36px; +} + +/******************************************************************************/ +/** Main View Elements ********************************************************/ +/******************************************************************************/ +.battle-actual +{ + display: inline-block; + transform-origin: top left; + + /*** Otherwise, it won't display correctly without 'transform: scale' ***/ + position: relative; + background-color: #917C6F; +} + +.battle-tiled +{ + height: 32px; + width: 32px; + /** Fixes odd behavior of table cell being resized. **/ + /* min-width: 32px; */ + /* max-width: 32px; */ +} + +.battle-tile-variant-0 {background-position: 0 0;} +.battle-tile-variant-1 {background-position: 100% 0;} +.battle-tile-variant-2 {background-position: 200% 0;} +.battle-tile-variant-3 {background-position: 0 100%;} +.battle-tile-variant-4 {background-position: 100% 100%;} +.battle-tile-variant-5 {background-position: 200% 100%;} +.battle-tile-variant-6 {background-position: 0 200%;} +.battle-tile-variant-7 {background-position: 100% 200%;} +.battle-tile-variant-8 {background-position: 200% 200%;} + +.battle-tile-icon {z-index: 0; position: absolute; background-size: 300%;} +.battle-path-icon-below-markers {z-index: 1;} +.battle-marker-icon {z-index: 2;} +.battle-path-icon-above-markers {z-index: 3;} +.battle-character-icon {z-index: 4;} + +.battle-marker-icon, +.battle-character-icon, +.battle-path-icon +{ + position: absolute; +} +.battle-tiles-layer +{ + /*display: table; */ +} + +.battle-tiles-layer-row +{ + /* display: table-row; */ +} + +.battle-character-icon +{ + border-radius: 5px; + height: 38px; + margin-top: -6px; +} + +.battle-character-icon * +{ + position: absolute; + left: 0; + top: 0; + background-size: 100% 100%; + width: inherit; + height: inherit; +} + +.battle-character-icon-enabled +{ + animation-name: pulsating; + animation-duration: 1.5s; + animation-iteration-count: infinite; + transform-origin: center; +} + +.battle-character-icon-banner { z-index: 2; } +.battle-character-icon-head { z-index: 1; } +.battle-character-icon-body { z-index: 0; } + +.battle-character-ally +{ +} + +.battle-character-enemy +{ + transform: scale(-1, 1); +} + +/** Navigator Markers *********************************************************/ +.battle-marker-icon.battle-navigator-non-interactive +{ + box-sizing: border-box; + width: 12px; + height: 12px; + background-size: 100%; + margin: 10px; +} + +.battle-marker-icon.battle-navigator-interactive +{ + box-sizing: border-box; + width: 24px; + /*min-width: 24px; + max-width: 24px; */ + margin: 4px 0 0 4px; + height: 24px; + border-radius: 4px; + border: none; + box-shadow: + 1px 0px 2px #333, + -1px 0px 2px #333, + 0px 1px 2px #333, + 0px -1px 2px #333; +} + +.battle-can-go-to-can-defend-marker.battle-navigator-interactive +{ + background-color: #FFF; + opacity: 0.3; + transition: opacity 0.3s ease-out; +} + +.battle-can-go-to-cant-defend-marker.battle-navigator-interactive +{ + background: + repeating-linear-gradient( + -55deg, + rgb(255,255,255), + rgb(255,255,255) 3px, + rgba(0,0,0,0) 3px, + rgba(0,0,0,0) 7px + ); + opacity: 0.3; + transition: opacity 0.3s ease-out; +} + +.battle-can-go-to-can-defend-marker.battle-navigator-interactive:hover, +.battle-can-go-to-cant-defend-marker.battle-navigator-interactive:hover +{ + opacity: 0.9; +} + +.battle-can-attack-can-defend-marker.battle-navigator-interactive +{ + background-color: #000; + opacity: 0.7; + width: 28px; + /*min-width: 28px; + max-width: 28px;*/ + height: 28px; + margin: 2px 0 0 2px; + border-radius: 0; +} + +.battle-can-attack-cant-defend-marker.battle-navigator-interactive +{ + background: + repeating-linear-gradient( + -55deg, + rgba(255,255,255,0), + rgba(255,255,255,0) 3px, + rgb(0,0,0) 3px, + rgb(0,0,0) 7px + ); + width: 28px; + /*min-width: 28px; + max-width: 28px;*/ + opacity: 0.7; + height: 28px; + margin: 2px 0 0 2px; + border-radius: 0; +} + +.battle-can-attack-can-defend-marker.battle-navigator-non-interactive +{ + z-index: 5; + background-image: url(/asset/svg/marker/blade.svg); +} + +.battle-can-attack-cant-defend-marker.battle-navigator-non-interactive +{ + z-index: 5; + background-image: + url(/asset/svg/marker/blade.svg), + url(/asset/svg/marker/brokenshield.svg); +} + +.battle-can-go-to-cant-defend-marker.battle-navigator-non-interactive +{ + background-image: + url(/asset/svg/marker/pawprint.svg), + url(/asset/svg/marker/brokenshield.svg); +} + +.battle-can-attack-cant-defend-marker.battle-navigator-non-interactive, +.battle-can-go-to-cant-defend-marker.battle-navigator-non-interactive +{ + width: 24px; + height: 24px; + background-position: top left, bottom right; + background-size: 50%, 50%; + background-repeat: no-repeat, no-repeat; + margin: 2px; +} + +.battle-can-go-to-can-defend-marker.battle-navigator-non-interactive +{ + background-image: url(/asset/svg/marker/pawprint.svg); +} + +.battle-can-attack-can-defend-marker.battle-navigator-non-interactive, +.battle-can-attack-cant-defend-marker.battle-navigator-non-interactive +{ + z-index: 5; +} + +.battle-can-go-to-can-defend-marker, +.battle-can-go-to-cant-defend-marker +{ + z-index: 3; +} + +.battle-cant-defend-marker +{ + background: + repeating-linear-gradient( + -55deg, + rgba(255,255,255,0.3), + rgba(255,255,255,0.3) 3px, + rgba(0,0,0,0.3) 3px, + rgba(0,0,0,0.3) 7px + ); +} + +.battle-character-ally.battle-character-icon-disabled +{ + filter: contrast(35%); +} + + +/**** Selection Classes *******************************************************/ +.battle-character-targeted +{ + background-color: rgba(255,0,0,0.7); + animation-name: red-alarm-bg; + animation-duration: 5s; + animation-iteration-count: infinite; +} + +.battle-character-selected +{ + animation-name: strongly-pulsating; + animation-duration: 1.5s; + animation-iteration-count: infinite; +} + +/**** Path Icons **************************************************************/ +.battle-path-icon +{ + background-image: url("/asset/svg/arrows.svg"); + background-size: 96px 32px; +} + +.battle-path-icon-UR, +.battle-path-icon-LD, +.battle-path-icon-RD, +.battle-path-icon-UL, +.battle-path-icon-LU, +.battle-path-icon-DR, +.battle-path-icon-DL, +.battle-path-icon-RU +{ + /*** Default is -^ ***/ + background-position: 64px 0; +} +/*** DL/RU ***/ + +.battle-path-icon-LU, +.battle-path-icon-DR +{ + transform: rotate(90deg); +} + +.battle-path-icon-RD, +.battle-path-icon-UL +{ + /*** ***/ + transform: scale(1, -1); +} + +.battle-path-icon-UR, +.battle-path-icon-LD +{ + /*** <| ***/ + transform: rotate(180deg); +} + +.battle-path-icon-RR, +.battle-path-icon-LR, +.battle-path-icon-RL, +.battle-path-icon-LL +{ + background-position: 0 0; +} + +.battle-path-icon-markN, +.battle-path-icon-NU, +.battle-path-icon-ND, +.battle-path-icon-NL, +.battle-path-icon-NR +{ + display: none; +} + +.battle-path-icon-UU, +.battle-path-icon-UD, +.battle-path-icon-DU, +.battle-path-icon-DD +{ + background-position: 0 0; + transform: rotate(90deg); +} + +.battle-path-icon-markR, +.battle-path-icon-markL, +.battle-path-icon-markU, +.battle-path-icon-markD +{ + background-position: 32px 0; +} + +.battle-path-icon-markL +{ + transform: rotate(180deg); +} + +.battle-path-icon-markD +{ + transform: rotate(90deg); +} + +.battle-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);} + 50% {background-color: rgba(255,0,0,1);} + 100% {background-color: rgba(255,0,0,0.25);} +} + +@keyframes pulsating { + 0% { opacity: 1.0; transform: scale(1);} + 25% { opacity: 1.0; transform: scale(1);} + 30% { opacity: 0.8; transform: scale(1.1);} + 50% { opacity: 1.0; transform: scale(1);} + 100% { opacity: 1.0; transform: scale(1);} +} + +@keyframes strongly-pulsating { + 0% { opacity: 1.0; transform: scale(1);} + 50% { opacity: 0.8; transform: scale(1.5);} + 100% { opacity: 1.0; transform: scale(1);} +} + +@keyframes brown-alarm-bg { + 0% {background-color: #917C6F;} + 25% {background-color: #AC9D93} + 50% {background-color: #AC9D93} + 100% {background-color: #917C6F;} +} + +@keyframes reverse-brown-alarm-bg { + 0% {background-color: #917C6F;} + 50% {background-color: #502D16;} + 100% {background-color: #917C6F;} +} + +@keyframes blue-alarm-bg { + 0% {background-color: rgba(0,0,255,0.2);} + 25% {background-color: rgba(0,0,255,0.8);} + 50% {background-color: rgba(0,0,255,0.8);} + 100% {background-color: rgba(0,0,255,0.2);} +} + +@keyframes blinking { + to { visibility: hidden; } +} + +@keyframes blinking2 { + from { opacity: 1; } + to { opacity: 0; } +} + +@keyframes dodges { + 0% { transform: translate(0, 0); } + 50% { transform: translate(-75%, 0); } + 100% { transform: translate(0, 0); } +} + +@keyframes attacks { + 0% { transform: translate(0, 0); } + 25% { transform: translate(25%, 0); } + 100% { transform: translate(0, 0); } +} + +@keyframes parries { + 0% { transform: translate(0, 0); } + 25% { transform: translate(-25%, 0); } + 50% { transform: translate(50%, 20%); } + 100% { transform: translate(0, 0); } +} + +@keyframes dies { + from { transform: translate(0, 0) rotate(0); } + to { transform: translate(0, 100%) rotate(25deg); } +} + +@keyframes blue-alarm-bd { + 0% {border-color: rgba(0,0,255,0.25);} + 25% {border-color: rgba(0,0,255,1);} + 100% {border-color: rgba(0,0,255,0.25);} +} + +/******************************************************************************/ +/** Timeline Animations *******************************************************/ +/******************************************************************************/ +/**** Character Icon Animations ***********************************************/ +.battle-animated-character-icon +{ + transition: top linear 0.3s, left linear 0.3s; +} + +/**** Character Portrait Animations *******************************************/ +.battle-animated-portrait-damaged .battle-character-portrait > * +{ + animation: blinking 0.2s steps(2, start) 8; +} + +.battle-animated-portrait-absent .battle-character-portrait > * +{ + visibility: hidden; +} + +.battle-animated-portrait-dodges .battle-character-portrait, +.battle-animated-portrait-dies .battle-character-portrait, +.battle-animated-portrait-parries .battle-character-portrait, +.battle-animated-portrait-attacks .battle-character-portrait +{ + overflow: hidden; +} + +.battle-animated-portrait +{ +} + +.battle-animated-portrait-dodges .battle-character-portrait > * +{ + animation-name: dodges; + animation-duration: 1s; + animation-iteration-count: 1; +} + +.battle-animated-portrait-attacks .battle-character-portrait > * +{ + animation-name: attacks; + animation-duration: 1s; + animation-iteration-count: 1; +} + +.battle-animated-portrait-dies .battle-character-portrait > * +{ + animation-name: blinking2, dies; + animation-duration: 0.15s, 2s; + animation-delay: 0s, 1s; + animation-iteration-count: 8, 1; +} + +.battle-animated-portrait-parries .battle-character-portrait > * +{ + animation-name: parries; + animation-duration: 1s; + animation-iteration-count: 1; +} -- cgit v1.2.3-70-g09d2