テーマ調整・確認用のUIを追加

romot-co · Jul 11, 2024 · 64e7249 · 64e7249
1 parent 55f4f52
commit 64e7249
Show file tree

Hide file tree

Showing 6 changed files with 458 additions and 262 deletions.
diff --git a/src/components/Sing/CharacterMenuButton/SelectedCharacter.vue b/src/components/Sing/CharacterMenuButton/SelectedCharacter.vue
@@ -109,6 +109,7 @@ const selectedStyleIconPath = computed(() => {
   }
 
   .character-name {
+    color: var(--md-sys-color-on-surface);
     font-size: 15px;
     font-weight: 500;
     line-height: 24px;

diff --git a/src/components/Sing/ScoreSequencer.vue b/src/components/Sing/ScoreSequencer.vue
@@ -1529,12 +1529,48 @@ const contextMenuData = computed<ContextMenuItemData[]>(() => {
   bottom: 16px;
   right: 32px;
   width: 80px;
+
+  :deep(.q-slider__track) {
+    background: var(--md-sys-color-surface-variant);
+    color: var(--md-sys-color-on-surface-variant);
+  }
+
+  :deep(.q-slider__thumb) {
+    color: var(--md-sys-color-on-surface-variant);
+  }
+
+  &:hover {
+    :deep(.q-slider__track) {
+      color: var(--md-sys-color-on-surface-variant);
+    }
+    :deep(.q-slider__thumb) {
+      color: var(--md-sys-color-on-surface-variant);
+    }
+  }
 }
 
 .zoom-y-slider {
   position: fixed;
   bottom: 40px;
   right: 16px;
   height: 80px;
+
+  :deep(.q-slider__track) {
+    background: var(--md-sys-color-surface-variant);
+    color: var(--md-sys-color-on-surface-variant);
+  }
+
+  :deep(.q-slider__thumb) {
+    color: var(--md-sys-color-on-surface-variant);
+  }
+
+  &:hover {
+    :deep(.q-slider__track) {
+      color: var(--md-sys-color-on-surface-variant);
+    }
+    :deep(.q-slider__thumb) {
+      color: var(--md-sys-color-on-surface-variant);
+    }
+  }
 }
 </style>
diff --git a/src/components/Sing/SequencerNote.vue b/src/components/Sing/SequencerNote.vue
@@ -229,7 +229,7 @@ const onLeftEdgeMouseDown = (event: MouseEvent) => {
     bottom: 0;
     min-width: 2em;
     padding: 0;
-    color: var(--md-sys-color-on-primary-fixed);
+    color: var(--md-sys-color-on-secondary-fixed);
     font-size: 16px;
     font-weight: 500;
     white-space: nowrap;
@@ -255,6 +255,12 @@ const onLeftEdgeMouseDown = (event: MouseEvent) => {
     border-radius: 4px;
   }
 
+  .body--light {
+    .note-bar {
+      background-color: var(--md-sys-color-surface-variant);
+    }
+  }
+
   .note-left-edge {
     position: absolute;
     top: 0;