Habitica Nord theme

habitica.css

/* ==UserStyle==
@name           habitica.com
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Habitica Nord Theme
@author         ElnuDev
==/UserStyle== */
@-moz-document domain("habitica.com") {

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* Nord color scheme https://www.nordtheme.com/ */
:root {
    /* Polar night, darkest to lightest (background colors) */
    --nord0: #2e3440;
    --nord1: #3b4252;
    --nord2: #434c5e;
    --nord3: #4c566a;
    /* Snow storm, darkest to lightest (foreground colors) */
    --nord4: #d8dee9;
    --nord5: #e5e9f0;
    --nord6: #eceff4;
    /* Frost, green to blue (accent colors) */
    --nord7: #8fbcbb;
    --nord8: #88c0d0;
    --nord9: #81a1c1;
    --nord10: #5e81ac;
    /* Aurora, (accent colors) */
    --nord11: #bf616a;
    /* Red */
    --nord12: #d08770;
    /* Orange */
    --nord13: #ebcb8b;
    /* Yellow */
    --nord14: #a3be8c;
    /* Green */
    --nord15: #b48ead;
    /* Purple */
}

:not(a):not(code):not(pre):not(.member-count),
.user-link {
    color: var(--nord6) !important;
    font-family: 'Lato', sans-serif;
}

code,
pre {
    color: var(--nord8) !important;
    background: var(--nord1) !important;
    border-radius: 2px;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 2px;
    font-size: 1em !important;
}

code {
    font-size: 0.9em !important;
}

.user-tasks-page {
    background: var(--nord1);
}

.tasks-list {
    background: var(--nord2) !important;
}

.gear,
.pet-mount-well-image,
.achievement-container,
.pet-background {
    background: var(--nord0) !important;
}

.task-content {
    background: var(--nord3) !important;
}

.modal-footer {
    background: var(--nord2) !important;
}

.purchase-amount .box {
    background: var(--nord3) !important;
}

.item {
    border-color: transparent;
}

.item-wrapper .item {
    background: var(--nord3);
}

.item .label-holder {
    background: var(--nord2) !important;
}

.task-worst-control-bg,
.task-worst-control-bg-noninteractive,
.task-worst-modal-bg,
.task-worst-control-bg .task-content {
    background-color: var(--nord11) !important;
    --bg: transparent;
    --fg: rgba(255, 255, 255, 0.125);
    --size: 25px;
    background-image: linear-gradient(45deg, var(--bg) 25%, var(--fg) 25%, var(--fg) 50%, var(--bg) 50%, var(--bg) 75%, var(--fg) 75%, var(--fg)) !important;
    background-size: var(--size) var(--size) !important;
}

.task-worse-control-bg,
.task-worse-control-bg-noninteractive,
.task-worse-modal-bg,
.bg-health,
.boss-health-bar {
    background: var(--nord11) !important;
}

.bg-mana {
    background: var(--nord8) !important;
}

.task-worse-modal-habit-control-disabled:hover .habit-option-button {
    border-color: var(--nord11);
}

.task-worse-modal-habit-control-disabled:hover .habit-option-label {
    color: var(--nord11) !important;
}

.task-bad-control-bg,
.task-bad-control-bg-noninteractive,
.task-bad-modal-bg {
    background: var(--nord12) !important;
}

.task-bad-modal-habit-control-disabled:hover .habit-option-button {
    border-color: var(--nord12);
}

.task-bad-modal-habit-control-disabled:hover .habit-option-label {
    color: var(--nord12) !important;
}

.task-neutral-control-bg,
.task-neutral-control-bg-noninteractive,
.task-neutral-modal-bg,
.bg-experience,
.pending-health-bar {
    background: var(--nord13) !important;
}

.task-neutral-modal-habit-control-disabled:hover .habit-option-button {
    border-color: var(--nord13);
}

.task-neutral-modal-habit-control-disabled:hover .habit-option-label {
    color: var(--nord13) !important;
}

.task-good-control-bg,
.task-good-control-bg-noninteractive,
.task-good-modal-bg {
    background: var(--nord14) !important;
}

.task-good-modal-habit-control-disabled:hover .habit-option-button {
    border-color: var(--nord14);
}

.task-good-modal-habit-control-disabled:hover .habit-option-label {
    color: var(--nord14) !important;
}

.task-better-control-bg,
.task-better-control-bg-noninteractive,
.task-better-modal-bg {
    background: var(--nord8) !important;
}

.task-better-modal-habit-control-disabled:hover .habit-option-button {
    border-color: var(--nord8);
}

.task-better-modal-habit-control-disabled:hover .habit-option-label {
    color: var(--nord8) !important;
}

.task-best-control-bg,
.task-best-control-bg-noninteractive,
.task-best-modal-bg {
    background: var(--nord15) !important;
}

.task-best-modal-habit-control-disabled:hover .habit-option-button {
    border-color: var(--nord15);
}

.task-best-modal-habit-control-disabled:hover .habit-option-label {
    color: var(--nord15) !important;
}

.task-disabled-habit-control-bg {
    display: none !important;
}

.badge-purple {
    background: var(--nord10) !important;
}

#app-header,
.header-bar {
    background: var(--nord0) !important;
}

#habitica-menu {
    background: var(--nord1) !important;
}

