118 lines
3.1 KiB
CSS
118 lines
3.1 KiB
CSS
/* 侧边栏备注区渐显动画 */
|
||
.Sv-memo #protyle-sidebar{
|
||
animation: SvMemoFadeIn 0.5s cubic-bezier(0.4,0,0.2,1) 1;
|
||
animation-delay: 0.5s; /* 新增：延迟1秒后再播放动画 */
|
||
opacity: 0; /* 初始隐藏 */
|
||
animation-fill-mode: forwards; /* 动画结束后保持最终状态 */
|
||
}
|
||
@keyframes SvMemoFadeIn {
|
||
from { opacity: 0; transform: translateY(16px); }
|
||
to { opacity: 1; transform: none; }
|
||
}
|
||
|
||
@keyframes memoHighlightFade {
|
||
0% { background-color: var(--b3-theme-primary-lightest); }
|
||
80% { background-color: var(--b3-theme-primary-lightest); }
|
||
100% { background-color: transparent; }
|
||
}
|
||
.memo-highlight {
|
||
animation: memoHighlightFade 1.2s cubic-bezier(0.4,0,0.2,1);
|
||
}
|
||
|
||
body:not(.body--mobile){
|
||
.Sv-memo[data-fullwidth="true"]{
|
||
.protyle-wysiwyg {
|
||
width: calc(100% - 230px) !important;
|
||
min-width: unset !important
|
||
}
|
||
#protyle-sidebar {
|
||
right: 0px !important
|
||
}
|
||
}
|
||
|
||
/* 编辑状态样式 */
|
||
|
||
.memo-item, .memo-edit-input {
|
||
min-height: 32px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.memo-title-with-dot {
|
||
display: -webkit-box;
|
||
color: var(--b3-theme-on-surface);
|
||
word-wrap: break-word;
|
||
word-break: break-word;
|
||
overflow-wrap: break-word;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: normal;
|
||
line-height: 1.2em;
|
||
max-height: 2.4em;
|
||
}
|
||
|
||
.memo-title-dot {
|
||
display: inline-block;
|
||
width: 4px;
|
||
border-radius: 3px;
|
||
background: var(--b3-theme-primary);
|
||
margin-right: 6px;
|
||
flex-shrink: 0;
|
||
align-self: stretch; /* 让竖条高度和父 flex 容器一样高 */
|
||
}
|
||
|
||
.memo-item {
|
||
background-color: var(--Sv-protyle-toolbar-bg);
|
||
& button{
|
||
height: 20px;
|
||
width: 20px;
|
||
opacity: 0;
|
||
line-height: 0px;
|
||
background-color: var(--Sv-list-background);
|
||
&:hover{
|
||
background: var(--Sv-dock-item--activefocus-background);
|
||
.b3-menu__icon{
|
||
color: var(--Sv-dock-item--activefocus-color);
|
||
}
|
||
}
|
||
}
|
||
& button .b3-menu__icon{
|
||
width: 12px;
|
||
height: 12px;
|
||
color: var(--b3-theme-on-surface);
|
||
margin: 3px;
|
||
}
|
||
&:hover{
|
||
transform: translateX(-8px);
|
||
& .memo-title-dot {
|
||
background: var(--Sv-dock-item--activefocus-background);
|
||
}
|
||
& button{
|
||
opacity: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.memo-content-view{
|
||
word-wrap: break-word;
|
||
white-space: break-spaces;
|
||
max-height: 282px;
|
||
overflow-y: auto;
|
||
& b{color:var(--b3-font-color13);}
|
||
}
|
||
.memo-edit-input b{color:var(--b3-font-color13);}
|
||
[data-memo-type="block"]{
|
||
.memo-title-dot{
|
||
display: none!important;
|
||
}
|
||
svg{
|
||
color: var(--b3-theme-primary);
|
||
}
|
||
&:hover{
|
||
svg{
|
||
color: var(--Sv-dock-item--activefocus-background);
|
||
}
|
||
}
|
||
} |