HostXtra/notely
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Updated styling into seperate css files

Browse Source
This commit is contained in:
domrichardson
2026-03-29 15:28:44 +01:00
parent a081bff35b
commit a1dd2f2c00
42 changed files with 2480 additions and 2486 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
frontend/src/assets/styles/main.css
View File

@@ -1,42 +1,70 @@
:root {
--primary-color: #667eea;
--secondary-color: #764ba2;
--text-color: #333;
--bg-color: #f8f9fa;
--border-color: #dee2e6;
--color-primary: #667eea;
--color-primary-strong: #4f46a5;
--color-text: #333333;
--color-text-muted: #6c757d;
--color-bg: #f8f9fa;
--color-surface: #ffffff;
--color-surface-muted: #f1f3f5;
--color-border: #dee2e6;
--color-info: #748ffc;
--color-code-bg: #353943;
--color-code-text: #f9fafb;
--color-scroll-track: #f1f1f1;
--color-scroll-thumb: #888888;
--color-scroll-thumb-hover: #555555;
--primary-color: var(--color-primary);
--secondary-color: var(--color-primary-strong);
--text-color: var(--color-text);
--bg-color: var(--color-bg);
--border-color: var(--color-border);
}
[data-bs-theme="dark"] {
--text-color: #e2e8f0;
--bg-color: #1a1d23;
--border-color: #3a3f4b;
--color-text: #e2e8f0;
--color-text-muted: #94a3b8;
--color-bg: #1a1d23;
--color-surface: #21252e;
--color-surface-muted: #2d3748;
--color-border: #3a3f4b;
--color-info: #7aa2f7;
--color-code-bg: #2d3748;
--color-code-text: #e2e8f0;
--color-scroll-track: #2d3748;
--color-scroll-thumb: #4a5568;
--color-scroll-thumb-hover: #718096;
--text-color: var(--color-text);
--bg-color: var(--color-bg);
--border-color: var(--color-border);
}
[data-bs-theme="dark"] body {
background-color: #1a1d23;
color: #e2e8f0;
background-color: var(--color-bg);
color: var(--color-text);
}
[data-bs-theme="dark"] .sidebar {
background-color: #21252e !important;
border-color: #3a3f4b !important;
background-color: var(--color-surface) !important;
border-color: var(--color-border) !important;
}
[data-bs-theme="dark"] .toolbar {
background-color: #21252e;
border-color: #3a3f4b !important;
background-color: var(--color-surface);
border-color: var(--color-border) !important;
}
[data-bs-theme="dark"] .main-content {
background-color: #1a1d23;
background-color: var(--color-bg);
}
[data-bs-theme="dark"] .markdown-body table {
background: #21252e;
background: var(--color-surface);
}
[data-bs-theme="dark"] .markdown-body th {
background: #2a2f3a;
background: var(--color-surface-muted);
}
[data-bs-theme="dark"] .markdown-body tr:nth-child(even) td {
@@ -49,8 +77,8 @@
}
[data-bs-theme="dark"] .markdown-body :not(pre) > code {
background: #2d3748;
color: #e2e8f0;
background: var(--color-surface-muted);
color: var(--color-text);
}
[data-bs-theme="dark"] .markdown-body pre code {
@@ -59,20 +87,20 @@
}
[data-bs-theme="dark"] .markdown-body pre {
background: #2d3748;
color: #e2e8f0;
background: var(--color-code-bg);
color: var(--color-code-text);
}
[data-bs-theme="dark"] ::-webkit-scrollbar-track {
background: #2d3748;
background: var(--color-scroll-track);
}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
background: #4a5568;
background: var(--color-scroll-thumb);
}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
background: #718096;
background: var(--color-scroll-thumb-hover);
}
* {
@@ -99,7 +127,7 @@ body,
margin: 1rem 0;
border-collapse: collapse;
border-spacing: 0;
background: #fff;
background: var(--color-surface);
}
.markdown-body th,
@@ -126,7 +154,7 @@ body,
.markdown-body blockquote {
margin: 1rem 0;
padding: 0.75rem 1rem;
border-left: 4px solid #748ffc;
border-left: 4px solid var(--color-info);
background: #f8f9ff;
color: #334155;
}
@@ -139,8 +167,8 @@ body,
margin: 1rem 0;
padding: 1rem;
border-radius: 0.75rem;
background: #353943;
color: #f9fafb;
background: var(--color-code-bg);
color: var(--color-code-text);
overflow-x: auto;
}
@@ -155,7 +183,7 @@ body,
font-size: 0.95em;
padding: 0.1rem 0.3rem;
border-radius: 0.35rem;
background: #f1f3f5;
background: var(--color-surface-muted);
}
/* Scrollbar styling */
@@ -165,14 +193,14 @@ body,
}
::-webkit-scrollbar-track {
background: #f1f1f1;
background: var(--color-scroll-track);
}
::-webkit-scrollbar-thumb {
background: #888;
background: var(--color-scroll-thumb);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
background: var(--color-scroll-thumb-hover);
}