From 74b81a40ef4a23cb000705764098b3ccf4c260ab Mon Sep 17 00:00:00 2001 From: xieshuang Date: Wed, 30 Oct 2024 14:27:23 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=E7=94=A8body::after=E5=AE=9E=E7=8E=B0?= =?UTF-8?q?fullscreen=20(#481)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- README.pt-BR.md | 2 +- README.zh-CN.md | 2 +- package.json | 6 ++-- package.nls.json | 2 +- package.nls.zh.json | 2 +- .../PatchGenerator.fullscreen.ts | 31 ++++++++++++------- .../PatchGenerator/PatchGenerator.panel.ts | 14 +-------- .../PatchGenerator/PatchGenerator.sidebar.ts | 14 +-------- 9 files changed, 31 insertions(+), 44 deletions(-) diff --git a/README.md b/README.md index 9f0713b..c67731b 100644 --- a/README.md +++ b/README.md @@ -76,7 +76,7 @@ Edit `background.editor` to config editor section. | `interval` | `number` | `0` | Seconds of interval for carousel, default `0` to disabled. | | `random` | `boolean` | `false` | Whether to randomly display images. | -> `style` means [css style](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/What_is_CSS), which allows you to create great-looking background. +> `style` means [css style](https://developer.mozilla.org/docs/Web/CSS), which allows you to create great-looking background. example: diff --git a/README.pt-BR.md b/README.pt-BR.md index e143f04..908be20 100644 --- a/README.pt-BR.md +++ b/README.pt-BR.md @@ -75,7 +75,7 @@ Os requisitos definidos pelo usuário podem ser alterados usando a configuraçã | `background.customImages` | `Array` | `[]` | Adiciona suas imagens personalizadas | | `background.interval` | `Number` | `0` | Segundos de intervalo para o carousel, utilize `0` para desabilitar. | -> `style` significa [css style](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/What_is_CSS), que permite a criação de planos de fundo atrativos. +> `style` significa [css style](https://developer.mozilla.org/docs/Web/CSS), que permite a criação de planos de fundo atrativos. ### Configuração de Tela cheia diff --git a/README.zh-CN.md b/README.zh-CN.md index c4e41d7..34f5a0c 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -74,7 +74,7 @@ | `interval` | `number` | `0` | 单位 `秒`，轮播时候图片切换间隔，默认 `0` 表示不开启。 | | `random` | `boolean` | `false` | 是否随机展示图片。 | -> `style` 指的是 [css style](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/What_is_CSS)， 通过自定义样式可以改变背景图的展示。 +> `style` 指的是 [css style](https://developer.mozilla.org/docs/Web/CSS)， 通过自定义样式可以改变背景图的展示。 example: diff --git a/package.json b/package.json index 3281935..b7274e4 100644 --- a/package.json +++ b/package.json @@ -174,7 +174,7 @@ "type": "object", "default": { "images": [], - "opacity": 0.91, + "opacity": 0.2, "size": "cover", "position": "center", "interval": 0, @@ -193,7 +193,9 @@ }, "opacity": { "type": "number", - "default": 0.91, + "default": 0.2, + "minimum": 0, + "maximum": 0.6, "markdownDescription": "%extension.background.fullscreen.opacity%" }, "size": { diff --git a/package.nls.json b/package.nls.json index 3f68704..093c933 100644 --- a/package.nls.json +++ b/package.nls.json @@ -8,7 +8,7 @@ "extension.background.editor.description": "Editor section config.", "extension.background.editor.useFront": "Place the image above or below the code.", - "extension.background.editor.style": "Custom style for images.", + "extension.background.editor.style": "Custom style for images. [MDN Reference](https://developer.mozilla.org/docs/Web/CSS)", "extension.background.editor.styles": "Each style of editor section image.", "extension.background.editor.images": "Your custom images.\n\nExample:\n\n`https://a.com/b.png`\n\n`file:///a/b.jpg`", "extension.background.editor.interval": "Seconds of interval for carousel, default `0` to disabled.", diff --git a/package.nls.zh.json b/package.nls.zh.json index e1bfdf3..a918e20 100644 --- a/package.nls.zh.json +++ b/package.nls.zh.json @@ -8,7 +8,7 @@ "extension.background.editor.description": "编辑器区域配置。", "extension.background.editor.useFront": "把图片放在代码的上方或下方。", - "extension.background.editor.style": "自定义图片样式。", + "extension.background.editor.style": "自定义图片样式。 [MDN Reference](https://developer.mozilla.org/docs/Web/CSS)", "extension.background.editor.styles": "为每一个图片自定义样式。", "extension.background.editor.images": "自定义图片。\n\nExample:\n\n`https://a.com/b.png`\n\n`file:///a/b.jpg`", "extension.background.editor.interval": "单位 `秒`，轮播时候图片切换间隔，默认 `0` 表示不开启。", diff --git a/src/background/PatchGenerator/PatchGenerator.fullscreen.ts b/src/background/PatchGenerator/PatchGenerator.fullscreen.ts index 6edc38f..2736d69 100644 --- a/src/background/PatchGenerator/PatchGenerator.fullscreen.ts +++ b/src/background/PatchGenerator/PatchGenerator.fullscreen.ts @@ -2,7 +2,7 @@ import { AbsPatchGenerator, css } from './PatchGenerator.base'; export class FullscreenPatchGeneratorConfig { images = [] as string[]; - opacity = 0.91; // 建议在 0.85 ~ 0.95 之间微调 + opacity = 0.2; // 建议在 0.1 ~ 0.3 size = 'cover' as 'cover' | 'contain'; position = 'center'; interval = 0; @@ -19,6 +19,11 @@ export class FullscreenPatchGenerator }; // ------ 处理图片 ------ cur.images = this.normalizeImageUrls(cur.images); + // ------ opacity ------ + if (cur.opacity < 0 || cur.opacity > 0.6) { + cur.opacity = new FullscreenPatchGeneratorConfig().opacity; + } + return cur; } @@ -26,16 +31,19 @@ export class FullscreenPatchGenerator const { size, position, opacity } = this.curConfig; return css` - body { + body::after { + content: ''; + display: block; + position: absolute; + z-index: 10; + inset: 0; + pointer-events: none; background-size: ${size}; background-repeat: no-repeat; - background-attachment: fixed; // 兼容 code-server，其他的不影响 + /* background-attachment: fixed; // 兼容 code-server，其他的不影响 */ background-position: ${position}; opacity: ${opacity}; transition: 0.3s; - } - // 从 1.78.0 开始使用 Chromium:108+，支持 :has 选择器 - body:has([id='workbench.parts.editor']) { background-image: var(${this.cssvariable}); } `; @@ -44,11 +52,12 @@ export class FullscreenPatchGenerator protected getScript(): string { const { images, random, interval } = this.curConfig; return ` -var cssvariable = '${this.cssvariable}'; -var images = ${JSON.stringify(images)}; -var random = ${random}; -var interval = ${interval}; -var curIndex = -1; +const cssvariable = '${this.cssvariable}'; +const images = ${JSON.stringify(images)}; +const random = ${random}; +const interval = ${interval}; + +let curIndex = -1; function getNextImg() { if (random) { diff --git a/src/background/PatchGenerator/PatchGenerator.panel.ts b/src/background/PatchGenerator/PatchGenerator.panel.ts index e071cce..2ffff23 100644 --- a/src/background/PatchGenerator/PatchGenerator.panel.ts +++ b/src/background/PatchGenerator/PatchGenerator.panel.ts @@ -1,23 +1,11 @@ import { css } from './PatchGenerator.base'; import { FullscreenPatchGenerator, FullscreenPatchGeneratorConfig } from './PatchGenerator.fullscreen'; -export class PanelPatchGeneratorConfig extends FullscreenPatchGeneratorConfig { - opacity = 0.2; // 建议在 0.1 ~ 0.3 左右 -} +export class PanelPatchGeneratorConfig extends FullscreenPatchGeneratorConfig {} export class PanelPatchGenerator extends FullscreenPatchGenerator { protected readonly cssvariable = '--background-panel-img'; - protected get curConfig() { - const cur = { - ...new PanelPatchGeneratorConfig(), - ...this.config - }; - // ------ 处理图片 ------ - cur.images = this.normalizeImageUrls(cur.images); - return cur; - } - protected getStyle(): string { const { size, position, opacity } = this.curConfig; diff --git a/src/background/PatchGenerator/PatchGenerator.sidebar.ts b/src/background/PatchGenerator/PatchGenerator.sidebar.ts index 89cb41a..4593e52 100644 --- a/src/background/PatchGenerator/PatchGenerator.sidebar.ts +++ b/src/background/PatchGenerator/PatchGenerator.sidebar.ts @@ -1,23 +1,11 @@ import { css } from './PatchGenerator.base'; import { FullscreenPatchGenerator, FullscreenPatchGeneratorConfig } from './PatchGenerator.fullscreen'; -export class SidebarPatchGeneratorConfig extends FullscreenPatchGeneratorConfig { - opacity = 0.2; // 建议在 0.1 ~ 0.3 左右 -} +export class SidebarPatchGeneratorConfig extends FullscreenPatchGeneratorConfig {} export class SidebarPatchGenerator extends FullscreenPatchGenerator { protected cssvariable = '--background-sidebar-img'; - protected get curConfig() { - const cur = { - ...new SidebarPatchGeneratorConfig(), - ...this.config - }; - // ------ 处理图片 ------ - cur.images = this.normalizeImageUrls(cur.images); - return cur; - } - protected getStyle(): string { const { size, position, opacity } = this.curConfig;