Theme CSS and precedence

TaskPaper
1

I’ve looked at some related answers here, but I don’t think I understand them when it comes to precedence of styles in themes. What I am trying to do is have tasks show as full in red text when they are tagged @today until they are @done, when they should take on the color and strikethrough scheme of other @done items. However, the items tagged both @today and @done remain styled as if they are just @today. The CSS rules I have for each are, in this order (though order doesn’t appear to matter:

item[data-today], run[tag=data-today] {
     color: rgb(209, 28, 36);
     >   run[link] {
        color: rgb(209, 28, 36);
        font-style: normal;
    }
}

item[data-done], run[tag=data-done] {
    color: rgba(10, 41, 51, 0.555) !important;
    text-strikethrough-color: rgba(34, 55, 78, 0.425);
    >   run[content] {
         color: rgba(10, 41, 51, 0.555) !important;
        text-strikethrough-color: rgba(34, 55, 78, 0.425);
    }
 }
2

Maybe this will do what you want?

item[data-today] {
  color: rgb(209, 28, 36);
}

item[data-done] {
  color: @text-color;  
}

Not sure if you’ve found it yet, but hear’s a referent to stylesheets:

https://guide.taskpaper.com/reference/stylesheets/

In particular TaskPaper stylesheets are a subset of features/behavior compared to normal HTML/CSS …
generally the best way to go is look at the base stylsheet (see above link) and modify from there.

I think order in the stylesheet will determine precedence for two rules with the same specificity.

3

I’ve been using that reference. The issue, such as it is, is in trying to also color the tag appropriately (the same) along with the rest of the line. Not to mention links. Once I start trying to do those, things go awry. I haven’t found the way to do that, even starting with the two rules you shared above.

4

This might be closer?

item[data-today] {
  color: rgb(209, 28, 36);
  > run {
    color: rgb(209, 28, 36);
  }
}

item[data-done] {
  color: @text-color;  
  > run {
    color: @text-color;  
  }
  > run[link] {
    color: @tint-color;
  }
  > run[link^="button"] {
    color: @text-color;
  }
  > run[tag] {
    color: mix(@text-color, @background-color, 35%);
  }
}
5

That’s perfect. Thanks so much for your patience!

1 Like