[project-redisign-help-dialog] デザインの調整 (VOICEVOX#2155)

* 横幅が狭いときの表示崩れを修正

* 改段落ができていない箇所に改段落を追加

* スクロールバーの色を濃くする

* table要素のスタイルを追加

* DocumentViewの余白を調節

* div要素を削除

public/howtouse.md

@@ -30,6 +30,7 @@
 その際は Finder で `Ctrl` キーを押しながら VOICEVOX アプリケーションアイコンをクリックし、ショートカットメニューから「開く」を選択してから、「開く」をクリックしてください。
 
 もしくは、アップルメニューから「システム設定」を選択して「プライバシーとセキュリティ」 をクリックし、ページの下にあるセキュリティの「このまま開く」を選んでください。
+
 <img src="res/macos-system-settings-security.png" style="max-height: 16rem" alt="Macのシステム設定の「プライバシーとセキュリティ」を開いた画面"/>
 
 macOS Ventura 以前をお使いの場合は、アップルメニューから「システム環境設定」を選択して「セキュリティとプライバシー」 をクリックし、「一般」パネルで「このまま開く」選んでください。

src/components/Base/BaseDocumentView.vue

@@ -16,27 +16,33 @@
 
   :deep(h1) {
     @include mixin.headline-1;
+    margin-bottom: 2rem;
   }
 
   :deep(h2) {
     @include mixin.headline-2;
-    margin-top: 1.5rem;
+    padding-block: 0.5rem;
+    margin-top: 2rem;
+    margin-bottom: 1.5rem;
     border-bottom: 1px solid colors.$border;
   }
 
   :deep(h3) {
     @include mixin.headline-3;
-    margin-top: 1.5rem;
+    margin-top: 1.75rem;
+    margin-bottom: 1rem;
   }
 
   :deep(h4) {
     @include mixin.headline-4;
-    margin-top: 1.25rem;
+    margin-top: 1.5rem;
+    margin-bottom: 0.5rem;
   }
 
   :deep(h5) {
     @include mixin.headline-5;
     margin-top: 1rem;
+    margin-bottom: 0.25rem;
   }
 
   :deep(h6) {
@@ -46,12 +52,19 @@
 
   :deep(p) {
     line-height: 1.75;
-    margin-top: 1rem;
+    margin-bottom: 1rem;
   }
 
-  :deep(div > ul),
-  :deep(div > ol) {
-    margin-top: 1rem;
+  :deep(ul),
+  :deep(ol) {
+    padding-left: 1.5rem;
+  }
+
+  :deep(> ul),
+  :deep(> ol),
+  :deep(:where(div, details) > ul),
+  :deep(:where(div, details) > ol) {
+    margin-bottom: 1rem;
   }
 
   :deep(li) {
@@ -68,10 +81,16 @@
   }
 
   :deep(img) {
-    margin-top: 0.5rem;
     border: 1px solid colors.$border;
     border-radius: vars.$radius-1;
     vertical-align: middle;
+    max-width: 100%;
+  }
+
+  :deep(> img),
+  :deep(:where(div, details) > img) {
+    display: block;
+    margin-bottom: 1rem;
   }
 
   :deep(hr) {
@@ -84,7 +103,7 @@
 
   :deep(pre) {
     padding: vars.$padding-1;
-    margin-top: 1rem;
+    margin-bottom: 1rem;
     background-color: colors.$surface;
     border: 1px solid colors.$border;
     border-radius: vars.$radius-1;
@@ -97,25 +116,53 @@
     border-radius: 4px;
   }
 
+  :deep(table) {
+    border-collapse: separate;
+    border-spacing: 0;
+    border-radius: vars.$radius-1;
+    border: 1px solid colors.$border;
+  }
+
+  :deep(tr) {
+    height: vars.$size-control;
+  }
+
+  :deep(td),
+  :deep(th) {
+    padding-inline: vars.$padding-2;
+  }
+
+  :deep(td) {
+    border-top: 1px solid colors.$border;
+  }
+
   :deep(details) {
-    padding: vars.$padding-1;
+    margin-bottom: 1rem;
+    padding: vars.$padding-2;
     background-color: colors.$surface;
     border: 1px solid colors.$border;
     border-radius: vars.$radius-1;
   }
 
   :deep(summary) {
-    padding: vars.$padding-1;
-    margin: calc(#{vars.$padding-1} * -1);
+    padding: vars.$padding-2;
+    margin: calc(#{vars.$padding-2} * -1);
     cursor: pointer;
   }
 
+  :deep(details[open] > summary) {
+    margin-bottom: 0;
+  }
   :deep(summary::before) {
     content: "▶ ";
   }
 
   :deep(details[open] > summary::before) {
     content: "▼ ";
   }
+
+  :deep(:last-child) {
+    margin-bottom: 0;
+  }
 }
 </style>

src/components/Dialog/HelpDialog/HelpDialog.vue

@@ -298,6 +298,7 @@ const openLogDirectory = window.backend.openLogDirectory;
 .list-wrapper {
   margin-top: 66px;
   height: calc(100vh - 90px);
+  width: max-content;
 }
 
 .list-inner {

src/styles/colors-v2.scss

@@ -39,9 +39,9 @@ $primitive-red: #d04756;
   --color-v2-warning-hovered: #{lighten($primitive-red, 40%)};
   --color-v2-warning-pressed: #{lighten($primitive-red, 35%)};
 
-  --color-v2-scrollbar: #{rgba($primitive-black, 0.2)};
-  --color-v2-scrollbar-hovered: #{rgba($primitive-black, 0.3)};
-  --color-v2-scrollbar-pressed: #{rgba($primitive-black, 0.4)};
+  --color-v2-scrollbar: #{rgba($primitive-black, 0.3)};
+  --color-v2-scrollbar-hovered: #{rgba($primitive-black, 0.4)};
+  --color-v2-scrollbar-pressed: #{rgba($primitive-black, 0.5)};
 }
 
 // ダークテーマの色
@@ -75,9 +75,9 @@ $primitive-red: #d04756;
   --color-v2-warning-hovered: #{darken($primitive-red, 35%)};
   --color-v2-warning-pressed: #{darken($primitive-red, 30%)};
 
-  --color-v2-scrollbar: #{rgba($primitive-white, 0.2)};
-  --color-v2-scrollbar-hovered: #{rgba($primitive-white, 0.3)};
-  --color-v2-scrollbar-pressed: #{rgba($primitive-white, 0.4)};
+  --color-v2-scrollbar: #{rgba($primitive-white, 0.3)};
+  --color-v2-scrollbar-hovered: #{rgba($primitive-white, 0.4)};
+  --color-v2-scrollbar-pressed: #{rgba($primitive-white, 0.5)};
 }
 
 $background: var(--color-v2-background);

src/styles/mixin.scss

@@ -8,46 +8,46 @@
 @mixin headline-1 {
   font-size: 1.75rem;
   font-weight: 600;
-  line-height: 2;
+  line-height: 1.5;
   margin: 0;
 }
 
 // 見出し2(h2)用のスタイル
 @mixin headline-2 {
   font-size: 1.25rem;
   font-weight: bold;
-  line-height: 2;
+  line-height: 1.5;
   margin: 0;
 }
 
 // 見出し3(h3)用のスタイル
 @mixin headline-3 {
   font-size: 1.125rem;
   font-weight: bold;
-  line-height: 2;
+  line-height: 1.5;
   margin: 0;
 }
 
 // 見出し4(h4)用のスタイル
 @mixin headline-4 {
   font-size: 1rem;
   font-weight: bold;
-  line-height: 2;
+  line-height: 1.5;
   margin: 0;
 }
 
 // 見出し5(h5)用のスタイル
 @mixin headline-5 {
   font-size: 0.875rem;
   font-weight: bold;
-  line-height: 2;
+  line-height: 1.5;
   margin: 0;
 }
 
 // 見出し6(h6)用のスタイル
 @mixin headline-6 {
   font-size: 0.75rem;
   font-weight: bold;
-  line-height: 2;
+  line-height: 1.5;
   margin: 0;
 }