mirror of
https://github.com/neosubhamoy/neosubhamoy-portfolio.git
synced 2025-12-20 01:09:35 +05:30
(feat): added quick shotcuts on search window (refactor): made search window scrollable
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<div id="floatingwindowwrapper" class="floatingwindowwrapper fixed top-0 left-0 w-screen h-screen z-30 bg-[rgba(0,_0,_0,_0.4)] hidden"></div>
|
||||
<div id="searchwindow" class="searchwindow w-[90vw] md:w-[44vw] mx-auto h-[60vh] fixed inset-x-0 top-[30vh] z-40 flex-col items-center bg-bg_secondary rounded-xl overflow-hidden hidden">
|
||||
<div id="searchwindow" class="searchwindow w-[90vw] md:w-[44vw] mx-auto h-[60vh] fixed inset-x-0 top-[30vh] z-40 flex-col items-center bg-bg_secondary rounded-xl overflow-y-scroll hidden">
|
||||
<div class="defresultpages w-full flex flex-col justify-start px-2 mt-1">
|
||||
<p class="text-xs text-accent_three mt-3 mb-2 mx-1">PAGE SHOTCUTS</p>
|
||||
<div class="group resultitem w-full flex justify-between items-center my-1 p-1 cursor-pointer hover:bg-bg_third transition transform duration-200 rounded-lg">
|
||||
@@ -46,6 +46,27 @@
|
||||
<i class="fa-solid fa-chevron-right text-accent_three mx-2 hidden group-hover:block"></i>
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-xs text-accent_three mt-3 mb-2 mx-1">QUICK SHOTCUTS</p>
|
||||
<div class="group resultitem w-full flex justify-between items-center my-1 p-1 cursor-pointer hover:bg-bg_third transition transform duration-200 rounded-lg">
|
||||
<span class="flex items-center">
|
||||
<lord-icon class="mx-1" src="https://cdn.lordicon.com/xtnsvhie.json" target=".resultitem" trigger="hover" colors="primary:#38BDF8" style="width:25px"></lord-icon>
|
||||
<p class="mx-1">Send Email</p>
|
||||
</span>
|
||||
<span class="flex items-center mr-1">
|
||||
<span class="px-[0.40rem] py-[0.10rem] mx-1 bg-accent_four text-bg_secondary rounded group-hover:hidden">E</span>
|
||||
<i class="fa-solid fa-chevron-right text-accent_three mx-2 hidden group-hover:block"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="group resultitem w-full flex justify-between items-center my-1 p-1 cursor-pointer hover:bg-bg_third transition transform duration-200 rounded-lg">
|
||||
<span class="flex items-center">
|
||||
<lord-icon class="mx-1" src="https://cdn.lordicon.com/lzgmgrnn.json" target=".resultitem" trigger="hover" colors="primary:#38BDF8" style="width:25px"></lord-icon>
|
||||
<p class="mx-1">Source Code</p>
|
||||
</span>
|
||||
<span class="flex items-center mr-1">
|
||||
<span class="px-[0.40rem] py-[0.10rem] mx-1 bg-accent_four text-bg_secondary rounded group-hover:hidden">S</span>
|
||||
<i class="fa-solid fa-chevron-right text-accent_three mx-2 hidden group-hover:block"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="floating-bar" class="fixed inset-x-0 bottom-[7vh] z-[50] flex justify-center items-center">
|
||||
|
||||
@@ -603,18 +603,14 @@ video {
|
||||
top: 20.5rem;
|
||||
}
|
||||
|
||||
.top-\[4\.7rem\] {
|
||||
top: 4.7rem;
|
||||
}
|
||||
|
||||
.top-\[20vh\] {
|
||||
top: 20vh;
|
||||
}
|
||||
|
||||
.top-\[30vh\] {
|
||||
top: 30vh;
|
||||
}
|
||||
|
||||
.top-\[4\.7rem\] {
|
||||
top: 4.7rem;
|
||||
}
|
||||
|
||||
.z-10 {
|
||||
z-index: 10;
|
||||
}
|
||||
@@ -627,6 +623,10 @@ video {
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.z-40 {
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.z-50 {
|
||||
z-index: 50;
|
||||
}
|
||||
@@ -639,12 +639,9 @@ video {
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.z-40 {
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.m-2 {
|
||||
margin: 0.5rem;
|
||||
.mx-1 {
|
||||
margin-left: 0.25rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.mx-2 {
|
||||
@@ -667,6 +664,11 @@ video {
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.my-1 {
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
@@ -692,16 +694,6 @@ video {
|
||||
margin-bottom: 0.30rem;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.mx-1 {
|
||||
margin-left: 0.25rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
@@ -714,6 +706,10 @@ video {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.mb-20 {
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
@@ -854,14 +850,6 @@ video {
|
||||
margin-top: 30vh;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
@@ -902,6 +890,10 @@ video {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.h-\[60vh\] {
|
||||
height: 60vh;
|
||||
}
|
||||
|
||||
.h-\[70px\] {
|
||||
height: 70px;
|
||||
}
|
||||
@@ -914,26 +906,6 @@ video {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.h-\[60vh\] {
|
||||
height: 60vh;
|
||||
}
|
||||
|
||||
.min-h-\[40vh\] {
|
||||
min-height: 40vh;
|
||||
}
|
||||
|
||||
.min-h-\[60vh\] {
|
||||
min-height: 60vh;
|
||||
}
|
||||
|
||||
.min-h-\[50vh\] {
|
||||
min-height: 50vh;
|
||||
}
|
||||
|
||||
.min-h-\[30vh\] {
|
||||
min-height: 30vh;
|
||||
}
|
||||
|
||||
.w-0 {
|
||||
width: 0px;
|
||||
}
|
||||
@@ -986,6 +958,10 @@ video {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.w-\[90vw\] {
|
||||
width: 90vw;
|
||||
}
|
||||
|
||||
.w-fit {
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
@@ -999,42 +975,6 @@ video {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.w-\[50vw\] {
|
||||
width: 50vw;
|
||||
}
|
||||
|
||||
.w-\[40vw\] {
|
||||
width: 40vw;
|
||||
}
|
||||
|
||||
.w-\[45vw\] {
|
||||
width: 45vw;
|
||||
}
|
||||
|
||||
.w-\[43vw\] {
|
||||
width: 43vw;
|
||||
}
|
||||
|
||||
.w-\[44vw\] {
|
||||
width: 44vw;
|
||||
}
|
||||
|
||||
.w-\[20vw\] {
|
||||
width: 20vw;
|
||||
}
|
||||
|
||||
.w-\[15px\] {
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
.w-\[25px\] {
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.w-\[90vw\] {
|
||||
width: 90vw;
|
||||
}
|
||||
|
||||
.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));
|
||||
@@ -1102,10 +1042,22 @@ video {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.overflow-scroll {
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.overflow-y-scroll {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.whitespace-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.rounded-2xl {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
@@ -1126,10 +1078,6 @@ video {
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.border-\[1px\] {
|
||||
border-width: 1px;
|
||||
}
|
||||
@@ -1196,6 +1144,11 @@ video {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.bg-accent_four {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(172 203 222 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-accent_primary {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(56 189 248 / var(--tw-bg-opacity));
|
||||
@@ -1211,21 +1164,6 @@ video {
|
||||
background-color: rgb(30 41 59 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-bg_third {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(38 51 74 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-accent_three {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(217 217 217 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-accent_four {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(172 203 222 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-gradient-to-r {
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
}
|
||||
@@ -1242,6 +1180,10 @@ video {
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.p-10 {
|
||||
padding: 2.5rem;
|
||||
}
|
||||
@@ -1258,10 +1200,6 @@ video {
|
||||
padding: 0.30rem;
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.px-2 {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
@@ -1292,6 +1230,11 @@ video {
|
||||
padding-right: 1.75rem;
|
||||
}
|
||||
|
||||
.px-\[0\.40rem\] {
|
||||
padding-left: 0.40rem;
|
||||
padding-right: 0.40rem;
|
||||
}
|
||||
|
||||
.px-\[0\.80rem\] {
|
||||
padding-left: 0.80rem;
|
||||
padding-right: 0.80rem;
|
||||
@@ -1312,6 +1255,11 @@ video {
|
||||
padding-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.py-\[0\.10rem\] {
|
||||
padding-top: 0.10rem;
|
||||
padding-bottom: 0.10rem;
|
||||
}
|
||||
|
||||
.py-\[0\.15rem\] {
|
||||
padding-top: 0.15rem;
|
||||
padding-bottom: 0.15rem;
|
||||
@@ -1322,41 +1270,6 @@ video {
|
||||
padding-bottom: 0.30rem;
|
||||
}
|
||||
|
||||
.px-\[0\.20rem\] {
|
||||
padding-left: 0.20rem;
|
||||
padding-right: 0.20rem;
|
||||
}
|
||||
|
||||
.py-\[0\.10rem\] {
|
||||
padding-top: 0.10rem;
|
||||
padding-bottom: 0.10rem;
|
||||
}
|
||||
|
||||
.px-\[0\.25rem\] {
|
||||
padding-left: 0.25rem;
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
|
||||
.px-1 {
|
||||
padding-left: 0.25rem;
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
|
||||
.px-\[0\.30rem\] {
|
||||
padding-left: 0.30rem;
|
||||
padding-right: 0.30rem;
|
||||
}
|
||||
|
||||
.px-\[0\.40rem\] {
|
||||
padding-left: 0.40rem;
|
||||
padding-right: 0.40rem;
|
||||
}
|
||||
|
||||
.py-\[0\.40rem\] {
|
||||
padding-top: 0.40rem;
|
||||
padding-bottom: 0.40rem;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -1417,10 +1330,6 @@ video {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.font-thin {
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.text-accent_four {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(172 203 222 / var(--tw-text-opacity));
|
||||
@@ -1558,6 +1467,10 @@ video {
|
||||
transition-duration: 100ms;
|
||||
}
|
||||
|
||||
.duration-200 {
|
||||
transition-duration: 200ms;
|
||||
}
|
||||
|
||||
.duration-300 {
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
@@ -1566,10 +1479,6 @@ video {
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
.duration-200 {
|
||||
transition-duration: 200ms;
|
||||
}
|
||||
|
||||
.last\:mb-3:last-child {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
@@ -1836,10 +1745,6 @@ video {
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
.lg\:w-\[44vw\] {
|
||||
width: 44vw;
|
||||
}
|
||||
|
||||
.lg\:rotate-0 {
|
||||
--tw-rotate: 0deg;
|
||||
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));
|
||||
|
||||
Reference in New Issue
Block a user