xevion/glance
1
0
Fork 0
mirror of https://github.com/Xevion/glance.git synced 2025-12-15 04:11:59 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add popover functionality

Browse Source
This commit is contained in:
Svilen Markov
2024-08-19 02:15:22 +01:00
parent b4a4df480e
commit 83c7c4a14a
4 changed files with 205 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
internal/assets/static/main.css
View File

@@ -34,6 +34,8 @@
--color-separator: hsl(var(--bghs), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 4% * var(--cm))));
--color-widget-content-border: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 4%)));
--color-widget-background-highlight: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 4%)));
--color-popover-background: hsl(var(--bgh), calc(var(--bgs) + 3%), calc(var(--bgl) + 2%));
--color-popover-border: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 7%)));
--ths: var(--bgh), calc(var(--bgs) * var(--tsm));
--color-text-base: hsl(var(--ths), calc(var(--scheme) var(--cm) * 58%));
@@ -436,6 +438,50 @@ kbd:active {
box-shadow: 0 0 0 0 var(--color-widget-background-highlight);
}
.popover-container, [data-popover-html] {
display: none;
}
.popover-container {
--triangle-size: 10px;
--triangle-offset: 50%;
z-index: 20;
position: absolute;
padding-top: calc(var(--triangle-size) + 3px);
padding-inline: var(--content-bounds-padding);
}
.popover-frame {
position: relative;
padding: 10px;
background: var(--color-popover-background);
border: 1px solid var(--color-popover-border);
border-radius: 5px;
animation: popoverFrameEntrance 0.3s backwards cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 15px 30px -5px hsla(var(--bghs), calc(var(--bgl) * 0.2), 0.5);
}
.popover-frame::before {
content: '';
position: absolute;
width: var(--triangle-size);
height: var(--triangle-size);
transform: rotate(45deg);
background-color: var(--color-popover-background);
border-top-left-radius: 4px;
border-left: 1px solid var(--color-popover-border);
border-top: 1px solid var(--color-popover-border);
left: calc(var(--triangle-offset) - (var(--triangle-size) / 2));
top: calc(var(--triangle-size) / 2 * -1 - 1px);
}
@keyframes popoverFrameEntrance {
from {
opacity: 0;
transform: translateY(-8px);
}
}
.content-bounds {
max-width: 1600px;
width: 100%;