diff --git a/htdocs/assets/_preloader.php b/htdocs/assets/_preloader.php
index cff6e76..feae240 100644
--- a/htdocs/assets/_preloader.php
+++ b/htdocs/assets/_preloader.php
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/htdocs/assets/extra-style.css b/htdocs/assets/extra-style.css
index 8de21e4..3b4b646 100644
--- a/htdocs/assets/extra-style.css
+++ b/htdocs/assets/extra-style.css
@@ -78,6 +78,8 @@ background: #38BDF8;
fill: red;
} */
+/* --- floatingbar styling --- */
+
.floatingbar-slide-down {
transform: translateY(20vh);
transition: transform 0.5s ease-in-out;
@@ -89,7 +91,7 @@ background: #38BDF8;
}
.floatingbar-click-slide-up {
- transform: translateY(-55vh);
+ transform: translateY(-70vh);
transition: transform 0.5s ease-in-out;
}
@@ -101,11 +103,13 @@ background: #38BDF8;
.searchbar-click-increase-width {
animation: increaseSearchbarWidth 0.5s ease-in-out;
width: 40vw;
+ transition: width 1s ease-in-out;
}
.searchbar-click-decrease-width {
animation: decreaseSearchbarWidth 0.5s ease-in-out;
width: fit-content;
+ transition: width 1s ease-in-out;
}
@keyframes increaseSearchbarWidth {
@@ -116,6 +120,7 @@ background: #38BDF8;
width: 40vw;
}
}
+
@keyframes decreaseSearchbarWidth {
from {
width: 40vw;
@@ -123,4 +128,38 @@ background: #38BDF8;
to {
width: 10vw;
}
+}
+
+@media only screen and (max-width: 768px) {
+
+ .searchbar-click-increase-width {
+ animation: increaseSearchbarWidth 0.5s ease-in-out;
+ width: 80vw;
+ transition: width 1s ease-in-out;
+ }
+
+ .searchbar-click-decrease-width {
+ animation: decreaseSearchbarWidth 0.5s ease-in-out;
+ width: fit-content;
+ transition: width 1s ease-in-out;
+ }
+
+ @keyframes increaseSearchbarWidth {
+ from {
+ width: 10vw;
+ }
+ to {
+ width: 80vw;
+ }
+ }
+
+ @keyframes decreaseSearchbarWidth {
+ from {
+ width: 80vw;
+ }
+ to {
+ width: 30vw;
+ }
+ }
+
}
\ No newline at end of file
diff --git a/htdocs/assets/js/floatingbar-config.js b/htdocs/assets/js/floatingbar-config.js
index 6781353..5c729a0 100644
--- a/htdocs/assets/js/floatingbar-config.js
+++ b/htdocs/assets/js/floatingbar-config.js
@@ -3,6 +3,8 @@ const floatingBar = document.getElementById("floating-bar");
const searchBar = document.getElementById("searchbar");
const shareBtn = document.getElementById("sharebutton");
const closeBtn = document.getElementById("closebutton");
+const searchTxt = document.getElementById("searchtext");
+const searchInput = document.getElementById("searchinput");
let lastScrollTop = 0;
window.addEventListener("scroll", function () {
@@ -24,46 +26,53 @@ window.addEventListener("scroll", function () {
});
// function to open floating search window
-function activate_search(searchBar, floatingBar, closeBtn, shareBtn) {
+function activate_search(searchBar, floatingBar, closeBtn, shareBtn, searchTxt, searchInput) {
floatingBar.classList.remove("floatingbar-click-slide-down");
floatingBar.classList.add("floatingbar-click-slide-up");
searchBar.classList.remove("searchbar-click-decrease-width");
searchBar.classList.add("searchbar-click-increase-width");
closeBtn.classList.remove("hidden");
shareBtn.classList.add("hidden");
+ searchTxt.classList.add("hidden");
+ searchInput.classList.remove("hidden");
+ searchInput.focus();
+ document.body.classList.add("overflow-hidden");
}
// function to close floating search window
-function close_search(searchBar, floatingBar, closeBtn, shareBtn) {
+function close_search(searchBar, floatingBar, closeBtn, shareBtn, searchTxt, searchInput) {
floatingBar.classList.remove("floatingbar-click-slide-up");
floatingBar.classList.add("floatingbar-click-slide-down");
searchBar.classList.remove("searchbar-click-increase-width");
searchBar.classList.add("searchbar-click-decrease-width");
closeBtn.classList.add("hidden");
shareBtn.classList.remove("hidden");
+ searchTxt.classList.remove("hidden");
+ searchInput.classList.add("hidden");
+ document.body.classList.remove("overflow-hidden");
}
// when the search icon is clicked
searchBar.addEventListener("click", function () {
- activate_search(searchBar, floatingBar, closeBtn, shareBtn);
+ activate_search(searchBar, floatingBar, closeBtn, shareBtn, searchTxt, searchInput);
});
// when ALT + K shortcut key is pressed
document.addEventListener("keydown", function(event) {
if (event.altKey && event.key === "k") {
- activate_search(searchBar, floatingBar, closeBtn, shareBtn);
+ activate_search(searchBar, floatingBar, closeBtn, shareBtn, searchTxt, searchInput);
}
});
// when close button is clicked
closeBtn.addEventListener("click", function () {
- close_search(searchBar, floatingBar, closeBtn, shareBtn);
+ close_search(searchBar, floatingBar, closeBtn, shareBtn, searchTxt, searchInput);
});
// when ESC key is pressed
document.addEventListener("keydown", function(event) {
if (event.key === "Escape") {
- close_search(searchBar, floatingBar, closeBtn, shareBtn);
+ close_search(searchBar, floatingBar, closeBtn, shareBtn, searchTxt, searchInput);
}
});
diff --git a/htdocs/assets/style.css b/htdocs/assets/style.css
index 294cf2c..7c3c541 100644
--- a/htdocs/assets/style.css
+++ b/htdocs/assets/style.css
@@ -615,6 +615,10 @@ video {
z-index: 20;
}
+.z-30 {
+ z-index: 30;
+}
+
.z-50 {
z-index: 50;
}
@@ -941,10 +945,6 @@ video {
width: 100vw;
}
-.w-\[40vw\] {
- width: 40vw;
-}
-
.rotate-\[15deg\] {
--tw-rotate: 15deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1094,6 +1094,10 @@ video {
border-top-color: rgb(56 189 248 / var(--tw-border-opacity));
}
+.bg-\[rgba\(0\2c _0\2c _0\2c _0\.4\)\] {
+ background-color: rgba(0, 0, 0, 0.4);
+}
+
.bg-accent_primary {
--tw-bg-opacity: 1;
background-color: rgb(56 189 248 / var(--tw-bg-opacity));
@@ -1201,11 +1205,6 @@ video {
padding-bottom: 0.30rem;
}
-.px-\[0\.82rem\] {
- padding-left: 0.82rem;
- padding-right: 0.82rem;
-}
-
.text-center {
text-align: center;
}
@@ -1291,6 +1290,10 @@ video {
color: rgb(15 23 42 / var(--tw-text-opacity));
}
+.caret-accent_primary {
+ caret-color: #38BDF8;
+}
+
.opacity-20 {
opacity: 0.2;
}
@@ -1355,6 +1358,11 @@ video {
--tw-shadow: var(--tw-shadow-colored);
}
+.outline-none {
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+}
+
.blur-2xl {
--tw-blur: blur(40px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -1365,6 +1373,17 @@ video {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
+.backdrop-blur-lg {
+ --tw-backdrop-blur: blur(16px);
+ -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+ backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
+.backdrop-filter {
+ -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+ backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
.transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -1385,24 +1404,6 @@ video {
transition-duration: 150ms;
}
-.transition-\[width\] {
- transition-property: width;
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
- transition-duration: 150ms;
-}
-
-.transition-\[width_box-shadow\] {
- transition-property: width box-shadow;
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
- transition-duration: 150ms;
-}
-
-.transition-\[width\2c _box-shadow\] {
- transition-property: width, box-shadow;
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
- transition-duration: 150ms;
-}
-
.duration-100 {
transition-duration: 100ms;
}
@@ -1415,10 +1416,6 @@ video {
transition-duration: 500ms;
}
-.duration-1000 {
- transition-duration: 1000ms;
-}
-
.last\:mb-3:last-child {
margin-bottom: 0.75rem;
}