updated character reference sheet visuals

This commit is contained in:
Steffen 2021-03-28 21:56:58 +02:00
parent 1ad0113d04
commit b4ee856705
No known key found for this signature in database
GPG Key ID: 764D74E98267DFC6
3 changed files with 101 additions and 108 deletions

View File

@ -365,10 +365,6 @@ export default {
transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;
z-index: 50; z-index: 50;
#townsquare.public &.bluffs {
opacity: 0;
transform: scale(0.1);
}
> svg { > svg {
position: absolute; position: absolute;
top: 10px; top: 10px;
@ -439,6 +435,11 @@ export default {
} }
} }
#townsquare.public > .bluffs {
opacity: 0;
transform: scale(0.1);
}
.fabled ul li .token:before { .fabled ul li .token:before {
content: " "; content: " ";
opacity: 0; opacity: 0;

View File

@ -74,7 +74,8 @@ export default {
overflow-y: auto; overflow-y: auto;
} }
.roles & { .roles &,
.characters & {
max-height: 100%; max-height: 100%;
max-width: 60%; max-width: 60%;
} }
@ -121,6 +122,10 @@ export default {
display: flex; display: flex;
align-content: center; align-content: center;
justify-content: center; justify-content: center;
.roles &,
.characters & {
max-width: 100%;
}
} }
.modal-fade-enter, .modal-fade-enter,

View File

@ -15,21 +15,16 @@
<font-awesome-icon icon="address-card" /> <font-awesome-icon icon="address-card" />
{{ edition.name || "Custom Script" }} {{ edition.name || "Custom Script" }}
</h3> </h3>
<ul class="legend"> <div
<li> v-for="(teamRoles, team) in rolesGrouped"
<span class="name">Name</span> :key="team"
<span class="icon">Icon</span> :class="['team', team]"
<span class="ability">Ability</span> >
<span class="player" v-if="Object.keys(playersByRole).length"> <aside>
Player
</span>
</li>
</ul>
<div v-for="(teamRoles, team) in rolesGrouped" :key="team" :class="[team]">
<h4>{{ team }}</h4> <h4>{{ team }}</h4>
</aside>
<ul> <ul>
<li v-for="role in teamRoles" :class="[team]" :key="role.id"> <li v-for="role in teamRoles" :class="[team]" :key="role.id">
<span class="name">{{ role.name }}</span>
<span <span
class="icon" class="icon"
v-if="role.id" v-if="role.id"
@ -43,11 +38,15 @@
})` })`
}" }"
></span> ></span>
<span class="ability">{{ role.ability }}</span> <div class="role">
<span class="player" v-if="Object.keys(playersByRole).length">{{ <span class="player" v-if="Object.keys(playersByRole).length">{{
playersByRole[role.id] ? playersByRole[role.id].join(", ") : "" playersByRole[role.id] ? playersByRole[role.id].join(", ") : ""
}}</span> }}</span>
<span class="name">{{ role.name }}</span>
<span class="ability">{{ role.ability }}</span>
</div>
</li> </li>
<li :class="[team]" v-if="teamRoles.length % 2"></li>
</ul> </ul>
</div> </div>
</Modal> </Modal>
@ -114,124 +113,112 @@ h3 {
} }
} }
h4 {
text-transform: capitalize;
display: flex;
align-items: center;
height: 20px;
&:before,
&:after {
content: " ";
width: 100%;
height: 1px;
border-radius: 2px;
}
&:before {
margin-right: 15px;
}
&:after {
margin-left: 15px;
}
}
.townsfolk { .townsfolk {
.name, .name {
h4 {
color: $townsfolk; color: $townsfolk;
&:before,
&:after {
background-color: $townsfolk;
} }
aside {
background: linear-gradient(-90deg, $townsfolk, transparent);
} }
} }
.outsider { .outsider {
.name, .name {
h4 {
color: $outsider; color: $outsider;
&:before,
&:after {
background-color: $outsider;
} }
aside {
background: linear-gradient(-90deg, $outsider, transparent);
} }
} }
.minion { .minion {
.name, .name {
h4 {
color: $minion; color: $minion;
&:before,
&:after {
background-color: $minion;
} }
aside {
background: linear-gradient(-90deg, $minion, transparent);
} }
} }
.demon { .demon {
.name, .name {
h4 {
color: $demon; color: $demon;
&:before,
&:after {
background-color: $demon;
} }
aside {
background: linear-gradient(-90deg, $demon, transparent);
} }
} }
ul {
li { .team {
display: flex; display: flex;
align-items: stretch;
width: 100%; width: 100%;
align-items: center; &:not(:last-child):after {
align-content: center; content: " ";
/*background: linear-gradient(0deg, #ffffff0f, transparent);*/ display: block;
border-radius: 10px; width: 25%;
.icon { height: 1px;
width: 6vh; background: linear-gradient(90deg, #ffffffaa, transparent);
background-size: cover; position: absolute;
background-position: 0 -5px; left: 0;
bottom: 0;
}
aside {
width: 30px;
display: flex;
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
margin: 0 10px; align-items: center;
justify-content: center;
align-content: center;
}
h4 {
text-transform: uppercase;
text-align: center; text-align: center;
border-left: 1px solid #ffffff1f; transform: rotate(90deg);
border-right: 1px solid #ffffff1f; transform-origin: center;
font-size: 80%;
}
}
ul {
column-count: 2;
flex-grow: 1;
display: block;
padding: 5px 0;
li {
display: flex;
align-items: center;
width: 100%;
min-height: 6vh;
padding-right: 10px;
.icon {
width: 8vh;
background-size: cover;
background-position: 0 -5px;
flex-shrink: 0;
flex-grow: 0;
&:after { &:after {
content: " "; content: " ";
display: block; display: block;
padding-top: 65%; padding-top: 75%;
} }
} }
.name { .role {
flex-grow: 0; line-height: 80%;
flex-shrink: 0;
width: 15%;
font-weight: bold;
text-align: right;
font-size: 110%;
}
.player {
flex-grow: 0;
flex-shrink: 1;
text-align: right;
margin: 0 10px;
color: #888;
font-size: smaller;
}
.ability {
flex-grow: 1; flex-grow: 1;
} }
} .name {
&.legend {
width: 100%;
font-weight: bold; font-weight: bold;
height: 20px; font-size: 75%;
margin-top: 10px; display: block;
li span {
background: none;
height: auto;
font-family: inherit;
font-size: inherit;
color: #fff;
} }
.icon:after { .player {
padding-top: 0; color: #888;
float: right;
font-size: 60%;
}
.ability {
font-size: 70%;
} }
} }
} }