@done override other tag styles


#1

Is there a way in the stylesheet to have the @done tag override the styling of other tags on the item? I would like the @due and @flag styles to match the item in the following example:


#2

I’m just heading out now, but can you post in a bit more detail on what exactly you want? I think it probably is possible, but I’m not sure what styles are being applied by what tags… and what you want the end result to look like.


#3

My goal is to make the @done item’s tags not stand out.

I found a way to do what I want, but thinking there might be an easier way. Here is the desired outcome (or possibly with strikeout applied as well, haven’t decided):

This can be accomplished for those specific tags with:

item[data-done], run[tag=data-done] {
  color: @gruvbox-light4;
  > run[content] {
    text-strikethrough: NSUnderlineStyleSingle;
  	text-strikethrough-color: @gruvbox-light4;
  }
  > run[tag=data-flag] {
    color: @gruvbox-light4;
  }
  > run[tag=data-due] {
    color: @gruvbox-light4;
  }
}

In order to apply to all tags except done there’s probably a way to do tag!=data-done but I can’t seem to figure it out.


#4

It depends on how you’ve defined the custom color styles for @due etc. The style rules are applied based on which rules are most specific… i.e. “general” rules are applied first, more specific ones are applied later. There’s a spec “CSS Specificity” the describes the details. (though not that TaskPaper isn’t full css, so while it follows that spec I think, you’ll likely run into lots of example that don’t work in TaskPaper because it doesn’t support other aspects of CSS.

Anyway, see this example, which I think does what you want in a relatively clean fashion… Note this is a full example, your stylesheet should just be “this”. Once you see how this works then you can figure how to add it to whatever more complex stylesheet you are working with:

@doneColor: lightgray;

run[tag=data-1] {
  color: red;
}

run[tag=data-2] {
  color: green;
}

run[tag=data-3] {
  color: blue;
}

item[data-done] {
  > run {
    color: @doneColor;
  }
  > run[content] {
    text-strikethrough-color: @doneColor;
  }
}