diff --git a/public/howtouse.md b/public/howtouse.md index bb49033d75..4dfffa13c6 100644 --- a/public/howtouse.md +++ b/public/howtouse.md @@ -30,6 +30,7 @@ その際は Finder で `Ctrl` キーを押しながら VOICEVOX アプリケーションアイコンをクリックし、ショートカットメニューから「開く」を選択してから、「開く」をクリックしてください。 もしくは、アップルメニューから「システム設定」を選択して「プライバシーとセキュリティ」 をクリックし、ページの下にあるセキュリティの「このまま開く」を選んでください。 + Macのシステム設定の「プライバシーとセキュリティ」を開いた画面 macOS Ventura 以前をお使いの場合は、アップルメニューから「システム環境設定」を選択して「セキュリティとプライバシー」 をクリックし、「一般」パネルで「このまま開く」選んでください。 diff --git a/src/components/Base/BaseDocumentView.vue b/src/components/Base/BaseDocumentView.vue index 84f14d76f3..8041ad2aad 100644 --- a/src/components/Base/BaseDocumentView.vue +++ b/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,19 +116,43 @@ 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: "▶ "; } @@ -117,5 +160,9 @@ :deep(details[open] > summary::before) { content: "▼ "; } + + :deep(:last-child) { + margin-bottom: 0; + } } diff --git a/src/components/Dialog/HelpDialog/HelpDialog.vue b/src/components/Dialog/HelpDialog/HelpDialog.vue index 393bd8a79f..9935c5d11a 100644 --- a/src/components/Dialog/HelpDialog/HelpDialog.vue +++ b/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 { diff --git a/src/styles/colors-v2.scss b/src/styles/colors-v2.scss index 79c757034a..34561a7146 100644 --- a/src/styles/colors-v2.scss +++ b/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); diff --git a/src/styles/mixin.scss b/src/styles/mixin.scss index 48c33d30a2..e547874fa0 100644 --- a/src/styles/mixin.scss +++ b/src/styles/mixin.scss @@ -8,7 +8,7 @@ @mixin headline-1 { font-size: 1.75rem; font-weight: 600; - line-height: 2; + line-height: 1.5; margin: 0; } @@ -16,7 +16,7 @@ @mixin headline-2 { font-size: 1.25rem; font-weight: bold; - line-height: 2; + line-height: 1.5; margin: 0; } @@ -24,7 +24,7 @@ @mixin headline-3 { font-size: 1.125rem; font-weight: bold; - line-height: 2; + line-height: 1.5; margin: 0; } @@ -32,7 +32,7 @@ @mixin headline-4 { font-size: 1rem; font-weight: bold; - line-height: 2; + line-height: 1.5; margin: 0; } @@ -40,7 +40,7 @@ @mixin headline-5 { font-size: 0.875rem; font-weight: bold; - line-height: 2; + line-height: 1.5; margin: 0; } @@ -48,6 +48,6 @@ @mixin headline-6 { font-size: 0.75rem; font-weight: bold; - line-height: 2; + line-height: 1.5; margin: 0; }