diff --git a/src/components/Player.vue b/src/components/Player.vue index fc698a2..6774386 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -42,42 +42,44 @@ /> - - - - - - +
+ + + + + + +
@@ -433,7 +435,21 @@ export default { } /****** Player choice icons *******/ -.player > svg { +.player .overlay { + width: 100%; + position: absolute; + pointer-events: none; + top: 0; + display: flex; + align-items: center; + justify-content: center; + &:after { + content: " "; + display: block; + padding-top: 100%; + } +} +.player .overlay svg { position: absolute; filter: drop-shadow(0 0 3px black); z-index: 2; @@ -443,8 +459,6 @@ export default { &.nominate, &.vote, &.cancel { - top: 9%; - left: 25%; width: 50%; height: 60%; opacity: 0; @@ -466,27 +480,27 @@ export default { } } -#townsquare.vote .player.vote-yes > svg.vote.fa-skull { +#townsquare.vote .player.vote-yes .overlay svg.vote.fa-skull { opacity: 0.5; transform: scale(1); } -#townsquare.vote .player.you.vote-yes > svg.vote.fa-skull, -#townsquare.vote .player.vote-lock.vote-yes > svg.vote.fa-skull, -#townsquare.vote .player.vote-lock:not(.vote-yes) > svg.vote.fa-times { +#townsquare.vote .player.you.vote-yes .overlay svg.vote.fa-skull, +#townsquare.vote .player.vote-lock.vote-yes .overlay svg.vote.fa-skull, +#townsquare.vote .player.vote-lock:not(.vote-yes) .overlay svg.vote.fa-times { opacity: 1; transform: scale(1); } -li.from:not(.nominate) .player > svg.cancel { +li.from:not(.nominate) .player .overlay svg.cancel { opacity: 1; transform: scale(1); pointer-events: all; } -li.swap:not(.from) .player > svg.swap, -li.nominate .player > svg.nominate, -li.move:not(.from) .player > svg.move { +li.swap:not(.from) .player .overlay svg.swap, +li.nominate .player .overlay svg.nominate, +li.move:not(.from) .player .overlay svg.move { opacity: 1; transform: scale(1); pointer-events: all;