Improve theming, and make auto theme work with media query.

This commit is contained in:
FireMasterK 2021-12-28 00:04:20 +00:00
parent 13a1f352d8
commit 77010ccac4
No known key found for this signature in database
GPG key ID: 49451E4482CC5BCD
6 changed files with 67 additions and 39 deletions

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="w-full min-h-screen h-full px-1vw reset" :class="{ dark: darkMode }"> <div class="w-full min-h-screen h-full px-1vw reset" :class="[theme]">
<Navigation /> <Navigation />
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<keep-alive :max="5"> <keep-alive :max="5">
@ -132,33 +132,65 @@ b {
@apply text-white bg-dark-900; @apply text-white bg-dark-900;
} }
.input,
.select,
.btn {
@apply w-auto h-full text-gray-600 bg-gray-300;
}
.dark .input, .dark .input,
.dark .select, .dark .select,
.dark .btn { .dark .btn {
@apply text-gray-400 bg-dark-400 w-auto h-full; @apply text-gray-400 bg-dark-400;
}
.auto .input,
.auto .select,
.auto .btn {
@apply dark:(text-gray-400 bg-dark-400);
} }
.input { .input {
@apply pl-2.5; @apply pl-2.5;
} }
hr {
@apply !mt-2 !mb-3 border-gray-300;
}
.dark hr { .dark hr {
@apply border-dark-100; @apply border-dark-100;
} }
.auto hr {
@apply dark:border-dark-100;
}
h1 { h1 {
@apply m-0 !text-5xl font-bold; @apply m-0 !text-5xl font-bold;
} }
hr {
@apply !mt-2 !mb-3;
}
.link { .link {
@apply hover:(text-dark-300 underline underline-dark-300); @apply hover:(text-dark-300 underline underline-dark-300);
} }
.link-secondary {
@apply hover:(text-dark-400 underline underline-dark-400);
}
.dark .link { .dark .link {
@apply hover:(text-gray-300 underline underline-gray-300); @apply hover:(text-gray-300 underline underline-gray-300);
} }
.auto .link {
@apply dark:hover:(text-gray-300 underline underline-gray-300);
}
.dark .link-secondary {
@apply text-gray-300 hover:(text-gray-400 underline underline-gray-400);
}
.auto .link-secondary {
@apply dark:(text-gray-300 hover:(text-gray-400 underline underline-gray-400));
}
</style> </style>

View file

@ -117,5 +117,3 @@ export default {
}, },
}; };
</script> </script>
<style></style>

View file

@ -34,7 +34,7 @@
<div v-for="result in results.items" :key="result.url"> <div v-for="result in results.items" :key="result.url">
<VideoItem v-if="shouldUseVideoItem(result)" :video="result" height="94" width="168" /> <VideoItem v-if="shouldUseVideoItem(result)" :video="result" height="94" width="168" />
<div v-if="!shouldUseVideoItem(result)" class="uk-text-secondary"> <div v-if="!shouldUseVideoItem(result)" class="uk-text-secondary">
<router-link class="uk-text-emphasis" :to="result.url"> <router-link :to="result.url">
<div class="relative"> <div class="relative">
<img style="width: 100%" :src="result.thumbnail" loading="lazy" /> <img style="width: 100%" :src="result.thumbnail" loading="lazy" />
</div> </div>

View file

