Update:Light theme colors for track progress bar and ereader settings #…

…916
advplyr · Dec 13, 2023 · 19d6c84 · 19d6c84
1 parent d9f4ed3
commit 19d6c84
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 80 deletions.
diff --git a/assets/tailwind.css b/assets/tailwind.css
@@ -12,6 +12,11 @@
     --color-primary: 35 35 35;
     --color-secondary: 47 48 48;
     --color-border: 75 85 89;
+    --color-bg-toggle: 56 56 56;
+    --color-bg-toggle-selected: 81 82 84;
+    --color-track-cursor: 229 231 235;
+    --color-track: 107 114 128;
+    --color-track-buffered: 75 85 99;
     --gradient-item-page: linear-gradient(169deg, rgba(0, 0, 0, 0.4) 0%, rgba(55, 56, 56, 1) 80%);
     --gradient-audio-player: linear-gradient(169deg, rgba(0, 0, 0, 0) 0%, rgba(38, 38, 38, 1) 80%);
     --gradient-minimized-audio-player: linear-gradient(145deg, rgba(38, 38, 38, 0.5) 0%, rgba(38, 38, 38, 0.9) 20%, rgb(38, 38, 38) 60%);
@@ -26,6 +31,11 @@
     --color-primary: 222 222 222;
     --color-secondary: 246 248 250;
     --color-border: 189 191 191;
+    --color-bg-toggle: 222 222 222;
+    --color-bg-toggle-selected: 255 255 255;
+    --color-track-cursor: 101 109 118;
+    --color-track: 189 191 191;
+    --color-track-buffered: 129 131 131;
     --gradient-item-page: linear-gradient(169deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 1) 80%);
     --gradient-audio-player: linear-gradient(169deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 1) 80%);
     --gradient-minimized-audio-player: linear-gradient(145deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.9) 20%, rgb(255, 255, 255) 60%);

diff --git a/components/app/AudioPlayer.vue b/components/app/AudioPlayer.vue
@@ -22,10 +22,10 @@
         <p class="font-mono text-fg" style="font-size: 0.8rem">{{ totalTimeRemainingPretty }}</p>
       </div>
       <div class="w-full">
-        <div class="h-1 w-full bg-gray-500 bg-opacity-50 relative rounded-full">
-          <div ref="totalReadyTrack" class="h-full bg-gray-600 absolute top-0 left-0 pointer-events-none rounded-full" />
-          <div ref="totalBufferedTrack" class="h-full bg-gray-500 absolute top-0 left-0 pointer-events-none rounded-full" />
-          <div ref="totalPlayedTrack" class="h-full bg-gray-200 absolute top-0 left-0 pointer-events-none rounded-full" />
+        <div class="h-1 w-full bg-track/50 relative rounded-full">
+          <div ref="totalReadyTrack" class="h-full bg-track-buffered absolute top-0 left-0 pointer-events-none rounded-full" />
+          <div ref="totalBufferedTrack" class="h-full bg-track absolute top-0 left-0 pointer-events-none rounded-full" />
+          <div ref="totalPlayedTrack" class="h-full bg-track-cursor absolute top-0 left-0 pointer-events-none rounded-full" />
         </div>
       </div>
     </div>
@@ -86,12 +86,12 @@
           <div class="flex-grow" />
           <p class="font-mono text-fg" style="font-size: 0.8rem">{{ timeRemainingPretty }}</p>
         </div>
-        <div ref="track" class="h-1.5 w-full bg-gray-500 bg-opacity-50 relative rounded-full" :class="{ 'animate-pulse': isLoading }" @click.stop>
-          <div ref="readyTrack" class="h-full bg-gray-600 absolute top-0 left-0 rounded-full pointer-events-none" />
-          <div ref="bufferedTrack" class="h-full bg-gray-500 absolute top-0 left-0 rounded-full pointer-events-none" />
-          <div ref="playedTrack" class="h-full bg-gray-200 absolute top-0 left-0 rounded-full pointer-events-none" />
+        <div ref="track" class="h-1.5 w-full bg-track/50 relative rounded-full" :class="{ 'animate-pulse': isLoading }" @click.stop>
+          <div ref="readyTrack" class="h-full bg-track-buffered absolute top-0 left-0 rounded-full pointer-events-none" />
+          <div ref="bufferedTrack" class="h-full bg-track absolute top-0 left-0 rounded-full pointer-events-none" />
+          <div ref="playedTrack" class="h-full bg-track-cursor absolute top-0 left-0 rounded-full pointer-events-none" />
           <div ref="trackCursor" class="h-7 w-7 rounded-full absolute pointer-events-auto flex items-center justify-center" :style="{ top: '-11px' }" :class="{ 'opacity-0': lockUi || !showFullscreen }" @touchstart="touchstartCursor">
