From e9f34b1f3c29b31c63f251a6f53a477dc78c219a Mon Sep 17 00:00:00 2001 From: marszayn Date: Tue, 29 Jul 2025 16:03:11 +0700 Subject: [PATCH] update terakhir nih --- Controllers/DetailController.cs | 7 +- Controllers/HistoryController.cs | 22 + Controllers/HomeController.cs | 6 + Controllers/LoginController.cs | 23 + Controllers/ProfilController.cs | 2 - Controllers/SubmitController.cs | 22 + Views/DetailPenjemputan/Batal.cshtml | 104 +++ Views/DetailPenjemputan/Index.cshtml | 7 +- Views/History/Details.cshtml | 162 ++++ Views/History/Index.cshtml | 153 ++++ Views/Home/Index.cshtml | 114 ++- Views/Login/Index.cshtml | 277 ++++++ Views/Profil/Index.cshtml | 4 +- Views/Shared/Components/_Navigation.cshtml | 97 +- Views/Shared/_Layout.cshtml | 3 + Views/Submit/Index.cshtml | 125 +++ Views/Submit/Struk.cshtml | 81 ++ appsettings.json | 3 + wwwroot/css/watch.css | 982 ++++++++------------- 19 files changed, 1433 insertions(+), 761 deletions(-) create mode 100644 Controllers/HistoryController.cs create mode 100644 Controllers/LoginController.cs create mode 100644 Controllers/SubmitController.cs create mode 100644 Views/DetailPenjemputan/Batal.cshtml create mode 100644 Views/History/Details.cshtml create mode 100644 Views/History/Index.cshtml create mode 100644 Views/Login/Index.cshtml create mode 100644 Views/Submit/Index.cshtml create mode 100644 Views/Submit/Struk.cshtml diff --git a/Controllers/DetailController.cs b/Controllers/DetailController.cs index 30ded0c..818b465 100644 --- a/Controllers/DetailController.cs +++ b/Controllers/DetailController.cs @@ -12,6 +12,11 @@ namespace eSPJ.Controllers return View(); } - + [HttpGet("batal")] + public IActionResult Batal() + { + return View("~/Views/DetailPenjemputan/Batal.cshtml"); + } + } } diff --git a/Controllers/HistoryController.cs b/Controllers/HistoryController.cs new file mode 100644 index 0000000..89b85de --- /dev/null +++ b/Controllers/HistoryController.cs @@ -0,0 +1,22 @@ +using Microsoft.AspNetCore.Mvc; + +namespace eSPJ.Controllers +{ + [Route("history")] + public class HistoryController : Controller + { + + [HttpGet("")] + public IActionResult Index() + { + return View(); + } + + [HttpGet("details/{id}")] + public IActionResult Details(int id) + { + ViewData["Id"] = id; + return View(); + } + } +} diff --git a/Controllers/HomeController.cs b/Controllers/HomeController.cs index 1158a48..dbe457d 100644 --- a/Controllers/HomeController.cs +++ b/Controllers/HomeController.cs @@ -6,6 +6,7 @@ namespace eSPJ.Controllers; public class HomeController : Controller { + private readonly ILogger _logger; public HomeController(ILogger logger) @@ -18,6 +19,11 @@ public class HomeController : Controller return View(); } + public IActionResult Batal() + { + return View(); + } + public IActionResult Privacy() { return View(); diff --git a/Controllers/LoginController.cs b/Controllers/LoginController.cs new file mode 100644 index 0000000..f10c0e3 --- /dev/null +++ b/Controllers/LoginController.cs @@ -0,0 +1,23 @@ +using Microsoft.AspNetCore.Mvc; + + +namespace eSPJ.Controllers +{ + [Route("login")] + public class LoginController : Controller + { + private readonly IConfiguration _configuration; + + public LoginController(IConfiguration configuration) + { + _configuration = configuration; + } + + [HttpGet("")] + public IActionResult Index() + { + ViewBag.SSOLoginUrl = _configuration["SSO:LoginUrl"]; + return View(); + } + } +} diff --git a/Controllers/ProfilController.cs b/Controllers/ProfilController.cs index cbc0eaf..9f6b540 100644 --- a/Controllers/ProfilController.cs +++ b/Controllers/ProfilController.cs @@ -11,7 +11,5 @@ namespace eSPJ.Controllers { return View(); } - - } } diff --git a/Controllers/SubmitController.cs b/Controllers/SubmitController.cs new file mode 100644 index 0000000..e343da5 --- /dev/null +++ b/Controllers/SubmitController.cs @@ -0,0 +1,22 @@ +using Microsoft.AspNetCore.Mvc; + +namespace eSPJ.Controllers +{ + [Route("submit")] + public class SubmitController : Controller + { + + [HttpGet("")] + public IActionResult Index() + { + return View(); + } + + + [HttpGet("struk")] + public IActionResult Struk() + { + return View(); + } + } +} diff --git a/Views/DetailPenjemputan/Batal.cshtml b/Views/DetailPenjemputan/Batal.cshtml new file mode 100644 index 0000000..a2c784e --- /dev/null +++ b/Views/DetailPenjemputan/Batal.cshtml @@ -0,0 +1,104 @@ +@{ + ViewData["Title"] = "Detail Batal Penjemputan"; +} + +
+
+
+ + + +

Pembatalan Penjemputan

+
+
+
+ +
+
+
+
+ +
+
+

CV Tri Berkah Sejahtera

+

Lokasi yang dibatalkan

+
+
+

+ Kp. Pertanian II Rt.004 Rw.001 Kel. Klender Kec, Duren Sawit, Kota Adm. Jakarta Timur 13470 +

+
+
+ +
+
+
+
+ +
+
+

Form Pembatalan

+

Berikan keterangan

