TyleoDvDelaware3217/Kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2025-07-19 07:44:02 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

rotated square hack for border (since triangle svg doesn't support it :D

Browse source
This commit is contained in:
Doruk 2025-06-19 19:57:27 +02:00
parent 6045db458a
commit 209b58306d
1 changed files with 28 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/components/Tooltip.vue
View file

@ -189,18 +189,36 @@ export default {
position: absolute; position: absolute;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
width: 0; width: 12px;
height: 0; height: 6px;
border-left: 6px solid transparent; overflow: hidden;
border-right: 6px solid transparent;
border-bottom: 6px solid rgba(17, 24, 39, 0.95);
top: -6px; top: -6px;
&::before {
content: "";
position: absolute;
left: 50%;
top: 100%;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
width: 8px;
height: 8px;
background: rgba(17, 24, 39, 0.95);
border: 1px solid rgba(75, 85, 99, 0.3);
border-bottom: none;
border-right: none;
}
&.arrow-above { &.arrow-above {
top: auto; top: auto;
bottom: -6px; bottom: -6px;
border-bottom: none;
border-top: 6px solid rgba(17, 24, 39, 0.95); &::before {
top: 0%;
transform: translateX(-50%) translateY(-50%) rotate(225deg);
border: 1px solid rgba(75, 85, 99, 0.3);
border-bottom: none;
border-right: none;
}
} }
} }
@ -229,10 +247,9 @@ export default {
} }
.tooltip-arrow { .tooltip-arrow {
border-bottom-color: rgba(31, 41, 55, 0.95); &::before {
background: rgba(31, 41, 55, 0.95);
&.arrow-above { border-color: rgba(107, 114, 128, 0.3);
border-top-color: rgba(31, 41, 55, 0.95);
} }
} }
} }