feat: add email alerts for reports and refine Gemini for users prompt

This commit is contained in:
2025-12-31 19:48:06 +05:30
Unverified
parent 3c33b0d486
commit 4763fdd82c
7 changed files with 371 additions and 483 deletions

View File

@@ -219,7 +219,8 @@ $result = $conn->query($sql);
<td class="px-6 py-4 text-center">
<?php if (!empty($row['image_path'])): ?>
<a href="./core/actions/submit_report.php?view_id=<?php echo htmlspecialchars($row['image_path']); ?>" target="_blank"
<a href="./core/actions/submit_report.php?view_id=<?php echo htmlspecialchars($row['image_path']); ?>"
target="_blank"
class="inline-block p-2 hover:bg-neutral-700 rounded-lg text-neutral-400 transition-colors">
<svg class="h-5 w-5 mx-auto text-violet-400" fill="none" stroke="currentColor"
viewBox="0 0 24 24">
@@ -393,15 +394,17 @@ $result = $conn->query($sql);
<select name="category" required
class="w-full px-4 py-2.5 bg-neutral-900 border border-neutral-700 rounded-lg text-white appearance-none focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all cursor-pointer">
<option value="" disabled selected>Select a category...</option>
<option value="WiFi & Network Issue">WiFi & Network Issue</option>
<option value="Security & Safety Issue">Security & Safety Issue</option>
<option value="Electrical Issue">Electrical Issue</option>
<option value="Water & Plumbing">Water & Plumbing</option>
<option value="HVAC (AC/Heating)">HVAC (AC/Heating)</option>
<option value="Furniture & Fixtures">Furniture & Fixtures</option>
<option value="Cleaning & Janitorial">Cleaning & Janitorial</option>
<option value="Security & Safety">Security & Safety</option>
<option value="Road & Pathway Damage">Road & Pathway Damage</option>
<option value="Other">Other</option>
<option value="Water & Plumbing Issue">Water & Plumbing Issue</option>
<option value="Road & Pathway Damage Issue">Road & Pathway Damage Issue</option>
<option value="HVAC (AC/Heating) Issue">HVAC (AC/Heating) Issue</option>
<option value="WiFi & Network Issue">WiFi & Network Issue</option>
<option value="Cleaning & Janitorial Issue">Cleaning & Janitorial Issue</option>
<option value="Furniture & Fixtures Issue">Furniture & Fixtures Issue</option>
<option value="Library & Study Issue">Library & Study Issue</option>
<option value="Lost & Stolen Issue">Lost & Stolen Issue</option>
<option value="Other Issue">Other Issue</option>
</select>
<svg class="absolute right-3 top-3 h-4 w-4 text-neutral-500 pointer-events-none"
fill="none" stroke="currentColor" viewBox="0 0 24 24">

View File