-            <div class="bg-gray-200 rounded-full w-3.5 h-3.5 pointer-events-none" />
+            <div class="bg-track-cursor rounded-full w-3.5 h-3.5 pointer-events-none" />
           </div>
         </div>
       </div>

diff --git a/components/readers/ComicReader.vue b/components/readers/ComicReader.vue
@@ -2,7 +2,7 @@
   <div id="comic-reader" class="w-full h-full relative">
     <modals-modal v-model="showInfoMenu" height="90%">
       <div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click.stop="showInfoMenu = false">
-        <div class="w-full overflow-x-hidden overflow-y-auto bg-secondary rounded-lg border border-white border-opacity-20" style="max-height: 75%" @click.stop>
+        <div class="w-full overflow-x-hidden overflow-y-auto bg-bg rounded-lg border border-border text-fg" style="max-height: 75%" @click.stop>
           <div v-for="key in comicMetadataKeys" :key="key" class="w-full px-2 py-1">
             <p class="text-xs">
               <strong>{{ key }}</strong>
@@ -23,7 +23,7 @@
       </div>
     </div>
 
-    <div class="fixed left-0 h-8 w-full bg-primary px-4 flex items-center text-white/80" :style="{ bottom: isPlayerOpen ? '120px' : '0px' }">
+    <div class="fixed left-0 h-8 w-full bg-bg px-4 flex items-center text-fg-muted" :style="{ bottom: isPlayerOpen ? '120px' : '0px' }">
       <div class="flex-grow" />
       <p class="text-xs">{{ page }} / {{ numPages }}</p>
     </div>

diff --git a/components/readers/EpubReader.vue b/components/readers/EpubReader.vue
@@ -2,7 +2,7 @@
   <div id="epub-frame" class="w-full">
     <div id="viewer" class="h-full w-full"></div>
 
-    <div class="fixed left-0 h-8 w-full px-4 flex items-center" :class="isLightTheme ? 'bg-white text-black' : 'bg-primary text-white/80'" :style="{ bottom: isPlayerOpen ? '120px' : '0px' }">
+    <div class="fixed left-0 h-8 w-full px-4 flex items-center" :class="isLightTheme ? 'bg-white text-black' : 'bg-[#232323] text-white/80'" :style="{ bottom: isPlayerOpen ? '120px' : '0px' }">
       <p v-if="totalLocations" class="text-xs text-slate-600">Location {{ currentLocationNum }} of {{ totalLocations }}</p>
       <div class="flex-grow" />
       <p class="text-xs">{{ progress }}%</p>

diff --git a/components/readers/PdfReader.vue b/components/readers/PdfReader.vue
@@ -18,7 +18,7 @@
       </div>
     </div>
 
-    <div class="fixed left-0 h-8 w-full bg-primary px-4 flex items-center text-white/80" :style="{ bottom: isPlayerOpen ? '120px' : '0px' }">
+    <div class="fixed left-0 h-8 w-full bg-bg px-4 flex items-center text-fg-muted" :style="{ bottom: isPlayerOpen ? '120px' : '0px' }">
       <div class="flex-grow" />
       <p class="text-xs">{{ page }} / {{ numPages }}</p>
     </div>

diff --git a/components/readers/Reader.vue b/components/readers/Reader.vue
@@ -1,20 +1,20 @@
 <template>
-  <div v-if="show" :data-theme="ereaderTheme" class="group fixed top-0 left-0 right-0 layout-wrapper w-full z-40 pt-8 data-[theme=dark]:bg-primary data-[theme=dark]:text-white data-[theme=light]:bg-white data-[theme=light]:text-black" :class="{ 'reader-player-open': isPlayerOpen }">
+  <div v-if="show" :data-theme="ereaderTheme" class="group fixed top-0 left-0 right-0 layout-wrapper w-full z-40 pt-8 data-[theme=dark]:bg-[#232323] data-[theme=dark]:text-white data-[theme=light]:bg-white data-[theme=light]:text-black" :class="{ 'reader-player-open': isPlayerOpen }">
     <!-- toolbar -->
