mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-08-14 23:57:27 +00:00
Implement theming in a better manner.
This commit is contained in:
parent
d9283b2762
commit
43e69ff284
9 changed files with 17 additions and 19 deletions
|
@ -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" />
|
||||
|
|
12
src/App.vue
12
src/App.vue
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue