Backloggd Nord by shard

/* ==UserStyle==
@name       Backloggd Nord
@version    20240305.16.57
@namespace  ?
==/UserStyle== */

@-moz-document domain("backloggd.com") {
:root {
    /* Nord color scheme */
    --nord0: #2e3440;
    --nord1: #3b4252;
    --nord2: #434c5e;
    --nord3: #4c566a;
    --nord4dark: #d1d8e3;
    --nord4: #d8dee9;
    --nord5: #e5e9f0;
    --nord6: #eceff4;
    --nord7: #8fbcbb;
    --nord8: #88c0d0;
    --nord9: #81a1c1;
    --nord10: #5e81ac;
    --nord11: #bf616a;
    --nord12: #d08770;
    --nord13: #ebcb8b;
    --nord14: #a3be8c;
    --nord15: #b48ead;
    --nordBlack: #252932;
    --nordInactive: #9b9ea4;
    --rgbnord0: 46, 52, 64;
    --rgbnord1: 59, 66, 82;
    --rgbnord2: 67, 76, 94;
    --rgbnord3: 76, 86, 106;
    --rgbnord4dark: 209, 216, 227;
    --rgbnord4: 216, 222, 233;
    --rgbnord5: 229, 233, 240;
    --rgbnord6: 236, 239, 244;
    --rgbnord7: 143, 188, 187;
    --rgbnord8: 136, 192, 208;
    --rgbnord9: 129, 161, 193;
    --rgbnord10: 94, 129, 172;
    --rgbnord11: 191, 97, 106;
    --rgbnord12: 208.135.112;
    --rgbnord13: 235, 203, 139;
    --rgbnord14: 163, 190, 140;
    --rgbnord15: 180, 142, 173;
    --rgbnordBlack: 37, 41, 50;
    --rgbnordInactive: 155, 158, 164;
}

@media (prefers-color-scheme: dark) {
    :root {
        --blackout: var(--nordBlack);
        --background0: var(--nord0);
        --background1: var(--nord1);
        --background2: var(--nord2);
        --background3: var(--nord3);
        --foreground0: var(--nord6);
        --foreground1: var(--nord5);
        --foreground2: var(--nord4);
        --foreground3: var(--nord4dark);
        --textPrimary: var(--nord4);
        --link: var(--nord9);
        
        --rgblackout: var(--rgbnordBlack);
        --rgbackground0: var(--rgbnord0);
        --rgbackground1: var(--rgbnord1);
        --rgbackground2: var(--rgbnord2);
        --rgbackground3: var(--rgbnord3);
        --rgbforeground0: var(--rgbnord6);
        --rgbforeground1: var(--rgbnord5);
        --rgbforeground2: var(--rgbnord4);
        --rgbforeground3: var(--rgbnord4dark);
        
        --back-primary: var(--background0);
        --back-secondary: var(--background1);
        --back-field-highlight: var(--background2);
        
        --back-field: var(--background1);
        --back-link: var(--textPrimary);
        --back-text: var(--textPrimary);
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --blackout: var(--nord0);
        --background0: var(--nord6);
        --background1: var(--nord5);
        --background2: var(--nord4);
        --background3: var(--nord4dark);
        --foreground0: var(--nord0);
        --foreground1: var(--nord1);
        --foreground2: var(--nord2);
        --foreground3: var(--nord3);
        --textPrimary: var(--nord1);
        --link: var(--nord10);
        
        --rgbackground0: var(--rgbnord6);
        --rgbackground1: var(--rgbnord5);
        --rgbackground2: var(--rgbnord4);
        --rgbackground3: var(--rgbnord4dark);
        --rgbforeground0: var(--rgbnord0);
        --rgbforeground1: var(--rgbnord1);
        --rgbforeground2: var(--rgbnord2);
        --rgbforeground3: var(--rgbnord3);
        
        --back-primary: var(--background0);
        --back-secondary: var(--background1);
        --back-field-highlight: var(--background2);
        
        --back-field: var(--background1);
        --back-link: var(--textPrimary);
        --back-text: var(--textPrimary);
    }
}

.game-cover .quick-access-bar,
.backloggd-modal .modal-content .modal-body, .backloggd-modal .modal__content .modal-body {
    background-color: var(--background0);
    color: var(--textPrimary);
}
header, footer,
.sidebar, .sidebar-sm,
#news-article {
    background-color: var(--blackout);
}
#profile-nav {
    background-color: var(--background0) !important;
}
a,
#profile-quickview #username a:hover,
#past-articles .article a:hover,
.small-link:hover, .secondary-link:hover, .game-page-platform:hover,
.like-counter a:hover,
#nav-interactables .dropdown-sort .current-sort, #nav-interactables .dropdown-sort a:hover,
#game-profile #game-body .sub-title a:hover,
#game-profile a:hover .game-page-sidecard,
.tippy-box[data-theme~="backloggd-quick-access"] .quick-journal:hover, .game-cover .quick-access-bar-more a:hover, .game-cover .quick-access-bar-more .btn-play-fill a:hover,
.category-tag p a:hover, .genre-tag a:hover,
#search-type .btn-link:hover,
.review-card .comments-link:hover,
.review-card .review-more:hover,
.fav-review p:hover,
.comments-link:hover,
.journal_entry .game-name a:hover, .journal_entry .journal-platform:hover,
.about .about-nav.current .row, .about .about-nav:hover .row {
    color: var(--link);
}
a:hover {
    color: var(--textPrimary);
}
p, span:not(.star), h1, h2, h3, h4, h5, h6, .secondary-link,
.main-header, #main-title,
.navbar .search-bar,
.sidebar .filter-title,
.sidebar-sm .filter-header p, .sidebar .filter-header p,
.quick-access-widget-title, div.quick-access-widget p.subtitle-text,
.btn-play p, .btn-play p:hover, #game-profile #game-body #score p,
.tippy-box[data-theme~="backloggd-quick-access"] .quick-journal, .game-cover .quick-access-bar-more a, .game-cover .quick-access-bar-more .btn-play-fill a,
#journal-game-modal #log-toggle-buttons label p,
#profile-quickview #username a, #profile-stats h1,
#coming-soon .coming-details .name,
#past-articles .article a, #past-articles .article .feed-content,
#game-profile #game-body .sub-title a,
.review-card .card-text,
.backer-upgrade h2, .backer-upgrade p,
.list-form .checkbox-label, .backloggd-checkbox-lg, .backloggd-field:focus,
.circle-checkbox input:checked + label,
.play-type-option h3,
.btn-general:hover,
#search-title small, #search-title h1,
#search-type .current, #search-type .btn-link,
#log-editor-full #log-title-field,
#playthrough-calendar .fc-day-number,
.journal_entry .month-year-date h4,
.journal_entry .game-name a,
.about h1, .about .title, .about .about-nav.current .row, #roadmap #hearts-left, #roadmap .task-card .card-body,
.igdb-logo a p,
#goty-event-banner h2, #goty-total-stats h3, #goty-awards h3 {
    color: var(--textPrimary);
}
.text-white,
.list-progress-label {
    color: var(--textPrimary) !important;
}
.text-color-secondary, .text-style-secondary,
#header-logo #backloggd-subtitle,
#profile-header #profile-nav a,
#past-articles .article .feed-date,
#game-profile .game-page-sidecard,
.category-tag p a, .genre-tag a,
.review-card .game-status .play-type, .review-card .game-status .play-type:hover, .review-card .review-platform:hover,
.fav-review .fa-heart, .review-card .comments-link, .review-card .comments-link:hover i, .review-card .review-more,
.small-link, .game-page-platform,
.fill-in, .fill-in-slim,
.form-control::placeholder,
.subtitle-text,
.pagination .page.disabled {
    color: var(--nordInactive);
}
.text-muted {
    color: var(--nordInactive) !important;
}
.navbar .nav-item .nav-link,
.dropdown-item,
.modal-search #nav-notification-bell .fas, .navbar #nav-notification-bell .fas,
.list-entry-actions .secondary-link {
    color: var(--nord4) !important;
}
#profile-header #profile-nav a:hover {
    color: var(--foreground2);
}
.fav-review .liked .fa-heart, .fav-review .like-heart:hover .fa-heart {
    color: var(--nord11);
}
#search-type .btn-link {
    border-color: var(--textPrimary);
}
#search-type .btn-link:hover {
    border-color: var(--link);
}
#search-results .result .rate, .rate,
#search-results .result .buttons .btn-play, #search-results .result .buttons .log-type-btn,
.notification.unread, .roadmap-like .disabled {
    color: var(--background3);
}

