mirror of
https://github.com/taskgenius/taskgenius-plugin.git
synced 2026-07-22 06:40:25 +00:00
style(fluent): implement modern interface styles
- Add fluent-modern.css with comprehensive modern styling - Implement modern background color system with theme support - Style sidebar, navigation, content areas for modern interface - Update fluent-main.css with transition improvements - Refactor modern.css to remove duplicates - Add modern interface styles to compiled styles.css - Support responsive design for mobile devices [Configure interface style →](obsidian://task-genius/settings?tab=interface§ion=interface-mode)
This commit is contained in:
Quorafind
parent
32bb832fed
commit
447f637ec8
4 changed files with 364 additions and 62 deletions
|
|
@ -625,10 +625,7 @@ button.fluent-new-task-btn:hover {
|
|||
|
||||
/* ===== Collapsed Sidebar (Rail) ===== */
|
||||
.tg-fluent-sidebar-container {
|
||||
transition:
|
||||
width 0.2s ease,
|
||||
min-width 0.2s ease,
|
||||
max-width 0.2s ease;
|
||||
transition: width 0.2s ease, min-width 0.2s ease, max-width 0.2s ease;
|
||||
}
|
||||
|
||||
/* When the sidebar element itself is collapsed */
|
||||
|
|
@ -659,9 +656,7 @@ button.fluent-new-task-btn:hover {
|
|||
border-radius: var(--radius-s);
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background-color 0.15s ease,
|
||||
color 0.15s ease;
|
||||
transition: background-color 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
|
||||
.fluent-rail-btn:hover {
|
||||
|
|
@ -756,6 +751,7 @@ button.fluent-new-task-btn:hover {
|
|||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.is-mobile .fluent-sidebar-header {
|
||||
|
|
@ -824,9 +820,7 @@ button.fluent-new-task-btn:hover {
|
|||
border-radius: 4px;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background-color 0.15s ease,
|
||||
color 0.15s ease;
|
||||
transition: background-color 0.15s ease, color 0.15s ease;
|
||||
margin-right: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
|
|
|||
178
src/styles/fluent/fluent-modern.css
Normal file
178
src/styles/fluent/fluent-modern.css
Normal file
|
|
@ -0,0 +1,178 @@
|
|||
/* 现代 Fluent 侧边栏配色和布局变量 */
|
||||
.fluent-modern {
|
||||
--modern-background-secondary: var(--color-base-25);
|
||||
--modern-background-primary: var(--background-primary);
|
||||
}
|
||||
.theme-dark .fluent-modern {
|
||||
--modern-background-secondary: var(--background-primary);
|
||||
--modern-background-primary: var(--background-secondary);
|
||||
}
|
||||
|
||||
/* —— Fluent 侧边栏及其内容区域 —— */
|
||||
.fluent-modern {
|
||||
.tg-fluent-sidebar-container.fluent-sidebar {
|
||||
border-radius: var(--radius-l);
|
||||
}
|
||||
.tg-fluent-sidebar-container {
|
||||
background-color: var(--modern-background-primary);
|
||||
border-right: unset;
|
||||
}
|
||||
.fluent-sidebar-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px 0 0 0;
|
||||
--icon-size: 16px;
|
||||
}
|
||||
|
||||
/* 主内容布局 */
|
||||
.tg-fluent-layout {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
padding: var(--size-4-2) 0;
|
||||
gap: var(--size-4-2);
|
||||
background: var(--modern-background-secondary);
|
||||
}
|
||||
.tg-fluent-main-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
gap: var(--size-4-2);
|
||||
}
|
||||
|
||||
/* 内容包裹 */
|
||||
.tg-fluent-content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-m);
|
||||
}
|
||||
.tg-fluent-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
background: var(--modern-background-primary);
|
||||
}
|
||||
|
||||
/* 搜索栏 */
|
||||
.fluent-search-container input[type="search"] {
|
||||
width: 100%;
|
||||
background-color: var(--background-primary-alt);
|
||||
height: var(--size-4-8);
|
||||
border: unset;
|
||||
}
|
||||
.search-input-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 列表和任务项样式 */
|
||||
.task-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--size-4-2);
|
||||
}
|
||||
.task-list > .task-item {
|
||||
margin-bottom: var(--size-4-2);
|
||||
}
|
||||
.task-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 8px 16px;
|
||||
border-bottom: unset;
|
||||
cursor: pointer;
|
||||
gap: var(--size-2-3);
|
||||
min-height: 40px;
|
||||
}
|
||||
.task-item,
|
||||
.task-item:hover {
|
||||
/* hover样式也合并简化 */
|
||||
gap: 0;
|
||||
}
|
||||
.task-item:hover {
|
||||
background-color: var(--background-secondary-alt);
|
||||
}
|
||||
.tree-task-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 8px 16px;
|
||||
transition: background-color 0.2s ease;
|
||||
border-radius: var(--radius-m);
|
||||
margin-bottom: var(--size-2-2);
|
||||
}
|
||||
|
||||
/* 顶部导航条 */
|
||||
.fluent-top-navigation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 56px;
|
||||
padding: 0 20px;
|
||||
gap: 20px;
|
||||
background-color: var(--modern-background-primary);
|
||||
border-radius: var(--radius-m);
|
||||
border-bottom: unset;
|
||||
/* 其他可选边框/阴影已注释 */
|
||||
}
|
||||
|
||||
/* 视图标题栏和容器样式 */
|
||||
.workspace-leaf-content[data-type^="fluent-task-genius-view"] {
|
||||
padding: var(--size-4-3);
|
||||
background: var(--modern-background-secondary);
|
||||
}
|
||||
|
||||
.workspace-leaf-content[data-type^="fluent-task-genius-view"] .view-header {
|
||||
background-color: var(--modern-background-primary);
|
||||
border-radius: var(--radius-m);
|
||||
height: var(--header-height);
|
||||
display: flex;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
gap: var(--size-4-2);
|
||||
padding: 0 var(--size-4-3);
|
||||
}
|
||||
}
|
||||
|
||||
.is-mobile .fluent-modern {
|
||||
.workspace-leaf-content[data-type^="fluent-task-genius-view"] {
|
||||
padding: var(--size-4-2);
|
||||
background: var(--modern-background-secondary);
|
||||
}
|
||||
|
||||
.workspace-leaf-content[data-type^="fluent-task-genius-view"] .view-header {
|
||||
height: var(--view-header-height);
|
||||
}
|
||||
|
||||
.tg-fluent-sidebar-container.fluent-sidebar:not(.is-collapsed) {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 任务详情侧栏（仅桌面端） */
|
||||
:where(body:not(.is-mobile)) .fluent-modern {
|
||||
.task-details-container {
|
||||
width: 300px;
|
||||
flex-shrink: 0;
|
||||
background-color: var(--modern-background-secondary);
|
||||
order: 1;
|
||||
padding: var(--size-4-2) 0 var(--size-4-2) var(--size-4-2);
|
||||
border-radius: var(--radius-m);
|
||||
}
|
||||
.task-details {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.3s ease-in-out;
|
||||
position: relative;
|
||||
min-width: 250px;
|
||||
max-width: 400px;
|
||||
background-color: var(--background-primary);
|
||||
border-radius: var(--radius-m);
|
||||
}
|
||||
.tg-fluent-container {
|
||||
background: var(--modern-background-secondary);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,20 +1,11 @@
|
|||
.task-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 8px 16px;
|
||||
/* border-bottom: 1px solid var(--color-base-10); */
|
||||
border-bottom: 1px solid var(--color-base-20);
|
||||
cursor: pointer;
|
||||
gap: var(--size-2-3);
|
||||
min-height: 40px;
|
||||
gap: 0;
|
||||
border-radius: var(--radius-m);
|
||||
}
|
||||
/*
|
||||
.task-list > .task-item {
|
||||
margin-bottom: var(--size-4-2);
|
||||
} */
|
||||
/* 删除与 fluent-modern.css 重复内容，仅保留 modern.css 独有或变体样式 */
|
||||
|
||||
.task-item {
|
||||
border-bottom: 1px solid var(--color-base-20);
|
||||
/* 若需覆盖 fluent 变体可在此添加非重复样式 */
|
||||
}
|
||||
|
||||
/* 以下样式已在 fluent-modern.css 定义，无需重复
|
||||
.fluent-search-container input[type="search"] {
|
||||
width: 100%;
|
||||
background-color: var(--background-primary-alt);
|
||||
|
|
@ -29,3 +20,4 @@
|
|||
.task-list {
|
||||
padding: var(--size-4-2);
|
||||
}
|
||||
*/
|
||||
|
|
|
|||
210
styles.css
210
styles.css
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue