From 936d1d7b176ee77ed189734c76ea27b05c56f301 Mon Sep 17 00:00:00 2001 From: Kroonk Date: Wed, 1 Jul 2026 18:07:08 +0200 Subject: [PATCH] Configure 85% opacity dark slate overlay for background image to make it very subtle --- config-admin/custom.css | 22 +++++++++++----------- config-admin/settings.yaml | 1 - config-public/custom.css | 22 +++++++++++----------- config-public/settings.yaml | 1 - 4 files changed, 22 insertions(+), 24 deletions(-) diff --git a/config-admin/custom.css b/config-admin/custom.css index 56768db..ebaf0fe 100644 --- a/config-admin/custom.css +++ b/config-admin/custom.css @@ -9,30 +9,30 @@ body { background-position: center !important; background-attachment: fixed !important; background-repeat: no-repeat !important; + background-color: #0f172a !important; } -/* Force transparency on Homepage layout wrappers to prevent covering the background */ +/* Set the layout wrapper to be 85% dominant dark slate, letting the background peek through subtly (15% visibility) */ #__next, #__next > div, main, .layout, #layout-wrapper { - background-color: transparent !important; - background: transparent !important; + background-color: rgba(15, 23, 42, 0.85) !important; } /* Semi-transparent blur cards */ .card, .widget, .resource-widget { - background-color: rgba(15, 23, 42, 0.45) !important; - backdrop-filter: blur(14px) saturate(140%) !important; - -webkit-backdrop-filter: blur(14px) saturate(140%) !important; - border: 1px solid rgba(255, 255, 255, 0.08) !important; + background-color: rgba(30, 41, 59, 0.45) !important; + backdrop-filter: blur(10px) saturate(120%) !important; + -webkit-backdrop-filter: blur(10px) saturate(120%) !important; + border: 1px solid rgba(255, 255, 255, 0.05) !important; border-radius: 12px !important; - box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4) !important; + box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important; transition: all 0.3s ease !important; } .card:hover { - background-color: rgba(30, 41, 59, 0.6) !important; - border: 1px solid rgba(255, 255, 255, 0.16) !important; + background-color: rgba(51, 65, 85, 0.55) !important; + border: 1px solid rgba(255, 255, 255, 0.12) !important; transform: translateY(-2px) !important; - box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.6) !important; + box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.5) !important; } /* Style headers and category names */ diff --git a/config-admin/settings.yaml b/config-admin/settings.yaml index c3a74f2..9dd6197 100644 --- a/config-admin/settings.yaml +++ b/config-admin/settings.yaml @@ -1,5 +1,4 @@ title: MischLabs Admin theme: dark language: de -background: /background.png diff --git a/config-public/custom.css b/config-public/custom.css index 56768db..ebaf0fe 100644 --- a/config-public/custom.css +++ b/config-public/custom.css @@ -9,30 +9,30 @@ body { background-position: center !important; background-attachment: fixed !important; background-repeat: no-repeat !important; + background-color: #0f172a !important; } -/* Force transparency on Homepage layout wrappers to prevent covering the background */ +/* Set the layout wrapper to be 85% dominant dark slate, letting the background peek through subtly (15% visibility) */ #__next, #__next > div, main, .layout, #layout-wrapper { - background-color: transparent !important; - background: transparent !important; + background-color: rgba(15, 23, 42, 0.85) !important; } /* Semi-transparent blur cards */ .card, .widget, .resource-widget { - background-color: rgba(15, 23, 42, 0.45) !important; - backdrop-filter: blur(14px) saturate(140%) !important; - -webkit-backdrop-filter: blur(14px) saturate(140%) !important; - border: 1px solid rgba(255, 255, 255, 0.08) !important; + background-color: rgba(30, 41, 59, 0.45) !important; + backdrop-filter: blur(10px) saturate(120%) !important; + -webkit-backdrop-filter: blur(10px) saturate(120%) !important; + border: 1px solid rgba(255, 255, 255, 0.05) !important; border-radius: 12px !important; - box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4) !important; + box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important; transition: all 0.3s ease !important; } .card:hover { - background-color: rgba(30, 41, 59, 0.6) !important; - border: 1px solid rgba(255, 255, 255, 0.16) !important; + background-color: rgba(51, 65, 85, 0.55) !important; + border: 1px solid rgba(255, 255, 255, 0.12) !important; transform: translateY(-2px) !important; - box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.6) !important; + box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.5) !important; } /* Style headers and category names */ diff --git a/config-public/settings.yaml b/config-public/settings.yaml index 41003e5..5f37cf5 100644 --- a/config-public/settings.yaml +++ b/config-public/settings.yaml @@ -1,4 +1,3 @@ title: MischLabs theme: dark language: de -background: /background.png