mirror of
https://github.com/neosubhamoy/neosubhamoy-portfolio.git
synced 2025-12-19 15:53:07 +05:30
(fixed): mobile floating navbar search button border spacing transparency
This commit is contained in:
@@ -148,31 +148,38 @@ function isNavPageActive($pageName, $pageRoute) {
|
||||
<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 id="mobile-floating-bar" class="fixed inset-x-0 bottom-[3vh] z-[50] flex lg:hidden justify-center items-center">
|
||||
<div class="bottomnav w-[90vw] p-3 bg-bg_secondary rounded-xl relative flex justify-around items-center shadow-[0px_0px_30px] shadow-bg_primary">
|
||||
<span class="bottoomnavitem flex flex-col items-center relative" onclick="location.href='<?php echo $basePath ?>'">
|
||||
<lord-icon class="mx-1" src="https://cdn.lordicon.com/cnpvyndp.json" target=".bottoomnavitem" trigger="hover" colors="primary:#38BDF8" style="width:20px"></lord-icon>
|
||||
<p class="mx-1 text-xs">Home</p>
|
||||
<span class="absolute -bottom-3 left-0 h-[3px] bg-accent_primary transition-all duration-300 rounded-tr-full rounded-tl-full w-0 <?php echo isNavPageActive('home.php', '/');?>"></span>
|
||||
</span>
|
||||
<span class="bottoomnavitem flex flex-col items-center relative" onclick="location.href='<?php echo $basePath . '/projects' ?>'">
|
||||
<lord-icon class="mx-1" src="https://cdn.lordicon.com/utpmnzxz.json" target=".bottoomnavitem" trigger="hover" colors="primary:#38BDF8" style="width:20px"></lord-icon>
|
||||
<p class="mx-1 text-xs">Projects</p>
|
||||
<span class="absolute -bottom-3 left-0 h-[3px] bg-accent_primary transition-all duration-300 rounded-tr-full rounded-tl-full w-0 <?php echo isNavPageActive('projects.php', '/projects');?>"></span>
|
||||
</span>
|
||||
<div class="flex items-center absolute -top-1/2">
|
||||
<button id="mobilesearchbutton" class="searchbutton bg-accent_primary px-5 py-4 rounded-full mx-2 shadow-[0px_0px_30px] shadow-bg_primary transition transform duration-300 border-[8px] border-bg_primary before:content-[''] before:absolute before:top-1/2 before:-left-6 before:w-[20px] before:h-[20px] before:bg-[transparent] before:rounded-tr-full after:shadow-[0px_-10px_0_0_rgb(15,_23,_42)] after:content-[''] after:absolute after:top-1/2 after:-right-6 after:w-[20px] after:h-[20px] after:bg-[transparent] after:rounded-tl-full before:shadow-[0px_-10px_0_0_rgb(15,_23,_42)]"><i class="fa-solid fa-magnifying-glass text-bg_primary"></i></button>
|
||||
<div class="bottomnav w-[90vw] relative flex justify-around items-end">
|
||||
<div class="w-full flex justify-around items-center p-3 bg-bg_secondary rounded-tl-xl rounded-bl-xl rounded-tr-2xl shadow-[0px_0px_30px] shadow-bg_primary">
|
||||
<span class="bottoomnavitem flex flex-col items-center relative cursor-pointer" onclick="location.href='<?php echo $basePath ?>'">
|
||||
<lord-icon class="mx-1" src="https://cdn.lordicon.com/cnpvyndp.json" target=".bottoomnavitem" trigger="hover" colors="primary:#38BDF8" style="width:20px"></lord-icon>
|
||||
<p class="mx-1 text-xs">Home</p>
|
||||
<span class="absolute -bottom-3 left-0 h-[3px] bg-accent_primary transition-all duration-300 rounded-tr-full rounded-tl-full w-0 <?php echo isNavPageActive('home.php', '/');?>"></span>
|
||||
</span>
|
||||
<span class="bottoomnavitem flex flex-col items-center relative cursor-pointer" onclick="location.href='<?php echo $basePath . '/projects' ?>'">
|
||||
<lord-icon class="mx-1" src="https://cdn.lordicon.com/utpmnzxz.json" target=".bottoomnavitem" trigger="hover" colors="primary:#38BDF8" style="width:20px"></lord-icon>
|
||||
<p class="mx-1 text-xs">Projects</p>
|
||||
<span class="absolute -bottom-3 left-0 h-[3px] bg-accent_primary transition-all duration-300 rounded-tr-full rounded-tl-full w-0 <?php echo isNavPageActive('projects.php', '/projects');?>"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center absolute -top-1/2 inset-x-auto">
|
||||
<button id="mobilesearchbutton" class="searchbutton bg-accent_primary px-5 py-4 rounded-full transition transform duration-300 border-[8px] border-[transparent] bg-clip-padding before:content-[''] before:absolute before:top-1/2 before:-left-6 before:w-[20px] before:h-[40px] before:bg-bg_secondary before:rounded-tr-full after:shadow-[0px_-10px_0_0_transparent] after:content-[''] after:absolute after:top-1/2 after:-right-6 after:w-[20px] after:h-[40px] after:bg-bg_secondary after:rounded-tl-full before:shadow-[0px_-10px_0_0_transparent]"><i class="fa-solid fa-magnifying-glass text-bg_primary"></i></button>
|
||||
</div>
|
||||
<div class="spacer w-[120px] bg-bg_secondary p-[1.15rem] relative">
|
||||
<div class="absolute -top-[23px] left-0 w-[35px] h-[25px] bg-radiul-gradient-transparent-secondary"></div>
|
||||
<div class="absolute -top-[23px] right-0 w-[35px] h-[25px] bg-radiul-gradient-secondary-transparent"></div>
|
||||
</div>
|
||||
<div class="w-full flex justify-around items-center p-3 bg-bg_secondary rounded-tr-xl rounded-br-xl rounded-tl-2xl shadow-[0px_0px_30px] shadow-bg_primary">
|
||||
<span class="bottoomnavitem flex flex-col items-center relative cursor-pointer" onclick="location.href='<?php echo $basePath . '/blog' ?>'">
|
||||
<lord-icon class="mx-1" src="https://cdn.lordicon.com/lyrrgrsl.json" target=".bottoomnavitem" trigger="hover" colors="primary:#38BDF8" style="width:20px"></lord-icon>
|
||||
<p class="mx-1 text-xs">Blog</p>
|
||||
<span class="absolute -bottom-3 left-0 h-[3px] bg-accent_primary transition-all duration-300 rounded-tr-full rounded-tl-full w-0 <?php echo isNavPageActive('blog.php', '/blog');?>"></span>
|
||||
</span>
|
||||
<span class="bottoomnavitem flex flex-col items-center relative cursor-pointer" onclick="location.href='<?php echo $basePath . '/contact' ?>'">
|
||||
<lord-icon class="mx-1" src="https://cdn.lordicon.com/kthelypq.json" target=".bottoomnavitem" trigger="hover" colors="primary:#38BDF8" style="width:20px"></lord-icon>
|
||||
<p class="mx-1 text-xs">Contact</p>
|
||||
<span class="absolute -bottom-3 left-0 h-[3px] bg-accent_primary transition-all duration-300 rounded-tr-full rounded-tl-full w-0 <?php echo isNavPageActive('contact.php', '/contact');?>"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="spacer w-[20%]"></div>
|
||||
<span class="bottoomnavitem flex flex-col items-center relative" onclick="location.href='<?php echo $basePath . '/blog' ?>'">
|
||||
<lord-icon class="mx-1" src="https://cdn.lordicon.com/lyrrgrsl.json" target=".bottoomnavitem" trigger="hover" colors="primary:#38BDF8" style="width:20px"></lord-icon>
|
||||
<p class="mx-1 text-xs">Blog</p>
|
||||
<span class="absolute -bottom-3 left-0 h-[3px] bg-accent_primary transition-all duration-300 rounded-tr-full rounded-tl-full w-0 <?php echo isNavPageActive('blog.php', '/blog');?>"></span>
|
||||
</span>
|
||||
<span class="bottoomnavitem flex flex-col items-center relative" onclick="location.href='<?php echo $basePath . '/contact' ?>'">
|
||||
<lord-icon class="mx-1" src="https://cdn.lordicon.com/kthelypq.json" target=".bottoomnavitem" trigger="hover" colors="primary:#38BDF8" style="width:20px"></lord-icon>
|
||||
<p class="mx-1 text-xs">Contact</p>
|
||||
<span class="absolute -bottom-3 left-0 h-[3px] bg-accent_primary transition-all duration-300 rounded-tr-full rounded-tl-full w-0 <?php echo isNavPageActive('contact.php', '/contact');?>"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="mobile-floating-share" class="fixed right-[1rem] -bottom-[10vh] z-[40] flex lg:hidden justify-center items-center">
|
||||
|
||||
@@ -581,14 +581,31 @@ video {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.-top-7 {
|
||||
top: -1.75rem;
|
||||
.inset-x-auto {
|
||||
left: auto;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.-bottom-3 {
|
||||
bottom: -0.75rem;
|
||||
}
|
||||
|
||||
.-bottom-\[10vh\] {
|
||||
bottom: -10vh;
|
||||
}
|
||||
|
||||
.-top-1\/2 {
|
||||
top: -50%;
|
||||
}
|
||||
|
||||
.-top-\[0\.60rem\] {
|
||||
top: -0.60rem;
|
||||
}
|
||||
|
||||
.-top-\[23px\] {
|
||||
top: -23px;
|
||||
}
|
||||
|
||||
.bottom-0 {
|
||||
bottom: 0px;
|
||||
}
|
||||
@@ -641,6 +658,10 @@ video {
|
||||
right: 0.75rem;
|
||||
}
|
||||
|
||||
.right-\[1rem\] {
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.right-\[3\.3rem\] {
|
||||
right: 3.3rem;
|
||||
}
|
||||
@@ -677,46 +698,6 @@ video {
|
||||
top: 4.7rem;
|
||||
}
|
||||
|
||||
.-top-1\/2 {
|
||||
top: -50%;
|
||||
}
|
||||
|
||||
.-bottom-5 {
|
||||
bottom: -1.25rem;
|
||||
}
|
||||
|
||||
.bottom-5 {
|
||||
bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.-bottom-2 {
|
||||
bottom: -0.5rem;
|
||||
}
|
||||
|
||||
.-bottom-3 {
|
||||
bottom: -0.75rem;
|
||||
}
|
||||
|
||||
.left-\[1rem\] {
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
.right-\[1rem\] {
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.bottom-\[5vh\] {
|
||||
bottom: 5vh;
|
||||
}
|
||||
|
||||
.-bottom-\[5vh\] {
|
||||
bottom: -5vh;
|
||||
}
|
||||
|
||||
.-bottom-\[10vh\] {
|
||||
bottom: -10vh;
|
||||
}
|
||||
|
||||
.z-10 {
|
||||
z-index: 10;
|
||||
}
|
||||
@@ -741,14 +722,14 @@ video {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.z-\[50\] {
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.z-\[40\] {
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.z-\[50\] {
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.m-2 {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
@@ -1057,6 +1038,10 @@ video {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.h-\[25px\] {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.h-\[27px\] {
|
||||
height: 27px;
|
||||
}
|
||||
@@ -1073,6 +1058,10 @@ video {
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.h-\[3px\] {
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.h-\[40px\] {
|
||||
height: 40px;
|
||||
}
|
||||
@@ -1102,10 +1091,6 @@ video {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.h-\[3px\] {
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.max-h-\[45vh\] {
|
||||
max-height: 45vh;
|
||||
}
|
||||
@@ -1126,8 +1111,8 @@ video {
|
||||
width: 0.5rem;
|
||||
}
|
||||
|
||||
.w-\[20\%\] {
|
||||
width: 20%;
|
||||
.w-\[120px\] {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.w-\[200px\] {
|
||||
@@ -1207,10 +1192,6 @@ video {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.w-\[3rem\] {
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
.max-w-\[45vw\] {
|
||||
max-width: 45vw;
|
||||
}
|
||||
@@ -1287,6 +1268,10 @@ video {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
@@ -1328,6 +1313,10 @@ video {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.overflow-x-hidden {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.overflow-y-scroll {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
@@ -1376,14 +1365,38 @@ video {
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.rounded-bl-xl {
|
||||
border-bottom-left-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.rounded-br-xl {
|
||||
border-bottom-right-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.rounded-tl-2xl {
|
||||
border-top-left-radius: 1rem;
|
||||
}
|
||||
|
||||
.rounded-tl-full {
|
||||
border-top-left-radius: 9999px;
|
||||
}
|
||||
|
||||
.rounded-tl-xl {
|
||||
border-top-left-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.rounded-tr-2xl {
|
||||
border-top-right-radius: 1rem;
|
||||
}
|
||||
|
||||
.rounded-tr-full {
|
||||
border-top-right-radius: 9999px;
|
||||
}
|
||||
|
||||
.rounded-tr-xl {
|
||||
border-top-right-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.border-\[1px\] {
|
||||
border-width: 1px;
|
||||
}
|
||||
@@ -1404,14 +1417,6 @@ video {
|
||||
border-width: 5px;
|
||||
}
|
||||
|
||||
.border-\[12px\] {
|
||||
border-width: 12px;
|
||||
}
|
||||
|
||||
.border-\[6px\] {
|
||||
border-width: 6px;
|
||||
}
|
||||
|
||||
.border-\[8px\] {
|
||||
border-width: 8px;
|
||||
}
|
||||
@@ -1467,6 +1472,10 @@ video {
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.border-\[transparent\] {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.border-accent_primary {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(56 189 248 / var(--tw-border-opacity));
|
||||
@@ -1490,11 +1499,6 @@ video {
|
||||
border-color: rgb(217 217 217 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-bg_primary {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(15 23 42 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-b-accent_secondary_transparent {
|
||||
border-bottom-color: rgba(255, 255, 255, 0.30);
|
||||
}
|
||||
@@ -1566,12 +1570,24 @@ video {
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
}
|
||||
|
||||
.bg-radiul-gradient-secondary-transparent {
|
||||
background-image: radial-gradient(at top left, transparent 65%, #1E293B 35%);
|
||||
}
|
||||
|
||||
.bg-radiul-gradient-transparent-secondary {
|
||||
background-image: radial-gradient(at top right, transparent 65%, #1E293B 35%);
|
||||
}
|
||||
|
||||
.from-bg_third {
|
||||
--tw-gradient-from: #26334A var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(38 51 74 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.bg-clip-padding {
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
@@ -1600,6 +1616,10 @@ video {
|
||||
padding: 0.30rem;
|
||||
}
|
||||
|
||||
.p-\[1\.15rem\] {
|
||||
padding: 1.15rem;
|
||||
}
|
||||
|
||||
.px-1 {
|
||||
padding-left: 0.25rem;
|
||||
padding-right: 0.25rem;
|
||||
@@ -1645,6 +1665,16 @@ video {
|
||||
padding-right: 0.85rem;
|
||||
}
|
||||
|
||||
.px-\[1\.30rem\] {
|
||||
padding-left: 1.30rem;
|
||||
padding-right: 1.30rem;
|
||||
}
|
||||
|
||||
.px-\[1\.35rem\] {
|
||||
padding-left: 1.35rem;
|
||||
padding-right: 1.35rem;
|
||||
}
|
||||
|
||||
.px-\[1rem\] {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
@@ -1705,21 +1735,6 @@ video {
|
||||
padding-bottom: 0.30rem;
|
||||
}
|
||||
|
||||
.px-\[1\.50rem\] {
|
||||
padding-left: 1.50rem;
|
||||
padding-right: 1.50rem;
|
||||
}
|
||||
|
||||
.px-\[1\.30rem\] {
|
||||
padding-left: 1.30rem;
|
||||
padding-right: 1.30rem;
|
||||
}
|
||||
|
||||
.px-\[1\.35rem\] {
|
||||
padding-left: 1.35rem;
|
||||
padding-right: 1.35rem;
|
||||
}
|
||||
|
||||
.pb-1 {
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
@@ -1918,6 +1933,48 @@ video {
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.shadow-\[0px_5px_30px\] {
|
||||
--tw-shadow: 0px 5px 30px;
|
||||
--tw-shadow-colored: 0px 5px 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-\[0px_10px_20px\] {
|
||||
--tw-shadow: 0px 10px 20px;
|
||||
--tw-shadow-colored: 0px 10px 20px 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-\[0px_1px_20px\] {
|
||||
--tw-shadow: 0px 1px 20px;
|
||||
--tw-shadow-colored: 0px 1px 20px 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-\[0px_30px_20px\] {
|
||||
--tw-shadow: 0px 30px 20px;
|
||||
--tw-shadow-colored: 0px 30px 20px 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-\[0px_30px_30px\] {
|
||||
--tw-shadow: 0px 30px 30px;
|
||||
--tw-shadow-colored: 0px 30px 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-\[0px_40px_10px\] {
|
||||
--tw-shadow: 0px 40px 10px;
|
||||
--tw-shadow-colored: 0px 40px 10px 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-\[0px_40px_50px\] {
|
||||
--tw-shadow: 0px 40px 50px;
|
||||
--tw-shadow-colored: 0px 40px 50px 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 {
|
||||
--tw-shadow-color: #38BDF8;
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
@@ -2006,19 +2063,9 @@ video {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.before\:top-0::before {
|
||||
.before\:-left-6::before {
|
||||
content: var(--tw-content);
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.before\:-left-10::before {
|
||||
content: var(--tw-content);
|
||||
left: -2.5rem;
|
||||
}
|
||||
|
||||
.before\:-left-5::before {
|
||||
content: var(--tw-content);
|
||||
left: -1.25rem;
|
||||
left: -1.5rem;
|
||||
}
|
||||
|
||||
.before\:top-1\/2::before {
|
||||
@@ -2026,19 +2073,24 @@ video {
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.before\:-left-7::before {
|
||||
.before\:-bottom-\[50px\]::before {
|
||||
content: var(--tw-content);
|
||||
left: -1.75rem;
|
||||
bottom: -50px;
|
||||
}
|
||||
|
||||
.before\:-left-6::before {
|
||||
.before\:left-0::before {
|
||||
content: var(--tw-content);
|
||||
left: -1.5rem;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.before\:h-\[20px\]::before {
|
||||
.before\:h-\[40px\]::before {
|
||||
content: var(--tw-content);
|
||||
height: 20px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.before\:h-\[50px\]::before {
|
||||
content: var(--tw-content);
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.before\:w-\[20px\]::before {
|
||||
@@ -2046,15 +2098,45 @@ video {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.before\:w-\[120px\]::before {
|
||||
content: var(--tw-content);
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.before\:w-\[50px\]::before {
|
||||
content: var(--tw-content);
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.before\:w-\[70px\]::before {
|
||||
content: var(--tw-content);
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.before\:w-\[75px\]::before {
|
||||
content: var(--tw-content);
|
||||
width: 75px;
|
||||
}
|
||||
|
||||
.before\:w-\[60px\]::before {
|
||||
content: var(--tw-content);
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.before\:w-full::before {
|
||||
content: var(--tw-content);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.before\:rounded-tr-full::before {
|
||||
content: var(--tw-content);
|
||||
border-top-right-radius: 9999px;
|
||||
}
|
||||
|
||||
.before\:bg-bg_primary::before {
|
||||
.before\:bg-bg_secondary::before {
|
||||
content: var(--tw-content);
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(15 23 42 / var(--tw-bg-opacity));
|
||||
background-color: rgb(30 41 59 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.before\:bg-accent_primary::before {
|
||||
@@ -2063,18 +2145,75 @@ video {
|
||||
background-color: rgb(56 189 248 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.before\:bg-\[transparent\]::before {
|
||||
.before\:shadow-\[0px_-10px_0_0_transparent\]::before {
|
||||
content: var(--tw-content);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.before\:shadow-\[0px_-10px_0_0_rgb\(15\2c _23\2c _42\)\]::before {
|
||||
content: var(--tw-content);
|
||||
--tw-shadow: 0px -10px 0 0 rgb(15, 23, 42);
|
||||
--tw-shadow: 0px -10px 0 0 transparent;
|
||||
--tw-shadow-colored: 0px -10px 0 0 var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.before\:shadow-\[0px_-50px_30px\]::before {
|
||||
content: var(--tw-content);
|
||||
--tw-shadow: 0px -50px 30px;
|
||||
--tw-shadow-colored: 0px -50px 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);
|
||||
}
|
||||
|
||||
.before\:shadow-\[0px_50px_30px\]::before {
|
||||
content: var(--tw-content);
|
||||
--tw-shadow: 0px 50px 30px;
|
||||
--tw-shadow-colored: 0px 50px 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);
|
||||
}
|
||||
|
||||
.before\:shadow-\[0px_-50px_30px_inset\]::before {
|
||||
content: var(--tw-content);
|
||||
--tw-shadow: 0px -50px 30px inset;
|
||||
--tw-shadow-colored: inset 0px -50px 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);
|
||||
}
|
||||
|
||||
.before\:shadow-\[0px_50px_30px_inset\]::before {
|
||||
content: var(--tw-content);
|
||||
--tw-shadow: 0px 50px 30px inset;
|
||||
--tw-shadow-colored: inset 0px 50px 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);
|
||||
}
|
||||
|
||||
.before\:shadow-\[0px_0px_30px_inset\]::before {
|
||||
content: var(--tw-content);
|
||||
--tw-shadow: 0px 0px 30px inset;
|
||||
--tw-shadow-colored: inset 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);
|
||||
}
|
||||
|
||||
.before\:shadow-\[0px_10px_30px_inset\]::before {
|
||||
content: var(--tw-content);
|
||||
--tw-shadow: 0px 10px 30px inset;
|
||||
--tw-shadow-colored: inset 0px 10px 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);
|
||||
}
|
||||
|
||||
.before\:shadow-\[0px_10px_50px_inset\]::before {
|
||||
content: var(--tw-content);
|
||||
--tw-shadow: 0px 10px 50px inset;
|
||||
--tw-shadow-colored: inset 0px 10px 50px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.before\:shadow-\[0px_5px_50px_inset\]::before {
|
||||
content: var(--tw-content);
|
||||
--tw-shadow: 0px 5px 50px inset;
|
||||
--tw-shadow-colored: inset 0px 5px 50px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.before\:shadow-bg_primary::before {
|
||||
content: var(--tw-content);
|
||||
--tw-shadow-color: #0F172A;
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
|
||||
.before\:content-\[\'\'\]::before {
|
||||
--tw-content: '';
|
||||
content: var(--tw-content);
|
||||
@@ -2095,9 +2234,9 @@ video {
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.after\:h-\[20px\]::after {
|
||||
.after\:h-\[40px\]::after {
|
||||
content: var(--tw-content);
|
||||
height: 20px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.after\:w-\[20px\]::after {
|
||||
@@ -2110,14 +2249,15 @@ video {
|
||||
border-top-left-radius: 9999px;
|
||||
}
|
||||
|
||||
.after\:bg-\[transparent\]::after {
|
||||
.after\:bg-bg_secondary::after {
|
||||
content: var(--tw-content);
|
||||
background-color: transparent;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(30 41 59 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.after\:shadow-\[0px_-10px_0_0_rgb\(15\2c _23\2c _42\)\]::after {
|
||||
.after\:shadow-\[0px_-10px_0_0_transparent\]::after {
|
||||
content: var(--tw-content);
|
||||
--tw-shadow: 0px -10px 0 0 rgb(15, 23, 42);
|
||||
--tw-shadow: 0px -10px 0 0 transparent;
|
||||
--tw-shadow-colored: 0px -10px 0 0 var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user