updated character reference sheet visuals

src/components/TownSquare.vue

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

src/components/modals/Modal.vue

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

src/components/modals/ReferenceModal.vue

@@ -15,21 +15,16 @@
       <font-awesome-icon icon="address-card" />
       {{ edition.name || "Custom Script" }}
     </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>
+      </aside>
       <ul>
         <li v-for="role in teamRoles" :class="[team]" :key="role.id">
-          <span class="name">{{ role.name }}</span>
           <span
             class="icon"
             v-if="role.id"
@@ -43,11 +38,15 @@
               })`
             }"
           ></span>
-          <span class="ability">{{ role.ability }}</span>
+          <div class="role">
             <span class="player" v-if="Object.keys(playersByRole).length">{{
               playersByRole[role.id] ? playersByRole[role.id].join(", ") : ""
             }}</span>
+            <span class="name">{{ role.name }}</span>
+            <span class="ability">{{ role.ability }}</span>
+          </div>
         </li>
+        <li :class="[team]" v-if="teamRoles.length % 2"></li>
       </ul>
     </div>
   </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 {
-  .name,
+  .name {
-  h4 {
     color: $townsfolk;
-    &:before,
-    &:after {
-      background-color: $townsfolk;
   }
+  aside {
+    background: linear-gradient(-90deg, $townsfolk, transparent);
   }
 }
 .outsider {
-  .name,
+  .name {
-  h4 {
     color: $outsider;
-    &:before,
-    &:after {
-      background-color: $outsider;
   }
+  aside {
+    background: linear-gradient(-90deg, $outsider, transparent);
   }
 }
 .minion {
-  .name,
+  .name {
-  h4 {
     color: $minion;
-    &:before,
-    &:after {
-      background-color: $minion;
   }
+  aside {
+    background: linear-gradient(-90deg, $minion, transparent);
   }
 }
 .demon {
-  .name,
+  .name {
-  h4 {
     color: $demon;
-    &:before,
-    &:after {
-      background-color: $demon;
   }
+  aside {
+    background: linear-gradient(-90deg, $demon, transparent);
   }
 }
-ul {
+
-  li {
+.team {
   display: flex;
+  align-items: stretch;
   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-shrink: 0;
-      margin: 0 10px;
+    align-items: center;
+    justify-content: center;
+    align-content: center;
+  }
+
+  h4 {
+    text-transform: uppercase;
     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 {
         content: " ";
         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;
     }
-  }
+    .name {
-  &.legend {
-    width: 100%;
       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%;
     }
   }
 }