diff --git a/app/appearance/themes/daylight/theme.css b/app/appearance/themes/daylight/theme.css
index 685522a20..ec91716fd 100644
--- a/app/appearance/themes/daylight/theme.css
+++ b/app/appearance/themes/daylight/theme.css
@@ -106,6 +106,7 @@
/* 动画效果 */
--b3-transition: all .2s cubic-bezier(0, 0, .2, 1) 0ms;
--b3-width-transition: width .2s cubic-bezier(0, 0, .2, 1) 0ms;
+ --b3-color-transition: color .2s cubic-bezier(0, 0, .2, 1) 0ms;
/* 下拉菜单 */
--b3-select-background: url("data:image/svg+xml;utf8,") no-repeat right 2px center var(--b3-theme-background);
diff --git a/app/appearance/themes/midnight/theme.css b/app/appearance/themes/midnight/theme.css
index a270a6013..879628733 100644
--- a/app/appearance/themes/midnight/theme.css
+++ b/app/appearance/themes/midnight/theme.css
@@ -106,6 +106,7 @@
/* 动画效果 */
--b3-transition: all .2s cubic-bezier(0, 0, .2, 1) 0ms;
--b3-width-transition: width .2s cubic-bezier(0, 0, .2, 1) 0ms;
+ --b3-color-transition: color .2s cubic-bezier(0, 0, .2, 1) 0ms;
/* 下拉菜单 */
--b3-select-background: url("data:image/svg+xml;utf8,") no-repeat right 2px center var(--b3-theme-background);
diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss
index 8a91ae9fb..1be477f9f 100644
--- a/app/src/assets/scss/business/_av.scss
+++ b/app/src/assets/scss/business/_av.scss
@@ -63,12 +63,14 @@
&__gutters {
@extend .protyle-gutters;
- position: fixed;
top: 0;
left: -44px;
opacity: 0;
display: flex;
- z-index: 2;
+
+ &--min .av__gutter {
+ padding: 4px 0;
+ }
svg {
height: 25px;
diff --git a/app/src/assets/scss/protyle/_protyle.scss b/app/src/assets/scss/protyle/_protyle.scss
index 41e609d9c..46d09360b 100644
--- a/app/src/assets/scss/protyle/_protyle.scss
+++ b/app/src/assets/scss/protyle/_protyle.scss
@@ -71,7 +71,6 @@
border: 0;
background-color: transparent;
padding: 4px;
- transition: var(--b3-transition);
cursor: pointer;
position: relative;
@@ -98,7 +97,7 @@
color: var(--b3-theme-on-surface-light);
width: 14px;
float: left;
- transition: var(--b3-transition);
+ transition: var(--b3-color-transition);
}
}
diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts
index 1730e378f..75ba5e7ba 100644
--- a/app/src/protyle/wysiwyg/index.ts
+++ b/app/src/protyle/wysiwyg/index.ts
@@ -1460,7 +1460,14 @@ export class WYSIWYG {
const rowElement = hasClosestByClassName(event.target, "av__row");
if (rowElement && rowElement.dataset.id) {
const guttersElement = rowElement.querySelector(".av__gutters");
- guttersElement.setAttribute("style", `left:${rowElement.parentElement.parentElement.getBoundingClientRect().left - guttersElement.clientWidth}px;top:${rowElement.getBoundingClientRect().top}px`);
+ guttersElement.classList.remove("av__gutters--min")
+ let guttersLeft = rowElement.parentElement.parentElement.getBoundingClientRect().left - guttersElement.clientWidth;
+ const contentLeft = protyle.contentElement.getBoundingClientRect().left
+ if (guttersLeft < contentLeft) {
+ guttersLeft = contentLeft;
+ guttersElement.classList.add("av__gutters--min")
+ }
+ guttersElement.setAttribute("style", `left:${guttersLeft}px;top:${rowElement.getBoundingClientRect().top}px`);
}
protyle.gutter.render(protyle, nodeElement, this.element);
}