From 4a850cf63a483808fdb573386df5bdb81eb37cee Mon Sep 17 00:00:00 2001 From: Devamchaudhari Date: Sun, 2 Feb 2025 18:58:57 +0530 Subject: [PATCH 1/2] Enhance snippet display with scrollbar --- src/styles/main.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/styles/main.css b/src/styles/main.css index d0f2a08f..ca5c73b1 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -599,6 +599,25 @@ abbr { auto-fill, minmax(min(17.5rem, 100%), 1fr) ); /* [1] */ + height: 100%; + max-height: 100vh; + overflow-y: auto; + overflow-x: hidden; + padding-bottom: 1rem; + align-content: start; +} + +.snippets::-webkit-scrollbar { + width: 8px; +} + +.snippets::-webkit-scrollbar-thumb { + background: #888; + border-radius: 4px; +} + +.snippets::-webkit-scrollbar-thumb:hover { + background: #555; } .snippet { From 07e55513ecae65bc16c37c7c85e1f57edd45eb9e Mon Sep 17 00:00:00 2001 From: Devamchaudhari Date: Tue, 4 Feb 2025 23:07:16 +0530 Subject: [PATCH 2/2] Add scrollbar theming and adjust snippet container --- src/styles/main.css | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/src/styles/main.css b/src/styles/main.css index 9e34ab40..843f8a88 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -26,6 +26,8 @@ --clr-neutral-900: hsl(0, 0%, 5%); --clr-accent-dark: hsl(181, 100%, 36%); --clr-accent-light: hsl(181, 100%, 22%); + --scrollbar-thumb-light: hsl(0, 0%, 73%); + --scrollbar-thumb-dark: hsl(0, 0%, 33%); /* Main colors - For theming */ --clr-accent: var(--clr-accent-dark); @@ -79,6 +81,9 @@ --br-sm: 0.25rem; --br-md: 0.5rem; --br-lg: 0.75rem; + + /* webkit scrollbar */ + --scrollbar-thumb: var(--scrollbar-thumb-dark); } /*------------------------------------*\ @@ -105,6 +110,8 @@ --clr-gradient-secondary-1: var(--clr-neutral-100); --clr-gradient-secondary-2: var(--clr-neutral-200); + + --scrollbar-thumb: var(--scrollbar-thumb-light); } /*------------------------------------*\ @@ -604,10 +611,11 @@ abbr { minmax(min(17.5rem, 100%), 1fr) ); /* [1] */ height: 100%; - max-height: 100vh; + min-height: 25vh; + max-height: 90vh; overflow-y: auto; overflow-x: hidden; - padding-bottom: 1rem; + padding: 0.5rem 1rem 1rem 1rem; align-content: start; } @@ -616,12 +624,12 @@ abbr { } .snippets::-webkit-scrollbar-thumb { - background: #888; + background: var(--scrollbar-thumb); border-radius: 4px; } .snippets::-webkit-scrollbar-thumb:hover { - background: #555; + background: var(--scrollbar-thumb); } .snippet { pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy