Add background for Popover on Firefox

This commit is contained in:
Kalle
2022-03-06 15:43:35 +02:00
parent c8582e157d
commit ea8c16a9f8
3 changed files with 13 additions and 1 deletions

View File

@@ -5,6 +5,7 @@
--bg-darker: hsl(237.3deg 42.3% 26.6%);
--bg-lighter: hsl(237.3deg 42.3% 35.6%);
--bg-lighter-transparent: hsla(237.3deg 42.3% 35.6% / 50%);
--bg-darker-transparent: hsla(237.3deg 42.3% 26.6% / 90%);
--bg-modal-backdrop: hsla(237deg 98% 1% / 70%);
--border: hsl(237.3deg 42.3% 45.6%);
--button-text: rgb(0 0 0 / 85%);
@@ -444,13 +445,20 @@ hr {
.popover-content {
max-width: 20rem;
padding: var(--s-2);
backdrop-filter: blur(10px) brightness(75%);
background-color: var(--bg-darker-transparent);
border-radius: var(--rounded);
font-size: var(--fonts-sm);
font-weight: var(--semi-bold);
white-space: pre-wrap;
}
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
.popover-content {
backdrop-filter: blur(10px) brightness(75%);
background-color: transparent;
}
}
.combobox-input {
width: 12rem;
}

View File

@@ -30,6 +30,8 @@
display: flex;
justify-content: space-between;
padding: var(--s-2);
/* TODO: add fallback from Firefox */
backdrop-filter: blur(5px);
background: rgb(0 0 0 / 25%);
border-start-end-radius: var(--rounded);

View File

@@ -41,6 +41,8 @@
position: absolute;
display: flex;
padding: var(--s-1-5);
/* TODO: add fallback from Firefox */
backdrop-filter: blur(5px) grayscale(25%);
border-end-end-radius: var(--rounded);
border-start-start-radius: var(--rounded);