mirror of
https://github.com/Significant-Gravitas/AutoModerate.git
synced 2026-11-10 04:42:00 -10:00
Bentlybro
52d940dc23
APIUser model now computes stats directly from the database for accuracy, with new properties for current counts and days active. API documentation UI is improved with consistent code block styling, theme-aware code blocks, copy buttons, and example cards for cURL, JavaScript, and Python. Manual review templates updated to use new APIUser properties for displaying stats.
347 lines
8.2 KiB
CSS
347 lines
8.2 KiB
CSS
/* API Documentation specific styles */
|
|
.nav-link.active {
|
|
background-color: #007bff !important;
|
|
color: white !important;
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.nav-link {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
background-color: #f8f9fa;
|
|
border-radius: 0.375rem;
|
|
transform: translateX(2px);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
/* Smooth scroll offset for fixed navigation */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Enhanced Code blocks styling */
|
|
pre {
|
|
border-radius: 8px;
|
|
border: 1px solid #e9ecef;
|
|
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
|
position: relative;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
pre code {
|
|
font-size: 0.875rem;
|
|
line-height: 1.6;
|
|
font-weight: 400;
|
|
display: block;
|
|
padding: 1.25rem;
|
|
overflow-x: auto;
|
|
white-space: pre;
|
|
color: inherit;
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Light mode code styling - overridden to use consistent grey */
|
|
.code-block-light {
|
|
background: #f6f8fa !important;
|
|
border: 1px solid #d1d9e0 !important;
|
|
color: #24292f !important;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
|
|
}
|
|
|
|
.code-block-light code {
|
|
color: #24292f !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Dark mode code styling - overridden to use consistent grey */
|
|
.code-block-dark {
|
|
background: #f6f8fa !important;
|
|
border: 1px solid #d1d9e0 !important;
|
|
color: #24292f !important;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
|
|
}
|
|
|
|
.code-block-dark code {
|
|
color: #24292f !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Override Bootstrap's default code styling */
|
|
pre {
|
|
background: transparent !important;
|
|
border: none !important;
|
|
color: inherit !important;
|
|
}
|
|
|
|
pre code {
|
|
background: transparent !important;
|
|
color: inherit !important;
|
|
padding: 0 !important;
|
|
border: none !important;
|
|
}
|
|
|
|
/* Base code block styling - consistent grey background for all themes */
|
|
.code-block {
|
|
background: #f6f8fa !important;
|
|
border: 1px solid #d1d9e0 !important;
|
|
color: #24292f !important;
|
|
border-radius: 8px;
|
|
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
|
position: relative;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.code-block code {
|
|
font-size: 0.875rem;
|
|
line-height: 1.6;
|
|
font-weight: 400;
|
|
display: block;
|
|
padding: 1.25rem;
|
|
overflow-x: auto;
|
|
white-space: pre;
|
|
color: #24292f !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Syntax highlighting colors */
|
|
.code-block-light .token.string { color: #22c55e; }
|
|
.code-block-light .token.number { color: #3b82f6; }
|
|
.code-block-light .token.boolean { color: #8b5cf6; }
|
|
.code-block-light .token.null { color: #ef4444; }
|
|
.code-block-light .token.key { color: #0891b2; }
|
|
.code-block-light .token.punctuation { color: #64748b; }
|
|
|
|
.code-block-dark .token.string { color: #4ade80; }
|
|
.code-block-dark .token.number { color: #60a5fa; }
|
|
.code-block-dark .token.boolean { color: #a78bfa; }
|
|
.code-block-dark .token.null { color: #f87171; }
|
|
.code-block-dark .token.key { color: #06b6d4; }
|
|
.code-block-dark .token.punctuation { color: #94a3b8; }
|
|
|
|
/* Copy button styling */
|
|
.code-container {
|
|
position: relative;
|
|
}
|
|
|
|
.copy-btn {
|
|
position: absolute;
|
|
top: 0.75rem;
|
|
right: 0.75rem;
|
|
background: rgba(36, 41, 47, 0.8);
|
|
border: 1px solid rgba(36, 41, 47, 0.3);
|
|
color: #ffffff;
|
|
padding: 0.375rem 0.75rem;
|
|
border-radius: 4px;
|
|
font-size: 0.75rem;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
transition: all 0.2s ease;
|
|
backdrop-filter: blur(4px);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.code-container:hover .copy-btn {
|
|
opacity: 1;
|
|
}
|
|
|
|
.copy-btn:hover {
|
|
background: rgba(36, 41, 47, 0.9);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.copy-btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.copy-btn.copied {
|
|
background: #22c55e !important;
|
|
color: white !important;
|
|
border-color: #22c55e !important;
|
|
}
|
|
|
|
/* Inline code styling */
|
|
code:not(pre code) {
|
|
background-color: #f1f5f9;
|
|
color: #0f172a;
|
|
padding: 0.2rem 0.4rem;
|
|
border-radius: 3px;
|
|
font-size: 0.875em;
|
|
border: 1px solid #e2e8f0;
|
|
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
|
}
|
|
|
|
/* Remove Bootstrap's default bg-dark styling */
|
|
.bg-dark {
|
|
background: none !important;
|
|
}
|
|
|
|
.bg-dark pre {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Section spacing */
|
|
.card {
|
|
scroll-margin-top: 2rem;
|
|
}
|
|
|
|
/* Sticky sidebar */
|
|
@media (min-width: 768px) {
|
|
.sticky-sidebar {
|
|
position: sticky;
|
|
top: 2rem;
|
|
max-height: calc(100vh - 4rem);
|
|
overflow-y: auto;
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
}
|
|
|
|
.sticky-sidebar::-webkit-scrollbar {
|
|
display: none; /* Chrome, Safari and Opera */
|
|
}
|
|
}
|
|
|
|
/* Navigation highlight animation */
|
|
.nav-link.active {
|
|
animation: highlightNav 0.3s ease-in-out;
|
|
}
|
|
|
|
@keyframes highlightNav {
|
|
0% { opacity: 0.8; }
|
|
50% { opacity: 1; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
/* Dark mode specific overrides */
|
|
[data-bs-theme="dark"] code:not(pre code) {
|
|
background-color: #374151 !important;
|
|
color: #e5e7eb !important;
|
|
border-color: #4b5563 !important;
|
|
}
|
|
|
|
[data-bs-theme="dark"] .nav-link:hover {
|
|
background-color: #374151 !important;
|
|
}
|
|
|
|
[data-bs-theme="dark"] .copy-btn {
|
|
background: rgba(0, 0, 0, 0.3) !important;
|
|
border-color: rgba(255, 255, 255, 0.3) !important;
|
|
}
|
|
|
|
[data-bs-theme="dark"] .copy-btn:hover {
|
|
background: rgba(0, 0, 0, 0.5) !important;
|
|
}
|
|
|
|
/* Force all code blocks to use consistent grey styling regardless of theme */
|
|
[data-bs-theme="dark"] .code-block,
|
|
[data-bs-theme="dark"] .code-block-dark,
|
|
[data-bs-theme="dark"] .code-block-light {
|
|
background: #f6f8fa !important;
|
|
border: 1px solid #d1d9e0 !important;
|
|
color: #24292f !important;
|
|
}
|
|
|
|
[data-bs-theme="dark"] .code-block code,
|
|
[data-bs-theme="dark"] .code-block-dark code,
|
|
[data-bs-theme="dark"] .code-block-light code {
|
|
color: #24292f !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Force light mode code blocks to use consistent grey styling */
|
|
[data-bs-theme="light"] .code-block,
|
|
[data-bs-theme="light"] .code-block-light,
|
|
[data-bs-theme="light"] .code-block-dark,
|
|
:not([data-bs-theme="dark"]) .code-block,
|
|
:not([data-bs-theme="dark"]) .code-block-light,
|
|
:not([data-bs-theme="dark"]) .code-block-dark {
|
|
background: #f6f8fa !important;
|
|
border: 1px solid #d1d9e0 !important;
|
|
color: #24292f !important;
|
|
}
|
|
|
|
[data-bs-theme="light"] .code-block code,
|
|
[data-bs-theme="light"] .code-block-light code,
|
|
[data-bs-theme="light"] .code-block-dark code,
|
|
:not([data-bs-theme="dark"]) .code-block code,
|
|
:not([data-bs-theme="dark"]) .code-block-light code,
|
|
:not([data-bs-theme="dark"]) .code-block-dark code {
|
|
color: #24292f !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Enhanced table styling for API docs */
|
|
.table-striped > tbody > tr:nth-of-type(odd) > td {
|
|
background-color: rgba(0,0,0,0.02);
|
|
}
|
|
|
|
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td {
|
|
background-color: rgba(255,255,255,0.05);
|
|
}
|
|
|
|
/* Better spacing for method badges */
|
|
.badge {
|
|
font-weight: 500;
|
|
letter-spacing: 0.025em;
|
|
}
|
|
|
|
/* Improved card styling */
|
|
.card {
|
|
border-radius: 8px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
transition: box-shadow 0.2s ease;
|
|
}
|
|
|
|
[data-bs-theme="dark"] .card {
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.card:hover {
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
[data-bs-theme="dark"] .card:hover {
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.4);
|
|
}
|
|
|
|
/* Example card specific styling */
|
|
.example-card {
|
|
border: none;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.example-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
[data-bs-theme="dark"] .example-card {
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
[data-bs-theme="dark"] .example-card:hover {
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.example-card .card-header {
|
|
font-weight: 600;
|
|
border-bottom: 1px solid rgba(0,0,0,0.1);
|
|
}
|
|
|
|
[data-bs-theme="dark"] .example-card .card-header {
|
|
border-bottom: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
|
|
.example-card .code-block {
|
|
border-radius: 0 0 8px 8px;
|
|
border-top: none;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.example-card .code-block code {
|
|
font-size: 0.8rem;
|
|
line-height: 1.5;
|
|
}
|