feat: DnsHole feature parity with oldmarr (#1145)

* feat: DnsHole feature parity with oldmarr
feat: advanced control management
feat: disconnected state
fix: summary widget sizing
feat: summary text flash on update

* feat: dnshole summary integrations disconnected error page

* fix: classnaming

* refactor: small rename, console to logger and unnecessary as conversion changes

---------

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>
This commit is contained in:
SeDemal
2024-09-24 23:25:13 +02:00
committed by GitHub
parent 07f72f7367
commit 36915d95fe
16 changed files with 467 additions and 145 deletions

View File

@@ -34,3 +34,42 @@
min-height: var(--sortButtonSize);
}
}
/*Make background of component different on hover, depending on base var*/
.hoverable-component {
&:hover {
background-color: rgb(from var(--background-color) calc(r + 10) calc(g + 10) calc(b + 10) / var(--opacity));
}
}
/*Make background of component different on click, depending on base var, inverse of hover*/
.clickable-component {
&:active {
background-color: rgb(from var(--background-color) calc(r - 10) calc(g - 10) calc(b - 10) / var(--opacity));
}
}
/*FadingGlowing effect for text that updates, add className and put the updating value as key*/
@keyframes glow {
from {
text-shadow: 0 0 var(--glow-size) var(--mantine-color-text);
}
to {
text-shadow: none;
}
}
.text-flash {
animation: glow 1s ease-in-out;
}
/*To apply to any ScrollArea that we want to flex. Same weird workaround as before*/
.flexed-scroll-area {
height: 100%;
.mantine-ScrollArea-viewport {
& div[style="min-width: 100%; display: table;"] {
display: flex !important;
height: 100%;
}
}
}