@@ -0,0 +1,300 @@
<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
require dirname(__DIR__, 2) . '/vendor/autoload.php';
define('HELPDESK_EMAIL', $_ENV['IT_HELPDESK_EMAIL'] ?? '');
define('MANAGEMENT_EMAIL', $_ENV['MANAGEMENT_EMAIL'] ?? '');
define('HEALTH_EMAIL', $_ENV['HEALTH_EMAIL'] ?? '');
define('LIBRARY_EMAIL', $_ENV['LIBRARY_EMAIL'] ?? '');
define('SECURITY_EMAIL', $_ENV['SECURITY_EMAIL'] ?? '');
function getDepartmentEmail($category)
{
switch ($category) {
case 'Electrical Issue':
case 'Water & Plumbing Issue':
case 'HVAC (AC/Heating) Issue':
case 'Furniture & Fixtures Issue':
case 'Road & Pathway Damage Issue':
case 'Cleaning & Janitorial Issue':
return MANAGEMENT_EMAIL;
case 'Security & Safety Issue':
case 'Lost & Stolen Issue':
return SECURITY_EMAIL;
case 'WiFi & Network Issue':
return HELPDESK_EMAIL;
case 'Library & Study Issue':
return LIBRARY_EMAIL;
case 'Other Issue':
default:
return HELPDESK_EMAIL;
}
}
function sendSMTP($toEmail, $toName, $subject, $body)
{
$mail = new PHPMailer(true);
try {
$mail->isSMTP();
$mail->Host = $_ENV['MAIL_HOST'];
$mail->SMTPAuth = true;
$mail->Username = $_ENV['MAIL_USERNAME'];
$mail->Password = $_ENV['MAIL_PASSWORD'];
$mail->SMTPSecure = $_ENV['MAIL_ENCRYPTION'];
$mail->Port = $_ENV['MAIL_PORT'];
$mail->setFrom($_ENV['MAIL_FROM'], $_ENV['MAIL_FROM_NAME']);
$mail->addAddress($toEmail, $toName);
$mail->isHTML(true);
$mail->Subject = $subject;
$mail->Body = $body;
$mail->send();
return true;
} catch (Exception $e) {
error_log("Mailer Error to {$toEmail}: " . $mail->ErrorInfo);
return false;
}
}
function sendReportNotifications($report_id, $title, $category, $priority, $location, $username, $user_email, $image_path)
{
$dept_email = getDepartmentEmail($category);
$dept_name = 'IT Helpdesk';
switch ($category) {
case 'Electrical Issue':
case 'Water & Plumbing Issue':
case 'HVAC (AC/Heating) Issue':
case 'Furniture & Fixtures Issue':
case 'Road & Pathway Damage Issue':
case 'Cleaning & Janitorial Issue':
$dept_name = 'Estate Management';
break;
case 'Security & Safety Issue':
case 'Lost & Stolen Issue':
$dept_name = 'Security';
break;
case 'Library & Study Issue':
$dept_name = 'Library';
break;
}
$domain = $_ENV['DOMAIN'] ?? $_SERVER['HTTP_HOST'];
$appname = $_ENV['APP_NAME'];
$projectStartYear = $_ENV['PROJECT_START_YEAR'];
$currentYear = (int) date('Y');
$startYear = min((int) $projectStartYear, $currentYear);
$yearText = ($currentYear > $startYear) ? "$startYear-" . substr((string) $currentYear, -2) : (string) $startYear;
$isLocalhost = (
$domain === 'localhost' ||
str_starts_with($domain, 'localhost:') ||
$domain === '127.0.0.1'
);
$scheme = $isLocalhost ? 'http://' : 'https://';
$baseUrl = $scheme . $domain;
$baseUrl = rtrim($baseUrl, '/');
$viewLink = $baseUrl . "/core/actions/submit_report.php?view_id=" . urlencode($image_path);
$dept_subject = "{$appname} - #{$report_id} New report submission received";
$dept_message = <<<HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@300;400;600;700&display=swap" rel="stylesheet" />
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@300;400;600;700&display=swap');
.body-font { font-family: 'Lexend Deca', -apple-system !important; }
.heading-font { font-family: 'Lexend Deca', -apple-system !important; font-weight: 600; }
a { color: #1d4ed8; }
</style>
</head>
<body class="body-font" style="margin:0;padding:0;background-color:#ffffff;color:#0f172a;font-family:'Lexend Deca', -apple-system;">
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="background:#ffffff;padding:24px 12px;font-family:'Lexend Deca', -apple-system;">
<tr>
<td align="center">
<table role="presentation" cellpadding="0" cellspacing="0" width="640" style="max-width:640px;width:100%;border-collapse:collapse;text-align:left;font-family:'Lexend Deca', -apple-system;">
<tr>
<td style="padding-top:28px;padding-bottom:8px;text-align:center;">
<h1 class="heading-font" style="font-size:28px;line-height:34px;margin:0;font-weight:600;color:#0f172a;text-align:center;font-family:'Lexend Deca', -apple-system;">
New Report Form Submission Received
</h1>
</td>
</tr>
<tr>
<td style="padding:18px 16px 8px 16px;background:#ffffff;font-family:'Lexend Deca', -apple-system;">
<p style="font-size:16px;line-height:22px;color:#475569;margin:0 0 16px 0;font-family:'Lexend Deca', -apple-system;">
Hi <strong style="color:#0f172a;">{$dept_name}</strong> Team,
</p>
<p style="font-size:16px;line-height:22px;color:#475569;margin:0 0 16px 0;font-family:'Lexend Deca', -apple-system;">
<strong style="color:#0f172a;">{$appname}</strong> has received a report submission and the auto-email had sent a "<strong style="color:#0f172a;">Your Report Form Submission Received</strong>" template to the reporter.
</p>
<p style="font-size:16px;line-height:22px;color:#475569;margin:0 0 16px 0;font-family:'Lexend Deca', -apple-system;">
The report submission details are as follows:
</p>
<div style="height:1px;background:#e6e9ef;margin:20px 0;"></div>
<p style="font-size:16px;line-height:22px;color:#475569;margin:0 0 16px 0;font-family:'Lexend Deca', -apple-system;">
Report ID: <span style="color:#0f172a;font-family:'Lexend Deca', -apple-system;">#{$report_id}</span><br>
Reporter ID: <span style="color:#0f172a;font-family:'Lexend Deca', -apple-system;">{$username}</span><br>
Title: <span style="color:#0f172a;font-family:'Lexend Deca', -apple-system;">{$title}.</span><br>
Issue Category: <span style="color:#0f172a;font-family:'Lexend Deca', -apple-system;">{$category}.</span><br>
Priority: <span style="color:#0f172a;font-family:'Lexend Deca', -apple-system;">{$priority}.</span><br>
Image: <span style="color:#0f172a;font-family:'Lexend Deca', -apple-system;"><a href='{$viewLink}' target='_blank' style='color: #0f172a; text-decoration: underline;'>View the attached image</a>.</span><br>
Location: <span style="color:#0f172a;font-family:'Lexend Deca', -apple-system;"><a href='{$location}' target='_blank' style='color: #0f172a; text-decoration: underline;'>View the attached Location</a>.</span><br>
</p>
<p style="font-size:16px;line-height:22px;color:#475569;margin:0 0 16px 0;">
This request was received for the email address:
<a href="mailto:{$user_email}" style="color:#0f172a;">{$user_email}</a>.
</p>
<div style="height:1px;background:#e6e9ef;margin:20px 0;"></div>
<p style="font-size:14px;line-height:20px;color:#6b7280;margin:0 0 12px 0;font-family:'Lexend Deca', -apple-system;">
This is an auto-generated email system for report submissions. If this email successfully reached you, review the details above also respond the issue ASAP & update dashboard.
</p>
<p style="font-size:16px;line-height:18px;color:#475569;margin:18px 0 0 0;font-family:'Lexend Deca', -apple-system;">
Sincerely,
</p>
<p style="font-size:16px;line-height:18px;color:#0f172a;font-weight:600;margin:6px 0 0 0;font-family:'Lexend Deca', -apple-system;">
{$appname} Support
</p>
</td>
</tr>
<tr>
<td style="padding:14px 12px 28px 12px;font-family:'Lexend Deca', -apple-system;">
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="background:#f8fafc;padding:12px;border-radius:6px;font-family:'Lexend Deca', -apple-system;">
<tr>
<td style="text-align:center;font-size:12px;color:#6b7280;line-height:20px;font-family:'Lexend Deca', -apple-system;">
<div style="margin-bottom:4px;font-family:'Lexend Deca', -apple-system;">
<a href="https://{$domain}" style="color:inherit;text-decoration:none;font-family:'Lexend Deca', -apple-system;">{$domain}</a> |
<a href="https://{$domain}/support" style="color:inherit;text-decoration:none;font-family:'Lexend Deca', -apple-system;">Support</a> |
<a href="https://{$domain}/privacy-policy" style="color:inherit;text-decoration:none;font-family:'Lexend Deca', -apple-system;">Privacy Policy</a>
</div>
<div style="font-size:12px;color:#475569;font-family:'Lexend Deca', -apple-system;">
&copy; {$yearText} {$appname}. All rights reserved.
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
HTML;
$user_subject = "{$appname} - #{$report_id} Your report submission received";
$user_message = <<<HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@300;400;600;700&display=swap" rel="stylesheet" />
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@300;400;600;700&display=swap');
.body-font { font-family: 'Lexend Deca', -apple-system !important; }
.heading-font { font-family: 'Lexend Deca', -apple-system !important; font-weight: 600; }
a { color: #1d4ed8; }
</style>
</head>
<body class="body-font" style="margin:0;padding:0;background-color:#ffffff;color:#0f172a;font-family:'Lexend Deca', -apple-system;">
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="background:#ffffff;padding:24px 12px;font-family:'Lexend Deca', -apple-system;">
<tr>
<td align="center">
<table role="presentation" cellpadding="0" cellspacing="0" width="640" style="max-width:640px;width:100%;border-collapse:collapse;text-align:left;font-family:'Lexend Deca', -apple-system;">
<tr>
<td style="padding-top:28px;padding-bottom:8px;text-align:center;">
<h1 class="heading-font" style="font-size:28px;line-height:34px;margin:0;font-weight:600;color:#0f172a;text-align:center;font-family:'Lexend Deca', -apple-system;">
Your Report Form Submission Received
</h1>
</td>
</tr>
<tr>
<td style="padding:18px 16px 8px 16px;background:#ffffff;font-family:'Lexend Deca', -apple-system;">
<p style="font-size:16px;line-height:22px;color:#475569;margin:0 0 16px 0;font-family:'Lexend Deca', -apple-system;">
Hi <strong style="color:#0f172a;">{$username}</strong>,
</p>
<p style="font-size:16px;line-height:22px;color:#475569;margin:0 0 16px 0;font-family:'Lexend Deca', -apple-system;">
<strong style="color:#0f172a;">{$appname}</strong> has received a report submission on the platform.
We're pleased to thank you for taking this issue seriously and reporting to us.
</p>
<p style="font-size:16px;line-height:22px;color:#475569;margin:0 0 16px 0;font-family:'Lexend Deca', -apple-system;">
The report submission details are as follows:
</p>
<div style="height:1px;background:#e6e9ef;margin:20px 0;"></div>
<p style="font-size:16px;line-height:22px;color:#475569;margin:0 0 16px 0;font-family:'Lexend Deca', -apple-system;">
Report ID: <span style="color:#0f172a;font-family:'Lexend Deca', -apple-system;">#{$report_id}</span><br>
Title: <span style="color:#0f172a;font-family:'Lexend Deca', -apple-system;">{$title}.</span><br>
Issue Category: <span style="color:#0f172a;font-family:'Lexend Deca', -apple-system;">{$category}.</span><br>
Priority: <span style="color:#0f172a;font-family:'Lexend Deca', -apple-system;">{$priority}.</span><br>
Image: <span style="color:#0f172a;font-family:'Lexend Deca', -apple-system;"><a href='{$viewLink}' target='_blank' style='color: #0f172a; text-decoration: underline;'>View the attached image</a>.</span><br>
Location: <span style="color:#0f172a;font-family:'Lexend Deca', -apple-system;"><a href='{$location}' target='_blank' style='color: #0f172a; text-decoration: underline;'>View the attached Location</a>.</span><br>
</p>
<p style="font-size:16px;line-height:22px;color:#475569;margin:0 0 16px 0;font-family:'Lexend Deca', -apple-system;">
This request was received for the email address:
<a href="mailto:{$user_email}" style="color:#0f172a;">{$user_email}</a>.
</p>
<div style="height:1px;background:#e6e9ef;margin:20px 0;"></div>
<p style="font-size:14px;line-height:20px;color:#6b7280;margin:0 0 12px 0;font-family:'Lexend Deca', -apple-system;">
This is an auto-generated email system for report submissions.
If you did not make this report, or believe unauthorised access has occurred, kindly reach out to our IT Helpdesk as soon as possible.
However, if you have any new reports, feel free to submit them to us.
</p>
<p style="font-size:16px;line-height:18px;color:#475569;margin:18px 0 0 0;font-family:'Lexend Deca', -apple-system;">
Sincerely,
</p>
<p style="font-size:16px;line-height:18px;color:#0f172a;font-weight:600;margin:6px 0 0 0;font-family:'Lexend Deca', -apple-system;">
{$appname} Support
</p>
</td>
</tr>
<tr>
<td style="padding:14px 12px 28px 12px;font-family:'Lexend Deca', -apple-system;">
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="background:#f8fafc;padding:12px;border-radius:6px;font-family:'Lexend Deca', -apple-system;">
<tr>
<td style="text-align:center;font-size:12px;color:#6b7280;line-height:20px;font-family:'Lexend Deca', -apple-system;">
<div style="margin-bottom:4px;font-family:'Lexend Deca', -apple-system;">
<a href="https://{$domain}" style="color:inherit;text-decoration:none;font-family:'Lexend Deca', -apple-system;">{$domain}</a> |
<a href="https://{$domain}/support" style="color:inherit;text-decoration:none;font-family:'Lexend Deca', -apple-system;">Support</a> |
<a href="https://{$domain}/privacy-policy" style="color:inherit;text-decoration:none;font-family:'Lexend Deca', -apple-system;">Privacy Policy</a>
</div>
<div style="font-size:12px;color:#475569;font-family:'Lexend Deca', -apple-system;">
&copy; {$yearText} {$appname}. All rights reserved.
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
HTML;
$sentToDept = sendSMTP($dept_email, 'Campus Department', $dept_subject, $dept_message);
$sentToUser = sendSMTP($user_email, $username, $user_subject, $user_message);
return ($sentToDept && $sentToUser);
}
?>

View File

@@ -1,22 +1,20 @@
<?php
session_start();
ob_start();
require_once dirname(dirname(__DIR__)) . '/core/vendor/autoload.php';
require_once dirname(__DIR__) . '/init.php';
require_once dirname(__DIR__) . '/connection.php';
$clientId = $_ENV['GOOGLE_CLIENT_ID'];
$clientSecret = $_ENV['GOOGLE_CLIENT_SECRET'];
$refreshToken = $_ENV['GOOGLE_REFRESH_TOKEN'];
$folderId = $_ENV['GOOGLE_DRIVE_FOLDER_ID'];
if (!$clientId || !$refreshToken) {
die("Server Error: Google Drive configuration missing.");
}
if (isset($_GET['view_id']) && !empty($_GET['view_id'])) {
$fileId = $_GET['view_id'];
if (ob_get_length()) ob_clean();
try {
$client = new Google\Client();
$client->setClientId($clientId);
@@ -24,12 +22,13 @@ if (isset($_GET['view_id']) && !empty($_GET['view_id'])) {
$client->refreshToken($refreshToken);
$service = new Google\Service\Drive($client);
$response = $service->files->get($fileId, ['alt' => 'media']);
$content = $response->getBody()->getContents();
header("Content-Type: image/jpeg");
header("Cache-Control: public, max-age=86400"); // Cache for 24h
header("Content-Length: " . strlen($content));
header("Cache-Control: public, max-age=86400");
echo $content;
exit;
@@ -41,6 +40,9 @@ if (isset($_GET['view_id']) && !empty($_GET['view_id'])) {
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
require_once dirname(__DIR__) . '/connection.php';
require_once __DIR__ . '/mail/report_config.php';
if (!isset($_SESSION['user_id'])) { die("Access denied."); }
$user_id = $_SESSION['user_id'];
@@ -65,7 +67,6 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$client->setClientId($clientId);
$client->setClientSecret($clientSecret);
$client->refreshToken($refreshToken);
$service = new Google\Service\Drive($client);
$fileMetadata = new Google\Service\Drive\DriveFile([
@@ -80,7 +81,6 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
'uploadType' => 'multipart',
'fields' => 'id'
]);
$imagePath = $file->id;
} catch (Exception $e) {
@@ -96,7 +96,30 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$stmt = $conn->prepare($sql);
if ($stmt) {
$stmt->bind_param("issssss", $user_id, $title, $category, $priority, $location, $location, $imagePath);
$stmt->execute();
if ($stmt->execute()) {
$report_id = $stmt->insert_id;
$user_sql = "SELECT email, username FROM users WHERE id = ?";
$u_stmt = $conn->prepare($user_sql);
$u_stmt->bind_param("i", $user_id);
$u_stmt->execute();
$result = $u_stmt->get_result();
if ($user = $result->fetch_assoc()) {
sendReportNotifications(
$report_id,
$title,
$category,
$priority,
$location,
$user['username'],
$user['email'],
$imagePath
);
}
$u_stmt->close();
}
$stmt->close();
}
$conn->close();

View File

@@ -40,8 +40,8 @@ $url = 'https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash
$domain = $_ENV['DOMAIN'];
$app_name = $_ENV['APP_NAME'];
$helpEmail = $_ENV['HELPDESK_EMAIL'];
$helpPhone = $_ENV['HELPDESK_PHONE'];
$helpEmail = $_ENV['IT_HELPDESK_EMAIL'];
$helpPhone = $_ENV['IT_HELPDESK_PHONE'];
$mgmtEmail = $_ENV['MANAGEMENT_EMAIL'];
$mgmtPhone = $_ENV['MANAGEMENT_PHONE'];
$healthEmail = $_ENV['HEALTH_EMAIL'];
@@ -54,7 +54,7 @@ $secPhone = $_ENV['SECURITY_PHONE'];
$systemPrompt = <<<PROMPT
You are the AI assistant for '{$domain}', a campus facility dashboard.
Your main goal is to help students with campus facility and infrastructure issues only
(WiFi & Network, Electrical, Water & Plumbing, HVAC, Furniture, Cleaning, Security, Road & Pathway Damage, Library, Medical, or Others).
(WiFi & Network, Electrical, Water & Plumbing, HVAC (AC/Heating), Furniture & Fixtures, Cleaning & Janitorial, Security & Safety, Road & Pathway Damage, Library & Study, Lost & Stolen or Others).
**IDENTITY:**
1. **{$app_name}** is the name of the college/university you serve.
@@ -102,8 +102,9 @@ Do NOT guess. Do NOT improvise. You MUST NOT select a department outside this li
• **Cleaning & Janitorial** → Management
• **Road & Pathway Damage** → Management
• **Security & Safety issues** → Security/Safety
• **Medical or Health-related issues** → Medical/Health
• **Lost & Stolen Issue** → Security/Safety
• **Library-related issues** → Library
• **Medical or Health-related issues** → Medical/Health
• **Any unclear, uncategorized, or general facility issue** → IT Helpdesk Support
### MANDATORY FOOTER (STRICT):

2
src/package-lock.json generated
View File

@@ -1,5 +1,5 @@
{
"name": "htdocs",
"name": "src",
"lockfileVersion": 3,
"requires": true,
"packages": {

View File

@@ -38,8 +38,8 @@ if ($stmt) {
$email_initial = strtoupper(substr($email, 0, 1));
$helpdesk_email = $_ENV['HELPDESK_EMAIL'];
$helpdesk_phone = $_ENV['HELPDESK_PHONE'];
$helpdesk_email = $_ENV['IT_HELPDESK_EMAIL'];
$helpdesk_phone = $_ENV['IT_HELPDESK_PHONE'];
$management_email = $_ENV['MANAGEMENT_EMAIL'];
$management_phone = $_ENV['MANAGEMENT_PHONE'];

View File

@@ -40,16 +40,11 @@
--color-blue-600: oklch(54.6% 0.245 262.881);
--color-blue-700: oklch(48.8% 0.243 264.376);
--color-blue-900: oklch(37.9% 0.146 265.522);
--color-violet-200: oklch(89.4% 0.057 293.283);
--color-violet-400: oklch(70.2% 0.183 293.541);
--color-violet-500: oklch(60.6% 0.25 292.717);
--color-purple-100: oklch(94.6% 0.033 307.174);
--color-purple-200: oklch(90.2% 0.063 306.703);
--color-purple-300: oklch(82.7% 0.119 306.383);
--color-purple-400: oklch(71.4% 0.203 305.504);
--color-purple-500: oklch(62.7% 0.265 303.9);
--color-purple-600: oklch(55.8% 0.288 302.321);
--color-purple-700: oklch(49.6% 0.265 301.924);
--color-purple-900: oklch(38.1% 0.176 304.987);
--color-slate-200: oklch(92.9% 0.013 255.508);
--color-slate-300: oklch(86.9% 0.022 252.894);
@@ -65,7 +60,6 @@
--color-gray-600: oklch(44.6% 0.03 256.802);
--color-gray-800: oklch(27.8% 0.033 256.848);
--color-gray-900: oklch(21% 0.034 264.665);
--color-neutral-100: oklch(97% 0 0);
--color-neutral-200: oklch(92.2% 0 0);
--color-neutral-300: oklch(87% 0 0);
--color-neutral-400: oklch(70.8% 0 0);
@@ -326,9 +320,6 @@
.inset-y-0 {
inset-block: calc(var(--spacing) * 0);
}
.-top-10 {
top: calc(var(--spacing) * -10);
}
.top-0 {
top: calc(var(--spacing) * 0);
}
@@ -350,12 +341,6 @@
.top-10 {
top: calc(var(--spacing) * 10);
}
.-right-10 {
right: calc(var(--spacing) * -10);
}
.right-0 {
right: calc(var(--spacing) * 0);
}
.right-1 {
right: calc(var(--spacing) * 1);
}
@@ -374,6 +359,9 @@
.bottom-2\.5 {
bottom: calc(var(--spacing) * 2.5);
}
.bottom-auto {
bottom: auto;
}
.left-0 {
left: calc(var(--spacing) * 0);
}
@@ -470,15 +458,9 @@
.mt-6 {
margin-top: calc(var(--spacing) * 6);
}
.mt-8 {
margin-top: calc(var(--spacing) * 8);
}
.mt-10 {
margin-top: calc(var(--spacing) * 10);
}
.mt-12 {
margin-top: calc(var(--spacing) * 12);
}
.mr-2 {
margin-right: calc(var(--spacing) * 2);
}
@@ -491,12 +473,6 @@
.-mb-6 {
margin-bottom: calc(var(--spacing) * -6);
}
.mb-0 {
margin-bottom: calc(var(--spacing) * 0);
}
.mb-0\.5 {
margin-bottom: calc(var(--spacing) * 0.5);
}
.mb-1 {
margin-bottom: calc(var(--spacing) * 1);
}
@@ -518,9 +494,6 @@
.mb-8 {
margin-bottom: calc(var(--spacing) * 8);
}
.mb-10 {
margin-bottom: calc(var(--spacing) * 10);
}
.ml-1 {
margin-left: calc(var(--spacing) * 1);
}
@@ -554,12 +527,12 @@
.table {
display: table;
}
.h-0 {
height: calc(var(--spacing) * 0);
}
.h-0\.5 {
height: calc(var(--spacing) * 0.5);
}
.h-1 {
height: calc(var(--spacing) * 1);
}
.h-1\.5 {
height: calc(var(--spacing) * 1.5);
}
@@ -578,9 +551,6 @@
.h-6 {
height: calc(var(--spacing) * 6);
}
.h-7 {
height: calc(var(--spacing) * 7);
}
.h-8 {
height: calc(var(--spacing) * 8);
}
@@ -599,12 +569,6 @@
.h-28 {
height: calc(var(--spacing) * 28);
}
.h-32 {
height: calc(var(--spacing) * 32);
}
.h-64 {
height: calc(var(--spacing) * 64);
}
.h-\[75vh\] {
height: 75vh;
}
@@ -632,9 +596,6 @@
.w-0\.5 {
width: calc(var(--spacing) * 0.5);
}
.w-1 {
width: calc(var(--spacing) * 1);
}
.w-1\.5 {
width: calc(var(--spacing) * 1.5);
}
@@ -668,9 +629,6 @@
.w-6 {
width: calc(var(--spacing) * 6);
}
.w-7 {
width: calc(var(--spacing) * 7);
}
.w-8 {
width: calc(var(--spacing) * 8);
}
@@ -725,9 +683,6 @@
.w-64 {
width: calc(var(--spacing) * 64);
}
.w-\[2px\] {
width: 2px;
}
.w-auto {
width: auto;
}
@@ -737,12 +692,6 @@
.w-px {
width: 1px;
}
.max-w-2xl {
max-width: var(--container-2xl);
}
.max-w-3xl {
max-width: var(--container-3xl);
}
.max-w-4xl {
max-width: var(--container-4xl);
}
@@ -791,6 +740,9 @@
.grow {
flex-grow: 1;
}
.border-collapse {
border-collapse: collapse;
}
.-translate-y-full {
--tw-translate-y: -100%;
translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -834,9 +786,6 @@
.list-inside {
list-style-position: inside;
}
.list-decimal {
list-style-type: decimal;
}
.list-disc {
list-style-type: disc;
}
@@ -900,13 +849,6 @@
.gap-6 {
gap: calc(var(--spacing) * 6);
}
.space-y-0 {
:where(& > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
}
}
.space-y-1 {
:where(& > :not(:last-child)) {
--tw-space-y-reverse: 0;
@@ -1020,12 +962,6 @@
.rounded-\[2\.5rem\] {
border-radius: 2.5rem;
}
.rounded-\[2rem\] {
border-radius: 2rem;
}
.rounded-\[3rem\] {
border-radius: 3rem;
}
.rounded-full {
border-radius: calc(infinity * 1px);
}
@@ -1072,10 +1008,6 @@
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
}
.border-l-2 {
border-left-style: var(--tw-border-style);
border-left-width: 2px;
}
.border-dashed {
--tw-border-style: dashed;
border-style: dashed;
@@ -1084,24 +1016,12 @@
--tw-border-style: none;
border-style: none;
}
.border-blue-500\/10 {
border-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 10%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
}
}
.border-blue-500\/20 {
border-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
}
}
.border-blue-500\/30 {
border-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-blue-500) 30%, transparent);
}
}
.border-blue-500\/40 {
border-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 40%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@@ -1114,30 +1034,24 @@
border-color: color-mix(in oklab, var(--color-blue-600) 20%, transparent);
}
}
.border-blue-600\/30 {
border-color: color-mix(in srgb, oklch(54.6% 0.245 262.881) 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-blue-600) 30%, transparent);
}
}
.border-blue-700\/50 {
border-color: color-mix(in srgb, oklch(48.8% 0.243 264.376) 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-blue-700) 50%, transparent);
}
}
.border-gray-400\/40 {
border-color: color-mix(in srgb, oklch(70.7% 0.022 261.325) 40%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-gray-400) 40%, transparent);
}
}
.border-green-500\/20 {
border-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-green-500) 20%, transparent);
}
}
.border-green-500\/30 {
border-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-green-500) 30%, transparent);
}
}
.border-green-500\/50 {
border-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@@ -1150,12 +1064,6 @@
border-color: color-mix(in oklab, var(--color-green-700) 50%, transparent);
}
}
.border-green-900\/50 {
border-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-green-900) 50%, transparent);
}
}
.border-neutral-600 {
border-color: var(--color-neutral-600);
}
@@ -1180,12 +1088,6 @@
border-color: color-mix(in oklab, var(--color-orange-500) 20%, transparent);
}
}
.border-red-500\/10 {
border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
}
}
.border-red-500\/20 {
border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@@ -1198,30 +1100,15 @@
border-color: color-mix(in oklab, var(--color-red-500) 30%, transparent);
}
}
.border-red-500\/50 {
border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
}
}
.border-red-700\/30 {
border-color: color-mix(in srgb, oklch(50.5% 0.213 27.518) 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-red-700) 30%, transparent);
}
}
.border-slate-700 {
border-color: var(--color-slate-700);
}
.border-transparent {
border-color: transparent;
}
.border-white\/5 {
border-color: color-mix(in srgb, #fff 5%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
}
}
.border-white\/10 {
border-color: color-mix(in srgb, #fff 10%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@@ -1243,12 +1130,6 @@
border-color: color-mix(in oklab, var(--color-yellow-700) 50%, transparent);
}
}
.border-yellow-900\/50 {
border-color: color-mix(in srgb, oklch(42.1% 0.095 57.708) 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-yellow-900) 50%, transparent);
}
}
.bg-\[\#0b0c0e\] {
background-color: #0b0c0e;
}
@@ -1258,12 +1139,6 @@
.bg-\[\#2d2d2d\] {
background-color: #2d2d2d;
}
.bg-\[\#16171a\] {
background-color: #16171a;
}
.bg-\[\#222327\] {
background-color: #222327;
}
.bg-amber-500\/10 {
background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@@ -1273,24 +1148,12 @@
.bg-black {
background-color: var(--color-black);
}
.bg-black\/30 {
background-color: color-mix(in srgb, #000 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
}
}
.bg-black\/40 {
background-color: color-mix(in srgb, #000 40%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
}
}
.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-black\/60 {
background-color: color-mix(in srgb, #000 60%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@@ -1300,33 +1163,15 @@
.bg-blue-400 {
background-color: var(--color-blue-400);
}
.bg-blue-500\/5 {
background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 5%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-blue-500) 5%, transparent);
}
}
.bg-blue-500\/10 {
background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 10%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
}
}
.bg-blue-500\/20 {
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);
}
}
.bg-blue-600 {
background-color: var(--color-blue-600);
}
.bg-blue-600\/5 {
background-color: color-mix(in srgb, oklch(54.6% 0.245 262.881) 5%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-blue-600) 5%, transparent);
}
}
.bg-blue-600\/10 {
background-color: color-mix(in srgb, oklch(54.6% 0.245 262.881) 10%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@@ -1390,12 +1235,6 @@
.bg-green-900 {
background-color: var(--color-green-900);
}
.bg-green-900\/20 {
background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-green-900) 20%, transparent);
}
}
.bg-green-900\/30 {
background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@@ -1468,9 +1307,6 @@
background-color: color-mix(in oklab, var(--color-neutral-900) 95%, transparent);
}
}
.bg-neutral-950 {
background-color: var(--color-neutral-950);
}
.bg-orange-500\/10 {
background-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 10%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@@ -1495,12 +1331,6 @@
.bg-red-500 {
background-color: var(--color-red-500);
}
.bg-red-500\/5 {
background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 5%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-red-500) 5%, transparent);
}
}
.bg-red-500\/10 {
background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@@ -1516,21 +1346,12 @@
background-color: color-mix(in oklab, var(--color-red-900) 20%, transparent);
}
}
.bg-red-900\/30 {
background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-red-900) 30%, transparent);
}
}
.bg-red-900\/50 {
background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-red-900) 50%, transparent);
}
}
.bg-slate-700 {
background-color: var(--color-slate-700);
}
.bg-slate-800 {
background-color: var(--color-slate-800);
}
@@ -1540,12 +1361,6 @@
.bg-white {
background-color: var(--color-white);
}
.bg-white\/5 {
background-color: color-mix(in srgb, #fff 5%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
}
}
.bg-yellow-400 {
background-color: var(--color-yellow-400);
}
@@ -1561,12 +1376,6 @@
.bg-yellow-900 {
background-color: var(--color-yellow-900);
}
.bg-yellow-900\/20 {
background-color: color-mix(in srgb, oklch(42.1% 0.095 57.708) 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-yellow-900) 20%, transparent);
}
}
.bg-yellow-900\/30 {
background-color: color-mix(in srgb, oklch(42.1% 0.095 57.708) 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@@ -1595,9 +1404,6 @@
--tw-gradient-position: to top right in oklab;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-none {
background-image: none;
}
.from-blue-500 {
--tw-gradient-from: var(--color-blue-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));
@@ -1673,21 +1479,9 @@
.p-8 {
padding: calc(var(--spacing) * 8);
}
.p-10 {
padding: calc(var(--spacing) * 10);
}
.p-12 {
padding: calc(var(--spacing) * 12);
}
.px-0 {
padding-inline: calc(var(--spacing) * 0);
}
.px-1 {
padding-inline: calc(var(--spacing) * 1);
}
.px-1\.5 {
padding-inline: calc(var(--spacing) * 1.5);
}
.px-2 {
padding-inline: calc(var(--spacing) * 2);
}
@@ -1709,9 +1503,6 @@
.px-8 {
padding-inline: calc(var(--spacing) * 8);
}
.py-0 {
padding-block: calc(var(--spacing) * 0);
}
.py-0\.5 {
padding-block: calc(var(--spacing) * 0.5);
}
@@ -1745,9 +1536,6 @@
.pt-2 {
padding-top: calc(var(--spacing) * 2);
}
.pt-3 {
padding-top: calc(var(--spacing) * 3);
}
.pr-2 {
padding-right: calc(var(--spacing) * 2);
}
@@ -1766,9 +1554,6 @@
.pb-4 {
padding-bottom: calc(var(--spacing) * 4);
}
.pb-6 {
padding-bottom: calc(var(--spacing) * 6);
}
.pb-10 {
padding-bottom: calc(var(--spacing) * 10);
}
@@ -1778,9 +1563,6 @@
.pl-3 {
padding-left: calc(var(--spacing) * 3);
}
.pl-4 {
padding-left: calc(var(--spacing) * 4);
}
.pl-5 {
padding-left: calc(var(--spacing) * 5);
}
@@ -1790,15 +1572,9 @@
.pl-10 {
padding-left: calc(var(--spacing) * 10);
}
.pl-12 {
padding-left: calc(var(--spacing) * 12);
}
.pl-14 {
padding-left: calc(var(--spacing) * 14);
}
.pl-16 {
padding-left: calc(var(--spacing) * 16);
}
.text-center {
text-align: center;
}
@@ -1846,18 +1622,12 @@
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
}
.text-\[9px\] {
font-size: 9px;
}
.text-\[10px\] {
font-size: 10px;
}
.text-\[11px\] {
font-size: 11px;
}
.text-\[12px\] {
font-size: 12px;
}
.leading-none {
--tw-leading: 1;
line-height: 1;
@@ -1890,10 +1660,6 @@
--tw-tracking: 0.2em;
letter-spacing: 0.2em;
}
.tracking-\[0\.3em\] {
--tw-tracking: 0.3em;
letter-spacing: 0.3em;
}
.tracking-\[0\.4em\] {
--tw-tracking: 0.4em;
letter-spacing: 0.4em;
@@ -1902,10 +1668,6 @@
--tw-tracking: var(--tracking-tight);
letter-spacing: var(--tracking-tight);
}
.tracking-tighter {
--tw-tracking: var(--tracking-tighter);
letter-spacing: var(--tracking-tighter);
}
.tracking-wide {
--tw-tracking: var(--tracking-wide);
letter-spacing: var(--tracking-wide);
@@ -1933,27 +1695,12 @@
.text-blue-200 {
color: var(--color-blue-200);
}
.text-blue-300 {
color: var(--color-blue-300);
}
.text-blue-400 {
color: var(--color-blue-400);
}
.text-blue-400\/80 {
color: color-mix(in srgb, oklch(70.7% 0.165 254.624) 80%, transparent);
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, var(--color-blue-400) 80%, transparent);
}
}
.text-blue-500 {
color: var(--color-blue-500);
}
.text-blue-500\/50 {
color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
}
}
.text-emerald-400 {
color: var(--color-emerald-400);
}
@@ -1969,9 +1716,6 @@
.text-gray-500 {
color: var(--color-gray-500);
}
.text-gray-900 {
color: var(--color-gray-900);
}
.text-green-200 {
color: var(--color-green-200);
}
@@ -1981,18 +1725,6 @@
.text-green-500 {
color: var(--color-green-500);
}
.text-green-500\/70 {
color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 70%, transparent);
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, var(--color-green-500) 70%, transparent);
}
}
.text-green-500\/80 {
color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 80%, transparent);
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, var(--color-green-500) 80%, transparent);
}
}
.text-neutral-200 {
color: var(--color-neutral-200);
}
@@ -2032,33 +1764,18 @@
.text-red-400 {
color: var(--color-red-400);
}
.text-red-400\/80 {
color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 80%, transparent);
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, var(--color-red-400) 80%, transparent);
}
}
.text-red-500 {
color: var(--color-red-500);
}
.text-slate-200 {
color: var(--color-slate-200);
}
.text-slate-300 {
color: var(--color-slate-300);
}
.text-slate-400 {
color: var(--color-slate-400);
}
.text-slate-500 {
color: var(--color-slate-500);
}
.text-slate-600 {
color: var(--color-slate-600);
}
.text-slate-700 {
color: var(--color-slate-700);
}
.text-violet-400 {
color: var(--color-violet-400);
}
@@ -2074,12 +1791,6 @@
.text-yellow-500 {
color: var(--color-yellow-500);
}
.text-yellow-500\/80 {
color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 80%, transparent);
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, var(--color-yellow-500) 80%, transparent);
}
}
.lowercase {
text-transform: lowercase;
}
@@ -2096,15 +1807,6 @@
.underline {
text-decoration-line: underline;
}
.decoration-red-500\/50 {
text-decoration-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
}
}
.underline-offset-4 {
text-underline-offset: 4px;
}
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -2119,25 +1821,9 @@
color: var(--color-neutral-500);
}
}
.placeholder-neutral-600 {
&::placeholder {
color: var(--color-neutral-600);
}
}
.placeholder-slate-600 {
&::placeholder {
color: var(--color-slate-600);
}
}
.opacity-0 {
opacity: 0%;
}
.opacity-5 {
opacity: 5%;
}
.opacity-10 {
opacity: 10%;
}
.opacity-50 {
opacity: 50%;
}
@@ -2168,18 +1854,10 @@
--tw-shadow: 0 0 15px var(--tw-shadow-color, rgba(59,130,246,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-\[0_32px_64px_-12px_rgba\(0\,0\,0\,0\.6\)\] {
--tw-shadow: 0 32px 64px -12px var(--tw-shadow-color, rgba(0,0,0,0.6));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-lg {
--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);
}
.shadow-md {
--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-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);
@@ -2200,44 +1878,18 @@
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + 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);
}
.ring-8 {
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(8px + 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);
}
.ring-\[6px\] {
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(6px + 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);
}
.shadow-blue-600\/20 {
--tw-shadow-color: color-mix(in srgb, oklch(54.6% 0.245 262.881) 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-600) 20%, transparent) var(--tw-shadow-alpha), transparent);
}
}
.shadow-blue-900\/20 {
--tw-shadow-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-900) 20%, transparent) var(--tw-shadow-alpha), transparent);
}
}
.shadow-blue-900\/40 {
--tw-shadow-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 40%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-900) 40%, transparent) var(--tw-shadow-alpha), transparent);
}
}
.shadow-green-500\/50 {
--tw-shadow-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-green-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
}
}
.shadow-green-900\/20 {
--tw-shadow-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-green-900) 20%, transparent) var(--tw-shadow-alpha), transparent);
}
}
.shadow-purple-900\/20 {
--tw-shadow-color: color-mix(in srgb, oklch(38.1% 0.176 304.987) 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@@ -2247,21 +1899,6 @@
.ring-\[\#1a1a1a\] {
--tw-ring-color: #1a1a1a;
}
.ring-\[\#16171a\] {
--tw-ring-color: #16171a;
}
.ring-blue-600\/10 {
--tw-ring-color: color-mix(in srgb, oklch(54.6% 0.245 262.881) 10%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--tw-ring-color: color-mix(in oklab, var(--color-blue-600) 10%, transparent);
}
}
.ring-green-500\/10 {
--tw-ring-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 10%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--tw-ring-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
}
}
.ring-green-500\/20 {
--tw-ring-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@@ -2317,10 +1954,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-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,);
}
.transition {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2754,13 +2387,6 @@
}
}
}
.hover\:bg-blue-500 {
&:hover {
@media (hover: hover) {
background-color: var(--color-blue-500);
}
}
}
.hover\:bg-blue-500\/20 {
&:hover {
@media (hover: hover) {
@@ -2778,20 +2404,6 @@
}
}
}
.hover\:bg-green-500 {
&:hover {
@media (hover: hover) {
background-color: var(--color-green-500);
}
}
}
.hover\:bg-green-700 {
&:hover {
@media (hover: hover) {
background-color: var(--color-green-700);
}
}
}
.hover\:bg-neutral-700 {
&:hover {
@media (hover: hover) {
@@ -2976,53 +2588,17 @@
border-color: var(--color-purple-500);
}
}
.focus\:ring-1 {
&: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-4 {
&:focus {
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + 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-blue-500 {
&:focus {
--tw-ring-color: var(--color-blue-500);
}
}
.focus\:ring-blue-500\/20 {
&:focus {
--tw-ring-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--tw-ring-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
}
}
}
.focus\:ring-blue-500\/30 {
&:focus {
--tw-ring-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--tw-ring-color: color-mix(in oklab, var(--color-blue-500) 30%, transparent);
}
}
}
.focus\:ring-blue-500\/40 {
&:focus {
--tw-ring-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 40%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--tw-ring-color: color-mix(in oklab, var(--color-blue-500) 40%, transparent);
}
}
}
.focus\:ring-blue-500\/50 {
&:focus {
--tw-ring-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 50%, transparent);
@@ -3147,21 +2723,6 @@
padding: calc(var(--spacing) * 0);
}
}
.sm\:p-6 {
@media (width >= 40rem) {
padding: calc(var(--spacing) * 6);
}
}
.sm\:p-8 {
@media (width >= 40rem) {
padding: calc(var(--spacing) * 8);
}
}
.sm\:p-10 {
@media (width >= 40rem) {
padding: calc(var(--spacing) * 10);
}
}
.sm\:px-6 {
@media (width >= 40rem) {
padding-inline: calc(var(--spacing) * 6);