/* Components CSS - Additional component styles */
/* Alert Components */
.alert {
padding: var(--space-4);
border-radius: var(--radius-lg);
margin-bottom: var(--space-4);
border-left: 4px solid;
}
.alert-info {
background-color: #dbeafe;
border-color: var(--primary-color);
color: #1e40af;
}
.alert-success {
background-color: #d1fae5;
border-color: var(--success-color);
color: #065f46;
}
.alert-warning {
background-color: #fef3c7;
border-color: var(--warning-color);
color: #92400e;
}
.alert-error {
background-color: #fee2e2;
border-color: var(--error-color);
color: #991b1b;
}
/* Badge Components */
.badge {
display: inline-flex;
align-items: center;
padding: var(--space-1) var(--space-3);
font-size: var(--text-sm);
font-weight: 500;
border-radius: var(--radius-full);
gap: var(--space-1);
}
.badge-primary {
background-color: var(--primary-color);
color: white;
}
.badge-secondary {
background-color: var(--gray-100);
color: var(--gray-800);
}
.badge-success {
background-color: var(--success-color);
color: white;
}
.badge-warning {
background-color: var(--warning-color);
color: white;
}
.badge-error {
background-color: var(--error-color);
color: white;
}
/* Card Components */
.card {
background-color: white;
border-radius: var(--radius-lg);
border: 1px solid var(--gray-200);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.card-header {
padding: var(--space-6);
border-bottom: 1px solid var(--gray-200);
background-color: var(--gray-50);
}
.card-body {
padding: var(--space-6);
}
.card-footer {
padding: var(--space-6);
border-top: 1px solid var(--gray-200);
background-color: var(--gray-50);
}
/* Loading Spinner */
.spinner {
width: 24px;
height: 24px;
border: 2px solid var(--gray-200);
border-top: 2px solid var(--primary-color);
border-radius: var(--radius-full);
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Tooltip */
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltip-text {
visibility: hidden;
width: 200px;
background-color: var(--gray-900);
color: white;
text-align: center;
border-radius: var(--radius-md);
padding: var(--space-2) var(--space-3);
position: absolute;
z-index: var(--z-tooltip);
bottom: 125%;
left: 50%;
margin-left: -100px;
font-size: var(--text-sm);
opacity: 0;
transition: opacity var(--transition-fast);
}
.tooltip .tooltip-text::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: var(--gray-900) transparent transparent transparent;
}
.tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
/* Modal */
.modal {
display: none;
position: fixed;
z-index: var(--z-modal);
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
}
.modal-content {
background-color: white;
margin: 10% auto;
padding: 0;
border-radius: var(--radius-xl);
width: 90%;
max-width: 600px;
box-shadow: var(--shadow-xl);
animation: modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn {
from {
transform: translateY(-50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.modal-header {
padding: var(--space-6);
border-bottom: 1px solid var(--gray-200);
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h3 {
margin: 0;
color: var(--gray-800);
}
.modal-close {
background: none;
border: none;
font-size: var(--text-2xl);
cursor: pointer;
color: var(--gray-500);
padding: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
transition: all var(--transition-fast);
}
.modal-close:hover {
background-color: var(--gray-100);
color: var(--gray-700);
}
.modal-body {
padding: var(--space-6);
}
.modal-footer {
padding: var(--space-6);
border-top: 1px solid var(--gray-200);
display: flex;
justify-content: flex-end;
gap: var(--space-3);
}
/* Dropdown */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 200px;
box-shadow: var(--shadow-lg);
border-radius: var(--radius-lg);
border: 1px solid var(--gray-200);
z-index: var(--z-dropdown);
overflow: hidden;
}
.dropdown-content a {
color: var(--gray-700);
padding: var(--space-3) var(--space-4);
text-decoration: none;
display: block;
transition: background-color var(--transition-fast);
}
.dropdown-content a:hover {
background-color: var(--gray-50);
color: var(--gray-900);
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Progress Bar */
.progress {
width: 100%;
height: 8px;
background-color: var(--gray-200);
border-radius: var(--radius-full);
overflow: hidden;
}
.progress-bar {
height: 100%;
background-color: var(--primary-color);
border-radius: var(--radius-full);
transition: width var(--transition-medium);
}
/* Table */
.table-container {
overflow-x: auto;
border-radius: var(--radius-lg);
border: 1px solid var(--gray-200);
}
.table {
width: 100%;
border-collapse: collapse;
background-color: white;
}
.table th,
.table td {
padding: var(--space-4);
text-align: left;
border-bottom: 1px solid var(--gray-200);
}
.table th {
background-color: var(--gray-50);
font-weight: 600;
color: var(--gray-800);
}
.table tr:hover {
background-color: var(--gray-50);
}
.table tr:last-child td {
border-bottom: none;
}
/* Accordion */
.accordion {
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
overflow: hidden;
}
.accordion-item {
border-bottom: 1px solid var(--gray-200);
}
.accordion-item:last-child {
border-bottom: none;
}
.accordion-header {
background-color: var(--gray-50);
padding: var(--space-4) var(--space-6);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color var(--transition-fast);
}
.accordion-header:hover {
background-color: var(--gray-100);
}
.accordion-header h3 {
margin: 0;
font-size: var(--text-lg);
color: var(--gray-800);
}
.accordion-icon {
font-size: var(--text-lg);
color: var(--gray-500);
transition: transform var(--transition-fast);
}
.accordion-content {
padding: var(--space-6);
background-color: white;
display: none;
}
.accordion-item.active .accordion-content {
display: block;
}
.accordion-item.active .accordion-icon {
transform: rotate(180deg);
}
/* Breadcrumb */
.breadcrumb {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-4) 0;
font-size: var(--text-sm);
}
.breadcrumb-item {
display: flex;
align-items: center;
gap: var(--space-2);
}
.breadcrumb-item:not(:last-child)::after {
content: "›";
color: var(--gray-400);
font-weight: 500;
}
.breadcrumb-item a {
color: var(--gray-600);
text-decoration: none;
}
.breadcrumb-item a:hover {
color: var(--primary-color);
}
.breadcrumb-item.active {
color: var(--gray-800);
font-weight: 500;
}
/* Search */
.search-container {
position: relative;
max-width: 400px;
}
.search-input {
width: 100%;
padding: var(--space-3) var(--space-4) var(--space-3) var(--space-12);
border: 1px solid var(--gray-300);
border-radius: var(--radius-lg);
font-size: var(--text-base);
transition: border-color var(--transition-fast);
}
.search-input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.search-icon {
position: absolute;
left: var(--space-4);
top: 50%;
transform: translateY(-50%);
color: var(--gray-400);
width: 20px;
height: 20px;
}
/* Tags */
.tag {
display: inline-block;
padding: var(--space-1) var(--space-2);
background-color: var(--gray-100);
color: var(--gray-700);
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: 500;
margin-right: var(--space-2);
margin-bottom: var(--space-2);
}
.tag-primary {
background-color: rgba(99, 102, 241, 0.1);
color: var(--primary-color);
}
.tag-success {
background-color: rgba(16, 185, 129, 0.1);
color: var(--success-color);
}
.tag-warning {
background-color: rgba(245, 158, 11, 0.1);
color: var(--warning-color);
}
.tag-error {
background-color: rgba(239, 68, 68, 0.1);
color: var(--error-color);
}
/* Syntax highlighting overrides for better theme integration */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #7c3aed;
}
.token.punctuation {
color: #a78bfa;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #f472b6;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #34d399;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #fbbf24;
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #60a5fa;
}
.token.function,
.token.class-name {
color: #a78bfa;
}
.token.regex,
.token.important,
.token.variable {
color: #fb7185;
}
