From 0345e5bfbfce5ba3c9d90e239fc7d2b6adaea2ea Mon Sep 17 00:00:00 2001 From: Nur Hasin Ahammad Date: Fri, 27 Feb 2026 02:49:53 +0600 Subject: [PATCH] feat(ui): add custom themed scrollbar across all pages --- .../crop_yield_app/templates/index.html | 26 +++++++++++++++- about.css | 19 ++++++++++++ blog.css | 19 ++++++++++++ contact.css | 31 +++++++++++++++++++ crop.html | 19 ++++++++++++ faq.css | 19 ++++++++++++ feed-back.html | 22 +++++++++++++ finance_bot.html | 28 +++++++++++++++++ financial-support.html | 18 +++++++++++ forum.css | 19 ++++++++++++ index.html | 20 ++++++++++++ marketplace.html | 19 ++++++++++++ news.css | 19 ++++++++++++ privacy-policy.html | 30 ++++++++++++++++++ supply-chain.html | 26 +++++++++++++++- sustainable-farming.html | 19 ++++++++++++ theme.css | 2 +- 17 files changed, 352 insertions(+), 3 deletions(-) diff --git a/Crop Yield Prediction/crop_yield_app/templates/index.html b/Crop Yield Prediction/crop_yield_app/templates/index.html index fd74e863..dabfb220 100644 --- a/Crop Yield Prediction/crop_yield_app/templates/index.html +++ b/Crop Yield Prediction/crop_yield_app/templates/index.html @@ -39,10 +39,13 @@ --bg-card: #ffffff; --bg-header: rgba(255, 255, 255, 0.9); --bg-secondary-btn: transparent; + --secondary: #70828f; --bg-hover-soft: #f9fdf9; --text-primary: #1e2f1e; --text-secondary: #4a5568; + --text-muted: #b2ffbf; --border-color: #e2e8f0; + --border: #caefe3; --border-color-soft: rgba(45, 143, 133, 0.1); --shadow-light: rgba(42, 122, 42, 0.08); --shadow-medium: rgba(42, 122, 42, 0.15); @@ -61,11 +64,14 @@ --bg-page: #011337; --bg-card: #31405a; --bg-header: rgba(29, 50, 86, 0.9); - --bg-secondary-btn: transparent; + --bg-secondary-btn: transparent; + --secondary: #70828f; --bg-hover-soft: #394354; --text-primary: #e2e8f0; --text-secondary: #a0aec0; + --text-muted: #6996d5; --border-color: #4a5568; + --border: #4a5568; --border-color-soft: rgba(102, 199, 179, 0.15); --shadow-light: rgba(0, 0, 0, 0.3); --shadow-medium: rgba(0, 0, 0, 0.5); @@ -644,6 +650,24 @@ box-shadow: 0 0 20px #22c55e; } +/* Custom Scrollbar */ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: var(--secondary); +} + +::-webkit-scrollbar-thumb { + background: var(--border); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--text-muted); +} diff --git a/about.css b/about.css index ea4f2f99..a925025f 100644 --- a/about.css +++ b/about.css @@ -625,3 +625,22 @@ a { background-color: #22c55e; box-shadow: 0 0 20px #22c55e; } + +/* Custom Scrollbar */ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: var(--bg-secondary); +} + +::-webkit-scrollbar-thumb { + background: var(--border-color); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--text-muted); +} \ No newline at end of file diff --git a/blog.css b/blog.css index 9e4acd66..3201c83e 100644 --- a/blog.css +++ b/blog.css @@ -620,6 +620,25 @@ body { background: #999; } +/* Custom Scrollbar */ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: var(--bg-secondary); +} + +::-webkit-scrollbar-thumb { + background: var(--border-color); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: #94a3b8; +} + .modal-image { width: 100%; height: 300px; diff --git a/contact.css b/contact.css index ff8f509f..ce6ec261 100644 --- a/contact.css +++ b/contact.css @@ -1253,4 +1253,35 @@ header, .faq-item:hover::before { left: 100%; +} + +:root { + --bg-secondary: #d4d7d1; + --text-muted: #6b7280; + --border-color: rgba(34, 139, 34, 0.2); +} + +[data-theme="dark"] { + --bg-secondary: #2e3b2e; + --text-muted: #a5d6a7; + --border-color: rgba(76, 175, 80, 0.3); +} + +/* Custom Scrollbar */ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: var(--bg-secondary); +} + +::-webkit-scrollbar-thumb { + background: var(--border-color); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--text-muted); } \ No newline at end of file diff --git a/crop.html b/crop.html index e2d00b45..b972f33a 100644 --- a/crop.html +++ b/crop.html @@ -1513,6 +1513,25 @@ /* AgriTech green */ box-shadow: 0 0 20px #22c55e; } + + /* Custom Scrollbar */ + ::-webkit-scrollbar { + width: 8px; + height: 8px; + } + + ::-webkit-scrollbar-track { + background: var(--bg-secondary); + } + + ::-webkit-scrollbar-thumb { + background: var(--border-color); + border-radius: 4px; + } + + ::-webkit-scrollbar-thumb:hover { + background: var(--text-muted); + } diff --git a/faq.css b/faq.css index 42836d69..e26b6bd4 100644 --- a/faq.css +++ b/faq.css @@ -400,4 +400,23 @@ .scroll-btn:hover { background: #27ae60; transform: scale(1.1); +} + +/* Custom Scrollbar */ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: var(--bg-secondary); +} + +::-webkit-scrollbar-thumb { + background: var(--border-color); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: #94a3b8; } \ No newline at end of file diff --git a/feed-back.html b/feed-back.html index 285f090d..5ad53006 100644 --- a/feed-back.html +++ b/feed-back.html @@ -47,6 +47,8 @@ --light-green: #f0fdf4; --dark-green: #15803d; --green-hover: #15803d; + + --border: #d0d5d1; } .dark-theme { @@ -70,6 +72,7 @@ /* Homepage green palette for dark mode */ --light-green: #1a2e1a; --green-hover: #22c55e; + --border: rgba(102, 187, 106, 0.3); } * { @@ -1338,6 +1341,25 @@ background-color: #22c55e; /* AgriTech green */ box-shadow: 0 0 20px #22c55e; } + +/* Custom Scrollbar */ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: var(--bg-secondary); +} + +::-webkit-scrollbar-thumb { + background: var(--border); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--text-muted); +} diff --git a/finance_bot.html b/finance_bot.html index 9edd1f44..d6edcf80 100644 --- a/finance_bot.html +++ b/finance_bot.html @@ -19,15 +19,24 @@ --accent: #22c55e; --bg-light: #f4f7fb; --bg-dark: #0b1220; + --bg-secondary: #e5e7eb; + --border-color: #94a3b8; --glass-light: rgba(255,255,255,0.85); --glass-dark: rgba(17,25,40,0.85); --text-light: #1f2937; --text-dark: #e5e7eb; + --text-muted: #6b7280; --muted-light: #6b7280; --muted-dark: #9ca3af; --shadow: 0 20px 50px rgba(0,0,0,0.15); } +[data-theme="dark"] { + --bg-secondary: #0b1220; + --border-color: #334155; + --text-muted: #94a3b8; +} + body { font-family: "Segoe UI", system-ui, sans-serif; margin: 0; @@ -310,6 +319,25 @@ color: var(--muted-light); } [data-theme="dark"] .site-footer { color: var(--muted-dark); } + +/* Custom Scrollbar */ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: var(--bg-secondary); +} + +::-webkit-scrollbar-thumb { + background: var(--border-color); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--text-muted); +} diff --git a/financial-support.html b/financial-support.html index 6fb6d8b9..7e3182d9 100644 --- a/financial-support.html +++ b/financial-support.html @@ -1161,6 +1161,24 @@ background-color: #22c55e; /* AgriTech green */ box-shadow: 0 0 20px #22c55e; } + +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: var(--bg-secondary); +} + +::-webkit-scrollbar-thumb { + background: var(--border-color); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--text-muted); +} diff --git a/forum.css b/forum.css index b6a478c1..db46497c 100644 --- a/forum.css +++ b/forum.css @@ -577,4 +577,23 @@ body.dark-mode .theme-toggle { [data-theme="dark"] .moon-bite { transform: translate(5px, -1.5px) scale(0.6); +} + +/* Custom Scrollbar */ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: var(--bg-secondary); +} + +::-webkit-scrollbar-thumb { + background: var(--border); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--text-muted); } \ No newline at end of file diff --git a/index.html b/index.html index 288631b0..97e1f1b5 100644 --- a/index.html +++ b/index.html @@ -1919,6 +1919,26 @@ /* Pop-Out Effect */ box-shadow: 0 8px 25px rgba(34, 197, 94, 0.4); } + +/* Custom Scrollbar */ + ::-webkit-scrollbar { + width: 8px; + height: 8px; + } + + ::-webkit-scrollbar-track { + background: var(--section-bg); + } + + ::-webkit-scrollbar-thumb { + background: var(--border-color); + border-radius: 4px; + } + + ::-webkit-scrollbar-thumb:hover { + background: var(--text-muted); + } + diff --git a/marketplace.html b/marketplace.html index ade92255..765e2099 100644 --- a/marketplace.html +++ b/marketplace.html @@ -1603,6 +1603,25 @@ box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important; } } + + /* Custom Scrollbar */ + ::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: var(--bg-secondary); +} + +::-webkit-scrollbar-thumb { + background: var(--border-color); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--text-muted); +} diff --git a/news.css b/news.css index 48bc0653..82fbb5d2 100644 --- a/news.css +++ b/news.css @@ -855,3 +855,22 @@ body { background-color: #22c55e; /* AgriTech green */ box-shadow: 0 0 20px #22c55e; } + +/* Custom Scrollbar */ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: var(--bg-secondary); +} + +::-webkit-scrollbar-thumb { + background: var(--border-color); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--text-muted); +} \ No newline at end of file diff --git a/privacy-policy.html b/privacy-policy.html index d0d572cd..27d053b9 100644 --- a/privacy-policy.html +++ b/privacy-policy.html @@ -24,6 +24,16 @@ --muted: #94a3b8; --accent: #22c55e; --border: #334155; + + --bg-secondary: #e0e4dd; + --border-color: #b2cfba; + --text-muted: #94a3b8; +} + +[data-theme="dark"] { + --bg-secondary: #0d1a34; + --border-color: #475569; + --text-muted: #94a3b8; } [data-theme="light"] { @@ -232,6 +242,26 @@ margin-top: 40px; font-size: 0.9rem; } + +/* Custom Scrollbar */ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: var(--bg-secondary); +} + +::-webkit-scrollbar-thumb { + background: var(--border-color); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--text-muted); +} + diff --git a/supply-chain.html b/supply-chain.html index 28075c56..8b890297 100644 --- a/supply-chain.html +++ b/supply-chain.html @@ -30,10 +30,13 @@ --bg-card: rgba(255, 255, 255, 0.95); --bg-nav: #fff; --bg-shipment: #f8f9fa; + --bg-secondary: #f8fafc; --text-header: #2c3e50; --text-body: #333; --text-muted: #555; + --muted: #94a3b8; --text-cta-sub: #666; + --border-color: #74b9ff; --shadow: rgba(0, 0, 0, 0.1); --accent-blue: #74b9ff; } @@ -43,9 +46,12 @@ --bg-card: rgba(30, 41, 59, 0.95); --bg-nav: #1e293b; --bg-shipment: #2d3748; + --bg-secondary: #0b1220; --text-header: #f8fafc; --text-body: #e2e8f0; + --border-color: #334155; --text-muted: #cbd5e1; + --muted: #94a3b8; --text-cta-sub: #94a3b8; --shadow: rgba(0, 0, 0, 0.4); --accent-blue: #818cf8; @@ -592,8 +598,26 @@ /* AgriTech green */ box-shadow: 0 0 20px #22c55e; } + + /* Custom Scrollbar */ + ::-webkit-scrollbar { + width: 8px; + height: 8px; + } + + ::-webkit-scrollbar-track { + background: var(--bg-secondary); + } + + ::-webkit-scrollbar-thumb { + background: var(--border-color); + border-radius: 4px; + } + + ::-webkit-scrollbar-thumb:hover { + background: var(--muted); + } - diff --git a/sustainable-farming.html b/sustainable-farming.html index 1b93d020..1d9916e2 100644 --- a/sustainable-farming.html +++ b/sustainable-farming.html @@ -941,6 +941,25 @@ background-color: #22c55e; /* AgriTech green */ box-shadow: 0 0 20px #22c55e; } + +/* Custom Scrollbar */ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: var(--bg-secondary); +} + +::-webkit-scrollbar-thumb { + background: var(--border-color); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--text-muted); +} diff --git a/theme.css b/theme.css index 79a08083..3305cd2a 100644 --- a/theme.css +++ b/theme.css @@ -606,7 +606,7 @@ tr:hover { background-color: var(--bg-tertiary); } -/* Scrollbar styling */ +/* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px;