aboutsummaryrefslogtreecommitdiff
path: root/src/panel.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/panel.scss')
-rw-r--r--src/panel.scss10
1 files changed, 10 insertions, 0 deletions
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 */