deleted: assets/banner_v7.png

new file: assets/banner_v8.png deleted: img/NoiseLight.png deleted: img/iconH1.svg deleted: img/iconH2.svg deleted: img/iconH3.svg deleted: img/iconH4.svg deleted: img/iconH5.svg deleted: img/iconH6.svg modified: style/_base.scss modified: style/_main.scss modified: style/components/dialog.scss modified: style/customizable/blur.scss modified: style/layout/editor.scss modified: style/layout/shrink.scss modified: style/layout/tab-bar.scss modified: theme.css modified: theme.scss
mustakshif · Dec 25, 2023 · 0f2b908 · 0f2b908
1 parent c94c271
commit 0f2b908
Show file tree

Hide file tree

Showing 20 changed files with 146 additions and 104 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-![banner](https://cdn.jsdelivr.net/gh/mustakshif/Hadeeth@main/assets/banner_v7.png)
+![banner](https://cdn.jsdelivr.net/gh/mustakshif/Hadeeth@main/assets/banner_v8.png)
 
 <br/>
 
@@ -19,11 +19,12 @@ Hadeeth 是一款极富现代感的类 macOS [思源笔记](https://github.com/s
     * **面包屑**
     * **侧栏面板标题及上部**
 * ➖ 精简分割线，打造一体化的版面风格，更为清爽整洁
+* 🧩 优化超级块内外部间距，轻松实现网格、瀑布流布局，打造优雅排版
 * 📐 取消页面区块间的多余间距，扩大展示范围
 * 🌓 支持亮色模式和暗色模式
 * 🗂️ 添加文档树、大纲缩进参考线
 * 🔗 优化反链列表展示
-* 🧩 重新设计 iFrame、视频、图片等控件样式
+* ⚙️ 重新设计 iFrame、视频、图片等控件样式
 * 🧊 引入毛玻璃材质，带来富有层次感的视觉体验
 * 💫 适当加入鲜活动效，丰富交互体验
 * 🚀 保持较高的流畅度表现

diff --git a/README_en_US.md b/README_en_US.md
@@ -1,4 +1,4 @@
-![banner](https://cdn.jsdelivr.net/gh/mustakshif/Hadeeth@main/assets/banner_v7.png)
+![banner](https://cdn.jsdelivr.net/gh/mustakshif/Hadeeth@main/assets/banner_v8.png)
 
 <br/>
 
@@ -17,11 +17,12 @@ An ultra-modern macOS-like theme for [SiYuan](https://github.com/siyuan-note/siy
     * **Breadcrumb**
     * **Sidebar panel title and above**
 * ➖ Dividing lines simplified, creating a consistent and organized layout style.
+* 🧩 Optimized the inner and outer spacing of super blocks, making it easy to achieve grid and masonry layouts and create an elegant doc page.
 * 📐 Extra spacing between layout blocks removed, expanding overall display range.
 * 🌓 Light and dark modes supported.
 * 🗂️ File tree and outline indent guides line added.
 * 🔗 Backlink list display optimized.
-* 🧩 Styles of iFrame, videos, images, and other controls redesigned.
+* ⚙️ Styles of iFrame, videos, images, and other controls redesigned.
 * 🧊 Glassmorphism introduced, enhancing the visual hierarchy.
 * 💫 Lively effects added appropriately, enriching the interaction experience.
 * 🚀 High level of performance maintained.

diff --git a/assets/banner_v7.png b/assets/banner_v7.png
diff --git a/assets/banner_v8.png b/assets/banner_v8.png
diff --git a/img/NoiseLight.png b/img/NoiseLight.png
diff --git a/img/iconH1.svg b/img/iconH1.svg
diff --git a/img/iconH2.svg b/img/iconH2.svg
diff --git a/img/iconH3.svg b/img/iconH3.svg
diff --git a/img/iconH4.svg b/img/iconH4.svg
diff --git a/img/iconH5.svg b/img/iconH5.svg
diff --git a/img/iconH6.svg b/img/iconH6.svg
diff --git a/style/_base.scss b/style/_base.scss
@@ -332,33 +332,19 @@ $theme-dark: (
     --b3-card-success-background: #{map-get($theme-map,card-success-background)};
 
     /* 自定义文字 */
-    --b3-font-color1: #{map-get($theme-map,font-color1)};
-    --b3-font-color2: #{map-get($theme-map,font-color2)};
-    --b3-font-color3: #{map-get($theme-map,font-color3)};
-    --b3-font-color4: #{map-get($theme-map,font-color4)};
-    --b3-font-color5: #{map-get($theme-map,font-color5)};
-    --b3-font-color6: #{map-get($theme-map,font-color6)};
-    --b3-font-color7: #{map-get($theme-map,font-color7)};
-    --b3-font-color8: #{map-get($theme-map,font-color8)};
-    --b3-font-color9: #{map-get($theme-map,font-color9)};
-    --b3-font-color10:#{map-get($theme-map,font-color10)};
-    --b3-font-color11:#{map-get($theme-map,font-color11)};
-    --b3-font-color12:#{map-get($theme-map,font-color12)};
-    --b3-font-color13:#{map-get($theme-map,font-color13)};
-
-    --b3-font-background1: #{change-color(map-get($theme-map,font-color1), $alpha: 0.1)};
-    --b3-font-background2: #{change-color(map-get($theme-map,font-color2), $alpha: 0.1)};
-    --b3-font-background3: #{change-color(map-get($theme-map,font-color3), $alpha: 0.1)};
-    --b3-font-background4: #{change-color(map-get($theme-map,font-color4), $alpha: 0.1)};
-    --b3-font-background5: #{change-color(map-get($theme-map,font-color5), $alpha: 0.1)};
-    --b3-font-background6: #{change-color(map-get($theme-map,font-color6), $alpha: 0.1)};
-    --b3-font-background7: #{change-color(map-get($theme-map,font-color7), $alpha: 0.1)};
-    --b3-font-background8: #{change-color(map-get($theme-map,font-color8), $alpha: 0.1)};
-    --b3-font-background9: #{change-color(map-get($theme-map,font-color9), $alpha: 0.1)};
-    --b3-font-background10:#{change-color(map-get($theme-map,font-color10), $alpha: 0.1)};
-    --b3-font-background11:#{change-color(map-get($theme-map,font-color11), $alpha: 0.1)};
-    --b3-font-background12:#{change-color(map-get($theme-map,font-color12), $alpha: 0.1)};
-    --b3-font-background13:#{change-color(map-get($theme-map,font-color13), $alpha: 0.1)};
+    @for $i from 1 through 13 {
+        $font-color: map-get($theme-map, font-color#{$i});
+
+        //背景色：不透明色
+        // $font-background:mix(map-get($theme-map, font-color#{$i}), map-get($theme-map, background), 12.5%);
+
+        // 背景色：透明色
+        $font-background:change-color(map-get($theme-map,font-color#{$i}), $alpha: 0.1);
+
+        --b3-font-color#{$i}: #{$font-color};
+
+        --b3-font-background#{$i}:#{$font-background};
+    };
 
     /* 所见即所得行内元素颜色 */
     --b3-protyle-inline-link-color: #{map-get($theme-map,inline-link-color)};

diff --git a/style/_main.scss b/style/_main.scss
@@ -37,6 +37,19 @@
         opacity: 1;
     }
 }
+
+@keyframes scroll-fadein {
+    0% {
+        opacity: 0;
+    }
+    // 2% {
+    //     opacity: 1;
+    // }
+    100% {
+        opacity: 1;
+    }
+}
+
 // @property --property-length {
 //     syntax: '<length>';
 //     inherits: false;

diff --git a/style/components/dialog.scss b/style/components/dialog.scss
@@ -187,6 +187,10 @@
                                         }
                                     }
 
+                                    &__desc {
+                                        word-break: initial;
+                                    }
+
                                     &:hover {
                                         transform: scale(1.01);
                                         outline: 2px solid var(--b3-theme-primary-light);
@@ -284,6 +288,62 @@
                     background-color: var(--b3-theme-surface);
                 }
             }
+
+            // 闪卡复习 ————————————————————————————————————
+            .card__main {
+                .card__action {
+                    > div {
+                        margin: 0 12px 8px;
+                    }
+
+                    .b3-button{
+                        font-weight: 600;                        
+                        border-radius: $border-rd-card;
+                        transition: 0.2s;
+
+                        &:hover {
+                            transform: scale(1.05);
+                        }
+                        &:active {
+                            transform: scale(0.95);
+                            opacity: 0.8;
+                            box-shadow: none;
+                        }
+                        &:focus{
+                            box-shadow: none;
+                        }
+
+                        $button-colors:(
+                            (map-get($theme-light, card-error), map-get($theme-dark, card-error)),
+                            (map-get($theme-light, card-warning), map-get($theme-dark, card-warning)),
+                            (map-get($theme-light, card-info), map-get($theme-dark, card-info)),
+                            (map-get($theme-light, card-success), map-get($theme-dark, card-success))
+                        );
+
+                        @for $i from 1 through 4 {
+                            &[data-type="#{$i}"]:hover{
+                                @include menu-shadow(nth($button-colors,$i)..., $opacity-dark: 0.2)
+                            }
+                        }
+
+                        // 显示答案按钮、(p)按钮 
+                        &[data-type="-1"], &[data-type="-2"] {
+                            &:hover{
+                                transform: none;
+                                box-shadow: none;
+                            }
+                            &:active {
+                                transform: scale(0.9)
+                            }
+                        }
+
+                        // 跳过按钮
+                        &[data-type="-3"]:hover{
+                            background-color: var(--b3-list-hover);
+                        }
+                    }
+                }
+            }
         }
 
         // 对话框底部按钮区域 ——————————————————————————————

diff --git a/style/customizable/blur.scss b/style/customizable/blur.scss
@@ -200,6 +200,11 @@ body:not(.body--blur) {
         }
     }
 
+    .graph__panel {
+        @include bg-blur(20px);
+        opacity: 1;
+    }
+
     // 菜单
     .b3-menu,
     .b3-menu__submenu {

diff --git a/style/layout/editor.scss b/style/layout/editor.scss
@@ -324,6 +324,13 @@
         &>:is(.bq, blockquote) {
             padding-right: 16px;
         }
+
+        //折叠时序号背景
+        &[fold="1"]>.protyle-action:after{
+            border-radius: 99px;
+            transform: scale(1.5);  
+            @include theme-variant-color(background-color, on-background, 0.1);   
+        }
     }
 
     // 任务列表项 ————————————————————————————————

diff --git a/style/layout/shrink.scss b/style/layout/shrink.scss
@@ -282,6 +282,13 @@
     background-color: transparent;
 }
 
+.graph__panel{
+    .b3-button{
+        @include button-action('normal');
+        background-color: transparent;
+    }
+}
+
 // // 避让状态栏
 // body.body-status-shown {
 //     .layout__dockr:not(.layout--float),