initial commit

fluxer_app/src/components/uikit/Scroller.module.css

@@ -0,0 +1,178 @@
+/*
+ * Copyright (C) 2026 Fluxer Contributors
+ *
+ * This file is part of Fluxer.
+ *
+ * Fluxer is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Fluxer is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Fluxer. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+.scrollerWrap {
+	--scroller-track-size: 8px;
+	position: relative;
+	display: flex;
+	min-height: 0;
+	min-width: 0;
+	height: 100%;
+	flex: 1 1 0%;
+	padding-inline-end: var(--scroller-track-size);
+}
+
+.scroller {
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	min-width: 0;
+	height: 100%;
+	flex: 1 1 0%;
+	overscroll-behavior: contain;
+	overflow-anchor: none;
+	scrollbar-gutter: stable;
+	scrollbar-width: thin;
+	scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-track-bg, transparent);
+	margin-inline-end: calc(var(--scroller-track-size) * -1);
+}
+
+.scroller::-webkit-scrollbar {
+	width: var(--scroller-track-size);
+	height: var(--scroller-track-size);
+}
+
+.scroller::-webkit-scrollbar-track {
+	background-color: var(--scrollbar-track-bg, transparent);
+}
+
+.scroller::-webkit-scrollbar-thumb {
+	background-color: var(--scrollbar-thumb-bg);
+	border-radius: 4px;
+	transition: background-color 0.2s ease;
+}
+
+.scroller::-webkit-scrollbar-thumb:hover {
+	background-color: var(--scrollbar-thumb-bg-hover);
+}
+
+.fade::-webkit-scrollbar-thumb {
+	background-color: transparent;
+	transition: background-color 0.15s ease-out;
+}
+
+.fade::-webkit-scrollbar-track {
+	background-color: transparent;
+}
+
+.fade:hover::-webkit-scrollbar-thumb,
+.fade.scrolling::-webkit-scrollbar-thumb {
+	background-color: var(--scrollbar-thumb-bg);
+}
+
+.fade:hover::-webkit-scrollbar-thumb:hover,
+.fade.scrolling::-webkit-scrollbar-thumb:hover {
+	background-color: var(--scrollbar-thumb-bg-hover);
+}
+
+.fade {
+	scrollbar-width: thin;
+	scrollbar-color: transparent transparent;
+}
+
+.fade:hover,
+.fade.scrolling {
+	scrollbar-color: var(--scrollbar-thumb-bg) transparent;
+}
+
+.horizontal .scroller {
+	overscroll-behavior-x: contain;
+	overscroll-behavior-y: none;
+}
+
+.noScrollbarReserve {
+	padding-inline-end: 0;
+}
+
+.noScrollbarReserve .scroller {
+	margin-inline-end: 0;
+	scrollbar-gutter: auto;
+}
+
+.noScrollbarReserve.horizontal {
+	padding-block-end: 0;
+}
+
+.noScrollbarReserve.horizontal .scroller {
+	margin-block-end: 0;
+}
+
+.scrollerChildren {
+	display: flex;
+	flex: 1 1 0%;
+	flex-direction: column;
+	min-height: 0;
+	min-width: 0;
+}
+
+.horizontal .scrollerChildren {
+	margin-inline-end: 0;
+}
+
+.regular {
+	--scroller-track-size: 16px;
+}
+
+.scroller.regular {
+	scrollbar-width: auto;
+	scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-track-bg, transparent);
+}
+
+.regular::-webkit-scrollbar-thumb {
+	min-height: 40px;
+}
+
+.regular::-webkit-scrollbar-thumb,
+.regular::-webkit-scrollbar-track {
+	border: 4px solid transparent;
+	background-clip: padding-box;
+	border-radius: 8px;
+}
+
+.windowBlurred {
+	scrollbar-color: transparent transparent;
+}
+
+.windowBlurred::-webkit-scrollbar-track {
+	background-color: transparent;
+}
+
+.windowBlurred::-webkit-scrollbar-thumb,
+.windowBlurred:hover::-webkit-scrollbar-thumb,
+.windowBlurred.scrolling::-webkit-scrollbar-thumb,
+.windowBlurred.fade:hover::-webkit-scrollbar-thumb,
+.windowBlurred.fade.scrolling::-webkit-scrollbar-thumb {
+	background-color: transparent;
+}
+
+.horizontal.scrollerWrap {
+	padding-inline-end: 0;
+	padding-block-end: var(--scroller-track-size);
+	height: auto;
+	flex: 0 1 auto;
+	width: 100%;
+}
+
+.horizontal .scroller {
+	margin-inline-end: 0;
+	margin-block-end: calc(var(--scroller-track-size) * -1);
+	height: auto;
+	flex: 0 1 auto;
+	width: 100%;
+}