CSS for catgories #5864

steffenglock · 2026-06-04T07:32:57Z

steffenglock
Jun 4, 2026

I tried several css snipes for changing the background color with a rgba value of categories. But nothing wih success.
Can anyone give me a hint?

AdyaTech · 2026-06-04T12:33:19Z

AdyaTech
Jun 4, 2026

Could you share the CSS you've tried and a screenshot or example of the category markup?

Without seeing the implementation, it's difficult to tell why the styles aren't being applied. Common issues include:

The selector not matching the actual category element.
Theme styles overriding your custom CSS due to higher specificity.
The category background being controlled by a CSS variable that needs to be overridden instead.
Browser caching causing old styles to be displayed.

If you post the relevant HTML and CSS, it should be much easier to identify what's preventing the RGBA background color from taking effect.

0 replies

steffenglock · 2026-06-04T12:57:08Z

steffenglock
Jun 4, 2026
Author

you can see the category "tailscale" ist white. All other things i could adjust. I could not found any entry for mantine which changed the color of this area.

here ist my existing CSS for this:

/* 1. Hauptcontainer: Hintergrund, Blur, helle Schrift & Schatten für Schwebe-Effekt */
.grid-stack-item-content:not([class*="pihole"]):not([class*="Pihole"]) {
    background: rgba(38, 38, 38, 0.75) !important;
    backdrop-filter: blur(15px) !important;
    border-radius: var(--mantine-radius-lg) !important;
    overflow: hidden !important;
    color: lightgray !important;
    
    /* Box-Shadow für den plastischen 3D- / Schwebe-Effekt */
    box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.7), 4px 4px 10px rgba(0, 0, 0, 0.3) !important;
}

/* 2. Transparenz-Regeln (Erweitert um :not([class*="Badge"]), damit Docker-Status-Badges nicht transparent erzwungen werden) */
.glass-widget *:not([class*="Progress"]):not([role="progressbar"]):not([style*="mantine-color"]):not(.mantine-Flex-root > div):not([class^="bookmark-module"]):not([class*="bookmark-module"]):not([class*="Badge"]),
.grid-stack-item-content:not([class*="pihole"]):not([class*="Pihole"]) *:not([class*="Progress"]):not([role="progressbar"]):not([style*="mantine-color"]):not(.mantine-Flex-root > div):not([class^="bookmark-module"]):not([class*="bookmark-module"]):not([class*="Badge"]) {
    background: transparent !important;
    background-color: transparent !important;
    color: lightgray !important;
}

/* 3. Hover-Effekt: Text wird rot beim Drüberfahren (Badges ausgeschlossen, damit sie lesbar bleiben) */
.grid-stack-item-content:not([class*="pihole"]):not([class*="Pihole"]) *:not([class*="Progress"]):not([role="progressbar"]):not([class*="Badge"]):hover {
    color: red !important;
}

/* 4. Spezifische Anpassung für die Docker-Status-Badges */
/* Aktiv (Grüner Hintergrund, weiße Schrift) */
.grid-stack-item-content [class*="Badge"][data-color="green"],
.grid-stack-item-content [class*="Badge"][data-color="teal"] {
    background-color: #2b8a3e !important; /* Kräftiges Grün */
    color: #ffffff !important; /* Weiße Schrift */
}

/* Beendet / Gestoppt (Roter Hintergrund, weiße Schrift) */
.grid-stack-item-content [class*="Badge"][data-color="red"] {
    background-color: #c92a2a !important; /* Kräftiges Rot */
    color: #ffffff !important; /* Weiße Schrift */
}

/* 5. Oberste Leiste (Header): 75% transparent (25% Deckkraft), Blur-Effekt & helle Schrift separat */
header, .mantine-Header-root {
    background-color: rgba(38, 38, 38, 0.25) !important;
    backdrop-filter: blur(15px) !important;
}
header, .mantine-Header-root, header *, .mantine-Header-root * {
    color: lightgray !important; /* Betrifft jetzt nur noch die Textfarbe, nicht mehr den Hintergrund */
}

