diff --git a/src/components/TownSquare.vue b/src/components/TownSquare.vue
index 3236102..729a813 100644
--- a/src/components/TownSquare.vue
+++ b/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;
diff --git a/src/components/modals/Modal.vue b/src/components/modals/Modal.vue
index f0390b8..4fa3a14 100644
--- a/src/components/modals/Modal.vue
+++ b/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,
diff --git a/src/components/modals/ReferenceModal.vue b/src/components/modals/ReferenceModal.vue
index a07fc16..320d76b 100644
--- a/src/components/modals/ReferenceModal.vue
+++ b/src/components/modals/ReferenceModal.vue
@@ -15,21 +15,16 @@
{{ edition.name || "Custom Script" }}
-
- -
- Name
- Icon
- Ability
-
- Player
-
-
-
-
-
{{ team }}
+
@@ -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,
- h4 {
+ .name {
color: $townsfolk;
- &:before,
- &:after {
- background-color: $townsfolk;
- }
+ }
+ aside {
+ background: linear-gradient(-90deg, $townsfolk, transparent);
}
}
.outsider {
- .name,
- h4 {
+ .name {
color: $outsider;
- &:before,
- &:after {
- background-color: $outsider;
- }
+ }
+ aside {
+ background: linear-gradient(-90deg, $outsider, transparent);
}
}
.minion {
- .name,
- h4 {
+ .name {
color: $minion;
- &:before,
- &:after {
- background-color: $minion;
- }
+ }
+ aside {
+ background: linear-gradient(-90deg, $minion, transparent);
}
}
.demon {
- .name,
- h4 {
+ .name {
color: $demon;
- &:before,
- &:after {
- background-color: $demon;
- }
+ }
+ aside {
+ background: linear-gradient(-90deg, $demon, transparent);
}
}
+
+.team {
+ display: flex;
+ align-items: stretch;
+ width: 100%;
+ &:not(:last-child):after {
+ content: " ";
+ display: block;
+ width: 25%;
+ height: 1px;
+ background: linear-gradient(90deg, #ffffffaa, transparent);
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ }
+ aside {
+ width: 30px;
+ display: flex;
+ flex-grow: 0;
+ flex-shrink: 0;
+ align-items: center;
+ justify-content: center;
+ align-content: center;
+ }
+
+ h4 {
+ text-transform: uppercase;
+ text-align: center;
+ transform: rotate(90deg);
+ transform-origin: center;
+ font-size: 80%;
+ }
+}
+
ul {
+ column-count: 2;
+ flex-grow: 1;
+ display: block;
+ padding: 5px 0;
+
li {
display: flex;
- width: 100%;
align-items: center;
- align-content: center;
- /*background: linear-gradient(0deg, #ffffff0f, transparent);*/
- border-radius: 10px;
+ width: 100%;
+ min-height: 6vh;
+ padding-right: 10px;
.icon {
- width: 6vh;
+ width: 8vh;
background-size: cover;
background-position: 0 -5px;
- flex-grow: 0;
flex-shrink: 0;
- margin: 0 10px;
- text-align: center;
- border-left: 1px solid #ffffff1f;
- border-right: 1px solid #ffffff1f;
+ flex-grow: 0;
&:after {
content: " ";
display: block;
- padding-top: 65%;
+ padding-top: 75%;
}
}
- .name {
- flex-grow: 0;
- 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 {
+ .role {
+ line-height: 80%;
flex-grow: 1;
}
- }
- &.legend {
- width: 100%;
- font-weight: bold;
- height: 20px;
- margin-top: 10px;
- li span {
- background: none;
- height: auto;
- font-family: inherit;
- font-size: inherit;
- color: #fff;
+ .name {
+ font-weight: bold;
+ font-size: 75%;
+ display: block;
}
- .icon:after {
- padding-top: 0;
+ .player {
+ color: #888;
+ float: right;
+ font-size: 60%;
+ }
+ .ability {
+ font-size: 70%;
}
}
}