martyn
/
townsquare
mirror of https://github.com/bra1n/townsquare.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

tooltip styling

This commit is contained in:
Steffen 2020-04-18 20:21:26 +02:00
parent 30caa1a627
commit 53f2042374
No known key found for this signature in database
GPG Key ID: 764D74E98267DFC6
3 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Player.vue
View File

@ -240,7 +240,7 @@ export default {
display: none; display: none;
} }
.circle .player:hover .ability { .circle .player:hover .ability {
display: block; opacity: 1;
} }
/***** Reminder token *****/ /***** Reminder token *****/

22
src/components/Token.vue
View File

@ -111,6 +111,7 @@ export default {
} }
.ability { .ability {
display: flex;
position: absolute; position: absolute;
padding: 5px 10px; padding: 5px 10px;
top: 20px; top: 20px;
@ -118,26 +119,31 @@ export default {
width: 250px; width: 250px;
z-index: 25; z-index: 25;
font-size: 80%; font-size: 80%;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.5);
border-radius: 10px; border-radius: 10px;
border: 3px solid black; border: 3px solid black;
text-align: left; text-align: left;
display: none; justify-items: center;
align-content: center;
align-items: center;
pointer-events: none;
opacity: 0;
transition: opacity 200ms ease-in-out;
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
&:after { &:before {
content: " "; content: " ";
border: 10px solid transparent; border: 10px solid transparent;
position: absolute;
right: 100%;
width: 0; width: 0;
height: 0; height: 0;
border-right-color: black; border-right-color: black;
top: 10px; position: absolute;
margin: 0 2px; margin-right: 2px;
right: 100%;
} }
} }
&:hover .ability { &:hover .ability {
display: block; opacity: 1;
} }
} }
</style> </style>

2
src/components/TownSquare.vue
View File

@ -188,7 +188,7 @@ export default {
.ability { .ability {
right: 110%; right: 110%;
left: auto; left: auto;
&:after { &:before {
border-right-color: transparent; border-right-color: transparent;
border-left-color: black; border-left-color: black;
right: auto; right: auto;