Finished colourful ability score cards
This commit is contained in:
Thaum
75
rpg-docs/client/views/GeneralCSS/color.css
Normal file
75
rpg-docs/client/views/GeneralCSS/color.css
Normal file
@@ -0,0 +1,75 @@
|
||||
.red {
|
||||
background-color: #F44336;
|
||||
}
|
||||
|
||||
.pink {
|
||||
background-color: #E91E63;
|
||||
}
|
||||
|
||||
.purple {
|
||||
background-color: #9C27B0;
|
||||
}
|
||||
|
||||
.deep-purple {
|
||||
background-color: #673AB7;
|
||||
}
|
||||
|
||||
.indigo {
|
||||
background-color: #3F51B5;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #2196F3;
|
||||
}
|
||||
|
||||
.light-blue {
|
||||
background-color: #03A9F4;
|
||||
}
|
||||
|
||||
.cyan {
|
||||
background-color: #00BCD4;
|
||||
}
|
||||
|
||||
.teal {
|
||||
background-color: #009688;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #4CAF50;
|
||||
}
|
||||
|
||||
.light-green {
|
||||
background-color: #8BC34A;
|
||||
}
|
||||
|
||||
.lime {
|
||||
background-color: #CDDC39;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background-color: #FFEB3B;
|
||||
}
|
||||
|
||||
.amber {
|
||||
background-color: #FFC107;
|
||||
}
|
||||
|
||||
.orange {
|
||||
background-color: #FF9800;
|
||||
}
|
||||
|
||||
.deep-orange {
|
||||
background-color: #FF5722;
|
||||
}
|
||||
|
||||
.brown {
|
||||
background-color: #795548;
|
||||
}
|
||||
|
||||
.grey {
|
||||
background-color: #9E9E9E;
|
||||
}
|
||||
|
||||
.blue-grey {
|
||||
background-color: #607D8B;
|
||||
}
|
||||
80
rpg-docs/client/views/GeneralCSS/general.css
Normal file
80
rpg-docs/client/views/GeneralCSS/general.css
Normal file
@@ -0,0 +1,80 @@
|
||||
root {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial;
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body.core-narrow {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.calculatedValue {
|
||||
color: #021C33;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: #444;
|
||||
opacity: 0.12;
|
||||
border-width: 0;
|
||||
color: #444;
|
||||
height: 1px;
|
||||
line-height: 0;
|
||||
margin: 0 -16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
paper-button {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
color: #000;
|
||||
color: rgba(0,0,0,0.87);
|
||||
letter-spacing: 0.010;
|
||||
}
|
||||
|
||||
.listRow {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 148px;
|
||||
margin: 4px;
|
||||
padding: 16px;
|
||||
font-size: 14px;
|
||||
border-radius: 2px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.card.double {
|
||||
width: 304px;
|
||||
}
|
||||
|
||||
.card paper-button {
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.grey-background, body {
|
||||
background-color: #E0E0E0;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
99
rpg-docs/client/views/GeneralCSS/typography.css
Normal file
99
rpg-docs/client/views/GeneralCSS/typography.css
Normal file
@@ -0,0 +1,99 @@
|
||||
.display2 {
|
||||
font-size: 45px;
|
||||
font-weight: 400;
|
||||
color: #000;
|
||||
color: rgba(0,0,0,0.54);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.white-text .display2{
|
||||
color: rgba(255,255,255,0.54);
|
||||
}
|
||||
|
||||
.display1 {
|
||||
font-size: 34px;
|
||||
font-weight: 400;
|
||||
color: #000;
|
||||
color: rgba(0,0,0,0.54);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.white-text .display1{
|
||||
color: rgba(255,255,255,0.54);
|
||||
}
|
||||
|
||||
h1, .headline {
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
color: #000;
|
||||
color: rgba(0,0,0,0.87);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.white-text h1, .white-text .headline{
|
||||
color: rgba(255,255,255,0.87);
|
||||
}
|
||||
|
||||
h2, .title {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
color: #000;
|
||||
color: rgba(0,0,0,0.87);
|
||||
letter-spacing: 0.005em;
|
||||
}
|
||||
|
||||
.white-text h2{
|
||||
color: rgba(255,255,255,0.87);
|
||||
}
|
||||
|
||||
h3, .subhead {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
color: #000;
|
||||
color: rgba(0,0,0,0.87);
|
||||
letter-spacing: 0.010em;
|
||||
}
|
||||
|
||||
.white-text h3, .white-text .subhead{
|
||||
color: rgba(255,255,255,0.87);
|
||||
}
|
||||
|
||||
.body2 {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
color: rgba(0,0,0,0.87);
|
||||
letter-spacing: 0.010em;
|
||||
}
|
||||
|
||||
.white-text .body2{
|
||||
color: rgba(255,255,255,0.87);
|
||||
}
|
||||
|
||||
p, .body1, body {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
color: #000;
|
||||
color: rgba(0,0,0,0.87);
|
||||
letter-spacing: 0.010em;
|
||||
}
|
||||
|
||||
.white-text p{
|
||||
color: rgba(255,255,255,0.87);
|
||||
}
|
||||
|
||||
.caption{
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #000;
|
||||
color: rgba(0,0,0,0.54);
|
||||
letter-spacing: 0.020em;
|
||||
}
|
||||
|
||||
.white-text .caption{
|
||||
color: rgba(255,255,255,0.54);
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
.profIcon{
|
||||
display: inline-block;
|
||||
width: 23px;
|
||||
height: 14px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
position: relative;
|
||||
top: 1px;
|
||||
|
||||
/*TODO fix the actual images and remove inversion*/
|
||||
-webkit-filter: invert(100%);
|
||||
opacity: 0.54;
|
||||
}
|
||||
|
||||
table.skillTable td:nth-of-type(2) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.skillTable td:nth-of-type(3) {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
td.fail {
|
||||
color: #AF0000;
|
||||
}
|
||||
|
||||
.advantage{
|
||||
background-image: url(/png/advantage/greenUp.png);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.disadvantage{
|
||||
background-image: url(/png/advantage/redDown.png);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
td.conditionals::after{
|
||||
content: "*";
|
||||
}
|
||||
@@ -1,6 +1,22 @@
|
||||
#stats{
|
||||
#stats {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#stats, #stats .abilityFlex, #stats .statsFlex{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#stats .abilityFlex{
|
||||
flex-basis: 642px;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
#stats .statsFlex{
|
||||
min-width: 152px;
|
||||
flex-basis: 0px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
@@ -1,80 +1,84 @@
|
||||
<template name="stats">
|
||||
<div id="stats">
|
||||
{{> abilityCards}}
|
||||
<paper-shadow class="card" id="armor">
|
||||
<h1>{{attributeValue "armor"}}</h1>
|
||||
<p class="caption">Armor</p>
|
||||
</paper-shadow>
|
||||
<paper-shadow class="card" id="initiative">
|
||||
<h1>{{skillMod "initiative"}}</h1>
|
||||
<p class="caption">Initiative</p>
|
||||
</paper-shadow>
|
||||
<paper-shadow class="card" id="proficiencyBonus">
|
||||
<h1>{{attributeValue "proficiencyBonus"}}</h1>
|
||||
<p class="caption">Proficiency Bonus</p>
|
||||
</paper-shadow>
|
||||
<paper-shadow class="card" id="speed">
|
||||
<h1>{{attributeValue "speed"}}</h1>
|
||||
<p class="caption">Speed</p>
|
||||
</paper-shadow>
|
||||
<paper-shadow class="card" id="passivePerception">
|
||||
<h1>{{passiveSkill "perception"}}</h1>
|
||||
<p class="caption">Passive Perception</p>
|
||||
</paper-shadow>
|
||||
<paper-shadow class="card" id="hitDice">
|
||||
<h1>{{> hitDice hitDice="d6HitDice" d="6"}}</h1>
|
||||
<h1>{{> hitDice hitDice="d8HitDice" d="8"}}</h1>
|
||||
<h1>{{> hitDice hitDice="d10HitDice" d="10"}}</h1>
|
||||
<h1>{{> hitDice hitDice="d12HitDice" d="12"}}</h1>
|
||||
<p class="caption">Hit Dice</p>
|
||||
</paper-shadow>
|
||||
{{# if canCast}}
|
||||
<paper-shadow class="card" id="spellSlots">
|
||||
<h1>{{> spellSlots}}</h1>
|
||||
<p class="caption">Spell Slots</p>
|
||||
</paper-shadow>
|
||||
{{/if}}
|
||||
{{# if attributeBase "rages"}}
|
||||
<paper-shadow class="card" id="rages">
|
||||
<h1>{{attributeValue "rages"}}</h1>
|
||||
<p class="caption">rages</p>
|
||||
</paper-shadow>
|
||||
{{/if}}
|
||||
{{# if attributeBase "sorceryPoints"}}
|
||||
<paper-shadow class="card" id="sorceryPoints">
|
||||
<h1>{{attributeValue "sorceryPoints"}}</h1>
|
||||
<p class="caption">Sorcery Points</p>
|
||||
</paper-shadow>
|
||||
{{/if}}
|
||||
{{# if attributeBase "expertiseDice"}}
|
||||
<paper-shadow class="card" id="expertiseDice">
|
||||
<h1>{{attributeValue "expertiseDice"}}</h1>
|
||||
<p class="caption">Expertise Dice</p>
|
||||
</paper-shadow>
|
||||
{{/if}}
|
||||
{{# if attributeBase "superiorityDice"}}
|
||||
<paper-shadow class="card" id="superiorityDice">
|
||||
<h1>{{attributeValue "superiorityDice"}}</h1>
|
||||
<p class="caption">Superiority Dice</p>
|
||||
</paper-shadow>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div id="stats">
|
||||
<div class="abilityFlex">
|
||||
{{> abilityCards}}
|
||||
</div>
|
||||
<div class="statsFlex">
|
||||
<paper-shadow class="card" id="armor">
|
||||
<h1>{{attributeValue "armor"}}</h1>
|
||||
<p class="caption">Armor</p>
|
||||
</paper-shadow>
|
||||
<paper-shadow class="card" id="initiative">
|
||||
<h1>{{skillMod "initiative"}}</h1>
|
||||
<p class="caption">Initiative</p>
|
||||
</paper-shadow>
|
||||
<paper-shadow class="card" id="proficiencyBonus">
|
||||
<h1>{{attributeValue "proficiencyBonus"}}</h1>
|
||||
<p class="caption">Proficiency Bonus</p>
|
||||
</paper-shadow>
|
||||
<paper-shadow class="card" id="speed">
|
||||
<h1>{{attributeValue "speed"}}</h1>
|
||||
<p class="caption">Speed</p>
|
||||
</paper-shadow>
|
||||
<paper-shadow class="card" id="passivePerception">
|
||||
<h1>{{passiveSkill "perception"}}</h1>
|
||||
<p class="caption">Passive Perception</p>
|
||||
</paper-shadow>
|
||||
<paper-shadow class="card" id="hitDice">
|
||||
<h1>{{> hitDice hitDice="d6HitDice" d="6"}}</h1>
|
||||
<h1>{{> hitDice hitDice="d8HitDice" d="8"}}</h1>
|
||||
<h1>{{> hitDice hitDice="d10HitDice" d="10"}}</h1>
|
||||
<h1>{{> hitDice hitDice="d12HitDice" d="12"}}</h1>
|
||||
<p class="caption">Hit Dice</p>
|
||||
</paper-shadow>
|
||||
{{# if canCast}}
|
||||
<paper-shadow class="card" id="spellSlots">
|
||||
<h1>{{> spellSlots}}</h1>
|
||||
<p class="caption">Spell Slots</p>
|
||||
</paper-shadow>
|
||||
{{/if}}
|
||||
{{# if attributeBase "rages"}}
|
||||
<paper-shadow class="card" id="rages">
|
||||
<h1>{{attributeValue "rages"}}</h1>
|
||||
<p class="caption">rages</p>
|
||||
</paper-shadow>
|
||||
{{/if}}
|
||||
{{# if attributeBase "sorceryPoints"}}
|
||||
<paper-shadow class="card" id="sorceryPoints">
|
||||
<h1>{{attributeValue "sorceryPoints"}}</h1>
|
||||
<p class="caption">Sorcery Points</p>
|
||||
</paper-shadow>
|
||||
{{/if}}
|
||||
{{# if attributeBase "expertiseDice"}}
|
||||
<paper-shadow class="card" id="expertiseDice">
|
||||
<h1>{{attributeValue "expertiseDice"}}</h1>
|
||||
<p class="caption">Expertise Dice</p>
|
||||
</paper-shadow>
|
||||
{{/if}}
|
||||
{{# if attributeBase "superiorityDice"}}
|
||||
<paper-shadow class="card" id="superiorityDice">
|
||||
<h1>{{attributeValue "superiorityDice"}}</h1>
|
||||
<p class="caption">Superiority Dice</p>
|
||||
</paper-shadow>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template name="hitDice">
|
||||
{{# if ../attributeBase hitDice}}
|
||||
{{../attributeValue hitDice}}d{{d}} + {{../abilityMod "constitution"}}
|
||||
{{/if}}
|
||||
{{# if ../attributeBase hitDice}}
|
||||
{{../attributeValue hitDice}}d{{d}} + {{../abilityMod "constitution"}}
|
||||
{{/if}}
|
||||
</template>
|
||||
|
||||
<template name="spellSlots">
|
||||
{{attributeValue "level1SpellSlots"}}
|
||||
{{attributeValue "level2SpellSlots"}}
|
||||
{{attributeValue "level3SpellSlots"}}
|
||||
{{attributeValue "level4SpellSlots"}}
|
||||
{{attributeValue "level5SpellSlots"}}
|
||||
{{attributeValue "level6SpellSlots"}}
|
||||
{{attributeValue "level7SpellSlots"}}
|
||||
{{attributeValue "level8SpellSlots"}}
|
||||
{{attributeValue "level9SpellSlots"}}
|
||||
{{attributeValue "level1SpellSlots"}}
|
||||
{{attributeValue "level2SpellSlots"}}
|
||||
{{attributeValue "level3SpellSlots"}}
|
||||
{{attributeValue "level4SpellSlots"}}
|
||||
{{attributeValue "level5SpellSlots"}}
|
||||
{{attributeValue "level6SpellSlots"}}
|
||||
{{attributeValue "level7SpellSlots"}}
|
||||
{{attributeValue "level8SpellSlots"}}
|
||||
{{attributeValue "level9SpellSlots"}}
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
.card.double {
|
||||
display: flex;
|
||||
}
|
||||
.card.double > div{
|
||||
vertical-align: top;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.abilityScore {
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
background-color: #D50000;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.abilityFlex .card {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.abilityCardRight {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.abilityCardRight hr{
|
||||
margin: 8px -16px;
|
||||
}
|
||||
|
||||
.abilityCardRight h1{
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
@@ -1,98 +1,110 @@
|
||||
<template name="abilityCards">
|
||||
{{> strengthCard}}
|
||||
{{> dexterityCard}}
|
||||
{{> constitutionCard}}
|
||||
{{> intelligenceCard}}
|
||||
{{> wisdomCard}}
|
||||
{{> charismaCard}}
|
||||
{{> strengthCard}}
|
||||
{{> dexterityCard}}
|
||||
{{> constitutionCard}}
|
||||
{{> intelligenceCard}}
|
||||
{{> wisdomCard}}
|
||||
{{> charismaCard}}
|
||||
</template>
|
||||
|
||||
<template name="strengthCard">
|
||||
<paper-shadow class="card double">
|
||||
<h1>Strength</h1>
|
||||
<h1>{{attributeValue "strength"}}</h1>
|
||||
<h2>{{abilityMod "strength"}}</h2>
|
||||
<hr>
|
||||
<table>
|
||||
{{> skillRow name="Strength Save" skill="strengthSave"}}
|
||||
{{> skillRow name="Athletics" skill="athletics"}}
|
||||
</table>
|
||||
</paper-shadow>
|
||||
<paper-shadow class="card double">
|
||||
<div class="abilityScore red white-text">
|
||||
<h1 class="display1">{{attributeValue "strength"}}</h1>
|
||||
<h2>{{abilityMod "strength"}}</h2>
|
||||
</div>
|
||||
<div class="abilityCardRight">
|
||||
<h1>Strength</h1>
|
||||
{{> skillRow name="Save" skill="strengthSave"}}
|
||||
<hr>
|
||||
{{> skillRow name="Athletics" skill="athletics"}}
|
||||
</div>
|
||||
</paper-shadow>
|
||||
</template>
|
||||
|
||||
<template name="dexterityCard">
|
||||
<paper-shadow class="card double">
|
||||
<h1>Dexterity</h1>
|
||||
<h1>{{attributeValue "dexterity"}}</h1>
|
||||
<h2>{{abilityMod "dexterity"}}</h2>
|
||||
<hr>
|
||||
<table>
|
||||
{{> skillRow name="Dexterity Save" skill="dexteritySave"}}
|
||||
{{> skillRow name="Acrobatics" skill="acrobatics"}}
|
||||
{{> skillRow name="Sleight of Hand" skill="sleightOfHand"}}
|
||||
{{> skillRow name="Stealth" skill="stealth"}}
|
||||
</table>
|
||||
</paper-shadow>
|
||||
<paper-shadow class="card double">
|
||||
<div class="abilityScore green white-text">
|
||||
<h1 class="display1">{{attributeValue "dexterity"}}</h1>
|
||||
<h2>{{abilityMod "dexterity"}}</h2>
|
||||
</div>
|
||||
<div class="abilityCardRight">
|
||||
<h1>Dexterity</h1>
|
||||
{{> skillRow name="Save" skill="dexteritySave"}}
|
||||
<hr>
|
||||
{{> skillRow name="Acrobatics" skill="acrobatics"}}
|
||||
{{> skillRow name="Sleight of Hand" skill="sleightOfHand"}}
|
||||
{{> skillRow name="Stealth" skill="stealth"}}
|
||||
</div>
|
||||
</paper-shadow>
|
||||
</template>
|
||||
|
||||
<template name="constitutionCard">
|
||||
<paper-shadow class="card double">
|
||||
<h1>Constitution</h1>
|
||||
<h1>{{attributeValue "constitution"}}</h1>
|
||||
<h2>{{abilityMod "constitution"}}</h2>
|
||||
<hr>
|
||||
<table>
|
||||
{{> skillRow name="Constitution Save" skill="constitutionSave"}}
|
||||
</table>
|
||||
</paper-shadow>
|
||||
<paper-shadow class="card double">
|
||||
<div class="abilityScore deep-orange white-text">
|
||||
<h1 class="display1">{{attributeValue "constitution"}}</h1>
|
||||
<h2>{{abilityMod "constitution"}}</h2>
|
||||
</div>
|
||||
<div class="abilityCardRight">
|
||||
<h1>Constitution</h1>
|
||||
{{> skillRow name="Save" skill="constitutionSave"}}
|
||||
<hr>
|
||||
</div>
|
||||
</paper-shadow>
|
||||
</template>
|
||||
|
||||
<template name="intelligenceCard">
|
||||
<paper-shadow class="card double">
|
||||
<h1>Intelligence</h1>
|
||||
<h1>{{attributeValue "intelligence"}}</h1>
|
||||
<h2>{{abilityMod "intelligence"}}</h2>
|
||||
<hr>
|
||||
<table>
|
||||
{{> skillRow name="Intelligence Save" skill="intelligenceSave"}}
|
||||
{{> skillRow name="Arcana" skill="arcana"}}
|
||||
{{> skillRow name="History" skill="history"}}
|
||||
{{> skillRow name="Investigation" skill="investigation"}}
|
||||
{{> skillRow name="Nature" skill="nature"}}
|
||||
{{> skillRow name="Religion" skill="religion"}}
|
||||
</table>
|
||||
</paper-shadow>
|
||||
<paper-shadow class="card double">
|
||||
<div class="abilityScore indigo white-text">
|
||||
<h1 class="display1">{{attributeValue "intelligence"}}</h1>
|
||||
<h2>{{abilityMod "intelligence"}}</h2>
|
||||
</div>
|
||||
<div class="abilityCardRight">
|
||||
<h1>Intelligence</h1>
|
||||
{{> skillRow name="Save" skill="intelligenceSave"}}
|
||||
<hr>
|
||||
{{> skillRow name="Arcana" skill="arcana"}}
|
||||
{{> skillRow name="History" skill="history"}}
|
||||
{{> skillRow name="Investigation" skill="investigation"}}
|
||||
{{> skillRow name="Nature" skill="nature"}}
|
||||
{{> skillRow name="Religion" skill="religion"}}
|
||||
</div>
|
||||
</paper-shadow>
|
||||
</template>
|
||||
|
||||
<template name="wisdomCard">
|
||||
<paper-shadow class="card double">
|
||||
<h1>Wisdom</h1>
|
||||
<h1>{{attributeValue "wisdom"}}</h1>
|
||||
<h2>{{abilityMod "wisdom"}}</h2>
|
||||
<hr>
|
||||
<table>
|
||||
{{> skillRow name="Wisdom Save" skill="wisdomSave"}}
|
||||
{{> skillRow name="Animal Handling" skill="animalHandling"}}
|
||||
{{> skillRow name="Insight" skill="insight"}}
|
||||
{{> skillRow name="Medicine" skill="medicine"}}
|
||||
{{> skillRow name="Perception" skill="perception"}}
|
||||
{{> skillRow name="Survival" skill="survival"}}
|
||||
</table>
|
||||
</paper-shadow>
|
||||
<paper-shadow class="card double">
|
||||
<div class="abilityScore purple white-text">
|
||||
<h1 class="display1">{{attributeValue "wisdom"}}</h1>
|
||||
<h2>{{abilityMod "wisdom"}}</h2>
|
||||
</div>
|
||||
<div class="abilityCardRight">
|
||||
<h1>Wisdom</h1>
|
||||
{{> skillRow name="Save" skill="wisdomSave"}}
|
||||
<hr>
|
||||
{{> skillRow name="Animal Handling" skill="animalHandling"}}
|
||||
{{> skillRow name="Insight" skill="insight"}}
|
||||
{{> skillRow name="Medicine" skill="medicine"}}
|
||||
{{> skillRow name="Perception" skill="perception"}}
|
||||
{{> skillRow name="Survival" skill="survival"}}
|
||||
</div>
|
||||
</paper-shadow>
|
||||
</template>
|
||||
|
||||
<template name="charismaCard">
|
||||
<paper-shadow class="card double">
|
||||
<h1>Charisma</h1>
|
||||
<h1>{{attributeValue "charisma"}}</h1>
|
||||
<h2>{{abilityMod "charisma"}}</h2>
|
||||
<hr>
|
||||
<table>
|
||||
{{> skillRow name="Charisma Save" skill="charismaSave"}}
|
||||
{{> skillRow name="Deception" skill="deception"}}
|
||||
{{> skillRow name="Intimidation" skill="intimidation"}}
|
||||
{{> skillRow name="Performance" skill="performance"}}
|
||||
{{> skillRow name="Persuasion" skill="persuasion"}}
|
||||
</table>
|
||||
</paper-shadow>
|
||||
<paper-shadow class="card double">
|
||||
<div class="abilityScore pink white-text">
|
||||
<h1 class="display1">{{attributeValue "charisma"}}</h1>
|
||||
<h2>{{abilityMod "charisma"}}</h2>
|
||||
</div>
|
||||
<div class="abilityCardRight">
|
||||
<h1>Charisma</h1>
|
||||
{{> skillRow name="Save" skill="charismaSave"}}
|
||||
<hr>
|
||||
{{> skillRow name="Deception" skill="deception"}}
|
||||
{{> skillRow name="Intimidation" skill="intimidation"}}
|
||||
{{> skillRow name="Performance" skill="performance"}}
|
||||
{{> skillRow name="Persuasion" skill="persuasion"}}
|
||||
</div>
|
||||
</paper-shadow>
|
||||
</template>
|
||||
|
||||
@@ -2,18 +2,18 @@
|
||||
<paper-tabs id="characterSheetTabs" scrollable="true" selected={{selectedTab}}>
|
||||
<paper-tab>Stats</paper-tab>
|
||||
<paper-tab>Features</paper-tab>
|
||||
<paper-tab>Persona</paper-tab>
|
||||
<paper-tab>Inventory</paper-tab>
|
||||
<paper-tab>Spellbook</paper-tab>
|
||||
<paper-tab>Persona</paper-tab>
|
||||
<paper-tab>Journal</paper-tab>
|
||||
</paper-tabs>
|
||||
|
||||
<core-animated-pages selected={{selectedTab}} transitions="slide-from-right">
|
||||
<div>{{> stats}}</div>
|
||||
<div>features</div>
|
||||
<div>persona</div>
|
||||
<div>inventory</div>
|
||||
<div>spellBook</div>
|
||||
<div>persona</div>
|
||||
<div>journal</div>
|
||||
</core-animated-pages>
|
||||
</template>
|
||||
|
||||
48
rpg-docs/client/views/character/skills/skills.css
Normal file
48
rpg-docs/client/views/character/skills/skills.css
Normal file
@@ -0,0 +1,48 @@
|
||||
.skillRow {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.profIcon{
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 26px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
/*TODO fix the actual images and remove inversion*/
|
||||
-webkit-filter: invert(100%);
|
||||
opacity: 0.54;
|
||||
}
|
||||
|
||||
.skillMod {
|
||||
width: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.skillName, .skillMod{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.fail.skillMod {
|
||||
color: #D50000;
|
||||
}
|
||||
|
||||
.advantage{
|
||||
background-image: url(/png/advantage/greenUp.png);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.disadvantage{
|
||||
background-image: url(/png/advantage/redDown.png);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
td.conditionals::after{
|
||||
content: "*";
|
||||
}
|
||||
@@ -14,13 +14,13 @@
|
||||
</template>
|
||||
|
||||
<template name="skillRow">
|
||||
<tr>
|
||||
<td><div class="profIcon" style="background-image: url(/png/profIcons/{{profIcon skill}})"></div></td>
|
||||
<div class="subhead skillRow">
|
||||
<div class="profIcon" style="background-image: url(/png/profIcons/{{profIcon skill}})"></div>
|
||||
{{#if failSkill}}
|
||||
<td class="fail">fail</td>
|
||||
<div class="fail skillMod">fail</div>
|
||||
{{else}}
|
||||
<td class="{{advantage}}">{{../skillMod skill}}</td>
|
||||
<div class="{{advantage}} skillMod">{{../skillMod skill}}</div>
|
||||
{{/if}}
|
||||
<td class={{conditionals}}>{{name}}</td>
|
||||
</tr>
|
||||
<div class="{{conditionals}} skillName">{{name}}</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,119 +0,0 @@
|
||||
root {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial;
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body.core-narrow {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.calculatedValue {
|
||||
color: #021C33;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h1, .headline {
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
color: #000;
|
||||
color: rgba(0,0,0,0.87);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
h2, .title {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
color: #000;
|
||||
color: rgba(0,0,0,0.87);
|
||||
letter-spacing: 0.005;
|
||||
}
|
||||
|
||||
h3, .subhead {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
color: #000;
|
||||
color: rgba(0,0,0,0.87);
|
||||
letter-spacing: 0.010;
|
||||
}
|
||||
|
||||
.body2 {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
color: rgba(0,0,0,0.87);
|
||||
letter-spacing: 0.010;
|
||||
}
|
||||
|
||||
p, .body1, body {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #000;
|
||||
color: rgba(0,0,0,0.87);
|
||||
letter-spacing: 0.010;
|
||||
}
|
||||
|
||||
.caption{
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #000;
|
||||
color: rgba(0,0,0,0.54);
|
||||
letter-spacing: 0.020;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: #444;
|
||||
opacity: 0.12;
|
||||
border-width: 0;
|
||||
color: #444;
|
||||
height: 1px;
|
||||
line-height: 0;
|
||||
margin: 0 -16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
paper-button {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
color: #000;
|
||||
color: rgba(0,0,0,0.87);
|
||||
letter-spacing: 0.010;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 148px;
|
||||
margin: 4px;
|
||||
padding: 16px;
|
||||
font-size: 14px;
|
||||
border-radius: 2px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.card.double {
|
||||
width: 304px;
|
||||
}
|
||||
|
||||
.card paper-button {
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.grey-background, body {
|
||||
background-color: #E0E0E0;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
Reference in New Issue
Block a user