-    <div class="h-32 pt-10 w-full px-2 fixed top-0 left-0 z-30 transition-transform bg-bg text-white" :class="showingToolbar ? 'translate-y-0' : '-translate-y-32'" @touchstart.stop @mousedown.stop @touchend.stop @mouseup.stop>
+    <div class="h-32 pt-10 w-full px-2 fixed top-0 left-0 z-30 transition-transform bg-bg text-fg" :class="showingToolbar ? 'translate-y-0' : '-translate-y-32'" :style="{ boxShadow: showingToolbar ? '0px 8px 8px #11111155' : '' }" @touchstart.stop @mousedown.stop @touchend.stop @mouseup.stop>
       <div class="flex items-center mb-2">
         <button type="button" class="inline-flex mx-2" @click.stop="show = false">
-          <span class="material-icons-outlined text-3xl text-white">chevron_left</span>
+          <span class="material-icons-outlined text-3xl text-fg">chevron_left</span>
         </button>
         <div class="flex-grow" />
         <button v-if="isComic || isEpub" type="button" class="inline-flex mx-2" @click.stop="clickTOCBtn">
-          <span class="material-icons-outlined text-2xl text-white">format_list_bulleted</span>
+          <span class="material-icons-outlined text-2xl text-fg">format_list_bulleted</span>
         </button>
         <button v-if="isEpub" type="button" class="inline-flex mx-2" @click.stop="clickSettingsBtn">
-          <span class="material-icons text-2xl text-white">settings</span>
+          <span class="material-icons text-2xl text-fg">settings</span>
         </button>
         <button v-if="comicHasMetadata" type="button" class="inline-flex mx-2" @click.stop="clickMetadataBtn">
-          <span class="material-icons text-2xl text-white">more</span>
+          <span class="material-icons text-2xl text-fg">more</span>
         </button>
       </div>
 
@@ -55,31 +55,33 @@
 
     <!-- ereader settings modal -->
     <modals-fullscreen-modal v-model="showSettingsModal" :theme="ereaderTheme" half-screen>
-      <div class="flex items-end justify-between h-20 px-4 pb-2 mb-8">
-        <h1 class="text-lg">{{ $strings.HeaderEreaderSettings }}</h1>
-        <button class="flex" @click="showSettingsModal = false">
-          <span class="material-icons">close</span>
-        </button>
-      </div>
-      <div class="w-full overflow-y-auto overflow-x-hidden h-full max-h-[calc(100vh-85px)]">
-        <div class="w-full h-full px-4">
-          <div class="flex items-center mb-8">
-            <div class="w-32">
-              <p class="text-base">{{ $strings.LabelTheme }}:</p>
+      <div style="box-shadow: 0px -8px 8px #11111155">
+        <div class="flex items-end justify-between h-20 px-4 pb-2 mb-8">
+          <h1 class="text-lg">{{ $strings.HeaderEreaderSettings }}</h1>
+          <button class="flex" @click="showSettingsModal = false">
+            <span class="material-icons">close</span>
+          </button>
+        </div>
+        <div class="w-full overflow-y-auto overflow-x-hidden h-full max-h-[calc(100vh-85px)]">
+          <div class="w-full h-full px-4">
+            <div class="flex items-center mb-8">
+              <div class="w-32">
+                <p class="text-base">{{ $strings.LabelTheme }}:</p>
+              </div>
+              <ui-toggle-btns v-model="ereaderSettings.theme" :items="themeItems" @input="settingsUpdated" />
             </div>
-            <ui-toggle-btns v-model="ereaderSettings.theme" :items="themeItems" @input="settingsUpdated" />
-          </div>
-          <div class="flex items-center mb-8">
-            <div class="w-32">
-              <p class="text-base">{{ $strings.LabelFontScale }}:</p>
+            <div class="flex items-center mb-8">
+              <div class="w-32">
+                <p class="text-base">{{ $strings.LabelFontScale }}:</p>
+              </div>
+              <ui-range-input v-model="ereaderSettings.fontScale" :min="5" :max="300" :step="5" input-width="180px" @input="settingsUpdated" />
             </div>
-            <ui-range-input v-model="ereaderSettings.fontScale" :min="5" :max="300" :step="5" input-width="180px" @input="settingsUpdated" />
-          </div>
-          <div class="flex items-center mb-8">
-            <div class="w-32">
-              <p class="text-base">{{ $strings.LabelLineSpacing }}:</p>
+            <div class="flex items-center mb-8">
+              <div class="w-32">
+                <p class="text-base">{{ $strings.LabelLineSpacing }}:</p>
+              </div>
+              <ui-range-input v-model="ereaderSettings.lineSpacing" :min="100" :max="300" :step="5" input-width="180px" @input="settingsUpdated" />
             </div>
-            <ui-range-input v-model="ereaderSettings.lineSpacing" :min="100" :max="300" :step="5" input-width="180px" @input="settingsUpdated" />
           </div>
         </div>
       </div>
