2 files changed, 237 insertions, 0 deletions
diff --git a/src/css/src/roster-editor/info-card.scss b/src/css/src/roster-editor/info-card.scss
new file mode 100644
index 0000000..bb043a9
--- /dev/null
+++ b/src/css/src/roster-editor/info-card.scss
@@ -0,0 +1,103 @@
+@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';
diff --git a/src/css/src/roster-editor/info-card/character.scss b/src/css/src/roster-editor/info-card/character.scss
new file mode 100644
index 0000000..0888c0d
--- /dev/null
+++ b/src/css/src/roster-editor/info-card/character.scss
@@ -0,0 +1,134 @@
+@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;
+}