From 979b5067f3b7f68584f27d11756cf84ab8653793 Mon Sep 17 00:00:00 2001
From: takusea <takusea826@gmail.com>
Date: Wed, 15 Nov 2023 22:25:18 +0900
Subject: [PATCH 01/17] =?UTF-8?q?=E3=83=99=E3=83=BC=E3=82=B9=E3=82=B3?=
 =?UTF-8?q?=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=82=92?=
 =?UTF-8?q?=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseButton.vue  | 86 +++++++++++++++++++++++++++++
 src/components/base/BaseRowCard.vue | 64 +++++++++++++++++++++
 2 files changed, 150 insertions(+)
 create mode 100644 src/components/base/BaseButton.vue
 create mode 100644 src/components/base/BaseRowCard.vue

diff --git a/src/components/base/BaseButton.vue b/src/components/base/BaseButton.vue
new file mode 100644
index 0000000000..f8bdf89182
--- /dev/null
+++ b/src/components/base/BaseButton.vue
@@ -0,0 +1,86 @@
+<template>
+  <button
+    class="button"
+    :class="variant ? variant : 'default'"
+    @click="(payload) => $emit('click', payload)"
+  >
+    <q-icon v-if="icon" :name="icon" size="sm" />
+    {{ label }}
+  </button>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  label: string;
+  icon?: string;
+  variant?: "default" | "primary" | "danger";
+}>();
+
+defineEmits<{
+  (e: "click", payload: MouseEvent): void;
+}>();
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as vars;
+
+.button {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: vars.$size-control;
+  border-radius: vars.$radius-control;
+  padding: 0 vars.$padding-button;
+  gap: vars.$gap-control;
+  border: 1px solid;
+  transition: background-color vars.$transition-duration;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+  &:active:not(:disabled) {
+    box-shadow: 0 0 0 transparent;
+  }
+}
+
+.default {
+  color: #222;
+  background-color: #fff;
+  border-color: #0002;
+
+  &:hover:not(:disabled) {
+    background-color: #f4f5f4;
+  }
+
+  &:active:not(:disabled) {
+    background-color: #ebeceb;
+  }
+}
+
+.primary {
+  color: #fff;
+  border-color: #0002;
+  background-color: #a5d4ad;
+
+  &:hover:not(:disabled) {
+    background-color: #97cfa1;
+  }
+
+  &:active:not(:disabled) {
+    background-color: #86c291;
+  }
+}
+
+.danger {
+  color: #d04756;
+  border-color: #d04756;
+  background-color: #fff;
+
+  &:hover:not(:disabled) {
+    background-color: #ffe0e0;
+  }
+
+  &:active:not(:disabled) {
+    background-color: #ffc1c1;
+  }
+}
+</style>
diff --git a/src/components/base/BaseRowCard.vue b/src/components/base/BaseRowCard.vue
new file mode 100644
index 0000000000..20dd3eef09
--- /dev/null
+++ b/src/components/base/BaseRowCard.vue
@@ -0,0 +1,64 @@
+<template>
+  <button
+    class="row-card"
+    :class="{ clickable: clickable }"
+    @click="(payload) => $emit('click', payload)"
+  >
+    <div class="text">
+      <div class="title">{{ title }}</div>
+      <div class="description">{{ description }}</div>
+    </div>
+    <div class="control">
+      <slot />
+    </div>
+  </button>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  title: string;
+  description?: string;
+  clickable: boolean;
+}>();
+
+defineEmits<{
+  (e: "click", payload: MouseEvent): void;
+}>();
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as vars;
+@use '@/styles/colors' as colors;
+
+.row-card {
+  display: flex;
+  text-align: unset;
+  align-items: center;
+  border: 1px solid #0002;
+  background-color: #fff;
+  border-radius: vars.$radius-container;
+  padding: vars.$padding-container;
+  gap: vars.$gap-container;
+  transition: background-color vars.$transition-duration;
+}
+
+.clickable:not(:disabled) {
+  cursor: pointer;
+
+  &:hover {
+    background-color: #f4f5f4;
+  }
+
+  &:active {
+    background-color: #ebeceb;
+  }
+}
+
+.text {
+  flex-grow: 1;
+}
+
+.description {
+  font-size: 0.75rem;
+}
+</style>

From 7bb6d24671423abb9bd936930d828d590f7f81d1 Mon Sep 17 00:00:00 2001
From: takusea <takusea826@gmail.com>
Date: Wed, 15 Nov 2023 22:36:33 +0900
Subject: [PATCH 02/17] =?UTF-8?q?scss=E5=A4=89=E6=95=B0=E3=81=AE=E8=BF=BD?=
 =?UTF-8?q?=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/variables.scss | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 4587008156..4b2fe3351b 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -6,3 +6,22 @@ $menubar-height: 24px;
 $detail-view-splitter-cell-z-index: 2;
 
 $character-item-size: 215px; // キャラクター並び替えダイアログなどでの１キャラ表示要素の横幅
+
+$size-scrollbar: 8px;
+$size-icon: 16px;
+$size-indicator: 24px;
+$size-control: 32px;
+$size-listitem: 40px;
+$size-fab: 48px;
+
+$padding-control: 8px;
+$padding-button: 16px;
+$padding-container: 16px;
+
+$gap-control: 8px;
+$gap-container: 16px;
+
+$radius-control: 8px;
+$radius-container: 16px;
+
+$transition-duration: 100ms;

From e6a87488cc4cfadc054ea28bbe35dd469d918c2c Mon Sep 17 00:00:00 2001
From: takusea <takusea826@gmail.com>
Date: Wed, 15 Nov 2023 23:12:35 +0900
Subject: [PATCH 03/17] =?UTF-8?q?=E3=83=AA=E3=83=87=E3=82=B6=E3=82=A4?=
 =?UTF-8?q?=E3=83=B3=E3=81=97=E3=81=9F=E3=83=A9=E3=82=A4=E3=82=BB=E3=83=B3?=
 =?UTF-8?q?=E3=82=B9=E6=83=85=E5=A0=B1=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC?=
 =?UTF-8?q?=E3=83=8D=E3=83=B3=E3=83=88=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/template/OssLicenseSection.vue | 85 +++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 src/components/template/OssLicenseSection.vue

