Admin AI Tools page: unified design system styling, provider selector with OpenAI turd emoji, free-text model input with exact ID warning
This commit is contained in:
@@ -0,0 +1,328 @@
|
||||
/* Admin Design System - Design Tokens & Base Styles */
|
||||
|
||||
/* === Color Tokens === */
|
||||
:root {
|
||||
/* Background colors - Elegant warm palette */
|
||||
--admin-bg: #f5f4ef; /* parchment - main background */
|
||||
--admin-bg-subtle: #f7f6f2; /* parchment 600 */
|
||||
--admin-card-bg: #ffffff; /* Pure white for cards */
|
||||
--admin-card-bg-alt: #fafaf7; /* Slightly warm white */
|
||||
|
||||
/* Text colors */
|
||||
--admin-text-primary: #3c3825; /* parchment 100 - dark warm */
|
||||
--admin-text-secondary: #686763; /* dim_grey */
|
||||
--admin-text-muted: #a5a4a1; /* dim_grey 700 */
|
||||
|
||||
/* Borders */
|
||||
--admin-border: #d0cbb4; /* parchment 400 */
|
||||
--admin-border-light: #e5e2d9; /* soft_linen */
|
||||
|
||||
/* Accent - Powder Petal (warm coral/peach) */
|
||||
--admin-accent: #ca7543; /* powder_petal 300 */
|
||||
--admin-accent-hover: #8c4c27; /* powder_petal 200 */
|
||||
--admin-accent-light: #f4e3d9; /* powder_petal 600 */
|
||||
--admin-accent-text: #8c4c27; /* powder_petal 200 */
|
||||
|
||||
/* Status Colors */
|
||||
--admin-success: #726e67; /* dim_grey 300 */
|
||||
--admin-success-accent: #535350; /* dim_grey 400 */
|
||||
--admin-warning: #aba278; /* parchment 300 */
|
||||
--admin-warning-light: #f5f4ef; /* parchment */
|
||||
--admin-danger: #8c4c27; /* powder_petal 200 */
|
||||
--admin-danger-light: #f4e3d9; /* powder_petal 600 */
|
||||
--admin-info: #686763; /* dim_grey */
|
||||
|
||||
/* Sidebar - Dark elegant */
|
||||
--admin-sidebar-bg: #3c3825; /* parchment 100 */
|
||||
--admin-sidebar-text: #c3c3c1; /* dim_grey 800 */
|
||||
--admin-sidebar-hover: #4c4945; /* dim_grey 200 */
|
||||
--admin-sidebar-active: #5c584f; /* between */
|
||||
|
||||
/* Spacing */
|
||||
--admin-page-padding: 1.5rem; /* px-6 */
|
||||
--admin-section-gap: 1rem; /* gap-4 */
|
||||
--admin-card-padding: 1.25rem; /* p-5 */
|
||||
|
||||
/* Border Radius */
|
||||
--admin-radius-sm: 0.5rem; /* rounded-lg */
|
||||
--admin-radius-md: 0.75rem; /* rounded-xl */
|
||||
--admin-radius-lg: 1rem; /* rounded-2xl */
|
||||
|
||||
/* Shadows - subtle warm shadows */
|
||||
--admin-shadow-sm: 0 1px 2px rgba(60, 56, 37, 0.04);
|
||||
--admin-shadow-md: 0 4px 6px -1px rgba(60, 56, 37, 0.06), 0 2px 4px -2px rgba(60, 56, 37, 0.04);
|
||||
--admin-shadow-lg: 0 10px 15px -3px rgba(60, 56, 37, 0.08), 0 4px 6px -4px rgba(60, 56, 37, 0.04);
|
||||
}
|
||||
|
||||
/* === Base Admin Layout === */
|
||||
.admin-page {
|
||||
min-height: 100vh;
|
||||
background-color: var(--admin-bg);
|
||||
padding: var(--admin-page-padding);
|
||||
}
|
||||
|
||||
.admin-container {
|
||||
max-width: 72rem; /* max-w-6xl */
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* === Admin Card === */
|
||||
.admin-card {
|
||||
background-color: var(--admin-card-bg);
|
||||
border: 1px solid var(--admin-border);
|
||||
border-radius: var(--admin-radius-lg);
|
||||
box-shadow: var(--admin-shadow-sm);
|
||||
}
|
||||
|
||||
.admin-card-header {
|
||||
padding: var(--admin-card-padding);
|
||||
border-bottom: 1px solid var(--admin-border-light);
|
||||
}
|
||||
|
||||
.admin-card-body {
|
||||
padding: var(--admin-card-padding);
|
||||
}
|
||||
|
||||
/* === Admin Filter Bar === */
|
||||
.admin-filter-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--admin-section-gap);
|
||||
align-items: center;
|
||||
padding: var(--admin-card-padding);
|
||||
background-color: var(--admin-card-bg);
|
||||
border: 1px solid var(--admin-border);
|
||||
border-radius: var(--admin-radius-md);
|
||||
box-shadow: var(--admin-shadow-sm);
|
||||
}
|
||||
|
||||
/* === Admin Table === */
|
||||
.admin-table {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-size: 0.875rem; /* text-sm */
|
||||
}
|
||||
|
||||
.admin-table thead {
|
||||
background-color: var(--admin-bg);
|
||||
border-bottom: 1px solid var(--admin-border);
|
||||
}
|
||||
|
||||
.admin-table th {
|
||||
padding: 0.875rem 1.25rem; /* py-3.5 px-5 */
|
||||
font-size: 0.625rem; /* text-[10px] */
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--admin-text-muted);
|
||||
}
|
||||
|
||||
.admin-table tbody {
|
||||
background-color: var(--admin-card-bg);
|
||||
}
|
||||
|
||||
.admin-table tbody tr {
|
||||
border-bottom: 1px solid var(--admin-border-light);
|
||||
transition: background-color 150ms;
|
||||
}
|
||||
|
||||
.admin-table tbody tr:hover {
|
||||
background-color: rgba(253, 250, 246, 0.5); /* stone-50/40 */
|
||||
}
|
||||
|
||||
.admin-table tbody tr:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.admin-table td {
|
||||
padding: 0.875rem 1.25rem; /* py-3.5 px-5 */
|
||||
}
|
||||
|
||||
/* === Admin Stats Bar === */
|
||||
.admin-stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.admin-stat {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.admin-stat-label {
|
||||
font-size: 0.875rem;
|
||||
color: var(--admin-text-secondary);
|
||||
}
|
||||
|
||||
.admin-stat-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.125rem 0.625rem; /* py-0.5 px-2.5 */
|
||||
border-radius: 9999px; /* rounded-full */
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.admin-stat-badge--active {
|
||||
background-color: var(--admin-accent-light);
|
||||
border: 1px solid var(--admin-accent);
|
||||
color: var(--admin-accent-text);
|
||||
}
|
||||
|
||||
.admin-stat-badge--inactive {
|
||||
background-color: var(--admin-bg);
|
||||
border: 1px solid var(--admin-border);
|
||||
color: var(--admin-text-secondary);
|
||||
}
|
||||
|
||||
/* === Admin Button === */
|
||||
.admin-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: var(--admin-radius-sm);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
transition: all 150ms;
|
||||
}
|
||||
|
||||
.admin-btn--primary {
|
||||
background-color: var(--admin-accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.admin-btn--primary:hover {
|
||||
background-color: var(--admin-accent-hover);
|
||||
}
|
||||
|
||||
.admin-btn--secondary {
|
||||
background-color: var(--admin-card-bg);
|
||||
border: 1px solid var(--admin-border);
|
||||
color: var(--admin-text-secondary);
|
||||
}
|
||||
|
||||
.admin-btn--secondary:hover {
|
||||
background-color: var(--admin-bg);
|
||||
border-color: var(--admin-text-muted);
|
||||
}
|
||||
|
||||
/* === Admin Input === */
|
||||
.admin-input {
|
||||
flex: 1;
|
||||
min-width: 12rem;
|
||||
padding: 0.625rem 0.75rem;
|
||||
background-color: var(--admin-card-bg);
|
||||
border: 1px solid var(--admin-border);
|
||||
border-radius: var(--admin-radius-sm);
|
||||
font-size: 0.875rem;
|
||||
color: var(--admin-text-primary);
|
||||
outline: none;
|
||||
transition: border-color 150ms;
|
||||
}
|
||||
|
||||
.admin-input:focus {
|
||||
border-color: var(--admin-accent);
|
||||
}
|
||||
|
||||
.admin-input::placeholder {
|
||||
color: var(--admin-text-muted);
|
||||
}
|
||||
|
||||
/* === Admin Filter Tabs === */
|
||||
.admin-filter-tabs {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem;
|
||||
background-color: var(--admin-bg);
|
||||
border: 1px solid var(--admin-border);
|
||||
border-radius: var(--admin-radius-sm);
|
||||
}
|
||||
|
||||
.admin-filter-tab {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: var(--admin-radius-sm);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--admin-text-secondary);
|
||||
transition: all 150ms;
|
||||
}
|
||||
|
||||
.admin-filter-tab:hover {
|
||||
color: var(--admin-text-primary);
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.admin-filter-tab--active {
|
||||
background-color: var(--admin-card-bg);
|
||||
color: var(--admin-accent-text);
|
||||
border: 1px solid var(--admin-accent);
|
||||
box-shadow: var(--admin-shadow-sm);
|
||||
}
|
||||
|
||||
/* === Admin Status Badge === */
|
||||
.admin-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.125rem 0.625rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.625rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.admin-status::before {
|
||||
content: "";
|
||||
width: 0.375rem;
|
||||
height: 0.375rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.admin-status--active {
|
||||
background-color: #dcfce7; /* green-100 */
|
||||
color: #166534; /* green-800 */
|
||||
}
|
||||
|
||||
.admin-status--active::before {
|
||||
background-color: #22c55e; /* green-500 */
|
||||
}
|
||||
|
||||
.admin-status--inactive {
|
||||
background-color: var(--admin-bg);
|
||||
color: var(--admin-text-muted);
|
||||
}
|
||||
|
||||
.admin-status--inactive::before {
|
||||
background-color: var(--admin-text-muted);
|
||||
}
|
||||
|
||||
/* === Admin View Toggle === */
|
||||
.admin-view-toggle {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem;
|
||||
background-color: var(--admin-card-bg);
|
||||
border: 1px solid var(--admin-border);
|
||||
border-radius: var(--admin-radius-sm);
|
||||
}
|
||||
|
||||
.admin-view-btn {
|
||||
padding: 0.375rem;
|
||||
border-radius: var(--admin-radius-sm);
|
||||
color: var(--admin-text-secondary);
|
||||
transition: all 150ms;
|
||||
}
|
||||
|
||||
.admin-view-btn:hover {
|
||||
color: var(--admin-text-primary);
|
||||
background-color: var(--admin-bg);
|
||||
}
|
||||
|
||||
.admin-view-btn--active {
|
||||
background-color: var(--admin-accent-light);
|
||||
color: var(--admin-accent-text);
|
||||
border: 1px solid var(--admin-accent);
|
||||
}
|
||||
Reference in New Issue
Block a user