/* 6. Suchfeld in der Leiste: Leicht transparent mit hellem Text */
header input, .mantine-Input-input, [class*="Search"] input {
    background-color: rgba(255, 255, 255, 0.08) !important; /* Leicht transparente weiße Schicht */
    border: 1px solid rgba(255, 255, 255, 0.15) !important;  /* Dezenter Rand */
    color: lightgray !important;
}
header input::placeholder, .mantine-Input-input::placeholder {
    color: rgba(211, 211, 211, 0.6) !important; /* "Suchen..." Text leicht ausgegraut */
}

/* 7. Lesezeichen (Bookmarks): Weißen Hintergrund entfernen, Rand nach innen versetzt & Hover */
[class*="bookmark-module"], 
[class*="bookmark-module"] * {
    background: transparent !important;
    background-color: transparent !important; /* Entfernt das harte Weiß der inneren Elemente */
}
[class*="bookmark-module"] {
    border: none !important; /* Verhindert, dass der normale Rand gezeichnet wird */
    outline: 1px solid #ffffff !important; /* Zieht eine Outline statt eines Borders */
    outline-offset: -3px !important; /* Zieht die Linie um 3px in das Element hinein */
    border-radius: var(--mantine-radius-md, 8px) !important; 
    transition: outline-color 0.2s ease !important; /* Geschmeidiger Farbwechsel */
}
[class*="bookmark-module"]:hover {
    outline-color: red !important; /* Outline wird rot beim Hovern */
}

/* 8. Alle Overlays (Wetter-HoverCards, Such-Modals, Dropdowns & Menüs) */
.mantine-Tooltip-tooltip,
.mantine-Popover-dropdown,
.mantine-HoverCard-dropdown,
.mantine-Menu-dropdown,
.mantine-Autocomplete-dropdown,
.mantine-Select-dropdown,
.mantine-Spotlight-content,
.mantine-Modal-content {
    background-color: rgba(38, 38, 38, 0.85) !important; 
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.75) !important; 
    border-radius: var(--mantine-radius-md, 8px) !important;
}

/* Erzwingt helle Schrift und entfernt das harte Weiß aus ALLEN inneren Elementen dieser Popups */
.mantine-Tooltip-tooltip *,
.mantine-Popover-dropdown *,
.mantine-HoverCard-dropdown *,
.mantine-Menu-dropdown *,
.mantine-Autocomplete-dropdown *,
.mantine-Select-dropdown *,
.mantine-Spotlight-content *,
.mantine-Modal-content * {
    color: lightgray !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Pfeile der Popups anpassen */
.mantine-Tooltip-arrow,
.mantine-Popover-arrow,
.mantine-HoverCard-arrow,
.mantine-Menu-arrow {
    background-color: rgba(38, 38, 38, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* 9. Suchergebnisse & Menü-Einträge: Leichte Hervorhebung beim Drüberfahren mit der Maus */
.mantine-Menu-item:hover,
.mantine-Spotlight-action:hover,
.mantine-Select-item:hover,
.mantine-Autocomplete-item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--mantine-radius-sm, 4px) !important;
}

/* --------------------------------------------------------- */
/* 10. HOVER-EFFEKT NUR FÜR APP-KACHELN                      */
/* --------------------------------------------------------- */

/* METHODE 1: Über die Custom Class "app-hover" (Offiziell empfohlen) */
/* Damit die Kachel beim Vergrößern über den anderen liegt */
.grid-stack-item:has(.app-hover) {
    z-index: 1 !important;
}
.grid-stack-item:has(.app-hover):hover {
    z-index: 1000 !important;
}

/* Animation & Skalierung */
.app-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    will-change: transform; 
}
.app-hover:hover {
    transform: scale(1.05) !important;
    box-shadow: 15px 15px 35px rgba(0, 0, 0, 0.9), 8px 8px 20px rgba(0, 0, 0, 0.5) !important;
}


