hmyr's Habitica Tasks Page style

Description

Note: There is no website for this style -- the code to implement it is listed below, in the "installation" section.

Below is the author's description of the changes that this style makes.

No To Do's, since I don't use them. Instead, Dailies span two columns!
Skills moved to the top (where the list of party members would normally be; I'm not in a party).
Disabled some Skills I don't need to prevent me from clicking them by accident.
Some functionality removed (collapsing checklists, strong/weak filters for Habits, search, Tags, etc.) to make the site more minimalistic.
Made tasks look nicer (in my opinion, YMMV).

For anyone interested in using (some of) this: you'll probably have to make a few adjustments here and there. Everything is commented, so you should be able to change/remove individual components.

Installation

This user style requires manual installation as described below.

Before installing this user style, make sure you have one of the following installed:

Stylus (available for Chrome, Firefox, and Opera)
A user script manager (Greasemonkey for Firefox or Tampermonkey for Dolphin Browser and UC Browser).
Stylish for Safari

Then, navigate to the website for this user style. Copy the style's code from the website to your clipboard. Go to the management screen in Stylus/Stylish/Greasemonkey/Tampermonkey and create a new, empty style. Paste the style's code from your clipboard. Click the "save" button to save the style.

If necessary, use the management screen's edit function to change the style's code to adjust its behaviour (e.g., delete sections that make changes that you don't want). Click the "save" button when finished.

After the style is loaded (or Customization Settings were changed), you may need to refresh the page to see its effects. The style can be easily turned off and on with a handy checkbox that you can find by clicking the Stylus/Stylish/Greasemonkey/Tampermonkey icon in your toolbar.

The webpage that hosted this style expired at the end of April 2021, so the full code for the style is copied below. You can use it by creating a new, empty style in your browser's style manager and pasting this code into it.

/*
 * Copyright (C) 2020 by @hmyr on Habitica
 * 
 * Permission to use, copy, modify, and/or distribute this software for any
 * purpose with or without fee is hereby granted.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
 * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
 * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY
 * SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
 * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION
 * OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN
 * CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
 */

/* Hide to-do column. */

.tasks-column.todo {
    display: none !important;
}

/* Make dailies span two columns. */

.tasks-column {
    flex: 1 !important;
    max-width: none !important;
}

.tasks-column.daily {
    flex: 2 !important;
}

.tasks-column.daily .sortable-tasks {
    display: flex;
    flex-wrap: wrap;
    column-gap: 8px;
}

.tasks-column.daily .sortable-tasks .task-wrapper {
    display: flex;
    flex: calc(50% - 4px);
    width: 100%;
}

.tasks-column.daily .sortable-tasks .task-wrapper .task {
    display: flex;
    width: 100%;
}

.tasks-column.daily .sortable-tasks .task-wrapper .task > .d-flex {
    width: 100%;
}

.tasks-column.daily .sortable-tasks .task-wrapper .task-content {
    display: flex;
    flex-direction: column;
}

.tasks-column.daily .sortable-tasks .task-wrapper .task-content .task-clickable-area {
    flex: 1;
}

/* Add some space around tasks. */

.task-wrapper {
    border: 4px solid transparent;
}

/* Remove search and tags (I don't use them). */

.tasks-navigation {
    display: none !important;
}

/* Remove the "not due" filter for the list of dailies. */

.tasks-column.daily .filter:nth-of-type(3) {
    display: none !important;
}

/* Remove filters from habits (strong/weak) and rewards (custom/wishlist). */

.tasks-column.habit .filters,
.tasks-column.reward .filters {
    visibility: hidden !important;
}

/* Save space by removing Habitica logo from navigation bar. */

.navbar-brand {
    display: none !important;
}

/* Remove menu entries I don't need. */

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

/* Remove the button for collapsing checklists. */

.collapse-checklist.expand-toggle.open {
    display: none !important;
}

.checklist.isOpen {
    margin-top: -18px !important;
}

/* Don't show my own username next to my level. */

.character-level .mr-1 {
    display: none;
}

/*
 * Show skills instead of "You're not in a party" message.
 * If you *are* in a party, delete this part or hide the list of party members.
 */

.no-party {
    display: none !important;
}

.user-tasks-page > div:last-child,
.user-tasks-page .drawer-wrapper {
    position: static !important;
}

.user-tasks-page .drawer-container[class] {
    position: absolute !important;
    top: 90px !important;
    left: 500px !important;
    right: 25px !important;
    visibility: hidden !important;
}

.user-tasks-page .spell {
    visibility: visible !important;
}

/* Hide anti-social networks. */

.btn-contribute,
.social {
    display: none;
}

/* Disable skills I don't need and don't want to click by accident. */

.spell-container > .row > .col-12:nth-child(2),
.spell-container > .row > .col-12:nth-child(3),
.spell-container > .row > .col-12:nth-child(4) {
    pointer-events: none;
    opacity: 0.4;
}

/* My evening routine. Replaces ~strikethrough~ with inverted colors. */

.task-title s {
    background: #222;
    color: #fff;
    text-decoration: none;
    display: inline-block;
    border-radius: 100px;
    padding: 0 12px;
}