.view-party {
    background: none !important;
}

.progress,
.grey-progress-bar,
.class-badge {
    background: var(--nord1) !important;
}

.profile .progress-container > .progress,
.profile .progress {
    background: var(--nord0) !important;
}

.sticky .profile .progress-container > .progress {
    background: var(--nord0) !important;
}

.btn,
.slider-button {
    background: var(--nord9) !important;
}

.btn-secondary:not(:disabled):not(.disabled):hover,
.dropdown > .btn-secondary.dropdown-toggle:not(.btn-success):not(:disabled):not(.disabled):hover,
.show > .btn-secondary.dropdown-toggle:not(.btn-success):not(:disabled):not(.disabled):hover {
    background: var(--nord10) !important;
}

.slider-button path {
    stroke: white !important;
}

.task:not(.groupTask):focus-within .left-control,
.task:not(.groupTask):focus-within .right-control,
.task:not(.groupTask):focus-within .task-content,
.task:not(.groupTask):hover .left-control,
.task:not(.groupTask):hover .right-control,
.task:not(.groupTask):hover .task-content,
input[type=text]:focus,
input[type=number]:focus,
input[type=email]:focus,
input[type=password]:focus,
.dropdown.show > .dropdown-toggle:not(.btn-success),
.input-group,
.calendar-padding {
    border-color: var(--nord7) !important;
}

.input-group-text {
    background: var(--nord1);
}

.calendar-padding {
    background: var(--nord1);
}

.label-holder {
    background: var(--nord3) !important;
}

.vdp-datepicker .vdp-datepicker__calendar .datetime-buttons,
.vdp-datepicker .vdp-datepicker__calendar header,
.quest-rewards {
    background: var(--nord2) !important;
}

.vdp-datepicker__calendar header .prev:not(.disabled):hover,
.vdp-datepicker__calendar header .next:not(.disabled):hover,
.vdp-datepicker__calendar header .up:not(.disabled):hover {
    background: var(--nord3) !Important;
}

.prev,
.next {
    filter: invert(0.875);
}

.toggle-checkbox {
    background: var(--nord2) !important;
    border-color: var(--nord1) !Important;
}

.toggle-checkbox {
    outline-color: var(--nord9) !important;
}

.toggle-checkbox:hover {
    background: var(--nord3) !important;
}

.input-group-icon,
.day.selected {
    background: var(--nord7) !important;
}

.input-group-icon path {
    fill: white !important;
}

.toggle-checkbox.checked {
    background: var(--nord8) !important;
    border-color: var(--nord9) !important;
}

.advanced-settings {
    background: var(--nord1) !important;
}

.day.today {
    background: var(--nord2) !Important;
}

input[type=text]:not(.checklist-item),
input[type=number],
input[type=email],
input[type=password],
textarea {
    background: var(--nord0) !important;
    border: 1px solid transparent !important;
}

.input-group .checklist-item {
    background: transparent !important;
    color: var(--nord4) !important;
}

.input-group .checklist-item:focus {
    color: var(--nord6) !important;
}

.task .no-right-border {
    border-right: 1px solid transparent !important;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.markdown a {
    color: var(--nord7) !important;
}

footer {
    display: none !important;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background: var(--nord7) !important;
    border-color: var(--nord7) !important;
}

.topbar-item.active,
.topbar-item:hover:not(.droppable) {
    box-shadow: inset 0 -4px 0 var(--nord7) !important;
}

.topbar-item.active,
.topbar-item:hover,
.topbar-dropdown,
.autocomplete-selection {
    background: var(--nord2) !important;
}

.autocomplete-results.hover-background,
.dropdown-item:hover {
    background: var(--nord3) !important;
}

.autocomplete-results.hover-background .username {
    color: inherit !important;
}

.dropdown-item path {
    fill: inherit !important;
}

.dropdown-item .push-to-top path,
.dropdown-item .push-to-bottom path {
    stroke: white !important;
}

.delete-task-item path,
.delete-task-item .text {
    color: var(--nord11) !Important;
    font-weight: bold;
}

.dropdown-toggle:hover {
    --caret-color: inherit !important;
}

.filter-panel,
.dropdown:not(.habitica-menu-dropdown),
.user-dropdown {
    background: var(--nord2) !important;
}

.user-dropdown * {
    color: var(--nord6) !important;
}

.dropdown-separated,
.achievement-list-item,
.disable-background,
.checklist-group {
    border-color: var(--nord2) !important;
}

.conversation {
    border-color: var(--nord1) !important;
}

.conversation:hover {
    background: var(--nord3) !important;
}

.conversation.active {
    background: var(--nord10) !important;
}

.disable-background {
    background: var(--nord3) !important;
}

*:focus,
.filter.active,
.drawer-tab-text-active,
.nav-item {
    border-color: var(--nord7) !important;
}

.drawer-tab-text:not(.drawer-tab-text-active):hover {
    border-color: transparent !important;
}

.btn-filters-danger {
    color: var(--nord11) !important;
}

.collapse-checklist {
    background: var(--nord2) !important;
}

#loading-screen,
#loading-screen-inapp {
    background-color: var(--nord1) !important;
}

