- 在 head_tag.html 中添加条件样式块以支持毛玻璃效果 - 移除 scss/self.scss 中的硬编码卡片样式规则 - 在 settings.yml 中添加 extra_glass_morphism_selectors 配置项 - 在 settings.yml 中添加 extra_card_item_selectors 配置项 - 实现通过设置控制的动态 CSS 样式应用 - 支持自定义选择器列表进行毛玻璃和卡片样式的灵活配置
This commit is contained in:
@@ -5,3 +5,32 @@
|
|||||||
'The Horizon theme does not support your browser. Please update your browser, or <a href="?safe_mode=no_themes">switch to safe mode</a>.';
|
'The Horizon theme does not support your browser. Please update your browser, or <a href="?safe_mode=no_themes">switch to safe mode</a>.';
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
{{#if settings.extra_glass_morphism_selectors}}
|
||||||
|
<style>
|
||||||
|
{{settings.extra_glass_morphism_selectors}} {
|
||||||
|
background-color: #ffffffa8 !important;
|
||||||
|
border-radius: var(--d-border-radius);
|
||||||
|
backdrop-filter: blur(32px);
|
||||||
|
box-shadow: #00000077 0 0 19px 0;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
{{#if settings.extra_card_item_selectors}}
|
||||||
|
<style>
|
||||||
|
{{settings.extra_card_item_selectors}} {
|
||||||
|
background: var(--d-chat-input-bg-color);
|
||||||
|
border-radius: var(--d-border-radius);
|
||||||
|
box-shadow: #00000024 0 0 7px 2px;
|
||||||
|
margin: 10px 0;
|
||||||
|
position: relative;
|
||||||
|
padding: 16px 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: background-color 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
{{settings.extra_card_item_selectors}}:hover {
|
||||||
|
background-color: var(--accent-text-color);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
{{/if}}
|
||||||
@@ -60,24 +60,6 @@
|
|||||||
padding: 24px;
|
padding: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topic-post.clearfix.regular, .post-list-item.user-stream-item,
|
|
||||||
.search-header, .admin-plugin-config-page__content,
|
|
||||||
.user-main .about.collapsed-info .details,
|
|
||||||
.ember-view.group-box{
|
|
||||||
background: var(--d-chat-input-bg-color);
|
|
||||||
border-radius: var(--d-border-radius);
|
|
||||||
box-shadow: #00000024 0 0 7px 2px;
|
|
||||||
margin: 10px 0;
|
|
||||||
position: relative;
|
|
||||||
padding: 16px 12px;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: background-color 0.2s ease-in-out;
|
|
||||||
|
|
||||||
&:hover{
|
|
||||||
background-color: var(--accent-text-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-content{
|
.user-content{
|
||||||
background-color: unset;
|
background-color: unset;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -15,3 +15,30 @@ home_bg_image:
|
|||||||
default: ""
|
default: ""
|
||||||
description: "首页背景图"
|
description: "首页背景图"
|
||||||
|
|
||||||
|
extra_glass_morphism_selectors:
|
||||||
|
type: list
|
||||||
|
default:
|
||||||
|
- .regular.ember-view
|
||||||
|
- .user-main
|
||||||
|
- .reviewable
|
||||||
|
- .admin-content
|
||||||
|
- .contents.clearfix.body-page
|
||||||
|
- .search-container
|
||||||
|
- .show-badge
|
||||||
|
- .users-directory
|
||||||
|
- "#main-outlet>.edit-category"
|
||||||
|
- .container.groups-index
|
||||||
|
- .container.group
|
||||||
|
description: "额外应用毛玻璃效果的选择器列表"
|
||||||
|
|
||||||
|
extra_card_item_selectors:
|
||||||
|
type: list
|
||||||
|
default:
|
||||||
|
- .topic-post.clearfix.regular
|
||||||
|
- .post-list-item.user-stream-item
|
||||||
|
- .search-header
|
||||||
|
- .admin-plugin-config-page__content
|
||||||
|
- ".user-main .about.collapsed-info .details"
|
||||||
|
- .ember-view.group-box
|
||||||
|
description: "额外应用卡片项目样式的选择器列表"
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user