almet/umap
1
0
Fork 0
mirror of https://github.com/umap-project/umap.git synced 2025-04-29 11:52:38 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

chore: iterate on tooltips design

Browse source
This commit is contained in:
David Larlet 2025-01-30 14:15:56 -05:00
parent 70f87d8636
commit 1eb1f320db
No known key found for this signature in database
GPG key ID: 3E2953A359E7E7BD
2 changed files with 20 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
umap/static/umap/css/bar.css
View file

@ -32,6 +32,11 @@
background-color: var(--color-lightCyan); background-color: var(--color-lightCyan);
color: var(--color-dark); color: var(--color-dark);
} }
.dark [type=button].connected-peers:hover
{
text-decoration: none;
border: 0.5px solid var(--color-brightCyan);
}
.dark .off.connected-peers { .dark .off.connected-peers {
background-color: var(--color-lightGray); background-color: var(--color-lightGray);
color: var(--color-darkGray); color: var(--color-darkGray);

22
umap/static/umap/css/tooltip.css
View file

@ -7,11 +7,12 @@
box-shadow: var(--block-shadow); box-shadow: var(--block-shadow);
display: none; display: none;
color: #eeeeec; color: #eeeeec;
border-radius: 2px; border-radius: var(--border-radius);
z-index: var(--zindex-tooltip); z-index: var(--zindex-tooltip);
font-weight: normal; font-weight: normal;
--tooltip-color: var(--color-darkGray); --tooltip-color: var(--color-darkGray);
background-color: var(--tooltip-color); background-color: var(--tooltip-color);
--arrow-size: 8px;
} }
.tooltip-accent { .tooltip-accent {
--tooltip-color: var(--color-lightCyan); --tooltip-color: var(--color-lightCyan);
@ -21,7 +22,7 @@
} }
.umap-tooltip-container.tooltip-top:after { .umap-tooltip-container.tooltip-top:after {
top: 100%; top: 100%;
left: calc(50% - 11px); left: calc(50% - var(--arrow-size));
border: solid transparent; border: solid transparent;
content: " "; content: " ";
height: 0; height: 0;
@ -29,12 +30,12 @@
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
border-top-color: var(--tooltip-color); border-top-color: var(--tooltip-color);
border-width: 11px; border-width: var(--arrow-size);
margin-left: calc(-50% + 21px); margin-left: calc(-50% + 2 * var(--arrow-size));
} }
.umap-tooltip-container.tooltip-bottom:before { .umap-tooltip-container.tooltip-bottom:before {
top: -22px; top: calc(var(--arrow-size) * -2);
left: calc(50% - 11px); left: calc(50% - var(--arrow-size));
border: solid transparent; border: solid transparent;
content: " "; content: " ";
height: 0; height: 0;
@ -42,12 +43,19 @@
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
border-top-color: var(--tooltip-color); border-top-color: var(--tooltip-color);
border-width: 11px; border-width: var(--arrow-size);
transform: rotate(180deg); transform: rotate(180deg);
} }
.tooltip-accent ul {
padding-top: var(--small-box-padding);
padding-bottom: var(--small-box-padding);
}
.tooltip-accent li { .tooltip-accent li {
background-color: var(--color-light); background-color: var(--color-light);
color: var(--color-dark); color: var(--color-dark);
padding: var(--small-box-padding); padding: var(--small-box-padding);
margin-bottom: var(--small-box-padding); margin-bottom: var(--small-box-padding);
} }
.tooltip-accent li:last-of-type {
margin-bottom: 0;
}