From 9ff44091bff9d758f90416093d656b6490e753d2 Mon Sep 17 00:00:00 2001 From: Nih1tGupta Date: Thu, 27 Jun 2024 13:29:25 +0530 Subject: [PATCH] Customized scrollbar --- Css-files/cart.css | 22 ++++++++++++++++++++++ Css-files/cateringservices.css | 21 +++++++++++++++++++++ Css-files/content.css | 22 ++++++++++++++++++++++ Css-files/detailed-dish.css | 21 +++++++++++++++++++++ Css-files/offers.css | 20 +++++++++++++++----- Css-files/services.css | 24 +++++++++++++++++++++++- Css-files/services1.css | 23 ++++++++++++++++++++++- Css-files/style.css | 10 ++++++++++ style.css | 16 +++++++++------- 9 files changed, 165 insertions(+), 14 deletions(-) diff --git a/Css-files/cart.css b/Css-files/cart.css index 968e141c..f3333bec 100644 --- a/Css-files/cart.css +++ b/Css-files/cart.css @@ -197,3 +197,25 @@ background-size: 100% 100%;} font-size: 28px; font-weight: bold; } + +::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6); + background-image: linear-gradient(to top, rgb(246, 10, 10) , rgb(248, 145, 49), rgb(236, 239, 56)); + } + + ::-webkit-scrollbar { + width:12px; + + } + + ::-webkit-scrollbar-thumb { + background-color: #ff0707; + border-radius: 10px; + border:.3px solid white; + background-image: -webkit-linear-gradient(90deg, + rgb(20, 21, 12) 0%, + rgb(0, 0, 0) 25%, + transparent 100%, + rgb(247, 4, 4) 75%, + transparent) + } \ No newline at end of file diff --git a/Css-files/cateringservices.css b/Css-files/cateringservices.css index 191c099d..7672bf3e 100644 --- a/Css-files/cateringservices.css +++ b/Css-files/cateringservices.css @@ -111,3 +111,24 @@ textarea { #butt:hover { background-color: rgb(196, 89, 89); } +::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6); + background-image: linear-gradient(to top, rgb(246, 10, 10) , rgb(248, 145, 49), rgb(236, 239, 56)); +} + +::-webkit-scrollbar { + width:12px; + +} + +::-webkit-scrollbar-thumb { + background-color: #ff0707; + border-radius: 10px; + border:.3px solid white; + background-image: -webkit-linear-gradient(90deg, + rgb(20, 21, 12) 0%, + rgb(0, 0, 0) 25%, + transparent 100%, + rgb(247, 4, 4) 75%, + transparent) +} \ No newline at end of file diff --git a/Css-files/content.css b/Css-files/content.css index ae3bc2ab..c2130374 100644 --- a/Css-files/content.css +++ b/Css-files/content.css @@ -757,3 +757,25 @@ td { margin-top: 250px; margin-left: 100px; } */ + +::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6); + background-image: linear-gradient(to top, rgb(246, 10, 10) , rgb(248, 145, 49), rgb(236, 239, 56)); + } + + ::-webkit-scrollbar { + width:12px; + + } + + ::-webkit-scrollbar-thumb { + background-color: #ff0707; + border-radius: 10px; + border:.3px solid white; + background-image: -webkit-linear-gradient(90deg, + rgb(20, 21, 12) 0%, + rgb(0, 0, 0) 25%, + transparent 100%, + rgb(247, 4, 4) 75%, + transparent) + } \ No newline at end of file diff --git a/Css-files/detailed-dish.css b/Css-files/detailed-dish.css index 9a7cafe3..1b08c770 100644 --- a/Css-files/detailed-dish.css +++ b/Css-files/detailed-dish.css @@ -118,3 +118,24 @@ gap: 10px; } } +::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6); + background-image: linear-gradient(to top, rgb(246, 10, 10) , rgb(248, 145, 49), rgb(236, 239, 56)); + } + + ::-webkit-scrollbar { + width:12px; + + } + + ::-webkit-scrollbar-thumb { + background-color: #ff0707; + border-radius: 10px; + border:.3px solid white; + background-image: -webkit-linear-gradient(90deg, + rgb(20, 21, 12) 0%, + rgb(0, 0, 0) 25%, + transparent 100%, + rgb(247, 4, 4) 75%, + transparent) + } \ No newline at end of file diff --git a/Css-files/offers.css b/Css-files/offers.css index 2da2a793..46a2b94d 100644 --- a/Css-files/offers.css +++ b/Css-files/offers.css @@ -66,16 +66,26 @@ body { ========================================= */ -::-webkit-scrollbar { - width: 0.625rem; +::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6); + background-image: linear-gradient(to top, rgb(246, 10, 10) , rgb(248, 145, 49), rgb(236, 239, 56)); } -::-webkit-scrollbar-track { - background: var(--white-color); +::-webkit-scrollbar { + width:12px; + } ::-webkit-scrollbar-thumb { - background: var(--secondry-color); + background-color: #ff0707; + border-radius: 10px; + border:.3px solid white; + background-image: -webkit-linear-gradient(90deg, + rgb(20, 21, 12) 0%, + rgb(0, 0, 0) 25%, + transparent 100%, + rgb(247, 4, 4) 75%, + transparent) } /* diff --git a/Css-files/services.css b/Css-files/services.css index a33da903..742a3595 100644 --- a/Css-files/services.css +++ b/Css-files/services.css @@ -182,4 +182,26 @@ textarea { #butt:hover { background-color: rgb(196, 89, 89); -} \ No newline at end of file +} + +::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6); + background-image: linear-gradient(to top, rgb(246, 10, 10) , rgb(248, 145, 49), rgb(236, 239, 56)); + } + + ::-webkit-scrollbar { + width:12px; + + } + + ::-webkit-scrollbar-thumb { + background-color: #ff0707; + border-radius: 10px; + border:.3px solid white; + background-image: -webkit-linear-gradient(90deg, + rgb(20, 21, 12) 0%, + rgb(0, 0, 0) 25%, + transparent 100%, + rgb(247, 4, 4) 75%, + transparent) + } \ No newline at end of file diff --git a/Css-files/services1.css b/Css-files/services1.css index 22fff31f..7bb5a755 100644 --- a/Css-files/services1.css +++ b/Css-files/services1.css @@ -90,4 +90,25 @@ font-weight: 500; text-decoration: 8px; border-radius: 8px; -} \ No newline at end of file +} +::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6); + background-image: linear-gradient(to top, rgb(246, 10, 10) , rgb(248, 145, 49), rgb(236, 239, 56)); + } + + ::-webkit-scrollbar { + width:12px; + + } + + ::-webkit-scrollbar-thumb { + background-color: #ff0707; + border-radius: 10px; + border:.3px solid white; + background-image: -webkit-linear-gradient(90deg, + rgb(20, 21, 12) 0%, + rgb(0, 0, 0) 25%, + transparent 100%, + rgb(247, 4, 4) 75%, + transparent) + } \ No newline at end of file diff --git a/Css-files/style.css b/Css-files/style.css index 2f957a8e..bf9d8283 100644 --- a/Css-files/style.css +++ b/Css-files/style.css @@ -843,4 +843,14 @@ textarea { height: fit-content; padding: 100px; } +} +::-webkit-scrollbar{ + width:20px; +} +::-webkit-scrollbar-track{ + background: red; +} +::-webkit-scrollbar-thumb{ + border-radius: 12px; + background-color: yellow; } \ No newline at end of file diff --git a/style.css b/style.css index bb54253c..6542c408 100644 --- a/style.css +++ b/style.css @@ -47,22 +47,24 @@ body { /*Scrollbar Style*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6); - background-color: #CCCCCC; + /* background-image: linear-gradient(to top, rgb(246, 10, 10) , rgb(248, 145, 49), rgb(236, 239, 56)); */ + background-color: white; } ::-webkit-scrollbar { - width: 10px; - background-color: #F5F5F5; + width:12px; + } ::-webkit-scrollbar-thumb { - background-color: #FFF; + background-color: #ff0707; border-radius: 10px; + border:.3px solid white; background-image: -webkit-linear-gradient(90deg, - rgba(0, 0, 0, 1) 0%, - rgba(0, 0, 0, 1) 25%, + rgb(20, 21, 12) 0%, + rgb(0, 0, 0) 25%, transparent 100%, - rgba(0, 0, 0, 1) 75%, + rgb(247, 4, 4) 75%, transparent) }