.navbar .search-bar,
.navbar .search-btn,
#nav-interactables .dropdown-sort,
.pagination .page {
    background-color: var(--background1);
}
.navbar #profile-li.show, .navbar .dropdown:hover,
.navbar .dropdown-menu {
    background-color: var(--nord1);
}
.fill-in:hover,
.btn-general:hover {
    background-color: var(--background3);
}
.navbar .dropdown-menu .dropdown-item:focus, .navbar .dropdown-menu .dropdown-item:hover,
.navbar .navbar-toggler, .navbar #mobile-user-nav a {
    background-color: var(--nord2);
}
.btn-general,
.pagination .page.active, .pagination .page:hover,
#profile-header #profile-nav a:hover .selected-bar,
input[type="checkbox"]:checked + .btn-checkbox {
    background-color: var(--nord10);
}
.btn-play {
    color: var(--nord10);
}
.review-card .gradient {
    background: linear-gradient(180deg,rgba(var(--rgbackground0),0) 0,var(--background0)) !important;
}

.ranking.first {
    background-color: var(--nord3);
    color: var(--nord13);
}
.ranking.second {
    background-color: var(--nord3);
    color: var(--nord4);
}
.ranking.third {
    background-color: var(--nord3);
    color: var(--nord12);
}

.tippy-box,
.backloggd-checkbox-lg {
    background-color: var(--background2) !important;
    color: var(--textPrimary) !important;
}

#goty-event-banner {
    margin-top: 1rem !important;
}
}