/* METHODE 2: Automatischer Fallback für alle Apps ohne Custom Class */
/* Zielt auf alle Elemente mit Link (a[href]), schließt Lesezeichen UND Elemente mit ".no-hover" Klasse aus */
.grid-stack-item:has(a[href]):not(:has([class*="bookmark-module"])):not(:has(.no-hover)) {
    z-index: 1 !important;
}
.grid-stack-item:has(a[href]):not(:has([class*="bookmark-module"])):not(:has(.no-hover)):hover {
    z-index: 1000 !important;
}
.grid-stack-item:has(a[href]):not(:has([class*="bookmark-module"])):not(:has(.no-hover)) .grid-stack-item-content {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    will-change: transform;
}
.grid-stack-item:has(a[href]):not(:has([class*="bookmark-module"])):not(:has(.no-hover)):hover .grid-stack-item-content {
    transform: scale(1.05) !important;
    box-shadow: 15px 15px 35px rgba(0, 0, 0, 0.9), 8px 8px 20px rgba(0, 0, 0, 0.5) !important;
}````

1 reply

AdyaTech Jun 4, 2026

Looking at your CSS, one thing stands out:

.grid-stack-item-content * {
    background: transparent !important;
    background-color: transparent !important;
}

This rule is extremely broad and may be overriding the category badge/background before your custom category color can be applied.

If the "Tailscale" category is rendered as a Mantine badge, chip, or pill component, it may be inheriting background-color: transparent !important from this rule.

I'd recommend inspecting the "Tailscale" element in your browser's developer tools and checking:

Which CSS class is responsible for the white background.
Whether your transparency rule is overriding the category styles.
Whether the category color is coming from a Mantine CSS variable rather than a direct background-color declaration.

Once you identify the actual class or CSS variable used for the category, you can target it directly instead of applying a blanket override to all child elements.

steffenglock · 2026-06-04T13:38:54Z

steffenglock
Jun 4, 2026
Author

ok now i found it !!! [data-kind="category"] was the important information which i searched. Now i can switch it. Thanks for your help.
For anyone who is intressted here is my screenshot of the design and the CSS:

/* 1. Hauptcontainer: Hintergrund, Blur, helle Schrift & Schatten für Schwebe-Effekt */
.grid-stack-item-content:not([class*="pihole"]):not([class*="Pihole"]) {
    background: rgba(38, 38, 38, 0.75) !important;
    backdrop-filter: blur(15px) !important;
    border-radius: var(--mantine-radius-lg) !important;
    overflow: hidden !important;
    color: lightgray !important;
    
    /* Box-Shadow für den plastischen 3D- / Schwebe-Effekt */
    box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.7), 4px 4px 10px rgba(0, 0, 0, 0.3) !important;
}

/* 2. Transparenz-Regeln (Erweitert um :not([class*="Badge"]), damit Docker-Status-Badges nicht transparent erzwungen werden) */
.glass-widget *:not([class*="Progress"]):not([role="progressbar"]):not([style*="mantine-color"]):not(.mantine-Flex-root > div):not([class^="bookmark-module"]):not([class*="bookmark-module"]):not([class*="Badge"]),
.grid-stack-item-content:not([class*="pihole"]):not([class*="Pihole"]) *:not([class*="Progress"]):not([role="progressbar"]):not([style*="mantine-color"]):not(.mantine-Flex-root > div):not([class^="bookmark-module"]):not([class*="bookmark-module"]):not([class*="Badge"]) {
    background: transparent !important;
    background-color: transparent !important;
    color: lightgray !important;
}

/* 3. Hover-Effekt: Text wird rot beim Drüberfahren (Badges ausgeschlossen, damit sie lesbar bleiben) */
.grid-stack-item-content:not([class*="pihole"]):not([class*="Pihole"]) *:not([class*="Progress"]):not([role="progressbar"]):not([class*="Badge"]):hover {
    color: red !important;
}

/* 4. Spezifische Anpassung für die Docker-Status-Badges */
/* Aktiv (Grüner Hintergrund, weiße Schrift) */
.grid-stack-item-content [class*="Badge"][data-color="green"],
.grid-stack-item-content [class*="Badge"][data-color="teal"] {
    background-color: #2b8a3e !important; /* Kräftiges Grün */
    color: #ffffff !important; /* Weiße Schrift */
}

