Infrastructure/safetwitch
0
Fork 0
mirror of https://codeberg.org/SafeTwitch/safetwitch.git synced 2024-12-22 05:12:57 -05:00
Code Issues Activity

THEME SUPPORT #26

Browse source
This commit is contained in:
dragongoose 2023-09-24 11:47:48 -04:00
parent 054f937276
commit 1823d4323c
No known key found for this signature in database
GPG key ID: 01397EEC371CDAA5
23 changed files with 204 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -9,7 +9,7 @@
<link rel="manifest" href="/site.webmanifest"> <link rel="manifest" href="/site.webmanifest">
<title>SafeTwitch</title> <title>SafeTwitch</title>
</head> </head>
<body class="bg-ctp-base flex flex-col"> <body class="flex flex-col">
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>

131
package-lock.json generated
View file

@ -1,12 +1,12 @@
{ {
"name": "test", "name": "test",
"version": "2.2.1", "version": "2.3.1",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "test", "name": "test",
"version": "2.2.1", "version": "2.3.1",
"dependencies": { "dependencies": {
"@intlify/unplugin-vue-i18n": "^0.11.0", "@intlify/unplugin-vue-i18n": "^0.11.0",
"@tailwindcss/forms": "^0.5.3", "@tailwindcss/forms": "^0.5.3",
@ -42,6 +42,7 @@
"postcss": "^8.4.21", "postcss": "^8.4.21",
"prettier": "^2.8.4", "prettier": "^2.8.4",
"tailwindcss": "^3.2.7", "tailwindcss": "^3.2.7",
"tailwindcss-themer": "^3.1.0",
"typescript": "~4.8.4", "typescript": "~4.8.4",
"vite": "^4.1.4", "vite": "^4.1.4",
"vue-cli-plugin-i18n": "~2.3.2", "vue-cli-plugin-i18n": "~2.3.2",
@ -1769,6 +1770,19 @@
"node": ">= 6" "node": ">= 6"
} }
}, },
"node_modules/color": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
"integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
"dev": true,
"dependencies": {
"color-convert": "^2.0.1",
"color-string": "^1.9.0"
},
"engines": {
"node": ">=12.5.0"
}
},
"node_modules/color-convert": { "node_modules/color-convert": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@ -1786,6 +1800,16 @@
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
}, },
"node_modules/color-string": {
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
"integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
"dev": true,
"dependencies": {
"color-name": "^1.0.0",
"simple-swizzle": "^0.2.2"
}
},
"node_modules/commander": { "node_modules/commander": {
"version": "6.2.1", "version": "6.2.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz", "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
@ -3454,6 +3478,12 @@
"graceful-fs": "^4.1.6" "graceful-fs": "^4.1.6"
} }
}, },
"node_modules/just-unique": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/just-unique/-/just-unique-4.2.0.tgz",
"integrity": "sha512-cxQGGUiit6CGUpuuiezY8N4m1wgF4o7127rXEXDFcxeDUFfdV7gSkwA26Fe2wWBiNQq2SZOgN4gSmMxB/StA8Q==",
"dev": true
},
"node_modules/karma-safaritechpreview-launcher": { "node_modules/karma-safaritechpreview-launcher": {
"version": "0.0.6", "version": "0.0.6",
"resolved": "https://registry.npmjs.org/karma-safaritechpreview-launcher/-/karma-safaritechpreview-launcher-0.0.6.tgz", "resolved": "https://registry.npmjs.org/karma-safaritechpreview-launcher/-/karma-safaritechpreview-launcher-0.0.6.tgz",
@ -3567,6 +3597,12 @@
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
"dev": true "dev": true
}, },
"node_modules/lodash.mergewith": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz",
"integrity": "sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==",
"dev": true
},
"node_modules/lru-cache": { "node_modules/lru-cache": {
"version": "6.0.0", "version": "6.0.0",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@ -4758,6 +4794,21 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/simple-swizzle": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
"integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
"dev": true,
"dependencies": {
"is-arrayish": "^0.3.1"
}
},
"node_modules/simple-swizzle/node_modules/is-arrayish": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
"integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
"dev": true
},
"node_modules/slash": { "node_modules/slash": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@ -4968,6 +5019,21 @@
"postcss": "^8.0.9" "postcss": "^8.0.9"
} }
}, },
"node_modules/tailwindcss-themer": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/tailwindcss-themer/-/tailwindcss-themer-3.1.0.tgz",
"integrity": "sha512-IfgxpCxWm5rRK3Q7aTvVyhQ/7tyyn8EJl5tFak5tS+/n8oXT7OGfv8praYepR7+IsM92waAuBDZng1HgnstrYA==",
"dev": true,
"dependencies": {
"color": "^4.1.0",
"just-unique": "^4.2.0",
"lodash.merge": "^4.6.2",
"lodash.mergewith": "^4.6.2"
},
"peerDependencies": {
"tailwindcss": "^3.1.0"
}
},
"node_modules/text-table": { "node_modules/text-table": {
"version": "0.2.0", "version": "0.2.0",
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@ -6860,6 +6926,16 @@
} }
} }
}, },
"color": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
"integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
"dev": true,
"requires": {
"color-convert": "^2.0.1",
"color-string": "^1.9.0"
}
},
"color-convert": { "color-convert": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@ -6874,6 +6950,16 @@
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
}, },
"color-string": {
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
"integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
"dev": true,
"requires": {
"color-name": "^1.0.0",
"simple-swizzle": "^0.2.2"
}
},
"commander": { "commander": {
"version": "6.2.1", "version": "6.2.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz", "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
@ -8094,6 +8180,12 @@
"graceful-fs": "^4.1.6" "graceful-fs": "^4.1.6"
} }
}, },
"just-unique": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/just-unique/-/just-unique-4.2.0.tgz",
"integrity": "sha512-cxQGGUiit6CGUpuuiezY8N4m1wgF4o7127rXEXDFcxeDUFfdV7gSkwA26Fe2wWBiNQq2SZOgN4gSmMxB/StA8Q==",
"dev": true
},
"karma-safaritechpreview-launcher": { "karma-safaritechpreview-launcher": {
"version": "0.0.6", "version": "0.0.6",
"resolved": "https://registry.npmjs.org/karma-safaritechpreview-launcher/-/karma-safaritechpreview-launcher-0.0.6.tgz", "resolved": "https://registry.npmjs.org/karma-safaritechpreview-launcher/-/karma-safaritechpreview-launcher-0.0.6.tgz",
@ -8186,6 +8278,12 @@
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
"dev": true "dev": true
}, },
"lodash.mergewith": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz",
"integrity": "sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==",
"dev": true
},
"lru-cache": { "lru-cache": {
"version": "6.0.0", "version": "6.0.0",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@ -8998,6 +9096,23 @@
"object-inspect": "^1.9.0" "object-inspect": "^1.9.0"
} }
}, },
"simple-swizzle": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
"integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
"dev": true,
"requires": {
"is-arrayish": "^0.3.1"
},
"dependencies": {
"is-arrayish": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
"integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
"dev": true
}
}
},
"slash": { "slash": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@ -9155,6 +9270,18 @@
"resolve": "^1.22.1" "resolve": "^1.22.1"
} }
}, },
"tailwindcss-themer": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/tailwindcss-themer/-/tailwindcss-themer-3.1.0.tgz",
"integrity": "sha512-IfgxpCxWm5rRK3Q7aTvVyhQ/7tyyn8EJl5tFak5tS+/n8oXT7OGfv8praYepR7+IsM92waAuBDZng1HgnstrYA==",
"dev": true,
"requires": {
"color": "^4.1.0",
"just-unique": "^4.2.0",
"lodash.merge": "^4.6.2",
"lodash.mergewith": "^4.6.2"
}
},
"text-table": { "text-table": {
"version": "0.2.0", "version": "0.2.0",
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",

1
package.json
View file

@ -47,6 +47,7 @@
"postcss": "^8.4.21", "postcss": "^8.4.21",
"prettier": "^2.8.4", "prettier": "^2.8.4",
"tailwindcss": "^3.2.7", "tailwindcss": "^3.2.7",
"tailwindcss-themer": "^3.1.0",
"typescript": "~4.8.4", "typescript": "~4.8.4",
"vite": "^4.1.4", "vite": "^4.1.4",
"vue-cli-plugin-i18n": "~2.3.2", "vue-cli-plugin-i18n": "~2.3.2",

16
src/App.vue
View file

@ -7,13 +7,15 @@ import DevWarning from './components/DevWarning.vue'
const dev = import.meta.env.DEV const dev = import.meta.env.DEV
</script> </script>
<template class="bg-ctp-base h-full flex flex-row"> <template class="h-full flex flex-row">
<dev-warning v-if="dev"></dev-warning> <div class="my-theme bg-primary">
<navbar-item></navbar-item> <dev-warning v-if="dev"></dev-warning>
<navbar-item></navbar-item>
<Suspense> <Suspense>
<RouterView :key="$route.fullPath" /> <RouterView :key="$route.fullPath"/>
</Suspense> </Suspense>
<footer-item></footer-item> <footer-item></footer-item>
</div>
</template> </template>

4
src/components/CategoryPreview.vue
View file

@ -24,7 +24,7 @@ export default {
</script> </script>
<template> <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)}`"> <router-link :to="`/directory/game/${encodeURIComponent(category.name)}`">
<img :src="category.image" class="rounded-lg rounded-b-none w-full" /> <img :src="category.image" class="rounded-lg rounded-b-none w-full" />
</router-link> </router-link>
@ -40,7 +40,7 @@ export default {
<ul class="h-8 overflow-hidden"> <ul class="h-8 overflow-hidden">
<li v-for="tag in category.tags" :key="tag" class="inline-flex"> <li v-for="tag in category.tags" :key="tag" class="inline-flex">
<span <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 >{{ tag }}</span
> >
</li> </li>

2
src/components/ChannelPreview.vue
View file

@ -15,7 +15,7 @@ export default {
<template> <template>
<router-link v-if="channelData" :to="'/' + channelData.username"> <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"> <div class="inline-flex space-x-3">
<img :src="channelData.pfp" class="rounded-full w-20" /> <img :src="channelData.pfp" class="rounded-full w-20" />
<div> <div>

2
src/components/DevWarning.vue
View file

@ -1,5 +1,5 @@
<template> <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"> <div class="m-auto">
<h1 class="font-bold text-2xl">SafeTwitch is currently in development mode.</h1> <h1 class="font-bold text-2xl">SafeTwitch is currently in development mode.</h1>
</div> </div>

2
src/components/ErrorMessage.vue
View file

@ -4,7 +4,7 @@ export default {}
<template> <template>
<div <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"> <div class="mb-6">
<h1 class="font-bold text-5xl">{{ $t('error.oops') }}</h1> <h1 class="font-bold text-5xl">{{ $t('error.oops') }}</h1>

2
src/components/FollowButton.vue
View file

@ -56,7 +56,7 @@ export default {
<button <button
ref="followButton" ref="followButton"
@click="followStreamer" @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> <v-icon name="bi-heart-fill" scale="0.85"></v-icon>
<span v-if="isFollowing"> {{ $t('streamer.unfollow') }} </span> <span v-if="isFollowing"> {{ $t('streamer.unfollow') }} </span>

2
src/components/LoadingScreen.vue
View file

@ -1,5 +1,5 @@
<template> <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"> <div class="flex space-x-3">
<h1 class="text-4xl font-bold">{{ $t('main.searching') }}</h1> <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> <v-icon name="fa-circle-notch" class="animate-spin w-10 h-10"></v-icon>

4
src/components/NavbarView.vue
View file

@ -28,7 +28,7 @@ export default {
<nav class="flex items-center justify-between flex-wrap p-4"> <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-white mr-6">
<router-link to="/"> <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> </router-link>
</div> </div>
@ -56,7 +56,7 @@ export default {
</div> </div>
<div :class="open ? 'block' : 'hidden'" class="w-full flex-grow"> <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> <search-bar></search-bar>
<ul class="inline-flex space-x-3 md:space-x-6 font-medium"> <ul class="inline-flex space-x-3 md:space-x-6 font-medium">
<a href="https://codeberg.org/dragongoose/safetwitch">{{ $t('nav.code') }}</a> <a href="https://codeberg.org/dragongoose/safetwitch">{{ $t('nav.code') }}</a>

2
src/components/StreamPreview.vue
View file

@ -59,7 +59,7 @@ export default {
<template> <template>
<div v-if="data.stream"> <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"> <RouterLink :to="'/' + data.login">
<img :src="data.stream.preview" class="rounded-lg rounded-b-none" /> <img :src="data.stream.preview" class="rounded-lg rounded-b-none" />
</RouterLink> </RouterLink>

6
src/components/TwitchChat.vue
View file

@ -150,7 +150,7 @@ export default {
} }
</script> </script>
<template> <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 --> <!-- SYSTEM MESSAGES -->
<ul <ul
@ -176,7 +176,7 @@ export default {
<strong <strong
:style="message.data.color? `color: ${message.data.color};` : ``" :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 }} {{ message.data.username }}</strong>: {{ message.data.message }}
</p> </p>
</div> </div>
@ -185,7 +185,7 @@ export default {
<p class="text-sm text-gray-500 italic"> {{ $t("chat.removed", { username: message.data.username }) }} </p> <p class="text-sm text-gray-500 italic"> {{ $t("chat.removed", { username: message.data.username }) }} </p>
</div> </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> <p> {{ $t("chat.resub", { username: message.data.username, duration : message.data.months }) }} </p>
</div> </div>

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

@ -28,7 +28,7 @@ export default {
</script> </script>
<template> <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"> <div class="inline-flex w-full">
<span class="pr-3 font-bold text-3xl">{{ $t('streamer.about') }}</span> <span class="pr-3 font-bold text-3xl">{{ $t('streamer.about') }}</span>
</div> </div>

4
src/components/user/VideoPreview.vue
View file

@ -8,12 +8,12 @@
<img :src="videoData.preview" class="rounded-md" width="300" /> <img :src="videoData.preview" class="rounded-md" width="300" />
</RouterLink> </RouterLink>
<p <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) }} {{ new Date(videoData.duration * 1000).toISOString().slice(11, 19) }}
</p> </p>
<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') }} {{ abbreviate(videoData.views) }} {{ $t('main.views') }}
</p> </p>

2
src/components/user/VideoTab.vue
View file

@ -3,7 +3,7 @@
--> -->
<template> <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"> <div class="inline-flex w-full">
<span class="pr-3 font-bold text-3xl">{{ $t('streamer.videos') }}</span> <span class="pr-3 font-bold text-3xl">{{ $t('streamer.videos') }}</span>
</div> </div>

4
src/views/CategoryView.vue
View file

@ -99,7 +99,7 @@ export default {
<ul class="mb-5"> <ul class="mb-5">
<li v-for="tag in data.tags" :key="tag" class="inline-flex"> <li v-for="tag in data.tags" :key="tag" class="inline-flex">
<span <span
class="text-white p-1 py-0.5 mr-1 text-sm font-bold bg-ctp-overlay1 rounded-sm" class="text-white p-1 py-0.5 mr-1 text-sm font-bold bg-overlay1 rounded-sm"
>{{ tag }}</span >{{ tag }}</span
> >
</li> </li>
@ -126,7 +126,7 @@ export default {
<ul class="mb-5"> <ul class="mb-5">
<li v-for="tag in data.tags" :key="tag" class="inline-flex"> <li v-for="tag in data.tags" :key="tag" class="inline-flex">
<span <span
class="text-white p-1 py-0.5 mr-1 text-sm font-bold bg-ctp-overlay1 rounded-sm" class="text-white p-1 py-0.5 mr-1 text-sm font-bold bg-overlay1 rounded-sm"
>{{ tag }}</span >{{ tag }}</span
> >
</li> </li>

2
src/views/ClipView.vue
View file

@ -93,7 +93,7 @@ export default {
class="w-full justify-center md:inline-flex space-y-4 md:space-y-0 md:space-x-4 md:p-4" class="w-full justify-center md:inline-flex space-y-4 md:space-y-0 md:space-x-4 md:p-4"
> >
<div <div
class="flex bg-ctp-crust flex-col p-6 rounded-lg w-[99vw] md:max-w-prose md:min-w-[65ch] lg:max-w-[70rem] text-white" class="flex bg-crust flex-col p-6 rounded-lg w-[99vw] md:max-w-prose md:min-w-[65ch] lg:max-w-[70rem] text-white"
> >
<div class="w-full mx-auto rounded-lg mb-5"> <div class="w-full mx-auto rounded-lg mb-5">
<video-player :options="videoOptions"> <video-player :options="videoOptions">

2
src/views/PrivacyPageView.vue
View file

@ -3,7 +3,7 @@ export default {}
</script> </script>
<template> <template>
<article class="prose prose-invert bg-ctp-crust rounded-lg mx-auto p-8 pt-10 text-white"> <article class="prose prose-invert bg-crust rounded-lg mx-auto p-8 pt-10 text-white">
<h1>Privacy Policy</h1> <h1>Privacy Policy</h1>
<p> <p>
It's.... kind of empty here. It's.... kind of empty here.

8
src/views/SettingsView.vue
View file

@ -50,7 +50,7 @@ export default {
</script> </script>
<template> <template>
<div class="mx-auto w-[35rem] max-w-[95vw] p-5 py-3 bg-ctp-crust rounded-md text-white"> <div class="mx-auto w-[35rem] max-w-[95vw] p-5 py-3 bg-secondary rounded-md text-white">
<h1 class="font-bold text-3xl">{{ $t("nav.settings") }}</h1> <h1 class="font-bold text-3xl">{{ $t("nav.settings") }}</h1>
<hr class="my-2" /> <hr class="my-2" />
<ul class="w-full space-y-1"> <ul class="w-full space-y-1">
@ -77,10 +77,10 @@ export default {
</ul> </ul>
<div class="space-x-2 mt-3"> <div class="space-x-2 mt-3">
<button @click="save" class="bg-ctp-surface0 p-4 py-2 rounded-md">{{ $t('settings.saveButton') }}</button> <button @click="save" class="bg-surface0 p-4 py-2 rounded-md">{{ $t('settings.saveButton') }}</button>
<!-- <button @click="download" class="bg-ctp-surface0 p-4 py-2 rounded-md">Export</button> <!-- <button @click="download" class="bg-surface0 p-4 py-2 rounded-md">Export</button>
<input type="file" @change="handleImport" name="fileinput" ref="fileinput" <input type="file" @change="handleImport" name="fileinput" ref="fileinput"
class="bg-ctp-surface0 p-4 py-2 rounded-md"> --> class="bg-surface0 p-4 py-2 rounded-md"> -->
</div> </div>
</div> </div>
</template> </template>

8
src/views/UserView.vue
View file

@ -96,7 +96,7 @@ export default {
class="w-full justify-center md:inline-flex space-y-4 md:space-y-0 md:space-x-4 md:p-4" class="w-full justify-center md:inline-flex space-y-4 md:space-y-0 md:space-x-4 md:p-4"
> >
<div <div
class="flex bg-ctp-crust flex-col p-6 rounded-lg w-[99vw] md:max-w-prose md:min-w-[65ch] lg:max-w-[70rem] text-white" class="flex bg-crust flex-col p-6 rounded-lg w-[99vw] md:max-w-prose md:min-w-[65ch] lg:max-w-[70rem] text-white"
> >
<div v-if="data.isLive" class="w-full mx-auto rounded-lg mb-5"> <div v-if="data.isLive" class="w-full mx-auto rounded-lg mb-5">
<video-player v-if="Boolean($route.query['audio-only']) === false" :options="videoOptions"> </video-player> <video-player v-if="Boolean($route.query['audio-only']) === false" :options="videoOptions"> </video-player>
@ -121,7 +121,7 @@ export default {
<span <span
v-if="data.isLive" v-if="data.isLive"
class="absolute flex left-1/2 translate-x-[-50%] whitespace-nowrap uppercase top-16 bg-ctp-red font-bold text-sm p-1.5 py-0.5 rounded-md" class="absolute flex left-1/2 translate-x-[-50%] whitespace-nowrap uppercase top-16 bg-red font-bold text-sm p-1.5 py-0.5 rounded-md"
>{{ $t('main.live') }}</span >{{ $t('main.live') }}</span
> >
</div> </div>
@ -147,7 +147,7 @@ export default {
<div class="flex-col md:inline-flex md:w-1/5 float-right h-full text-right"> <div class="flex-col md:inline-flex md:w-1/5 float-right h-full text-right">
<div v-if="!data.isLive" class="w-full"> <div v-if="!data.isLive" class="w-full">
<p <p
class="font-bold bg-ctp-mantle p-3 py-2 rounded-lg w-min float-right border-2 border-ctp-red" class="font-bold bg-overlay0 p-3 py-2 rounded-lg w-min float-right border-2 border-red"
> >
OFFLINE OFFLINE
</p> </p>
@ -160,7 +160,7 @@ export default {
<li <li
v-for="tag in data.stream!.tags" v-for="tag in data.stream!.tags"
:key="tag" :key="tag"
class="inline-flex bg-ctp-mantle p-1.5 px-2 rounded-md" class="inline-flex bg-overlay0 p-1.5 px-2 rounded-md"
> >
{{ tag }} {{ tag }}
</li> </li>

2
src/views/VodView.vue
View file

@ -92,7 +92,7 @@ export default {
class="w-full justify-center md:inline-flex space-y-4 md:space-y-0 md:space-x-4 md:p-4" class="w-full justify-center md:inline-flex space-y-4 md:space-y-0 md:space-x-4 md:p-4"
> >
<div <div
class="flex bg-ctp-crust flex-col p-6 rounded-lg w-[99vw] md:max-w-prose md:min-w-[65ch] lg:max-w-[70rem] text-white" class="flex bg-crust flex-col p-6 rounded-lg w-[99vw] md:max-w-prose md:min-w-[65ch] lg:max-w-[70rem] text-white"
> >
<div class="w-full mx-auto rounded-lg mb-5"> <div class="w-full mx-auto rounded-lg mb-5">
<video-player :options="videoOptions" @PlayerTimeUpdate="handlePlayerTimeUpdate"> <video-player :options="videoOptions" @PlayerTimeUpdate="handlePlayerTimeUpdate">

37
tailwind.config.js
View file

@ -7,9 +7,40 @@ module.exports = {
extend: {}, extend: {},
}, },
plugins: [ plugins: [
require('@catppuccin/tailwindcss')({ require('tailwindcss-themer')({
prefix: 'ctp', defaultTheme: {
defaultFlavour: 'mocha' // put the default values of any config you want themed
// just as if you were to extend tailwind's theme like normal https://tailwindcss.com/docs/theme#extending-the-default-theme
extend: {
// colors is used here for demonstration purposes
colors: {
primary: 'red'
}
}
},
themes: [
{
// name your theme anything that could be a valid css class name
// remember what you named your theme because you will use it as a class to enable the theme
name: 'my-theme',
// put any overrides your theme has here
// just as if you were to extend tailwind's theme like normal https://tailwindcss.com/docs/theme#extending-the-default-theme
extend: {
colors: {
"primary": '#141515',
"secondary": '#1e1f1f',
"overlay0": '#282a2a',
"overlay1": '#323434',
"surface0": '#393B3B',
"surface1": '#3F4242',
"crust": '#0C0C0C',
"purple": '#D946EF',
"red": "#980C0C"
}
}
}
]
}), }),
require('@tailwindcss/typography'), require('@tailwindcss/typography'),
require("@tailwindcss/forms") require("@tailwindcss/forms")