magnus/datagraph
1
0
Fork 0
Code Issues 3 Pull requests Projects Releases 3 Packages Wiki Activity Actions

Tooltips

Browse source
This commit is contained in:
Magnus Åhall 2025-07-11 13:57:27 +02:00
parent 8988720c0e
commit bcd0f1ce15
6 changed files with 123 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

44
static/css/main.css
View file

@ -85,13 +85,20 @@ button {
}
#editor-node > div.ops {
display: grid;
grid-template-columns: min-content 1fr repeat(3, min-content);
grid-template-columns: min-content 1fr repeat(4, min-content);
align-items: center;
grid-gap: 8px;
}
#editor-node > div.ops #editor-node-name {
font-weight: bold;
}
#editor-node > div.ops img {
display: block;
height: 32px;
}
#editor-node > div.ops img.highlight {
filter: invert(0.7) sepia(0.5) hue-rotate(50deg) saturate(300%) brightness(0.85);
}
#types {
grid-area: navigation;
}
@ -319,3 +326,38 @@ dialog#connection-data div.button {
#editor-type-schema img.saving {
filter: invert(0.7) sepia(0.5) hue-rotate(0deg) saturate(600%) brightness(0.75);
}
@keyframes example {
0% {
opacity: 0%;
}
50% {
opacity: 0%;
}
100% {
opacity: 100%;
}
}
.tooltip {
position: relative;
}
.tooltip.left::after {
right: 0px;
}
.tooltip.right::after {
left: 0px;
}
.tooltip:hover::after {
animation-name: example;
animation-duration: 1s;
white-space: nowrap;
background-color: var(--section-color);
box-shadow: 5px 5px 21px -4px rgba(0, 0, 0, 0.75);
position: absolute;
top: 48px;
content: attr(data-tooltip);
display: block;
padding: 8px 16px;
border-radius: 4px;
color: #fff;
z-index: 8192;
}