pref: 删除 overflow:overlay 用法

2024-11-17 14:39:21 +08:00 · 2024-04-05 17:43:57 +08:00 · 2024-04-05 17:43:57 +08:00 · 60439c7dbd
commit 60439c7dbd
parent 92ea3f6274
26 changed files with 31 additions and 34 deletions
--- a/blossom-editor/src/renderer/src/assets/css/main.css
+++ b/blossom-editor/src/renderer/src/assets/css/main.css
@ -31,14 +31,14 @@ img {
 /* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸 */
 ::-webkit-scrollbar {
  /* 滚动条宽度 */
-  width: 7px;
+  width: 5px;
  /* 滚动条高度 */
-  height: 7px;
+  height: 5px;
 }

 ::-webkit-scrollbar:hover {
-  width: 7px;
-  height: 7px;
+  width: 5px;
+  height: 5px;
 }

 /* 定义滑块 内阴影+圆角 */
--- a/blossom-editor/src/renderer/src/components/IconList.vue
+++ b/blossom-editor/src/renderer/src/components/IconList.vue
@ -125,8 +125,7 @@ const copyIcon = (icon: string) => {
      align-content: flex-start;
      flex-wrap: wrap;
      background-color: var(--bl-html-color);
-      overflow: scroll;
-      overflow-y: overlay;
+      overflow-y: scroll;

      .icon-item {
        @include flex(column, space-between, center);
--- a/blossom-editor/src/renderer/src/components/WebCollect.vue
+++ b/blossom-editor/src/renderer/src/components/WebCollect.vue
@ -242,7 +242,7 @@ const showWebCollectCard = (card: boolean) => {

  .web-item-container {
    @include box(100%, calc(100% - 31px));
-    overflow-y: overlay;
+    overflow-y: scroll;

    .placeholder {
      @include font(15px, 300);
--- a/blossom-editor/src/renderer/src/views/article/ArticleBackup.vue
+++ b/blossom-editor/src/renderer/src/views/article/ArticleBackup.vue
@ -191,7 +191,7 @@ const cancelDownload = async () => {
      @include flex(column, flex-start, flex-start);
      align-content: flex-start;
      flex-wrap: wrap;
-      overflow-x: overlay;
+      overflow-x: scroll;
      padding: 10px;

      .bak-item {
--- a/blossom-editor/src/renderer/src/views/article/ArticleHistory.vue
+++ b/blossom-editor/src/renderer/src/views/article/ArticleHistory.vue
@ -106,8 +106,8 @@ onMounted(() => {

    .history-list {
      @include box(100%, calc(100% - 80px - 21px));
-      overflow-y: overlay;
      padding: 10px 15px 10px 10px;
+      overflow-y: scroll;

      .history-item {
        @include box(100%, 55px);
--- a/blossom-editor/src/renderer/src/views/article/ArticleRecycle.vue
+++ b/blossom-editor/src/renderer/src/views/article/ArticleRecycle.vue
@ -111,7 +111,7 @@ const download = (id: string) => {
      @include flex(column, flex-start, flex-start);
      align-content: flex-start;
      flex-wrap: wrap;
-      overflow-x: overlay;
+      overflow-x: scroll;
      padding: 10px;

      .recycle-item {
--- a/blossom-editor/src/renderer/src/views/article/ArticleViewWindow.vue
+++ b/blossom-editor/src/renderer/src/views/article/ArticleViewWindow.vue
@ -87,7 +87,7 @@ onMounted(() => {
    @include box(100%, 100%);
    font-size: 15px;
    padding: 30px;
-    overflow-y: overlay;
+    overflow-y: scroll;
    overflow-x: hidden;
    line-height: 23px;

--- a/blossom-editor/src/renderer/src/views/article/EditorStatus.vue
+++ b/blossom-editor/src/renderer/src/views/article/EditorStatus.vue
@ -59,7 +59,7 @@ const openArticleLogWindow = () => {
  background-color: var(--bl-editor-gutters-bg-color);

  .status-item-container {
-    overflow-x: overlay;
+    overflow-x: hidden;
    white-space: nowrap;

    & > div {
--- a/blossom-editor/src/renderer/src/views/article/EditorTools.vue
+++ b/blossom-editor/src/renderer/src/views/article/EditorTools.vue
@ -400,7 +400,7 @@ const handleShowHotKeyDialog = () => {
    padding: 0 5px;
    position: absolute;
    z-index: 2;
-    overflow-x: overlay;
+    overflow: hidden;

    & > div {
      @include themeColor(#5b5b5b, #909090);
--- a/blossom-editor/src/renderer/src/views/article/scripts/codemirror.ts
+++ b/blossom-editor/src/renderer/src/views/article/scripts/codemirror.ts
@ -74,7 +74,7 @@ export const cwTheme: any = {
    width: '40px'
  },
  '.cm-scroller': {
-    overflow: 'overlay',
+    // overflow: 'scroll',
    outline: 'none'
  },
  '.cm-foldGutter': {
--- a/blossom-editor/src/renderer/src/views/article/styles/article-index.scss
+++ b/blossom-editor/src/renderer/src/views/article/styles/article-index.scss
@ -105,7 +105,7 @@
        @include box(50%, 100%);
        font-family: inherit;
        font-size: inherit;
-        overflow: overlay;
+        overflow: scroll;
        z-index: 2;

        /* 定义滑块 内阴影+圆角 */
--- a/blossom-editor/src/renderer/src/views/article/styles/article-view-absolute.scss
+++ b/blossom-editor/src/renderer/src/views/article/styles/article-view-absolute.scss
@ -9,7 +9,7 @@
  .content-view {
    @include box(100%, calc(100% - 25px));
    @include themeBg(#f9f9f9, #262626);
-    overflow-y: overlay;
+    overflow-y: scroll;
    overflow-x: hidden;
    padding: 10px;
  }
--- a/blossom-editor/src/renderer/src/views/article/styles/bl-preview-toc.scss
+++ b/blossom-editor/src/renderer/src/views/article/styles/bl-preview-toc.scss
@ -6,7 +6,7 @@
    height 0.2s;

  .toc-content {
-    overflow-y: overlay;
+    overflow-y: scroll;

    .toc-1,
    .toc-2,
--- a/blossom-editor/src/renderer/src/views/doc/doc-tree.scss
+++ b/blossom-editor/src/renderer/src/views/doc/doc-tree.scss
@ -146,7 +146,6 @@
    :deep(.is-current) {
      & > .el-tree-node__content {
        border-radius: 5px;
-        // background-color: var(--el-color-primary-light-8);

        &:has(.menu-divider) {
          background-color: transparent;
@ -165,7 +164,6 @@

  &::-webkit-scrollbar {
    width: 5px;
-    height: 3px;
  }

  /* 定义滑块 内阴影+圆角 */
--- a/blossom-editor/src/renderer/src/views/doc/tree-workbench.scss
+++ b/blossom-editor/src/renderer/src/views/doc/tree-workbench.scss
@ -7,7 +7,7 @@
    color: var(--bl-text-color);
    font-size: 12px;
    text-align: right;
-    overflow: overlay;
+    overflow: scroll;
    padding-right: 5px;
  }

--- a/blossom-editor/src/renderer/src/views/home/ArticleStars.vue
+++ b/blossom-editor/src/renderer/src/views/home/ArticleStars.vue
@ -87,7 +87,7 @@ defineExpose({ reload })
  flex-wrap: wrap;
  align-content: flex-start;
  overflow: hidden;
-  overflow-y: overlay;
+  overflow-y: scroll;
  padding-top: 10px;
 }

--- a/blossom-editor/src/renderer/src/views/home/ArticleSubjects.vue
+++ b/blossom-editor/src/renderer/src/views/home/ArticleSubjects.vue
@ -90,7 +90,7 @@ const toToc = (articleId: number) => {
  flex-wrap: wrap;
  align-content: flex-start;
  overflow: hidden;
-  overflow-y: overlay;
+  overflow-y: scroll;
 }

 .placeholder {
--- a/blossom-editor/src/renderer/src/views/home/Home.vue
+++ b/blossom-editor/src/renderer/src/views/home/Home.vue
@ -221,7 +221,7 @@ const fold = () => {
    .chart-container {
      @include box(100%, calc(100% - 315px));
      overflow-x: hidden;
-      overflow-y: overlay;
+      overflow-y: scroll;
    }
  }

--- a/blossom-editor/src/renderer/src/views/note/NoteIndex.vue
+++ b/blossom-editor/src/renderer/src/views/note/NoteIndex.vue
@ -140,7 +140,7 @@ const notes = ref<any>([])
    padding-left: 40px;
    z-index: 3;
    overflow: auto;
-    overflow-y: overlay;
+    overflow-y: scroll;

    .placeholder {
      @include font(14px, 300);
@ -236,7 +236,7 @@ const notes = ref<any>([])
        white-space: pre-line;
        word-wrap: break-word;
        overflow: auto;
-        overflow-y: overlay;
+        overflow-y: scroll;
        user-select: text;
        cursor: cell;
      }
--- a/blossom-editor/src/renderer/src/views/picture/styles/picture-index.scss
+++ b/blossom-editor/src/renderer/src/views/picture/styles/picture-index.scss
@ -294,8 +294,8 @@

      .status-item-container {
        height: 100%;
-        overflow-x: overlay;
        white-space: nowrap;
+        overflow-x: hidden;

        & > div {
          height: 100%;
--- a/blossom-editor/src/renderer/src/views/plan/PlanDaily.vue
+++ b/blossom-editor/src/renderer/src/views/plan/PlanDaily.vue
@ -102,7 +102,7 @@ const delDaily = (id: number) => {
  .daily-container {
    @include box(100%, 100%);
    overflow: scroll;
-    overflow-y: overlay;
+    overflow-y: scroll;

    .title {
      width: 100%;
@ -150,7 +150,7 @@ const delDaily = (id: number) => {
        white-space: normal;
        word-wrap: break-word;
        overflow: scroll;
-        overflow-y: overlay;
+        overflow-y: scroll;
      }

      .del {
--- a/blossom-editor/src/renderer/src/views/plan/PlanDailyInfo.vue
+++ b/blossom-editor/src/renderer/src/views/plan/PlanDailyInfo.vue
@ -191,7 +191,7 @@ const emits = defineEmits(['saved'])
      white-space: normal;
      word-wrap: break-word;
      overflow: scroll;
-      overflow-y: overlay;
+      overflow-y: scroll
    }

    img {
@ -208,7 +208,7 @@ const emits = defineEmits(['saved'])
    align-content: flex-start;
    flex-wrap: wrap;
    overflow: scroll;
-    overflow-y: overlay;
+    overflow-y: scroll;

    div {
      margin: 1px;
--- a/blossom-editor/src/renderer/src/views/plan/PlanDayInfo.vue
+++ b/blossom-editor/src/renderer/src/views/plan/PlanDayInfo.vue
@ -184,7 +184,7 @@ defineExpose({
    align-content: flex-start;
    flex-wrap: wrap;
    overflow: scroll;
-    overflow-y: overlay;
+    overflow-y: scroll;
    padding: 10px;

    .color {
--- a/blossom-editor/src/renderer/src/views/todo/styles/task-progress.scss
+++ b/blossom-editor/src/renderer/src/views/todo/styles/task-progress.scss
@ -145,7 +145,7 @@
      @include box(100%, calc(100% - 60px));
      @include flex(column, flex-start, center);
      position: relative;
-      overflow-y: overlay;
+      overflow-y: scroll;
      padding: 20px 0;

      .drag-container {
--- a/blossom-web/src/views/note/NoteIndex.vue
+++ b/blossom-web/src/views/note/NoteIndex.vue
@ -168,7 +168,7 @@ const top = () => {
        white-space: pre-line;
        word-wrap: break-word;
        overflow: auto;
-        overflow-y: overlay;
+        overflow-y: scroll;
        user-select: text;
      }
      .time {
--- a/blossom-web/src/views/plan/PlanDayInfo.vue
+++ b/blossom-web/src/views/plan/PlanDayInfo.vue
@ -157,7 +157,7 @@ const emits = defineEmits(['saved'])
    align-content: flex-start;
    flex-wrap: wrap;
    overflow: scroll;
-    overflow-y: overlay;
+    overflow-y: scroll;
    padding: 10px 10px 8px 0;

    .color {