.badge {
    background: var(--nord7) !important;
}

.item:hover {
    border-color: var(--nord7) !important;
}

.chevron path,
.section-button path {
    stroke: white !important;
}

@media only screen and (max-width: 992px) {
    .currency-tray {
        background: var(--nord0) !important;
    }

    .topbar-item {
        background: var(--nord2) !important;
        border-color: var(--nord3) !important;
    }

    #menu_collapse {
        background: var(--nord2) !important;
    }
}

.standard-page,
.dropdown-header {
    background: var(--nord1) !important;
}

.standard-sidebar,
.sidebar,
.drawer-content,
.group .items,
.standard-page .item-with-icon,
.challenge,
.box.member-count,
.box.member-count ~ div,
.dropdown-menu {
    background: var(--nord2) !important;
}

.drawer-content {
    overflow: hidden !important;
}

.secondary-menu,
.title-row-tabs,
.card,
.quest-box,
.tier-list li,
.well,
.dropdown-menu-right,
.tas,
.task {
    background: var(--nord3) !important;
}

.tier-list li {
    border-color: var(--nord1) !important;
}

.category-label:not(.category-label-purple) {
    background: var(--nord10) !important;
}

.multi-list .multi-item {
    background: var(--nord8) !important;
}

.remove path {
    stroke: white !important;
}

.remove:hover path {
    stroke: var(--nord11) !important;
}

.nav-link {
    color: white !important;
}

.nav-link:hover {
    background: var(--nord2) !important;
}

.nav-link.active {
    color: var(--nord7) !important;
    box-shadow: inset 0 -0.25rem 0 var(--nord7) !important;
}

.sidebar .section {
    border-color: var(--nord1) !important;
}

.modal-backdrop {
    background: var(--nord0) !important;
}

.modal-content,
#userProfile,
#stats,
#achievements {
    background: var(--nord1) !important;
}

.modal-body .item {
    background: var(--nord2) !Important;
}

#stats .well,
.achievements-row,
.stats-column,
.messages-column {
    background: var(--nord2) !important;
}

#achievements .box {
    margin-top: 0.5em !important;
    margin-bottom: 0.5em !important;
}

.achievements-row {
    border-radius: 2px;
}

#stats :not(.gear).box.white {
    background: transparent !important;
}

.stat-title {
    font-weight: bold;
}

.stat-title.str {
    color: var(--nord11) !important;
}

.stat-title.int {
    color: var(--nord15) !important;
}

.stat-title.con {
    color: var(--nord13) !important;
}

.stat-title.per {
    color: var(--nord14) !important;
}

.sidebar {
    border-radius: 0 !important;
}

a[href="/group-plans"],
a[href="/static/faq"] {
    display: none !important;
}

.member-details.condensed.expanded {
    box-shadow: 0 0 0 8px var(--nord3) !important;
}

.member-details.condensed.expanded,
.member-details.condensed.expanded .member-stats {
    background: var(--nord3) !important;
}

.topbar-dropdown-item {
    background: var(--nord1) !important;
    border-color: var(--nord0) !important;
}

.profile-section h2::after {
    background: var(--nord3) !important;
}

.hr {
    border-color: var(--nord2) !important;
}

.quest-detail .item {
    background: var(--nord4) !important;
}

.attributesGrid {
    background: var(--nord0) !important;
}

.popover {
    background: var(--nord0) !important;
}

.popover-content-attr {
    background: var(--nord2) !important;
}

span.green {
    color: var(--nord14) !important;
}

.potion-icon {
    image-rendering: pixelated;
}

.spell-border:not(.disabled):hover {
    background: var(--nord7) !important;
}

.spell {
    background: var(--nord3) !important;
}

.drawer-title {
    background: var(--nord1);
}

.notification {
    background: var(--nord14) !important;
}

.error {
    background: var(--nord11) !important;
}

body {
    background: var(--nord0) !important;
}

select, input {
    background: var(--nord0) !important;
    border: none !important;
}

.subscribe-card  {
    background: var(--nord2) !important;
}

.subscribe-card .bg-gray-700 {
    background: var(--nord3);
}

.cancel-card {
    border-color: var(--nord0) !important;
}

a, a:hover {
    color: var(--nord7);
}

table tr > * {
    border-color: var(--nord0) !important;
}
    
section.greyed {
    background: var(--nord2) !important;
}
}