mirror of
https://github.com/ajnart/homarr.git
synced 2026-02-16 19:46:58 +01:00
36915d95fe
* 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>
76 lines
1.9 KiB
CSS
76 lines
1.9 KiB
CSS
.downloads-widget-table {
|
|
/*Set Header static and overflow body instead*/
|
|
display: flex;
|
|
height: 100%;
|
|
flex-direction: column;
|
|
.mantine-Table-tbody {
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
scrollbar-width: 0;
|
|
}
|
|
/*Hide scrollbar until I can apply an overlay scrollbar instead*/
|
|
.mantine-Table-tbody::-webkit-scrollbar {
|
|
width: 0;
|
|
}
|
|
/*Properly size header*/
|
|
.mrt-table-head-cell-labels {
|
|
min-height: var(--ratioWidth);
|
|
gap: 0;
|
|
padding: 0;
|
|
}
|
|
/*Properly size controls*/
|
|
.mrt-grab-handle-button {
|
|
margin: unset;
|
|
width: var(--dragButtonSize);
|
|
min-width: var(--dragButtonSize);
|
|
height: var(--dragButtonSize);
|
|
min-height: var(--dragButtonSize);
|
|
}
|
|
.mrt-table-head-sort-button {
|
|
margin: unset;
|
|
width: var(--sortButtonSize);
|
|
min-width: var(--sortButtonSize);
|
|
height: var(--sortButtonSize);
|
|
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%;
|
|
}
|
|
}
|
|
}
|