/* Beendet / Gestoppt (Roter Hintergrund, weiße Schrift) */
.grid-stack-item-content [class*="Badge"][data-color="red"] {
    background-color: #c92a2a !important; /* Kräftiges Rot */
    color: #ffffff !important; /* Weiße Schrift */
}

/* 5. Oberste Leiste (Header): 75% transparent (25% Deckkraft), Blur-Effekt & helle Schrift separat */
header, .mantine-Header-root {
    background-color: rgba(38, 38, 38, 0.25) !important;
    backdrop-filter: blur(15px) !important;
}
header, .mantine-Header-root, header *, .mantine-Header-root * {
    color: lightgray !important; /* Betrifft jetzt nur noch die Textfarbe, nicht mehr den Hintergrund */
}

/* 6. Suchfeld in der Leiste: Leicht transparent mit hellem Text */
header input, .mantine-Input-input, [class*="Search"] input {
    background-color: rgba(255, 255, 255, 0.08) !important; /* Leicht transparente weiße Schicht */
    border: 1px solid rgba(255, 255, 255, 0.15) !important;  /* Dezenter Rand */
    color: lightgray !important;
}
header input::placeholder, .mantine-Input-input::placeholder {
    color: rgba(211, 211, 211, 0.6) !important; /* "Suchen..." Text leicht ausgegraut */
}

/* 7. Lesezeichen (Bookmarks): Weißen Hintergrund entfernen, Rand nach innen versetzt & Hover */
[class*="bookmark-module"], 
[class*="bookmark-module"] * {
    background: transparent !important;
    background-color: transparent !important; /* Entfernt das harte Weiß der inneren Elemente */
}
[class*="bookmark-module"] {
    border: none !important; /* Verhindert, dass der normale Rand gezeichnet wird */
    outline: 1px solid #ffffff !important; /* Zieht eine Outline statt eines Borders */
    outline-offset: -3px !important; /* Zieht die Linie um 3px in das Element hinein */
    border-radius: var(--mantine-radius-md, 8px) !important; 
    transition: outline-color 0.2s ease !important; /* Geschmeidiger Farbwechsel */
}
[class*="bookmark-module"]:hover {
    outline-color: red !important; /* Outline wird rot beim Hovern */
}

/* 8. Alle Overlays (Wetter-HoverCards, Such-Modals, Dropdowns & Menüs) */
.mantine-Tooltip-tooltip,
.mantine-Popover-dropdown,
.mantine-HoverCard-dropdown,
.mantine-Menu-dropdown,
.mantine-Autocomplete-dropdown,
.mantine-Select-dropdown,
.mantine-Spotlight-content,
.mantine-Modal-content {
    background-color: rgba(38, 38, 38, 0.85) !important; 
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.75) !important; 
    border-radius: var(--mantine-radius-md, 8px) !important;
}

/* Erzwingt helle Schrift und entfernt das harte Weiß aus ALLEN inneren Elementen dieser Popups */
.mantine-Tooltip-tooltip *,
.mantine-Popover-dropdown *,
.mantine-HoverCard-dropdown *,
.mantine-Menu-dropdown *,
.mantine-Autocomplete-dropdown *,
.mantine-Select-dropdown *,
.mantine-Spotlight-content *,
.mantine-Modal-content * {
    color: lightgray !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Pfeile der Popups anpassen */
.mantine-Tooltip-arrow,
.mantine-Popover-arrow,
.mantine-HoverCard-arrow,
.mantine-Menu-arrow {
    background-color: rgba(38, 38, 38, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* 9. Suchergebnisse & Menü-Einträge: Leichte Hervorhebung beim Drüberfahren mit der Maus */
.mantine-Menu-item:hover,
.mantine-Spotlight-action:hover,
.mantine-Select-item:hover,
.mantine-Autocomplete-item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--mantine-radius-sm, 4px) !important;
}

/* --------------------------------------------------------- */
/* 10. HOVER-EFFEKT NUR FÜR APP-KACHELN                      */
/* --------------------------------------------------------- */

/* METHODE 1: Über die Custom Class "app-hover" (Offiziell empfohlen) */
.grid-stack-item:has(.app-hover) {
    z-index: 1 !important;
}
.grid-stack-item:has(.app-hover):hover {
    z-index: 1000 !important;
}

.app-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    will-change: transform; 
}
.app-hover:hover {
    transform: scale(1.05) !important;
    box-shadow: 15px 15px 35px rgba(0, 0, 0, 0.9), 8px 8px 20px rgba(0, 0, 0, 0.5) !important;
}

