neosubhamoy/neosubhamoy-portfolio
1
1
Fork 0
mirror of https://github.com/neosubhamoy/neosubhamoy-portfolio.git synced 2025-12-20 01:09:35 +05:30
Code Issues Wiki Activity

(refactor): added default dark-bg shadow to floatingbar

Browse Source
This commit is contained in:
Subhamoy Biswas
2023-12-12 02:07:59 +05:30
parent 390f919c0c
commit aa5d70355d
2 changed files with 17 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
htdocs/assets/_floatingbar.php
View File

@@ -124,12 +124,12 @@
</div> </div>
</div> </div>
<div id="floating-bar" class="fixed inset-x-0 bottom-[7vh] z-[50] flex justify-center items-center"> <div id="floating-bar" class="fixed inset-x-0 bottom-[7vh] z-[50] flex justify-center items-center">
<div id="searchbar" class="searchbar bg-bg_secondary rounded-full p-[0.30rem] flex items-center cursor-pointer mx-2 hover:shadow-[0px_0px_30px] hover:shadow-accent_primary_extratransparent transition transform duration-300"> <div id="searchbar" class="searchbar bg-bg_secondary rounded-full p-[0.30rem] flex items-center cursor-pointer mx-2 shadow-[0px_0px_30px] shadow-bg_primary hover:shadow-accent_primary_extratransparent transition transform duration-300">
<button class="bg-accent_primary px-3 py-2 rounded-full"><i class="fa-solid fa-magnifying-glass text-bg_primary"></i></button> <button class="bg-accent_primary px-3 py-2 rounded-full"><i class="fa-solid fa-magnifying-glass text-bg_primary"></i></button>
<p id="searchtext" class="ml-3 mr-4 text-accent_three">Search</p> <p id="searchtext" class="ml-3 mr-4 text-accent_three">Search</p>
<input id="searchinput" class="w-full mx-2 bg-bg_secondary caret-accent_primary outline-none hidden" type="text" placeholder="Type to Search Something . . ." name="search-input" autocomplete="off"> <input id="searchinput" class="w-full mx-2 bg-bg_secondary caret-accent_primary outline-none hidden" type="text" placeholder="Type to Search Something . . ." name="search-input" autocomplete="off">
</div> </div>
<button id="sharebutton" class="sharebutton bg-accent_primary px-[0.80rem] py-2 rounded-full mx-2 hover:shadow-[0px_0px_30px] hover:shadow-accent_primary_transparent transition transform duration-300"><i class="fa-solid fa-share-nodes text-bg_primary"></i></button> <button id="sharebutton" class="sharebutton bg-accent_primary px-[0.80rem] py-2 rounded-full mx-2 shadow-[0px_0px_30px] shadow-bg_primary hover:shadow-accent_primary_transparent transition transform duration-300"><i class="fa-solid fa-share-nodes text-bg_primary"></i></button>
<button id="closebutton" class="closebutton bg-accent_primary px-[0.85rem] py-2 rounded-full mx-2 hover:shadow-[0px_0px_30px] hover:shadow-accent_primary_transparent transition transform duration-300 hidden"><i class="fa-solid fa-xmark text-bg_primary"></i></button> <button id="closebutton" class="closebutton bg-accent_primary px-[0.85rem] py-2 rounded-full mx-2 hover:shadow-[0px_0px_30px] hover:shadow-accent_primary_transparent transition transform duration-300 hidden"><i class="fa-solid fa-xmark text-bg_primary"></i></button>
<button id="shareclosebutton" class="closebutton bg-accent_primary px-[0.85rem] py-2 rounded-full mx-2 hover:shadow-[0px_0px_30px] hover:shadow-accent_primary_transparent transition transform duration-300 hidden"><i class="fa-solid fa-xmark text-bg_primary"></i></button> <button id="shareclosebutton" class="closebutton bg-accent_primary px-[0.85rem] py-2 rounded-full mx-2 hover:shadow-[0px_0px_30px] hover:shadow-accent_primary_transparent transition transform duration-300 hidden"><i class="fa-solid fa-xmark text-bg_primary"></i></button>
</div> </div>

19
htdocs/assets/style.css
View File

@@ -837,6 +837,10 @@ video {
margin-left: 0.25rem; margin-left: 0.25rem;
} }
.ml-10 {
margin-left: 2.5rem;
}
.ml-2 { .ml-2 {
margin-left: 0.5rem; margin-left: 0.5rem;
} }
@@ -945,10 +949,6 @@ video {
margin-top: 30vh; margin-top: 30vh;
} }
.ml-10 {
margin-left: 2.5rem;
}
.block { .block {
display: block; display: block;
} }
@@ -1756,6 +1756,12 @@ video {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
} }
.shadow-\[0px_0px_30px\] {
--tw-shadow: 0px 0px 30px;
--tw-shadow-colored: 0px 0px 30px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-accent_primary { .shadow-accent_primary {
--tw-shadow-color: #38BDF8; --tw-shadow-color: #38BDF8;
--tw-shadow: var(--tw-shadow-colored); --tw-shadow: var(--tw-shadow-colored);
@@ -1766,6 +1772,11 @@ video {
--tw-shadow: var(--tw-shadow-colored); --tw-shadow: var(--tw-shadow-colored);
} }
.shadow-bg_primary {
--tw-shadow-color: #0F172A;
--tw-shadow: var(--tw-shadow-colored);
}
.outline-none { .outline-none {
outline: 2px solid transparent; outline: 2px solid transparent;
outline-offset: 2px; outline-offset: 2px;