From 3491e6753c73a870086771964ed178517acc3164 Mon Sep 17 00:00:00 2001 From: Nathanael Sensfelder Date: Mon, 15 Oct 2018 17:30:10 +0200 Subject: Adds missing scss files. --- src/css/src/roster-editor/info-card.scss | 103 ++++++++++++++++ src/css/src/roster-editor/info-card/character.scss | 134 +++++++++++++++++++++ 2 files changed, 237 insertions(+) create mode 100644 src/css/src/roster-editor/info-card.scss create mode 100644 src/css/src/roster-editor/info-card/character.scss (limited to 'src') 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; +} -- cgit v1.2.3-70-g09d2