THEME SUPPORT #26

This commit is contained in:
dragongoose
2023-09-24 11:47:48 -04:00
parent 054f937276
commit 1823d4323c
23 changed files with 204 additions and 43 deletions

View File

@ -24,7 +24,7 @@ export default {
</script>
<template>
<div class="bg-ctp-crust w-40 lg:w-[11rem] md:w-[13.5rem] rounded-lg">
<div class="bg-crust w-40 lg:w-[11rem] md:w-[13.5rem] rounded-lg">
<router-link :to="`/directory/game/${encodeURIComponent(category.name)}`">
<img :src="category.image" class="rounded-lg rounded-b-none w-full" />
</router-link>
@ -40,7 +40,7 @@ export default {
<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-ctp-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-white"
>{{ tag }}</span
>
</li>

View File

@ -15,7 +15,7 @@ export default {
<template>
<router-link v-if="channelData" :to="'/' + channelData.username">
<div class="p-3 rounded-lg bg-ctp-crust w-max max-w-lg max-h-28">
<div class="p-3 rounded-lg bg-crust w-max max-w-lg max-h-28">
<div class="inline-flex space-x-3">
<img :src="channelData.pfp" class="rounded-full w-20" />
<div>

View File

@ -1,5 +1,5 @@
<template>
<div class="rounded-lg z-50 flex m-3 h-20 bg-amber-400 border-4 border-amber-600">
<div class="rounded-lg z-50 flex m-3 mt-0 h-20 bg-amber-400 border-4 border-amber-600">
<div class="m-auto">
<h1 class="font-bold text-2xl">SafeTwitch is currently in development mode.</h1>
</div>

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-ctp-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-white"
>
<div class="mb-6">
<h1 class="font-bold text-5xl">{{ $t('error.oops') }}</h1>

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-600"
class="text-white 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>

View File

@ -1,5 +1,5 @@
<template>
<div class="flex mx-auto justify-center bg-ctp-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-white">
<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>

View File

@ -28,7 +28,7 @@ export default {
<nav class="flex items-center justify-between flex-wrap p-4">
<div class="flex items-center flex-no-shrink text-white mr-6">
<router-link to="/">
<h1 class="font-bold text-2xl">Safe<color class="text-purple-500">Twitch</color></h1>
<h1 class="font-bold text-2xl">Safe<color class="text-purple">Twitch</color></h1>
</router-link>
</div>
@ -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 bg-ctp-base text-white">
<div class="p-4 flex flex-col items-center space-y-5 text-white">
<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>

View File

@ -59,7 +59,7 @@ export default {
<template>
<div v-if="data.stream">
<div class="bg-ctp-crust rounded-lg w-[23rem] md:w-[27rem]">
<div class="bg-crust rounded-lg w-[23rem] md:w-[27rem]">
<RouterLink :to="'/' + data.login">
<img :src="data.stream.preview" class="rounded-lg rounded-b-none" />
</RouterLink>

View File

@ -150,7 +150,7 @@ export default {
}
</script>
<template>
<div class="p-3 bg-ctp-crust rounded-lg w-[99vw] md:max-w-[15.625rem] lg:max-w-[20rem] flex flex-col" @PlayerTimeUpdate="updateVodComments">
<div class="p-3 bg-crust rounded-lg w-[99vw] md:max-w-[15.625rem] lg:max-w-[20rem] flex flex-col" @PlayerTimeUpdate="updateVodComments">
<!-- SYSTEM MESSAGES -->
<ul
@ -176,7 +176,7 @@ export default {
<strong
:style="message.data.color? `color: ${message.data.color};` : ``"
class="text-ctp-pink font-bold">
class="text-purple font-bold">
{{ message.data.username }}</strong>: {{ message.data.message }}
</p>
</div>
@ -185,7 +185,7 @@ export default {
<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-ctp-pink bg-opacity-50 p-1 rounded-md">
<div v-else-if="message.type === 'USERNOTICE'" class="text-white 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>

View File

@ -28,7 +28,7 @@ export default {
</script>
<template>
<div v-if="getSetting('streamerAboutSectionVisible')" class="bg-ctp-mantle mt-1 p-5 pt-3 rounded-lg w-full space-y-3">
<div v-if="getSetting('streamerAboutSectionVisible')" class="bg-primary mt-1 p-5 pt-3 rounded-lg w-full space-y-3">
<div class="inline-flex w-full">
<span class="pr-3 font-bold text-3xl">{{ $t('streamer.about') }}</span>
</div>

View File

@ -8,12 +8,12 @@
<img :src="videoData.preview" class="rounded-md" width="300" />
</RouterLink>
<p
class="absolute bottom-2 right-2 bg-black p-1 py-0.5 rounded-md bg-opacity-70 text-xs font-bold"
class="absolute bottom-2 right-2 bg-secondary bg-opacity-70 p-1 py-0.5 rounded-md text-xs font-bold"
>
{{ new Date(videoData.duration * 1000).toISOString().slice(11, 19) }}
</p>
<p
class="absolute bottom-2 left-2 bg-black p-1 py-0.5 rounded-md bg-opacity-70 text-xs font-bold"
class="absolute bottom-2 left-2 bg-secondary bg-opacity-70 p-1 py-0.5 rounded-md text-xs font-bold"
>
{{ abbreviate(videoData.views) }} {{ $t('main.views') }}
</p>

View File

@ -3,7 +3,7 @@
-->
<template>
<div class="bg-ctp-mantle mt-1 p-5 pt-3 rounded-lg w-full space-y-3">
<div class="bg-primary mt-1 p-5 pt-3 rounded-lg w-full space-y-3">
<div class="inline-flex w-full">
<span class="pr-3 font-bold text-3xl">{{ $t('streamer.videos') }}</span>
</div>