/* METHODE 2: Automatischer Fallback (schließt Lesezeichen, Notizen & Kategorien aus) */
.grid-stack-item:has(a[href]):not(:has([class*="bookmark-module"])):not(:has(.no-hover)):not(:has([data-kind="category"])) {
    z-index: 1 !important;
}
.grid-stack-item:has(a[href]):not(:has([class*="bookmark-module"])):not(:has(.no-hover)):not(:has([data-kind="category"])):hover {
    z-index: 1000 !important;
}
.grid-stack-item:has(a[href]):not(:has([class*="bookmark-module"])):not(:has(.no-hover)):not(:has([data-kind="category"])) .grid-stack-item-content {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    will-change: transform;
}
.grid-stack-item:has(a[href]):not(:has([class*="bookmark-module"])):not(:has(.no-hover)):not(:has([data-kind="category"])):hover .grid-stack-item-content {
    transform: scale(1.05) !important;
    box-shadow: 15px 15px 35px rgba(0, 0, 0, 0.9), 8px 8px 20px rgba(0, 0, 0, 0.5) !important;
}

/* --------------------------------------------------------- */
/* 11. KATEGORIEN FIX (Basierend auf Quelltext-Struktur)     */
/* --------------------------------------------------------- */

/* Macht das weiße "Paper"-Element der Kategorie komplett transparent.
   Da dies nur passiert, wenn ein [data-kind="category"] darin liegt, 
   bleiben alle Settings-Seiten und Modals zu 100% sicher und unangetastet! */
.mantine-Card-root:has([data-kind="category"]),
.mantine-Paper-root:has([data-kind="category"]),
[class*="itemCard"]:has([data-kind="category"]) {
    background: transparent !important;
    background-color: rgba(38, 38, 38, 0.85) !important;
    border: none !important;
    box-shadow: none !important;
}

/* Erzwingt eine helle Schriftfarbe für den Kategorie-Titel (z.B. "tailscale") und Icons */
.mantine-Card-root:has([data-kind="category"]) .mantine-Title-root,
.mantine-Card-root:has([data-kind="category"]) .tabler-icon {
    color: lightgray !important;
}

/* Leichter Hervorhebungs-Effekt beim Hover über die Kopfzeile der Kategorie */
.mantine-Card-root:has([data-kind="category"]) > .mantine-Stack-root > .mantine-Group-root:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-radius: var(--mantine-radius-md) !important;
}````

1 reply

AdyaTech Jun 4, 2026

Happy to help!

steffenglock · 2026-06-04T14:08:35Z

steffenglock
Jun 4, 2026
Author

I cleaned up the CSS a little bit and here is my final code:

/* 1. Hauptcontainer: Hintergrund, Blur, helle Schrift & Schatten für Schwebe-Effekt */
.grid-stack-item-content:not([class*="pihole"]):not([class*="Pihole"]) {
    background: rgba(38, 38, 38, 0.75) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-radius: var(--mantine-radius-lg) !important;
    overflow: hidden !important;
    color: lightgray !important;
    box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.7), 4px 4px 10px rgba(0, 0, 0, 0.3) !important;
}

/* 2. SICHERE Transparenz-Regeln */
.glass-widget .mantine-Paper-root,
.glass-widget .mantine-Card-root,
.grid-stack-item-content:not([class*="pihole"]):not([class*="Pihole"]) .mantine-Paper-root,
.grid-stack-item-content:not([class*="pihole"]):not([class*="Pihole"]) .mantine-Card-root {
    background: transparent !important;
}

.grid-stack-item-content:not([class*="pihole"]):not([class*="Pihole"]) *:not([class*="Progress"]):not([role="progressbar"]):not([class*="Badge"]) {
    color: lightgray !important;
}

