Implement theming in a better manner.

This commit is contained in:
FireMasterK 2021-12-27 14:46:34 +00:00
parent d9283b2762
commit 43e69ff284
No known key found for this signature in database
GPG key ID: 49451E4482CC5BCD
9 changed files with 17 additions and 19 deletions

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html style="background: #0b0e0f" lang="en">
<html style="background: #0F0F0F" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

View file

@ -1,5 +1,5 @@
<template>
<div class="w-full" :style="[{ background: backgroundColor, colour: foregroundColor }]" :class="{ dark: darkMode }">
<div class="w-full min-h-screen h-full" :class="{ dark: darkMode, reset: !darkMode }">
<Navigation />
<router-view v-slot="{ Component }">
<keep-alive :max="5">
@ -120,8 +120,12 @@ b {
@apply py-2 px-4 rounded;
}
.reset {
@apply text-black bg-white;
}
.dark {
@apply text-white bg-dark-800 bg-opacity-70;
@apply text-white bg-dark-900;
}
.dark .input,
@ -147,6 +151,10 @@ hr {
}
.link {
@apply hover:(text-dark-300 underline underline-dark-300);
}
.dark .link {
@apply hover:(text-gray-300 underline underline-gray-300);
}
</style>

View file

@ -54,7 +54,6 @@
v-for="reply in replies"
:key="reply.commentId"
class="uk-tile-default uk-align-left uk-width-expand"
:style="[{ background: backgroundColor }]"
>
<Comment :comment="reply" :uploader="uploader" :video-id="videoId" />
</div>

View file

@ -22,7 +22,7 @@
<hr />
<div class="video-grid">
<div v-for="video in videos" :key="video.url" :style="[{ background: backgroundColor }]">
<div v-for="video in videos" :key="video.url">
<VideoItem :video="video" />
</div>
</div>

View file

@ -18,7 +18,7 @@
<hr />
<div class="video-grid">
<div v-for="video in videos" :key="video.url" :style="[{ background: backgroundColor }]">
<div v-for="video in videos" :key="video.url">
<VideoItem :video="video" />
</div>
</div>

View file

@ -1,10 +1,7 @@
<template>
<nav class="grid grid-cols-3 px-2 sm:px-4 py-2.5 w-full relative">
<div>
<router-link
class="flex font-bold text-3xl items-center font-sans font-bold"
:style="[{ colour: foregroundColor }]"
to="/"
<router-link class="flex font-bold text-3xl items-center font-sans font-bold" to="/"
><img
alt="logo"
src="/img/icons/logo.svg"

View file

@ -31,7 +31,7 @@
</div>
<div v-if="results" class="video-grid">
<div v-for="result in results.items" :key="result.url" :style="[{ background: backgroundColor }]">
<div v-for="result in results.items" :key="result.url">
<VideoItem v-if="shouldUseVideoItem(result)" :video="result" height="94" width="168" />
<div v-if="!shouldUseVideoItem(result)" class="uk-text-secondary">
<router-link class="uk-text-emphasis" :to="result.url">

View file

@ -4,7 +4,7 @@
<hr />
<div class="video-grid">
<div v-for="video in videos" :key="video.url" :style="[{ background: backgroundColor }]">
<div v-for="video in videos" :key="video.url">
<VideoItem :video="video" height="118" width="210" />
</div>
</div>

View file

@ -85,12 +85,7 @@
{{ showDesc ? $t("actions.minimize_description") : $t("actions.show_description") }}
</button>
<!-- eslint-disable-next-line vue/no-v-html -->
<p
v-show="showDesc"
class="break-words"
:style="[{ colour: foregroundColor }]"
v-html="purifyHTML(video.description)"
></p>
<p v-show="showDesc" class="break-words" v-html="purifyHTML(video.description)"></p>
<div v-if="showDesc && sponsors && sponsors.segments">
{{ $t("video.sponsor_segments") }}: {{ sponsors.segments.length }}
</div>
@ -142,7 +137,6 @@
v-show="showRecs || !smallView"
:key="related.url"
class="uk-tile-default w-auto"
:style="[{ background: backgroundColor }]"
>
<VideoItem :video="related" height="94" width="168" />
</div>