@aiquants/virtualscroll 2.1.0 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +102 -0
- package/README.md +94 -27
- package/dist/ScrollBar.d.ts.map +1 -1
- package/dist/VirtualScroll.d.ts.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +263 -254
- package/dist/styles/virtualscroll.css +1 -1
- package/dist/styles/virtualscroll.standalone.css +1 -1
- package/package.json +1 -1
- package/src/ScrollBar.tsx +7 -2
- package/src/VirtualScroll.tsx +25 -3
- package/src/styles/standalone.entry.css +5 -5
- package/src/styles/virtualscroll.css +22 -5
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@layer components{.aqvs-scroll-pane{display:flex;position:relative}.aqvs-scroll-pane-content{flex:1;height:100%;position:relative;overflow:hidden}.aqvs-tap-scroll-circle{touch-action:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;transition-property:transform;transition-duration:.1s;transition-timing-function:cubic-bezier(0,0,.2,1);display:flex;position:relative}.aqvs-tap-scroll-circle-visual-outer{border-radius:9999px;position:absolute;inset:0}.aqvs-tap-scroll-circle-gradient{background:linear-gradient(to bottom right,#1d4ed899,#60a5fa8c,#bfdbfe66);border
|
|
2
|
+
@layer components{.aqvs-scroll-pane{display:flex;position:relative}.aqvs-scroll-pane-content{box-sizing:border-box;flex:1;height:100%;position:relative;overflow:hidden}.aqvs-tap-scroll-circle{touch-action:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;transition-property:transform;transition-duration:.1s;transition-timing-function:cubic-bezier(0,0,.2,1);display:flex;position:relative}.aqvs-tap-scroll-circle-visual-outer{border-radius:9999px;position:absolute;inset:0}.aqvs-tap-scroll-circle-gradient{background:linear-gradient(to bottom right,#1d4ed899,#60a5fa8c,#bfdbfe66);border:1px solid #fff6;border-radius:9999px;position:absolute;inset:0;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.aqvs-tap-scroll-circle-inner{border-radius:9999px;position:absolute;inset:18%}.aqvs-sample-visual-pupil{box-sizing:border-box;background-color:#ffffffd9;border:1px solid #ffffff80;border-radius:9999px;position:absolute;top:50%;left:50%}.aqvs-sample-visual-highlight{background-color:#fffc;border-radius:9999px;position:absolute;top:50%;left:50%}.aqvs-sample-visual-rod{background-color:#ffffff80;border-radius:9999px;position:absolute;top:50%;left:50%}.aqvs-scrollbar{z-index:50;cursor:default;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none;background-color:#fff;position:relative}.aqvs-scrollbar-horizontal{flex-direction:row;align-items:stretch;display:flex}.aqvs-scrollbar-vertical{flex-direction:column;align-items:stretch;display:flex}.aqvs-scrollbar[data-visible=false],.aqvs-scrollbar-thumb-wrapper[data-visible=false]{opacity:0;pointer-events:none}.aqvs-scrollbar-tap-circle-wrapper{pointer-events:auto;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);position:absolute}.aqvs-scrollbar-arrow-button{color:#313131;letter-spacing:normal;background-color:#e0e0e0;border:0 solid;justify-content:center;align-items:center;padding:0;font-family:system-ui,sans-serif;font-size:.75rem;font-weight:400;line-height:1rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);display:flex}.aqvs-scrollbar-arrow-button:focus{outline-offset:2px;outline:2px solid #0000}.aqvs-scrollbar-arrow-button:focus-visible{outline-offset:1px;outline:2px solid #60a5fa}.aqvs-scrollbar-arrow-button:disabled{cursor:not-allowed;opacity:.5}.aqvs-scrollbar-arrow-button:enabled:hover{background-color:#d4d4d4}.aqvs-scrollbar-track{background-color:#f5f5f5;flex:1;position:relative}.aqvs-scrollbar-overlay{pointer-events:none;position:absolute;inset:0}.aqvs-scrollbar-thumb-wrapper{touch-action:none;position:absolute}.aqvs-scrollbar-thumb{transform-origin:50%;background-color:#7f7f7f;transition:transform 80ms ease-out;position:absolute}.aqvs-scrollbar-thumb[data-thumb-state=disabled]{transition:none;transform:none}.aqvs-scrollbar-thumb[data-thumb-state=hover]{background-color:#5f5f5f}.aqvs-scrollbar-thumb[data-thumb-state=dragging]{background-color:#4f4f4f;transition:transform 60ms ease-out}.aqvs-scrollbar-thumb-horizontal{inset:1.5px 0}.aqvs-scrollbar-thumb-horizontal[data-thumb-state=hover]{top:-.5px;bottom:-.5px;transform:scaleY(1.06)}.aqvs-scrollbar-thumb-horizontal[data-thumb-state=dragging]{top:-.5px;bottom:-.5px;transform:scaleY(1.12)}.aqvs-scrollbar-thumb-vertical{inset:0 1.5px}.aqvs-scrollbar-thumb-vertical[data-thumb-state=hover]{left:-.5px;right:-.5px;transform:scaleX(1.06)}.aqvs-scrollbar-thumb-vertical[data-thumb-state=dragging]{left:-.5px;right:-.5px;transform:scaleX(1.12)}.aqvs-scroll-to-edge-button{pointer-events:auto;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;color:#fff;text-transform:uppercase;letter-spacing:.05em;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#1f2937cc;border:0 solid;border-radius:9999px;padding:.25rem 3rem;font-family:inherit;font-size:10px;font-weight:500;line-height:1.5;transition-property:transform,background-color;transition-duration:.15s;transform:none;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.aqvs-scroll-to-edge-button:focus{outline-offset:2px;outline:2px solid #0000}.aqvs-scroll-to-edge-button:focus-visible{outline-offset:1px;outline:2px solid #60a5fa}.aqvs-scroll-to-edge-button:hover{background-color:#374151}.aqvs-scroll-to-edge-button:active{transform:scale(.95)}.aqvs-scroll-to-edge-overlay{pointer-events:none;z-index:10;transition-property:opacity;transition-duration:.5s;position:absolute;inset:0}.aqvs-scroll-to-edge-overlay[data-visible=true]{opacity:1}.aqvs-scroll-to-edge-overlay[data-visible=false]{opacity:0}.aqvs-scroll-to-edge-overlay[data-visible=false] .aqvs-scroll-to-edge-button{pointer-events:none}.aqvs-scroll-to-edge-button-container{justify-content:center;display:flex;position:absolute;left:0;right:0}.aqvs-scroll-to-edge-button-container-top{top:.5rem}.aqvs-scroll-to-edge-button-container-bottom{bottom:.5rem}.aqvs-no-items-container{width:100%;position:absolute;top:0}.aqvs-no-items-text{text-align:center;color:#6b7280}.aqvs-item-container,.aqvs-bottom-inset,.aqvs-items-wrapper{width:100%;position:absolute}}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
|
|
2
2
|
/*! @aiquants/virtualscroll standalone CSS — 非 Tailwind ホスト専用。ホストの Tailwind ビルドと混在させないこと */
|
|
3
|
-
@layer
|
|
3
|
+
@layer theme,base;@layer components{.aqvs-scroll-pane{display:flex;position:relative}.aqvs-scroll-pane-content{box-sizing:border-box;flex:1;height:100%;position:relative;overflow:hidden}.aqvs-tap-scroll-circle{touch-action:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;transition-property:transform;transition-duration:.1s;transition-timing-function:cubic-bezier(0,0,.2,1);display:flex;position:relative}.aqvs-tap-scroll-circle-visual-outer{border-radius:9999px;position:absolute;inset:0}.aqvs-tap-scroll-circle-gradient{background:linear-gradient(to bottom right,#1d4ed899,#60a5fa8c,#bfdbfe66);border:1px solid #fff6;border-radius:9999px;position:absolute;inset:0;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.aqvs-tap-scroll-circle-inner{border-radius:9999px;position:absolute;inset:18%}.aqvs-sample-visual-pupil{box-sizing:border-box;background-color:#ffffffd9;border:1px solid #ffffff80;border-radius:9999px;position:absolute;top:50%;left:50%}.aqvs-sample-visual-highlight{background-color:#fffc;border-radius:9999px;position:absolute;top:50%;left:50%}.aqvs-sample-visual-rod{background-color:#ffffff80;border-radius:9999px;position:absolute;top:50%;left:50%}.aqvs-scrollbar{z-index:50;cursor:default;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none;background-color:#fff;position:relative}.aqvs-scrollbar-horizontal{flex-direction:row;align-items:stretch;display:flex}.aqvs-scrollbar-vertical{flex-direction:column;align-items:stretch;display:flex}.aqvs-scrollbar[data-visible=false],.aqvs-scrollbar-thumb-wrapper[data-visible=false]{opacity:0;pointer-events:none}.aqvs-scrollbar-tap-circle-wrapper{pointer-events:auto;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);position:absolute}.aqvs-scrollbar-arrow-button{color:#313131;letter-spacing:normal;background-color:#e0e0e0;border:0 solid;justify-content:center;align-items:center;padding:0;font-family:system-ui,sans-serif;font-size:.75rem;font-weight:400;line-height:1rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);display:flex}.aqvs-scrollbar-arrow-button:focus{outline-offset:2px;outline:2px solid #0000}.aqvs-scrollbar-arrow-button:focus-visible{outline-offset:1px;outline:2px solid #60a5fa}.aqvs-scrollbar-arrow-button:disabled{cursor:not-allowed;opacity:.5}.aqvs-scrollbar-arrow-button:enabled:hover{background-color:#d4d4d4}.aqvs-scrollbar-track{background-color:#f5f5f5;flex:1;position:relative}.aqvs-scrollbar-overlay{pointer-events:none;position:absolute;inset:0}.aqvs-scrollbar-thumb-wrapper{touch-action:none;position:absolute}.aqvs-scrollbar-thumb{transform-origin:50%;background-color:#7f7f7f;transition:transform 80ms ease-out;position:absolute}.aqvs-scrollbar-thumb[data-thumb-state=disabled]{transition:none;transform:none}.aqvs-scrollbar-thumb[data-thumb-state=hover]{background-color:#5f5f5f}.aqvs-scrollbar-thumb[data-thumb-state=dragging]{background-color:#4f4f4f;transition:transform 60ms ease-out}.aqvs-scrollbar-thumb-horizontal{inset:1.5px 0}.aqvs-scrollbar-thumb-horizontal[data-thumb-state=hover]{top:-.5px;bottom:-.5px;transform:scaleY(1.06)}.aqvs-scrollbar-thumb-horizontal[data-thumb-state=dragging]{top:-.5px;bottom:-.5px;transform:scaleY(1.12)}.aqvs-scrollbar-thumb-vertical{inset:0 1.5px}.aqvs-scrollbar-thumb-vertical[data-thumb-state=hover]{left:-.5px;right:-.5px;transform:scaleX(1.06)}.aqvs-scrollbar-thumb-vertical[data-thumb-state=dragging]{left:-.5px;right:-.5px;transform:scaleX(1.12)}.aqvs-scroll-to-edge-button{pointer-events:auto;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;color:#fff;text-transform:uppercase;letter-spacing:.05em;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#1f2937cc;border:0 solid;border-radius:9999px;padding:.25rem 3rem;font-family:inherit;font-size:10px;font-weight:500;line-height:1.5;transition-property:transform,background-color;transition-duration:.15s;transform:none;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.aqvs-scroll-to-edge-button:focus{outline-offset:2px;outline:2px solid #0000}.aqvs-scroll-to-edge-button:focus-visible{outline-offset:1px;outline:2px solid #60a5fa}.aqvs-scroll-to-edge-button:hover{background-color:#374151}.aqvs-scroll-to-edge-button:active{transform:scale(.95)}.aqvs-scroll-to-edge-overlay{pointer-events:none;z-index:10;transition-property:opacity;transition-duration:.5s;position:absolute;inset:0}.aqvs-scroll-to-edge-overlay[data-visible=true]{opacity:1}.aqvs-scroll-to-edge-overlay[data-visible=false]{opacity:0}.aqvs-scroll-to-edge-overlay[data-visible=false] .aqvs-scroll-to-edge-button{pointer-events:none}.aqvs-scroll-to-edge-button-container{justify-content:center;display:flex;position:absolute;left:0;right:0}.aqvs-scroll-to-edge-button-container-top{top:.5rem}.aqvs-scroll-to-edge-button-container-bottom{bottom:.5rem}.aqvs-no-items-container{width:100%;position:absolute;top:0}.aqvs-no-items-text{text-align:center;color:#6b7280}.aqvs-item-container,.aqvs-bottom-inset,.aqvs-items-wrapper{width:100%;position:absolute}}@layer utilities;
|
package/package.json
CHANGED
package/src/ScrollBar.tsx
CHANGED
|
@@ -1489,11 +1489,14 @@ export const ScrollBar = ({
|
|
|
1489
1489
|
|
|
1490
1490
|
return (
|
|
1491
1491
|
<div
|
|
1492
|
-
className={twMerge("aqvs-scrollbar", directionClass,
|
|
1492
|
+
className={twMerge("aqvs-scrollbar", directionClass, className)}
|
|
1493
1493
|
style={{
|
|
1494
1494
|
[mainSizeKey]: viewportSize,
|
|
1495
1495
|
[crossSizeKey]: scrollBarWidth,
|
|
1496
1496
|
}}
|
|
1497
|
+
// 非表示はパッケージ CSS が担う。Tailwind ユーティリティ (opacity-0 等) に委ねると
|
|
1498
|
+
// components-only アーティファクトには同梱されず、ホストのビルド内容任せになる
|
|
1499
|
+
data-visible={scrollBarVisible ? "true" : "false"}
|
|
1497
1500
|
role="scrollbar"
|
|
1498
1501
|
tabIndex={-1}
|
|
1499
1502
|
aria-controls={ariaControls}
|
|
@@ -1536,12 +1539,14 @@ export const ScrollBar = ({
|
|
|
1536
1539
|
{/* DOMの再生成を防ぐため、常にレンダリングしてスタイルで表示制御を行う */}
|
|
1537
1540
|
<div
|
|
1538
1541
|
key="thumb-wrapper"
|
|
1539
|
-
className=
|
|
1542
|
+
className="aqvs-scrollbar-thumb-wrapper"
|
|
1540
1543
|
style={{
|
|
1541
1544
|
[mainSizeKey]: thumbSize,
|
|
1542
1545
|
[positionKey]: thumbPosition,
|
|
1543
1546
|
...(horizontal ? { top: 0, bottom: 0 } : { left: 0, right: 0 }),
|
|
1544
1547
|
}}
|
|
1548
|
+
// ルート同様、非表示はパッケージ CSS の [data-visible="false"] が担う
|
|
1549
|
+
data-visible={scrollBarVisible || isDragging ? "true" : "false"}
|
|
1545
1550
|
onPointerDown={handlePointerDownOnThumb}
|
|
1546
1551
|
role="slider"
|
|
1547
1552
|
aria-orientation={horizontal ? "horizontal" : "vertical"}
|
package/src/VirtualScroll.tsx
CHANGED
|
@@ -1723,9 +1723,27 @@ const VirtualScrollInner = <T,>(
|
|
|
1723
1723
|
}, [contentSize, renderingEndIndex, renderingStartIndex, resolvedInsets.top, scheduleRangeEffect, scrollPosition, visibleEndIndex, visibleStartIndex])
|
|
1724
1724
|
|
|
1725
1725
|
/**
|
|
1726
|
-
*
|
|
1726
|
+
* Renders the auto-hiding Top/Bottom pill overlay, neutralized while hidden.
|
|
1727
1727
|
*
|
|
1728
|
-
*
|
|
1728
|
+
* 自動非表示の Top/Bottom ピルのオーバーレイを描画し、非表示中は無効化する処理。
|
|
1729
|
+
*
|
|
1730
|
+
* ❗ 非表示は `opacity: 0` で表現するため、要素は DOM に残り続ける (フェードのために
|
|
1731
|
+
* アンマウントしない)。`opacity` はフォーカス可能性に影響せず、CSS の `pointer-events: none`
|
|
1732
|
+
* はポインタ操作しか止めないため、無効化しないと**キーボード操作者は一覧を通過するたびに
|
|
1733
|
+
* 「何も見えないのにフォーカスが止まる」箇所を必ず 1 つ踏む**。しかもフォーカスリング
|
|
1734
|
+
* (`:focus-visible`) は `opacity: 0` の要素に描かれるため見えず、そこで Enter/Space を押すと
|
|
1735
|
+
* 一覧が先頭または末尾へ飛ぶ (`pointer-events: none` はキーボードからの活性化を素通しする)。
|
|
1736
|
+
*
|
|
1737
|
+
* 無効化は焦点・支援技術・ポインタの 3 軸を 2 層で塞ぐ:
|
|
1738
|
+
*
|
|
1739
|
+
* 1. オーバーレイの `inert`: 焦点・ヒットテスト・アクセシビリティツリー露出を一括で外す
|
|
1740
|
+
* (この 1 属性が本質的な修正。React 19 は真偽値プロップとして扱い、false では属性を出さない)。
|
|
1741
|
+
* 2. ピルの `tabIndex`: `inert` 未実装のブラウザ (Firefox 112 未満など) でもタブ順から外れる
|
|
1742
|
+
* ようにする下限。`inert` と同じ `isVisible` から導出するため両者が食い違うことはない。
|
|
1743
|
+
*
|
|
1744
|
+
* ポインタ軸の下限は CSS 側の `.aqvs-scroll-to-edge-overlay[data-visible="false"]
|
|
1745
|
+
* .aqvs-scroll-to-edge-button { pointer-events: none }` が担う (配布 CSS 未読込のホストでは
|
|
1746
|
+
* `inert` が、`inert` 未実装のブラウザでは CSS が、互いの穴を埋める)。
|
|
1729
1747
|
*/
|
|
1730
1748
|
const renderOverlay = useCallback(() => {
|
|
1731
1749
|
if (!enableScrollToTopBottomButtons) {
|
|
@@ -1736,12 +1754,14 @@ const VirtualScrollInner = <T,>(
|
|
|
1736
1754
|
const isTop = scrollDirection === "up"
|
|
1737
1755
|
|
|
1738
1756
|
return (
|
|
1739
|
-
<div className="aqvs-scroll-to-edge-overlay" data-visible={isVisible}>
|
|
1757
|
+
<div className="aqvs-scroll-to-edge-overlay" data-visible={isVisible} inert={!isVisible}>
|
|
1740
1758
|
{isTop ? (
|
|
1741
1759
|
<div className="aqvs-scroll-to-edge-button-container aqvs-scroll-to-edge-button-container-top">
|
|
1742
1760
|
<button
|
|
1743
1761
|
type="button"
|
|
1744
1762
|
className="aqvs-scroll-to-edge-button"
|
|
1763
|
+
// 非表示中はタブ順から外す (inert 未実装ブラウザ向けの下限)
|
|
1764
|
+
tabIndex={isVisible ? 0 : -1}
|
|
1745
1765
|
onClick={(e) => {
|
|
1746
1766
|
e.stopPropagation()
|
|
1747
1767
|
isProgrammaticScrollRef.current = true
|
|
@@ -1756,6 +1776,8 @@ const VirtualScrollInner = <T,>(
|
|
|
1756
1776
|
<button
|
|
1757
1777
|
type="button"
|
|
1758
1778
|
className="aqvs-scroll-to-edge-button"
|
|
1779
|
+
// 非表示中はタブ順から外す (inert 未実装ブラウザ向けの下限)
|
|
1780
|
+
tabIndex={isVisible ? 0 : -1}
|
|
1759
1781
|
onClick={(e) => {
|
|
1760
1782
|
e.stopPropagation()
|
|
1761
1783
|
isProgrammaticScrollRef.current = true
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/*! @aiquants/virtualscroll standalone CSS — 非 Tailwind ホスト専用。ホストの Tailwind ビルドと混在させないこと */
|
|
2
2
|
/*
|
|
3
|
-
* Artifact B:
|
|
4
|
-
*
|
|
3
|
+
* Artifact B: 自己完結スタンドアロン。virtualscroll の JSX は `.aqvs-*` クラスしか書かないため
|
|
4
|
+
* (src/preflightIndependence.spec.ts が機械的に固定)、ユーティリティは生成しない。
|
|
5
|
+
* かつて `@source` でパッケージ内を走査していたが、spec ファイルの識別子や docstring の英単語を
|
|
6
|
+
* 誤検出して `.hidden` / `.container` / `.truncate` などを利用側の名前空間へ注入していたため撤去した。
|
|
7
|
+
* レイヤー順序の宣言だけは残し、利用側の utilities から `.aqvs-*` を上書きできる状態を保つ。
|
|
5
8
|
*/
|
|
6
9
|
@layer theme, base, components, utilities;
|
|
7
10
|
@import "tailwindcss/theme.css" layer(theme);
|
|
8
|
-
@import "tailwindcss/utilities.css" layer(utilities) source(none);
|
|
9
11
|
@import "./virtualscroll.css" layer(components);
|
|
10
|
-
@source "../**/*.{ts,tsx}";
|
|
11
|
-
@custom-variant dark (&:where(.dark, .dark *));
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
.aqvs-scroll-pane-content {
|
|
7
|
+
box-sizing: border-box;
|
|
7
8
|
position: relative;
|
|
8
9
|
height: 100%;
|
|
9
10
|
flex: 1 1 0%;
|
|
@@ -33,8 +34,7 @@
|
|
|
33
34
|
position: absolute;
|
|
34
35
|
inset: 0;
|
|
35
36
|
border-radius: 9999px;
|
|
36
|
-
border
|
|
37
|
-
border-color: rgba(255, 255, 255, 0.4);
|
|
37
|
+
border: 1px solid rgba(255, 255, 255, 0.4);
|
|
38
38
|
box-shadow:
|
|
39
39
|
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
|
40
40
|
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
@@ -47,12 +47,12 @@
|
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
.aqvs-sample-visual-pupil {
|
|
50
|
+
box-sizing: border-box;
|
|
50
51
|
position: absolute;
|
|
51
52
|
top: 50%;
|
|
52
53
|
left: 50%;
|
|
53
54
|
border-radius: 9999px;
|
|
54
|
-
border
|
|
55
|
-
border-color: rgba(255, 255, 255, 0.5);
|
|
55
|
+
border: 1px solid rgba(255, 255, 255, 0.5);
|
|
56
56
|
background-color: rgba(255, 255, 255, 0.85);
|
|
57
57
|
}
|
|
58
58
|
|
|
@@ -77,6 +77,7 @@
|
|
|
77
77
|
z-index: 50;
|
|
78
78
|
cursor: default;
|
|
79
79
|
user-select: none;
|
|
80
|
+
-webkit-tap-highlight-color: transparent;
|
|
80
81
|
background-color: white;
|
|
81
82
|
touch-action: none;
|
|
82
83
|
}
|
|
@@ -93,6 +94,12 @@
|
|
|
93
94
|
align-items: stretch;
|
|
94
95
|
}
|
|
95
96
|
|
|
97
|
+
.aqvs-scrollbar[data-visible="false"],
|
|
98
|
+
.aqvs-scrollbar-thumb-wrapper[data-visible="false"] {
|
|
99
|
+
opacity: 0;
|
|
100
|
+
pointer-events: none;
|
|
101
|
+
}
|
|
102
|
+
|
|
96
103
|
.aqvs-scrollbar-tap-circle-wrapper {
|
|
97
104
|
pointer-events: auto;
|
|
98
105
|
position: absolute;
|
|
@@ -107,8 +114,13 @@
|
|
|
107
114
|
display: flex;
|
|
108
115
|
align-items: center;
|
|
109
116
|
justify-content: center;
|
|
117
|
+
border: 0 solid;
|
|
118
|
+
padding: 0;
|
|
119
|
+
font-family: system-ui, sans-serif;
|
|
110
120
|
font-size: 0.75rem;
|
|
121
|
+
font-weight: 400;
|
|
111
122
|
line-height: 1rem;
|
|
123
|
+
letter-spacing: normal;
|
|
112
124
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
|
113
125
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
114
126
|
transition-duration: 150ms;
|
|
@@ -215,10 +227,11 @@
|
|
|
215
227
|
user-select: none;
|
|
216
228
|
-webkit-tap-highlight-color: transparent;
|
|
217
229
|
transform: none;
|
|
218
|
-
border:
|
|
230
|
+
border: 0 solid;
|
|
219
231
|
border-radius: 9999px;
|
|
220
232
|
background-color: rgba(31, 41, 55, 0.8);
|
|
221
233
|
padding: 0.25rem 3rem;
|
|
234
|
+
font-family: inherit;
|
|
222
235
|
font-weight: 500;
|
|
223
236
|
font-size: 10px;
|
|
224
237
|
line-height: 1.5;
|
|
@@ -268,6 +281,10 @@
|
|
|
268
281
|
opacity: 0;
|
|
269
282
|
}
|
|
270
283
|
|
|
284
|
+
.aqvs-scroll-to-edge-overlay[data-visible="false"] .aqvs-scroll-to-edge-button {
|
|
285
|
+
pointer-events: none;
|
|
286
|
+
}
|
|
287
|
+
|
|
271
288
|
.aqvs-scroll-to-edge-button-container {
|
|
272
289
|
position: absolute;
|
|
273
290
|
left: 0;
|