Implemented nav menu and basic tailwind styling
This commit is contained in:
@@ -1,13 +1,14 @@
|
|||||||
@inherits LayoutComponentBase
|
@inherits LayoutComponentBase
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row relative min-h-screen">
|
<div class="flex flex-col sm:flex-row relative min-h-screen">
|
||||||
<div class="bg-gradient-to-b from-[#052767] to-[#3a0647] sm:w-[250px] sm:h-screen sm:sticky sm:top-0">
|
<!-- Updated the gradient here to use deep blue and navy -->
|
||||||
|
<div class="bg-gradient-to-b from-[#052767] to-[#020f26] sm:w-[250px] sm:h-screen sm:sticky sm:top-0 shadow-xl">
|
||||||
<NavMenu />
|
<NavMenu />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<main class="flex-1 flex flex-col">
|
<main class="flex-1 flex flex-col">
|
||||||
<div class="bg-[#f7f7f7] border-b border-[#d6d5d5] flex items-center justify-between sm:justify-end h-14 sm:sticky sm:top-0 z-10 px-4 sm:px-8">
|
<div class="bg-[#f7f7f7] border-b border-[#d6d5d5] flex items-center justify-between sm:justify-end h-14 sm:sticky sm:top-0 z-10 px-4 sm:px-8">
|
||||||
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank" class="whitespace-nowrap sm:ml-6 no-underline hover:underline overflow-hidden text-ellipsis">About</a>
|
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank" class="whitespace-nowrap sm:ml-6 no-underline hover:underline overflow-hidden text-ellipsis text-gray-700">About</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<article class="px-4 sm:px-8 py-4">
|
<article class="px-4 sm:px-8 py-4">
|
||||||
|
|||||||
@@ -1,32 +1,134 @@
|
|||||||
<div class="min-h-[3.5rem] bg-black/40 flex items-center px-3 relative">
|
<style>
|
||||||
<div class="container-fluid">
|
/* Premium slim scrollbar for the navigation */
|
||||||
<a class="text-[1.1rem] text-white no-underline" href="">Tmt.SaqaTravel</a>
|
.nav-scrollbar::-webkit-scrollbar {
|
||||||
|
width: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-scrollbar::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-scrollbar::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(255, 255, 255, 0.15);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="min-h-[4.5rem] bg-black/20 flex items-center px-5 relative border-b border-white/10 backdrop-blur-sm">
|
||||||
|
<div class="container-fluid w-full">
|
||||||
|
<a class="group flex items-center gap-3 no-underline" href="">
|
||||||
|
<!-- SAQA-inspired 'Q' Swish & Travel Icon -->
|
||||||
|
<div class="relative flex-shrink-0">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="w-8 h-8 text-blue-300 group-hover:text-white transition-colors duration-300 drop-shadow-lg">
|
||||||
|
<!-- The Swirl / 'Q' body (representing the globe & SAQA watermark) -->
|
||||||
|
<circle cx="10.5" cy="10.5" r="7.5" stroke-linecap="round" />
|
||||||
|
<!-- The infinity/swish tail of the 'Q' mimicking a flight path -->
|
||||||
|
<path stroke-linecap="round" d="M15.5 15.5c3 3 5.5 5 7 3s.5-3-2-5" />
|
||||||
|
<!-- Minimalist airplane taking off -->
|
||||||
|
<path fill="currentColor" stroke="none" d="M14.5 4.5l3-3h1.5l-2.5 3.5 1 3-2-1v-2z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<span class="text-xl font-extrabold tracking-wider text-transparent bg-clip-text bg-gradient-to-r from-blue-100 to-white drop-shadow-sm group-hover:scale-[1.02] transition-transform origin-left">
|
||||||
|
TMT <span class="text-blue-400 font-light">SAQA</span>
|
||||||
|
</span>
|
||||||
|
<span class="text-[0.65rem] text-blue-300/80 uppercase tracking-[0.2em] font-semibold -mt-1 group-hover:text-blue-200 transition-colors">
|
||||||
|
Travel & Logistics
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<input type="checkbox" title="Navigation menu" class="peer appearance-none cursor-pointer w-14 h-10 text-white absolute top-2 right-4 border border-white/10 rounded bg-[url('data:image/svg+xml,%3csvg_xmlns=%27http://www.w3.org/2000/svg%27_viewBox=%270_0_30_30%27%3e%3cpath_stroke=%27rgba(255,255,255,0.55)%27_stroke-linecap=%27round%27_stroke-miterlimit=%2710%27_stroke-width=%272%27_d=%27M4_7h22M4_15h22M4_23h22%27/%3e%3c/svg%3e')] bg-no-repeat bg-center bg-[length:1.75rem] checked:bg-white/50 sm:hidden" />
|
<input type="checkbox" title="Navigation menu" class="peer appearance-none cursor-pointer w-14 h-10 text-white absolute top-4 right-4 border border-white/10 rounded bg-[url('data:image/svg+xml,%3csvg_xmlns=%27http://www.w3.org/2000/svg%27_viewBox=%270_0_30_30%27%3e%3cpath_stroke=%27rgba(255,255,255,0.55)%27_stroke-linecap=%27round%27_stroke-miterlimit=%2710%27_stroke-width=%272%27_d=%27M4_7h22M4_15h22M4_23h22%27/%3e%3c/svg%3e')] bg-no-repeat bg-center bg-[length:1.75rem] checked:bg-white/20 sm:hidden transition-colors z-20" />
|
||||||
|
|
||||||
<div class="hidden peer-checked:block sm:block sm:h-[calc(100vh-3.5rem)] sm:overflow-y-auto" onclick="document.querySelector('.peer').click()">
|
<div class="hidden peer-checked:block sm:block sm:h-[calc(100vh-4.5rem)] sm:overflow-y-auto nav-scrollbar" onclick="document.querySelector('.peer').click()">
|
||||||
<nav class="flex flex-col">
|
<nav class="flex flex-col space-y-1 px-3 py-5">
|
||||||
<div class="text-[0.9rem] pb-2 pt-4 px-3">
|
|
||||||
<NavLink class="flex items-center h-12 w-full text-[#d7d7d7] rounded hover:bg-white/10 hover:text-white transition-colors px-3 [&.active]:bg-white/[0.37] [&.active]:text-white" href="" Match="NavLinkMatch.All">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-5 h-5 mr-3" viewBox="0 0 16 16" aria-hidden="true"><path d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z" /></svg>
|
|
||||||
Home
|
|
||||||
</NavLink>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="text-[0.9rem] pb-2 px-3">
|
<!-- Overview -->
|
||||||
<NavLink class="flex items-center h-12 w-full text-[#d7d7d7] rounded hover:bg-white/10 hover:text-white transition-colors px-3 [&.active]:bg-white/[0.37] [&.active]:text-white" href="counter">
|
<NavLink class="group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-gray-300 hover:text-white hover:bg-white/10 transition-all duration-200 border-l-2 border-transparent [&.active]:bg-blue-500/20 [&.active]:text-white [&.active]:border-blue-400" href="" Match="NavLinkMatch.All">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-5 h-5 mr-3" viewBox="0 0 16 16" aria-hidden="true"><path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z" /></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3 flex-shrink-0 text-gray-400 group-hover:text-white group-[.active]:text-blue-400 transition-colors">
|
||||||
Counter
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
|
||||||
</NavLink>
|
</svg>
|
||||||
</div>
|
Overview
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
|
<!-- Booking -->
|
||||||
|
<NavLink class="group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-gray-300 hover:text-white hover:bg-white/10 transition-all duration-200 border-l-2 border-transparent [&.active]:bg-blue-500/20 [&.active]:text-white [&.active]:border-blue-400" href="booking">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3 flex-shrink-0 text-gray-400 group-hover:text-white group-[.active]:text-blue-400 transition-colors">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
|
||||||
|
</svg>
|
||||||
|
Booking
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
|
<!-- Trip Reports -->
|
||||||
|
<NavLink class="group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-gray-300 hover:text-white hover:bg-white/10 transition-all duration-200 border-l-2 border-transparent [&.active]:bg-blue-500/20 [&.active]:text-white [&.active]:border-blue-400" href="trip-reports">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3 flex-shrink-0 text-gray-400 group-hover:text-white group-[.active]:text-blue-400 transition-colors">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
|
||||||
|
</svg>
|
||||||
|
Trip Reports
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
|
<!-- Financial -->
|
||||||
|
<NavLink class="group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-gray-300 hover:text-white hover:bg-white/10 transition-all duration-200 border-l-2 border-transparent [&.active]:bg-blue-500/20 [&.active]:text-white [&.active]:border-blue-400" href="financial">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3 flex-shrink-0 text-gray-400 group-hover:text-white group-[.active]:text-blue-400 transition-colors">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
Financial
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
|
<!-- Forex -->
|
||||||
|
<NavLink class="group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-gray-300 hover:text-white hover:bg-white/10 transition-all duration-200 border-l-2 border-transparent [&.active]:bg-blue-500/20 [&.active]:text-white [&.active]:border-blue-400" href="forex">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3 flex-shrink-0 text-gray-400 group-hover:text-white group-[.active]:text-blue-400 transition-colors">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
|
||||||
|
</svg>
|
||||||
|
Forex
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
|
<!-- Visa -->
|
||||||
|
<NavLink class="group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-gray-300 hover:text-white hover:bg-white/10 transition-all duration-200 border-l-2 border-transparent [&.active]:bg-blue-500/20 [&.active]:text-white [&.active]:border-blue-400" href="visa">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3 flex-shrink-0 text-gray-400 group-hover:text-white group-[.active]:text-blue-400 transition-colors">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5zm6-10.125a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zm1.294 6.336a6.721 6.721 0 01-3.17.789 6.721 6.721 0 01-3.168-.789 3.376 3.376 0 016.338 0z" />
|
||||||
|
</svg>
|
||||||
|
Visa
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
|
<!-- Mobile -->
|
||||||
|
<NavLink class="group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-gray-300 hover:text-white hover:bg-white/10 transition-all duration-200 border-l-2 border-transparent [&.active]:bg-blue-500/20 [&.active]:text-white [&.active]:border-blue-400" href="mobile">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3 flex-shrink-0 text-gray-400 group-hover:text-white group-[.active]:text-blue-400 transition-colors">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
|
||||||
|
</svg>
|
||||||
|
Mobile
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
|
<!-- Compliance -->
|
||||||
|
<NavLink class="group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-gray-300 hover:text-white hover:bg-white/10 transition-all duration-200 border-l-2 border-transparent [&.active]:bg-blue-500/20 [&.active]:text-white [&.active]:border-blue-400" href="compliance">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3 flex-shrink-0 text-gray-400 group-hover:text-white group-[.active]:text-blue-400 transition-colors">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
|
||||||
|
</svg>
|
||||||
|
Compliance
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
|
<!-- VAS -->
|
||||||
|
<NavLink class="group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-gray-300 hover:text-white hover:bg-white/10 transition-all duration-200 border-l-2 border-transparent [&.active]:bg-blue-500/20 [&.active]:text-white [&.active]:border-blue-400" href="vas">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3 flex-shrink-0 text-gray-400 group-hover:text-white group-[.active]:text-blue-400 transition-colors">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
|
||||||
|
</svg>
|
||||||
|
VAS
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
|
<!-- GDS Sync -->
|
||||||
|
<NavLink class="group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-gray-300 hover:text-white hover:bg-white/10 transition-all duration-200 border-l-2 border-transparent [&.active]:bg-blue-500/20 [&.active]:text-white [&.active]:border-blue-400" href="gds-sync">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3 flex-shrink-0 text-gray-400 group-hover:text-white group-[.active]:text-blue-400 transition-colors">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
|
||||||
|
</svg>
|
||||||
|
GDS Sync
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
<div class="text-[0.9rem] pb-4 px-3">
|
|
||||||
<NavLink class="flex items-center h-12 w-full text-[#d7d7d7] rounded hover:bg-white/10 hover:text-white transition-colors px-3 [&.active]:bg-white/[0.37] [&.active]:text-white" href="weather">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-5 h-5 mr-3" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z" /></svg>
|
|
||||||
Weather
|
|
||||||
</NavLink>
|
|
||||||
</div>
|
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
Vendored
+358
@@ -8,12 +8,18 @@
|
|||||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
||||||
"Courier New", monospace;
|
"Courier New", monospace;
|
||||||
--color-red-600: oklch(57.7% 0.245 27.325);
|
--color-red-600: oklch(57.7% 0.245 27.325);
|
||||||
|
--color-blue-100: oklch(93.2% 0.032 255.585);
|
||||||
|
--color-blue-200: oklch(88.2% 0.059 254.128);
|
||||||
|
--color-blue-300: oklch(80.9% 0.105 251.813);
|
||||||
|
--color-blue-400: oklch(70.7% 0.165 254.624);
|
||||||
|
--color-blue-500: oklch(62.3% 0.214 259.815);
|
||||||
--color-blue-600: oklch(54.6% 0.245 262.881);
|
--color-blue-600: oklch(54.6% 0.245 262.881);
|
||||||
--color-blue-700: oklch(48.8% 0.243 264.376);
|
--color-blue-700: oklch(48.8% 0.243 264.376);
|
||||||
--color-gray-50: oklch(98.5% 0.002 247.839);
|
--color-gray-50: oklch(98.5% 0.002 247.839);
|
||||||
--color-gray-100: oklch(96.7% 0.003 264.542);
|
--color-gray-100: oklch(96.7% 0.003 264.542);
|
||||||
--color-gray-200: oklch(92.8% 0.006 264.531);
|
--color-gray-200: oklch(92.8% 0.006 264.531);
|
||||||
--color-gray-300: oklch(87.2% 0.01 258.338);
|
--color-gray-300: oklch(87.2% 0.01 258.338);
|
||||||
|
--color-gray-400: oklch(70.7% 0.022 261.325);
|
||||||
--color-gray-500: oklch(55.1% 0.027 264.364);
|
--color-gray-500: oklch(55.1% 0.027 264.364);
|
||||||
--color-gray-700: oklch(37.3% 0.034 259.733);
|
--color-gray-700: oklch(37.3% 0.034 259.733);
|
||||||
--color-gray-900: oklch(21% 0.034 264.665);
|
--color-gray-900: oklch(21% 0.034 264.665);
|
||||||
@@ -28,9 +34,17 @@
|
|||||||
--text-xl--line-height: calc(1.75 / 1.25);
|
--text-xl--line-height: calc(1.75 / 1.25);
|
||||||
--text-3xl: 1.875rem;
|
--text-3xl: 1.875rem;
|
||||||
--text-3xl--line-height: calc(2.25 / 1.875);
|
--text-3xl--line-height: calc(2.25 / 1.875);
|
||||||
|
--font-weight-light: 300;
|
||||||
|
--font-weight-medium: 500;
|
||||||
--font-weight-semibold: 600;
|
--font-weight-semibold: 600;
|
||||||
--font-weight-bold: 700;
|
--font-weight-bold: 700;
|
||||||
|
--font-weight-extrabold: 800;
|
||||||
|
--tracking-wide: 0.025em;
|
||||||
|
--tracking-wider: 0.05em;
|
||||||
--radius-lg: 0.5rem;
|
--radius-lg: 0.5rem;
|
||||||
|
--drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
|
||||||
|
--drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
|
||||||
|
--blur-sm: 8px;
|
||||||
--default-transition-duration: 150ms;
|
--default-transition-duration: 150ms;
|
||||||
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
--default-font-family: var(--font-sans);
|
--default-font-family: var(--font-sans);
|
||||||
@@ -204,6 +218,9 @@
|
|||||||
.top-2 {
|
.top-2 {
|
||||||
top: calc(var(--spacing) * 2);
|
top: calc(var(--spacing) * 2);
|
||||||
}
|
}
|
||||||
|
.top-4 {
|
||||||
|
top: calc(var(--spacing) * 4);
|
||||||
|
}
|
||||||
.right-3 {
|
.right-3 {
|
||||||
right: calc(var(--spacing) * 3);
|
right: calc(var(--spacing) * 3);
|
||||||
}
|
}
|
||||||
@@ -219,6 +236,9 @@
|
|||||||
.z-10 {
|
.z-10 {
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
.z-20 {
|
||||||
|
z-index: 20;
|
||||||
|
}
|
||||||
.z-\[1000\] {
|
.z-\[1000\] {
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
}
|
}
|
||||||
@@ -231,6 +251,9 @@
|
|||||||
.my-\[20vh\] {
|
.my-\[20vh\] {
|
||||||
margin-block: 20vh;
|
margin-block: 20vh;
|
||||||
}
|
}
|
||||||
|
.-mt-1 {
|
||||||
|
margin-top: calc(var(--spacing) * -1);
|
||||||
|
}
|
||||||
.mt-4 {
|
.mt-4 {
|
||||||
margin-top: calc(var(--spacing) * 4);
|
margin-top: calc(var(--spacing) * 4);
|
||||||
}
|
}
|
||||||
@@ -255,6 +278,12 @@
|
|||||||
.h-5 {
|
.h-5 {
|
||||||
height: calc(var(--spacing) * 5);
|
height: calc(var(--spacing) * 5);
|
||||||
}
|
}
|
||||||
|
.h-6 {
|
||||||
|
height: calc(var(--spacing) * 6);
|
||||||
|
}
|
||||||
|
.h-8 {
|
||||||
|
height: calc(var(--spacing) * 8);
|
||||||
|
}
|
||||||
.h-10 {
|
.h-10 {
|
||||||
height: calc(var(--spacing) * 10);
|
height: calc(var(--spacing) * 10);
|
||||||
}
|
}
|
||||||
@@ -270,12 +299,21 @@
|
|||||||
.min-h-\[3\.5rem\] {
|
.min-h-\[3\.5rem\] {
|
||||||
min-height: 3.5rem;
|
min-height: 3.5rem;
|
||||||
}
|
}
|
||||||
|
.min-h-\[4\.5rem\] {
|
||||||
|
min-height: 4.5rem;
|
||||||
|
}
|
||||||
.min-h-screen {
|
.min-h-screen {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
.w-5 {
|
.w-5 {
|
||||||
width: calc(var(--spacing) * 5);
|
width: calc(var(--spacing) * 5);
|
||||||
}
|
}
|
||||||
|
.w-6 {
|
||||||
|
width: calc(var(--spacing) * 6);
|
||||||
|
}
|
||||||
|
.w-8 {
|
||||||
|
width: calc(var(--spacing) * 8);
|
||||||
|
}
|
||||||
.w-14 {
|
.w-14 {
|
||||||
width: calc(var(--spacing) * 14);
|
width: calc(var(--spacing) * 14);
|
||||||
}
|
}
|
||||||
@@ -294,9 +332,15 @@
|
|||||||
.flex-1 {
|
.flex-1 {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
.flex-shrink-0 {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
.border-collapse {
|
.border-collapse {
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
}
|
}
|
||||||
|
.origin-left {
|
||||||
|
transform-origin: 0;
|
||||||
|
}
|
||||||
.animate-\[ping_1\.5s_cubic-bezier\(0\,0\.2\,0\.8\,1\)_infinite\] {
|
.animate-\[ping_1\.5s_cubic-bezier\(0\,0\.2\,0\.8\,1\)_infinite\] {
|
||||||
animation: ping 1.5s cubic-bezier(0,0.2,0.8,1) infinite;
|
animation: ping 1.5s cubic-bezier(0,0.2,0.8,1) infinite;
|
||||||
}
|
}
|
||||||
@@ -315,9 +359,22 @@
|
|||||||
.justify-between {
|
.justify-between {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
.gap-2 {
|
||||||
|
gap: calc(var(--spacing) * 2);
|
||||||
|
}
|
||||||
|
.gap-3 {
|
||||||
|
gap: calc(var(--spacing) * 3);
|
||||||
|
}
|
||||||
.gap-4 {
|
.gap-4 {
|
||||||
gap: calc(var(--spacing) * 4);
|
gap: calc(var(--spacing) * 4);
|
||||||
}
|
}
|
||||||
|
.space-y-1 {
|
||||||
|
:where(& > :not(:last-child)) {
|
||||||
|
--tw-space-y-reverse: 0;
|
||||||
|
margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
|
||||||
|
margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
|
||||||
|
}
|
||||||
|
}
|
||||||
.divide-y {
|
.divide-y {
|
||||||
:where(& > :not(:last-child)) {
|
:where(& > :not(:last-child)) {
|
||||||
--tw-divide-y-reverse: 0;
|
--tw-divide-y-reverse: 0;
|
||||||
@@ -363,6 +420,10 @@
|
|||||||
border-bottom-style: var(--tw-border-style);
|
border-bottom-style: var(--tw-border-style);
|
||||||
border-bottom-width: 1px;
|
border-bottom-width: 1px;
|
||||||
}
|
}
|
||||||
|
.border-l-2 {
|
||||||
|
border-left-style: var(--tw-border-style);
|
||||||
|
border-left-width: 2px;
|
||||||
|
}
|
||||||
.border-\[\#0087ff\] {
|
.border-\[\#0087ff\] {
|
||||||
border-color: #0087ff;
|
border-color: #0087ff;
|
||||||
}
|
}
|
||||||
@@ -372,6 +433,9 @@
|
|||||||
.border-gray-300 {
|
.border-gray-300 {
|
||||||
border-color: var(--color-gray-300);
|
border-color: var(--color-gray-300);
|
||||||
}
|
}
|
||||||
|
.border-transparent {
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
.border-white\/10 {
|
.border-white\/10 {
|
||||||
border-color: color-mix(in srgb, #fff 10%, transparent);
|
border-color: color-mix(in srgb, #fff 10%, transparent);
|
||||||
@supports (color: color-mix(in lab, red, red)) {
|
@supports (color: color-mix(in lab, red, red)) {
|
||||||
@@ -387,6 +451,12 @@
|
|||||||
.bg-\[\#ffffe0\] {
|
.bg-\[\#ffffe0\] {
|
||||||
background-color: #ffffe0;
|
background-color: #ffffe0;
|
||||||
}
|
}
|
||||||
|
.bg-black\/20 {
|
||||||
|
background-color: color-mix(in srgb, #000 20%, transparent);
|
||||||
|
@supports (color: color-mix(in lab, red, red)) {
|
||||||
|
background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
|
||||||
|
}
|
||||||
|
}
|
||||||
.bg-black\/40 {
|
.bg-black\/40 {
|
||||||
background-color: color-mix(in srgb, #000 40%, transparent);
|
background-color: color-mix(in srgb, #000 40%, transparent);
|
||||||
@supports (color: color-mix(in lab, red, red)) {
|
@supports (color: color-mix(in lab, red, red)) {
|
||||||
@@ -409,6 +479,10 @@
|
|||||||
--tw-gradient-position: to bottom in oklab;
|
--tw-gradient-position: to bottom in oklab;
|
||||||
background-image: linear-gradient(var(--tw-gradient-stops));
|
background-image: linear-gradient(var(--tw-gradient-stops));
|
||||||
}
|
}
|
||||||
|
.bg-gradient-to-r {
|
||||||
|
--tw-gradient-position: to right in oklab;
|
||||||
|
background-image: linear-gradient(var(--tw-gradient-stops));
|
||||||
|
}
|
||||||
.bg-\[url\(\'data\:image\/svg\+xml\,\%3csvg_xmlns\=\%27http\:\/\/www\.w3\.org\/2000\/svg\%27_viewBox\=\%270_0_30_30\%27\%3e\%3cpath_stroke\=\%27rgba\(255\,255\,255\,0\.55\)\%27_stroke-linecap\=\%27round\%27_stroke-miterlimit\=\%2710\%27_stroke-width\=\%272\%27_d\=\%27M4_7h22M4_15h22M4_23h22\%27\/\%3e\%3c\/svg\%3e\'\)\] {
|
.bg-\[url\(\'data\:image\/svg\+xml\,\%3csvg_xmlns\=\%27http\:\/\/www\.w3\.org\/2000\/svg\%27_viewBox\=\%270_0_30_30\%27\%3e\%3cpath_stroke\=\%27rgba\(255\,255\,255\,0\.55\)\%27_stroke-linecap\=\%27round\%27_stroke-miterlimit\=\%2710\%27_stroke-width\=\%272\%27_d\=\%27M4_7h22M4_15h22M4_23h22\%27\/\%3e\%3c\/svg\%3e\'\)\] {
|
||||||
background-image: url('data:image/svg+xml,%3csvg_xmlns=%27http://www.w3.org/2000/svg%27_viewBox=%270_0_30_30%27%3e%3cpath_stroke=%27rgba(255,255,255,0.55)%27_stroke-linecap=%27round%27_stroke-miterlimit=%2710%27_stroke-width=%272%27_d=%27M4_7h22M4_15h22M4_23h22%27/%3e%3c/svg%3e');
|
background-image: url('data:image/svg+xml,%3csvg_xmlns=%27http://www.w3.org/2000/svg%27_viewBox=%270_0_30_30%27%3e%3cpath_stroke=%27rgba(255,255,255,0.55)%27_stroke-linecap=%27round%27_stroke-miterlimit=%2710%27_stroke-width=%272%27_d=%27M4_7h22M4_15h22M4_23h22%27/%3e%3c/svg%3e');
|
||||||
}
|
}
|
||||||
@@ -416,13 +490,28 @@
|
|||||||
--tw-gradient-from: #052767;
|
--tw-gradient-from: #052767;
|
||||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||||
}
|
}
|
||||||
|
.from-blue-100 {
|
||||||
|
--tw-gradient-from: var(--color-blue-100);
|
||||||
|
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||||
|
}
|
||||||
.to-\[\#3a0647\] {
|
.to-\[\#3a0647\] {
|
||||||
--tw-gradient-to: #3a0647;
|
--tw-gradient-to: #3a0647;
|
||||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||||
}
|
}
|
||||||
|
.to-\[\#020f26\] {
|
||||||
|
--tw-gradient-to: #020f26;
|
||||||
|
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||||
|
}
|
||||||
|
.to-white {
|
||||||
|
--tw-gradient-to: var(--color-white);
|
||||||
|
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||||
|
}
|
||||||
.bg-\[length\:1\.75rem\] {
|
.bg-\[length\:1\.75rem\] {
|
||||||
background-size: 1.75rem;
|
background-size: 1.75rem;
|
||||||
}
|
}
|
||||||
|
.bg-clip-text {
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
.bg-center {
|
.bg-center {
|
||||||
background-position: center;
|
background-position: center;
|
||||||
}
|
}
|
||||||
@@ -444,6 +533,9 @@
|
|||||||
.px-4 {
|
.px-4 {
|
||||||
padding-inline: calc(var(--spacing) * 4);
|
padding-inline: calc(var(--spacing) * 4);
|
||||||
}
|
}
|
||||||
|
.px-5 {
|
||||||
|
padding-inline: calc(var(--spacing) * 5);
|
||||||
|
}
|
||||||
.px-6 {
|
.px-6 {
|
||||||
padding-inline: calc(var(--spacing) * 6);
|
padding-inline: calc(var(--spacing) * 6);
|
||||||
}
|
}
|
||||||
@@ -453,12 +545,18 @@
|
|||||||
.py-2 {
|
.py-2 {
|
||||||
padding-block: calc(var(--spacing) * 2);
|
padding-block: calc(var(--spacing) * 2);
|
||||||
}
|
}
|
||||||
|
.py-2\.5 {
|
||||||
|
padding-block: calc(var(--spacing) * 2.5);
|
||||||
|
}
|
||||||
.py-3 {
|
.py-3 {
|
||||||
padding-block: calc(var(--spacing) * 3);
|
padding-block: calc(var(--spacing) * 3);
|
||||||
}
|
}
|
||||||
.py-4 {
|
.py-4 {
|
||||||
padding-block: calc(var(--spacing) * 4);
|
padding-block: calc(var(--spacing) * 4);
|
||||||
}
|
}
|
||||||
|
.py-5 {
|
||||||
|
padding-block: calc(var(--spacing) * 5);
|
||||||
|
}
|
||||||
.pt-4 {
|
.pt-4 {
|
||||||
padding-top: calc(var(--spacing) * 4);
|
padding-top: calc(var(--spacing) * 4);
|
||||||
}
|
}
|
||||||
@@ -493,17 +591,47 @@
|
|||||||
.text-\[0\.9rem\] {
|
.text-\[0\.9rem\] {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
|
.text-\[0\.65rem\] {
|
||||||
|
font-size: 0.65rem;
|
||||||
|
}
|
||||||
.text-\[1\.1rem\] {
|
.text-\[1\.1rem\] {
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
}
|
}
|
||||||
|
.text-\[1\.15rem\] {
|
||||||
|
font-size: 1.15rem;
|
||||||
|
}
|
||||||
.font-bold {
|
.font-bold {
|
||||||
--tw-font-weight: var(--font-weight-bold);
|
--tw-font-weight: var(--font-weight-bold);
|
||||||
font-weight: var(--font-weight-bold);
|
font-weight: var(--font-weight-bold);
|
||||||
}
|
}
|
||||||
|
.font-extrabold {
|
||||||
|
--tw-font-weight: var(--font-weight-extrabold);
|
||||||
|
font-weight: var(--font-weight-extrabold);
|
||||||
|
}
|
||||||
|
.font-light {
|
||||||
|
--tw-font-weight: var(--font-weight-light);
|
||||||
|
font-weight: var(--font-weight-light);
|
||||||
|
}
|
||||||
|
.font-medium {
|
||||||
|
--tw-font-weight: var(--font-weight-medium);
|
||||||
|
font-weight: var(--font-weight-medium);
|
||||||
|
}
|
||||||
.font-semibold {
|
.font-semibold {
|
||||||
--tw-font-weight: var(--font-weight-semibold);
|
--tw-font-weight: var(--font-weight-semibold);
|
||||||
font-weight: var(--font-weight-semibold);
|
font-weight: var(--font-weight-semibold);
|
||||||
}
|
}
|
||||||
|
.tracking-\[0\.2em\] {
|
||||||
|
--tw-tracking: 0.2em;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
}
|
||||||
|
.tracking-wide {
|
||||||
|
--tw-tracking: var(--tracking-wide);
|
||||||
|
letter-spacing: var(--tracking-wide);
|
||||||
|
}
|
||||||
|
.tracking-wider {
|
||||||
|
--tw-tracking: var(--tracking-wider);
|
||||||
|
letter-spacing: var(--tracking-wider);
|
||||||
|
}
|
||||||
.text-ellipsis {
|
.text-ellipsis {
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
@@ -513,9 +641,27 @@
|
|||||||
.text-\[\#d7d7d7\] {
|
.text-\[\#d7d7d7\] {
|
||||||
color: #d7d7d7;
|
color: #d7d7d7;
|
||||||
}
|
}
|
||||||
|
.text-blue-300 {
|
||||||
|
color: var(--color-blue-300);
|
||||||
|
}
|
||||||
|
.text-blue-300\/80 {
|
||||||
|
color: color-mix(in srgb, oklch(80.9% 0.105 251.813) 80%, transparent);
|
||||||
|
@supports (color: color-mix(in lab, red, red)) {
|
||||||
|
color: color-mix(in oklab, var(--color-blue-300) 80%, transparent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.text-blue-400 {
|
||||||
|
color: var(--color-blue-400);
|
||||||
|
}
|
||||||
.text-blue-600 {
|
.text-blue-600 {
|
||||||
color: var(--color-blue-600);
|
color: var(--color-blue-600);
|
||||||
}
|
}
|
||||||
|
.text-gray-300 {
|
||||||
|
color: var(--color-gray-300);
|
||||||
|
}
|
||||||
|
.text-gray-400 {
|
||||||
|
color: var(--color-gray-400);
|
||||||
|
}
|
||||||
.text-gray-500 {
|
.text-gray-500 {
|
||||||
color: var(--color-gray-500);
|
color: var(--color-gray-500);
|
||||||
}
|
}
|
||||||
@@ -528,9 +674,15 @@
|
|||||||
.text-red-600 {
|
.text-red-600 {
|
||||||
color: var(--color-red-600);
|
color: var(--color-red-600);
|
||||||
}
|
}
|
||||||
|
.text-transparent {
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
.text-white {
|
.text-white {
|
||||||
color: var(--color-white);
|
color: var(--color-white);
|
||||||
}
|
}
|
||||||
|
.uppercase {
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
.italic {
|
.italic {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
@@ -555,6 +707,10 @@
|
|||||||
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
||||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||||
}
|
}
|
||||||
|
.shadow-xl {
|
||||||
|
--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
||||||
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||||
|
}
|
||||||
.ring-1 {
|
.ring-1 {
|
||||||
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
||||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||||
@@ -562,6 +718,21 @@
|
|||||||
.ring-black {
|
.ring-black {
|
||||||
--tw-ring-color: var(--color-black);
|
--tw-ring-color: var(--color-black);
|
||||||
}
|
}
|
||||||
|
.drop-shadow-lg {
|
||||||
|
--tw-drop-shadow-size: drop-shadow(0 4px 4px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
|
||||||
|
--tw-drop-shadow: drop-shadow(var(--drop-shadow-lg));
|
||||||
|
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,);
|
||||||
|
}
|
||||||
|
.drop-shadow-sm {
|
||||||
|
--tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
|
||||||
|
--tw-drop-shadow: drop-shadow(var(--drop-shadow-sm));
|
||||||
|
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-sm {
|
||||||
|
--tw-backdrop-blur: blur(var(--blur-sm));
|
||||||
|
-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-all {
|
.transition-all {
|
||||||
transition-property: all;
|
transition-property: all;
|
||||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||||
@@ -572,10 +743,49 @@
|
|||||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||||
}
|
}
|
||||||
|
.transition-transform {
|
||||||
|
transition-property: transform, translate, scale, rotate;
|
||||||
|
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||||
|
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||||
|
}
|
||||||
|
.duration-200 {
|
||||||
|
--tw-duration: 200ms;
|
||||||
|
transition-duration: 200ms;
|
||||||
|
}
|
||||||
|
.duration-300 {
|
||||||
|
--tw-duration: 300ms;
|
||||||
|
transition-duration: 300ms;
|
||||||
|
}
|
||||||
.duration-500 {
|
.duration-500 {
|
||||||
--tw-duration: 500ms;
|
--tw-duration: 500ms;
|
||||||
transition-duration: 500ms;
|
transition-duration: 500ms;
|
||||||
}
|
}
|
||||||
|
.group-hover\:scale-\[1\.02\] {
|
||||||
|
&:is(:where(.group):hover *) {
|
||||||
|
@media (hover: hover) {
|
||||||
|
scale: 1.02;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.group-hover\:text-blue-200 {
|
||||||
|
&:is(:where(.group):hover *) {
|
||||||
|
@media (hover: hover) {
|
||||||
|
color: var(--color-blue-200);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.group-hover\:text-white {
|
||||||
|
&:is(:where(.group):hover *) {
|
||||||
|
@media (hover: hover) {
|
||||||
|
color: var(--color-white);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.group-\[\.active\]\:text-blue-400 {
|
||||||
|
&:is(:where(.group):is(.active) *) {
|
||||||
|
color: var(--color-blue-400);
|
||||||
|
}
|
||||||
|
}
|
||||||
.peer-checked\:block {
|
.peer-checked\:block {
|
||||||
&:is(:where(.peer):checked ~ *) {
|
&:is(:where(.peer):checked ~ *) {
|
||||||
display: block;
|
display: block;
|
||||||
@@ -599,6 +809,14 @@
|
|||||||
animation: slideUp 1.5s cubic-bezier(0.05,0.89,0.25,1.02) 0.3s,fadeIn 0.5s ease-in-out 0.3s;
|
animation: slideUp 1.5s cubic-bezier(0.05,0.89,0.25,1.02) 0.3s,fadeIn 0.5s ease-in-out 0.3s;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.checked\:bg-white\/20 {
|
||||||
|
&:checked {
|
||||||
|
background-color: color-mix(in srgb, #fff 20%, transparent);
|
||||||
|
@supports (color: color-mix(in lab, red, red)) {
|
||||||
|
background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.checked\:bg-white\/50 {
|
.checked\:bg-white\/50 {
|
||||||
&:checked {
|
&:checked {
|
||||||
background-color: color-mix(in srgb, #fff 50%, transparent);
|
background-color: color-mix(in srgb, #fff 50%, transparent);
|
||||||
@@ -687,6 +905,11 @@
|
|||||||
height: calc(100vh - 3.5rem);
|
height: calc(100vh - 3.5rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.sm\:h-\[calc\(100vh-4\.5rem\)\] {
|
||||||
|
@media (width >= 40rem) {
|
||||||
|
height: calc(100vh - 4.5rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
.sm\:h-screen {
|
.sm\:h-screen {
|
||||||
@media (width >= 40rem) {
|
@media (width >= 40rem) {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
@@ -717,6 +940,19 @@
|
|||||||
padding-inline: calc(var(--spacing) * 8);
|
padding-inline: calc(var(--spacing) * 8);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.\[\&\.active\]\:border-blue-400 {
|
||||||
|
&.active {
|
||||||
|
border-color: var(--color-blue-400);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.\[\&\.active\]\:bg-blue-500\/20 {
|
||||||
|
&.active {
|
||||||
|
background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 20%, transparent);
|
||||||
|
@supports (color: color-mix(in lab, red, red)) {
|
||||||
|
background-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.\[\&\.active\]\:bg-white\/\[0\.37\] {
|
.\[\&\.active\]\:bg-white\/\[0\.37\] {
|
||||||
&.active {
|
&.active {
|
||||||
background-color: color-mix(in srgb, #fff 37%, transparent);
|
background-color: color-mix(in srgb, #fff 37%, transparent);
|
||||||
@@ -731,6 +967,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@property --tw-space-y-reverse {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
initial-value: 0;
|
||||||
|
}
|
||||||
@property --tw-divide-y-reverse {
|
@property --tw-divide-y-reverse {
|
||||||
syntax: "*";
|
syntax: "*";
|
||||||
inherits: false;
|
inherits: false;
|
||||||
@@ -787,6 +1028,10 @@
|
|||||||
syntax: "*";
|
syntax: "*";
|
||||||
inherits: false;
|
inherits: false;
|
||||||
}
|
}
|
||||||
|
@property --tw-tracking {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
@property --tw-shadow {
|
@property --tw-shadow {
|
||||||
syntax: "*";
|
syntax: "*";
|
||||||
inherits: false;
|
inherits: false;
|
||||||
@@ -852,6 +1097,95 @@
|
|||||||
inherits: false;
|
inherits: false;
|
||||||
initial-value: 0 0 #0000;
|
initial-value: 0 0 #0000;
|
||||||
}
|
}
|
||||||
|
@property --tw-blur {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-brightness {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-contrast {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-grayscale {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-hue-rotate {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-invert {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-opacity {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-saturate {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-sepia {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-drop-shadow {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-drop-shadow-color {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-drop-shadow-alpha {
|
||||||
|
syntax: "<percentage>";
|
||||||
|
inherits: false;
|
||||||
|
initial-value: 100%;
|
||||||
|
}
|
||||||
|
@property --tw-drop-shadow-size {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-backdrop-blur {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-backdrop-brightness {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-backdrop-contrast {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-backdrop-grayscale {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-backdrop-hue-rotate {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-backdrop-invert {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-backdrop-opacity {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-backdrop-saturate {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --tw-backdrop-sepia {
|
||||||
|
syntax: "*";
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
@property --tw-duration {
|
@property --tw-duration {
|
||||||
syntax: "*";
|
syntax: "*";
|
||||||
inherits: false;
|
inherits: false;
|
||||||
@@ -865,6 +1199,7 @@
|
|||||||
@layer properties {
|
@layer properties {
|
||||||
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
|
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
|
||||||
*, ::before, ::after, ::backdrop {
|
*, ::before, ::after, ::backdrop {
|
||||||
|
--tw-space-y-reverse: 0;
|
||||||
--tw-divide-y-reverse: 0;
|
--tw-divide-y-reverse: 0;
|
||||||
--tw-border-style: solid;
|
--tw-border-style: solid;
|
||||||
--tw-gradient-position: initial;
|
--tw-gradient-position: initial;
|
||||||
@@ -877,6 +1212,7 @@
|
|||||||
--tw-gradient-via-position: 50%;
|
--tw-gradient-via-position: 50%;
|
||||||
--tw-gradient-to-position: 100%;
|
--tw-gradient-to-position: 100%;
|
||||||
--tw-font-weight: initial;
|
--tw-font-weight: initial;
|
||||||
|
--tw-tracking: initial;
|
||||||
--tw-shadow: 0 0 #0000;
|
--tw-shadow: 0 0 #0000;
|
||||||
--tw-shadow-color: initial;
|
--tw-shadow-color: initial;
|
||||||
--tw-shadow-alpha: 100%;
|
--tw-shadow-alpha: 100%;
|
||||||
@@ -891,6 +1227,28 @@
|
|||||||
--tw-ring-offset-width: 0px;
|
--tw-ring-offset-width: 0px;
|
||||||
--tw-ring-offset-color: #fff;
|
--tw-ring-offset-color: #fff;
|
||||||
--tw-ring-offset-shadow: 0 0 #0000;
|
--tw-ring-offset-shadow: 0 0 #0000;
|
||||||
|
--tw-blur: initial;
|
||||||
|
--tw-brightness: initial;
|
||||||
|
--tw-contrast: initial;
|
||||||
|
--tw-grayscale: initial;
|
||||||
|
--tw-hue-rotate: initial;
|
||||||
|
--tw-invert: initial;
|
||||||
|
--tw-opacity: initial;
|
||||||
|
--tw-saturate: initial;
|
||||||
|
--tw-sepia: initial;
|
||||||
|
--tw-drop-shadow: initial;
|
||||||
|
--tw-drop-shadow-color: initial;
|
||||||
|
--tw-drop-shadow-alpha: 100%;
|
||||||
|
--tw-drop-shadow-size: initial;
|
||||||
|
--tw-backdrop-blur: initial;
|
||||||
|
--tw-backdrop-brightness: initial;
|
||||||
|
--tw-backdrop-contrast: initial;
|
||||||
|
--tw-backdrop-grayscale: initial;
|
||||||
|
--tw-backdrop-hue-rotate: initial;
|
||||||
|
--tw-backdrop-invert: initial;
|
||||||
|
--tw-backdrop-opacity: initial;
|
||||||
|
--tw-backdrop-saturate: initial;
|
||||||
|
--tw-backdrop-sepia: initial;
|
||||||
--tw-duration: initial;
|
--tw-duration: initial;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user