From a190389f3c9f44072465560dce7203e9ce328f2c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Mar 2024 18:24:29 +0200
Subject: panels/statuses are looking really good now even with transparency

---
 src/panel.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

(limited to 'src/panel.scss')

diff --git a/src/panel.scss b/src/panel.scss
index 5df9fee4..08339765 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -1,5 +1,8 @@
 /* stylelint-disable no-descending-specificity */
 .panel {
+  --__panel-background: var(--background);
+  --__panel-backdrop-filter: var(--backdrop-filter);
+
   position: relative;
   display: flex;
   flex-direction: column;
@@ -28,6 +31,8 @@
 
 .panel-body {
   padding: var(--panel-body-padding, 0);
+  background: var(--background);
+  backdrop-filter: var(--__panel-backdrop-filter);
 
   &:empty::before {
     content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
@@ -50,6 +55,7 @@
   --__panel-heading-height: 3.2em;
   --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding, 0));
 
+  backdrop-filter: var(--__panel-backdrop-filter);
   position: relative;
   box-sizing: border-box;
   display: grid;
@@ -131,6 +137,9 @@
   border-radius: var(--roundness) var(--roundness) 0 0;
   border-width: 0 0 1px;
   align-items: start;
+  background-image:
+    linear-gradient(to bottom, var(--background), var(--background)),
+    linear-gradient(to bottom, var(--__panel-background), var(--__panel-background));
 
   &::after {
     background-color: var(--background);
@@ -186,5 +195,6 @@
   border-width: 1px 0 0;
   border-style: solid;
   border-color: var(--border);
+  background-color: var(--__panel-background);
 }
 /* stylelint-enable no-descending-specificity */
-- 
cgit v1.2.3-70-g09d2