| summaryrefslogtreecommitdiff |
diff options
Diffstat (limited to 'src/css')
38 files changed, 293 insertions, 484 deletions
diff --git a/src/css/src/battle.scss b/src/css/src/battle.scss index a341ce3..c9a7d00 100644 --- a/src/css/src/battle.scss +++ b/src/css/src/battle.scss @@ -1,45 +1,8 @@ -@import 'shared/colors'; -@import 'shared/shadows'; - -* -{ - color: $GOLD-0; - @include text-shadow(1px, $BROWN-0, 0.5); -} - -body -{ - background-color: $BROWN-2; -} - -button -{ - flex: 1; - - text-transform: uppercase; - background-color: $BROWN-3; - border-color: $BROWN-1; -} - -button + button -{ - margin-left: 0.5em; -} - -button:hover -{ - background-color: $BROWN-4; -} - -button:disabled -{ - background-color: $BROWN-0; -} +@import 'shared/battleview'; @import 'battle/controlled-panel'; @import 'battle/info-card'; @import 'battle/keyframes'; -@import 'battle/main-menu'; @import 'battle/map'; @import 'battle/message-board'; @import 'battle/sub-menus'; diff --git a/src/css/src/battle/constants.scss b/src/css/src/battle/constants.scss index 06a1e6b..3e08351 100644 --- a/src/css/src/battle/constants.scss +++ b/src/css/src/battle/constants.scss @@ -1,15 +1,7 @@ -$MENU-MARGIN: 0.5em; -$MENU-PADDING: 0.5em; -$MENU-BORDER: 0.2em; +@import '../shared/battleview/constants'; -$MAIN-MENU-HEIGHT: 3em; -$MESSAGE-BOARD-HEIGHT: 10em; $CONTROLLED-MENU-WIDTH: 15em; $SUB-MENU-WIDTH: 20em; -$MENU-EXTRA: $MENU-MARGIN;// + $MENU-PADDING + $MENU-BORDER; - $NEXT-TO-CONTROLLED-MENU: $CONTROLLED-MENU-WIDTH + $MENU-EXTRA; $NEXT-TO-SUB-MENU: $SUB-MENU-WIDTH + $MENU-EXTRA; -$BELOW-MAIN-MENU: $MAIN-MENU-HEIGHT + $MENU-EXTRA; -$ABOVE-MESSAGE-BOARD: $MESSAGE-BOARD-HEIGHT + $MENU-EXTRA; diff --git a/src/css/src/battle/controlled-panel.scss b/src/css/src/battle/controlled-panel.scss index 7ac39f8..fe6cb13 100644 --- a/src/css/src/battle/controlled-panel.scss +++ b/src/css/src/battle/controlled-panel.scss @@ -1,22 +1,18 @@ +@import '../shared/battleview/constants'; +@import '../shared/battleview/menu-mixins'; + @import 'constants'; -@import 'menu-mixins'; -.battle-controlled +.controlled { - position: absolute; - display: block; + @include menu-panel(); + left: 0; top: $BELOW-MAIN-MENU; bottom: $ABOVE-MESSAGE-BOARD; width: $CONTROLLED-MENU-WIDTH; - @include menu-background-color(); - - @include menu-padding(); - - @include menu-border(); - border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none; @@ -26,7 +22,7 @@ justify-content: space-between; } -.battle-controlled-actions +.controlled-actions { display: flex; flex-flow: row wrap; @@ -35,7 +31,7 @@ justify-content: center; } -.battle-end-turn-button +.end-turn-button { animation-name: reverse-brown-alarm-bg; animation-duration: 2s; diff --git a/src/css/src/battle/controlled-panel/manual-control.scss b/src/css/src/battle/controlled-panel/manual-control.scss index 765514b..7ab41b6 100644 --- a/src/css/src/battle/controlled-panel/manual-control.scss +++ b/src/css/src/battle/controlled-panel/manual-control.scss @@ -1,4 +1,4 @@ -.battle-manual-controls +.manual-controls { width: 96px; height: 96px; @@ -10,7 +10,7 @@ margin: auto; } -.battle-manual-controls > div +.manual-controls > div { width: 32px; height: 32px; @@ -20,12 +20,12 @@ opacity: 0.5; } -.battle-manual-controls > div:hover +.manual-controls > div:hover { opacity: 1; } -.battle-manual-controls-go +.manual-controls-go { margin: auto; width: 28px; @@ -34,25 +34,25 @@ grid-area: go; } -.battle-manual-controls-up +.manual-controls-up { transform: rotate(-90deg); grid-area: top; } -.battle-manual-controls-down +.manual-controls-down { transform: rotate(90deg); grid-area: bottom; } -.battle-manual-controls-left +.manual-controls-left { transform: rotate(180deg); grid-area: left; } -.battle-manual-controls-right +.manual-controls-right { grid-area: right; } diff --git a/src/css/src/battle/info-card.scss b/src/css/src/battle/info-card.scss index 29e4576..7cb1c08 100644 --- a/src/css/src/battle/info-card.scss +++ b/src/css/src/battle/info-card.scss @@ -1,20 +1,20 @@ @import "../shared/colors"; @import "../shared/shadows"; -.battle-info-card +.info-card { display: flex; flex-flow: column; } -.battle-info-card-top +.info-card-top { position: relative; margin-top: 0.5em; } -.battle-info-card-picture +.info-card-picture { top: 0; left: 0; @@ -31,7 +31,7 @@ display: inline-block; } -.battle-info-card-text-field +.info-card-text-field { display:flex; justify-content:center; @@ -41,7 +41,7 @@ width: 100%; } -.battle-gauge +.gauge { position: relative; border-radius: 5px; @@ -50,7 +50,7 @@ height: 2em; } -.battle-gauge-text +.gauge-text { position: absolute; top: 0; @@ -65,7 +65,7 @@ justify-content: center; } -.battle-gauge-bar +.gauge-bar { position: absolute; top: 0; @@ -79,8 +79,8 @@ transition: width 3s ease-in-out; } -.battle-character-card-health, -.battle-tile-card-cost +.character-card-health, +.tile-card-cost { position: absolute; left: 100px; @@ -90,8 +90,8 @@ } -.battle-character-card-movement, -.battle-tile-card-location +.character-card-movement, +.tile-card-location { position: absolute; left: 100px; diff --git a/src/css/src/battle/info-card/character.scss b/src/css/src/battle/info-card/character.scss index 3233be1..0888c0d 100644 --- a/src/css/src/battle/info-card/character.scss +++ b/src/css/src/battle/info-card/character.scss @@ -1,6 +1,6 @@ @import "../../shared/colors"; -.battle-character-portrait +.character-portrait { background-size: 100% 100%; width: 100px; @@ -9,7 +9,7 @@ cursor: pointer; } -.battle-character-portrait * +.character-portrait * { box-sizing: border-box; background-size: 100% 100%; @@ -17,12 +17,12 @@ height: inherit; } -.battle-character-portrait-body +.character-portrait-body { z-index: 1; } -.battle-character-portrait-armor +.character-portrait-armor { position: relative; z-index: 1; @@ -30,16 +30,16 @@ background-size: 200% 100%; } -.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); } +.character-portrait-team-0 { background-color: rgba(57, 106, 177, 0.3); } +.character-portrait-team-1 { background-color: rgba(204, 37, 41, 0.3); } +.character-portrait-team-2 { background-color: rgba(62, 150, 81, 0.3); } +.character-portrait-team-3 { background-color: rgba(218, 124, 48, 0.3); } +.character-portrait-team-4 { background-color: rgba(83, 81, 84, 0.3); } +.character-portrait-team-5 { background-color: rgba(107, 76, 154, 0.3); } +.character-portrait-team-6 { background-color: rgba(127, 167, 169, 0.3); } +.character-portrait-team-7 { background-color: rgba(231, 167, 169, 0.3); } -.battle-character-card-statuses +.character-card-statuses { position: absolute; left: 100px; @@ -49,35 +49,35 @@ display: flex; } -.battle-character-card-status +.character-card-status { height: 1.5em; width: 1.5em; background-size: 100%; } -.battle-character-card-target-status +.character-card-target-status { background-image: url("/asset/svg/status/target.svg"); } -.battle-character-card-commander-status +.character-card-commander-status { background-image: url("/asset/svg/status/commander.svg"); } -.battle-character-card-health > .battle-gauge-bar +.character-card-health > .gauge-bar { background-color: $RED-3; } -.battle-character-card-movement > .battle-gauge-bar +.character-card-movement > .gauge-bar { background-color: $BLUE-3; } -.battle-character-card-weapon, -.battle-character-card-weapon-summary +.character-card-weapon, +.character-card-weapon-summary { display: grid; @@ -87,17 +87,17 @@ margin-top: 0.3em; } -.battle-character-card-weapon +.character-card-weapon { background-color: #6C5D53; } -.battle-character-card-weapon-summary +.character-card-weapon-summary { background-color: $BROWN-1; } -.battle-character-card-armor +.character-card-armor { display: grid; border-radius: 5px; @@ -107,20 +107,20 @@ margin-top: 0.3em; } -.battle-character-card-armor-stats +.character-card-armor-stats { display: flex; flex-direction: row; flex-wrap: wrap; } -.battle-character-card-stats > *, -.battle-character-card-armor-stats > * +.character-card-stats > *, +.character-card-armor-stats > * { width: 25%; } -.battle-character-card-stats +.character-card-stats { display: flex; flex-direction: row; diff --git a/src/css/src/battle/info-card/tile.scss b/src/css/src/battle/info-card/tile.scss index ab8b1a0..8a6e1e1 100644 --- a/src/css/src/battle/info-card/tile.scss +++ b/src/css/src/battle/info-card/tile.scss @@ -1,5 +1,5 @@ -.battle-tile-card-icon +.tile-card-icon { position: relative; width: 80px; @@ -7,7 +7,7 @@ display: inline-block; } -.battle-tile-card-icon * +.tile-card-icon * { position: absolute; @@ -16,7 +16,7 @@ height: 80px; } -.battle-tile-card-top +.tile-card-top { margin:0.3em; } diff --git a/src/css/src/battle/main-menu.scss b/src/css/src/battle/main-menu.scss deleted file mode 100644 index ac43c29..0000000 --- a/src/css/src/battle/main-menu.scss +++ /dev/null @@ -1,37 +0,0 @@ -@import '../shared/colors'; - -@import 'constants'; -@import 'menu-mixins'; - -.battle-main-menu -{ - position: absolute; - top: 0; - left: 0; - right: 0; - - height: $MAIN-MENU-HEIGHT; - - @include menu-background-color(); - - display: flex; - flex-direction: row; - flex-wrap: wrap; - - @include menu-border(); - border-top: none; - border-top-left-radius: 0; - border-top-right-radius: 0; - - @include menu-padding(); - - @include menu-margin(); - - margin-top: 0; - - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-between; -} - diff --git a/src/css/src/battle/map.scss b/src/css/src/battle/map.scss index c6ab64d..9b95adf 100644 --- a/src/css/src/battle/map.scss +++ b/src/css/src/battle/map.scss @@ -1,7 +1,9 @@ +@import '../shared/battleview/constants'; +@import '../shared/battleview/menu-mixins'; + @import 'constants'; -@import 'menu-mixins'; -.battle-container-centerer +.container-centerer { position: absolute; @@ -13,7 +15,7 @@ display: flex; } -.battle-container +.container { display: inline-block; max-height: 100%; @@ -29,7 +31,7 @@ @include menu-background-color(); } -.battle-actual +.actual { display: inline-block; transform-origin: top left; @@ -38,7 +40,7 @@ position: relative; } -.battle-tiled, .battle-tiled * +.tiled, .tiled * { height: 32px; width: 32px; @@ -47,31 +49,31 @@ /* max-width: 32px; */ } -.battle-tile-icon, .battle-tile-icon * +.tile-icon, .tile-icon * { z-index: 0; position: absolute; background-size: 400%; } -.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;} +.path-icon-below-markers {z-index: 1;} +.marker-icon {z-index: 2;} +.path-icon-above-markers {z-index: 3;} +.character-icon {z-index: 4;} -.battle-marker-icon, -.battle-character-icon, -.battle-path-icon +.marker-icon, +.character-icon, +.path-icon { position: absolute; } -.battle-tiles-layer +.tiles-layer { /*display: table; */ } -.battle-tiles-layer-row +.tiles-layer-row { /* display: table-row; */ } diff --git a/src/css/src/battle/map/animation.scss b/src/css/src/battle/map/animation.scss index 1e8f044..eef2913 100644 --- a/src/css/src/battle/map/animation.scss +++ b/src/css/src/battle/map/animation.scss @@ -1,4 +1,4 @@ -.battle-animated-character-icon +.animated-character-icon { transition: top linear 0.3s, left linear 0.3s; } diff --git a/src/css/src/battle/map/character.scss b/src/css/src/battle/map/character.scss index 6856f61..44fb744 100644 --- a/src/css/src/battle/map/character.scss +++ b/src/css/src/battle/map/character.scss @@ -1,11 +1,11 @@ -.battle-character-icon +.character-icon { border-radius: 5px; height: 38px; margin-top: -6px; } -.battle-character-icon * +.character-icon * { position: absolute; left: 0; @@ -15,7 +15,7 @@ height: inherit; } -.battle-character-icon-enabled +.character-icon-enabled { animation-name: pulsating; animation-duration: 1.5s; @@ -23,25 +23,25 @@ transform-origin: center; } -.battle-character-icon-banner { z-index: 2; } -.battle-character-icon-head { z-index: 1; } -.battle-character-icon-body { z-index: 0; } +.character-icon-banner { z-index: 2; } +.character-icon-head { z-index: 1; } +.character-icon-body { z-index: 0; } -.battle-character-ally +.character-ally { } -.battle-character-enemy +.character-enemy { transform: scale(-1, 1); } -.battle-character-ally.battle-character-icon-disabled +.character-ally.character-icon-disabled { filter: contrast(35%); } -.battle-character-targeted +.character-targeted { background-color: rgba(255,0,0,0.7); animation-name: red-alarm-bg; @@ -49,7 +49,7 @@ animation-iteration-count: infinite; } -.battle-character-selected +.character-selected { animation-name: strongly-pulsating; animation-duration: 1.5s; diff --git a/src/css/src/battle/map/marker.scss b/src/css/src/battle/map/marker.scss index d6ec557..b946bc8 100644 --- a/src/css/src/battle/map/marker.scss +++ b/src/css/src/battle/map/marker.scss @@ -1,4 +1,4 @@ -.battle-marker-icon.battle-navigator-non-interactive +.marker-icon.navigator-non-interactive { box-sizing: border-box; width: 12px; @@ -7,7 +7,7 @@ margin: 10px; } -.battle-marker-icon.battle-navigator-interactive +.marker-icon.navigator-interactive { box-sizing: border-box; width: 24px; @@ -24,14 +24,14 @@ 0px -1px 2px #333; } -.battle-can-go-to-can-defend-marker.battle-navigator-interactive +.can-go-to-can-defend-marker.navigator-interactive { background-color: #FFF; opacity: 0.3; transition: opacity 0.3s ease-out; } -.battle-can-go-to-cant-defend-marker.battle-navigator-interactive +.can-go-to-cant-defend-marker.navigator-interactive { background: repeating-linear-gradient( @@ -45,13 +45,13 @@ 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 +.can-go-to-can-defend-marker.navigator-interactive:hover, +.can-go-to-cant-defend-marker.navigator-interactive:hover { opacity: 0.9; } -.battle-can-attack-can-defend-marker.battle-navigator-interactive +.can-attack-can-defend-marker.navigator-interactive { background-color: #000; opacity: 0.7; @@ -63,7 +63,7 @@ border-radius: 0; } -.battle-can-attack-cant-defend-marker.battle-navigator-interactive +.can-attack-cant-defend-marker.navigator-interactive { background: repeating-linear-gradient( @@ -82,13 +82,13 @@ border-radius: 0; } -.battle-can-attack-can-defend-marker.battle-navigator-non-interactive +.can-attack-can-defend-marker.navigator-non-interactive { z-index: 5; background-image: url(/asset/svg/marker/blade.svg); } -.battle-can-attack-cant-defend-marker.battle-navigator-non-interactive +.can-attack-cant-defend-marker.navigator-non-interactive { z-index: 5; background-image: @@ -96,15 +96,15 @@ url(/asset/svg/marker/brokenshield.svg); } -.battle-can-go-to-cant-defend-marker.battle-navigator-non-interactive +.can-go-to-cant-defend-marker.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 +.can-attack-cant-defend-marker.navigator-non-interactive, +.can-go-to-cant-defend-marker.navigator-non-interactive { width: 24px; height: 24px; @@ -114,24 +114,24 @@ margin: 2px; } -.battle-can-go-to-can-defend-marker.battle-navigator-non-interactive +.can-go-to-can-defend-marker.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 +.can-attack-can-defend-marker.navigator-non-interactive, +.can-attack-cant-defend-marker.navigator-non-interactive { z-index: 5; } -.battle-can-go-to-can-defend-marker, -.battle-can-go-to-cant-defend-marker +.can-go-to-can-defend-marker, +.can-go-to-cant-defend-marker { z-index: 3; } -.battle-cant-defend-marker +.cant-defend-marker { background: repeating-linear-gradient( diff --git a/src/css/src/battle/map/path.scss b/src/css/src/battle/map/path.scss index 0d0b97d..f01176e 100644 --- a/src/css/src/battle/map/path.scss +++ b/src/css/src/battle/map/path.scss @@ -1,88 +1,88 @@ -.battle-path-icon +.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 +.path-icon-UR, +.path-icon-LD, +.path-icon-RD, +.path-icon-UL, +.path-icon-LU, +.path-icon-DR, +.path-icon-DL, +.path-icon-RU { /*** Default is -^ ***/ background-position: 64px 0; } /*** DL/RU ***/ -.battle-path-icon-LU, -.battle-path-icon-DR +.path-icon-LU, +.path-icon-DR { transform: rotate(90deg); } -.battle-path-icon-RD, -.battle-path-icon-UL +.path-icon-RD, +.path-icon-UL { /*** ***/ transform: scale(1, -1); } -.battle-path-icon-UR, -.battle-path-icon-LD +.path-icon-UR, +.path-icon-LD { /*** <| ***/ transform: rotate(180deg); } -.battle-path-icon-RR, -.battle-path-icon-LR, -.battle-path-icon-RL, -.battle-path-icon-LL +.path-icon-RR, +.path-icon-LR, +.path-icon-RL, +.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 +.path-icon-markN, +.path-icon-NU, +.path-icon-ND, +.path-icon-NL, +.path-icon-NR { display: none; } -.battle-path-icon-UU, -.battle-path-icon-UD, -.battle-path-icon-DU, -.battle-path-icon-DD +.path-icon-UU, +.path-icon-UD, +.path-icon-DU, +.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 +.path-icon-markR, +.path-icon-markL, +.path-icon-markU, +.path-icon-markD { background-position: 32px 0; } -.battle-path-icon-markL +.path-icon-markL { transform: rotate(180deg); } -.battle-path-icon-markD +.path-icon-markD { transform: rotate(90deg); } -.battle-path-icon-markU +.path-icon-markU { transform: rotate(-90deg); } diff --git a/src/css/src/battle/map/variant.scss b/src/css/src/battle/map/variant.scss index 58f9915..253d5e3 100644 --- a/src/css/src/battle/map/variant.scss +++ b/src/css/src/battle/map/variant.scss @@ -1,33 +1,33 @@ -.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: 300% 0;} +.tile-variant-0 * {background-position: 0 0;} +.tile-variant-1 * {background-position: 100% 0;} +.tile-variant-2 * {background-position: 200% 0;} +.tile-variant-3 * {background-position: 300% 0;} -.battle-tile-variant-4 * {background-position: 0 100%;} -.battle-tile-variant-5 * {background-position: 100% 100%;} -.battle-tile-variant-6 * {background-position: 200% 100%;} -.battle-tile-variant-7 * {background-position: 300% 100%;} +.tile-variant-4 * {background-position: 0 100%;} +.tile-variant-5 * {background-position: 100% 100%;} +.tile-variant-6 * {background-position: 200% 100%;} +.tile-variant-7 * {background-position: 300% 100%;} -.battle-tile-variant-8 * {background-position: 0 200%;} -.battle-tile-variant-9 * {background-position: 100% 200%;} -.battle-tile-variant-10 * {background-position: 200% 200%;} -.battle-tile-variant-11 * {background-position: 300% 200%;} +.tile-variant-8 * {background-position: 0 200%;} +.tile-variant-9 * {background-position: 100% 200%;} +.tile-variant-10 * {background-position: 200% 200%;} +.tile-variant-11 * {background-position: 300% 200%;} -.battle-tile-variant-12 * {background-position: 0 300%;} -.battle-tile-variant-13 * {background-position: 100% 300%;} -.battle-tile-variant-14 * {background-position: 200% 300%;} -.battle-tile-variant-15 * {background-position: 300% 300%;} +.tile-variant-12 * {background-position: 0 300%;} +.tile-variant-13 * {background-position: 100% 300%;} +.tile-variant-14 * {background-position: 200% 300%;} +.tile-variant-15 * {background-position: 300% 300%;} -.battle-tile-icon-bg { z-index: 0; } -.battle-tile-icon-dt { z-index: 9; } +.tile-icon-bg { z-index: 0; } +.tile-icon-dt { z-index: 9; } -.battle-tile-icon-f-0 { z-index: 1; } -.battle-tile-icon-f-1 { z-index: 2; } -.battle-tile-icon-f-2 { z-index: 3; } -.battle-tile-icon-f-3 { z-index: 4; } -.battle-tile-icon-f-4 { z-index: 5; } -.battle-tile-icon-f-5 { z-index: 6; } -.battle-tile-icon-f-6 { z-index: 7; } -.battle-tile-icon-f-7 { z-index: 8; } +.tile-icon-f-0 { z-index: 1; } +.tile-icon-f-1 { z-index: 2; } +.tile-icon-f-2 { z-index: 3; } +.tile-icon-f-3 { z-index: 4; } +.tile-icon-f-4 { z-index: 5; } +.tile-icon-f-5 { z-index: 6; } +.tile-icon-f-6 { z-index: 7; } +.tile-icon-f-7 { z-index: 8; } diff --git a/src/css/src/battle/message-board.scss b/src/css/src/battle/message-board.scss index f2be3f7..6274619 100644 --- a/src/css/src/battle/message-board.scss +++ b/src/css/src/battle/message-board.scss @@ -1,45 +1 @@ -@import 'constants'; -@import 'menu-mixins'; - -.battle-message-board -{ - position: absolute; - bottom: 0; - left: 0; - right: 0; - - height: $MESSAGE-BOARD-HEIGHT; - - @include menu-background-color(); - - @include menu-border(); - border-bottom: none; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - - @include menu-padding(); - - @include menu-margin(); - margin-bottom: 0; - - display: flex; - flex-flow: row; - justify-content: space-between; - - overflow-y: auto; -} - -/* -.battle-message-board -{ - background: $BROWN-4; - color: $BROWN-0; - line-height: 1.3em; - font-size: 1.2em; - text-shadow: none; -} -*/ - @import 'message-board/attack'; -@import 'message-board/error'; -@import 'message-board/help'; diff --git a/src/css/src/battle/message-board/attack.scss b/src/css/src/battle/message-board/attack.scss index 8f3a8cb..949ae40 100644 --- a/src/css/src/battle/message-board/attack.scss +++ b/src/css/src/battle/message-board/attack.scss @@ -1,9 +1,9 @@ -.battle-message-board .battle-character-card +.message-board .character-card { width: 16em; } -.battle-message-attack-text +.message-attack-text { width: 100%; text-align: center; @@ -11,43 +11,43 @@ } /**** Character Portrait Animations *******************************************/ -.battle-animated-portrait-damaged .battle-character-portrait > * +.animated-portrait-damaged .character-portrait > * { animation: blinking 0.2s steps(2, start) 8; } -.battle-animated-portrait-absent .battle-character-portrait > * +.animated-portrait-absent .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 +.animated-portrait-dodges .character-portrait, +.animated-portrait-dies .character-portrait, +.animated-portrait-parries .character-portrait, +.animated-portrait-attacks .character-portrait { overflow: hidden; } -.battle-animated-portrait +.animated-portrait { } -.battle-animated-portrait-dodges .battle-character-portrait > * +.animated-portrait-dodges .character-portrait > * { animation-name: dodges; animation-duration: 1s; animation-iteration-count: 1; } -.battle-animated-portrait-attacks .battle-character-portrait > * +.animated-portrait-attacks .character-portrait > * { animation-name: attacks; animation-duration: 1s; animation-iteration-count: 1; } -.battle-animated-portrait-dies .battle-character-portrait > * +.animated-portrait-dies .character-portrait > * { animation-name: blinking2, dies; animation-duration: 0.15s, 2s; @@ -55,7 +55,7 @@ animation-iteration-count: 8, 1; } -.battle-animated-portrait-parries .battle-character-portrait > * +.animated-portrait-parries .character-portrait > * { animation-name: parries; animation-duration: 1s; diff --git a/src/css/src/battle/message-board/error.scss b/src/css/src/battle/message-board/error.scss deleted file mode 100644 index 8c2c197..0000000 --- a/src/css/src/battle/message-board/error.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import '../../shared/colors'; - -.battle-error -{ - background-color: $RED-1; -} - diff --git a/src/css/src/battle/message-board/help.scss b/src/css/src/battle/message-board/help.scss deleted file mode 100644 index ba35772..0000000 --- a/src/css/src/battle/message-board/help.scss +++ /dev/null @@ -1,33 +0,0 @@ -.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; -} - diff --git a/src/css/src/battle/sub-menus.scss b/src/css/src/battle/sub-menus.scss index 13ec571..d302a4f 100644 --- a/src/css/src/battle/sub-menus.scss +++ b/src/css/src/battle/sub-menus.scss @@ -1,20 +1,18 @@ +@import '../shared/battleview/constants'; +@import '../shared/battleview/menu-mixins'; + @import 'constants'; -@import 'menu-mixins'; -.battle-sub-menu +.sub-menu { - position: absolute; + @include menu-panel(); + right: 0; top: $BELOW-MAIN-MENU; bottom: $ABOVE-MESSAGE-BOARD; width: $SUB-MENU-WIDTH; - @include menu-background-color(); - - @include menu-padding(); - - @include menu-border(); border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; diff --git a/src/css/src/battle/sub-menus/characters-tab.scss b/src/css/src/battle/sub-menus/characters-tab.scss index fc4aae6..3371587 100644 --- a/src/css/src/battle/sub-menus/characters-tab.scss +++ b/src/css/src/battle/sub-menus/characters-tab.scss @@ -1,6 +1,6 @@ @import '../../shared/colors'; -.battle-tabmenu-characters-tab +.tabmenu-characters-tab { display: flex; flex-grow: 1; @@ -8,14 +8,14 @@ flex-wrap: wrap; } -.battle-characters-element-active +.characters-element-active { animation-name: brown-alarm-bg; animation-duration: 5s; animation-iteration-count: infinite; } -.battle-characters-element +.characters-element { flex: 2; margin: 0.5em 0.5em 0 0.5em; diff --git a/src/css/src/battle/sub-menus/timeline-tab.scss b/src/css/src/battle/sub-menus/timeline-tab.scss index 91dc8db..23c664b 100644 --- a/src/css/src/battle/sub-menus/timeline-tab.scss +++ b/src/css/src/battle/sub-menus/timeline-tab.scss @@ -1,7 +1,7 @@ @import '../../shared/colors'; @import '../../shared/shadows'; -.battle-timeline-element +.timeline-element { margin: 0.5em 0.5em 0 0.5em; text-align: center; @@ -12,7 +12,7 @@ padding: 0.5em; } -.battle-timeline-element .battle-character-portrait +.timeline-element .character-portrait { display: inline-block; vertical-align: middle; @@ -24,7 +24,7 @@ @include box-shadow(1px, $BROWN-0, 1); } -.battle-timeline-element .battle-character-portrait + * +.timeline-element .character-portrait + * { margin-left: 1em; } diff --git a/src/css/src/landing.scss b/src/css/src/landing.scss index 02f454a..a29dc65 100644 --- a/src/css/src/landing.scss +++ b/src/css/src/landing.scss @@ -15,12 +15,12 @@ html, body, .fullscreen-module min-height: 450px; } -.main-server-version +.server-version { font-size: 1em; } -.main-server-logo img +.server-logo img { height: 15em; } diff --git a/src/css/src/login.scss b/src/css/src/login.scss index e25f40a..ed6f5e8 100644 --- a/src/css/src/login.scss +++ b/src/css/src/login.scss @@ -1,5 +1,6 @@ @import 'shared/colors'; @import 'shared/shadows'; +@import 'shared/general-header'; * { @@ -22,8 +23,6 @@ body, padding-bottom: 1em; } -@import 'shared/general-header'; - main { position: relative; diff --git a/src/css/src/map-editor.scss b/src/css/src/map-editor.scss index 711e612..8be26ab 100644 --- a/src/css/src/map-editor.scss +++ b/src/css/src/map-editor.scss @@ -1,45 +1,5 @@ -@import 'shared/colors'; -@import 'shared/shadows'; +@import 'shared/battleview'; -* -{ - color: $GOLD-0; - @include text-shadow(1px, $BROWN-0, 0.5); -} - -body -{ - background-color: $BROWN-2; -} - -button -{ - flex: 1; - - text-transform: uppercase; - background-color: $BROWN-3; - border-color: $BROWN-1; -} - -button + button -{ - margin-left: 0.5em; -} - -button:hover -{ - background-color: $BROWN-4; -} - -button:disabled -{ - background-color: $BROWN-0; -} - - -//@import 'map-editor/info-card'; -@import 'map-editor/main-menu'; @import 'map-editor/map'; -@import 'map-editor/message-board'; @import 'map-editor/sub-menus'; @import 'map-editor/toolbox'; diff --git a/src/css/src/map-editor/constants.scss b/src/css/src/map-editor/constants.scss index 9c46e20..a8f67d3 100644 --- a/src/css/src/map-editor/constants.scss +++ b/src/css/src/map-editor/constants.scss @@ -1,15 +1,7 @@ -$MENU-MARGIN: 0.5em; -$MENU-PADDING: 0.5em; -$MENU-BORDER: 0.2em; +@import '../shared/battleview/constants'; -$MAIN-MENU-HEIGHT: 3em; -$MESSAGE-BOARD-HEIGHT: 10em; $TOOLBOX-MENU-WIDTH: 15em; $SUB-MENU-WIDTH: 20em; -$MENU-EXTRA: $MENU-MARGIN;// + $MENU-PADDING + $MENU-BORDER; - $NEXT-TO-TOOLBOX-MENU: $TOOLBOX-MENU-WIDTH + $MENU-EXTRA; $NEXT-TO-SUB-MENU: $SUB-MENU-WIDTH + $MENU-EXTRA; -$BELOW-MAIN-MENU: $MAIN-MENU-HEIGHT + $MENU-EXTRA; -$ABOVE-MESSAGE-BOARD: $MESSAGE-BOARD-HEIGHT + $MENU-EXTRA; diff --git a/src/css/src/map-editor/map.scss b/src/css/src/map-editor/map.scss index afa5bde..66c0207 100644 --- a/src/css/src/map-editor/map.scss +++ b/src/css/src/map-editor/map.scss @@ -1,5 +1,7 @@ +@import '../shared/battleview/constants'; +@import '../shared/battleview/menu-mixins'; + @import 'constants'; -@import 'menu-mixins'; .map-container-centerer { diff --git a/src/css/src/map-editor/menu-mixins.scss b/src/css/src/map-editor/menu-mixins.scss deleted file mode 100644 index f7129a1..0000000 --- a/src/css/src/map-editor/menu-mixins.scss +++ /dev/null @@ -1,24 +0,0 @@ -@import '../shared/colors'; - -@import 'constants'; - -@mixin menu-border () -{ - border: $MENU-BORDER solid $BROWN-1; - border-radius: 15px; -} - -@mixin menu-margin () -{ - margin: $MENU-MARGIN; -} - -@mixin menu-padding () -{ - padding: $MENU-PADDING; -} - -@mixin menu-background-color () -{ - background-color: $BROWN-3; -} diff --git a/src/css/src/map-editor/message-board/error.scss b/src/css/src/map-editor/message-board/error.scss deleted file mode 100644 index ddfa4ba..0000000 --- a/src/css/src/map-editor/message-board/error.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import '../../shared/colors'; - -.map-error -{ - background-color: $RED-1; -} - diff --git a/src/css/src/map-editor/sub-menus.scss b/src/css/src/map-editor/sub-menus.scss index 269ac83..d526238 100644 --- a/src/css/src/map-editor/sub-menus.scss +++ b/src/css/src/map-editor/sub-menus.scss @@ -1,20 +1,18 @@ +@import '../shared/battleview/constants'; +@import '../shared/battleview/menu-mixins'; + @import 'constants'; -@import 'menu-mixins'; -.map-sub-menu +.sub-menu { - position: absolute; + @include menu-panel(); + right: 0; top: $BELOW-MAIN-MENU; bottom: $ABOVE-MESSAGE-BOARD; width: $SUB-MENU-WIDTH; - @include menu-background-color(); - - @include menu-padding(); - - @include menu-border(); border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; diff --git a/src/css/src/map-editor/toolbox.scss b/src/css/src/map-editor/toolbox.scss index 77c59f1..16d54e8 100644 --- a/src/css/src/map-editor/toolbox.scss +++ b/src/css/src/map-editor/toolbox.scss @@ -1,21 +1,17 @@ +@import '../shared/battleview/constants'; +@import '../shared/battleview/menu-mixins'; + @import 'constants'; -@import 'menu-mixins'; .map-toolbox { - position: absolute; - display: block; left: 0; top: $BELOW-MAIN-MENU; bottom: $ABOVE-MESSAGE-BOARD; width: $TOOLBOX-MENU-WIDTH; - @include menu-background-color(); - - @include menu-padding(); - - @include menu-border(); + @include menu-panel(); border-top-left-radius: 0; border-bottom-left-radius: 0; diff --git a/src/css/src/shared/battleview.scss b/src/css/src/shared/battleview.scss new file mode 100644 index 0000000..fc80bee --- /dev/null +++ b/src/css/src/shared/battleview.scss @@ -0,0 +1,17 @@ +@import 'colors'; +@import 'shadows'; + +* +{ + color: $GOLD-0; + @include text-shadow(1px, $BROWN-0, 0.5); +} + +body +{ + background-color: $BROWN-2; +} + +@import 'battleview/button'; +@import 'battleview/main-menu'; +@import 'battleview/message-board'; diff --git a/src/css/src/shared/battleview/button.scss b/src/css/src/shared/battleview/button.scss new file mode 100644 index 0000000..75788ca --- /dev/null +++ b/src/css/src/shared/battleview/button.scss @@ -0,0 +1,27 @@ +@import '../colors'; + +button +{ + /** FIXME not everywhere **/ + flex: 1; + + text-transform: uppercase; + background-color: $BROWN-3; + border-color: $BROWN-1; +} + +/** FIXME not everywhere **/ +button + button +{ + margin-left: 0.5em; +} + +button:hover +{ + background-color: $BROWN-4; +} + +button:disabled +{ + background-color: $BROWN-0; +} diff --git a/src/css/src/shared/battleview/constants.scss b/src/css/src/shared/battleview/constants.scss new file mode 100644 index 0000000..63d4bbf --- /dev/null +++ b/src/css/src/shared/battleview/constants.scss @@ -0,0 +1,10 @@ +$MENU-MARGIN: 0.5em; +$MENU-PADDING: 0.5em; +$MENU-BORDER: 0.2em; +$MENU-EXTRA: $MENU-MARGIN;// + $MENU-PADDING + $MENU-BORDER; + +$MAIN-MENU-HEIGHT: 3em; +$MESSAGE-BOARD-HEIGHT: 10em; + +$BELOW-MAIN-MENU: $MAIN-MENU-HEIGHT + $MENU-EXTRA; +$ABOVE-MESSAGE-BOARD: $MESSAGE-BOARD-HEIGHT + $MENU-EXTRA; diff --git a/src/css/src/map-editor/main-menu.scss b/src/css/src/shared/battleview/main-menu.scss index 4d4a488..fd5db10 100644 --- a/src/css/src/map-editor/main-menu.scss +++ b/src/css/src/shared/battleview/main-menu.scss @@ -1,9 +1,9 @@ -@import '../shared/colors'; +@import '../colors'; @import 'constants'; @import 'menu-mixins'; -.map-main-menu +.main-menu { position: absolute; top: 0; @@ -34,3 +34,4 @@ flex-wrap: wrap; justify-content: space-between; } + diff --git a/src/css/src/battle/menu-mixins.scss b/src/css/src/shared/battleview/menu-mixins.scss index f7129a1..235671f 100644 --- a/src/css/src/battle/menu-mixins.scss +++ b/src/css/src/shared/battleview/menu-mixins.scss @@ -1,4 +1,4 @@ -@import '../shared/colors'; +@import '../colors'; @import 'constants'; @@ -22,3 +22,15 @@ { background-color: $BROWN-3; } + +@mixin menu-panel () +{ + position: absolute; + display: block; + + @include menu-background-color(); + + @include menu-padding(); + + @include menu-border(); +} diff --git a/src/css/src/map-editor/message-board.scss b/src/css/src/shared/battleview/message-board.scss index 22720e8..0fc9fa7 100644 --- a/src/css/src/map-editor/message-board.scss +++ b/src/css/src/shared/battleview/message-board.scss @@ -1,7 +1,7 @@ @import 'constants'; @import 'menu-mixins'; -.map-message-board +.message-board { position: absolute; bottom: 0; @@ -29,16 +29,5 @@ overflow-y: auto; } -/* -.map-message-board -{ - background: $BROWN-4; - color: $BROWN-0; - line-height: 1.3em; - font-size: 1.2em; - text-shadow: none; -} -*/ - @import 'message-board/error'; @import 'message-board/help'; diff --git a/src/css/src/shared/battleview/message-board/error.scss b/src/css/src/shared/battleview/message-board/error.scss new file mode 100644 index 0000000..10b9eda --- /dev/null +++ b/src/css/src/shared/battleview/message-board/error.scss @@ -0,0 +1,7 @@ +@import '../../colors'; + +.error +{ + background-color: $RED-1; +} + diff --git a/src/css/src/map-editor/message-board/help.scss b/src/css/src/shared/battleview/message-board/help.scss index 7ffc576..bb66c33 100644 --- a/src/css/src/map-editor/message-board/help.scss +++ b/src/css/src/shared/battleview/message-board/help.scss @@ -1,9 +1,9 @@ -.map-message-board-help +.message-board-help { display: block; } -.map-message-board-help h1 +.message-board-help h1 { margin: 0; margin-bottom: 0.3em; @@ -11,7 +11,7 @@ text-align: center; } -.map-message-board-help-figure +.message-board-help-figure { width: 1.5em; height: 1.5em; @@ -20,7 +20,7 @@ vertical-align: middle; } -.map-help-guide-icon +.help-guide-icon { margin-right: 0.5em; width: 1.5em; |