diff --git a/src/lib/assets/styles/tailwind-output.css b/src/lib/assets/styles/tailwind-output.css index e8fec05c..d2ae440c 100644 --- a/src/lib/assets/styles/tailwind-output.css +++ b/src/lib/assets/styles/tailwind-output.css @@ -1848,6 +1848,41 @@ html { .btn-secondary:focus-visible { outline: 2px solid hsl(var(--s)); } +.btn-accent:hover, + .btn-accent.btn-active { + --tw-border-opacity: 1; + border-color: hsl(var(--af, var(--a)) / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: hsl(var(--af, var(--a)) / var(--tw-bg-opacity)); +} +.btn-info:hover, + .btn-info.btn-active { + --tw-border-opacity: 1; + border-color: hsl(var(--in) / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: hsl(var(--in) / var(--tw-bg-opacity)); +} +.btn-success:hover, + .btn-success.btn-active { + --tw-border-opacity: 1; + border-color: hsl(var(--su) / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: hsl(var(--su) / var(--tw-bg-opacity)); +} +.btn-warning:hover, + .btn-warning.btn-active { + --tw-border-opacity: 1; + border-color: hsl(var(--wa) / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: hsl(var(--wa) / var(--tw-bg-opacity)); +} +.btn-error:hover, + .btn-error.btn-active { + --tw-border-opacity: 1; + border-color: hsl(var(--er) / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: hsl(var(--er) / var(--tw-bg-opacity)); +} .btn.glass:hover, .btn.glass.btn-active { --glass-opacity: 25%; @@ -1871,6 +1906,12 @@ html { .btn-ghost:focus-visible { outline: 2px solid currentColor; } +.btn-link:hover, + .btn-link.btn-active { + border-color: transparent; + background-color: transparent; + text-decoration-line: underline; +} .btn-outline { border-color: currentColor; background-color: transparent; @@ -2623,10 +2664,20 @@ html { :where(.table *:last-child) :where(*:last-child) :where(th, td):last-child { border-bottom-right-radius: 0.5rem; } +.textarea-bordered { + --tw-border-opacity: 0.2; +} .textarea:focus { outline: 2px solid hsla(var(--bc) / 0.2); outline-offset: 2px; } +.textarea-primary { + --tw-border-opacity: 1; + border-color: hsl(var(--p) / var(--tw-border-opacity)); +} +.textarea-primary:focus { + outline: 2px solid hsl(var(--p)); +} .textarea-info { --tw-border-opacity: 1; border-color: hsl(var(--in) / var(--tw-border-opacity)); @@ -2747,6 +2798,28 @@ html { .rounded-box { border-radius: var(--rounded-box, 1rem); } +.glass, + .glass:hover, + .glass.btn-active { + border: none; + -webkit-backdrop-filter: blur(var(--glass-blur, 40px)); + backdrop-filter: blur(var(--glass-blur, 40px)); + background-color: transparent; + background-image: linear-gradient( + 135deg, + rgb(255 255 255 / var(--glass-opacity, 30%)) 0%, + rgb(0 0 0 / 0%) 100% + ), + linear-gradient( + var(--glass-reflex-degree, 100deg), + rgb(255 255 255 / var(--glass-reflex-opacity, 10%)) 25%, + rgb(0 0 0 / 0%) 25% + ); + box-shadow: 0 0 0 1px rgb(255 255 255 / var(--glass-border-opacity, 10%)) + inset, + 0 0 0 2px rgb(0 0 0 / 5%); + text-shadow: 0 1px rgb(0 0 0 / var(--glass-text-shadow-opacity, 5%)); +} .badge-sm { height: 1rem; font-size: 0.75rem; @@ -3138,6 +3211,40 @@ html { .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +@keyframes bounce { + + 0%, 100% { + transform: translateY(-25%); + animation-timing-function: cubic-bezier(0.8,0,1,1); + } + + 50% { + transform: none; + animation-timing-function: cubic-bezier(0,0,0.2,1); + } +} +.animate-bounce { + animation: bounce 1s infinite; +} +@keyframes pulse { + + 50% { + opacity: .5; + } +} +.animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; +} +@keyframes ping { + + 75%, 100% { + transform: scale(2); + opacity: 0; + } +} +.animate-ping { + animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; +} .cursor-pointer { cursor: pointer; } @@ -3159,6 +3266,9 @@ html { .items-center { align-items: center; } +.justify-start { + justify-content: flex-start; +} .justify-end { justify-content: flex-end; } diff --git a/src/lib/components/Browse/AddCategory.svelte b/src/lib/components/Browse/AddCategory.svelte new file mode 100644 index 00000000..e69de29b diff --git a/src/lib/components/Browse/ChannelSearch.svelte b/src/lib/components/Browse/ChannelSearch.svelte new file mode 100644 index 00000000..616b08fc --- /dev/null +++ b/src/lib/components/Browse/ChannelSearch.svelte @@ -0,0 +1,22 @@ + + +
+
+
+ + +
+
+ + +
diff --git a/src/lib/components/Browse/ChannelList.svelte b/src/lib/components/Browse/ChannelTable.svelte similarity index 89% rename from src/lib/components/Browse/ChannelList.svelte rename to src/lib/components/Browse/ChannelTable.svelte index b746fb81..f1c5245a 100644 --- a/src/lib/components/Browse/ChannelList.svelte +++ b/src/lib/components/Browse/ChannelTable.svelte @@ -1,28 +1,8 @@ -
-
-
- - -
-
- - -
-
diff --git a/src/lib/components/Browse/Section.svelte b/src/lib/components/Browse/Section.svelte new file mode 100644 index 00000000..e69de29b diff --git a/src/lib/components/Browse/Community.svelte b/src/lib/components/MainDrawer/Community.svelte similarity index 100% rename from src/lib/components/Browse/Community.svelte rename to src/lib/components/MainDrawer/Community.svelte diff --git a/src/lib/components/Browse/Messages.svelte b/src/lib/components/MainDrawer/Messages.svelte similarity index 100% rename from src/lib/components/Browse/Messages.svelte rename to src/lib/components/MainDrawer/Messages.svelte diff --git a/src/lib/components/Profile/Stats.svelte b/src/lib/components/Profile/Stats.svelte new file mode 100644 index 00000000..e69de29b diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 1e0e40c8..c4a4999d 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -30,6 +30,8 @@ import IconSocialGitHub from '$lib/assets/icons/social/IconSocialGitHub.svelte' import IconDrawerAdmin from '$lib/assets/icons/drawer/IconDrawerAdmin.svelte' import LoginPrompt from '$lib/components/MainDrawer/LoginPrompt.svelte' + import Community from '$lib/components/MainDrawer/Community.svelte' + import Messages from '$lib/components/MainDrawer/Messages.svelte' NProgress.configure({ minimum: 0.75, showSpinner: false, @@ -66,7 +68,6 @@ rel="stylesheet" /> -
@@ -79,6 +80,8 @@
- - diff --git a/src/routes/browse/+page.svelte b/src/routes/browse/+page.svelte index 452e6024..1a5a759a 100644 --- a/src/routes/browse/+page.svelte +++ b/src/routes/browse/+page.svelte @@ -1,6 +1,6 @@ diff --git a/src/routes/browse/[sectionId]/+page.server.ts b/src/routes/browse/[sectionId]/+page.server.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/routes/browse/[sectionId]/+page.svelte b/src/routes/browse/[sectionId]/+page.svelte new file mode 100644 index 00000000..e69de29b diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte index 52f836de..9c3c9fbb 100644 --- a/src/routes/contact/+page.svelte +++ b/src/routes/contact/+page.svelte @@ -52,8 +52,8 @@ id="full_name" name="full_name" type="text" - class="focus:outline-none focus:border focus:border-indigo-700 font-normal w-64 h-10 flex items-center pl-3 text-sm border-gray-300 rounded border" - placeholder="Full Name" + class="input input-bordered input-primary w-64 h-10 flex" + placeholder="Elizabeth Caledonia" aria-label="enter your full name input" />
@@ -66,7 +66,7 @@ id="email" name="email" type="email" - class="focus:outline-none focus:border focus:border-indigo-700 font-normal w-64 h-10 flex items-center pl-3 text-sm border-gray-300 rounded border" + class="input input-bordered input-primary w-64 h-10 flex" placeholder="example@email.com" aria-label="enter your email input" /> @@ -82,7 +82,7 @@ id="subject" name="subject" type="tel" - class="focus:outline-none focus:border focus:border-indigo-700 font-normal w-64 h-10 flex items-center pl-3 text-sm border-gray-300 rounded border" + class="input input-bordered input-primary w-64 h-10 flex" placeholder="Subject" aria-label="enter a subject" /> @@ -94,7 +94,7 @@