[project-redisign-help-dialog] ヘルプダイアログのデザインの最終調整 (#1905)

* a要素のfocus時のoutlineのデザインを合わせる * 背景・枠線のスタイルを統一 * 見出し1のフォントサイズを少し増加 * 最大幅・中央揃えを設定
VOICEVOX · Mar 20, 2024 · 58f82fe · 58f82fe
1 parent f2a741f
commit 58f82fe
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 4 deletions.
diff --git a/src/components/base/BaseDocumentView.vue b/src/components/base/BaseDocumentView.vue
@@ -60,6 +60,10 @@
 
   :deep(a) {
     color: colors.$display-link;
+
+    &:focus-visible {
+      @include mixin.on-focus;
+    }
   }
 
   :deep(img) {

diff --git a/src/components/template/HelpLibraryPolicySection.vue b/src/components/template/HelpLibraryPolicySection.vue
@@ -134,10 +134,10 @@ const selectCharacterInfo = (index: DetailKey | undefined) => {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
   // height: 100%;
   height: calc(100vh - 90px);
+  background-color: colors.$background;
 }
 
 .container-detail {
-  border-left: 1px solid colors.$border;
   background-color: colors.$surface;
 }
 
@@ -146,6 +146,8 @@ const selectCharacterInfo = (index: DetailKey | undefined) => {
   flex-direction: column;
   padding: vars.$padding-2;
   gap: vars.$gap-1;
+  max-width: 960px;
+  margin: auto;
 }
 
 .title {

diff --git a/src/components/template/HelpMarkdownViewSection.vue b/src/components/template/HelpMarkdownViewSection.vue
@@ -44,5 +44,7 @@ onMounted(async () => {
 
 .inner {
   padding: vars.$padding-2;
+  max-width: 960px;
+  margin: auto;
 }
 </style>
diff --git a/src/components/template/HelpOssLicenseSection.vue b/src/components/template/HelpOssLicenseSection.vue
@@ -76,6 +76,8 @@ const selectLicenseIndex = (index: number | undefined) => {
   flex-direction: column;
   padding: vars.$padding-2;
   gap: vars.$gap-1;
+  max-width: 960px;
+  margin: auto;
 }
 
 .title {

diff --git a/src/components/template/HelpUpdateInfoSection.vue b/src/components/template/HelpUpdateInfoSection.vue
@@ -65,12 +65,13 @@ const props =
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
   // height: 100%;
   height: calc(100vh - 90px);
-  background-color: colors.$background;
+  background-color: colors.$surface;
 }
 
 .inner {
   padding: vars.$padding-2;
-  background-color: colors.$surface;
+  max-width: 960px;
+  margin: auto;
 }
 
 .info {

diff --git a/src/styles/mixin.scss b/src/styles/mixin.scss
@@ -6,7 +6,7 @@
 
 // 見出し1(h1)用のスタイル
 @mixin headline-1 {
-  font-size: 1.5rem;
+  font-size: 1.75rem;
   font-weight: 600;
   line-height: 2;
   margin: 0;