fix: updated settings colours to match work hud

ui/src/App.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, onMounted, onBeforeUnmount } from 'vue';
-import TheWorkView from './components/WorkView.vue';
+import TheWorkView from './components/TheWorkView.vue';
 import TheSettings from './components/TheSettings.vue';
 import TheOctocat from './components/TheOctocat.vue';
 import TheNotification from './components/TheNotification.vue';

ui/src/assets/main.css

@@ -18,7 +18,10 @@
 
 .tag {
  width: 40px;
- /* background-color: rgba(var(--secondary-color),0.7) !important; */
+}
+.bg-accent {
+ background-color: rgba(var(--accent-color),0.9) !important;
+ color:#fff !important;
 }
 .pointer {
  cursor: pointer;
@@ -68,7 +71,7 @@ input[type='number'] {
 }
 
 .checkbox input:checked + label {
- background: #55da8c;
+ background: rgb(var(--accent-color));
 }
 
 .checkbox input:checked + label:after {

ui/src/components/SettingSlider.vue

@@ -39,6 +39,9 @@ watch(
  :min="setting.component.min"
  :max="setting.component.max"
  :step="setting.component.step"
+ :style="{
+ backgroundSize: `${((setting.value - setting.component.min) / (setting.component.max - setting.component.min)) * 100}% 100%`,
+ }"
  @mouseup="updateSetting(name, setting.value)"
  @touchend="updateSetting(name, setting.value)"
  @blur="updateSetting(name, setting.value)"
@@ -57,8 +60,50 @@ watch(
  v-model="localValue"
  />
  </div>
- <div v-show="!isRawValueVisible" class="tag is-info" @click="() => (isRawValueVisible = !isRawValueVisible)">
+ <div v-show="!isRawValueVisible" class="tag bg-accent" @click="() => (isRawValueVisible = !isRawValueVisible)">
  {{ (setting.component.display && setting.component.display(setting.value)) || setting.value }}
  </div>
  </div>
 </template>
+<style scoped>
+input[type="range"] {
+ -webkit-appearance: none;
+ margin-top: 0.5rem;
+ height: 0.5rem;
+ background: rgba(255, 255, 255, 0.6);
+ border-radius: 5px;
+ background-color:#ddd;
+ background-image: linear-gradient(rgba(var(--secondary-color),1), rgba(var(--secondary-color),1));
+ background-repeat: no-repeat;
+}
+input[type="range"]::-webkit-slider-thumb
+{
+ -webkit-appearance: none;
+ height: 18px;
+ width: 18px;
+ border:none;
+ border-radius: 50%;
+ background: rgb(var(--accent-color));
+ cursor: ew-resize;
+ box-shadow: 0 0 2px 0 #555;
+ transition: background .3s ease-in-out;
+}
+input[type="range"]::-moz-range-thumb
+ {
+ height: 18px;
+ width: 18px;
+ border:none;
+ border-radius: 50%;
+ background: rgb(var(--accent-color));
+ cursor: ew-resize;
+ box-shadow: 0 0 2px 0 #555;
+ transition: background .3s ease-in-out;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+ -webkit-appearance: none;
+ box-shadow: none;
+ border: none;
+ background: transparent;
+}
+</style>

ui/src/components/TheOctocat.vue

@@ -37,8 +37,8 @@ defineProps(['version']);
  top: 27px;
  right: 23px;
  padding: 0.5rem;
- color: #aaa;
- font-size: 0.8rem;
+ color: #999;
+ font-size: 0.85rem;
  font-weight: bold;
  z-index: 100;
  transform: rotate(45deg);

ui/src/components/TheSettings.vue

@@ -138,7 +138,7 @@ for (const group of groups.value) {
  margin-bottom: 0.5rem;
 }
 .settings-header {
- background: #eef5ff;
+ background-color: rgba(var(--secondary-color),0.1);
 }
 .no-shadow {
  box-shadow: none;