Skip to content

Commit

Permalink
chore: fix scrollbar styling :)
Browse files Browse the repository at this point in the history
  • Loading branch information
kiosion committed Oct 22, 2024
1 parent 10f5739 commit da7d121
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 8 deletions.
2 changes: 1 addition & 1 deletion svelte-app/src/components/sidebar.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
</script>

<div
class="min-h-fith-full flex w-full flex-col gap-5 rounded-xl transition-all duration-300 ease-in-out lg:ml-auto lg:max-w-xs lg:overflow-y-auto xl:max-w-sm 2xl:max-w-md"
class="themed-scrollbar min-h-fith-full flex w-full flex-col gap-5 rounded-xl transition-all duration-300 ease-in-out lg:ml-auto lg:max-w-xs lg:overflow-y-auto xl:max-w-sm 2xl:max-w-md"
>
<BaseContainer
class="order-2 flex flex-col items-start justify-start gap-y-4 p-4 lg:order-1"
Expand Down
2 changes: 1 addition & 1 deletion svelte-app/src/routes/+layout.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@

<div class="main mx-auto h-full w-full p-5 text-dark dark:text-light lg:text-lg">
<div
class="flex h-full w-full flex-col gap-5 overflow-x-hidden overflow-y-scroll rounded-xl lg:h-full lg:flex-row lg:overflow-y-hidden"
class="themed-scrollbar flex h-full w-full flex-col gap-5 overflow-x-hidden overflow-y-scroll rounded-xl lg:h-full lg:flex-row lg:overflow-y-hidden"
>
<Sidebar config={data.config} toruData={data.toruData} {scrollContainer} />

Expand Down
23 changes: 17 additions & 6 deletions svelte-app/src/styles/_tw.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import 'colors';

@layer base {
body {
@apply h-full w-full overflow-x-hidden;
Expand All @@ -24,10 +26,10 @@
img {
box-sizing: border-box;
}

body {
@apply bg-neutral-800 text-light;

&.light {
@apply bg-neutral-0 text-dark;
}
Expand All @@ -52,7 +54,7 @@
}
}
}

::selection {
@apply bg-orange-light/90 text-light;
}
Expand All @@ -71,28 +73,37 @@

&,
&-sm {
@apply focus-visible:outline outline-orange-light outline-2;
@apply outline-2 outline-orange-light focus-visible:outline;
}

&-sm {
@apply outline-offset-2;
}
}

.themed-scrollbar {
scrollbar-width: thin;
scrollbar-color: $neutral-200 transparent;

.dark & {
scrollbar-color: $neutral-400 transparent;
}
}
}

@layer components {
.pt-ol {
li {
ol {
@apply list-[lower-alpha] my-3;
@apply my-3 list-[lower-alpha];
}
}
}

.pt-ul {
li {
ul {
@apply list-disc my-3;
@apply my-3 list-disc;
}
}
}
Expand Down

0 comments on commit da7d121

Please sign in to comment.