diff --git a/src/components/Base/BaseButton.vue b/src/components/Base/BaseButton.vue index 24a42845f1..406e2b6794 100644 --- a/src/components/Base/BaseButton.vue +++ b/src/components/Base/BaseButton.vue @@ -31,7 +31,7 @@ defineEmits<{ .button { display: flex; - justify-content: space-between; + justify-content: center; align-items: center; text-wrap: nowrap; height: vars.$size-control; diff --git a/src/components/Base/BaseScrollArea.vue b/src/components/Base/BaseScrollArea.vue index 013d81d7ed..76687dcf02 100644 --- a/src/components/Base/BaseScrollArea.vue +++ b/src/components/Base/BaseScrollArea.vue @@ -52,6 +52,7 @@ import { .ScrollAreaScrollbar { user-select: none; touch-action: none; + z-index: 1; } .ScrollAreaScrollbar[data-orientation="vertical"] { diff --git a/src/components/Dialog/HotkeySettingDialog.vue b/src/components/Dialog/HotkeySettingDialog.vue index 4ef05c6efb..088af10678 100644 --- a/src/components/Dialog/HotkeySettingDialog.vue +++ b/src/components/Dialog/HotkeySettingDialog.vue @@ -47,52 +47,57 @@
-
- +
+
+
操作
+
ショートカットキー
+
+
- - - - +
+
+ {{ hotkeySetting.action }} +
+
+ +
+
+ +
+
+
@@ -116,7 +121,6 @@ import { computed, ref } from "vue"; import HotkeyRecordingDialog from "./HotkeyRecordingDialog.vue"; import BaseButton from "@/components/Base/BaseButton.vue"; -import BaseRowCard from "@/components/Base/BaseRowCard.vue"; import BaseIconButton from "@/components/Base/BaseIconButton.vue"; import BaseScrollArea from "@/components/Base/BaseScrollArea.vue"; import { useStore } from "@/store"; @@ -280,7 +284,8 @@ const resetHotkey = async (action: string) => { diff --git a/src/styles/v2/colors.scss b/src/styles/v2/colors.scss index d5e8a17e2a..f97a473a8c 100644 --- a/src/styles/v2/colors.scss +++ b/src/styles/v2/colors.scss @@ -11,6 +11,7 @@ $primitive-red: #d04756; // ライトテーマの色 :root[is-dark-theme="false"] { --color-v2-background: #{lighten($primitive-primary, 25%)}; + --color-v2-background-alt: #{darken($primitive-white, 5%)}; --color-v2-background-drawer: #{rgba(lighten($primitive-primary, 20%), 0.75)}; --color-v2-surface: #{$primitive-white}; @@ -47,6 +48,7 @@ $primitive-red: #d04756; // ダークテーマの色 :root[is-dark-theme="true"] { --color-v2-background: #{$primitive-black}; + --color-v2-background-alt: #{lighten($primitive-black, 2%)}; --color-v2-background-drawer: #{rgba($primitive-black, 0.75)}; --color-v2-surface: #{lighten($primitive-black, 3%)}; @@ -81,6 +83,7 @@ $primitive-red: #d04756; } $background: var(--color-v2-background); +$background-alt: var(--color-v2-background-alt); $background-drawer: var(--color-v2-background-drawer); $surface: var(--color-v2-surface);