alex/daichendt.one
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: table indication for sideway scroll

Browse source
This commit is contained in:
Alexander Daichendt 2022-07-27 00:27:30 +02:00
parent 256ffc4370
commit 5be4f06cdf
2 changed files with 12 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/components/Link.svelte
View file

@ -39,7 +39,6 @@
color: var(--special-color); color: var(--special-color);
text-decoration: none; text-decoration: none;
font-weight: 550; font-weight: 550;
white-space: nowrap;
} }
a:hover { a:hover {
color: var(--outline-color); color: var(--outline-color);

14
src/components/Table.svelte
View file

@ -1,7 +1,7 @@
<script> <script>
</script> </script>
<div> <div tabindex="0">
<table id="table"> <table id="table">
<slot /> <slot />
</table> </table>
@ -13,8 +13,18 @@
padding: 1rem; padding: 1rem;
box-shadow: 0px 0px 2px var(--shadow-color); box-shadow: 0px 0px 2px var(--shadow-color);
border: 1px solid var(--outline-color); border: 1px solid var(--outline-color);
overflow-x: auto; overflow: auto;
background: linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)),
linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 0 100%,
radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),
radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
background-repeat: no-repeat;
background-color: white;
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
background-position: 0 0, 100%, 0 0, 100%;
background-attachment: local, local, scroll, scroll;
} }
table { table {
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;