1172 lines
21 KiB
CSS
1172 lines
21 KiB
CSS
/* Shared Component Styles for General Bots Suite */
|
|
|
|
/* ============================================ */
|
|
/* BUTTONS */
|
|
/* ============================================ */
|
|
|
|
/* Base button reset */
|
|
button {
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Primary button */
|
|
.btn-primary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
background: hsl(var(--primary));
|
|
color: hsl(var(--primary-foreground));
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
opacity: 0.9;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px hsla(var(--primary) / 0.3);
|
|
}
|
|
|
|
.btn-primary:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.btn-primary:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
|
|
/* Secondary button */
|
|
.btn-secondary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 10px 20px;
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 6px;
|
|
background: hsl(var(--background));
|
|
color: hsl(var(--foreground));
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: hsl(var(--accent));
|
|
border-color: hsl(var(--primary));
|
|
}
|
|
|
|
/* Ghost button */
|
|
.btn-ghost {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: hsl(var(--foreground));
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.btn-ghost:hover {
|
|
background: hsl(var(--accent));
|
|
}
|
|
|
|
/* Icon button */
|
|
.btn-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
height: 36px;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: hsl(var(--foreground));
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.btn-icon:hover {
|
|
background: hsl(var(--accent));
|
|
}
|
|
|
|
.btn-icon.active {
|
|
background: hsl(var(--primary));
|
|
color: hsl(var(--primary-foreground));
|
|
}
|
|
|
|
/* Small icon button */
|
|
.btn-icon-sm {
|
|
width: 28px;
|
|
height: 28px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
color: hsl(var(--muted-foreground));
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.btn-icon-sm:hover {
|
|
background: hsl(var(--accent));
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
/* Danger button */
|
|
.btn-danger {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
background: hsl(var(--destructive));
|
|
color: hsl(var(--destructive-foreground));
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* Button sizes */
|
|
.btn-sm {
|
|
padding: 6px 12px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.btn-lg {
|
|
padding: 14px 28px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.btn-full {
|
|
width: 100%;
|
|
}
|
|
|
|
/* ============================================ */
|
|
/* FORMS */
|
|
/* ============================================ */
|
|
|
|
/* Form group */
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.form-group:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Form row (horizontal layout) */
|
|
.form-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 16px;
|
|
}
|
|
|
|
/* Labels */
|
|
.form-label {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.form-label-sm {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
/* Text input */
|
|
.input,
|
|
input[type="text"],
|
|
input[type="email"],
|
|
input[type="password"],
|
|
input[type="search"],
|
|
input[type="url"],
|
|
input[type="number"],
|
|
input[type="tel"],
|
|
input[type="date"],
|
|
input[type="datetime-local"] {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 6px;
|
|
background: hsl(var(--background));
|
|
color: hsl(var(--foreground));
|
|
font-size: 14px;
|
|
font-family: inherit;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.input:focus,
|
|
input:focus {
|
|
outline: none;
|
|
border-color: hsl(var(--primary));
|
|
box-shadow: 0 0 0 3px hsla(var(--primary) / 0.1);
|
|
}
|
|
|
|
.input::placeholder,
|
|
input::placeholder {
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.input:disabled,
|
|
input:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Input with icon */
|
|
.input-with-icon {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.input-with-icon .input-icon {
|
|
position: absolute;
|
|
left: 12px;
|
|
color: hsl(var(--muted-foreground));
|
|
pointer-events: none;
|
|
}
|
|
|
|
.input-with-icon input {
|
|
padding-left: 40px;
|
|
}
|
|
|
|
/* Textarea */
|
|
textarea {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 6px;
|
|
background: hsl(var(--background));
|
|
color: hsl(var(--foreground));
|
|
font-size: 14px;
|
|
font-family: inherit;
|
|
resize: vertical;
|
|
min-height: 80px;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
textarea:focus {
|
|
outline: none;
|
|
border-color: hsl(var(--primary));
|
|
box-shadow: 0 0 0 3px hsla(var(--primary) / 0.1);
|
|
}
|
|
|
|
textarea::placeholder {
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
/* Select */
|
|
select {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 6px;
|
|
background: hsl(var(--background));
|
|
color: hsl(var(--foreground));
|
|
font-size: 14px;
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
appearance: none;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 12px center;
|
|
padding-right: 36px;
|
|
}
|
|
|
|
select:focus {
|
|
outline: none;
|
|
border-color: hsl(var(--primary));
|
|
box-shadow: 0 0 0 3px hsla(var(--primary) / 0.1);
|
|
}
|
|
|
|
/* Checkbox */
|
|
.checkbox {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.checkbox input[type="checkbox"] {
|
|
width: 18px;
|
|
height: 18px;
|
|
border: 2px solid hsl(var(--border));
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
accent-color: hsl(var(--primary));
|
|
}
|
|
|
|
.checkbox span {
|
|
font-size: 14px;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
/* Radio */
|
|
.radio {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.radio input[type="radio"] {
|
|
width: 18px;
|
|
height: 18px;
|
|
cursor: pointer;
|
|
accent-color: hsl(var(--primary));
|
|
}
|
|
|
|
.radio span {
|
|
font-size: 14px;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
/* Toggle/Switch */
|
|
.toggle {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.toggle input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.toggle-track {
|
|
width: 44px;
|
|
height: 24px;
|
|
border-radius: 12px;
|
|
background: hsl(var(--muted));
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.toggle input:checked + .toggle-track {
|
|
background: hsl(var(--primary));
|
|
}
|
|
|
|
.toggle-thumb {
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: white;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.toggle input:checked ~ .toggle-thumb {
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
/* Form actions */
|
|
.form-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 12px;
|
|
padding-top: 16px;
|
|
margin-top: 16px;
|
|
border-top: 1px solid hsl(var(--border));
|
|
}
|
|
|
|
/* ============================================ */
|
|
/* MODALS */
|
|
/* ============================================ */
|
|
|
|
.modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1100;
|
|
padding: 16px;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.modal-overlay.show {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.modal {
|
|
width: 100%;
|
|
max-width: 520px;
|
|
max-height: calc(100vh - 32px);
|
|
background: var(--surface, #161616);
|
|
border: 1px solid var(--border, #2a2a2a);
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transform: scale(0.95) translateY(-10px);
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.modal-overlay.show .modal {
|
|
transform: scale(1) translateY(0);
|
|
}
|
|
|
|
/* Legacy support */
|
|
.modal.hidden {
|
|
display: none;
|
|
}
|
|
|
|
@keyframes modalFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.modal-content {
|
|
width: 100%;
|
|
max-width: 480px;
|
|
max-height: calc(100vh - 32px);
|
|
background: var(--surface, #161616);
|
|
border: 1px solid var(--border, #2a2a2a);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.modal-sm .modal-content {
|
|
max-width: 360px;
|
|
}
|
|
|
|
.modal-lg .modal-content {
|
|
max-width: 640px;
|
|
}
|
|
|
|
.modal-xl .modal-content {
|
|
max-width: 800px;
|
|
}
|
|
|
|
.modal-full .modal-content {
|
|
max-width: calc(100vw - 32px);
|
|
max-height: calc(100vh - 32px);
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20px 24px;
|
|
border-bottom: 1px solid var(--border, #2a2a2a);
|
|
}
|
|
|
|
.modal-header h3 {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: var(--text, #ffffff);
|
|
margin: 0;
|
|
}
|
|
|
|
.modal-close {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 6px;
|
|
color: var(--text-secondary, #888888);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.modal-close:hover {
|
|
background: var(--surface-hover, #1e1e1e);
|
|
color: var(--text, #ffffff);
|
|
}
|
|
|
|
.modal-body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 24px;
|
|
}
|
|
|
|
.modal-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 12px;
|
|
padding: 16px 24px;
|
|
border-top: 1px solid var(--border, #2a2a2a);
|
|
}
|
|
|
|
/* Form styles within modals */
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--text-secondary, #888888);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
padding: 12px 14px;
|
|
background: var(--bg, #0a0a0a);
|
|
border: 1px solid var(--border, #2a2a2a);
|
|
border-radius: 8px;
|
|
color: var(--text, #ffffff);
|
|
font-size: 14px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.form-input:focus {
|
|
outline: none;
|
|
border-color: var(--accent, #d4f505);
|
|
box-shadow: 0 0 0 3px rgba(212, 245, 5, 0.1);
|
|
}
|
|
|
|
.form-input::placeholder {
|
|
color: var(--text-tertiary, #666666);
|
|
}
|
|
|
|
textarea.form-input {
|
|
resize: vertical;
|
|
min-height: 80px;
|
|
}
|
|
|
|
select.form-input {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* ============================================ */
|
|
/* CARDS */
|
|
/* ============================================ */
|
|
|
|
.card {
|
|
background: hsl(var(--card));
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card-header {
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid hsl(var(--border));
|
|
}
|
|
|
|
.card-header h3,
|
|
.card-header h4 {
|
|
margin: 0;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 20px;
|
|
}
|
|
|
|
.card-footer {
|
|
padding: 16px 20px;
|
|
border-top: 1px solid hsl(var(--border));
|
|
background: hsl(var(--muted));
|
|
}
|
|
|
|
/* Clickable card */
|
|
.card-clickable {
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.card-clickable:hover {
|
|
border-color: hsl(var(--primary));
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px hsla(var(--foreground) / 0.08);
|
|
}
|
|
|
|
/* ============================================ */
|
|
/* BADGES & TAGS */
|
|
/* ============================================ */
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 4px 10px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
background: hsl(var(--muted));
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.badge-primary {
|
|
background: hsl(var(--primary));
|
|
color: hsl(var(--primary-foreground));
|
|
}
|
|
|
|
.badge-success {
|
|
background: hsl(var(--chart-2));
|
|
color: white;
|
|
}
|
|
|
|
.badge-warning {
|
|
background: hsl(var(--chart-3));
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.badge-danger {
|
|
background: hsl(var(--destructive));
|
|
color: hsl(var(--destructive-foreground));
|
|
}
|
|
|
|
.badge-sm {
|
|
padding: 2px 6px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
/* Tag (removable badge) */
|
|
.tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
background: hsl(var(--muted));
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.tag-remove {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 14px;
|
|
height: 14px;
|
|
border: none;
|
|
border-radius: 50%;
|
|
background: hsla(var(--foreground) / 0.1);
|
|
color: inherit;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.tag-remove:hover {
|
|
background: hsla(var(--foreground) / 0.2);
|
|
}
|
|
|
|
/* ============================================ */
|
|
/* TOOLTIPS */
|
|
/* ============================================ */
|
|
|
|
[data-tooltip] {
|
|
position: relative;
|
|
}
|
|
|
|
[data-tooltip]::after {
|
|
content: attr(data-tooltip);
|
|
position: absolute;
|
|
bottom: calc(100% + 8px);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
padding: 6px 10px;
|
|
border-radius: 4px;
|
|
background: hsl(var(--foreground));
|
|
color: hsl(var(--background));
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.15s ease;
|
|
pointer-events: none;
|
|
z-index: 100;
|
|
}
|
|
|
|
[data-tooltip]:hover::after {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
/* ============================================ */
|
|
/* DROPDOWNS */
|
|
/* ============================================ */
|
|
|
|
.dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
position: absolute;
|
|
top: calc(100% + 4px);
|
|
left: 0;
|
|
min-width: 180px;
|
|
background: hsl(var(--card));
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 8px;
|
|
box-shadow: 0 8px 24px hsla(var(--foreground) / 0.1);
|
|
padding: 4px;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translateY(-8px);
|
|
transition: all 0.15s ease;
|
|
z-index: 100;
|
|
}
|
|
|
|
.dropdown.open .dropdown-menu {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.dropdown-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
color: hsl(var(--foreground));
|
|
font-size: 14px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
transition: background 0.15s ease;
|
|
}
|
|
|
|
.dropdown-item:hover {
|
|
background: hsl(var(--accent));
|
|
}
|
|
|
|
.dropdown-item.danger {
|
|
color: hsl(var(--destructive));
|
|
}
|
|
|
|
.dropdown-divider {
|
|
height: 1px;
|
|
background: hsl(var(--border));
|
|
margin: 4px 0;
|
|
}
|
|
|
|
/* ============================================ */
|
|
/* TABS */
|
|
/* ============================================ */
|
|
|
|
.tabs {
|
|
display: flex;
|
|
border-bottom: 1px solid hsl(var(--border));
|
|
}
|
|
|
|
.tab {
|
|
padding: 12px 20px;
|
|
border: none;
|
|
border-bottom: 2px solid transparent;
|
|
background: transparent;
|
|
color: hsl(var(--muted-foreground));
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.tab:hover {
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.tab.active {
|
|
color: hsl(var(--primary));
|
|
border-bottom-color: hsl(var(--primary));
|
|
}
|
|
|
|
.tab-content {
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.tab-panel {
|
|
display: none;
|
|
}
|
|
|
|
.tab-panel.active {
|
|
display: block;
|
|
}
|
|
|
|
/* ============================================ */
|
|
/* ALERTS */
|
|
/* ============================================ */
|
|
|
|
.alert {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
padding: 16px;
|
|
border-radius: 8px;
|
|
border: 1px solid;
|
|
}
|
|
|
|
.alert-info {
|
|
background: hsla(var(--primary) / 0.1);
|
|
border-color: hsl(var(--primary));
|
|
color: hsl(var(--primary));
|
|
}
|
|
|
|
.alert-success {
|
|
background: hsla(var(--chart-2) / 0.1);
|
|
border-color: hsl(var(--chart-2));
|
|
color: hsl(var(--chart-2));
|
|
}
|
|
|
|
.alert-warning {
|
|
background: hsla(var(--chart-3) / 0.1);
|
|
border-color: hsl(var(--chart-3));
|
|
color: hsl(var(--chart-3));
|
|
}
|
|
|
|
.alert-danger {
|
|
background: hsla(var(--destructive) / 0.1);
|
|
border-color: hsl(var(--destructive));
|
|
color: hsl(var(--destructive));
|
|
}
|
|
|
|
.alert-icon {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.alert-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.alert-title {
|
|
font-weight: 600;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.alert-message {
|
|
font-size: 14px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* ============================================ */
|
|
/* LOADING STATES */
|
|
/* ============================================ */
|
|
|
|
.spinner {
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid hsl(var(--muted));
|
|
border-top-color: hsl(var(--primary));
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.spinner-sm {
|
|
width: 14px;
|
|
height: 14px;
|
|
border-width: 1.5px;
|
|
}
|
|
|
|
.spinner-lg {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-width: 3px;
|
|
}
|
|
|
|
/* Skeleton loading */
|
|
.skeleton {
|
|
background: linear-gradient(
|
|
90deg,
|
|
hsl(var(--muted)) 25%,
|
|
hsl(var(--accent)) 50%,
|
|
hsl(var(--muted)) 75%
|
|
);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.5s infinite;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% {
|
|
background-position: 200% 0;
|
|
}
|
|
100% {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
|
|
.skeleton-text {
|
|
height: 14px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.skeleton-title {
|
|
height: 20px;
|
|
width: 60%;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.skeleton-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* ============================================ */
|
|
/* EMPTY STATES */
|
|
/* ============================================ */
|
|
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 60px 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.empty-state-icon {
|
|
font-size: 48px;
|
|
margin-bottom: 16px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.empty-state-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.empty-state-message {
|
|
font-size: 14px;
|
|
color: hsl(var(--muted-foreground));
|
|
max-width: 300px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* ============================================ */
|
|
/* DIVIDERS */
|
|
/* ============================================ */
|
|
|
|
.divider {
|
|
height: 1px;
|
|
background: hsl(var(--border));
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.divider-vertical {
|
|
width: 1px;
|
|
height: 24px;
|
|
background: hsl(var(--border));
|
|
margin: 0 12px;
|
|
}
|
|
|
|
.divider-text {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.divider-text::before,
|
|
.divider-text::after {
|
|
content: "";
|
|
flex: 1;
|
|
height: 1px;
|
|
background: hsl(var(--border));
|
|
}
|
|
|
|
.divider-text span {
|
|
font-size: 12px;
|
|
color: hsl(var(--muted-foreground));
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
/* ============================================ */
|
|
/* UTILITIES */
|
|
/* ============================================ */
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
.text-muted {
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.text-primary {
|
|
color: hsl(var(--primary));
|
|
}
|
|
|
|
.text-success {
|
|
color: hsl(var(--chart-2));
|
|
}
|
|
|
|
.text-warning {
|
|
color: hsl(var(--chart-3));
|
|
}
|
|
|
|
.text-danger {
|
|
color: hsl(var(--destructive));
|
|
}
|
|
|
|
.truncate {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.flex-col {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.items-center {
|
|
align-items: center;
|
|
}
|
|
|
|
.justify-center {
|
|
justify-content: center;
|
|
}
|
|
|
|
.justify-between {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.gap-1 {
|
|
gap: 4px;
|
|
}
|
|
.gap-2 {
|
|
gap: 8px;
|
|
}
|
|
.gap-3 {
|
|
gap: 12px;
|
|
}
|
|
.gap-4 {
|
|
gap: 16px;
|
|
}
|
|
.gap-5 {
|
|
gap: 20px;
|
|
}
|
|
|
|
.p-1 {
|
|
padding: 4px;
|
|
}
|
|
.p-2 {
|
|
padding: 8px;
|
|
}
|
|
.p-3 {
|
|
padding: 12px;
|
|
}
|
|
.p-4 {
|
|
padding: 16px;
|
|
}
|
|
.p-5 {
|
|
padding: 20px;
|
|
}
|
|
|
|
.m-1 {
|
|
margin: 4px;
|
|
}
|
|
.m-2 {
|
|
margin: 8px;
|
|
}
|
|
.m-3 {
|
|
margin: 12px;
|
|
}
|
|
.m-4 {
|
|
margin: 16px;
|
|
}
|
|
.m-5 {
|
|
margin: 20px;
|
|
}
|
|
|
|
.rounded {
|
|
border-radius: 6px;
|
|
}
|
|
.rounded-lg {
|
|
border-radius: 12px;
|
|
}
|
|
.rounded-full {
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
.shadow-sm {
|
|
box-shadow: 0 1px 2px hsla(var(--foreground) / 0.05);
|
|
}
|
|
.shadow {
|
|
box-shadow: 0 2px 8px hsla(var(--foreground) / 0.08);
|
|
}
|
|
.shadow-lg {
|
|
box-shadow: 0 8px 24px hsla(var(--foreground) / 0.12);
|
|
}
|