From 0de39c8f4faa3bdf1c806447542c79ceed484c4b Mon Sep 17 00:00:00 2001 From: bird_d Date: Thu, 31 Aug 2023 00:52:05 -0400 Subject: [PATCH 1/3] Image Feed: Fix Scrolling --- web/js/imageFeed.js | 1 + 1 file changed, 1 insertion(+) diff --git a/web/js/imageFeed.js b/web/js/imageFeed.js index 94ce127..0443163 100644 --- a/web/js/imageFeed.js +++ b/web/js/imageFeed.js @@ -165,6 +165,7 @@ $el("style", { transition: 100ms linear; } .pysssss-image-feed-list div { + height: 100%; text-align: center; } .pysssss-image-feed-list img { From 6d8298e84c17835f8481fa98d3f4fe2485de1fe3 Mon Sep 17 00:00:00 2001 From: bird_d Date: Thu, 31 Aug 2023 03:11:07 -0400 Subject: [PATCH 2/3] Image Feed: Polish Style Also themes the webkit scrollbar. --- web/js/imageFeed.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/web/js/imageFeed.js b/web/js/imageFeed.js index 0443163..5bdb6af 100644 --- a/web/js/imageFeed.js +++ b/web/js/imageFeed.js @@ -163,15 +163,36 @@ $el("style", { grid-auto-rows: min-content; grid-template-columns: repeat(var(--img-sz, 3), 1fr); transition: 100ms linear; + scrollbar-gutter: stable both-edges; + padding: 5px; + background: var(--comfy-input-bg); + border-radius: 5px; + margin: 5px; + margin-top: 0px; } .pysssss-image-feed-list div { height: 100%; text-align: center; } + .pysssss-image-feed-list::-webkit-scrollbar { + background: var(--comfy-input-bg); + border-radius: 5px; + } + .pysssss-image-feed-list::-webkit-scrollbar-thumb { + background:var(--comfy-menu-bg); + border: 5px solid transparent; + border-radius: 8px; + background-clip: content-box; + } + .pysssss-image-feed-list::-webkit-scrollbar-thumb:hover { + background: var(--border-color); + background-clip: content-box; + } .pysssss-image-feed-list img { object-fit: var(--img-fit, contain); max-width: 100%; max-height: calc(var(--max-size) * 1vh); + border-radius: 4px; } .pysssss-image-feed-list img:hover { filter: brightness(1.2); From 9aa9c3eaddb008ba10a71c6ccbcd7e5d342c6c6d Mon Sep 17 00:00:00 2001 From: bird_d Date: Thu, 31 Aug 2023 17:01:26 -0400 Subject: [PATCH 3/3] Image Feed: Fix padding for bottom location When feed is on the bottom, the top of the image feed gets padding. In all other locations this would be extra padding, so only apply here. --- web/js/imageFeed.js | 1 + 1 file changed, 1 insertion(+) diff --git a/web/js/imageFeed.js b/web/js/imageFeed.js index 5bdb6af..c0ccce2 100644 --- a/web/js/imageFeed.js +++ b/web/js/imageFeed.js @@ -26,6 +26,7 @@ $el("style", { .pysssss-image-feed--bottom { bottom: 0; flex-direction: column-reverse; + padding-top: 5px; } .pysssss-image-feed--left, .pysssss-image-feed--right { top: 0;