main.cssā¢23.6 kB
/* CSS Variables for theming */
:root[data-theme="dark"] {
--bg-primary: #1a1a1a;
--bg-secondary: #2d2d2d;
--bg-tertiary: #3a3a3a;
--text-primary: #e0e0e0;
--text-secondary: #a0a0a0;
--text-tertiary: #707070;
--border-color: #404040;
--accent-color: #4a9eff;
--accent-hover: #3a8eef;
--danger-color: #ff4a4a;
--danger-hover: #ef3a3a;
--success-color: #4aff4a;
--shadow: rgba(0, 0, 0, 0.3);
}
:root[data-theme="light"] {
--bg-primary: #ffffff;
--bg-secondary: #f5f5f5;
--bg-tertiary: #e8e8e8;
--text-primary: #1a1a1a;
--text-secondary: #4a4a4a;
--text-tertiary: #707070;
--border-color: #d0d0d0;
--accent-color: #2563eb;
--accent-hover: #1d4ed8;
--danger-color: #dc2626;
--danger-hover: #b91c1c;
--success-color: #16a34a;
--shadow: rgba(0, 0, 0, 0.1);
}
/* Reset and base styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
}
#root {
min-height: 100vh;
}
/* App layout */
.app {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.main {
flex: 1;
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 2rem 1rem;
}
/* Header */
.header {
background-color: var(--bg-secondary);
border-bottom: 1px solid var(--border-color);
padding: 1rem 0;
position: sticky;
top: 0;
z-index: 100;
}
.header-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
text-decoration: none;
}
.header-title:hover {
color: var(--accent-color);
}
.header-actions {
display: flex;
gap: 0.5rem;
}
/* Login page */
.login-container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--bg-primary);
padding: 1rem;
}
.login-box {
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 2rem;
width: 100%;
max-width: 400px;
box-shadow: 0 4px 6px var(--shadow);
}
.login-box h1 {
font-size: 2rem;
margin-bottom: 0.5rem;
text-align: center;
}
.login-subtitle {
color: var(--text-secondary);
text-align: center;
margin-bottom: 2rem;
}
.login-input {
width: 100%;
padding: 0.75rem;
font-size: 1rem;
background-color: var(--bg-primary);
color: var(--text-primary);
border: 1px solid var(--border-color);
border-radius: 4px;
margin-bottom: 1rem;
}
.login-input:focus {
outline: none;
border-color: var(--accent-color);
}
.login-button {
width: 100%;
padding: 0.75rem;
font-size: 1rem;
font-weight: 600;
background-color: var(--accent-color);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s;
}
.login-button:hover {
background-color: var(--accent-hover);
}
/* Buttons */
.button {
padding: 0.5rem 1rem;
font-size: 0.95rem;
font-weight: 500;
background-color: var(--bg-tertiary);
color: var(--text-primary);
border: 1px solid var(--border-color);
border-radius: 4px;
cursor: pointer;
transition: all 0.2s;
}
.button:hover {
background-color: var(--bg-secondary);
border-color: var(--accent-color);
}
.button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.button-primary {
background-color: var(--accent-color);
color: white;
border-color: var(--accent-color);
}
.button-primary:hover {
background-color: var(--accent-hover);
border-color: var(--accent-hover);
}
.button-secondary {
background-color: transparent;
}
.button-danger {
background-color: var(--danger-color);
color: white;
border-color: var(--danger-color);
}
.button-danger:hover {
background-color: var(--danger-hover);
border-color: var(--danger-hover);
}
.icon-button {
padding: 0.5rem;
font-size: 1.2rem;
background-color: transparent;
border: none;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.2s;
}
.icon-button:hover {
background-color: var(--bg-tertiary);
}
/* Info Popup */
.info-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.info-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 8px;
box-shadow: 0 8px 32px var(--shadow);
max-width: 900px;
width: 90%;
max-height: 85vh;
z-index: 1001;
display: flex;
flex-direction: column;
}
.info-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
border-bottom: 1px solid var(--border-color);
background-color: var(--bg-secondary);
border-radius: 8px 8px 0 0;
}
.info-header h2 {
margin: 0;
font-size: 1.5rem;
}
.info-close {
background: none;
border: none;
font-size: 1.5rem;
color: var(--text-secondary);
cursor: pointer;
padding: 0.25rem 0.5rem;
border-radius: 4px;
transition: all 0.2s;
}
.info-close:hover {
background-color: var(--bg-tertiary);
color: var(--text-primary);
}
.info-content {
overflow-y: auto;
padding: 1.5rem;
}
.info-section {
margin-bottom: 2rem;
}
.info-section:last-child {
margin-bottom: 0;
}
.info-section h3 {
font-size: 1.25rem;
margin-bottom: 1rem;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 0.5rem;
}
.info-section p {
color: var(--text-secondary);
margin-bottom: 1rem;
line-height: 1.6;
}
.info-code {
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 1rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.info-code pre {
margin: 0;
font-family: 'Courier New', monospace;
font-size: 0.9rem;
color: var(--text-primary);
line-height: 1.5;
}
.info-detail {
background-color: var(--bg-secondary);
border-left: 3px solid var(--accent-color);
padding: 1rem;
margin-bottom: 1rem;
border-radius: 0 4px 4px 0;
line-height: 1.8;
}
.info-detail code {
background-color: var(--bg-tertiary);
padding: 0.2rem 0.4rem;
border-radius: 3px;
font-size: 0.9em;
}
.info-list {
list-style: none;
padding: 0;
}
.info-list li {
background-color: var(--bg-secondary);
padding: 0.75rem;
margin-bottom: 0.5rem;
border-radius: 4px;
border-left: 3px solid var(--accent-color);
}
.info-list code {
background-color: var(--bg-tertiary);
padding: 0.2rem 0.4rem;
border-radius: 3px;
font-weight: 600;
color: var(--accent-color);
}
.api-endpoint {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
margin-bottom: 0.5rem;
background-color: var(--bg-secondary);
border-radius: 4px;
flex-wrap: wrap;
}
.api-method {
font-weight: 700;
padding: 0.25rem 0.5rem;
border-radius: 3px;
font-size: 0.85rem;
min-width: 60px;
text-align: center;
color: white;
}
.api-method.get {
background-color: #4a9eff;
}
.api-method.post {
background-color: #16a34a;
}
.api-method.put {
background-color: #f59e0b;
}
.api-method.delete {
background-color: #dc2626;
}
.api-endpoint code {
flex: 1;
min-width: 200px;
background-color: var(--bg-tertiary);
padding: 0.25rem 0.5rem;
border-radius: 3px;
font-size: 0.9rem;
}
.api-desc {
color: var(--text-secondary);
font-size: 0.9rem;
font-style: italic;
}
.example-block {
margin-bottom: 1.5rem;
}
.example-block h4 {
font-size: 1rem;
margin-bottom: 0.5rem;
color: var(--text-primary);
}
/* Responsive info popup */
@media (max-width: 768px) {
.info-popup {
width: 95%;
max-height: 90vh;
}
.info-header {
padding: 1rem;
}
.info-header h2 {
font-size: 1.25rem;
}
.info-content {
padding: 1rem;
}
.api-endpoint {
flex-direction: column;
align-items: flex-start;
}
.api-endpoint code {
width: 100%;
min-width: 0;
}
.info-code pre {
font-size: 0.8rem;
}
}
/* Page layout */
.page {
width: 100%;
}
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.page-header h1 {
font-size: 2rem;
}
/* Search form */
.search-form {
display: flex;
gap: 0.5rem;
margin-bottom: 2rem;
}
.search-input {
flex: 1;
padding: 0.75rem;
font-size: 1rem;
background-color: var(--bg-secondary);
color: var(--text-primary);
border: 1px solid var(--border-color);
border-radius: 4px;
}
.search-input:focus {
outline: none;
border-color: var(--accent-color);
}
/* Article list */
.article-list {
display: grid;
gap: 1rem;
}
.article-item {
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 1rem;
cursor: pointer;
transition: all 0.2s;
}
.article-item:hover {
border-color: var(--accent-color);
box-shadow: 0 2px 8px var(--shadow);
transform: translateY(-2px);
}
.article-item-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.article-item-title {
font-size: 1.25rem;
color: var(--text-primary);
margin: 0;
}
.article-item-date {
font-size: 0.9rem;
color: var(--text-secondary);
}
/* Article view */
.article-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
gap: 1rem;
}
.article-actions {
display: flex;
gap: 0.5rem;
}
.article-content {
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 2rem;
}
.article-content h1 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
.article-date {
color: var(--text-secondary);
font-size: 0.95rem;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border-color);
}
/* Markdown content */
.markdown-content {
line-height: 1.8;
}
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
margin-top: 1.5rem;
margin-bottom: 1rem;
font-weight: 600;
}
.markdown-content h1 { font-size: 2rem; }
.markdown-content h2 { font-size: 1.75rem; }
.markdown-content h3 { font-size: 1.5rem; }
.markdown-content h4 { font-size: 1.25rem; }
.markdown-content h5 { font-size: 1.1rem; }
.markdown-content h6 { font-size: 1rem; }
.markdown-content p {
margin-bottom: 1rem;
}
.markdown-content ul,
.markdown-content ol {
margin-bottom: 1rem;
padding-left: 2rem;
}
.markdown-content li {
margin-bottom: 0.5rem;
}
.markdown-content code {
background-color: var(--bg-tertiary);
padding: 0.2rem 0.4rem;
border-radius: 3px;
font-family: 'Courier New', monospace;
font-size: 0.9em;
}
.markdown-content pre {
background-color: var(--bg-tertiary);
padding: 1rem;
border-radius: 4px;
overflow-x: auto;
margin-bottom: 1rem;
}
.markdown-content pre code {
background-color: transparent;
padding: 0;
}
.markdown-content blockquote {
border-left: 4px solid var(--accent-color);
padding-left: 1rem;
margin: 1rem 0;
color: var(--text-secondary);
}
.markdown-content a {
color: var(--accent-color);
text-decoration: none;
}
.markdown-content a:hover {
text-decoration: underline;
}
.markdown-content img {
max-width: 100%;
height: auto;
border-radius: 4px;
margin: 1rem 0;
}
.markdown-content hr {
border: none;
border-top: 1px solid var(--border-color);
margin: 2rem 0;
}
.markdown-content table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
}
.markdown-content th,
.markdown-content td {
border: 1px solid var(--border-color);
padding: 0.5rem;
text-align: left;
}
.markdown-content th {
background-color: var(--bg-tertiary);
font-weight: 600;
}
/* Edit page */
.edit-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.edit-section,
.preview-section {
display: flex;
flex-direction: column;
}
.edit-label {
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--text-primary);
}
.edit-title-input {
width: 100%;
padding: 0.75rem;
font-size: 1.25rem;
font-weight: 600;
background-color: var(--bg-secondary);
color: var(--text-primary);
border: 1px solid var(--border-color);
border-radius: 4px;
margin-bottom: 1.5rem;
}
.edit-title-input:focus {
outline: none;
border-color: var(--accent-color);
}
.edit-textarea {
flex: 1;
min-height: 500px;
padding: 1rem;
font-size: 1rem;
font-family: 'Courier New', monospace;
background-color: var(--bg-secondary);
color: var(--text-primary);
border: 1px solid var(--border-color);
border-radius: 4px;
resize: vertical;
line-height: 1.6;
}
.edit-textarea:focus {
outline: none;
border-color: var(--accent-color);
}
.preview-content {
flex: 1;
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 2rem;
overflow-y: auto;
min-height: 500px;
}
.preview-content h1 {
font-size: 2rem;
margin-bottom: 1rem;
}
/* Utility classes */
.loading {
text-align: center;
padding: 2rem;
color: var(--text-secondary);
}
.error-message {
background-color: var(--danger-color);
color: white;
padding: 1rem;
border-radius: 4px;
margin-bottom: 1rem;
}
.empty-state {
text-align: center;
padding: 3rem;
color: var(--text-secondary);
}
/* Responsive design */
@media (max-width: 768px) {
.main {
padding: 1rem;
}
.page-header {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.search-form {
flex-direction: column;
}
.article-header {
flex-direction: column;
align-items: flex-start;
}
.article-actions {
width: 100%;
}
.article-actions .button {
flex: 1;
}
.edit-container {
grid-template-columns: 1fr;
}
.preview-section {
display: none;
}
.article-content {
padding: 1.5rem;
}
.article-content h1 {
font-size: 2rem;
}
.header-title {
font-size: 1.25rem;
}
}
@media (max-width: 480px) {
.article-content h1 {
font-size: 1.75rem;
}
.markdown-content h1 { font-size: 1.75rem; }
.markdown-content h2 { font-size: 1.5rem; }
.markdown-content h3 { font-size: 1.25rem; }
}
/* Mermaid diagram styles */
.mermaid-container {
position: relative;
margin: 1.5rem 0;
border: 1px solid var(--border-color);
border-radius: 8px;
background-color: var(--bg-secondary);
padding: 1rem;
}
.mermaid-controls {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
justify-content: flex-end;
}
.mermaid-button {
padding: 0.5rem 1rem;
background-color: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: 4px;
color: var(--text-primary);
cursor: pointer;
font-size: 0.875rem;
transition: background-color 0.2s;
}
.mermaid-button:hover {
background-color: var(--accent-color);
color: white;
}
.mermaid-diagram {
display: flex;
justify-content: center;
align-items: center;
overflow-x: auto;
padding: 1rem;
background-color: var(--bg-primary);
border-radius: 4px;
}
.mermaid-diagram svg {
max-width: 100%;
height: auto;
}
.mermaid-error {
background-color: var(--danger-color);
color: white;
padding: 1rem;
border-radius: 4px;
margin: 1rem 0;
}
.mermaid-error pre {
background-color: rgba(0, 0, 0, 0.2);
padding: 0.5rem;
border-radius: 4px;
margin-top: 0.5rem;
overflow-x: auto;
}
/* Mermaid expanded/popout overlay */
.mermaid-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.9);
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
}
.mermaid-expanded {
background-color: var(--bg-primary);
border: none;
border-radius: 0;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
box-shadow: none;
}
.mermaid-expanded-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--border-color);
background-color: var(--bg-secondary);
flex-shrink: 0;
}
.mermaid-expanded-header h3 {
margin: 0;
font-size: 1.25rem;
color: var(--text-primary);
}
.mermaid-expanded-controls {
display: flex;
gap: 0.5rem;
}
.mermaid-expanded-content {
padding: 2rem;
overflow: auto;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
min-height: 0;
}
.mermaid-expanded-content svg {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
cursor: move;
}
/* Responsive Mermaid styles */
@media (max-width: 768px) {
.mermaid-overlay {
padding: 0;
}
.mermaid-expanded {
width: 100vw;
height: 100vh;
border-radius: 0;
}
.mermaid-expanded-header {
padding: 0.75rem 1rem;
}
.mermaid-expanded-header h3 {
font-size: 1rem;
}
.mermaid-expanded-content {
padding: 1rem;
}
.mermaid-controls {
flex-wrap: wrap;
}
.mermaid-button {
font-size: 0.75rem;
padding: 0.4rem 0.8rem;
}
}
/* Semantic Search Styles */
.search-mode-toggle {
display: flex;
gap: 1rem;
margin-bottom: 0.75rem;
}
.search-mode-toggle label {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-size: 0.9rem;
color: var(--text-secondary);
}
.search-mode-toggle input[type="radio"] {
cursor: pointer;
}
.search-mode-toggle input[type="radio"]:checked + label,
.search-mode-toggle label:has(input[type="radio"]:checked) {
color: var(--accent-color);
font-weight: 500;
}
.search-results {
display: flex;
flex-direction: column;
gap: 1rem;
}
.search-result-item {
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 1rem;
cursor: pointer;
transition: all 0.2s ease;
}
.search-result-item:hover {
background-color: var(--bg-tertiary);
border-color: var(--accent-color);
box-shadow: 0 2px 8px var(--shadow);
}
.search-result-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.search-result-header h3 {
font-size: 1.1rem;
color: var(--text-primary);
margin: 0;
}
.search-result-score {
background-color: var(--accent-color);
color: white;
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.85rem;
font-weight: 500;
}
.search-result-path {
color: var(--text-tertiary);
font-size: 0.85rem;
margin-bottom: 0.5rem;
font-style: italic;
}
.search-result-snippet {
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.5;
margin: 0;
}
/* Page Header Actions */
.page-header-actions {
display: flex;
gap: 0.5rem;
align-items: center;
}
/* RAG Status Page Styles */
.rag-status-container {
display: flex;
flex-direction: column;
gap: 2rem;
}
.rag-status-disabled {
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 2rem;
text-align: center;
}
.rag-status-disabled p {
margin: 1rem 0;
}
.rag-status-disabled code {
background-color: var(--bg-tertiary);
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-family: 'Courier New', monospace;
}
.rag-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.rag-stat-card {
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 1.5rem;
text-align: center;
}
.rag-stat-value {
font-size: 2rem;
font-weight: bold;
color: var(--accent-color);
margin-bottom: 0.5rem;
}
.rag-stat-label {
color: var(--text-secondary);
font-size: 0.9rem;
}
.rag-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.rag-actions .button {
flex: 1;
min-width: 200px;
}
.rag-section {
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 1.5rem;
}
.rag-section h2 {
font-size: 1.2rem;
margin-bottom: 1rem;
color: var(--text-primary);
}
.rag-file-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
max-height: 400px;
overflow-y: auto;
}
.rag-file-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
background-color: var(--bg-tertiary);
border-radius: 4px;
transition: background-color 0.2s ease;
}
.rag-file-item:hover {
background-color: var(--bg-primary);
}
.rag-file-item.indexed .file-icon {
color: var(--success-color);
}
.rag-file-item.unindexed .file-icon {
color: var(--text-tertiary);
}
.rag-file-item .file-name {
flex: 1;
color: var(--text-primary);
font-family: 'Courier New', monospace;
font-size: 0.9rem;
}
.rag-file-item .file-status {
color: var(--text-tertiary);
font-size: 0.85rem;
font-style: italic;
}
.rag-file-item .file-chunks {
color: var(--accent-color);
font-size: 0.85rem;
font-weight: 500;
}
.success-message {
background-color: rgba(74, 255, 74, 0.1);
border: 1px solid var(--success-color);
color: var(--success-color);
padding: 1rem;
border-radius: 8px;
margin-bottom: 1rem;
}
/* Pagination Controls */
.pagination-controls {
margin-top: 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
}
.pagination-info {
color: var(--text-secondary);
font-size: 0.9rem;
}
.pagination-size-selector {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-secondary);
font-size: 0.9rem;
}
.page-size-select {
background-color: var(--bg-secondary);
color: var(--text-primary);
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 0.5rem;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s ease;
}
.page-size-select:hover {
border-color: var(--accent-color);
}
.page-size-select:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.2);
}
.pagination-buttons {
display: flex;
gap: 0.5rem;
align-items: center;
flex-wrap: wrap;
justify-content: center;
}
.page-numbers {
display: flex;
gap: 0.25rem;
align-items: center;
}
.page-number {
min-width: 2.5rem;
padding: 0.5rem 0.75rem;
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
}
.page-number:hover:not(.active) {
background-color: var(--bg-tertiary);
border-color: var(--accent-color);
}
.page-number.active {
background-color: var(--accent-color);
color: white;
border-color: var(--accent-color);
font-weight: 600;
}
.page-number.active:hover {
background-color: var(--accent-hover);
}
.page-ellipsis {
padding: 0.5rem 0.25rem;
color: var(--text-tertiary);
}
.pagination-buttons .button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
@media (max-width: 768px) {
.page-header-actions {
flex-direction: column;
width: 100%;
}
.page-header-actions .button {
width: 100%;
}
.rag-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.rag-actions {
flex-direction: column;
}
.rag-actions .button {
width: 100%;
}
.pagination-controls {
gap: 0.75rem;
}
.pagination-buttons {
width: 100%;
}
.page-numbers {
flex-wrap: wrap;
}
.page-number {
min-width: 2rem;
padding: 0.4rem 0.6rem;
font-size: 0.85rem;
}
}