/* 3. Hover-Effekt: Text wird rot beim Drüberfahren */
.grid-stack-item-content:not([class*="pihole"]):not([class*="Pihole"]) *:not([class*="Progress"]):not([role="progressbar"]):not([class*="Badge"]):hover {
    color: red !important;
}

/* 4. Spezifische Anpassung für die Docker-Status-Badges */
.grid-stack-item-content [class*="Badge"][data-color="green"],
.grid-stack-item-content [class*="Badge"][data-color="teal"] {
    background-color: #2b8a3e !important;
    color: #ffffff !important;
}
.grid-stack-item-content [class*="Badge"][data-color="red"] {
    background-color: #c92a2a !important;
    color: #ffffff !important;
}

/* 5. Oberste Leiste (Header) & Action-Buttons */
header, 
.mantine-Header-root {
    background-color: rgba(38, 38, 38, 0.25) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
}
header, 
.mantine-Header-root, 
header *, 
.mantine-Header-root * {
    color: lightgray !important;
}
header .mantine-ActionIcon-root:hover,
.mantine-Header-root .mantine-ActionIcon-root:hover,
header button:hover,
.mantine-Header-root button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* 6. Suchfeld in der Leiste */
header input, 
.mantine-Input-input, 
[class*="Search"] input {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: lightgray !important;
}
header input::placeholder, 
.mantine-Input-input::placeholder {
    color: rgba(211, 211, 211, 0.6) !important;
}

/* 7. Lesezeichen (Bookmarks) */
[class*="bookmark-module"], 
[class*="bookmark-module"] * {
    background: transparent !important;
}
[class*="bookmark-module"] {
    border: none !important;
    outline: 1px solid #ffffff !important;
    outline-offset: -3px !important;
    border-radius: var(--mantine-radius-md, 8px) !important;
    transition: outline-color 0.2s ease !important;
}
[class*="bookmark-module"]:hover {
    outline-color: red !important;
}

/* 8. Alle Overlays (Wetter-HoverCards, Such-Modals, Dropdowns & Menüs) */
.mantine-Tooltip-tooltip,
.mantine-Popover-dropdown,
.mantine-HoverCard-dropdown,
.mantine-Menu-dropdown,
.mantine-Autocomplete-dropdown,
.mantine-Select-dropdown,
.mantine-Spotlight-content,
.mantine-Modal-content {
    background-color: rgba(38, 38, 38, 0.85) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.75) !important;
    border-radius: var(--mantine-radius-md, 8px) !important;
}
.mantine-Tooltip-tooltip *,
.mantine-Popover-dropdown *,
.mantine-HoverCard-dropdown *,
.mantine-Menu-dropdown *,
.mantine-Autocomplete-dropdown *,
.mantine-Select-dropdown *,
.mantine-Spotlight-content *,
.mantine-Modal-content * {
    color: lightgray !important;
    background: transparent !important;
}
.mantine-Tooltip-arrow,
.mantine-Popover-arrow,
.mantine-HoverCard-arrow,
.mantine-Menu-arrow {
    background-color: rgba(38, 38, 38, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* 9. Suchergebnisse & Menü-Einträge (Hover) */
.mantine-Menu-item:hover,
.mantine-Spotlight-action:hover,
.mantine-Select-item:hover,
.mantine-Autocomplete-item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--mantine-radius-sm, 4px) !important;
}

/* --------------------------------------------------------- */
/* 10. HOVER-EFFEKT NUR FÜR APP-KACHELN                      */
/* --------------------------------------------------------- */

.grid-stack-item:has(.app-hover),
.grid-stack-item:has(a[href]):not(:has([class*="bookmark-module"])):not(:has(.no-hover)):not(:has([data-kind="category"])) {
    z-index: 1 !important;
}
.grid-stack-item:has(.app-hover):hover,
.grid-stack-item:has(a[href]):not(:has([class*="bookmark-module"])):not(:has(.no-hover)):not(:has([data-kind="category"])):hover {
    z-index: 1000 !important;
}

