diff --git a/Faq.html b/Faq.html index 3e5867b..31a8919 100644 --- a/Faq.html +++ b/Faq.html @@ -80,7 +80,7 @@ justify-content: space-between; align-items: center; flex-wrap: wrap; - position: relative; + /* position: relative; */ } .navbar-right-links { diff --git a/about.html b/about.html index 843e74a..d8ea8a1 100644 --- a/about.html +++ b/about.html @@ -82,7 +82,7 @@ justify-content: space-between; align-items: center; flex-wrap: wrap; - position: relative; + /* position: relative; */ } .navbar-right-links { @@ -103,6 +103,7 @@ min-width: 150px; } + .navbar-right-links.show { display: flex !important; } diff --git a/blog.html b/blog.html index ea06039..fd78530 100644 --- a/blog.html +++ b/blog.html @@ -61,7 +61,7 @@ justify-content: space-between; align-items: center; flex-wrap: wrap; - position: relative; + /* position: relative; */ } .navbar-right-links { diff --git a/contact.html b/contact.html index 9333926..4fbddc3 100644 --- a/contact.html +++ b/contact.html @@ -140,7 +140,7 @@ justify-content: space-between; align-items: center; flex-wrap: wrap; - position: relative; + /* position: relative; */ } .navbar-right-links { diff --git a/css/about.css b/css/about.css index 6a7a15c..0097663 100644 --- a/css/about.css +++ b/css/about.css @@ -11,7 +11,7 @@ } */ body { font-family: "Segoe UI", Tahoma, sans-serif; - background: #f9f9f9; + background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%); color: #333; line-height: 1.6; overflow-x: hidden; diff --git a/css/faq.css b/css/faq.css index 637501b..984c09a 100644 --- a/css/faq.css +++ b/css/faq.css @@ -53,7 +53,7 @@ body.dark-mode { /* Dark mode toggle button styling */ .dark-toggle { - background: #fff !important; + /* background: #fff !important; */ border: none; cursor: pointer; padding: 0.6rem 1.2rem; @@ -62,7 +62,7 @@ body.dark-mode { } .dark-toggle:hover { - background: rgba(255, 255, 255, 0.1) !important; + background: #2563eb; } /* For dark mode button background */ body.dark-mode #darkModeToggle { @@ -483,11 +483,14 @@ body.dark-mode .faq-item:hover { /* Dark mode navbar compatibility */ body.dark-mode .navbar { background: transparent; + background: linear-gradient(90deg, #1f2937, #111827); + color: var(--text-light); + box-shadow: 0 4px 6px -1px rgba(255, 255, 255, 0.05); } body.dark-mode .nav-item { - background: linear-gradient(135deg, #4a5568, #2d3748); - color: #e0e0e0; + background: linear-gradient(135deg, var(--primary), var(--primary-dark)); + color: var(--text-light); } body.dark-mode .nav-item:hover { diff --git a/css/style.css b/css/style.css index cb2393f..0e384cc 100644 --- a/css/style.css +++ b/css/style.css @@ -40,6 +40,7 @@ body { background-color:#fff; border-radius: 10px; margin-bottom: 1.5rem; + position: sticky; } @@ -96,7 +97,7 @@ body { .nav-item { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); - color: white; + color:white; border: none; padding: 0.6rem 1.2rem; margin: 5px; @@ -111,6 +112,9 @@ body { transition: transform 0.25s ease, box-shadow 0.25s ease; font-weight: 500; } +.fa-moon{ + color:white; +} /* for sun it must be white */ .fa-sun{ color: #fceeb1; @@ -603,6 +607,7 @@ body.dark-mode #footer-outer h3 { margin-top: 15px; } + @media (min-width: 1024px) { .main-grid { grid-template-columns: 2fr 1fr; @@ -1111,6 +1116,12 @@ body.dark-mode #footer-outer h3 { .details-grid { grid-template-columns: 1fr; } + + body.dark-mode .navbar-right-links{ + background: linear-gradient(90deg, #1f2937, #111827); + + } + } /* Dark Mode */ @@ -1240,10 +1251,11 @@ body.dark-mode .tag-badge { /* Dark Mode Toggle Styling */ .dark-toggle { - background: #f3f4f6; + background: linear-gradient(135deg, var(--primary), var(--primary-dark)); + color: white; border: none; - border-radius: 6px; - padding: 8px 10px; + border-radius: 10px; + padding: 0.6rem 1.2rem; font-size: 1rem; cursor: pointer; color: #1f2937; @@ -1251,7 +1263,9 @@ body.dark-mode .tag-badge { } .dark-toggle:hover { - background: #e5e7eb; + background-color: #115cff; + transform: translateY(-2px) scale(1.05); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } /* Optional dark-mode override */ @@ -1261,7 +1275,8 @@ body.dark-mode .tag-badge { } .dark-mode .dark-toggle:hover { - background: #4b5563; + background: linear-gradient(135deg, #63b3ed, #4299e1); + color: #1a202c; } body.dark-mode .swal2-popup { @@ -2615,3 +2630,7 @@ body.dark-mode .speed-control input:focus { cursor: pointer; color: #2563eb; /* matches your theme */ } + +.dark-mode .hamburger-container .bar{ + background-color: #adadad; +} \ No newline at end of file diff --git a/css/tool.css b/css/tool.css index f23403c..582bd46 100644 --- a/css/tool.css +++ b/css/tool.css @@ -37,7 +37,7 @@ body.dark-mode #darkModeToggle { /* Dark mode toggle button styling */ .dark-toggle { color:#1a1a1a; -background: #fff !important; +/* background: #fff !important; */ border: none; cursor: pointer; padding: 0.6rem 1.2rem; @@ -46,7 +46,9 @@ transition: all 0.25s ease; } .dark-toggle:hover { -background: rgba(255, 255, 255, 0.1) !important; + background-color: #115cff; + transform: translateY(-2px) scale(1.05); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } header { diff --git a/tools.html b/tools.html index 24b8a2f..aad86af 100644 --- a/tools.html +++ b/tools.html @@ -79,7 +79,7 @@ justify-content: space-between; align-items: center; flex-wrap: wrap; - position: relative; + /* position: relative; */ } .navbar-right-links { @@ -322,7 +322,7 @@

Connect

/* Dark mode toggle button styling */ .dark-toggle { color:#1a1a1a; -background: none !important; +/* background: none !important; */ border: none; cursor: pointer; padding: 0.6rem 1.2rem; @@ -331,7 +331,8 @@

Connect

} .dark-toggle:hover { -background: rgba(255, 255, 255, 0.1) !important; + + color: #1a202c;; } header { @@ -617,12 +618,15 @@

Connect

/* Dark mode navbar compatibility */ body.dark-mode .navbar { -background: transparent; + background: transparent; + background: linear-gradient(90deg, #1f2937, #111827); + color: var(--text-light); + box-shadow: 0 4px 6px -1px rgba(255, 255, 255, 0.05); } body.dark-mode .nav-item { -background: linear-gradient(135deg, #4a5568, #2d3748); -color: #e0e0e0; + background: linear-gradient(135deg, var(--primary), var(--primary-dark)); + color: var(--text-light); }