仕掛かり

VOICEVOX · Aug 10, 2024 · 21232e0 · 21232e0
1 parent e6854b4
commit 21232e0
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 64 deletions.
diff --git a/public/color-schemes/default.json b/public/color-schemes/default.json
@@ -2,12 +2,12 @@
   "name": "DefaultFix",
   "displayName": "VOICEVOXデフォルト",
   "roleColors": {
-    "primary": "oklch(80% 0.1 150)",
-    "secondary": "oklch(80% 0.035 150)",
-    "tertiary": "oklch(80% 0.1 90)",
+    "primary": "oklch(80% 0.1095 149.64)",
+    "secondary": "oklch(80% 0.0365 149.64)",
+    "tertiary": "oklch(80% 0.1095 89.64)",
     "neutral": "oklch(60% 0.00 240)",
-    "neutralVariant": "oklch(80% 0.005 150)",
-    "error": "oklch(60% 0.18 20)"
+    "neutralVariant": "oklch(80% 0.005 149.64)",
+    "error": "oklch(59.21% 0.172 17.84)"
   },
   "aliasColors": [
     {

diff --git a/src/components/Sing/ScoreSequencer.vue b/src/components/Sing/ScoreSequencer.vue
@@ -1532,7 +1532,7 @@ const contextMenuData = computed<ContextMenuItemData[]>(() => {
   grid-row: 1;
   grid-column: 1;
   background: var(--scheme-color-sing-ruler-surface);
-  border-radius: 4px 0 0 0;
+  border-radius: 8px 0 0 0;
 }
 
 .sequencer-ruler {

diff --git a/src/components/Sing/SequencerNote.vue b/src/components/Sing/SequencerNote.vue
@@ -2,7 +2,8 @@
   <div
     class="note"
     :class="{
-      'selected-or-preview': isSelected || isPreview,
+      selected: isSelected,
+      preview: isPreview,
       'preview-lyric': previewLyric != undefined,
       overlapping: hasOverlappingError,
       'invalid-phrase': hasPhraseError,
@@ -274,6 +275,9 @@ const onLeftEdgeMouseDown = (event: MouseEvent) => {
     min-width: 4px;
     max-width: 8px;
     height: 100%;
+    &:hover {
+      background-color: var(--scheme-color-sing-note-bar-outline);
+    }
   }
 
   .note-right-edge {
@@ -291,11 +295,10 @@ const onLeftEdgeMouseDown = (event: MouseEvent) => {
     }
   }
 
-  &.selected-or-preview {
+  &.selected {
     .note-bar {
       background-color: var(--scheme-color-sing-note-bar-selected-container);
       border-color: var(--scheme-color-sing-note-bar-selected-outline);
-      border-width: 1px;
       outline: 1px solid
         var(--scheme-color-sing-note-bar-selected-outline-outer);
       outline-offset: 1px;
@@ -324,8 +327,7 @@ const onLeftEdgeMouseDown = (event: MouseEvent) => {
     .note-bar {
       background-color: var(--scheme-color-sing-note-bar-preview-container);
       border-color: var(--scheme-color-sing-note-bar-preview-outline);
-      outline: 1px solid var(--scheme-color-sing-note-bar-preview-outline-outer);
-      outline-offset: 1px;
+      outline-color: var(--scheme-color-sing-note-bar-preview-outline-outer);
     }
 
     .note-lyric {
@@ -361,7 +363,7 @@ const onLeftEdgeMouseDown = (event: MouseEvent) => {
       text-shadow: none;
     }
 
-    &.selected-or-preview,
+    &.selected,
     &:active {
       .note-bar {
         background-color: var(--scheme-color-error-container);

diff --git a/src/components/Sing/SideBar/SideBar.vue b/src/components/Sing/SideBar/SideBar.vue
@@ -1,14 +1,18 @@
 <template>
   <div class="sidebar">
     <div class="tracks-header">
-      トラック一覧
-      <QSpace />
+      <button
+        :disable="uiLocked || tracks.size == 1"
+        class="track-add-button"
+        @click="addTrack"
+      >
+        <QIcon name="add" />
+      </button>
       <QBtn
         v-show="tracks.size > 1"
         color="default"
         icon="delete_outline"
         rounded
-        outline
         dense
         size="sm"
         :disable="uiLocked"
@@ -17,32 +21,14 @@
       >
         <QTooltip :delay="500">トラックを削除</QTooltip>
       </QBtn>
-      <QBtn
-        color="default"
-        icon="add"
-        rounded
-        outline
-        dense
-        size="sm"
-        :disable="uiLocked"
-        class="track-list-button"
-        @click="addTrack"
-      >
-        <QTooltip :delay="500">トラックを追加</QTooltip>
-      </QBtn>
-      <QBtn
-        color="default"
-        icon="headset_off"
-        rounded
-        outline
-        dense
-        size="sm"
+      <button
+        v-if="isThereSoloTrack"
+        class="track-unsolo-all-button"
         :disable="uiLocked || !isThereSoloTrack"
-        class="track-list-button"
         @click="unsoloAllTracks"
       >
-        <QTooltip :delay="500">すべてのソロを解除</QTooltip>
-      </QBtn>
+        すべてのソロ解除
+      </button>
     </div>
     <Draggable
       tag="QList"
@@ -132,11 +118,9 @@ const reorderTracks = (trackOrder: TrackId[]) => {
 .sidebar {
   width: 100%;
   height: 100%;
-  background-color: colors.$background;
+  background-color: var(--scheme-color-sing-toolbar);
   display: grid;
   grid-template-rows: auto 1fr auto;
-  border-top: 1px solid var(--scheme-color-sing-grid-horizontal-line);
-  border-right: 1px solid var(--scheme-color-sing-grid-measure-line);
 }
 
 .tracks {
@@ -147,26 +131,56 @@ const reorderTracks = (trackOrder: TrackId[]) => {
 
 .tracks-header {
   display: flex;
-  background: colors.$background;
+  background: var(--scheme-color-surface-container-high);
   align-items: center;
+  justify-content: start;
   gap: 0.25rem;
 
-  border-bottom: 1px solid var(--scheme-color-outline);
-
   padding: 0.5rem;
   padding-left: 1rem;
   padding-right: 1.25rem;
 }
 
 .track-list-button {
-  width: 1.75rem;
-  height: 1.75rem;
+  width: 2rem;
+  height: 2rem;
   padding: 0;
 
-  color: colors.$display;
+  color: var(--scheme-color-on-surface-variant);
+}
+
+.track-add-button {
+  appearance: none;
+  background: var(--scheme-color-surface-variant);
+  border: none;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  padding: 0;
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background: var(--scheme-color-secondary-container);
+  }
+}
 
-  &::before {
-    border-color: rgba(colors.$display-rgb, 0.5);
+.track-unsolo-all-button {
+  appearance: none;
+  margin-left: auto;
+  border: none;
+  background: transparent;
+  color: var(--scheme-color-on-secondary-container);
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1rem;
+  padding: 0.5rem 1rem;
+  border-radius: 1rem;
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background: var(--scheme-color-surface-variant);
   }
 }
 </style>
diff --git a/src/components/Sing/SideBar/TrackItem.vue b/src/components/Sing/SideBar/TrackItem.vue
@@ -87,7 +87,6 @@
             icon="volume_off"
             round
             unelevated
-            :outline="!track.mute"
             dense
             size="sm"
             class="track-button"
@@ -98,12 +97,10 @@
             <QTooltip :delay="500">ミュート</QTooltip>
           </QBtn>
           <QBtn
-            :color="track.solo ? 'primary' : 'default'"
             :textColor="track.solo ? 'display-on-primary' : 'display'"
             icon="headset"
             rounded
             unelevated
-            :outline="!track.solo"
             dense
             size="sm"
             class="track-button"
@@ -131,6 +128,7 @@
             :max="1"
             :step="0.01"
             :markers="1"
+            color="secondary"
             selectionColor="transparent"
             :disable="uiLocked"
             @change="setTrackPan($event)"
@@ -307,15 +305,16 @@ const singerName = computed(() => {
 .track-detail-container {
   padding: 0;
 
-  border-bottom: 1px solid var(--scheme-color-outline-variant);
-
   // draggingクラスはSideBarのDraggableにより追加/削除される。
   .dragging & {
     display: none;
   }
 }
 
 .track-detail {
+  border-radius: 0.5rem;
+  background-color: var(--scheme-color-surface-container-highest);
+  margin: 0 0.25rem;
   padding: 0 0.5rem 0.25rem 0.5rem;
   width: 100%;
   display: flex;
@@ -328,18 +327,38 @@ const singerName = computed(() => {
     gap: 1rem;
     grid-template-columns: 1.5rem 1fr 1.5rem;
 
+    :deep(.q-slider) {
+      .q-slider__track-container {
+        height: 3px;
+      }
+
+      .q-slider__thumb-container {
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+
     .l,
     .r {
       justify-self: center;
+      color: var(--scheme-color-on-surface-variant);
+      font-size: 0.875rem;
     }
   }
 }
 
 .track-item {
-  padding-right: 0.5rem;
+  border-radius: 0.5rem;
+  margin: 0 0.25rem;
+
+  .track-button-active {
+    background-color: var(--scheme-color-surface-variant);
+    color: var(--scheme-color-on-tertiary-container);
+  }
 
   &.selected-track {
-    color: colors.$display;
+    background-color: var(--scheme-color-surface-container-highest);
+    color: var(--scheme-color-on-surface-container);
   }
 
   .track-handle-bg {
@@ -363,11 +382,6 @@ const singerName = computed(() => {
         width: 1.75rem;
         height: 1.75rem;
         padding: 0;
-
-        // 線を薄くする
-        &:not(.track-button-active)::before {
-          border-color: rgba(colors.$display-rgb, 0.5);
-        }
       }
     }
   }
@@ -393,6 +407,15 @@ const singerName = computed(() => {
   height: 1.5rem;
 }
 
+.track-name {
+  color: var(--scheme-color-on-surface);
+  font-weight: 500;
+}
+
+.singer-name {
+  color: var(--scheme-color-on-surface-variant);
+}
+
 .track-name,
 .singer-name {
   white-space: nowrap;

diff --git a/src/components/Sing/SingEditor.vue b/src/components/Sing/SingEditor.vue
@@ -22,10 +22,13 @@
     <QSplitter
       :modelValue="isSidebarOpen ? sidebarWidth : 0"
       unit="px"
-      class="full-width"
+      class="full-width sing-tracks-splitter"
       :limits="[200, 300]"
       :disable="!isSidebarOpen"
-      :separatorStyle="{ display: isSidebarOpen ? 'block' : 'none' }"
+      :separatorStyle="{
+        display: isSidebarOpen ? 'block' : 'none',
+        backgroundColor: 'transparent',
+      }"
       emitImmediately
       @update:modelValue="setSidebarWidth"
     >

diff --git a/src/components/Sing/ToolBar/EditTargetSwicher.vue b/src/components/Sing/ToolBar/EditTargetSwicher.vue
@@ -71,7 +71,7 @@ const handleKeyDown = (event: KeyboardEvent) => {
   border-radius: 18px !important;
 
   &.active {
-    background: var(--scheme-color-surface-container-highest);
+    background: var(--scheme-color-secondary-container);
     color: var(--scheme-color-primary);
   }
 }