Light theme updates

components/covers/CollectionCover.vue

@@ -15,7 +15,7 @@
     <div v-else class="relative w-full h-full flex items-center justify-center p-2 bg-primary rounded-sm">
       <div class="absolute top-0 left-0 w-full h-full bg-gray-400 bg-opacity-5" />
 
-      <p class="text-white text-opacity-60 text-center" :style="{ fontSize: Math.min(1, sizeMultiplier) + 'rem' }">Empty Collection</p>
+      <p class="text-fg-muted text-center" :style="{ fontSize: Math.min(1, sizeMultiplier) + 'rem' }">Empty Collection</p>
     </div>
   </div>
 </template>

components/ui/TextInput.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="relative">
-    <input v-model="input" ref="input" autofocus :type="type" :disabled="disabled" :readonly="readonly" autocorrect="off" autocapitalize="none" autocomplete="off" :placeholder="placeholder" class="py-2 w-full outline-none bg-primary" :class="inputClass" @keyup="keyup" />
+    <input v-model="input" ref="input" autofocus :type="type" :disabled="disabled" :readonly="readonly" autocorrect="off" autocapitalize="none" autocomplete="off" :placeholder="placeholder" class="py-2 w-full outline-none bg-primary disabled:text-fg-muted" :class="inputClass" @keyup="keyup" />
     <div v-if="prependIcon" class="absolute top-0 left-0 h-full px-2 flex items-center justify-center">
       <span class="material-icons text-lg">{{ prependIcon }}</span>
     </div>

components/ui/Tooltip.vue

@@ -1,92 +0,0 @@
-<template>
-  <div ref="box" class="inline-block" @click.stop="click">
-    <slot />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    text: {
-      type: [String, Number],
-      required: true
-    },
-    direction: {
-      type: String,
-      default: 'right'
-    },
-    disabled: Boolean
-  },
-  data() {
-    return {
-      tooltip: null,
-      tooltipTextEl: null,
-      tooltipId: null,
-      isShowing: false,
-      hideTimeout: null
-    }
-  },
-  watch: {
-    text() {
-      this.updateText()
-    },
-    disabled(newVal) {
-      if (newVal && this.isShowing) {
-        this.hideTooltip()
-      }
-    }
-  },
-  methods: {
-    updateText() {
-      if (this.tooltipTextEl) {
-        this.tooltipTextEl.innerHTML = this.text
-      }
-    },
-    createTooltip() {
-      if (!this.$refs.box) return
-      const tooltip = document.createElement('div')
-      this.tooltipId = String(Math.floor(Math.random() * 10000))
-      tooltip.id = this.tooltipId
-      tooltip.className = 'fixed inset-0 w-screen h-screen bg-black/25 text-xs flex items-center justify-center p-2'
-      tooltip.style.zIndex = 100
-      tooltip.style.backgroundColor = 'rgba(0,0,0,0.85)'
-
-      tooltip.addEventListener('click', this.hideTooltip)
-
-      const innerDiv = document.createElement('div')
-      innerDiv.className = 'w-full p-2 border border-white/20 pointer-events-none text-white bg-primary'
-      innerDiv.innerHTML = this.text
-      tooltip.appendChild(innerDiv)
-
-      this.tooltipTextEl = innerDiv
-      this.tooltip = tooltip
-    },
-    showTooltip() {
-      if (this.disabled) return
-      if (!this.tooltip) {
-        this.createTooltip()
-        if (!this.tooltip) return
-      }
-      if (!this.$refs.box) return // Ensure element is not destroyed
-      try {
-        document.body.appendChild(this.tooltip)
-      } catch (error) {
-        console.error(error)
-      }
-
-      this.isShowing = true
-    },
-    hideTooltip() {
-      if (!this.tooltip) return
-      this.tooltip.remove()
-      this.isShowing = false
-    },
-    click() {
-      if (!this.isShowing) this.showTooltip()
-    }
-  },
-  beforeDestroy() {
-    this.hideTooltip()
-  }
-}
-</script>

components/widgets/CircleProgress.vue

@@ -5,10 +5,6 @@
       <circle cx="20" cy="20" r="17.5" class="progressbar__svg-circlebg"></circle>
     </svg>
     <p class="progressbar__text text-sm text-warning">{{ count }}</p>
-    <!-- <span class="material-icons progressbar__text text-xl">arrow_downward</span> -->
-    <!-- <div class="w-4 h-4 rounded-full bg-red-600 absolute bottom-1 right-1 flex items-center justify-center transform rotate-90">
-      <p class="text-xs text-white">4</p>
-    </div> -->
   </div>
 </template>
 

pages/downloads.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full h-full py-6 px-4 overflow-y-auto">
-    <p class="mb-2 text-base text-white">{{ $strings.HeaderDownloads }} ({{ localLibraryItems.length }})</p>
+    <p class="mb-2 text-base text-fg">{{ $strings.HeaderDownloads }} ({{ localLibraryItems.length }})</p>
 
     <div class="w-full">
       <template v-for="(mediaItem, num) in localLibraryItems">
@@ -11,15 +11,15 @@
             </div>
             <div class="px-2 flex-grow">
               <p class="text-sm">{{ mediaItem.media.metadata.title }}</p>
-              <p v-if="mediaItem.mediaType == 'book'" class="text-xs text-gray-300">{{ mediaItem.media.tracks.length }} {{ $strings.LabelTracks }}</p>
+              <p v-if="mediaItem.mediaType == 'book'" class="text-xs text-fg-muted">{{ mediaItem.media.tracks.length }} {{ $strings.LabelTracks }}</p>
-              <p v-else-if="mediaItem.mediaType == 'podcast'" class="text-xs text-gray-300">{{ mediaItem.media.episodes.length }} {{ $strings.HeaderEpisodes }}</p>
+              <p v-else-if="mediaItem.mediaType == 'podcast'" class="text-xs text-fg-muted">{{ mediaItem.media.episodes.length }} {{ $strings.HeaderEpisodes }}</p>
-              <p v-if="mediaItem.size" class="text-xs text-gray-300">{{ $bytesPretty(mediaItem.size) }}</p>
+              <p v-if="mediaItem.size" class="text-xs text-fg-muted">{{ $bytesPretty(mediaItem.size) }}</p>
             </div>
             <div class="w-12 h-12 flex items-center justify-center">
-              <span class="material-icons text-2xl text-gray-400">chevron_right</span>
+              <span class="material-icons text-2xl text-fg-muted">chevron_right</span>
             </div>
           </nuxt-link>
-          <div v-if="num + 1 < localLibraryItems.length" class="flex border-t border-white border-opacity-10 my-3" />
+          <div v-if="num + 1 < localLibraryItems.length" class="flex border-t border-fg/10 my-3" />
         </div>
       </template>
     </div>