fix: 修复桌面端非停靠状态时侧边栏滚动问题
- 站点详情(leftbar_part2)在非停靠状态时不再有滚动条 - 站点详情只在停靠(sticky)状态时才启用滚动 - TODO栏(leftbar_part3)在非停靠状态时也有滚动条和高度限制 - TODO栏智能限制最大高度为50vh,内容超出时可滚动 - 添加TODO栏滚动条样式,与站点详情保持一致 - 删除重复的card-body样式定义
This commit is contained in:
44
style.css
44
style.css
@@ -2532,12 +2532,13 @@ html.navbar-absolute #leftbar_part2.sticky {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#leftbar_part2_inner {
|
#leftbar_part2_inner {
|
||||||
max-height: calc(100vh - 110px - var(--leftbar-part3-height, 0px));
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#leftbar_part2_inner::-webkit-scrollbar {
|
#leftbar_part2.sticky #leftbar_part2_inner {
|
||||||
|
max-height: calc(100vh - 110px - var(--leftbar-part3-height, 0px));
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
width: 6px;
|
width: 6px;
|
||||||
|
|
||||||
@@ -12486,6 +12487,10 @@ article .post-content .huhua a:before {
|
|||||||
#leftbar_part3 {
|
#leftbar_part3 {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
transition: top 0.3s ease, transform 0.3s ease;
|
transition: top 0.3s ease, transform 0.3s ease;
|
||||||
|
max-height: 50vh;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
#leftbar_part3.sticky {
|
#leftbar_part3.sticky {
|
||||||
@@ -12493,15 +12498,36 @@ article .post-content .huhua a:before {
|
|||||||
top: calc(80px + var(--leftbar-part2-height, 300px));
|
top: calc(80px + var(--leftbar-part2-height, 300px));
|
||||||
width: 240px;
|
width: 240px;
|
||||||
max-height: var(--leftbar-part3-max-height, 50vh);
|
max-height: var(--leftbar-part3-max-height, 50vh);
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#leftbar_part3.sticky .card-body {
|
#leftbar_part3 .card-body {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
|
padding: 12px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#leftbar_part3 .card-body::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#leftbar_part3 .card-body::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
#leftbar_part3 .card-body::-webkit-scrollbar-thumb {
|
||||||
|
border-width: 1px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
html.darkmode #leftbar_part3 .card-body::-webkit-scrollbar-thumb {
|
||||||
|
border-width: 1px;
|
||||||
|
background-color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
#leftbar_part3 .card-body::-webkit-scrollbar-button {
|
||||||
|
height: 5px;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.leftbar-can-headroom.headroom---unpinned #leftbar_part3.sticky {
|
body.leftbar-can-headroom.headroom---unpinned #leftbar_part3.sticky {
|
||||||
@@ -12522,10 +12548,6 @@ html.navbar-absolute #leftbar_part3.sticky {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#leftbar_part3 .card-body {
|
|
||||||
padding: 12px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.todo-title {
|
.todo-title {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
Reference in New Issue
Block a user