+
+
+ +
+ +
+ + + +
+ +
+ + Batal + + +
+
+
+
+ + +
+ + + + \ No newline at end of file diff --git a/Views/DetailPenjemputan/Index.cshtml b/Views/DetailPenjemputan/Index.cshtml index 69342a5..533d93f 100644 --- a/Views/DetailPenjemputan/Index.cshtml +++ b/Views/DetailPenjemputan/Index.cshtml @@ -52,7 +52,7 @@
- +
@@ -66,7 +66,8 @@ - + + @@ -77,7 +78,7 @@ odoInput.addEventListener('focus', function() { setTimeout(function() { odoInput.scrollIntoView({ behavior: 'smooth', block: 'center' }); - }, 300); // delay agar keyboard muncul dulu + }, 300); }); } }); diff --git a/Views/History/Details.cshtml b/Views/History/Details.cshtml new file mode 100644 index 0000000..4de71e6 --- /dev/null +++ b/Views/History/Details.cshtml @@ -0,0 +1,162 @@ +@{ + ViewData["Title"] = "Detail Perjalanan - DLH"; +} + +
+ +
+
+ + + +

Detail Perjalanan

+
+
+
+ +
+ +
+
+
+ +
+
+

Data SPJ

+

Surat Perintah Jalan

+
+
+ +
+
+ No. SPJ + SPJ/07-2025/PKM/000476 +
+
+ Plat Nomor + B 9632 TOR +
+
+ Nomer Pintu + JRC 005 +
+
+ Tujuan Pembuangan + Taman Barito +
+
+
+ + + +
+
+
+ +
+
+

Ringkasan

+

Informasi perjalanan

+
+
+ +
+
+
3
+
Total
+
+
+
1
+
Selesai
+
+
+
1
+
Proses
+
+
+
1
+
Batal
+
+
+
+ + +
+
+
+ +
+
+

Lokasi Pengangkutan

+

Daftar lokasi yang dikunjungi

+
+
+ +
+ +
+
+
+ +
+
+
+ Pengangkutan + Lokasi 1 +
+

CV Tri Mitra Utama

+

Shell Radio Dalam

+

Alamat:

+

+ Jl. Radio Dalam Raya No.6C Gandaria Utara, Kecamatan Kebayoran Baru, Kota Jakarta Selatan 12140 +

+
+
+
+ + +
+
+
+ +
+
+
+ Sudah Diangkut + Lokasi 2 +
+

CV Tri Berkah Sejahtera

+

Alamat:

+

+ Kp. Pertanian II Rt.004 Rw.001 Kel. Klender Kec, Duren Sawit, Kota Adm. Jakarta Timur 13470 +

+
+
+
+ + +
+
+
+ +
+
+
+ Batal Angkut + Lokasi 3 +
+

CV Tri Berkah Sejahtera

+

Alamat:

+

+ Kp. Pertanian II Rt.004 Rw.001 Kel. Klender Kec, Duren Sawit, Kota Adm. Jakarta Timur 13470 +

+
+
+
+
+
+ +
+ + +
\ No newline at end of file diff --git a/Views/History/Index.cshtml b/Views/History/Index.cshtml new file mode 100644 index 0000000..339294c --- /dev/null +++ b/Views/History/Index.cshtml @@ -0,0 +1,153 @@ +@{ + ViewData["Title"] = "History - DLH"; +} + +
+
+
+ + + +

Riwayat Perjalanan

+
+
+
+ + @{ + var spjList = new[] + { + new { + Id = 1, + NoSpj = "SPJ/07-2025/PKM/000478", + Plat = "B 5678 ABC", + Kode = "JRC 007", + Tujuan = "Bantar Gebang", + Status = "In Progress", + Tanggal = "28 Jul 2025", + Waktu = "16:45" + }, + new { + Id = 2, + NoSpj = "SPJ/07-2025/PKM/000476", + Plat = "B 9632 TOR", + Kode = "JRC 005", + Tujuan = "RDF Rorotan", + Status = "Completed", + Tanggal = "27 Jul 2025", + Waktu = "14:30" + }, + new { + Id = 3, + NoSpj = "SPJ/07-2025/PKM/000477", + Plat = "B 1234 XYZ", + Kode = "JRC 006", + Tujuan = "RDF Pesanggarahan", + Status = "Completed", + Tanggal = "26 Jul 2025", + Waktu = "09:15" + }, + new { + Id = 4, + NoSpj = "SPJ/07-2025/PKM/000479", + Plat = "B 9876 DEF", + Kode = "JRC 008", + Tujuan = "RDF Sunter", + Status = "Completed", + Tanggal = "25 Jul 2025", + Waktu = "11:20" + }, + new { + Id = 5, + NoSpj = "SPJ/07-2025/PKM/000480", + Plat = "B 4321 GHI", + Kode = "JRC 009", + Tujuan = "Bantar Gebang", + Status = "Completed", + Tanggal = "24 Jul 2025", + Waktu = "08:45" + } + }; + } + +
+ @foreach (var spj in spjList) + { + +
+
+ +
+
+
+
+ No. SPJ +
+
@spj.NoSpj
+
+
+ @if (spj.Status == "Completed") + { + +
+ Selesai + + } + else + { + +
+ Berlangsung + + } +
+
+ +
+
+
+
+ +
+
+
@spj.Plat
+
@spj.Kode
+
+
+
+
@spj.Tanggal
+
@spj.Waktu
+
+
+
+ +
+
+ +
+
+
Tujuan
+
@spj.Tujuan
+
+
+ +
+
+
+ + } +
+ + + + + + + @*
+
+ +
+

Belum Ada Riwayat

+

Riwayat perjalanan Anda akan muncul di sini setelah melakukan perjalanan pertama.

+
*@ + +
\ No newline at end of file diff --git a/Views/Home/Index.cshtml b/Views/Home/Index.cshtml index a611fe5..e66f8d8 100644 --- a/Views/Home/Index.cshtml +++ b/Views/Home/Index.cshtml @@ -14,7 +14,7 @@ Lokasi Anda: -

+

Mendeteksi lokasi...

@@ -27,7 +27,6 @@
-
tree
@@ -54,56 +53,82 @@
- +

Lokasi Pengangkutan

- +
+ +
+ Selesaikan semua lokasi
penjemputan untuk mengakhiri SPJ +
+
- - - -
-
-
- Sudah Diangkut -

CV Tri Berkah Sejahtera

-

Alamat

-

- Kp. Pertanian II Rt.004 Rw.001 Kel. Klender Kec, Duren Sawit, Kota Adm. Jakarta Timur 13470 -

-
-
-
- +
+ + +
+
+
+ Pengangkutan +

CV Tri Mitra Utama - Shell Radio Dalam

+

Alamat

+

+ Kp. Pertanian II Rt.004 Rw.001 Kel. Klender Kec, Duren Sawit, Kota Adm. Jakarta Timur 13470 +

+
+
+
+ +
+
-
-
- - - -
-
-
- Pengangkutan -

CV Tri Mitra Utama

-

Shell Radio Dalam

-

Alamat

-

- Jl. Radio Dalam Raya No.6C Gandaria Utara, Kecamatan Kebayoran Baru, Kota Jakarta Selatan 12140 -

-
-
-
- + + + +
+
+
+ Sudah Diangkut +

CV Tri Berkah Sejahtera

+

Alamat

+

+ Kp. Pertanian II Rt.004 Rw.001 Kel. Klender Kec, Duren Sawit, Kota Adm. Jakarta Timur 13470 +

+
+
+
+ +
+
-
+ + + + +
+
+
+ Batal Angkut +

CV Tri Berkah Sejahtera

+

Alamat

+

+ Kp. Pertanian II Rt.004 Rw.001 Kel. Klender Kec, Duren Sawit, Kota Adm. Jakarta Timur 13470 +

+
+
+
+ +
+
+
+
+ +
-
+
@@ -149,12 +174,11 @@ document.addEventListener("DOMContentLoaded", function () { } } - // Ambil dari localStorage kalo ada const savedAddress = localStorage.getItem("user_address"); if (savedAddress) { userLocationEl.textContent = savedAddress; } else { - getLocationUpdate(); // Pertama kali ambil lokasi + getLocationUpdate(); } // Update Lokasi cuy diff --git a/Views/Login/Index.cshtml b/Views/Login/Index.cshtml new file mode 100644 index 0000000..61fc5ed --- /dev/null +++ b/Views/Login/Index.cshtml @@ -0,0 +1,277 @@ +@{ + ViewData["Title"] = "Login eSPJ"; +} + +
+
+ +
+ + + + + + + + +
+ + +
+ + +
+
+
+ + + +
+

Selamat Datang di eSPJ

+

Aplikasi pengelolaan Surat Perjalanan Dinas yang modern dan efisien

+
+
+ + +
+
+
+ + + +
+

Mudah & Cepat

+

Proses pengajuan SPJ lebih efisien dan terintegrasi dengan sistem terbaru

+
+
+ + +
+
+
+ + + +
+

Keamanan Data Terjamin

+

Data perjalanan dinas Anda aman dengan enkripsi tingkat enterprise

+
+
+ + +
+
+
+
+
+ + + +
+

Masuk ke eSPJ

+

Silakan masukkan kredensial Anda

+
+ +
+ +
+
+
+
+
+
+
+ + + + + +
+
+ +@section Styles { + +} + +@section Scripts { + + +} \ No newline at end of file diff --git a/Views/Profil/Index.cshtml b/Views/Profil/Index.cshtml index d461823..b30b78c 100644 --- a/Views/Profil/Index.cshtml +++ b/Views/Profil/Index.cshtml @@ -99,5 +99,7 @@
- + + +
\ No newline at end of file diff --git a/Views/Shared/Components/_Navigation.cshtml b/Views/Shared/Components/_Navigation.cshtml index 8ce0ffe..cdacdc2 100644 --- a/Views/Shared/Components/_Navigation.cshtml +++ b/Views/Shared/Components/_Navigation.cshtml @@ -1,12 +1,8 @@
-
-
-
-
@@ -22,108 +18,31 @@ Home -
- +
- +
- Profile + History
- +
- -
-
- -
- - +
- + diff --git a/Views/Shared/_Layout.cshtml b/Views/Shared/_Layout.cshtml index b1e5d55..566ee18 100644 --- a/Views/Shared/_Layout.cshtml +++ b/Views/Shared/_Layout.cshtml @@ -38,6 +38,9 @@ @RenderBody() + + + diff --git a/Views/Submit/Index.cshtml b/Views/Submit/Index.cshtml new file mode 100644 index 0000000..d407607 --- /dev/null +++ b/Views/Submit/Index.cshtml @@ -0,0 +1,125 @@ +@{ + ViewData["Title"] = "Submit Foto Muatan"; +} + + +
+ +
+
+ + + +

Unggah Foto Muatan

+
+
+
+ + + +
+
+
+
+ +
+
+

Foto Muatan Kendaraan

+

Optional

+
+
+
+ + +
+ + +
+
+ + Lokasi Anda: +
+

+ Mendeteksi lokasi... +

+

Klik lokasi di atas untuk update posisi Anda

+
+ +
+
+ +
+ +
+
+
+
+ + + +
+ + + + + + \ No newline at end of file diff --git a/Views/Submit/Struk.cshtml b/Views/Submit/Struk.cshtml new file mode 100644 index 0000000..90bfd12 --- /dev/null +++ b/Views/Submit/Struk.cshtml @@ -0,0 +1,81 @@ +@{ + ViewData["Title"] = "Submit Struk"; +} + + +
+ +
+
+ + + +

Unggah Struk

+
+
+
+ +
+
+
+ +
+

Isi Data Struk

+

Masukkan nomor struk dan berat muatan dengan benar.

+
+ +
+ + +
+ +
+ + +
+ + +
+ + + + +
+ + + + \ No newline at end of file diff --git a/appsettings.json b/appsettings.json index 10f68b8..16970a7 100644 --- a/appsettings.json +++ b/appsettings.json @@ -5,5 +5,8 @@ "Microsoft.AspNetCore": "Warning" } }, + "SSO": { + "LoginUrl": "https://akun.dinaslhdki.id/Identity/Account/Login?ReturnUrl=%2Fconnect%2Fauthorize%3Fclient_id%3Dwebdinas%26redirect_uri%3Dhttps%253A%252F%252Flingkunganhidup.jakarta.go.id%252Fsignin-oidc%26response_type%3Dcode%26scope%3Dopenid%2520profile%2520email%2520roles%26code_challenge%3Df9YuMeOzpB-egjQlGp4Pqrthdewj6YeINPhz7wgbL-k%26code_challenge_method%3DS256%26response_mode%3Dform_post%26nonce%3D638893657991954291.YTQ5OGU1NWEtOGU0Yi00NjI2LWFkOGEtZjI0YzliMWE5ZGJmYzk1NWFmM2QtOTA3YS00YmU4LWIwYmYtMjBhODc3M2Q1Mjll%26state%3DCfDJ8MtdNDKU3ypIhY_fd6D9SIg-h4wZ5PTm8sXsF0Qt60PKRgGw0d3i7fDi1lkDFBBsDPqzCl_2wM0_cfa16rr1BLmzplWuTtyIwTeTQKD6L-hhysUTyV94E2A1nocB5y-bM1hor2UaCtT9qs7LbdkFPGgUjV6ijoL0HcjilJtVzWYIo6aSsmiEUti9Q8n7XNEEGaZIVLDUH_qfykx51FMn5RCO2j-FkuSA98WBt8KyiN4-jimbr_LTkJVFClnKy_ClAfTS1vlC2a2hu-dDOdCYqlnf6QfuSCvZBf_2D4geBWnlRIHM5m8PfmtYm_WgYyQMuqYf9zkxn2_FTcrMFl4dC5ypMX5yWm0GaeMJlpUt_QYGRyMX6blGcqw5VW9YIexCX9FDuD3xSIjCqnVn6digGLBkDZ8TghO6_KJ5Jkyg8hws%26x-client-SKU%3DID_NET9_0%26x-client-ver%3D8.0.1.0%26prompt%3D" + }, "AllowedHosts": "*" } diff --git a/wwwroot/css/watch.css b/wwwroot/css/watch.css index b7d8358..bcda39f 100644 --- a/wwwroot/css/watch.css +++ b/wwwroot/css/watch.css @@ -7,7 +7,14 @@ "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + --color-red-50: oklch(97.1% 0.013 17.38); + --color-red-100: oklch(93.6% 0.032 17.717); + --color-red-200: oklch(88.5% 0.062 18.334); + --color-red-300: oklch(80.8% 0.114 19.571); + --color-red-400: oklch(70.4% 0.191 22.216); --color-red-500: oklch(63.7% 0.237 25.331); + --color-red-600: oklch(57.7% 0.245 27.325); + --color-red-700: oklch(50.5% 0.213 27.518); --color-orange-50: oklch(98% 0.016 73.684); --color-orange-100: oklch(95.4% 0.038 75.164); --color-orange-200: oklch(90.1% 0.076 70.697); @@ -15,16 +22,34 @@ --color-orange-400: oklch(75% 0.183 55.934); --color-orange-500: oklch(70.5% 0.213 47.604); --color-orange-600: oklch(64.6% 0.222 41.116); - --color-amber-200: oklch(92.4% 0.12 95.746); + --color-orange-700: oklch(55.3% 0.195 38.402); + --color-orange-800: oklch(47% 0.157 37.304); + --color-yellow-50: oklch(98.7% 0.026 102.212); + --color-yellow-100: oklch(97.3% 0.071 103.193); + --color-yellow-200: oklch(94.5% 0.129 101.54); --color-yellow-400: oklch(85.2% 0.199 91.936); + --color-yellow-500: oklch(79.5% 0.184 86.047); + --color-yellow-600: oklch(68.1% 0.162 75.834); + --color-yellow-700: oklch(55.4% 0.135 66.442); + --color-green-50: oklch(98.2% 0.018 155.826); --color-green-100: oklch(96.2% 0.044 156.743); --color-green-200: oklch(92.5% 0.084 155.995); - --color-green-300: oklch(87.1% 0.15 154.449); --color-green-400: oklch(79.2% 0.209 151.711); --color-green-500: oklch(72.3% 0.219 149.579); --color-green-600: oklch(62.7% 0.194 149.214); --color-green-700: oklch(52.7% 0.154 150.069); - --color-slate-800: oklch(27.9% 0.041 260.031); + --color-blue-100: oklch(93.2% 0.032 255.585); + --color-blue-500: oklch(62.3% 0.214 259.815); + --color-blue-600: oklch(54.6% 0.245 262.881); + --color-blue-700: oklch(48.8% 0.243 264.376); + --color-indigo-50: oklch(96.2% 0.018 272.314); + --color-indigo-200: oklch(87% 0.065 274.039); + --color-indigo-300: oklch(78.5% 0.115 274.713); + --color-indigo-500: oklch(58.5% 0.233 277.117); + --color-indigo-600: oklch(51.1% 0.262 276.966); + --color-purple-50: oklch(97.7% 0.014 308.299); + --color-purple-100: oklch(94.6% 0.033 307.174); + --color-purple-600: oklch(55.8% 0.288 302.321); --color-gray-50: oklch(98.5% 0.002 247.839); --color-gray-100: oklch(96.7% 0.003 264.542); --color-gray-200: oklch(92.8% 0.006 264.531); @@ -38,7 +63,6 @@ --color-black: #000; --color-white: #fff; --spacing: 0.25rem; - --container-xs: 20rem; --container-sm: 24rem; --text-xs: 0.75rem; --text-xs--line-height: calc(1 / 0.75); @@ -61,18 +85,15 @@ --tracking-widest: 0.1em; --leading-tight: 1.25; --leading-relaxed: 1.625; - --radius-sm: 0.25rem; + --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; - --radius-4xl: 2rem; --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15); --ease-out: cubic-bezier(0, 0, 0.2, 1); - --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; --blur-sm: 8px; - --blur-md: 12px; --blur-lg: 16px; --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); @@ -229,15 +250,6 @@ .pointer-events-none { pointer-events: none; } - .collapse { - visibility: collapse; - } - .invisible { - visibility: hidden; - } - .visible { - visibility: visible; - } .absolute { position: absolute; } @@ -256,24 +268,6 @@ .inset-0 { inset: calc(var(--spacing) * 0); } - .start-0 { - inset-inline-start: calc(var(--spacing) * 0); - } - .start-50 { - inset-inline-start: calc(var(--spacing) * 50); - } - .start-100 { - inset-inline-start: calc(var(--spacing) * 100); - } - .end-0 { - inset-inline-end: calc(var(--spacing) * 0); - } - .end-50 { - inset-inline-end: calc(var(--spacing) * 50); - } - .end-100 { - inset-inline-end: calc(var(--spacing) * 100); - } .-top-0 { top: calc(var(--spacing) * -0); } @@ -283,14 +277,11 @@ .top-0 { top: calc(var(--spacing) * 0); } - .top-4 { - top: calc(var(--spacing) * 4); + .top-1 { + top: calc(var(--spacing) * 1); } - .top-50 { - top: calc(var(--spacing) * 50); - } - .top-100 { - top: calc(var(--spacing) * 100); + .top-1\/2 { + top: calc(1/2 * 100%); } .right-0 { right: calc(var(--spacing) * 0); @@ -301,6 +292,9 @@ .right-4 { right: calc(var(--spacing) * 4); } + .right-full { + right: 100%; + } .-bottom-0 { bottom: calc(var(--spacing) * -0); } @@ -319,12 +313,6 @@ .bottom-8 { bottom: calc(var(--spacing) * 8); } - .bottom-50 { - bottom: calc(var(--spacing) * 50); - } - .bottom-100 { - bottom: calc(var(--spacing) * 100); - } .left-0 { left: calc(var(--spacing) * 0); } @@ -334,18 +322,6 @@ .left-1\/2 { left: calc(1/2 * 100%); } - .z-0 { - z-index: 0; - } - .z-1 { - z-index: 1; - } - .z-2 { - z-index: 2; - } - .z-3 { - z-index: 3; - } .z-10 { z-index: 10; } @@ -355,84 +331,12 @@ .z-21 { z-index: 21; } - .z-50 { - z-index: 50; + .z-30 { + z-index: 30; } .z-99 { z-index: 99; } - .order-0 { - order: 0; - } - .order-1 { - order: 1; - } - .order-2 { - order: 2; - } - .order-3 { - order: 3; - } - .order-4 { - order: 4; - } - .order-5 { - order: 5; - } - .order-first { - order: -9999; - } - .order-last { - order: 9999; - } - .col-1 { - grid-column: 1; - } - .col-2 { - grid-column: 2; - } - .col-3 { - grid-column: 3; - } - .col-4 { - grid-column: 4; - } - .col-5 { - grid-column: 5; - } - .col-6 { - grid-column: 6; - } - .col-7 { - grid-column: 7; - } - .col-8 { - grid-column: 8; - } - .col-9 { - grid-column: 9; - } - .col-10 { - grid-column: 10; - } - .col-11 { - grid-column: 11; - } - .col-12 { - grid-column: 12; - } - .col-auto { - grid-column: auto; - } - .float-end { - float: inline-end; - } - .float-none { - float: none; - } - .float-start { - float: inline-start; - } .container { width: 100%; @media (width >= 40rem) { @@ -451,120 +355,18 @@ max-width: 96rem; } } - .m-0 { - margin: calc(var(--spacing) * 0); - } - .m-1 { - margin: calc(var(--spacing) * 1); - } - .m-2 { - margin: calc(var(--spacing) * 2); - } - .m-3 { - margin: calc(var(--spacing) * 3); - } - .m-4 { - margin: calc(var(--spacing) * 4); - } - .m-5 { - margin: calc(var(--spacing) * 5); - } - .m-auto { - margin: auto; - } - .mx-0 { - margin-inline: calc(var(--spacing) * 0); - } - .mx-1 { - margin-inline: calc(var(--spacing) * 1); - } - .mx-2 { - margin-inline: calc(var(--spacing) * 2); - } - .mx-3 { - margin-inline: calc(var(--spacing) * 3); - } .mx-4 { margin-inline: calc(var(--spacing) * 4); } - .mx-5 { - margin-inline: calc(var(--spacing) * 5); - } .mx-auto { margin-inline: auto; } - .my-0 { - margin-block: calc(var(--spacing) * 0); - } - .my-1 { - margin-block: calc(var(--spacing) * 1); - } - .my-2 { - margin-block: calc(var(--spacing) * 2); - } - .my-3 { - margin-block: calc(var(--spacing) * 3); - } - .my-4 { - margin-block: calc(var(--spacing) * 4); - } - .my-5 { - margin-block: calc(var(--spacing) * 5); - } - .my-auto { - margin-block: auto; - } - .ms-0 { - margin-inline-start: calc(var(--spacing) * 0); - } - .ms-1 { - margin-inline-start: calc(var(--spacing) * 1); - } - .ms-2 { - margin-inline-start: calc(var(--spacing) * 2); - } - .ms-3 { - margin-inline-start: calc(var(--spacing) * 3); - } - .ms-4 { - margin-inline-start: calc(var(--spacing) * 4); - } - .ms-5 { - margin-inline-start: calc(var(--spacing) * 5); - } - .ms-auto { - margin-inline-start: auto; - } - .me-0 { - margin-inline-end: calc(var(--spacing) * 0); - } - .me-1 { - margin-inline-end: calc(var(--spacing) * 1); - } - .me-2 { - margin-inline-end: calc(var(--spacing) * 2); - } - .me-3 { - margin-inline-end: calc(var(--spacing) * 3); - } - .me-4 { - margin-inline-end: calc(var(--spacing) * 4); - } - .me-5 { - margin-inline-end: calc(var(--spacing) * 5); - } - .me-auto { - margin-inline-end: auto; - } .-mt-10 { margin-top: calc(var(--spacing) * -10); } .-mt-12 { margin-top: calc(var(--spacing) * -12); } - .mt-0 { - margin-top: calc(var(--spacing) * 0); - } .mt-1 { margin-top: calc(var(--spacing) * 1); } @@ -574,23 +376,23 @@ .mt-3 { margin-top: calc(var(--spacing) * 3); } - .mt-4 { - margin-top: calc(var(--spacing) * 4); - } .mt-5 { margin-top: calc(var(--spacing) * 5); } + .mt-6 { + margin-top: calc(var(--spacing) * 6); + } .mt-8 { margin-top: calc(var(--spacing) * 8); } - .mt-32 { - margin-top: calc(var(--spacing) * 32); - } .mt-40 { margin-top: calc(var(--spacing) * 40); } - .mt-auto { - margin-top: auto; + .mr-2 { + margin-right: calc(var(--spacing) * 2); + } + .mr-3 { + margin-right: calc(var(--spacing) * 3); } .mb-0 { margin-bottom: calc(var(--spacing) * 0); @@ -610,27 +412,21 @@ .mb-4 { margin-bottom: calc(var(--spacing) * 4); } - .mb-5 { - margin-bottom: calc(var(--spacing) * 5); - } .mb-6 { margin-bottom: calc(var(--spacing) * 6); } - .mb-auto { - margin-bottom: auto; + .mb-8 { + margin-bottom: calc(var(--spacing) * 8); + } + .ml-2 { + margin-left: calc(var(--spacing) * 2); } .ml-4 { margin-left: calc(var(--spacing) * 4); } - .\!hidden { - display: none !important; - } .block { display: block; } - .contents { - display: contents; - } .flex { display: flex; } @@ -640,36 +436,24 @@ .hidden { display: none; } - .inline { - display: inline; - } .inline-block { display: inline-block; } .inline-flex { display: inline-flex; } - .inline-grid { - display: inline-grid; - } .table { display: table; } - .table-caption { - display: table-caption; - } - .table-cell { - display: table-cell; - } - .table-row { - display: table-row; - } .h-0 { height: calc(var(--spacing) * 0); } .h-0\.5 { height: calc(var(--spacing) * 0.5); } + .h-1 { + height: calc(var(--spacing) * 1); + } .h-2 { height: calc(var(--spacing) * 2); } @@ -694,39 +478,33 @@ .h-10 { height: calc(var(--spacing) * 10); } + .h-12 { + height: calc(var(--spacing) * 12); + } .h-14 { height: calc(var(--spacing) * 14); } + .h-16 { + height: calc(var(--spacing) * 16); + } .h-20 { height: calc(var(--spacing) * 20); } - .h-25 { - height: calc(var(--spacing) * 25); + .h-24 { + height: calc(var(--spacing) * 24); } - .h-40 { - height: calc(var(--spacing) * 40); - } - .h-50 { - height: calc(var(--spacing) * 50); - } - .h-75 { - height: calc(var(--spacing) * 75); - } - .h-100 { - height: calc(var(--spacing) * 100); + .h-30 { + height: calc(var(--spacing) * 30); } .h-\[250px\] { height: 250px; } - .h-\[280px\] { - height: 280px; - } - .h-auto { - height: auto; - } .h-full { height: 100%; } + .h-screen { + height: 100vh; + } .min-h-screen { min-height: 100vh; } @@ -736,6 +514,15 @@ .w-1 { width: calc(var(--spacing) * 1); } + .w-1\/4 { + width: calc(1/4 * 100%); + } + .w-2 { + width: calc(var(--spacing) * 2); + } + .w-3 { + width: calc(var(--spacing) * 3); + } .w-4 { width: calc(var(--spacing) * 4); } @@ -751,6 +538,9 @@ .w-8 { width: calc(var(--spacing) * 8); } + .w-9 { + width: calc(var(--spacing) * 9); + } .w-10 { width: calc(var(--spacing) * 10); } @@ -760,33 +550,30 @@ .w-14 { width: calc(var(--spacing) * 14); } + .w-16 { + width: calc(var(--spacing) * 16); + } .w-20 { width: calc(var(--spacing) * 20); } - .w-25 { - width: calc(var(--spacing) * 25); + .w-24 { + width: calc(var(--spacing) * 24); } .w-36 { width: calc(var(--spacing) * 36); } - .w-50 { - width: calc(var(--spacing) * 50); - } - .w-75 { - width: calc(var(--spacing) * 75); - } - .w-100 { - width: calc(var(--spacing) * 100); - } - .w-auto { - width: auto; - } .w-full { width: 100%; } + .w-max { + width: max-content; + } .max-w-sm { max-width: var(--container-sm); } + .min-w-0 { + min-width: calc(var(--spacing) * 0); + } .flex-1 { flex: 1; } @@ -796,27 +583,6 @@ .flex-shrink-0 { flex-shrink: 0; } - .flex-shrink-1 { - flex-shrink: 1; - } - .shrink { - flex-shrink: 1; - } - .flex-grow { - flex-grow: 1; - } - .flex-grow-0 { - flex-grow: 0; - } - .flex-grow-1 { - flex-grow: 1; - } - .grow { - flex-grow: 1; - } - .caption-top { - caption-side: top; - } .border-collapse { border-collapse: collapse; } @@ -828,17 +594,13 @@ --tw-translate-x: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } - .scale-95 { - --tw-scale-x: 95%; - --tw-scale-y: 95%; - --tw-scale-z: 95%; - scale: var(--tw-scale-x) var(--tw-scale-y); + .-translate-y-1 { + --tw-translate-y: calc(var(--spacing) * -1); + translate: var(--tw-translate-x) var(--tw-translate-y); } - .scale-100 { - --tw-scale-x: 100%; - --tw-scale-y: 100%; - --tw-scale-z: 100%; - scale: var(--tw-scale-x) var(--tw-scale-y); + .-translate-y-1\/2 { + --tw-translate-y: calc(calc(1/2 * 100%) * -1); + translate: var(--tw-translate-x) var(--tw-translate-y); } .scale-110 { --tw-scale-x: 110%; @@ -849,30 +611,27 @@ .transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } + .animate-pulse { + animation: var(--animate-pulse); + } .cursor-pointer { cursor: pointer; } .resize { resize: both; } + .resize-none { + resize: none; + } + .grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } .flex-col { flex-direction: column; } .flex-row { flex-direction: row; } - .flex-row-reverse { - flex-direction: row-reverse; - } - .flex-nowrap { - flex-wrap: nowrap; - } - .flex-wrap { - flex-wrap: wrap; - } - .flex-wrap-reverse { - flex-wrap: wrap-reverse; - } .items-center { align-items: center; } @@ -888,9 +647,6 @@ .justify-center { justify-content: center; } - .gap-0 { - gap: calc(var(--spacing) * 0); - } .gap-1 { gap: calc(var(--spacing) * 1); } @@ -900,12 +656,6 @@ .gap-3 { gap: calc(var(--spacing) * 3); } - .gap-4 { - gap: calc(var(--spacing) * 4); - } - .gap-5 { - gap: calc(var(--spacing) * 5); - } .space-y-1 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; @@ -934,6 +684,13 @@ margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); } } + .space-y-5 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse))); + } + } .space-y-6 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; @@ -941,13 +698,6 @@ margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))); } } - .space-x-1 { - :where(& > :not(:last-child)) { - --tw-space-x-reverse: 0; - margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse)); - margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse))); - } - } .space-x-2 { :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; @@ -955,62 +705,27 @@ margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse))); } } - .truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - .overflow-auto { - overflow: auto; - } .overflow-hidden { overflow: hidden; } - .overflow-scroll { - overflow: scroll; - } .overflow-visible { overflow: visible; } - .overflow-x-auto { - overflow-x: auto; - } - .overflow-x-hidden { - overflow-x: hidden; - } - .overflow-x-scroll { - overflow-x: scroll; - } - .overflow-x-visible { - overflow-x: visible; - } - .overflow-y-auto { - overflow-y: auto; - } - .overflow-y-hidden { - overflow-y: hidden; - } - .overflow-y-scroll { - overflow-y: scroll; - } - .overflow-y-visible { - overflow-y: visible; - } .rounded { border-radius: 0.25rem; } .rounded-2xl { border-radius: var(--radius-2xl); } + .rounded-3xl { + border-radius: var(--radius-3xl); + } .rounded-full { border-radius: calc(infinity * 1px); } .rounded-lg { border-radius: var(--radius-lg); } - .rounded-sm { - border-radius: var(--radius-sm); - } .rounded-xl { border-radius: var(--radius-xl); } @@ -1039,32 +754,28 @@ border-style: var(--tw-border-style); border-width: 1px; } - .border-0 { - border-style: var(--tw-border-style); - border-width: 0px; - } - .border-1 { - border-style: var(--tw-border-style); - border-width: 1px; - } .border-2 { border-style: var(--tw-border-style); border-width: 2px; } - .border-3 { - border-style: var(--tw-border-style); - border-width: 3px; - } .border-4 { border-style: var(--tw-border-style); border-width: 4px; } - .border-5 { - border-style: var(--tw-border-style); - border-width: 5px; + .border-t { + border-top-style: var(--tw-border-style); + border-top-width: 1px; } - .border-black { - border-color: var(--color-black); + .border-b { + border-bottom-style: var(--tw-border-style); + border-bottom-width: 1px; + } + .border-dashed { + --tw-border-style: dashed; + border-style: dashed; + } + .border-gray-50 { + border-color: var(--color-gray-50); } .border-gray-100 { border-color: var(--color-gray-100); @@ -1087,20 +798,29 @@ .border-green-400 { border-color: var(--color-green-400); } + .border-orange-300 { + border-color: var(--color-orange-300); + } .border-orange-400 { border-color: var(--color-orange-400); } + .border-red-200 { + border-color: var(--color-red-200); + } .border-white { border-color: var(--color-white); } - .bg-black { - background-color: var(--color-black); + .border-yellow-200 { + border-color: var(--color-yellow-200); } - .bg-black\/50 { - background-color: color-mix(in srgb, #000 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-black) 50%, transparent); - } + .bg-blue-100 { + background-color: var(--color-blue-100); + } + .bg-blue-500 { + background-color: var(--color-blue-500); + } + .bg-gray-50 { + background-color: var(--color-gray-50); } .bg-gray-100 { background-color: var(--color-gray-100); @@ -1108,41 +828,41 @@ .bg-gray-200 { background-color: var(--color-gray-200); } - .bg-gray-400 { - background-color: var(--color-gray-400); + .bg-gray-800 { + background-color: var(--color-gray-800); } .bg-gray-900 { background-color: var(--color-gray-900); } + .bg-green-50 { + background-color: var(--color-green-50); + } .bg-green-100 { background-color: var(--color-green-100); } - .bg-green-400 { - background-color: var(--color-green-400); - } - .bg-green-400\/20 { - background-color: color-mix(in srgb, oklch(79.2% 0.209 151.711) 20%, transparent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-green-400) 20%, transparent); - } - } .bg-green-500 { background-color: var(--color-green-500); } + .bg-orange-50 { + background-color: var(--color-orange-50); + } .bg-orange-100 { background-color: var(--color-orange-100); } + .bg-orange-400 { + background-color: var(--color-orange-400); + } .bg-orange-500 { background-color: var(--color-orange-500); } - .bg-slate-800 { - background-color: var(--color-slate-800); + .bg-red-50 { + background-color: var(--color-red-50); } - .bg-slate-800\/50 { - background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-slate-800) 50%, transparent); - } + .bg-red-100 { + background-color: var(--color-red-100); + } + .bg-red-500 { + background-color: var(--color-red-500); } .bg-transparent { background-color: transparent; @@ -1150,21 +870,15 @@ .bg-white { background-color: var(--color-white); } - .bg-white\/20 { - 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); - } - } - .bg-white\/50 { - background-color: color-mix(in srgb, #fff 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-white) 50%, transparent); - } + .bg-yellow-50 { + background-color: var(--color-yellow-50); } .bg-yellow-400 { background-color: var(--color-yellow-400); } + .bg-yellow-500 { + background-color: var(--color-yellow-500); + } .bg-gradient-to-br { --tw-gradient-position: to bottom right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); @@ -1177,6 +891,14 @@ --tw-gradient-from: var(--color-green-500); --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-indigo-50 { + --tw-gradient-from: var(--color-indigo-50); + --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-orange-400 { + --tw-gradient-from: var(--color-orange-400); + --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-orange-500 { --tw-gradient-from: var(--color-orange-500); --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)); @@ -1186,6 +908,11 @@ --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } + .via-white { + --tw-gradient-via: var(--color-white); + --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-via-stops); + } .to-green-400 { --tw-gradient-to: var(--color-green-400); --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)); @@ -1194,19 +921,24 @@ --tw-gradient-to: var(--color-orange-400); --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-orange-500 { + --tw-gradient-to: var(--color-orange-500); + --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-orange-600 { --tw-gradient-to: var(--color-orange-600); --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-purple-50 { + --tw-gradient-to: var(--color-purple-50); + --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)); + } .object-contain { object-fit: contain; } .object-cover { object-fit: cover; } - .p-0 { - padding: calc(var(--spacing) * 0); - } .p-1 { padding: calc(var(--spacing) * 1); } @@ -1222,11 +954,11 @@ .p-5 { padding: calc(var(--spacing) * 5); } - .px-0 { - padding-inline: calc(var(--spacing) * 0); + .p-6 { + padding: calc(var(--spacing) * 6); } - .px-1 { - padding-inline: calc(var(--spacing) * 1); + .p-8 { + padding: calc(var(--spacing) * 8); } .px-2 { padding-inline: calc(var(--spacing) * 2); @@ -1237,18 +969,12 @@ .px-4 { padding-inline: calc(var(--spacing) * 4); } - .px-5 { - padding-inline: calc(var(--spacing) * 5); - } .px-6 { padding-inline: calc(var(--spacing) * 6); } .px-8 { padding-inline: calc(var(--spacing) * 8); } - .py-0 { - padding-block: calc(var(--spacing) * 0); - } .py-1 { padding-block: calc(var(--spacing) * 1); } @@ -1261,86 +987,29 @@ .py-4 { padding-block: calc(var(--spacing) * 4); } - .py-5 { - padding-block: calc(var(--spacing) * 5); - } .py-6 { padding-block: calc(var(--spacing) * 6); } - .ps-0 { - padding-inline-start: calc(var(--spacing) * 0); + .py-8 { + padding-block: calc(var(--spacing) * 8); } - .ps-1 { - padding-inline-start: calc(var(--spacing) * 1); - } - .ps-2 { - padding-inline-start: calc(var(--spacing) * 2); - } - .ps-3 { - padding-inline-start: calc(var(--spacing) * 3); - } - .ps-4 { - padding-inline-start: calc(var(--spacing) * 4); - } - .ps-5 { - padding-inline-start: calc(var(--spacing) * 5); - } - .pe-0 { - padding-inline-end: calc(var(--spacing) * 0); - } - .pe-1 { - padding-inline-end: calc(var(--spacing) * 1); - } - .pe-2 { - padding-inline-end: calc(var(--spacing) * 2); - } - .pe-3 { - padding-inline-end: calc(var(--spacing) * 3); - } - .pe-4 { - padding-inline-end: calc(var(--spacing) * 4); - } - .pe-5 { - padding-inline-end: calc(var(--spacing) * 5); - } - .pt-0 { - padding-top: calc(var(--spacing) * 0); - } - .pt-1 { - padding-top: calc(var(--spacing) * 1); + .py-16 { + padding-block: calc(var(--spacing) * 16); } .pt-2 { padding-top: calc(var(--spacing) * 2); } - .pt-3 { - padding-top: calc(var(--spacing) * 3); - } .pt-4 { padding-top: calc(var(--spacing) * 4); } - .pt-5 { - padding-top: calc(var(--spacing) * 5); - } .pt-6 { padding-top: calc(var(--spacing) * 6); } - .pb-0 { - padding-bottom: calc(var(--spacing) * 0); - } - .pb-1 { - padding-bottom: calc(var(--spacing) * 1); - } - .pb-2 { - padding-bottom: calc(var(--spacing) * 2); - } - .pb-3 { - padding-bottom: calc(var(--spacing) * 3); - } .pb-4 { padding-bottom: calc(var(--spacing) * 4); } - .pb-5 { - padding-bottom: calc(var(--spacing) * 5); + .pb-6 { + padding-bottom: calc(var(--spacing) * 6); } .pb-12 { padding-bottom: calc(var(--spacing) * 12); @@ -1348,29 +1017,8 @@ .text-center { text-align: center; } - .text-end { - text-align: end; - } - .text-start { - text-align: start; - } - .align-baseline { - vertical-align: baseline; - } - .align-bottom { - vertical-align: bottom; - } - .align-middle { - vertical-align: middle; - } - .align-text-bottom { - vertical-align: text-bottom; - } - .align-text-top { - vertical-align: text-top; - } - .align-top { - vertical-align: top; + .text-right { + text-align: right; } .font-mono { font-family: var(--font-mono); @@ -1435,14 +1083,8 @@ --tw-tracking: var(--tracking-widest); letter-spacing: var(--tracking-widest); } - .text-nowrap { - text-wrap: nowrap; - } - .text-wrap { - text-wrap: wrap; - } - .text-black { - color: var(--color-black); + .text-blue-700 { + color: var(--color-blue-700); } .text-gray-400 { color: var(--color-gray-400); @@ -1459,6 +1101,9 @@ .text-gray-800 { color: var(--color-gray-800); } + .text-gray-900 { + color: var(--color-gray-900); + } .text-green-400 { color: var(--color-green-400); } @@ -1468,57 +1113,54 @@ .text-green-700 { color: var(--color-green-700); } + .text-indigo-600 { + color: var(--color-indigo-600); + } .text-orange-100 { color: var(--color-orange-100); } .text-orange-500 { color: var(--color-orange-500); } + .text-orange-600 { + color: var(--color-orange-600); + } + .text-orange-700 { + color: var(--color-orange-700); + } + .text-red-500 { + color: var(--color-red-500); + } + .text-red-600 { + color: var(--color-red-600); + } .text-white { color: var(--color-white); } - .capitalize { - text-transform: capitalize; - } - .lowercase { - text-transform: lowercase; + .text-yellow-600 { + color: var(--color-yellow-600); } .uppercase { text-transform: uppercase; } - .italic { - font-style: italic; - } - .line-through { - text-decoration-line: line-through; - } .underline { text-decoration-line: underline; } .opacity-0 { opacity: 0%; } - .opacity-25 { - opacity: 25%; + .opacity-5 { + opacity: 5%; } .opacity-30 { opacity: 30%; } - .opacity-50 { - opacity: 50%; - } - .opacity-75 { - opacity: 75%; - } .opacity-80 { opacity: 80%; } .opacity-90 { opacity: 90%; } - .opacity-100 { - opacity: 100%; - } .shadow { --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); @@ -1535,10 +1177,6 @@ --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px 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); } - .shadow-none { - --tw-shadow: 0 0 #0000; - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } .shadow-sm { --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); @@ -1558,10 +1196,6 @@ outline-style: var(--tw-outline-style); outline-width: 1px; } - .blur { - --tw-blur: blur(8px); - 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 { --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1))) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.06))); --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow( 0 1px 1px rgb(0 0 0 / 0.06)); @@ -1572,13 +1206,6 @@ --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,); } - .invert { - --tw-invert: invert(100%); - 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,); - } - .\!filter { - 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,) !important; - } .filter { 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,); } @@ -1587,11 +1214,6 @@ -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-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,); - } .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,); @@ -1611,6 +1233,15 @@ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } + .transition-opacity { + transition-property: opacity; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + .duration-150 { + --tw-duration: 150ms; + transition-duration: 150ms; + } .duration-200 { --tw-duration: 200ms; transition-duration: 200ms; @@ -1619,14 +1250,6 @@ --tw-duration: 300ms; transition-duration: 300ms; } - .ease-in-out { - --tw-ease: var(--ease-in-out); - transition-timing-function: var(--ease-in-out); - } - .ease-out { - --tw-ease: var(--ease-out); - transition-timing-function: var(--ease-out); - } .outline-none { --tw-outline-style: none; outline-style: none; @@ -1649,6 +1272,13 @@ } } } + .group-hover\:opacity-100 { + &:is(:where(.group):hover *) { + @media (hover: hover) { + opacity: 100%; + } + } + } .hover\:scale-105 { &:hover { @media (hover: hover) { @@ -1683,6 +1313,20 @@ } } } + .hover\:border-orange-200 { + &:hover { + @media (hover: hover) { + border-color: var(--color-orange-200); + } + } + } + .hover\:border-red-400 { + &:hover { + @media (hover: hover) { + border-color: var(--color-red-400); + } + } + } .hover\:bg-gray-50 { &:hover { @media (hover: hover) { @@ -1690,6 +1334,20 @@ } } } + .hover\:bg-gray-100 { + &:hover { + @media (hover: hover) { + background-color: var(--color-gray-100); + } + } + } + .hover\:bg-gray-300 { + &:hover { + @media (hover: hover) { + background-color: var(--color-gray-300); + } + } + } .hover\:bg-orange-600 { &:hover { @media (hover: hover) { @@ -1707,13 +1365,41 @@ } } } - .hover\:bg-white\/30 { + .hover\:from-orange-600 { &:hover { @media (hover: hover) { - background-color: color-mix(in srgb, #fff 30%, transparent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-white) 30%, transparent); - } + --tw-gradient-from: var(--color-orange-600); + --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)); + } + } + } + .hover\:to-orange-500 { + &:hover { + @media (hover: hover) { + --tw-gradient-to: var(--color-orange-500); + --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)); + } + } + } + .hover\:to-orange-700 { + &:hover { + @media (hover: hover) { + --tw-gradient-to: var(--color-orange-700); + --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)); + } + } + } + .hover\:text-gray-700 { + &:hover { + @media (hover: hover) { + color: var(--color-gray-700); + } + } + } + .hover\:text-indigo-500 { + &:hover { + @media (hover: hover) { + color: var(--color-indigo-500); } } } @@ -1731,17 +1417,78 @@ } } } + .hover\:text-orange-800 { + &:hover { + @media (hover: hover) { + color: var(--color-orange-800); + } + } + } + .hover\:shadow-lg { + &:hover { + @media (hover: hover) { + --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px 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); + } + } + } + .focus\:border-indigo-300 { + &:focus { + border-color: var(--color-indigo-300); + } + } + .focus\:border-orange-500 { + &:focus { + border-color: var(--color-orange-500); + } + } + .focus\:border-red-500 { + &:focus { + border-color: var(--color-red-500); + } + } + .focus\:border-transparent { + &:focus { + border-color: transparent; + } + } + .focus\:ring { + &:focus { + --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); + } + } .focus\:ring-2 { &:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + 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); } } + .focus\:ring-indigo-200 { + &:focus { + --tw-ring-color: var(--color-indigo-200); + } + } + .focus\:ring-indigo-500 { + &:focus { + --tw-ring-color: var(--color-indigo-500); + } + } + .focus\:ring-orange-200 { + &:focus { + --tw-ring-color: var(--color-orange-200); + } + } .focus\:ring-orange-400 { &:focus { --tw-ring-color: var(--color-orange-400); } } + .focus\:ring-red-200 { + &:focus { + --tw-ring-color: var(--color-red-200); + } + } } @property --tw-translate-x { syntax: "*"; @@ -2025,10 +1772,6 @@ syntax: "*"; inherits: false; } -@property --tw-ease { - syntax: "*"; - inherits: false; -} @keyframes pulse { 50% { opacity: 0.5; @@ -2101,7 +1844,6 @@ --tw-backdrop-saturate: initial; --tw-backdrop-sepia: initial; --tw-duration: initial; - --tw-ease: initial; } } }