Last active
October 24, 2022 22:55
-
-
Save ElnuDev/e8c1f2b2ca71c3601fb250860245d358 to your computer and use it in GitHub Desktop.
Habitica Nord theme
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ==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; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment