A user style for Habitica which shrinks the tasks for a more compact global view of all the tasks.
All of the task items are shrinked vertically (only their height is decreased - the text size is not altered). The rewards could not be shrinked as much as the other tasks because I still wanted to have the coin icon displayed 🙂
In the demo photo (which is a screen of my Habitica) I am also using the Habitica recolour called "Habitica Dark" created by Jeff Sieu, which you can install using Stylus just like my style.
Notes
The checklists and notes are set not to show in the global view - you can access them by clicking the task in question. I wanted to make the global view as compact and global as possible (so view as many tasks as possible at the "bird's view" level).
The due date is positioned to the right, close to the challenge & tag icons because it was overlapping with the task title text otherwise. With long task title there still may be some overlap, but this is the extenct how far right this calendar icon & text could have been pushed.
Source code
/* ==UserStyle==
@name Smol Habitica
@namespace github.com/annafrompoland/smolhabitica
@version 1.0.0
@description A resizing style for Habitica.com, shrinking tasks for a more compact view
@author Anna <bakatenko@gmail.com>
@license MIT
==/UserStyle== */
@-moz-document domain("habitica.com") {
/* GLOBAL STYLE SETTINGS */
/* hide task notes from global view */
.task-notes {
display: none;
}
/* disable checklist showing automatically */
.checklist {
display: none;
}
.task .checklist {
display: none;
}
/* disable checklist to pop up when you hover a mouse over a task - please click the task to go through its checklist items */
.task:hover .checklist {
display: none;
}
/* set the height of ALL task items (..kinda. if you need more info, check F12 for website inspection) */
.task-content {
padding: 0.125rem !important;
height: 2.5rem
}
/* set the height of ALL task items (..kinda. if you need more info, check F12 for website inspection) */
.task-clickable-area {
height: 2rem !important;
}
/* set the height of the area behind daily/to-do & habit checkbox (the area with colour) */
.left-control, .right-control {
width: 2.125rem !important;
min-height: 2.125rem !important;
}
/* set the task title text overflow: normal == no overflow, break-work == will overflow to 2nd text line */
.task-title {
overflow-wrap: normal !important;
}
/* set the height of the gap under ALL task items */
.task {
margin-bottom: 0.25rem !important;
}
/* set the top padding in ALL task items */
.pt-1 {
padding-top: 0px !important;
}
/* set the left padding in ALL task items */
.pl-75 {
padding-left: 0.25rem !important;
}
/* DAILY & TO-DO TASKS STYLE SETTINGS */
/*set the size of the daily/to-do task checkbox */
.task-control {
width: 1.25rem !important;
height: 1.25rem !important;
}
/* set the top margin of the daily/to-do task checkbox */
.daily-todo-control {
margin-top: 0.625rem !important;
}
/* position the v chevron sign in the daily/to-do task checkbox */
.check.svg-icon {
margin-top: 0.25rem;
margin-left: 0.25rem;
}
/* position the streak counter in the daily tasks */
.icons {
margin-top: -0.75rem !important;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 0.5rem;
padding-left: 0px;
}
/* position the due text to right so it doesn't overlap with the task title */
.calendar.svg-icon {
margin-left: 23rem !important;
}
/* HABITS TASKS STYLE SETTINGS */
/* justify the + sign on the left of a habit task */
.habit-control .positive{
margin-top: -0.25rem !important;
margin-left: 0.25rem !important;
}
/* justify the - sign on the right of a habit task */
.habit-control .negative {
margin-top: -0.25rem !important;
margin-left: 0.25rem !important;
}
/* margin = set the maring/padding of the + and - areas (whole areas) in habit task items
padding = set the "wheel" item within this areas in habit task items */
.pt-3 {
margin-top: 0px !important;
padding-top: 0.625rem !important;
}
/* REWARDS TASKS STYLE SETTINGS */
/* set the height of the right reward button - the one with the icon and reward cost value */
.reward-control {
height: 3.125rem !important;
}
}