@ -1,11 +1,11 @@
<template> <template>
<div class="absolute suggestions-container" :style="[{ background: secondaryBackgroundColor }]"> <div class="absolute suggestions-container">
<ul> <ul>
<li <li
v-for="(suggestion, i) in searchSuggestions" v-for="(suggestion, i) in searchSuggestions"
:key="i" :key="i"
:style="[selected === i ? { background: secondaryForegroundColor } : {}]"
class="suggestion" class="suggestion"
:class="{ 'suggestion-selected': selected === i }"
@mouseover="onMouseOver(i)" @mouseover="onMouseOver(i)"
@mousedown.stop="onClick(i)" @mousedown.stop="onClick(i)"
> >
@ -76,7 +76,27 @@ export default {
<style> <style>
.suggestions-container { .suggestions-container {
@apply left-1/2 translate-x-[-50%] transform-gpu max-w-3xl w-full box-border p-y-1.25 z-10 <md:max-w-[calc(100%-0.5rem)]; @apply left-1/2 translate-x-[-50%] transform-gpu max-w-3xl w-full box-border p-y-1.25 z-10 <md:max-w-[calc(100%-0.5rem)] bg-gray-300;
}
.dark .suggestions-container {
@apply bg-dark-400;
}
.auto .suggestions-container {
@apply dark:bg-dark-400;
}
.suggestion-selected {
@apply bg-gray-200;
}
.dark .suggestion-selected {
@apply bg-dark-100;
}
.auto .suggestion-selected {
@apply dark:bg-dark-100;
} }
.suggestion { .suggestion {

View file

@ -1,6 +1,6 @@
<template> <template>
<div class="uk-text-secondary"> <div>
<router-link class="uk-text-emphasis" :to="video.url"> <router-link :to="video.url">
<img :height="height" :width="width" class="w-full" :src="video.thumbnail" alt="" loading="lazy" /> <img :height="height" :width="width" class="w-full" :src="video.thumbnail" alt="" loading="lazy" />
<div class="relative text-sm"> <div class="relative text-sm">
<span v-if="video.duration" class="thumbnail-overlay bottom-5px right-5px" style="padding: 0 5px">{{ <span v-if="video.duration" class="thumbnail-overlay bottom-5px right-5px" style="padding: 0 5px">{{
@ -37,7 +37,7 @@
</div> </div>
<div class="flex" style="flex-flow: row"> <div class="flex" style="flex-flow: row">
<router-link class="uk-link-muted" :to="video.uploaderUrl"> <router-link :to="video.uploaderUrl">
<img <img
v-if="video.uploaderAvatar" v-if="video.uploaderAvatar"
:src="video.uploaderAvatar" :src="video.uploaderAvatar"
@ -52,7 +52,7 @@
<div class="w-[calc(100%-32px-1rem)]"> <div class="w-[calc(100%-32px-1rem)]">
<router-link <router-link
v-if="video.uploaderUrl && video.uploaderName && !hideChannel" v-if="video.uploaderUrl && video.uploaderName && !hideChannel"
class="uk-link-muted overflow-hidden block" class="link-secondary overflow-hidden block"
:to="video.uploaderUrl" :to="video.uploaderUrl"
:title="video.uploaderName" :title="video.uploaderName"
> >

View file

@ -148,13 +148,6 @@ const mixin = {
apiUrl() { apiUrl() {
return this.getPreferenceString("instance", "https://pipedapi.kavin.rocks"); return this.getPreferenceString("instance", "https://pipedapi.kavin.rocks");
}, },
getEffectiveTheme() {
var theme = this.getPreferenceString("theme", "dark");
if (theme === "auto")
theme =
window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
return theme;
},
getAuthToken() { getAuthToken() {
return this.getPreferenceString("authToken" + this.hashCode(this.apiUrl())); return this.getPreferenceString("authToken" + this.hashCode(this.apiUrl()));
}, },
@ -191,22 +184,7 @@ const mixin = {
}, },
computed: { computed: {
theme() { theme() {
return this.getEffectiveTheme(); return this.getPreferenceString("theme", "dark");
},
backgroundColor() {
return this.getEffectiveTheme() === "light" ? "#fff" : "#0b0e0f";
},
secondaryBackgroundColor() {
return this.getEffectiveTheme() === "light" ? "#e5e5e5" : "#242727";
},
foregroundColor() {
return this.getEffectiveTheme() === "light" ? "#15191a" : "#0b0e0f";
},
secondaryForegroundColor() {
return this.getEffectiveTheme() === "light" ? "#666" : "#393d3d";
},
darkMode() {
return this.getEffectiveTheme() !== "light";
}, },
authenticated(_this) { authenticated(_this) {
return _this.getAuthToken() !== undefined; return _this.getAuthToken() !== undefined;