ngn/safetwitch
1
0
Fork 0
Code Issues 1 Pull Requests 10 Actions Packages Activity

Better theme support

Browse Source
This commit is contained in:
dragongoose
2023-09-25 17:25:42 -04:00
parent 4d2ff16a79
commit bad5529d84
24 changed files with 135 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/CategoryPreview.vue
View File

@ -31,16 +31,16 @@ export default {
<div class="p-2">
<div>
<p class="font-bold text-white text-xl sm:text-base md:text-xl">
<p class="font-bold text-contrast text-xl sm:text-base md:text-xl">
{{ category.displayName }}
</p>
<p class="text-sm text-white">{{ abbreviate(category.viewers) }} viewers</p>
<p class="text-sm text-contrast">{{ abbreviate(category.viewers) }} viewers</p>
</div>
<ul class="h-8 overflow-hidden">
<li v-for="tag in category.tags" :key="tag" class="inline-flex">
<span
class="p-2.5 py-1.5 bg-surface0 rounded-md m-0.5 text-xs font-bold text-white"
class="p-2.5 py-1.5 bg-surface0 rounded-md m-0.5 text-xs font-bold text-contrast"
>{{ tag }}</span
>
</li>

6
src/components/ChannelPreview.vue
View File

@ -20,10 +20,10 @@ export default {
<img :src="channelData.pfp" class="rounded-full w-20" />
<div>
<div class="inline-flex w-full justify-between">
<h1 class="text-white text-3xl font-bold">{{ channelData.username }}</h1>
<p class="text-white float-right ml-5">{{ channelData.followers }} followers</p>
<h1 class="text-contrast text-3xl font-bold">{{ channelData.username }}</h1>
<p class="text-contrast float-right ml-5">{{ channelData.followers }} followers</p>
</div>
<p class="text-white overflow-y-hidden overflow-ellipsis max-h-12">
<p class="text-contrast overflow-y-hidden overflow-ellipsis max-h-12">
{{ channelData.about }}
</p>
</div>

2
src/components/ErrorMessage.vue
View File

@ -4,7 +4,7 @@ export default {}
<template>
<div
class="flex flex-col max-w-prose justify-center text-center mx-auto p-6 bg-crust rounded-lg text-white"
class="flex flex-col max-w-prose justify-center text-center mx-auto p-6 bg-crust rounded-lg text-contrast"
>
<div class="mb-6">
<h1 class="font-bold text-5xl">{{ $t('error.oops') }}</h1>

2
src/components/FollowButton.vue
View File

@ -56,7 +56,7 @@ export default {
<button
ref="followButton"
@click="followStreamer"
class="text-white text-sm font-bold p-2 py-1 rounded-md bg-purple"
class="text-contrast text-sm font-bold p-2 py-1 rounded-md bg-purple"
>
<v-icon name="bi-heart-fill" scale="0.85"></v-icon>
<span v-if="isFollowing"> {{ $t('streamer.unfollow') }} </span>

2
src/components/FooterView.vue
View File

@ -10,6 +10,6 @@ export default {
<template>
<div class="m-2 mt-5 flex justify-center">
<p class="text-white font-bold">SafeTwitch {{ version}}</p>
<p class="text-contrast font-bold">SafeTwitch {{ version}}</p>
</div>
</template>

2
src/components/LoadingScreen.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="flex mx-auto justify-center bg-crust rounded-lg w-2/3 p-2 text-white">
<div class="flex mx-auto justify-center bg-crust rounded-lg w-2/3 p-2 text-contrast">
<div class="flex space-x-3">
<h1 class="text-4xl font-bold">{{ $t('main.searching') }}</h1>
<v-icon name="fa-circle-notch" class="animate-spin w-10 h-10"></v-icon>

6
src/components/NavbarView.vue
View File

@ -26,14 +26,14 @@ export default {
<template>
<nav class="flex items-center justify-between flex-wrap p-4">
<div class="flex items-center flex-no-shrink text-white mr-6">
<div class="flex items-center flex-no-shrink text-contrast mr-6">
<router-link to="/">
<h1 class="font-bold text-2xl">Safe<color class="text-purple">Twitch</color></h1>
</router-link>
</div>
<search-bar class="mt-4 mr-4 hidden sm:inline-block sm:mt-0"></search-bar>
<div class="text-white hidden sm:block">
<div class="text-contrast hidden sm:block">
<a
href="https://codeberg.org/dragongoose/safetwitch"
class="mt-4 mr-4 sm:inline-block sm:mt-0"
@ -56,7 +56,7 @@ export default {
</div>
<div :class="open ? 'block' : 'hidden'" class="w-full flex-grow">
<div class="p-4 flex flex-col items-center space-y-5 text-white">
<div class="p-4 flex flex-col items-center space-y-5 text-contrast">
<search-bar></search-bar>
<ul class="inline-flex space-x-3 md:space-x-6 font-medium">
<a href="https://codeberg.org/dragongoose/safetwitch">{{ $t('nav.code') }}</a>

4
src/components/StreamPreview.vue
View File

@ -63,14 +63,14 @@ export default {
<RouterLink :to="'/' + data.login">
<img :src="data.stream.preview" class="rounded-lg rounded-b-none" />
</RouterLink>
<div class="text-white p-2 inline-flex space-x-2 w-full h-16">
<div class="text-contrast p-2 inline-flex space-x-2 w-full h-16">
<div class="inline-flex">
<div class="inline-flex">
<img :src="data.pfp" class="rounded-full mr-2" />
<div class="w-full">
<p class="font-bold w-[18rem] md:w-[22.9rem] truncate">{{ data.stream.title }}</p>
<div class="inline-flex w-full justify-between">
<p class="text-gray-300">{{ data.username }}</p>
<p class="text-neutral">{{ data.username }}</p>
<p class="self-end float-right">
<v-icon name="io-person"></v-icon> {{ abbreviate(data.stream.viewers) }}
</p>

10
src/components/TwitchChat.vue
View File

@ -164,7 +164,7 @@ export default {
</li>
<li v-for="message in getChat()" :key="messages.indexOf(message)">
<div v-if="message.type === 'PRIVMSG'" class="text-white inline-flex">
<div v-if="message.type === 'PRIVMSG'" class="text-contrast inline-flex">
<!-- CHAT MESSAGE-->
<p class="text-sm items-center">
@ -181,20 +181,20 @@ export default {
</p>
</div>
<div v-else-if="message.type === 'CLEARMSG'" class="text-white inline-flex">
<div v-else-if="message.type === 'CLEARMSG'" class="text-contrast inline-flex">
<p class="text-sm text-gray-500 italic"> {{ $t("chat.removed", { username: message.data.username }) }} </p>
</div>
<div v-else-if="message.type === 'USERNOTICE'" class="text-white inline-flex bg-pink bg-opacity-50 p-1 rounded-md">
<div v-else-if="message.type === 'USERNOTICE'" class="text-contrast inline-flex bg-pink bg-opacity-50 p-1 rounded-md">
<p> {{ $t("chat.resub", { username: message.data.username, duration : message.data.months }) }} </p>
</div>
<div v-else-if="message.type === 'CLEARCHAT'" class="text-white inline-flex p-1 rounded-md">
<div v-else-if="message.type === 'CLEARCHAT'" class="text-contrast inline-flex p-1 rounded-md">
<p v-if="!message.data.duration" class="text-sm text-gray-500 italic"> {{ $t("chat.banned", { username: message.data.username }) }} </p>
<p v-else class="text-sm text-gray-500 italic"> {{ $t("chat.timeout", { username: message.data.username, duration: message.data.duration }) }} </p>
</div>
<div v-else class="text-white">
<div v-else class="text-contrast">
{{ message }}
</div>
</li>

2
src/components/popups/ShareButtonModal.vue
View File

@ -73,7 +73,7 @@ export default {
<template>
<div class="fixed top-0 bottom-0 left-0 right-0 flex w-full z-50 h-[100vh] bg-opacity-50 bg-black">
<div class="bg-crust my-auto h-min mx-auto w-[35rem] max-w-[95vw] p-5 rounded-md relative z-50 text-white">
<div class="bg-crust my-auto h-min mx-auto w-[35rem] max-w-[95vw] p-5 rounded-md relative z-50 text-contrast">
<div class="flex justify-between">
<h1 class="text-3xl font-bold">Share</h1>
<button @click="$emit('close')">

2
src/components/user/AboutTab.vue
View File

@ -39,7 +39,7 @@ export default {
<ul v-if="socials" class="flex font-semibold text-md justify-start flex-wrap flex-row">
<li v-for="link in socials" :key="link.url">
<a :href="link.url" class="text-white hover:text-gray-400 mr-4 flex">
<a :href="link.url" class="text-contrast hover:text-neutral mr-4 flex">
<v-icon :name="getIconName(link.type)" class="w-6 h-6 mr-1"></v-icon>
<span>{{ link.name }}</span>
</a>

2
src/components/user/VideoPreview.vue
View File

@ -27,7 +27,7 @@
<div class="w-full">
<p class="font-bold text-sm truncate h-6 max-w-[255px]">{{ videoData.title }}</p>
<div class="text-xs text-gray-400">
<div class="text-xs text-neutral">
<p>{{ videoData.streamer.login }}</p>
<p>{{ videoData.game.displayName || videoData.game.name }}</p>
</div>