diff --git a/src/components/template/OssLicenseSection.vue b/src/components/template/OssLicenseSection.vue
new file mode 100644
index 0000000000..ff9d25a786
--- /dev/null
+++ b/src/components/template/OssLicenseSection.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="container">
+    <div v-if="detailIndex === undefined" class="inner inner-list">
+      <h1 class="headline">ライセンス情報</h1>
+      <div class="list">
+        <BaseRowCard
+          v-for="(license, index) in props.licenses"
+          :key="index"
+          :title="
+            license.name + (license.version ? ' | ' + license.version : '')
+          "
+          clickable
+          @click="selectLicenseIndex(index)"
+        >
+          <q-icon name="arrow_right" size="sm" />
+        </BaseRowCard>
+      </div>
+    </div>
+    <div v-else class="inner inner-detail">
+      <div>
+        <BaseButton
+          label="戻る"
+          icon="keyboard_arrow_left"
+          @click="selectLicenseIndex(undefined)"
+        />
+      </div>
+      <h1 class="headline">{{ licenses[detailIndex].name }}</h1>
+      <pre>{{ licenses[detailIndex].text }}</pre>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import BaseRowCard from "../base/BaseRowCard.vue";
+import BaseButton from "../base/BaseButton.vue";
+
+const props =
+  defineProps<{
+    licenses: Record<string, string>[];
+  }>();
+
+const detailIndex = ref<number | undefined>(undefined);
+
+const selectLicenseIndex = (index: number | undefined) => {
+  detailIndex.value = index;
+};
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as vars;
+@use '@/styles/colors' as colors;
+
+.container {
+  // 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
+  // height: 100%;
+  height: calc(100vh - 90px);
+  overflow-y: auto;
+  background-color: #e9f3e7;
+}
+
+.inner {
+  display: flex;
+  flex-direction: column;
+  padding: vars.$padding-container;
+  gap: vars.$gap-container;
+  min-height: 100%;
+}
+
+.inner-detail {
+  background-color: #fff;
+}
+
+.headline {
+  font-size: 1.5rem;
+  line-height: 1;
+  margin: 0;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: vars.$gap-control;
+}
+</style>

From 26b53c44612e5c843ce6d33d5ea3640965b004ee Mon Sep 17 00:00:00 2001
From: takusea <takusea826@gmail.com>
Date: Wed, 15 Nov 2023 23:14:54 +0900
Subject: [PATCH 04/17] =?UTF-8?q?=E3=82=A4=E3=83=B3=E3=83=9D=E3=83=BC?=
 =?UTF-8?q?=E3=83=88=E3=81=99=E3=82=8B=E3=83=A9=E3=82=A4=E3=82=BB=E3=83=B3?=
 =?UTF-8?q?=E3=82=B9=E6=83=85=E5=A0=B1=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC?=
 =?UTF-8?q?=E3=83=8D=E3=83=B3=E3=83=88=E3=82=92=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/help/HelpDialog.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/help/HelpDialog.vue b/src/components/help/HelpDialog.vue
index 653d9c8234..205b43b4b4 100644
--- a/src/components/help/HelpDialog.vue
+++ b/src/components/help/HelpDialog.vue
@@ -86,10 +86,10 @@
 
 <script setup lang="ts">
 import { computed, ref, type Component } from "vue";
+import OssLicense from "../template/OssLicenseSection.vue";
 import HelpPolicy from "./HelpPolicy.vue";
 import LibraryPolicy from "./LibraryPolicy.vue";
 import HowToUse from "./HowToUse.vue";
-import OssLicense from "./OssLicense.vue";
 import UpdateInfo from "./UpdateInfo.vue";
 import OssCommunityInfo from "./OssCommunityInfo.vue";
 import QAndA from "./QAndA.vue";

From 8126085b9f04565ce604b046b0cb99f021720378 Mon Sep 17 00:00:00 2001
From: takusea <takusea826@gmail.com>
Date: Thu, 16 Nov 2023 01:19:54 +0900
Subject: [PATCH 05/17] =?UTF-8?q?=E4=B8=8D=E8=A6=81=E3=81=AAscss=E5=A4=89?=
 =?UTF-8?q?=E6=95=B0=E3=81=AE=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/variables.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 4b2fe3351b..08e0eb5a99 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -12,7 +12,6 @@ $size-icon: 16px;
 $size-indicator: 24px;
 $size-control: 32px;
 $size-listitem: 40px;
-$size-fab: 48px;
 
 $padding-control: 8px;
 $padding-button: 16px;

From d1768a26a57638f05c61a8f259f58b71cb354ca8 Mon Sep 17 00:00:00 2001
From: takusea <takusea826@gmail.com>
Date: Thu, 16 Nov 2023 01:20:53 +0900
Subject: [PATCH 06/17] =?UTF-8?q?Revert=20"=E4=B8=8D=E8=A6=81=E3=81=AAscss?=
 =?UTF-8?q?=E5=A4=89=E6=95=B0=E3=81=AE=E5=89=8A=E9=99=A4"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit 8126085b9f04565ce604b046b0cb99f021720378.
---
 src/styles/variables.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 08e0eb5a99..4b2fe3351b 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -12,6 +12,7 @@ $size-icon: 16px;
 $size-indicator: 24px;
 $size-control: 32px;
 $size-listitem: 40px;
+$size-fab: 48px;
 
 $padding-control: 8px;
 $padding-button: 16px;

From c6eeeeaddad8de1e824a1d245018e272557502c6 Mon Sep 17 00:00:00 2001
From: takusea <takusea826@gmail.com>
Date: Sun, 3 Dec 2023 17:51:41 +0900
Subject: [PATCH 07/17] =?UTF-8?q?radix-vue=E3=81=AE=E5=B0=8E=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json | 122 ++++++++++++++++++++++++++++++++++++++++++++--
 package.json      |   1 +
 2 files changed, 119 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 43d22c7914..37dae3aefa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "move-file": "3.0.0",
         "multistream": "4.1.0",
         "quasar": "2.11.6",
+        "radix-vue": "1.2.3",
         "semver": "7.5.4",
         "shlex": "2.1.2",
         "source-map-support": "0.5.19",
@@ -965,6 +966,62 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.1.tgz",
+      "integrity": "sha512-QgcKYwzcc8vvZ4n/5uklchy8KVdjJwcOeI+HnnTNclJjs2nYsy23DOCf+sSV1kBwD9yDAoVKCkv/gEPzgQU3Pw==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
+      "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+      "dependencies": {
+        "@floating-ui/core": "^1.4.2",
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
+      "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
+    },
+    "node_modules/@floating-ui/vue": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.0.2.tgz",
+      "integrity": "sha512-sImlAl9mAoCKZLNlwWz2P2ZMJIDlOEDXrRD6aD2sIHAka1LPC+nWtB+D3lPe7IE7FGWSbwBPTnlSdlABa3Fr0A==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.4.5",
+        "vue-demi": ">=0.13.0"
+      }
+    },
+    "node_modules/@floating-ui/vue/node_modules/vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@gtm-support/core": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@gtm-support/core/-/core-1.1.0.tgz",
@@ -6723,8 +6780,7 @@
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "devOptional": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "node_modules/fast-diff": {
       "version": "1.3.0",
@@ -10130,6 +10186,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/radix-vue": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/radix-vue/-/radix-vue-1.2.3.tgz",
+      "integrity": "sha512-iR4D3SoIoCzKeCldxwxjLv0roGBZNSKAxE5/CgB8V1P7Mk7RtVhnFmOIWL/Z3XNzR9XfU03s8FZLIs+1LCEXnQ==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.5.3",
+        "@floating-ui/vue": "^1.0.2",
+        "fast-deep-equal": "^3.1.3"
+      }
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -13533,6 +13599,45 @@
         }
       }
     },
+    "@floating-ui/core": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.1.tgz",
+      "integrity": "sha512-QgcKYwzcc8vvZ4n/5uklchy8KVdjJwcOeI+HnnTNclJjs2nYsy23DOCf+sSV1kBwD9yDAoVKCkv/gEPzgQU3Pw==",
+      "requires": {
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "@floating-ui/dom": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
+      "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+      "requires": {
+        "@floating-ui/core": "^1.4.2",
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "@floating-ui/utils": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
+      "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
+    },
+    "@floating-ui/vue": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.0.2.tgz",
+      "integrity": "sha512-sImlAl9mAoCKZLNlwWz2P2ZMJIDlOEDXrRD6aD2sIHAka1LPC+nWtB+D3lPe7IE7FGWSbwBPTnlSdlABa3Fr0A==",
+      "requires": {
+        "@floating-ui/dom": "^1.4.5",
+        "vue-demi": ">=0.13.0"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.14.6",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+          "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+          "requires": {}
+        }
+      }
+    },
     "@gtm-support/core": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@gtm-support/core/-/core-1.1.0.tgz",
@@ -18205,8 +18310,7 @@
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "devOptional": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "fast-diff": {
       "version": "1.3.0",
@@ -20721,6 +20825,16 @@
       "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
       "dev": true
     },
+    "radix-vue": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/radix-vue/-/radix-vue-1.2.3.tgz",
+      "integrity": "sha512-iR4D3SoIoCzKeCldxwxjLv0roGBZNSKAxE5/CgB8V1P7Mk7RtVhnFmOIWL/Z3XNzR9XfU03s8FZLIs+1LCEXnQ==",
+      "requires": {
+        "@floating-ui/dom": "^1.5.3",
+        "@floating-ui/vue": "^1.0.2",
+        "fast-deep-equal": "^3.1.3"
+      }
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
diff --git a/package.json b/package.json
index 003459ec56..4e705c8208 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "move-file": "3.0.0",
     "multistream": "4.1.0",
     "quasar": "2.11.6",
+    "radix-vue": "1.2.3",
     "semver": "7.5.4",
     "shlex": "2.1.2",
     "source-map-support": "0.5.19",

From c3c0eb96dc32ccc13c21f5e984b82c0eb4f5f4d3 Mon Sep 17 00:00:00 2001
From: takusea <takusea826@gmail.com>
Date: Sun, 3 Dec 2023 19:00:19 +0900
Subject: [PATCH 08/17] =?UTF-8?q?BaseScrollArea=E3=82=B3=E3=83=B3=E3=83=9D?=
 =?UTF-8?q?=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseScrollArea.vue | 67 ++++++++++++++++++++++++++
 src/styles/variables.scss              |  2 +-
 2 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 src/components/base/BaseScrollArea.vue

