用ai写了个css样式，如图：
适配blue topaz、minimal、border、composer、primary等多个主题，配合style settings使用，可以为深色、浅色模式应用不同图片，其他配置项，如图片比例、圆角、边框、边距等也可自由调整。
css：
/* @settings
name: 导航栏背景设置
id: nav-background-settings
settings:
- id: custom-nav-aspect-ratio
title: 背景图片宽高比
type: variable-text
default: 2/1
description: 设置背景图片的宽高比，例如 2/1 表示宽度是高度的两倍
- id: custom-nav-background-image
title: 浅色模式背景图片URL
type: variable-text
default: url("https://i.imgur.com/your-image.png")
description: 设置浅色模式下导航栏背景图片的URL
- id: custom-nav-background-image-dark
title: 深色模式背景图片URL
type: variable-text
default: url("https://i.imgur.com/your-dark-image.png")
description: 设置深色模式下导航栏背景图片的URL
- id: nav-image-width
title: 图片宽度
type: variable-text
default: 96%
description: 设置图片宽度（如96%、100%、300px等）
- id: nav-border-radius
title: 边框圆角
type: variable-text
default: 8px 8px 3px 3px
description: 设置导航栏的边框圆角
- id: nav-border-color
title: 边框颜色
type: variable-color
default: "#e8f1ff"
description: 设置导航栏边框的颜色
- id: nav-border-color-dark
title: 深色模式边框颜色
type: variable-color
default: "#2d2d2d"
description: 设置深色模式下导航栏边框的颜色
- id: nav-border-width
title: 边框粗细
type: variable-text
default: 2px
description: 设置外边框的粗细（如2px、4px等）
- id: nav-image-margin-bottom
title: 与文件列表间距
type: variable-text
default: 4px
description: 设置图片与文件列表之间的间距（如4px、16px等）
*/
body {
--custom-nav-aspect-ratio: 2/1;
--custom-nav-background-image: url("https://i.imgur.com/xxxxxxx.png");
--custom-nav-background-image-dark: url("https://i.imgur.com/xxxxxxx-dark.png");
--nav-image-width: 96%;
--nav-border-radius: 8px 8px 3px 3px;
--nav-border-color: #e8f1ff;
--nav-border-color-dark: #2d2d2d;
--nav-border-width: 2px;
--nav-image-margin-bottom: 4px;
}
.workspace-leaf-content[data-type="file-explorer"] {
position: relative;
}
/* 浅色模式背景 */
.workspace-leaf-content[data-type="file-explorer"]::before {
content: "";
display: block;
width: var(--nav-image-width, 96%);
aspect-ratio: var(--custom-nav-aspect-ratio);
background-image: var(--custom-nav-background-image);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 0;
margin: 0 auto;
margin-bottom: var(--nav-image-margin-bottom, 4px);
border: var(--nav-border-width, 2px) solid var(--nav-border-color);
border-radius: var(--nav-border-radius);
position: sticky;
top: 0;
z-index: 1;
background-clip: border-box;
}
/* 深色模式背景 */
.theme-dark .workspace-leaf-content[data-type="file-explorer"]::before {
background-image: var(--custom-nav-background-image-dark);
border: var(--nav-border-width, 2px) solid var(--nav-border-color-dark)
}
/* 确保没有间隙 */
.nav-header,
.nav-header-container,
.nav-buttons-container {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: none !important;
}
.nav-files-container {
margin-top: 0 !important;
padding-top: 0 !important;
gap: 0 !important;
}
