| summaryrefslogtreecommitdiff | 
diff options
| author | nsensfel <SpamShield0@noot-noot.org> | 2019-03-06 18:44:57 +0100 | 
|---|---|---|
| committer | nsensfel <SpamShield0@noot-noot.org> | 2019-03-06 18:44:57 +0100 | 
| commit | 24efb898f526e0aa02a0e15b74436da8ba166cac (patch) | |
| tree | 5d5e6e682e0012787255de520dd29292e793d6ad /src/css | |
| parent | b05eb97d89e690737418ca2aa2e49e9c9da83184 (diff) | |
Impr. MapEd tile focus, CSS factoring.
Diffstat (limited to 'src/css')
32 files changed, 70 insertions, 372 deletions
| diff --git a/src/css/src/battle.scss b/src/css/src/battle.scss index 3ba177a..536b2fa 100644 --- a/src/css/src/battle.scss +++ b/src/css/src/battle.scss @@ -1,8 +1,9 @@ -@import 'shared/battleview'; +@import 'shared/battle-view'; +@import 'shared/battle-characters'; +@import 'shared/battle-map';  @import 'shared/omnimod-icons';  @import 'battle/controlled-panel'; -@import 'battle/info-card';  @import 'battle/keyframes';  @import 'battle/map';  @import 'battle/message-board'; diff --git a/src/css/src/battle/constants.scss b/src/css/src/battle/constants.scss index 3e08351..7918a0b 100644 --- a/src/css/src/battle/constants.scss +++ b/src/css/src/battle/constants.scss @@ -1,4 +1,4 @@ -@import '../shared/battleview/constants'; +@import '../shared/battle-view/constants';  $CONTROLLED-MENU-WIDTH: 15em;  $SUB-MENU-WIDTH: 20em; diff --git a/src/css/src/battle/controlled-panel.scss b/src/css/src/battle/controlled-panel.scss index fe6cb13..2a52fe6 100644 --- a/src/css/src/battle/controlled-panel.scss +++ b/src/css/src/battle/controlled-panel.scss @@ -1,5 +1,5 @@ -@import '../shared/battleview/constants'; -@import '../shared/battleview/menu-mixins'; +@import '../shared/battle-view/constants'; +@import '../shared/battle-view/menu-mixins';  @import 'constants'; diff --git a/src/css/src/battle/info-card.scss b/src/css/src/battle/info-card.scss deleted file mode 100644 index 7cb1c08..0000000 --- a/src/css/src/battle/info-card.scss +++ /dev/null @@ -1,104 +0,0 @@ -@import "../shared/colors"; -@import "../shared/shadows"; - -.info-card -{ -   display: flex; -   flex-flow: column; -} - -.info-card-top -{ -   position: relative; - -   margin-top: 0.5em; -} - -.info-card-picture -{ -   top: 0; -   left: 0; - -   box-sizing: border-box; - -   border-radius: 5px; -   overflow: hidden; - -   margin: 0; - -   @include box-shadow(2px, $BROWN-0, 1); - -   display: inline-block; -} - -.info-card-text-field -{ -   display:flex; -   justify-content:center; -   align-items:center; -   border-radius: 5px; -   background-color: $BROWN-2; -   width: 100%; -} - -.gauge -{ -   position: relative; -   border-radius: 5px; -   border: 2px solid $BROWN-2; -   text-align: center; -   height: 2em; -} - -.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; -} - -.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; -} - -.character-card-health, -.tile-card-cost -{ -   position: absolute; -   left: 100px; -   top: 0; -   margin-left: 0.5em; -   width: calc(100% - 100px - 0.5em); -} - - -.character-card-movement, -.tile-card-location -{ -   position: absolute; -   left: 100px; -   top: calc(1.5em + 1em); -   margin-left: 0.5em; -   width: calc(100% - 100px - 0.5em); -} - -@import 'info-card/character'; -@import 'info-card/tile'; diff --git a/src/css/src/battle/info-card/character.scss b/src/css/src/battle/info-card/character.scss deleted file mode 100644 index 114e54d..0000000 --- a/src/css/src/battle/info-card/character.scss +++ /dev/null @@ -1,150 +0,0 @@ -@import "../../shared/colors"; - -.character-portrait -{ -   background-size: 100% 100%; -   width: 100px; -   height: 100px; -   overflow: hidden; -   cursor: pointer; -} - -.character-portrait * -{ -   box-sizing: border-box; -   background-size: 100% 100%; -   width: inherit; -   height: inherit; -} - -.character-portrait-body -{ -   z-index: 1; -} - -.character-portrait-armor -{ -   position: relative; -   z-index: 1; -   top: -100%; -   background-size: 200% 100%; -} - -.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); } - -.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; -} - -.character-card-status -{ -   height: 1.5em; -   width: 1.5em; -   background-size: 100%; -} - -.character-card-target-status -{ -   background-image: url("/asset/svg/status/target.svg"); -} - -.character-card-commander-status -{ -   background-image: url("/asset/svg/status/commander.svg"); -} - -.character-card-health > .gauge-bar -{ -   background-color: $RED-3; -} - -.character-card-movement > .gauge-bar -{ -   background-color: $BLUE-3; -} - -.character-card-weapon, -.character-card-weapon-summary -{ -   display: grid; - -   border-radius: 5px; - -   padding: 0.3em; -   margin-top: 0.3em; -} - -.character-card-weapon -{ -   background-color: #6C5D53; -} - -.character-card-weapon-summary -{ -   background-color: $BROWN-1; -} - -.character-card-armor -{ -   display: grid; -   border-radius: 5px; -   background-color: $BROWN-2; - -   padding: 0.3em; -   margin-top: 0.3em; -} - -.character-card-armor-stats -{ -   display: flex; -   flex-direction: row; -   flex-wrap: wrap; -} - -.character-card-stats > *, -.character-card-armor-stats > * -{ -   width: 25%; -} - -.character-card-stats -{ -   display: flex; -   flex-direction: row; -   flex-wrap: wrap; - -   border-radius: 5px; -   background-color: $BROWN-2; - -   padding: 0.3em; -   margin-top: 0.3em; -} - -.asset-armor-variation-bird -{ -   background-size: 200% 100%; -   background-position: 100% 0; -} - -.character-card-mod -{ -   display: inline-block; -} - -.info-card-mod -{ -   display: inline-block; -} diff --git a/src/css/src/battle/map.scss b/src/css/src/battle/map.scss index 9b95adf..1501ca1 100644 --- a/src/css/src/battle/map.scss +++ b/src/css/src/battle/map.scss @@ -1,5 +1,5 @@ -@import '../shared/battleview/constants'; -@import '../shared/battleview/menu-mixins'; +@import '../shared/battle-view/constants'; +@import '../shared/battle-view/menu-mixins';  @import 'constants'; @@ -40,22 +40,6 @@     position: relative;  } -.tiled, .tiled * -{ -   height: 32px; -   width: 32px; -   /** Fixes odd behavior of table cell being resized. **/ -   /* min-width: 32px; */ -   /* max-width: 32px; */ -} - -.tile-icon, .tile-icon * -{ -   z-index: 0; -   position: absolute; -   background-size: 400%; -} -  .path-icon-below-markers  {z-index: 1;}  .marker-icon              {z-index: 2;}  .path-icon-above-markers  {z-index: 3;} @@ -68,18 +52,7 @@     position: absolute;  } -.tiles-layer -{ -   /*display: table; */ -} - -.tiles-layer-row -{ -  /* display: table-row; */ -} -  @import 'map/animation.scss';  @import 'map/character.scss';  @import 'map/marker.scss';  @import 'map/path.scss'; -@import 'map/variant.scss'; diff --git a/src/css/src/battle/sub-menus.scss b/src/css/src/battle/sub-menus.scss index d302a4f..29ed0a5 100644 --- a/src/css/src/battle/sub-menus.scss +++ b/src/css/src/battle/sub-menus.scss @@ -1,5 +1,5 @@ -@import '../shared/battleview/constants'; -@import '../shared/battleview/menu-mixins'; +@import '../shared/battle-view/constants'; +@import '../shared/battle-view/menu-mixins';  @import 'constants'; diff --git a/src/css/src/map-editor.scss b/src/css/src/map-editor.scss index 8be26ab..edda499 100644 --- a/src/css/src/map-editor.scss +++ b/src/css/src/map-editor.scss @@ -1,4 +1,6 @@ -@import 'shared/battleview'; +@import 'shared/battle-view'; +@import 'shared/battle-map'; +@import 'shared/omnimod-icons';  @import 'map-editor/map';  @import 'map-editor/sub-menus'; diff --git a/src/css/src/map-editor/constants.scss b/src/css/src/map-editor/constants.scss index a8f67d3..51af535 100644 --- a/src/css/src/map-editor/constants.scss +++ b/src/css/src/map-editor/constants.scss @@ -1,4 +1,4 @@ -@import '../shared/battleview/constants'; +@import '../shared/battle-view/constants';  $TOOLBOX-MENU-WIDTH: 15em;  $SUB-MENU-WIDTH: 20em; diff --git a/src/css/src/map-editor/map.scss b/src/css/src/map-editor/map.scss index 66c0207..a1ada34 100644 --- a/src/css/src/map-editor/map.scss +++ b/src/css/src/map-editor/map.scss @@ -1,5 +1,5 @@ -@import '../shared/battleview/constants'; -@import '../shared/battleview/menu-mixins'; +@import '../shared/battle-view/constants'; +@import '../shared/battle-view/menu-mixins';  @import 'constants'; @@ -40,38 +40,20 @@     position: relative;  } -.map-tiled, .map-tiled * -{ -   height: 32px; -   width: 32px; -} - -.map-tile-icon, .map-tile-icon * -{ -   z-index: 0; -   position: absolute; -   background-size: 400%; -} - -.map-tile-selected +.tile-selected  {     border: 1px dashed white;  } -.map-tile-square-corner +.tile-square-corner  {     animation-name: blinking;     animation-duration: 1s;     animation-iteration-count: infinite;  } -.map-tile, .map-tile * {background-size: 400%;} -.map-tile * {position: absolute;} -  @keyframes blinking {      0% {opacity: 1;}      50% {opacity: 0;}      100% {opacity: 1;}  } - -@import 'map/variant.scss'; diff --git a/src/css/src/map-editor/map/variant.scss b/src/css/src/map-editor/map/variant.scss deleted file mode 100644 index 109f093..0000000 --- a/src/css/src/map-editor/map/variant.scss +++ /dev/null @@ -1,33 +0,0 @@ - -.map-tile-variant-0  * {background-position: 0    0;} -.map-tile-variant-1  * {background-position: 100% 0;} -.map-tile-variant-2  * {background-position: 200% 0;} -.map-tile-variant-3  * {background-position: 300% 0;} - -.map-tile-variant-4  * {background-position: 0    100%;} -.map-tile-variant-5  * {background-position: 100% 100%;} -.map-tile-variant-6  * {background-position: 200% 100%;} -.map-tile-variant-7  * {background-position: 300% 100%;} - -.map-tile-variant-8  * {background-position: 0    200%;} -.map-tile-variant-9  * {background-position: 100% 200%;} -.map-tile-variant-10 * {background-position: 200% 200%;} -.map-tile-variant-11 * {background-position: 300% 200%;} - -.map-tile-variant-12 * {background-position: 0    300%;} -.map-tile-variant-13 * {background-position: 100% 300%;} -.map-tile-variant-14 * {background-position: 200% 300%;} -.map-tile-variant-15 * {background-position: 300% 300%;} - -.map-tile-icon-bg { z-index: 0; } -.map-tile-icon-dt { z-index: 9; } - -.map-tile-icon-f-0 { z-index: 1; } -.map-tile-icon-f-1 { z-index: 2; } -.map-tile-icon-f-2 { z-index: 3; } -.map-tile-icon-f-3 { z-index: 4; } -.map-tile-icon-f-4 { z-index: 5; } -.map-tile-icon-f-5 { z-index: 6; } -.map-tile-icon-f-6 { z-index: 7; } -.map-tile-icon-f-7 { z-index: 8; } - diff --git a/src/css/src/map-editor/sub-menus.scss b/src/css/src/map-editor/sub-menus.scss index d526238..4a97a22 100644 --- a/src/css/src/map-editor/sub-menus.scss +++ b/src/css/src/map-editor/sub-menus.scss @@ -1,5 +1,5 @@ -@import '../shared/battleview/constants'; -@import '../shared/battleview/menu-mixins'; +@import '../shared/battle-view/constants'; +@import '../shared/battle-view/menu-mixins';  @import 'constants'; diff --git a/src/css/src/map-editor/toolbox.scss b/src/css/src/map-editor/toolbox.scss index 2398796..2b9bdd3 100644 --- a/src/css/src/map-editor/toolbox.scss +++ b/src/css/src/map-editor/toolbox.scss @@ -1,5 +1,5 @@ -@import '../shared/battleview/constants'; -@import '../shared/battleview/menu-mixins'; +@import '../shared/battle-view/constants'; +@import '../shared/battle-view/menu-mixins';  @import 'constants'; diff --git a/src/css/src/roster-editor.scss b/src/css/src/roster-editor.scss index a35188e..49c9fc4 100644 --- a/src/css/src/roster-editor.scss +++ b/src/css/src/roster-editor.scss @@ -1,6 +1,6 @@ -@import 'shared/battleview'; +@import 'shared/battle-view'; +@import 'shared/battle-characters';  @import 'shared/omnimod-icons';  @import 'roster-editor/controlled-panel'; -@import 'roster-editor/info-card';  @import 'roster-editor/selection-window'; diff --git a/src/css/src/roster-editor/constants.scss b/src/css/src/roster-editor/constants.scss index ee4e862..8ce7828 100644 --- a/src/css/src/roster-editor/constants.scss +++ b/src/css/src/roster-editor/constants.scss @@ -1,4 +1,4 @@ -@import '../shared/battleview/constants'; +@import '../shared/battle-view/constants';  $CONTROLLED-MENU-WIDTH: 15em; diff --git a/src/css/src/roster-editor/controlled-panel.scss b/src/css/src/roster-editor/controlled-panel.scss index 23b2a8a..ace0cf0 100644 --- a/src/css/src/roster-editor/controlled-panel.scss +++ b/src/css/src/roster-editor/controlled-panel.scss @@ -1,5 +1,5 @@ -@import '../shared/battleview/constants'; -@import '../shared/battleview/menu-mixins'; +@import '../shared/battle-view/constants'; +@import '../shared/battle-view/menu-mixins';  @import 'constants'; diff --git a/src/css/src/roster-editor/selection-window.scss b/src/css/src/roster-editor/selection-window.scss index c719ea0..f3a63a0 100644 --- a/src/css/src/roster-editor/selection-window.scss +++ b/src/css/src/roster-editor/selection-window.scss @@ -1,5 +1,5 @@ -@import '../shared/battleview/constants'; -@import '../shared/battleview/menu-mixins'; +@import '../shared/battle-view/constants'; +@import '../shared/battle-view/menu-mixins';  @import 'constants'; diff --git a/src/css/src/shared/battle-characters.scss b/src/css/src/shared/battle-characters.scss new file mode 100644 index 0000000..78b6f46 --- /dev/null +++ b/src/css/src/shared/battle-characters.scss @@ -0,0 +1 @@ +@import 'battle-characters/info-card'; diff --git a/src/css/src/roster-editor/info-card/character.scss b/src/css/src/shared/battle-characters/info-card.scss index cb00546..7a90a97 100644 --- a/src/css/src/roster-editor/info-card/character.scss +++ b/src/css/src/shared/battle-characters/info-card.scss @@ -17,6 +17,14 @@     height: inherit;  } + +.character-portrait-battle-index +{ +   position: relative; +   z-index: 2; +   top: -200%; +} +  .character-portrait-body  {     z-index: 1; @@ -30,13 +38,6 @@     background-size: 200% 100%;  } -.character-portrait-battle-index -{ -   position: relative; -   z-index: 2; -   top: -200%; -} -  .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); } diff --git a/src/css/src/shared/battle-map.scss b/src/css/src/shared/battle-map.scss new file mode 100644 index 0000000..659ad54 --- /dev/null +++ b/src/css/src/shared/battle-map.scss @@ -0,0 +1,2 @@ +@import 'battle-map/info-card'; +@import 'battle-map/tile'; diff --git a/src/css/src/battle/info-card/tile.scss b/src/css/src/shared/battle-map/info-card.scss index 8a6e1e1..8a6e1e1 100644 --- a/src/css/src/battle/info-card/tile.scss +++ b/src/css/src/shared/battle-map/info-card.scss diff --git a/src/css/src/shared/battle-map/tile.scss b/src/css/src/shared/battle-map/tile.scss new file mode 100644 index 0000000..89e2fc7 --- /dev/null +++ b/src/css/src/shared/battle-map/tile.scss @@ -0,0 +1,24 @@ +.tiled, .tiled * +{ +   height: 32px; +   width: 32px; +} + +.tiled * +{ +   position: absolute; +} + +.tile-icon +{ +   z-index: 0; +   position: absolute; +} + +.tile-icon *, +.tile * +{ +   background-size: 400%; +} + +@import "tile/variant.scss" diff --git a/src/css/src/battle/map/variant.scss b/src/css/src/shared/battle-map/tile/variant.scss index 253d5e3..253d5e3 100644 --- a/src/css/src/battle/map/variant.scss +++ b/src/css/src/shared/battle-map/tile/variant.scss diff --git a/src/css/src/shared/battleview.scss b/src/css/src/shared/battle-view.scss index fc80bee..979740f 100644 --- a/src/css/src/shared/battleview.scss +++ b/src/css/src/shared/battle-view.scss @@ -12,6 +12,7 @@ body     background-color: $BROWN-2;  } -@import 'battleview/button'; -@import 'battleview/main-menu'; -@import 'battleview/message-board'; +@import 'battle-view/button'; +@import 'battle-view/main-menu'; +@import 'battle-view/info-card'; +@import 'battle-view/message-board'; diff --git a/src/css/src/shared/battleview/button.scss b/src/css/src/shared/battle-view/button.scss index 75788ca..75788ca 100644 --- a/src/css/src/shared/battleview/button.scss +++ b/src/css/src/shared/battle-view/button.scss diff --git a/src/css/src/shared/battleview/constants.scss b/src/css/src/shared/battle-view/constants.scss index 63d4bbf..63d4bbf 100644 --- a/src/css/src/shared/battleview/constants.scss +++ b/src/css/src/shared/battle-view/constants.scss diff --git a/src/css/src/roster-editor/info-card.scss b/src/css/src/shared/battle-view/info-card.scss index bb043a9..d7839cd 100644 --- a/src/css/src/roster-editor/info-card.scss +++ b/src/css/src/shared/battle-view/info-card.scss @@ -1,5 +1,5 @@ -@import "../shared/colors"; -@import "../shared/shadows"; +@import "../../shared/colors"; +@import "../../shared/shadows";  .info-card  { @@ -99,5 +99,3 @@     margin-left: 0.5em;     width: calc(100% - 100px - 0.5em);  } - -@import 'info-card/character'; diff --git a/src/css/src/shared/battleview/main-menu.scss b/src/css/src/shared/battle-view/main-menu.scss index fd5db10..fd5db10 100644 --- a/src/css/src/shared/battleview/main-menu.scss +++ b/src/css/src/shared/battle-view/main-menu.scss diff --git a/src/css/src/shared/battleview/menu-mixins.scss b/src/css/src/shared/battle-view/menu-mixins.scss index 235671f..235671f 100644 --- a/src/css/src/shared/battleview/menu-mixins.scss +++ b/src/css/src/shared/battle-view/menu-mixins.scss diff --git a/src/css/src/shared/battleview/message-board.scss b/src/css/src/shared/battle-view/message-board.scss index 0fc9fa7..0fc9fa7 100644 --- a/src/css/src/shared/battleview/message-board.scss +++ b/src/css/src/shared/battle-view/message-board.scss diff --git a/src/css/src/shared/battleview/message-board/error.scss b/src/css/src/shared/battle-view/message-board/error.scss index 10b9eda..10b9eda 100644 --- a/src/css/src/shared/battleview/message-board/error.scss +++ b/src/css/src/shared/battle-view/message-board/error.scss diff --git a/src/css/src/shared/battleview/message-board/help.scss b/src/css/src/shared/battle-view/message-board/help.scss index bb66c33..bb66c33 100644 --- a/src/css/src/shared/battleview/message-board/help.scss +++ b/src/css/src/shared/battle-view/message-board/help.scss | 


