Dark Mode by Htbatmann

/* ==UserStyle==
@name         Dark Mode
@version      20240614.19.50
@namespace    https://userstyles.world/user/Htbatmann
@description  Makes the forum Dark mode
@author       Htbatmann
@license      No License
==/UserStyle== */

@-moz-document domain("feedback.fmhy.net") {
/* General settings */
body,
html {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for general changes */
}

/* Header */
.header {
    background-color: #232323 !important;
    color: #ffffff !important;
    border-bottom: 1px solid #3a3a3a !important;
}

.header a,
.nav-bar a,
.card a,
.button,
.btn,
.c-button,
.bg-gray-50 button,
.c-comment-input > div:nth-child(2),
.notifications-settings,
.c-markdown a,
.text-gray-div.flex-wrap:nth-child(3) > a:nth-child(1),
a.c-tag[title="discussion"] {
    color: #66b3ff !important;
    text-decoration: none !important;
    transition: color 0.3s ease, text-decoration 0.3s ease; /* Smooth transition for link color and decoration */
}

.header a:hover,
.nav-bar a:hover,
.card a:hover,
.button:hover,
.btn:hover,
.c-button:hover,
.bg-gray-50 button:hover,
.c-markdown a:hover,
.text-gray-div.flex-wrap:nth-child(3) > a:nth-child(1):hover,
a.c-tag[title="discussion"]:hover {
    text-decoration: underline !important; /* Underline on hover */
}

/* Navigation Bar */
.nav-bar {
    background-color: #232323 !important;
    border-bottom: 1px solid #3a3a3a !important;
}

/* Main Content */
.content,
.main-content,
.card,
.c-comment > div:nth-child(2),
.c-comment-input > div:nth-child(2),
.c-modal-window,
.notification,
.alert {
    background-color: #232323 !important;
    color: #e0e0e0 !important;
    border: 1px solid #3a3a3a !important;
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease; /* Smooth transition for content */
}

/* Buttons */
.button,
.btn,
.c-button,
.bg-gray-50 button,
.c-comment-input > div:nth-child(2),
.notifications-settings {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
    border: 1px solid #4d4d4d !important;
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease, transform 0.3s ease; /* Smooth transition for button states and animation */
}

.button:hover,
.btn:hover,
.c-button:hover,
.bg-gray-50 button:hover {
    background-color: #4d4d4d !important;
    transform: scale(1.05); /* Slightly enlarge on hover */
}

/* Dropdowns */
div.c-dropdown:nth-child(1) > button:nth-child(1) > div:nth-child(1),
div.c-dropdown:nth-child(2) > button:nth-child(1) > div:nth-child(1),
div.c-dropdown__listitem:nth-child(-n+5),
div.c-dropdown__list {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
    border-radius: 15px; /* Adjust border radius */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for dropdowns */
}

div.c-dropdown__listitem:nth-child(-n+5):hover {
    background-color: #4d4d4d !important;
}

/* Forms */
input,
select,
textarea,
input::placeholder,
textarea::placeholder {
    background-color: #232323 !important;
    color: #e0e0e0 !important;
    border: 1px solid #3a3a3a !important;
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease; /* Smooth transition for forms */
}

/* Tables */
table {
    background-color: #232323 !important;
    color: #e0e0e0 !important;
    border: 1px solid #3a3a3a !important;
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease; /* Smooth transition for tables */
}

/* Links */
a {
    color: #66b3ff !important;
    text-decoration: none !important;
    transition: color 0.3s ease, text-decoration 0.3s ease; /* Smooth transition for link color and decoration */
}

a:hover {
    color: #4d94ff !important;
    text-decoration: underline !important; /* Underline on hover */
}

/* Footer */
.footer {
    background-color: #232323 !important;
    color: #e0e0e0 !important;
    border-top: 1px solid #3a3a3a !important;
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease; /* Smooth transition for footer */
}

/* Modal */
.c-modal-window {
    background-color: #232323 !important;
    color: #e0e0e0 !important;
    border: 1px solid #3a3a3a !important;
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease; /* Smooth transition for modals */
}

.c-modal-window .c-modal-header,
.c-modal-window .c-modal-footer {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
    border-bottom: 1px solid #4d4d4d !important;
    transition: background-color 0.3s ease, color 0.3s ease, border-bottom 0.3s ease; /* Smooth transition for modal headers and footers */
}

.c-modal-window .c-modal-header .c-modal-close {
    color: #e0e0e0 !important;
    transition: color 0.3s ease; /* Smooth transition for close button */
}

.c-modal-window .c-modal-body {
    background-color: #232323 !important;
    color: #e0e0e0 !important;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for modal body */
}

/* Text muted */
.text-muted,
.text-muted > div:nth-child(1) {
    color: #888888 !important; /* Consistent muted text color */
    transition: color 0.3s ease; /* Smooth transition for muted text */
}

/* Dark mode for .bg-gray-50 */
.bg-gray-50 {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important; /* Consistent text color */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for dark mode */
}

.bg-gray-50 button {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important; /* Consistent text color */
    border: 1px solid #4d4d4d !important;
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease; /* Smooth transition for buttons */
}

.bg-gray-50 button:hover {
    background-color: #4d4d4d !important;
    /* Adjust hover state styling as needed */
}

/* Markdown Text Styling */
.c-markdown {
    color: #c6c6c6; /* Adjusted to a softer gray for better readability */
    line-height: 1.6; /* Improved line height for better spacing */
    font-size: 16px; /* Adjust font size as needed */
}

.c-markdown a {
    color: #66b3ff; /* Link color */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s ease; /* Smooth transition for link color */
}

.c-markdown a:hover {
    color: #4d94ff; /* Darker link color on hover */
    text-decoration: underline; /* Underline on hover */
}

.c-markdown p {
    margin-bottom: 1em; /* Adjust paragraph bottom margin */
}

.c-markdown ul,
.c-markdown ol {
    margin-bottom: 1em; /* Adjust list bottom margin */
}

.c-markdown li {
    margin-bottom: 0.5em; /* Adjust list item bottom margin */
}

.c-markdown blockquote {
    margin: 0 0 1em; /* Adjust blockquote margins */
    padding: 0 1em; /* Add padding to blockquotes */
    border-left: 3px solid #66b3ff; /* Left border color */
    color: #888888; /* Quote text color */
}

.c-markdown pre {
    background-color: #f0f0f0; /* Code block background color */
    color: #333333; /* Code block text color */
    padding: 10px; /* Code block padding */
    border-radius: 4px; /* Code block border radius */
    overflow: auto; /* Enable scrollbars if needed */
}

/* Text Color Adjustments */
.text-gray-600 {
    color: #afafaf !important; /* Adjusted to a darker gray for better contrast */
}

/* Adjustments for specific elements */

.text-gray-div.flex-wrap:nth-child(3) > a:nth-child(1) {
    color: #ffffff !important; /* Adjust text color to white for better contrast */
    background-color: #333333 !important; /* Dark background color */
    padding: 5px 10px !important; /* Adjust padding as needed */
    border-radius: 5px; /* Optional: Add rounded corners */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for color changes */
}

.text-gray-div.flex-wrap:nth-child(3) > a:nth-child(1):hover {
    background-color: #444444 !important; /* Darken background on hover */
}

/* Adjustments for the 'discussion' tag */
a.c-tag[title="discussion"] {
    background-color: rgb(245, 166, 208) !important;
    color: rgb(51, 51, 51) !important;
    padding: 2px 5px !important; /* Adjust padding for better appearance */
    border-radius: 3px !important; /* Optional: Add rounded corners */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for color changes */
}

a.c-tag[title="discussion"]:hover {
    background-color: rgb(255, 192, 224) !important; /* Lighten background on hover */
}

/* Markdown Text Styling */
.c-markdown {
    color: #c6c6c6; /* Adjusted to a softer gray for better readability */
    line-height: 1.6; /* Improved line height for better spacing */
    font-size: 16px; /* Adjust font size as needed */
}

.c-markdown a {
    color: #66b3ff; /* Link color */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s ease; /* Smooth transition for link color */
}

.c-markdown a:hover {
    color: #4d94ff; /* Darker link color on hover */
    text-decoration: underline; /* Underline on hover */
}

.c-markdown p {
    margin-bottom: 1em; /* Adjust paragraph bottom margin */
}

.c-markdown ul,
.c-markdown ol {
    margin-bottom: 1em; /* Adjust list bottom margin */
}

.c-markdown li {
    margin-bottom: 0.5em; /* Adjust list item bottom margin */
}

.c-markdown blockquote {
    margin: 0 0 1em; /* Adjust blockquote margins */
    padding: 0 1em; /* Add padding to blockquotes */
    border-left: 3px solid #66b3ff; /* Left border color */
    color: #888888; /* Quote text color */
}

.c-markdown pre {
    background-color: #f0f0f0; /* Code block background color */
    color: #333333; /* Code block text color */
    padding: 10px; /* Code block padding */
    border-radius: 4px; /* Code block border radius */
    overflow: auto; /* Enable scrollbars if needed */
}

/* Text Color Adjustments */
.text-gray-600 {
    color: #afafaf !imp...