mincomk/risuai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[feat] scrollbar opacitiy on hover, focus

Browse Source
This commit is contained in:
kwaroran
2023-07-26 07:19:06 +09:00
parent 0398519633
commit 802ad23ec4
2 changed files with 18 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/UI/GUI/TextAreaInput.svelte
View File

@@ -1,6 +1,6 @@
{#if optimaizedInput}
<textarea
class={"border border-gray-600 focus:border-borderc resize-none rounded-md shadow-sm text-white bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')}
class={"border border-gray-600 n-scroll focus:border-borderc resize-none rounded-md shadow-sm text-white bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')}
class:text-sm={size === 'sm'}
class:text-md={size === 'md'}
class:text-lg={size === 'lg'}
@@ -36,7 +36,7 @@
/>
{:else}
<textarea
class={"border border-gray-600 focus:border-borderc resize-none rounded-md shadow-sm text-white bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')}
class={"border border-gray-600 n-scroll focus:border-borderc resize-none rounded-md shadow-sm text-white bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')}
class:text-sm={size === 'sm'}
class:text-md={size === 'md'}
class:text-lg={size === 'lg'}

16
src/styles.css
View File

@@ -69,6 +69,22 @@ html, body{
background: rgba(85, 85, 85, 0.5);
}
.n-scroll::-webkit-scrollbar-thumb {
visibility: hidden;
opacity: 0;
transition: visibility 0.5s, opacity 0.5s linear;
}
.n-scroll:hover::-webkit-scrollbar-thumb {
visibility: visible;
opacity: 1;
}
.n-scroll:focus::-webkit-scrollbar-thumb {
visibility: visible;
opacity: 1;
}
*{
font-family: Arial, Helvetica, sans-serif;
}