mirror of
https://codeberg.org/SafeTwitch/safetwitch.git
synced 2024-12-21 21:03:00 -05:00
THEME SUPPORT #26
This commit is contained in:
dragongoose
parent
054f937276
commit
1823d4323c
23 changed files with 204 additions and 43 deletions
|
|
@ -9,7 +9,7 @@
|
|||
<link rel="manifest" href="/site.webmanifest">
|
||||
<title>SafeTwitch</title>
|
||||
</head>
|
||||
<body class="bg-ctp-base flex flex-col">
|
||||
<body class="flex flex-col">
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
|
|
|
|||
131
package-lock.json
generated
131
package-lock.json
generated
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "test",
|
||||
"version": "2.2.1",
|
||||
"version": "2.3.1",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "test",
|
||||
"version": "2.2.1",
|
||||
"version": "2.3.1",
|
||||
"dependencies": {
|
||||
"@intlify/unplugin-vue-i18n": "^0.11.0",
|
||||
"@tailwindcss/forms": "^0.5.3",
|
||||
|
|
@ -42,6 +42,7 @@
|
|||
"postcss": "^8.4.21",
|
||||
"prettier": "^2.8.4",
|
||||
"tailwindcss": "^3.2.7",
|
||||
"tailwindcss-themer": "^3.1.0",
|
||||
"typescript": "~4.8.4",
|
||||
"vite": "^4.1.4",
|
||||
"vue-cli-plugin-i18n": "~2.3.2",
|
||||
|
|
@ -1769,6 +1770,19 @@
|
|||
"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": {
|
||||
"version": "2.0.1",
|
||||
"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",
|
||||
"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": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
|
||||
|
|
@ -3454,6 +3478,12 @@
|
|||
"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": {
|
||||
"version": "0.0.6",
|
||||
"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==",
|
||||
"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": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
|
||||
|
|
@ -4758,6 +4794,21 @@
|
|||
"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": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
|
||||
|
|
@ -4968,6 +5019,21 @@
|
|||
"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": {
|
||||
"version": "0.2.0",
|
||||
"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": {
|
||||
"version": "2.0.1",
|
||||
"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",
|
||||
"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": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
|
||||
|
|
@ -8094,6 +8180,12 @@
|
|||
"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": {
|
||||
"version": "0.0.6",
|
||||
"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==",
|
||||
"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": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
|
||||
|
|
@ -8998,6 +9096,23 @@
|
|||
"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": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
|
||||
|
|
@ -9155,6 +9270,18 @@
|
|||
"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": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@
|
|||
"postcss": "^8.4.21",
|
||||
"prettier": "^2.8.4",
|
||||
"tailwindcss": "^3.2.7",
|
||||
"tailwindcss-themer": "^3.1.0",
|
||||
"typescript": "~4.8.4",
|
||||
"vite": "^4.1.4",
|
||||
"vue-cli-plugin-i18n": "~2.3.2",
|
||||
|
|
|
|||
16
src/App.vue
16
src/App.vue
|
|
@ -7,13 +7,15 @@ import DevWarning from './components/DevWarning.vue'
|
|||
const dev = import.meta.env.DEV
|
||||
</script>
|
||||
|
||||
<template class="bg-ctp-base h-full flex flex-row">
|
||||
<dev-warning v-if="dev"></dev-warning>
|
||||
<navbar-item></navbar-item>
|
||||
<template class="h-full flex flex-row">
|
||||
<div class="my-theme bg-primary">
|
||||
<dev-warning v-if="dev"></dev-warning>
|
||||
<navbar-item></navbar-item>
|
||||
|
||||
<Suspense>
|
||||
<RouterView :key="$route.fullPath" />
|
||||
</Suspense>
|
||||
<Suspense>
|
||||
<RouterView :key="$route.fullPath"/>
|
||||
</Suspense>
|
||||
|
||||
<footer-item></footer-item>
|
||||
<footer-item></footer-item>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@ export default {
|
|||
<ul class="mb-5">
|
||||
<li v-for="tag in data.tags" :key="tag" class="inline-flex">
|
||||
<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
|
||||
>
|
||||
</li>
|
||||
|
|
@ -126,7 +126,7 @@ export default {
|
|||
<ul class="mb-5">
|
||||
<li v-for="tag in data.tags" :key="tag" class="inline-flex">
|
||||
<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
|
||||
>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
>
|
||||
<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">
|
||||
<video-player :options="videoOptions">
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ export default {}
|
|||
</script>
|
||||
|
||||
<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>
|
||||
<p>
|
||||
It's.... kind of empty here.
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<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>
|
||||
<hr class="my-2" />
|
||||
<ul class="w-full space-y-1">
|
||||
|
|
@ -77,10 +77,10 @@ export default {
|
|||
</ul>
|
||||
|
||||
<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="download" class="bg-ctp-surface0 p-4 py-2 rounded-md">Export</button>
|
||||
<button @click="save" class="bg-surface0 p-4 py-2 rounded-md">{{ $t('settings.saveButton') }}</button>
|
||||
<!-- <button @click="download" class="bg-surface0 p-4 py-2 rounded-md">Export</button>
|
||||
<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>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
>
|
||||
<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">
|
||||
<video-player v-if="Boolean($route.query['audio-only']) === false" :options="videoOptions"> </video-player>
|
||||
|
|
@ -121,7 +121,7 @@ export default {
|
|||
|
||||
<span
|
||||
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
|
||||
>
|
||||
</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 v-if="!data.isLive" class="w-full">
|
||||
<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
|
||||
</p>
|
||||
|
|
@ -160,7 +160,7 @@ export default {
|
|||
<li
|
||||
v-for="tag in data.stream!.tags"
|
||||
: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 }}
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
>
|
||||
<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">
|
||||
<video-player :options="videoOptions" @PlayerTimeUpdate="handlePlayerTimeUpdate">
|
||||
|
|
|
|||
|
|
@ -7,9 +7,40 @@ module.exports = {
|
|||
extend: {},
|
||||
},
|
||||
plugins: [
|
||||
require('@catppuccin/tailwindcss')({
|
||||
prefix: 'ctp',
|
||||
defaultFlavour: 'mocha'
|
||||
require('tailwindcss-themer')({
|
||||
defaultTheme: {
|
||||
// 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/forms")
|
||||
|
|
|
|||
Loading…
Reference in a new issue