Files
homarr/apps/nextjs/src/components/board/sections/item.module.css
T
Thomas 19760e5722 fix: restore translucent dashboard styling (#6664)
* fix: restore translucent dashboard styling

* fix: restore dashboard widget transparency

* fix: address dashboard review feedback

* fix: apply board opacity to containers

* fix: flatten demo board container

* fix: default board roundness to sm

* fix: restore assistant widget transparency

* Revert "fix: default board roundness to sm"

This reverts commit c235cbdf2b.

* fix: address remaining dashboard review comments

* test: align grid geometry expectations
2026-08-22 15:51:43 +02:00

98 lines
2.2 KiB
CSS

.itemCard {
@mixin dark {
--background-color: rgb(from var(--mantine-color-dark-6) r g b / var(--opacity));
--border-color: rgb(from var(--mantine-color-dark-4) r g b / var(--opacity));
}
@mixin light {
--background-color: rgb(from var(--mantine-color-white) r g b / var(--opacity));
--border-color: rgb(from var(--mantine-color-gray-3) r g b / var(--opacity));
}
background-color: var(--background-color) !important;
border-color: var(--border-color) !important;
}
.containerCard {
@mixin dark {
--container-default-border-color: var(--mantine-color-dark-4);
}
@mixin light {
--container-default-border-color: var(--mantine-color-gray-3);
}
--border-color: rgb(
from var(--container-border-color, var(--container-default-border-color)) r g b / var(--opacity, 1)
);
}
.itemCard:global(.iframe-wrapper) {
background-color: transparent !important;
border-color: transparent !important;
}
.collapsedContainerCard {
background-color: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
.containerToggle {
z-index: 9;
overflow: hidden;
color: var(--mantine-color-text);
background-color: var(--background-color) !important;
border-color: var(--border-color) !important;
}
.containerToggle :global(.mantine-Button-inner) {
width: 100%;
min-width: 0;
}
.containerToggle :global(.mantine-Button-label) {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.containerLabel,
.containerAction {
background-color: var(--background-color) !important;
border-color: var(--border-color) !important;
}
.containerLabel {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.containerLabel :global(.mantine-Badge-label) {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.containerBody {
visibility: visible;
opacity: 1;
transition:
opacity 140ms ease 80ms,
visibility 0s;
}
.containerBody[data-collapsed="true"] {
visibility: hidden;
pointer-events: none;
opacity: 0;
transition:
opacity 120ms ease,
visibility 0s linear 120ms;
}
@media (prefers-reduced-motion: reduce) {
.containerBody,
.containerBody[data-collapsed="true"] {
transition: none;
}
}