silberengel
/
aitherboard
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

theme adjustments

master
Silberengel 1 month ago
parent
b673cc4bc0
commit
ede9a71243
11 changed files with 372 additions and 51 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 108
      src/app.css
  2. 8
      src/lib/components/content/EmojiPicker.svelte
  3. 32
      src/lib/components/content/GifPicker.svelte
  4. 84
      src/lib/components/modals/PublicationStatusModal.svelte
  5. 22
      src/lib/components/ui/Icon.svelte
  6. 19
      src/lib/components/ui/IconButton.svelte
  7. 8
      src/lib/components/write/AdvancedEditor.svelte
  8. 79
      src/lib/components/write/CreateEventForm.svelte
  9. 54
      src/lib/modules/comments/CommentForm.svelte
  10. 4
      src/lib/modules/reactions/FeedReactionButtons.svelte
  11. 5
      src/lib/modules/rss/RSSCommentForm.svelte

108
src/app.css
Unescape View File

@ -230,12 +230,39 @@ main { @@ -230,12 +230,39 @@ main {
cursor: pointer;
}
:global(.dark) .write-button {
border-color: var(--fog-dark-border, #374151);
background: var(--fog-dark-surface, #1e293b);
background: var(--fog-dark-surface, #1e293b); /* Use surface color for contrast with page background */
color: var(--fog-dark-text, #f9fafb);
}
/* Ensure icon inherits color - the SVG's stroke="currentColor" will use this */
.write-button :global(.icon-wrapper) {
color: inherit;
}
/* Directly set stroke color on SVG paths for write-button */
/* This ensures the icon is visible even if currentColor doesn't resolve correctly */
.write-button :global(.icon-wrapper svg[stroke="currentColor"]),
.write-button :global(.icon-wrapper svg[stroke="currentColor"] path) {
stroke: currentColor;
fill: none;
}
/* Ensure write-button icon is always visible in dark mode */
:global(.dark) .write-button :global(.icon-wrapper) {
color: var(--fog-dark-text, #f9fafb);
}
/* Directly set stroke color on SVG paths for write-button in dark mode */
/* Use !important to override any conflicting rules */
:global(.dark) .write-button :global(.icon-wrapper svg[stroke="currentColor"]),
:global(.dark) .write-button :global(.icon-wrapper svg[stroke="currentColor"] path) {
stroke: var(--fog-dark-text, #f9fafb) !important;
fill: none !important;
}
.write-button:hover {
background: var(--fog-highlight, #f3f4f6);
border-color: var(--fog-accent, #64748b);
@ -1871,3 +1898,82 @@ audio { @@ -1871,3 +1898,82 @@ audio {
transition-duration: 0.01ms !important;
}
}
/* Publish Button Theme Support */
/* forum Theme - Publish Button */
[data-design-theme="forum"] .publish-button,
[data-design-theme="forum"] .republish-button {
background-color: #ff4500 !important; /* forum orange */
color: #ffffff !important; /* White text on orange for good contrast */
border: none !important;
}
[data-design-theme="forum"] .publish-button:hover:not(:disabled),
[data-design-theme="forum"] .republish-button:hover:not(:disabled) {
background-color: #d93a00 !important; /* Darker orange on hover */
opacity: 1 !important; /* Override opacity for better visibility */
}
[data-design-theme="forum"].dark .publish-button,
[data-design-theme="forum"].dark .republish-button {
background-color: #ff4500 !important; /* forum orange (same in dark mode) */
color: #ffffff !important; /* White text on orange */
}
[data-design-theme="forum"].dark .publish-button:hover:not(:disabled),
[data-design-theme="forum"].dark .republish-button:hover:not(:disabled) {
background-color: #ff6b35 !important; /* Lighter orange on hover in dark mode */
opacity: 1 !important;
}
/* Terminal Theme - Publish Button */
[data-design-theme="terminal"] .publish-button,
[data-design-theme="terminal"] .republish-button {
background-color: rgba(0, 255, 0, 0.2) !important; /* Green background */
color: #00ff00 !important; /* Green text */
border: 2px solid #00ff00 !important; /* Green border */
box-shadow: 0 0 10px rgba(0, 255, 0, 0.5) !important; /* Green glow */
text-shadow: 0 0 5px rgba(0, 255, 0, 0.8) !important; /* Green text glow */
}
[data-design-theme="terminal"] .publish-button:hover:not(:disabled),
[data-design-theme="terminal"] .republish-button:hover:not(:disabled) {
background-color: rgba(0, 255, 0, 0.3) !important; /* Brighter green on hover */
box-shadow: 0 0 15px rgba(0, 255, 0, 0.8) !important; /* Stronger glow */
text-shadow: 0 0 8px rgba(0, 255, 0, 1) !important; /* Stronger text glow */
opacity: 1 !important; /* Override opacity */
}
[data-design-theme="terminal"] .publish-button:disabled,
[data-design-theme="terminal"] .republish-button:disabled {
opacity: 0.4 !important; /* Reduced opacity for disabled state */
cursor: not-allowed !important;
}
/* socialmedia Theme - Publish Button */
[data-design-theme="socialmedia"] .publish-button,
[data-design-theme="socialmedia"] .republish-button {
background-color: #1d9bf0 !important; /* socialmedia blue */
color: #ffffff !important; /* White text on blue for good contrast */
border: none !important;
border-radius: 9999px !important; /* Rounded pill shape */
font-weight: 700 !important;
}
[data-design-theme="socialmedia"] .publish-button:hover:not(:disabled),
[data-design-theme="socialmedia"] .republish-button:hover:not(:disabled) {
background-color: #1a8cd8 !important; /* Darker blue on hover */
opacity: 1 !important; /* Override opacity */
}
[data-design-theme="socialmedia"].dark .publish-button,
[data-design-theme="socialmedia"].dark .republish-button {
background-color: #1d9bf0 !important; /* socialmedia blue (same in dark mode) */
color: #ffffff !important; /* White text on blue */
}
[data-design-theme="socialmedia"].dark .publish-button:hover:not(:disabled),
[data-design-theme="socialmedia"].dark .republish-button:hover:not(:disabled) {
background-color: #1a8cd8 !important; /* Darker blue on hover */
opacity: 1 !important;
}

8
src/lib/components/content/EmojiPicker.svelte
Unescape View File

@ -602,14 +602,20 @@ @@ -602,14 +602,20 @@
.emoji-footer-button {
padding: 0.5rem 1rem;
background: var(--fog-accent, #64748b);
color: white;
color: #ffffff; /* White text on accent background for good contrast */
border: none;
border-radius: 0.375rem;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
transition: opacity 0.2s;
}
:global(.dark) .emoji-footer-button {
background: var(--fog-dark-accent, #94a3b8);
color: #ffffff; /* White text on dark accent for good contrast */
}
.emoji-footer-button:hover:not(:disabled) {
opacity: 0.9;
}

32
src/lib/components/content/GifPicker.svelte
Unescape View File

@ -807,14 +807,20 @@ @@ -807,14 +807,20 @@
margin-top: 1rem;
padding: 0.5rem 1rem;
background: var(--fog-accent, #64748b);
color: white;
color: #ffffff; /* White text on accent background for good contrast */
border: none;
border-radius: 0.375rem;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
transition: opacity 0.2s;
}
:global(.dark) .retry-button {
background: var(--fog-dark-accent, #94a3b8);
color: #ffffff; /* White text on dark accent for good contrast */
}
.retry-button:hover {
opacity: 0.9;
}
@ -898,14 +904,20 @@ @@ -898,14 +904,20 @@
.gif-footer-button {
padding: 0.5rem 1rem;
background: var(--fog-accent, #64748b);
color: white;
color: #ffffff; /* White text on accent background for good contrast */
border: none;
border-radius: 0.375rem;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
transition: opacity 0.2s;
}
:global(.dark) .gif-footer-button {
background: var(--fog-dark-accent, #94a3b8);
color: #ffffff; /* White text on dark accent for good contrast */
}
.gif-footer-button:hover:not(:disabled) {
opacity: 0.9;
}
@ -1085,16 +1097,28 @@ @@ -1085,16 +1097,28 @@
.metadata-button.cancel:hover {
background: var(--fog-accent, #64748b);
color: white;
color: #ffffff; /* White text on accent background for good contrast */
border-color: var(--fog-accent, #64748b);
}
:global(.dark) .metadata-button.cancel:hover {
background: var(--fog-dark-accent, #94a3b8);
color: #ffffff; /* White text on dark accent for good contrast */
border-color: var(--fog-dark-accent, #94a3b8);
}
.metadata-button.publish {
background: var(--fog-accent, #64748b);
color: white;
color: #ffffff; /* White text on accent background for good contrast */
border-color: var(--fog-accent, #64748b);
}
:global(.dark) .metadata-button.publish {
background: var(--fog-dark-accent, #94a3b8);
color: #ffffff; /* White text on dark accent for good contrast */
border-color: var(--fog-dark-accent, #94a3b8);
}
.metadata-button.publish:hover:not(:disabled) {
opacity: 0.9;
}

84
src/lib/components/modals/PublicationStatusModal.svelte
Unescape View File

@ -175,6 +175,17 @@ @@ -175,6 +175,17 @@
border-bottom-color: #475569;
}
.modal-header h2 {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--fog-text, #1f2937);
}
:global(.dark) .modal-header h2 {
color: var(--fog-dark-text, #f1f5f9);
}
.close-button {
background: none;
border: none;
@ -183,10 +194,35 @@ @@ -183,10 +194,35 @@
padding: 0;
width: 2rem;
height: 2rem;
color: var(--fog-text, #64748b);
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.25rem;
transition: background-color 0.2s, color 0.2s;
}
.close-button:hover {
background: var(--fog-highlight, #e2e8f0);
color: var(--fog-text, #1e2937);
}
:global(.dark) .close-button {
color: var(--fog-dark-text, #94a3b8);
}
:global(.dark) .close-button:hover {
background: var(--fog-dark-highlight, #334155);
color: var(--fog-dark-text, #f1f5f9);
}
.modal-body {
padding: 1rem;
color: var(--fog-text, #1f2937);
}
:global(.dark) .modal-body {
color: var(--fog-dark-text, #f1f5f9);
}
.success-section,
@ -196,10 +232,24 @@ @@ -196,10 +232,24 @@
.success-section h3 {
color: #64748b;
margin: 0 0 0.5rem 0;
font-size: 1rem;
font-weight: 600;
}
:global(.dark) .success-section h3 {
color: #94a3b8;
}
.failed-section h3 {
color: #dc2626;
margin: 0 0 0.5rem 0;
font-size: 1rem;
font-weight: 600;
}
:global(.dark) .failed-section h3 {
color: #f87171;
}
.modal-body ul {
@ -210,10 +260,28 @@ @@ -210,10 +260,28 @@
.modal-body li {
padding: 0.25rem 0;
color: var(--fog-text, #1f2937);
}
:global(.dark) .modal-body li {
color: var(--fog-dark-text, #f1f5f9);
}
.modal-body li strong {
color: var(--fog-text, #1f2937);
}
:global(.dark) .modal-body li strong {
color: var(--fog-dark-text, #f1f5f9);
}
.error-message {
word-break: break-word;
color: var(--fog-text, #1f2937);
}
:global(.dark) .error-message {
color: var(--fog-dark-text, #f1f5f9);
}
.error-link {
@ -246,15 +314,25 @@ @@ -246,15 +314,25 @@
.modal-footer button {
padding: 0.5rem 1rem;
background: #94a3b8;
color: white;
background: var(--fog-accent, #64748b);
color: #ffffff; /* White text on accent background for good contrast */
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s;
font-weight: 500;
}
.modal-footer button:hover {
background: #64748b;
background: var(--fog-accent, #475569);
}
:global(.dark) .modal-footer button {
background: var(--fog-dark-accent, #64748b);
color: #ffffff; /* White text on dark accent for good contrast */
}
:global(.dark) .modal-footer button:hover {
background: var(--fog-dark-accent, #94a3b8);
}
</style>

22
src/lib/components/ui/Icon.svelte
Unescape View File

@ -31,7 +31,7 @@ @@ -31,7 +31,7 @@
{#if svgContent}
<div
class="icon-wrapper {className}"
style="width: {sizeValue}; height: {sizeValue}; color: currentColor;"
style="width: {sizeValue}; height: {sizeValue};"
>
{@html svgContent}
</div>
@ -48,12 +48,32 @@ @@ -48,12 +48,32 @@
display: inline-block;
vertical-align: middle;
flex-shrink: 0;
/* Ensure color is set so SVG's currentColor resolves */
color: inherit;
}
.icon-wrapper :global(svg) {
width: 100%;
height: 100%;
display: block;
/* Ensure SVG inherits color so currentColor resolves correctly */
color: inherit;
}
/* Ensure stroke-only SVGs don't get filled */
.icon-wrapper :global(svg[fill="none"]) {
fill: none;
}
/* Ensure stroke="currentColor" SVGs use the wrapper's color */
.icon-wrapper :global(svg[stroke="currentColor"]) {
stroke: currentColor;
}
/* For path elements in stroke-only SVGs, ensure fill stays none */
.icon-wrapper :global(svg[fill="none"] path),
.icon-wrapper :global(svg[fill="none"] *) {
fill: none;
}
.icon-placeholder {

19
src/lib/components/ui/IconButton.svelte
Unescape View File

@ -73,13 +73,13 @@ @@ -73,13 +73,13 @@
.icon-button.active {
background: var(--fog-accent, #64748b);
color: var(--fog-text, #ffffff);
color: #ffffff; /* White text on accent background for good contrast */
border-color: var(--fog-accent, #64748b);
}
:global(.dark) .icon-button.active {
background: var(--fog-dark-accent, #64748b);
color: var(--fog-dark-text, #ffffff);
color: #ffffff; /* White text on dark accent for good contrast */
border-color: var(--fog-dark-accent, #64748b);
}
@ -93,6 +93,21 @@ @@ -93,6 +93,21 @@
outline-offset: 2px;
}
/* Ensure icons inside icon-button inherit color - let SVG attributes work naturally */
.icon-button :global(.icon-wrapper) {
color: inherit;
}
/* Only set stroke for SVGs that use stroke, don't force fill */
.icon-button :global(.icon-wrapper svg[stroke="currentColor"]) {
/* SVG already has stroke="currentColor" attribute, just ensure color is set */
}
/* For stroke-only SVGs, ensure fill stays none */
.icon-button :global(.icon-wrapper svg[fill="none"]) {
fill: none;
}
.icon-button-label {
display: none;
}

8
src/lib/components/write/AdvancedEditor.svelte
Unescape View File

@ -1450,6 +1450,11 @@ @@ -1450,6 +1450,11 @@
flex: 1;
overflow: auto;
padding: 1.5rem;
color: var(--fog-text, #1f2937);
}
:global(.dark) .modal-body {
color: var(--fog-dark-text, #f1f5f9);
}
@media (max-width: 640px) {
@ -1637,12 +1642,13 @@ @@ -1637,12 +1642,13 @@
.save-button {
background: var(--fog-accent, #64748b);
color: var(--fog-text, #f1f5f9);
color: #ffffff; /* White text on accent background for good contrast */
border: none;
}
:global(.dark) .save-button {
background: var(--fog-dark-accent, #94a3b8);
color: #ffffff; /* White text on dark accent for good contrast */
}
.save-button:hover {

79
src/lib/components/write/CreateEventForm.svelte
Unescape View File

@ -1038,12 +1038,13 @@ @@ -1038,12 +1038,13 @@
.example-button:hover {
background: var(--fog-accent, #64748b);
color: var(--fog-text, #f1f5f9);
color: #ffffff; /* White text on accent background for good contrast */
border-color: var(--fog-accent, #64748b);
}
:global(.dark) .example-button:hover {
background: var(--fog-dark-accent, #94a3b8);
color: #ffffff; /* White text on dark accent for good contrast */
border-color: var(--fog-dark-accent, #94a3b8);
}
@ -1141,12 +1142,13 @@ @@ -1141,12 +1142,13 @@
.advanced-editor-button:hover:not(:disabled) {
background: var(--fog-accent, #64748b);
color: var(--fog-text, #f1f5f9);
color: #ffffff; /* White text on accent background for good contrast */
border-color: var(--fog-accent, #64748b);
}
:global(.dark) .advanced-editor-button:hover:not(:disabled) {
background: var(--fog-dark-accent, #94a3b8);
color: #ffffff; /* White text on dark accent for good contrast */
border-color: var(--fog-dark-accent, #94a3b8);
}
@ -1332,16 +1334,18 @@ @@ -1332,16 +1334,18 @@
.publish-button {
padding: 0.75rem 1.5rem;
background: var(--fog-accent, #64748b);
color: var(--fog-text, #f1f5f9);
color: #ffffff; /* White text on accent background for good contrast */
border: none;
border-radius: 0.25rem;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
transition: background-color 0.2s, opacity 0.2s;
}
:global(.dark) .publish-button {
background: var(--fog-dark-accent, #94a3b8);
color: #ffffff; /* White text on dark accent for good contrast */
}
.publish-button:hover:not(:disabled) {
@ -1379,15 +1383,18 @@ @@ -1379,15 +1383,18 @@
.republish-button {
padding: 0.5rem 1rem;
background: var(--fog-accent, #64748b);
color: var(--fog-text, #f1f5f9);
color: #ffffff; /* White text on accent background for good contrast */
border: none;
border-radius: 0.25rem;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
transition: background-color 0.2s, opacity 0.2s;
}
:global(.dark) .republish-button {
background: var(--fog-dark-accent, #94a3b8);
color: #ffffff; /* White text on dark accent for good contrast */
}
.republish-button:hover:not(:disabled) {
@ -1538,6 +1545,11 @@ @@ -1538,6 +1545,11 @@
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--fog-text, #1f2937);
}
:global(.dark) .modal-header h2 {
color: var(--fog-dark-text, #f1f5f9);
}
.close-button {
@ -1574,6 +1586,11 @@ @@ -1574,6 +1586,11 @@
max-height: 60vh;
overflow: auto;
flex: 1;
color: var(--fog-text, #1f2937);
}
:global(.dark) .modal-body {
color: var(--fog-dark-text, #f1f5f9);
}
@media (max-width: 640px) {
@ -1695,16 +1712,39 @@ @@ -1695,16 +1712,39 @@
.d-tag-preview {
padding: 0.75rem;
background: #f1f5f9;
border: 1px solid #cbd5e1;
background: var(--fog-highlight, #f1f5f9);
border: 1px solid var(--fog-border, #cbd5e1);
border-radius: 0.375rem;
margin-bottom: 1rem;
font-size: 0.875rem;
color: var(--fog-text, #1f2937);
}
:global(.dark) .d-tag-preview {
background: #1e293b;
border-color: #475569;
background: var(--fog-dark-highlight, #1e293b);
border-color: var(--fog-dark-border, #475569);
color: var(--fog-dark-text, #f1f5f9);
}
.d-tag-preview code {
background: var(--fog-post, #ffffff);
padding: 0.125rem 0.375rem;
border-radius: 0.25rem;
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Droid Sans Mono', 'Source Code Pro', monospace;
color: var(--fog-text, #1f2937);
}
:global(.dark) .d-tag-preview code {
background: var(--fog-dark-post, #334155);
color: var(--fog-dark-text, #f1f5f9);
}
.text-muted {
color: var(--fog-text-light, #64748b);
}
:global(.dark) .text-muted {
color: var(--fog-dark-text-light, #94a3b8);
}
.d-tag-preview code {
@ -1742,17 +1782,18 @@ @@ -1742,17 +1782,18 @@
}
:global(.dark) .modal-footer {
border-top-color: #475569;
border-top-color: var(--fog-dark-border, #475569);
}
.modal-footer button {
padding: 0.5rem 1rem;
border: 1px solid #cbd5e1;
border: 1px solid var(--fog-border, #cbd5e1);
border-radius: 0.375rem;
background: #ffffff;
color: #1e2937;
background: var(--fog-post, #ffffff);
color: var(--fog-text, #1e2937);
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.2s;
display: inline-flex;
align-items: center;
@ -1760,18 +1801,18 @@ @@ -1760,18 +1801,18 @@
}
.modal-footer button:hover {
background: #f1f5f9;
border-color: #94a3b8;
background: var(--fog-highlight, #f1f5f9);
border-color: var(--fog-accent, #94a3b8);
}
:global(.dark) .modal-footer button {
background: #334155;
border-color: #475569;
color: #f1f5f9;
background: var(--fog-dark-highlight, #334155);
border-color: var(--fog-dark-border, #475569);
color: var(--fog-dark-text, #f1f5f9);
}
:global(.dark) .modal-footer button:hover {
background: #475569;
border-color: #64748b;
background: var(--fog-dark-border, #475569);
border-color: var(--fog-dark-accent, #64748b);
}
</style>

54
src/lib/modules/comments/CommentForm.svelte
Unescape View File

@ -697,6 +697,11 @@ @@ -697,6 +697,11 @@
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--fog-text, #1f2937);
}
:global(.dark) .modal-header h2 {
color: var(--fog-dark-text, #f1f5f9);
}
.close-button {
@ -704,7 +709,7 @@ @@ -704,7 +709,7 @@
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #64748b;
color: var(--fog-text, #64748b);
padding: 0;
width: 2rem;
height: 2rem;
@ -712,20 +717,21 @@ @@ -712,20 +717,21 @@
align-items: center;
justify-content: center;
border-radius: 0.25rem;
transition: background-color 0.2s, color 0.2s;
}
.close-button:hover {
background: #e2e8f0;
color: #1e2937;
background: var(--fog-highlight, #e2e8f0);
color: var(--fog-text, #1e2937);
}
:global(.dark) .close-button {
color: #94a3b8;
color: var(--fog-dark-text-light, #94a3b8);
}
:global(.dark) .close-button:hover {
background: #334155;
color: #f1f5f9;
background: var(--fog-dark-highlight, #334155);
color: var(--fog-dark-text, #f1f5f9);
}
.modal-body {
@ -733,6 +739,11 @@ @@ -733,6 +739,11 @@
max-height: 60vh;
overflow: auto;
flex: 1;
color: var(--fog-text, #1f2937);
}
:global(.dark) .modal-body {
color: var(--fog-dark-text, #f1f5f9);
}
@media (max-width: 640px) {
@ -809,6 +820,14 @@ @@ -809,6 +820,14 @@
}
}
.text-muted {
color: var(--fog-text-light, #64748b);
}
:global(.dark) .text-muted {
color: var(--fog-dark-text-light, #94a3b8);
}
.modal-footer {
display: flex;
justify-content: flex-end;
@ -831,34 +850,35 @@ @@ -831,34 +850,35 @@
}
:global(.dark) .modal-footer {
border-top-color: #475569;
border-top-color: var(--fog-dark-border, #475569);
}
.modal-footer button {
padding: 0.5rem 1rem;
border: 1px solid #cbd5e1;
border: 1px solid var(--fog-border, #cbd5e1);
border-radius: 0.375rem;
background: #ffffff;
color: #1e2937;
background: var(--fog-post, #ffffff);
color: var(--fog-text, #1e2937);
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.2s;
}
.modal-footer button:hover {
background: #f1f5f9;
border-color: #94a3b8;
background: var(--fog-highlight, #f1f5f9);
border-color: var(--fog-accent, #94a3b8);
}
:global(.dark) .modal-footer button {
background: #334155;
border-color: #475569;
color: #f1f5f9;
background: var(--fog-dark-highlight, #334155);
border-color: var(--fog-dark-border, #475569);
color: var(--fog-dark-text, #f1f5f9);
}
:global(.dark) .modal-footer button:hover {
background: #475569;
border-color: #64748b;
background: var(--fog-dark-border, #475569);
border-color: var(--fog-dark-accent, #64748b);
}
.comment-form-actions {

4
src/lib/modules/reactions/FeedReactionButtons.svelte
Unescape View File

@ -769,13 +769,13 @@ @@ -769,13 +769,13 @@
.reaction-btn.active {
background: var(--fog-accent, #64748b);
color: var(--fog-text, #475569);
color: #ffffff; /* White text on accent background for good contrast */
border-color: var(--fog-accent, #64748b);
}
:global(.dark) .reaction-btn.active {
background: var(--fog-dark-accent, #64748b);
color: var(--fog-dark-text, #cbd5e1);
color: #ffffff; /* White text on dark accent for good contrast */
border-color: var(--fog-dark-accent, #64748b);
}

5
src/lib/modules/rss/RSSCommentForm.svelte
Unescape View File

@ -662,6 +662,11 @@ @@ -662,6 +662,11 @@
padding: 1rem;
overflow-y: auto;
flex: 1;
color: var(--fog-text, #1f2937);
}
:global(.dark) .modal-body {
color: var(--fog-dark-text, #f1f5f9);
}
.preview-body {

Write Preview
Loading…
Cancel
Save