diff --git a/src/components/Comment/styles.module.css b/src/components/Comment/styles.module.css index 054a149..853c672 100644 --- a/src/components/Comment/styles.module.css +++ b/src/components/Comment/styles.module.css @@ -1,6 +1,7 @@ .commentContainer { position: relative; display: inline-block; + margin-left: 8px; } .commentButton { @@ -10,7 +11,7 @@ padding: 4px; color: var(--ifm-color-emphasis-600); transition: all 0.2s ease; - opacity: 0; + opacity: 1; z-index: 100; display: flex; align-items: center; @@ -126,7 +127,7 @@ background-color: var(--ifm-color-primary-darker); } -/* 当鼠标悬停在侧边栏项目上时显示评论按钮 */ -:global(.menu__link-wrapper:hover) .commentButton { +/* 删除鼠标悬停显示按钮的样式 */ +/* :global(.menu__link-wrapper:hover) .commentButton { opacity: 1; -} \ No newline at end of file +} */ \ No newline at end of file diff --git a/src/theme/DocSidebarItem/styles.module.css b/src/theme/DocSidebarItem/styles.module.css index 0381f52..e2a3dcb 100644 --- a/src/theme/DocSidebarItem/styles.module.css +++ b/src/theme/DocSidebarItem/styles.module.css @@ -10,6 +10,30 @@ align-items: center; margin-left: auto; padding-right: 8px; + gap: 4px; +} + +.bookmarkButton { + background: none; + border: none; + cursor: pointer; + padding: 4px; + color: var(--ifm-color-emphasis-600); + transition: all 0.2s ease; + display: flex; + align-items: center; + justify-content: center; + width: 20px; + height: 20px; +} + +.bookmarkButton:hover { + color: var(--ifm-color-primary); + transform: scale(1.1); +} + +.bookmarked { + color: var(--ifm-color-primary); } .bookmarkedItem { @@ -23,7 +47,7 @@ /* 确保侧边栏项目有足够的空间显示按钮 */ :global(.menu__link-wrapper) { - padding-right: 60px !important; + padding-right: 80px !important; position: relative !important; }