feat(app): support web image backgrounds
This commit is contained in:
parent
35fcf1ed58
commit
364e2d9f03
24 changed files with 118 additions and 42 deletions
|
|
@ -118,12 +118,12 @@ const createPlatform = (windowState: DesktopWindowState): Platform => {
|
|||
document.documentElement.toggleAttribute("data-background-image", !!image)
|
||||
if (image) {
|
||||
document.documentElement.style.setProperty(
|
||||
"--desktop-background-image",
|
||||
"--app-background-image",
|
||||
`url("oc://renderer/background-image?revision=${encodeURIComponent(image.revision)}")`,
|
||||
)
|
||||
return true
|
||||
}
|
||||
document.documentElement.style.removeProperty("--desktop-background-image")
|
||||
document.documentElement.style.removeProperty("--app-background-image")
|
||||
return false
|
||||
}
|
||||
window.api.onBackgroundImageChanged(applyBackgroundImage)
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
html[data-background-image] body {
|
||||
background-image: linear-gradient(rgb(0 0 0 / 18%), rgb(0 0 0 / 18%)), var(--desktop-background-image);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
html[data-background-image] [data-background-surface="shell"] {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
html[data-background-image] [data-background-surface="content"] {
|
||||
background-color: color-mix(in srgb, var(--background-base) 76%, transparent) !important;
|
||||
}
|
||||
|
||||
html[data-background-image] [data-background-surface="panel"] {
|
||||
background-color: color-mix(in srgb, var(--v2-background-bg-base) 70%, transparent) !important;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue