[CSS] Collection of Layout Adjustments

[rk-kontur]

I love this plugin. What always bugged me, was a couple of UI quirks and I finally decided to go the CSS route to address some of them.

Maybe they are of help to someone with similar wishes.

MASSIVE Shoutouts to this plugin!

Widget Indent Control

I most often use the widget view as I create tasks mostly hierarchichal. Here, the large indent and spacing between lines was always bugging me. Here is CSS to adjust this issue:

.tasknotes-plugin.task-card-note-widget .task-card__subtasks {
  padding-left: 0 !important;
  margin-left: -12px !important;  /* Indent Control for Widget task list */
}

Checkbox Size Control

This controls the size of the round checkbox item in widget view

/* Control over potential hover effects */
.task-card__status-dot:hover {
  width: 10px !important;
  height: 10px !important;
}

/* Easy CSS Adjustment of TaskNotes checkbox size */
:root {
  --tasknotes-checkbox-size: 10px;
}

Hierarchy View Guidlines

This shows hierarchical subtasks as "containers" using fine little lines inside the widegt to visually communicate context more clearly.

/* Create line above evers subtask */
.task-card__subtasks > .task-card {
  border-top: 1px solid var(--background-modifier-border);
  padding-top: 2px;
  margin-top: 2px;
    border-radius: 0 !important;  /* Control rounding */

}

/* Remove double line above subtask widget list */
.task-card__subtasks > .task-card:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
    border-radius: 0 !important;  /* Control rounding */

}

/* Top line above task / subtask widget block */
.task-card__subtasks {
  box-shadow: 0 -1px 0 0 var(--background-modifier-border);
  padding-top: 2px;
  margin-top: 2px;
  border-radius: 0 !important;  /* Control rounding */