meersocial.me dark mode by the8thbit

/* ==UserStyle==
@name           meersocial.me dark mode
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    meersocial dark mode
@author         the8thbit (grandson)
==/UserStyle== */
@-moz-document url-prefix("https://meersocial.me/") {
    :root {
        --background-primary: #181A1B;
        --background-secondary: #2b2e31;
        --background-gradiant-direction: 135deg;
        --background-gradiant-start: #242729;
        --background-gradiant-end: #332e33;
        --text-primary: #E8E6E3;
        --text-secondary: #A8A095;
        --text-placeholder: #6F6A5C;
        --border-color: #3A3E41;
        --text-destructive: hsl(0, 90%, 50%);
        --background-destructive: hsl(0, 60%, 45%);
        --border-destructive: hsl(0, 60%, 45%);
    }
    a {
        color: skyblue;
    }
    html {
        background: var(--background-primary);
    }
    body {
        background: linear-gradient(
            var(--background-gradiant-direction),
            var(--background-gradiant-start),
            var(--background-gradiant-end)
        );
    }
    .navbar {
        background: var(--background-primary);
    }
    .dropdown-icon {
        color: var(--text-secondary);
    }
    .feed-style-selector,
    .settings-nav {
        background: var(--background-primary) !important;
    }
    .feed-style-btn:not(.active),
    .nav-tab:not(.active) {
        background: var(--background-secondary) !important;
        color: var(--text-secondary) !important;
    }
    .image-label,
    .post-delete-btn {
        background: var(--background-secondary);
        color: var(--text-primary);
        border-color: var(--border-color);
    }
    .post-delete-btn:hover {
        background: var(--background-primary);
        color: var(--text-destructive);
        border-color: var(--border-destructive);
    }
    .create-post,
    .post,
    .article-card {
        background: var(--background-primary);
    }
    .post-expiry,
    .article-meta {
        color: var(--text-secondary);
    }
    .post-content,
    .comment,
    .article-card p {
        color: var(--text-primary);
    }
    .article-viewer {
        background: var(--background-primary) !important;
        border: 1px solid var(--border-color);
    }
    .article-viewer .close-button {
        background: var(--background-secondary);
    }
    .article-viewer-content p {
        color: var(--text-primary) !important;
    }
    .-viewer-meta {
        border-color: var(--border-color);
    }
    #articleViewerDate,
    #articleViewerAuthor,
    .post-time,
    .char-count {
        color: var(--text-secondary);
    }
    .reaction-icon {
        color: var(--primary-purple);
    }
    .reaction-count {
        color: var(--text-secondary);
    }
    .post-actions,
    .comments-section {
        border-color: var(--border-color);
    }
    .search-input,
    .post-input,
    .comment-input,
    .search-results {
        color: var(--text-primary);
        background: var(--background-secondary);
        border-color: var(--border-color);
    }
    .search-result-item:hover {
        background: var(--background-primary);
    }
    .search-input::placeholder,
    .post-input::placeholder,
    .comment-input::placeholder {
        color: var(--text-placeholder);
    }
    .search-input:focus-visible,
    .post-input:focus-visible {
        outline: 1px solid var(--primary-purple);
    }
    .comment-input:focus-visible {
        outline: 1px solid var(--primary-purple);
        margin: 1px;
        border: none;
    }
    .notification-panel {
        background: none;
        border: 1px solid var(--border-color);
    }
    .notification-header {
        border-color: var(--border-color);
    }
    .notification-list {
        background: var(--background-primary);
        color: var(--color-secondary);
    }
    .notification-item {
        border-color: var(--border-color);
    }
    .notification-item:hover {
        background: var(--background-secondary);
    }
    .notification-content {
        color: var(--text-secondary);
    }
    .notification-content div div {
        color: var(--text-primary) !important;
    }
    .notification-time {
        color: var(--color-secondary);
    }
    .profile-header,
    .stat-card {
        background: var(--background-primary)
    }
    .profile-bio,
    .stat-label {
        color: var(--text-secondary)
    }
    .section-title {
        color: var(--text-secondary) !important;
    }
    .dropdown-menu,
    .nav-dropdown-content {
        background: var(--background-secondary);
        border: 1px solid var(--border-color) !important;
    }
    .dropdown-menu a,
    .nav-dropdown-content a {
        color: var(--text-primary);
    }
    .settings-section {
        background: var(--background-primary);
    }
    .settings-section p {
        color: var(--text-secondary) !important;
    }
    .action-card {
        background: var(--background-secondary);
    }
    .action-card h3 {
        color: var(--text-primary);
    }
    .action-card p {
        color: var(--text-secondary);
    }
    .action-bar {
        border: var(--border-color);
    }
    #meerplus > div {
        background: var(--background-secondary) !important;
    }
    #notPremiumMessage {
        background: var(--background-primary) !important;
        color: var(--text-destructive) !important;
    }
    .danger-btn {
        background: var(--background-destructive);
        color: var(--text-primary);
    }
    #currentPassword,
    #newPassword,
    #confirmPassword {
        color: var(--text-primary);
        background: var(--background-secondary);
        border-color: var(--border-color);
    }
    .page-description {
        color: var(--text-secondary);
    }
    .leaderboard {
        background: var(--background-primary);
    }
    .leaderboard-entry {
        border-color: var(--border-color);
    }
    .leaderboard-entry:hover {
        background: var(--background-secondary);
    }
    .leaderboard-entry .rank {
        color: var(--text-secondary);
    }
    .username:hover {
        opacity: 1.0;
        filter: brightness(120%);
    }
    body .container .hero p {
        color: var(--text-secondary) !important;
    }
    .perk-card {
        background: var(--background-primary);
    }
    .perk-card .perk-description {
        color: var(--text-secondary);
    }
    .upgrade-text {        
        color: var(--text-secondary);
    }
    body .content-container .hero .subtitle {
        color: var(--text-secondary);
    }
    .carousel-button {
        background: var(--background-primary);
        color: var(--text-secondary);
    }
    .signin-button {
        border: 2px solid var(--primary-purple);
    }
    .how-it-works .description-card {
        background: var(--background-primary);
    }
    .how-it-works .description-card p {
        color: var(--text-secondary);
    }
    .modal-content {
        background: var(--background-primary);
    }
    .modal-content h2 {
        color: var(--text-primary);
    }
    .modal-content p:not(#articleViewerContent p) {
        color: var(--text-secondary) !important;
    }
    .modal-content .close-button,
    .modal-content label {
        color: var(--text-secondary) !important;
    }
    .modal-content input {
        color: var(--text-primary);
        background: var(--background-secondary);
        border-color: var(--border-color);
    }
    .modal-content input:focus-visible {
        outline: 1px solid var(--primary-purple);
    }
    #passwordError {
        color: var(--text-destructive) !important;
    }
    .footer-links a {
        color: var(--text-secondary);
    }
    .text-gray-500 {
        color: var(--text-secondary);
    }
    .contact-info {
        color: var(--text-primary);
    }
    .error {
        color: var(--text-destructive);
    }
    body > h1,
    body > header > h1,
    body section.section {
        color: var(--text-primary);
    }
    body > header > p,
    body > h2,
    body > h3,
    body > h4,
    body section.section > h2,
    body section.section > h3,
    body section.section > h4 {
        color: var(--text-secondary);
    }
    body > p,
    body > ul > li {
        color: var(--text-primary);
    }
    body > div.content > p {
        color: var(--text-primary);
    }
}