/* === Force GLASS on Downloads & Docker status widgets (and their tables) === */

/* Target the grid items (works whether Homarr labels them by id or kind) */

.grid-stack-item[data-id="downloads"],

.grid-stack-item[data-kind="downloads"],

.grid-stack-item[data-id*="docker"],

.grid-stack-item[data-kind*="docker"] {

--mantine-color-body: transparent !important;

--mantine-color-dark-6: transparent !important;

--mantine-color-dark-7: transparent !important;

}

/* Card/Paper container for those widgets */

.grid-stack-item[data-id="downloads"] .mantine-Paper-root,

.grid-stack-item[data-kind="downloads"] .mantine-Paper-root,

.grid-stack-item[data-id*="docker"] .mantine-Paper-root,

.grid-stack-item[data-kind*="docker"] .mantine-Paper-root {

background: rgba(255,255,255,0.10) !important; /* 90% transparent glass */

border-radius: 16px !important;

backdrop-filter: blur(4px) !important;

-webkit-backdrop-filter: blur(4px) !important;

border: 1px solid rgba(255,255,255,0.15) !important;

box-shadow: 0 4px 25px rgba(0,0,0,0.1) !important;

}

/* Nuke ALL table backgrounds inside those widgets (MRT + Mantine Table) */

.grid-stack-item[data-id="downloads"] :is(

[class*="MRT_"], /* every Material React Table element */

.mantine-Table-root,

.mantine-Table-thead, .mantine-Table-tbody,

.mantine-Table-tfoot, .mantine-Table-tr,

.mantine-Table-th, .mantine-Table-td,

.mantine-ScrollArea-viewport, .mantine-ScrollArea-root

),

.grid-stack-item[data-kind="downloads"] :is(

[class*="MRT_"],

.mantine-Table-root, .mantine-Table-thead, .mantine-Table-tbody,

.mantine-Table-tfoot, .mantine-Table-tr, .mantine-Table-th, .mantine-Table-td,

.mantine-ScrollArea-viewport, .mantine-ScrollArea-root

),

.grid-stack-item[data-id*="docker"] :is(

[class*="MRT_"],

.mantine-Table-root, .mantine-Table-thead, .mantine-Table-tbody,

.mantine-Table-tfoot, .mantine-Table-tr, .mantine-Table-th, .mantine-Table-td,

.mantine-ScrollArea-viewport, .mantine-ScrollArea-root

),

.grid-stack-item[data-kind*="docker"] :is(

[class*="MRT_"],

.mantine-Table-root, .mantine-Table-thead, .mantine-Table-tbody,

.mantine-Table-tfoot, .mantine-Table-tr, .mantine-Table-th, .mantine-Table-td,

.mantine-ScrollArea-viewport, .mantine-ScrollArea-root

) {

background: transparent !important;

}

/* Row hover to match dark text */

.grid-stack-item[data-id="downloads"] .mantine-Table-tr:hover,

.grid-stack-item[data-kind="downloads"] .mantine-Table-tr:hover,

.grid-stack-item[data-id*="docker"] .mantine-Table-tr:hover,

.grid-stack-item[data-kind*="docker"] .mantine-Table-tr:hover {

background: rgba(0,0,0,0.05) !important;

}

/* Text color for those two widgets */

.grid-stack-item[data-id="downloads"] *,

.grid-stack-item[data-kind="downloads"] *,

.grid-stack-item[data-id*="docker"] *,

.grid-stack-item[data-kind*="docker"] * {

color: #222222 !important; /* semi-dark for readability */

font-weight: 600;

}

/* Optional: soften table borders */

.grid-stack-item[data-id="downloads"] .mantine-Table-root,

.grid-stack-item[data-kind="downloads"] .mantine-Table-root,

.grid-stack-item[data-id*="docker"] .mantine-Table-root,

.grid-stack-item[data-kind*="docker"] .mantine-Table-root {

border-color: rgba(0,0,0,0.15) !important;

}