shaamilahmed/Htmx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: resolve table scrollbar gap by using transparent scroll tracks and linear background gradient on container

Browse Source
This commit is contained in:
Enciphered
2026-05-31 06:19:14 +05:00
parent 360c9edcef
commit 61fd356846
3 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/input.css
+2 -2
View File
@@ -76,7 +76,7 @@ html, body {
/* Custom Scrollbars */ /* Custom Scrollbars */
* { * {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: rgba(100, 116, 139, 0.5) rgba(15, 23, 42, 0.4); scrollbar-color: rgba(100, 116, 139, 0.5) transparent;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
@@ -89,7 +89,7 @@ html, body {
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: rgba(15, 23, 42, 0.4); background: transparent;
border-radius: 9999px; border-radius: 9999px;
} }
static/tailwind.css
+2 -2
View File
@@ -2545,7 +2545,7 @@ html, body {
} }
* { * {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: rgba(100, 116, 139, 0.5) rgba(15, 23, 42, 0.4); scrollbar-color: rgba(100, 116, 139, 0.5) transparent;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 8px;
@@ -2555,7 +2555,7 @@ html, body {
display: none; display: none;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: rgba(15, 23, 42, 0.4); background: transparent;
border-radius: 9999px; border-radius: 9999px;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
templates/components/macros.html
+1 -1
View File
@@ -392,7 +392,7 @@
{% macro table_container_open(id, max_height="68vh") %} {% macro table_container_open(id, max_height="68vh") %}
<!-- Table Container --> <!-- Table Container -->
<div class="bg-[#1e293b]/40 backdrop-blur-xl border border-slate-900 rounded-3xl shadow-2xl mb-8 overflow-hidden"> <div class="bg-[#1e293b]/40 backdrop-blur-xl border border-slate-900 rounded-3xl shadow-2xl mb-8 overflow-hidden">
<div id="{{ id }}-container" class="overflow-x-auto overflow-y-overlay scrollbar-thin rounded-[22px]" style="max-height: {{ max_height }};"> <div id="{{ id }}-container" class="overflow-x-auto overflow-y-auto scrollbar-thin rounded-[22px]" style="max-height: {{ max_height }}; background: linear-gradient(to bottom, #162031 58px, transparent 58px);">
{% endmacro %} {% endmacro %}
{% macro table_container_close(id) %} {% macro table_container_close(id) %}