.app-hover,
.grid-stack-item:has(a[href]):not(:has([class*="bookmark-module"])):not(:has(.no-hover)):not(:has([data-kind="category"])) .grid-stack-item-content {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    will-change: transform; 
}
.app-hover:hover,
.grid-stack-item:has(a[href]):not(:has([class*="bookmark-module"])):not(:has(.no-hover)):not(:has([data-kind="category"])):hover .grid-stack-item-content {
    transform: scale(1.05) !important;
    box-shadow: 15px 15px 35px rgba(0, 0, 0, 0.9), 8px 8px 20px rgba(0, 0, 0, 0.5) !important;
}

/* --------------------------------------------------------- */
/* 11. KATEGORIEN FIX                                        */
/* --------------------------------------------------------- */

.mantine-Card-root:has([data-kind="category"]),
.mantine-Paper-root:has([data-kind="category"]),
[class*="itemCard"]:has([data-kind="category"]) {
    background: rgba(38, 38, 38, 0.85) !important; 
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-radius: var(--mantine-radius-lg) !important;
    box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.7), 4px 4px 10px rgba(0, 0, 0, 0.3) !important;
    border: none !important;
}

.mantine-Card-root:has([data-kind="category"]) .mantine-Title-root,
.mantine-Card-root:has([data-kind="category"]) .tabler-icon {
    color: lightgray !important;
}

.mantine-Card-root:has([data-kind="category"]) > .mantine-Stack-root > .mantine-Group-root:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-radius: var(--mantine-radius-md) !important;
}

/* --------------------------------------------------------- */
/* 12. NOTIZEN (Notebook) FIX                                */
/* --------------------------------------------------------- */

.notebook-wrapper .mantine-RichTextEditor-root,
.notebook-wrapper .mantine-RichTextEditor-content,
.notebook-wrapper .mantine-ScrollArea-root,
.notebook-wrapper .mantine-ScrollArea-viewport,
.notebook-wrapper .mantine-ScrollArea-content,
.notebook-wrapper .mantine-RichTextEditor-Typography {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

.notebook-wrapper .tiptap *,
.notebook-wrapper .mantine-RichTextEditor-content * {
    color: lightgray !important;
}

/* --------------------------------------------------------- */
/* 13. DOCKER WIDGET FIX                                     */
/* --------------------------------------------------------- */

/* Entfernt den fest verbauten weißen Hintergrund der React-Tabelle */
.dockerContainers-wrapper .mantine-Paper-root,
.dockerContainers-wrapper .mrt-table-paper,
.dockerContainers-wrapper .mrt-table-container,
.dockerContainers-wrapper table,
.dockerContainers-wrapper thead,
.dockerContainers-wrapper tbody,
.dockerContainers-wrapper tr,
.dockerContainers-wrapper th,
.dockerContainers-wrapper td {
    background: transparent !important;
    background-color: transparent !important;
}

/* Leichter Hover-Effekt für die Tabellenzeilen, damit die Zeilen beim Drüberfahren sichtbar bleiben */
.dockerContainers-wrapper tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.05) !important;
}````

0 replies

steffenglock · 2026-06-04T14:09:42Z

steffenglock
Jun 4, 2026
Author

Done

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

CSS for catgories #5864

Uh oh!

{{title}}

Uh oh!

Replies: 5 comments 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Uh oh!

CSS for catgories #5864

Uh oh!

steffenglock Jun 4, 2026

Replies: 5 comments · 2 replies

Uh oh!

AdyaTech Jun 4, 2026

Uh oh!

steffenglock Jun 4, 2026 Author

Uh oh!

AdyaTech Jun 4, 2026

Uh oh!

steffenglock Jun 4, 2026 Author

Uh oh!

AdyaTech Jun 4, 2026

Uh oh!

steffenglock Jun 4, 2026 Author

Uh oh!

steffenglock Jun 4, 2026 Author

steffenglock
Jun 4, 2026

Replies: 5 comments 2 replies

AdyaTech
Jun 4, 2026

steffenglock
Jun 4, 2026
Author

steffenglock
Jun 4, 2026
Author

steffenglock
Jun 4, 2026
Author

steffenglock
Jun 4, 2026
Author