newznab-tmux/resources/css/csp-safe.css

/* Admin Dashboard - Recent Activity Styles */
.activity-item {
    transition: background-color 0.2s ease-in-out;
}

.activity-item:hover {
    transform: translateX(2px);
}

/* Chart Container Responsive Sizing */
.chart-container {
    position: relative;
    height: 16rem; /* 256px - updated for profile charts */
    width: 100%;
}

/* Ensure canvas fills container properly */
.chart-container canvas {
    max-height: 100%;
}

/* Admin dashboard specific chart height */
#adminDashboard .chart-container {
    height: 250px;
}

/* Smooth transitions for metric updates */
[data-metric] {
    transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

[data-metric].metric-updated {
    animation: pulse 0.5s ease-in-out;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Quick Links hover effects */
.quick-link-item {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.quick-link-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Profile Charts - Progress Bars */
.progress-bar {
    transition: width 0.3s ease-in-out;
    width: 0; /* Start at 0 for animation */
}

/* Profile Charts - API Token Scrollbar */
code.api-token {
    overflow-x: auto;
    word-break: break-all;
}

code.api-token::-webkit-scrollbar {
    height: 6px;
}

code.api-token::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

code.api-token::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 0, 0.3);
    border-radius: 3px;
}

code.api-token::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 255, 0, 0.5);
}
/* Profile Page Styles */

/* Tab content visibility */
.tab-content.hidden-by-default {
    display: none;
}

/* Progress bar animations */
.progress-bar {
    transition: width 0.3s ease-in-out;
}

/* Custom scrollbar for API token code blocks */
code.api-token {
    overflow-x: auto;
    word-break: break-all;
}

code.api-token::-webkit-scrollbar {
    height: 6px;
}

code.api-token::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

code.api-token::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 0, 0.3);
    border-radius: 3px;
}

code.api-token::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 255, 0, 0.5);
}