@@ -150,7 +152,7 @@ export default {
     },
     ereaderTheme() {
       if (this.isEpub) return this.ereaderSettings.theme
-      return 'dark'
+      return document.documentElement.dataset.theme || 'dark'
     },
     themeItems() {
       return [

diff --git a/components/ui/RangeInput.vue b/components/ui/RangeInput.vue
@@ -49,7 +49,7 @@ input[type='range']:focus {
 
 /* chromium */
 input[type='range']::-webkit-slider-runnable-track {
-  background-color: rgb(0 0 0 / 0.25);
+  background-color: rgb(var(--color-track) / 0.5);
   border-radius: 9999px;
   height: 0.75rem;
 }
@@ -58,33 +58,33 @@ input[type='range']::-webkit-slider-thumb {
   appearance: none;
   margin-top: -0.25rem;
   border-radius: 9999px;
-  background-color: rgb(255 255 255 / 0.7);
+  background-color: rgb(var(--color-track-cursor));
   height: 1.25rem;
   width: 1.25rem;
 }
 input[type='range']:focus::-webkit-slider-thumb {
-  border: 1px solid #6b6b6b;
-  outline: 3px solid #6b6b6b;
+  border: 1px solid rgb(var(--color-track));
+  outline: 3px solid rgb(var(--color-track));
   outline-offset: 0.125rem;
 }
 
 /* firefox */
 input[type='range']::-moz-range-track {
-  background-color: rgb(0 0 0 / 0.25);
+  background-color: rgb(var(--color-track) / 0.5);
   border-radius: 9999px;
   height: 0.75rem;
 }
 input[type='range']::-moz-range-thumb {
   border: none;
   border-radius: 9999px;
   margin-top: -0.25rem;
-  background-color: rgb(255 255 255 / 0.7);
+  background-color: rgb(var(--color-track-cursor));
   height: 1.25rem;
   width: 1.25rem;
 }
 input[type='range']:focus::-moz-range-thumb {
-  border: 1px solid #6b6b6b;
-  outline: 3px solid #6b6b6b;
+  border: 1px solid rgb(var(--color-track));
+  outline: 3px solid rgb(var(--color-track));
   outline-offset: 0.125rem;
 }
 </style>
diff --git a/components/ui/ToggleBtns.vue b/components/ui/ToggleBtns.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="inline-flex toggle-btn-wrapper shadow-md">
-    <button v-for="item in items" :key="item.value" type="button" class="toggle-btn outline-none relative border border-gray-600 px-4 py-1" :class="{ selected: item.value === value }" @click.stop="clickBtn(item.value)">
+    <button v-for="item in items" :key="item.value" type="button" class="toggle-btn outline-none relative border border-border px-4 py-1" :class="{ selected: item.value === value }" @click.stop="clickBtn(item.value)">
       {{ item.text }}
     </button>
   </div>
@@ -10,9 +10,6 @@
 export default {
   props: {
     value: String,
-    /**
-     * [{ "text", "", "value": "" }]
-     */
     items: {
       type: Array,
       default: Object
@@ -52,34 +49,12 @@ export default {
 .toggle-btn-wrapper .toggle-btn:not(:first-child) {
   margin-left: -1px;
 }
-
-.toggle-btn::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(255, 255, 255, 0);
-  transition: all 0.1s ease-in-out;
-}
-.toggle-btn:hover:not(:disabled)::before {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-.toggle-btn:hover:not(:disabled) {
-  color: white;
-}
-
 .toggle-btn {
-  color: rgba(255, 255, 255, 0.75);
+  background-color: rgb(var(--color-bg-toggle));
+  color: rgb(var(--color-fg) / 0.5);
 }
 .toggle-btn.selected {
-  color: white;
-}
-.toggle-btn.selected::before {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-button.toggle-btn:disabled::before {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgb(var(--color-bg-toggle-selected));
+  color: rgb(var(--color-fg));
 }
 </style>
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -22,6 +22,11 @@ module.exports = {
         secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
         primary: 'rgb(var(--color-primary) / <alpha-value>)',
         border: 'rgb(var(--color-border) / <alpha-value>)',
+        'bg-toggle': 'rgb(var(--color-bg-toggle) / <alpha-value>)',
+        'bg-toggle-selected': 'rgb(var(--color-bg-toggle-selected) / <alpha-value>)',
+        'track-cursor': 'rgb(var(--color-track-cursor) / <alpha-value>)',
+        'track': 'rgb(var(--color-track) / <alpha-value>)',
+        'track-buffered': 'rgb(var(--color-track-buffered) / <alpha-value>)',
         accent: '#1ad691',
         error: '#FF5252',
         info: '#2196F3',