diff --git a/src/components/base/BaseScrollArea.vue b/src/components/base/BaseScrollArea.vue
new file mode 100644
index 0000000000..37e5a4d9f4
--- /dev/null
+++ b/src/components/base/BaseScrollArea.vue
@@ -0,0 +1,67 @@
+<template>
+  <ScrollAreaRoot class="scroll-area" type="auto">
+    <ScrollAreaViewport>
+      <slot />
+    </ScrollAreaViewport>
+    <ScrollAreaScrollbar class="scrollbar" orientation="horizontal">
+      <ScrollAreaThumb class="thumb-container">
+        <div class="thumb"></div>
+      </ScrollAreaThumb>
+    </ScrollAreaScrollbar>
+    <ScrollAreaScrollbar class="scrollbar" orientation="vertical">
+      <ScrollAreaThumb class="thumb-container">
+        <div class="thumb"></div>
+      </ScrollAreaThumb>
+    </ScrollAreaScrollbar>
+  </ScrollAreaRoot>
+</template>
+
+<script setup lang="ts">
+import {
+  ScrollAreaRoot,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+} from "radix-vue";
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as vars;
+.scroll-area {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.scrollbar {
+  user-select: none;
+  touch-action: none;
+}
+
+.scrollbar[data-orientation="vertical"] {
+  width: vars.$size-scrollbar;
+}
+
+.scrollbar[data-orientation="horizontal"] {
+  height: vars.$size-scrollbar;
+}
+
+.thumb-container {
+  padding: 4px;
+}
+
+.thumb {
+  width: 100%;
+  height: 100%;
+  background-color: #0002;
+  border-radius: vars.$size-scrollbar;
+  position: relative;
+  transition: background-color vars.$transition-duration;
+}
+
+.scrollbar:hover .thumb {
+  background-color: #0003;
+}
+</style>
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 4b2fe3351b..b84a77dece 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -7,7 +7,7 @@ $detail-view-splitter-cell-z-index: 2;
 
 $character-item-size: 215px; // キャラクター並び替えダイアログなどでの１キャラ表示要素の横幅
 
-$size-scrollbar: 8px;
+$size-scrollbar: 12px;
 $size-icon: 16px;
 $size-indicator: 24px;
 $size-control: 32px;

From f0d146cfb5766083e2d544f3f78ee0531463918f Mon Sep 17 00:00:00 2001
From: takusea <takusea826@gmail.com>
Date: Sun, 3 Dec 2023 19:04:16 +0900
Subject: [PATCH 09/17] =?UTF-8?q?=E3=82=B9=E3=82=AF=E3=83=AD=E3=83=BC?=
 =?UTF-8?q?=E3=83=AB=E3=81=ABBaseScrollArea=E3=82=92=E7=94=A8=E3=81=84?=
 =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/template/OssLicenseSection.vue | 57 ++++++++++---------
 1 file changed, 30 insertions(+), 27 deletions(-)

diff --git a/src/components/template/OssLicenseSection.vue b/src/components/template/OssLicenseSection.vue
index ff9d25a786..f566ecc281 100644
--- a/src/components/template/OssLicenseSection.vue
+++ b/src/components/template/OssLicenseSection.vue
@@ -1,32 +1,36 @@
 <template>
   <div class="container">
-    <div v-if="detailIndex === undefined" class="inner inner-list">
-      <h1 class="headline">ライセンス情報</h1>
-      <div class="list">
-        <BaseRowCard
-          v-for="(license, index) in props.licenses"
-          :key="index"
-          :title="
-            license.name + (license.version ? ' | ' + license.version : '')
-          "
-          clickable
-          @click="selectLicenseIndex(index)"
-        >
-          <q-icon name="arrow_right" size="sm" />
-        </BaseRowCard>
+    <BaseScrollArea v-if="detailIndex === undefined">
+      <div class="inner inner-list">
+        <h1 class="title">ライセンス情報</h1>
+        <div class="list">
+          <BaseRowCard
+            v-for="(license, index) in props.licenses"
+            :key="index"
+            :title="
+              license.name + (license.version ? ' | ' + license.version : '')
+            "
+            clickable
+            @click="selectLicenseIndex(index)"
+          >
+            <q-icon name="keyboard_arrow_right" size="sm" />
+          </BaseRowCard>
+        </div>
       </div>
-    </div>
-    <div v-else class="inner inner-detail">
-      <div>
-        <BaseButton
-          label="戻る"
-          icon="keyboard_arrow_left"
-          @click="selectLicenseIndex(undefined)"
-        />
+    </BaseScrollArea>
+    <BaseScrollArea v-else>
+      <div class="inner inner-detail">
+        <div>
+          <BaseButton
+            label="戻る"
+            icon="keyboard_arrow_left"
+            @click="selectLicenseIndex(undefined)"
+          />
+        </div>
+        <h1 class="title">{{ licenses[detailIndex].name }}</h1>
+        <pre>{{ licenses[detailIndex].text }}</pre>
       </div>
-      <h1 class="headline">{{ licenses[detailIndex].name }}</h1>
-      <pre>{{ licenses[detailIndex].text }}</pre>
-    </div>
+    </BaseScrollArea>
   </div>
 </template>
 
@@ -34,6 +38,7 @@
 import { ref } from "vue";
 import BaseRowCard from "../base/BaseRowCard.vue";
 import BaseButton from "../base/BaseButton.vue";
+import BaseScrollArea from "../base/BaseScrollArea.vue";
 
 const props =
   defineProps<{
@@ -55,7 +60,6 @@ const selectLicenseIndex = (index: number | undefined) => {
   // 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
   // height: 100%;
   height: calc(100vh - 90px);
-  overflow-y: auto;
   background-color: #e9f3e7;
 }
 
@@ -64,7 +68,6 @@ const selectLicenseIndex = (index: number | undefined) => {
   flex-direction: column;
   padding: vars.$padding-container;
   gap: vars.$gap-container;
-  min-height: 100%;
 }
 
 .inner-detail {

From 12db4d329cf71ae769d2cd7205e13128b54d785b Mon Sep 17 00:00:00 2001
From: takusea <takusea826@gmail.com>
Date: Sun, 3 Dec 2023 19:04:23 +0900
Subject: [PATCH 10/17] =?UTF-8?q?Headline=E7=94=A8=E3=82=B9=E3=82=BF?=
 =?UTF-8?q?=E3=82=A4=E3=83=AB=E3=82=92typography=E3=83=95=E3=82=A1?=
 =?UTF-8?q?=E3=82=A4=E3=83=AB=E3=81=AEheadline-1=20Mixin=E3=81=AB=E7=A7=BB?=
 =?UTF-8?q?=E5=8B=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/template/OssLicenseSection.vue | 7 +++----
 src/styles/typography.scss                    | 6 ++++++
 2 files changed, 9 insertions(+), 4 deletions(-)
 create mode 100644 src/styles/typography.scss

diff --git a/src/components/template/OssLicenseSection.vue b/src/components/template/OssLicenseSection.vue
index f566ecc281..e16868c1b6 100644
--- a/src/components/template/OssLicenseSection.vue
+++ b/src/components/template/OssLicenseSection.vue
@@ -55,6 +55,7 @@ const selectLicenseIndex = (index: number | undefined) => {
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
 @use '@/styles/colors' as colors;
+@use '@/styles/typography' as typography;
 
 .container {
   // 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
@@ -74,10 +75,8 @@ const selectLicenseIndex = (index: number | undefined) => {
   background-color: #fff;
 }
 
-.headline {
-  font-size: 1.5rem;
-  line-height: 1;
-  margin: 0;
+.title {
+  @include typography.headline-1;
 }
 
 .list {
diff --git a/src/styles/typography.scss b/src/styles/typography.scss
new file mode 100644
index 0000000000..3fdc872f1c
--- /dev/null
+++ b/src/styles/typography.scss
@@ -0,0 +1,6 @@
+@mixin headline-1 {
+  font-size: 1.5rem;
+  line-height: 2;
+  margin: 0;
+  font-weight: 600;
+}

From 39975f0541828ccb4964da939951c56a4de99f64 Mon Sep 17 00:00:00 2001
From: takusea <takusea826@gmail.com>
Date: Sun, 10 Dec 2023 22:30:23 +0900
Subject: [PATCH 11/17] =?UTF-8?q?Focus=E6=99=82=E3=81=AE=E3=83=87=E3=82=B6?=
 =?UTF-8?q?=E3=82=A4=E3=83=B3=E3=82=92=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseButton.vue            | 5 +++++
 src/components/base/BaseRowCard.vue           | 5 +++++
 src/components/template/OssLicenseSection.vue | 4 ++--
 src/styles/{typography.scss => mixin.scss}    | 5 +++++
 4 files changed, 17 insertions(+), 2 deletions(-)
 rename src/styles/{typography.scss => mixin.scss} (57%)

diff --git a/src/components/base/BaseButton.vue b/src/components/base/BaseButton.vue
index f8bdf89182..2fb546d0ef 100644
--- a/src/components/base/BaseButton.vue
+++ b/src/components/base/BaseButton.vue
@@ -23,6 +23,7 @@ defineEmits<{
 
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
+@use '@/styles/mixin' as mixin;
 
 .button {
   display: flex;
@@ -40,6 +41,10 @@ defineEmits<{
   &:active:not(:disabled) {
     box-shadow: 0 0 0 transparent;
   }
+
+  &:focus-visible {
+    @include mixin.on-focus;
+  }
 }
 
 .default {
diff --git a/src/components/base/BaseRowCard.vue b/src/components/base/BaseRowCard.vue
index 20dd3eef09..c057871711 100644
--- a/src/components/base/BaseRowCard.vue
+++ b/src/components/base/BaseRowCard.vue
@@ -29,6 +29,7 @@ defineEmits<{
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
 @use '@/styles/colors' as colors;
+@use '@/styles/mixin' as mixin;
 
 .row-card {
   display: flex;
@@ -52,6 +53,10 @@ defineEmits<{
   &:active {
     background-color: #ebeceb;
   }
+
+  &:focus-visible {
+    @include mixin.on-focus;
+  }
 }
 
 .text {
diff --git a/src/components/template/OssLicenseSection.vue b/src/components/template/OssLicenseSection.vue
index e16868c1b6..f33c82b2b7 100644
--- a/src/components/template/OssLicenseSection.vue
+++ b/src/components/template/OssLicenseSection.vue
@@ -55,7 +55,7 @@ const selectLicenseIndex = (index: number | undefined) => {
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
 @use '@/styles/colors' as colors;
-@use '@/styles/typography' as typography;
+@use '@/styles/mixin' as mixin;
 
 .container {
   // 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
@@ -76,7 +76,7 @@ const selectLicenseIndex = (index: number | undefined) => {
 }
 
 .title {
-  @include typography.headline-1;
+  @include mixin.headline-1;
 }
 
 .list {
diff --git a/src/styles/typography.scss b/src/styles/mixin.scss
similarity index 57%
rename from src/styles/typography.scss
rename to src/styles/mixin.scss
index 3fdc872f1c..654b21669a 100644
--- a/src/styles/typography.scss
+++ b/src/styles/mixin.scss
@@ -1,3 +1,8 @@
+@mixin on-focus {
+  outline-color: #a5d4ad;
+  outline-width: 2px;
+}
+
 @mixin headline-1 {
   font-size: 1.5rem;
   line-height: 2;

From 379895684f895e58d2f7fd9725fef3ca741a0dfd Mon Sep 17 00:00:00 2001
From: takusea <takusea826@gmail.com>
Date: Sun, 10 Dec 2023 22:32:54 +0900
Subject: [PATCH 12/17] =?UTF-8?q?=E8=83=8C=E6=99=AF=E8=89=B2=E3=81=8C?=
 =?UTF-8?q?=E9=80=94=E5=88=87=E3=82=8C=E3=81=AA=E3=81=84=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseScrollArea.vue        |  8 +++++++-
 src/components/template/OssLicenseSection.vue | 18 ++++++++++--------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/base/BaseScrollArea.vue b/src/components/base/BaseScrollArea.vue
index 37e5a4d9f4..575bf3eed5 100644
--- a/src/components/base/BaseScrollArea.vue
+++ b/src/components/base/BaseScrollArea.vue
@@ -1,6 +1,6 @@
 <template>
   <ScrollAreaRoot class="scroll-area" type="auto">
-    <ScrollAreaViewport>
+    <ScrollAreaViewport class="viewport">
       <slot />
     </ScrollAreaViewport>
     <ScrollAreaScrollbar class="scrollbar" orientation="horizontal">
@@ -27,6 +27,7 @@ import {
 
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
+
 .scroll-area {
   width: 100%;
   height: 100%;
@@ -35,6 +36,11 @@ import {
   flex-direction: column;
 }
 
+.viewport {
+  width: 100%;
+  height: 100%;
+}
+
 .scrollbar {
   user-select: none;
   touch-action: none;
diff --git a/src/components/template/OssLicenseSection.vue b/src/components/template/OssLicenseSection.vue
index f33c82b2b7..6f405c0ba4 100644
--- a/src/components/template/OssLicenseSection.vue
+++ b/src/components/template/OssLicenseSection.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="container">
-    <BaseScrollArea v-if="detailIndex === undefined">
+  <div v-if="detailIndex == undefined" class="container">
+    <BaseScrollArea>
       <div class="inner inner-list">
         <h1 class="title">ライセンス情報</h1>
         <div class="list">
@@ -18,8 +18,10 @@
         </div>
       </div>
     </BaseScrollArea>
-    <BaseScrollArea v-else>
-      <div class="inner inner-detail">
+  </div>
+  <div v-else class="container container-detail">
+    <BaseScrollArea>
+      <div class="inner">
         <div>
           <BaseButton
             label="戻る"
@@ -64,6 +66,10 @@ const selectLicenseIndex = (index: number | undefined) => {
   background-color: #e9f3e7;
 }
 
+.container-detail {
+  background-color: #fff;
+}
+
 .inner {
   display: flex;
   flex-direction: column;
@@ -71,10 +77,6 @@ const selectLicenseIndex = (index: number | undefined) => {
   gap: vars.$gap-container;
 }
 
-.inner-detail {
-  background-color: #fff;
-}
-
 .title {
   @include mixin.headline-1;
 }

From 7079add4ea3bed9b857b5cd13af46e3e1bb26607 Mon Sep 17 00:00:00 2001
From: takusea <takusea826@gmail.com>
Date: Wed, 13 Dec 2023 21:20:10 +0900
Subject: [PATCH 13/17] =?UTF-8?q?=E3=82=AF=E3=83=A9=E3=82=B9=E5=90=8D?=
 =?UTF-8?q?=E3=82=92Radix=20Vue=E3=81=AE=E3=82=B3=E3=83=B3=E3=83=9D?=
 =?UTF-8?q?=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E5=90=8D=E3=81=AB=E5=90=88?=
 =?UTF-8?q?=E3=82=8F=E3=81=9B=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E5=A4=89?=
 =?UTF-8?q?=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseScrollArea.vue | 32 +++++++++++++-------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/base/BaseScrollArea.vue b/src/components/base/BaseScrollArea.vue
index 575bf3eed5..c5814a0f91 100644
--- a/src/components/base/BaseScrollArea.vue
+++ b/src/components/base/BaseScrollArea.vue
@@ -1,16 +1,16 @@
 <template>
-  <ScrollAreaRoot class="scroll-area" type="auto">
-    <ScrollAreaViewport class="viewport">
+  <ScrollAreaRoot class="ScrollAreaRoot" type="auto">
+    <ScrollAreaViewport class="ScrollAreaViewport">
       <slot />
     </ScrollAreaViewport>
-    <ScrollAreaScrollbar class="scrollbar" orientation="horizontal">
-      <ScrollAreaThumb class="thumb-container">
-        <div class="thumb"></div>
+    <ScrollAreaScrollbar class="ScrollAreaScrollbar" orientation="horizontal">
+      <ScrollAreaThumb class="ScrollAreaThumbContainer">
+        <div class="ScrollAreaThumb"></div>
       </ScrollAreaThumb>
     </ScrollAreaScrollbar>
-    <ScrollAreaScrollbar class="scrollbar" orientation="vertical">
-      <ScrollAreaThumb class="thumb-container">
-        <div class="thumb"></div>
+    <ScrollAreaScrollbar class="ScrollAreaScrollbar" orientation="vertical">
+      <ScrollAreaThumb class="ScrollAreaThumbContainer">
+        <div class="ScrollAreaThumb"></div>
       </ScrollAreaThumb>
     </ScrollAreaScrollbar>
   </ScrollAreaRoot>
@@ -28,7 +28,7 @@ import {
 <style scoped lang="scss">
 @use '@/styles/variables' as vars;
 
-.scroll-area {
+.ScrollAreaRoot {
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -36,29 +36,29 @@ import {
   flex-direction: column;
 }
 
-.viewport {
+.ScrollAreaViewport {
   width: 100%;
   height: 100%;
 }
 
-.scrollbar {
+.ScrollAreaScrollbar {
   user-select: none;
   touch-action: none;
 }
 
-.scrollbar[data-orientation="vertical"] {
+.ScrollAreaScrollbar[data-orientation="vertical"] {
   width: vars.$size-scrollbar;
 }
 
-.scrollbar[data-orientation="horizontal"] {
+.ScrollAreaScrollbar[data-orientation="horizontal"] {
   height: vars.$size-scrollbar;
 }
 
-.thumb-container {
+.ScrollAreaThumbContainer {
   padding: 4px;
 }
 
-.thumb {
+.ScrollAreaThumb {
   width: 100%;
   height: 100%;
   background-color: #0002;
@@ -67,7 +67,7 @@ import {
   transition: background-color vars.$transition-duration;
 }
 
-.scrollbar:hover .thumb {
+.ScrollAreaScrollbar:hover .ScrollAreaThumb {
   background-color: #0003;
 }
 </style>

From 938a5b7921caf39757b245bc0d8724b1bf638f8e Mon Sep 17 00:00:00 2001
From: takusea <takusea826@gmail.com>
Date: Wed, 13 Dec 2023 21:32:47 +0900
Subject: [PATCH 14/17] =?UTF-8?q?=E3=82=B3=E3=83=A1=E3=83=B3=E3=83=88?=
 =?UTF-8?q?=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseButton.vue            | 1 +
 src/components/template/OssLicenseSection.vue | 3 ++-
 src/styles/mixin.scss                         | 2 ++
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/base/BaseButton.vue b/src/components/base/BaseButton.vue
index 2fb546d0ef..0356b1dacd 100644
--- a/src/components/base/BaseButton.vue
+++ b/src/components/base/BaseButton.vue
@@ -4,6 +4,7 @@
     :class="variant ? variant : 'default'"
     @click="(payload) => $emit('click', payload)"
   >
+    <!-- 暫定でq-iconを使用 -->
     <q-icon v-if="icon" :name="icon" size="sm" />
     {{ label }}
   </button>
diff --git a/src/components/template/OssLicenseSection.vue b/src/components/template/OssLicenseSection.vue
index 6f405c0ba4..66b91b4674 100644
--- a/src/components/template/OssLicenseSection.vue
+++ b/src/components/template/OssLicenseSection.vue
@@ -13,6 +13,7 @@
             clickable
             @click="selectLicenseIndex(index)"
           >
+            <!-- 暫定でq-iconを使用 -->
             <q-icon name="keyboard_arrow_right" size="sm" />
           </BaseRowCard>
         </div>
@@ -60,7 +61,7 @@ const selectLicenseIndex = (index: number | undefined) => {
 @use '@/styles/mixin' as mixin;
 
 .container {
-  // 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
+  // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
   // height: 100%;
   height: calc(100vh - 90px);
   background-color: #e9f3e7;
diff --git a/src/styles/mixin.scss b/src/styles/mixin.scss
index 654b21669a..d3e528a73c 100644
--- a/src/styles/mixin.scss
+++ b/src/styles/mixin.scss
@@ -1,8 +1,10 @@
+// キーボードフォーカス時のOutline表示用のスタイル
 @mixin on-focus {
   outline-color: #a5d4ad;
   outline-width: 2px;
 }
 
+// 見出し1(h1)用のスタイル
 @mixin headline-1 {
   font-size: 1.5rem;
   line-height: 2;

From d8bc2b75845629601b86fc598e43c169ee71a922 Mon Sep 17 00:00:00 2001
From: takusea <takusea826@gmail.com>
Date: Wed, 13 Dec 2023 21:33:15 +0900
Subject: [PATCH 15/17] =?UTF-8?q?=E4=B8=8D=E8=A6=81=E3=81=AA=E6=97=A7?=
 =?UTF-8?q?=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88?=
 =?UTF-8?q?=E3=83=95=E3=82=A1=E3=82=A4=E3=83=AB=E3=82=92=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/help/OssLicense.vue | 64 ------------------------------
 1 file changed, 64 deletions(-)
 delete mode 100644 src/components/help/OssLicense.vue

diff --git a/src/components/help/OssLicense.vue b/src/components/help/OssLicense.vue
deleted file mode 100644
index 1b0ccd4354..0000000000
--- a/src/components/help/OssLicense.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-  <q-page
-    ref="scroller"
-    class="relative-absolute-wrapper scroller bg-background"
-  >
-    <div class="q-pa-md markdown-body">
-      <q-list v-if="detailIndex === undefined">
-        <q-item
-          v-for="(license, index) in props.licenses"
-          :key="index"
-          clickable
-          dense
-          @click="selectLicenseIndex(index)"
-        >
-          <q-item-section>{{
-            license.name + (license.version ? " | " + license.version : "")
-          }}</q-item-section>
-        </q-item>
-      </q-list>
-      <div v-else>
-        <div class="q-mb-md">
-          <q-btn
-            outline
-            color="primary"
-            icon="keyboard_arrow_left"
-            label="戻る"
-            @click="selectLicenseIndex(undefined)"
-          />
-        </div>
-        <div class="text-subtitle">{{ licenses[detailIndex].name }}</div>
-        <pre>{{ licenses[detailIndex].text }}</pre>
-      </div>
-    </div>
-  </q-page>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-
-const props =
-  defineProps<{
-    licenses: Record<string, string>[];
-  }>();
-
-const detailIndex = ref<number | undefined>(undefined);
-
-const scroller = ref<HTMLElement>();
-
-const selectLicenseIndex = (index: number | undefined) => {
-  if (scroller.value == undefined)
-    throw new Error("scroller.value == undefined");
-  scroller.value.scrollTop = 0;
-  detailIndex.value = index;
-};
-</script>
-
-<style scoped lang="scss">
-.root {
-  .scroller {
-    width: 100%;
-    overflow: auto;
-  }
-}
-</style>

From 1ca66766c9448e09bbf1ab5d4e6cca6e1ad8037e Mon Sep 17 00:00:00 2001
From: takusea <takusea826@gmail.com>
Date: Sat, 16 Dec 2023 10:44:46 +0900
Subject: [PATCH 16/17] =?UTF-8?q?Sass=E5=A4=89=E6=95=B0=E5=90=8D=E3=82=92?=
 =?UTF-8?q?=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseButton.vue            |  6 +--
 src/components/base/BaseRowCard.vue           |  6 +--
 src/components/template/OssLicenseSection.vue |  6 +--
 src/styles/variables.scss                     | 38 +++++++++++--------
 4 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/src/components/base/BaseButton.vue b/src/components/base/BaseButton.vue
index 0356b1dacd..e8c50de4da 100644
--- a/src/components/base/BaseButton.vue
+++ b/src/components/base/BaseButton.vue
@@ -31,9 +31,9 @@ defineEmits<{
   justify-content: space-between;
   align-items: center;
   height: vars.$size-control;
-  border-radius: vars.$radius-control;
-  padding: 0 vars.$padding-button;
-  gap: vars.$gap-control;
+  border-radius: vars.$radius-1;
+  padding: 0 vars.$padding-2;
+  gap: vars.$gap-1;
   border: 1px solid;
   transition: background-color vars.$transition-duration;
   cursor: pointer;
diff --git a/src/components/base/BaseRowCard.vue b/src/components/base/BaseRowCard.vue
index c057871711..60504680cc 100644
--- a/src/components/base/BaseRowCard.vue
+++ b/src/components/base/BaseRowCard.vue
@@ -37,9 +37,9 @@ defineEmits<{
   align-items: center;
   border: 1px solid #0002;
   background-color: #fff;
-  border-radius: vars.$radius-container;
-  padding: vars.$padding-container;
-  gap: vars.$gap-container;
+  border-radius: vars.$radius-2;
+  padding: vars.$padding-2;
+  gap: vars.$gap-2;
   transition: background-color vars.$transition-duration;
 }
 
diff --git a/src/components/template/OssLicenseSection.vue b/src/components/template/OssLicenseSection.vue
index 66b91b4674..e848643289 100644
--- a/src/components/template/OssLicenseSection.vue
+++ b/src/components/template/OssLicenseSection.vue
@@ -74,8 +74,8 @@ const selectLicenseIndex = (index: number | undefined) => {
 .inner {
   display: flex;
   flex-direction: column;
-  padding: vars.$padding-container;
-  gap: vars.$gap-container;
+  padding: vars.$padding-2;
+  gap: vars.$gap-1;
 }
 
 .title {
@@ -85,6 +85,6 @@ const selectLicenseIndex = (index: number | undefined) => {
 .list {
   display: flex;
   flex-direction: column;
-  gap: vars.$gap-control;
+  gap: vars.$gap-1;
 }
 </style>
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index b84a77dece..f58c77b62f 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -7,21 +7,27 @@ $detail-view-splitter-cell-z-index: 2;
 
 $character-item-size: 215px; // キャラクター並び替えダイアログなどでの１キャラ表示要素の横幅
 
-$size-scrollbar: 12px;
-$size-icon: 16px;
-$size-indicator: 24px;
-$size-control: 32px;
-$size-listitem: 40px;
-$size-fab: 48px;
-
-$padding-control: 8px;
-$padding-button: 16px;
-$padding-container: 16px;
-
-$gap-control: 8px;
-$gap-container: 16px;
-
-$radius-control: 8px;
-$radius-container: 16px;
+:root {
+  --size-basis: 8px;
+  --padding-basis: 8px;
+  --gap-basis: 8px;
+  --radius-basis: 8px;
+}
+
+$size-scrollbar: calc(var(--size-basis) * 1.5);
+$size-icon: calc(var(--size-basis) * 2);
+$size-indicator: calc(var(--size-basis) * 3);
+$size-control: calc(var(--size-basis) * 4);
+$size-listitem: calc(var(--size-basis) * 5);
+$size-fab: calc(var(--size-basis) * 6);
+
+$padding-1: var(--padding-basis);
+$padding-2: calc(var(--padding-basis) * 2);
+
+$gap-1: var(--gap-basis);
+$gap-2: calc(var(--gap-basis) * 2);
+
+$radius-1: var(--radius-basis);
+$radius-2: calc(var(--radius-basis) * 2);
 
 $transition-duration: 100ms;

From 51ad385d07518000400a2d2d097e76450935c8f6 Mon Sep 17 00:00:00 2001
From: takusea <takusea826@gmail.com>
Date: Sun, 17 Dec 2023 18:42:00 +0900
Subject: [PATCH 17/17] =?UTF-8?q?=E3=82=AF=E3=83=A9=E3=82=B9=E3=81=AE?=
 =?UTF-8?q?=E5=91=BD=E5=90=8D=E3=82=92=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseScrollArea.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/base/BaseScrollArea.vue b/src/components/base/BaseScrollArea.vue
index c5814a0f91..626ae0dea9 100644
--- a/src/components/base/BaseScrollArea.vue
+++ b/src/components/base/BaseScrollArea.vue
@@ -4,13 +4,13 @@
       <slot />
     </ScrollAreaViewport>
     <ScrollAreaScrollbar class="ScrollAreaScrollbar" orientation="horizontal">
-      <ScrollAreaThumb class="ScrollAreaThumbContainer">
-        <div class="ScrollAreaThumb"></div>
+      <ScrollAreaThumb class="ScrollAreaThumb">
+        <div class="thumb"></div>
       </ScrollAreaThumb>
     </ScrollAreaScrollbar>
     <ScrollAreaScrollbar class="ScrollAreaScrollbar" orientation="vertical">
-      <ScrollAreaThumb class="ScrollAreaThumbContainer">
-        <div class="ScrollAreaThumb"></div>
+      <ScrollAreaThumb class="ScrollAreaThumb">
+        <div class="thumb"></div>
       </ScrollAreaThumb>
     </ScrollAreaScrollbar>
   </ScrollAreaRoot>
@@ -54,11 +54,11 @@ import {
   height: vars.$size-scrollbar;
 }
 
-.ScrollAreaThumbContainer {
+.ScrollAreaThumb {
   padding: 4px;
 }
 
-.ScrollAreaThumb {
+.thumb {
   width: 100%;
   height: 100%;
   background-color: #0002;
@@ -67,7 +67,7 @@ import {
   transition: background-color vars.$transition-duration;
 }
 
-.ScrollAreaScrollbar:hover .ScrollAreaThumb {
+.ScrollAreaScrollbar:hover .thumb {
   background-color: #0003;
 }
 </style>