Stylesheets

TaskPaper uses the LESS CSS pre-processor to build style sheets. This is a reference, see Creating StyleSheets for an introduction.

The set of style-able elements and attributes is different and limited compared to CSS/DOM styling. TaskPaper styling doesn't have a uniform set of element attributes and style properties. Instead different elements supports the attributes listed below.

To see TaskPaper's default stylesheet rules open TaskPaper.app/Content/Resources/base-stylesheet.less. This is also good general stylesheet formatting reference.

Variables

Base Size:

  • @base-font-size: Float;
  • @user-font-size: Float;
    • Set by the View > Zoom In and View > Zoom Out menu commands. If you set to a fixed value in your stylesheet then those commands will stop working.
  • @ui-scale: Float;
    • Ratio of @user-font-size / @base-font-size. You don't want to set this value, but you may want to use the variable to help calculate other values in your stylesheet. For example the base stylesheet adjust the default indent per level by this value, so indents scale larger as you zoom in.

UI Colors:

  • @tint-color: Color;
  • @selection-color: Color;
  • @invisibles-color: Color;
  • @background-color: Color;

Base Text:

  • @font-family: Comma separated list of font names;
    • The strings should be the "generic" name of your desired font. For example use "Times" not "Times Italic". If you want to use the italic version of the font use the font-style attribute described below. TaskPaper uses the first available font from the list of font names.
  • @text-color: Color;
  • @line-height-multiple: Number;

Handles:

  • @handle-size: Float;
  • @handle-color: Color;
  • @handle-secondary-color: Color;

Elements

Each element has a name, attributes, and style properties.

  • Name: The element name, used by selectors to select the element.
  • Attributes: The attributes that [attribute] selectors may target.
  • Style Properties: The properties that you can style on the element.

Window Element

Target the window element to style the window.

  • Style Properties:

    • appearance: AppearanceStyle;

Target the sidebar element to style the project list sidebar.

  • Style Properties:

    • appearance: AppearanceStyle;

Searchbar Element

Target the searchbar element to style the editor searchbar.

  • Style Properties:

    • appearance: AppearanceStyle;
    • color: Color;
    • secondary-text-color: Color;
    • error-text-color: Color;
    • placeholder-color: Color;
    • background-color: Color;

Editor Element

Target the editor element to style the outline editor text area. Contains item elements.

  • Style Properties:
    • item-indent: Float;
    • caret-width: Float;
    • caret-color: Color;
    • drop-indicator-color: Color;
    • selection-background-color: Color;
    • guide-line-color: Color;
    • guide-line-width: Float;
    • fold-color: Color;
    • editor-wrap-to-column: Float;
    • item-wrap-to-column: Float;
    • top-padding-percent: Float%; // for example 50%
    • bottom-padding-percent: Float%;
    • typewriter-scroll-percent: Float%;

Item Element

Target the item element to style items. Contains run elements. For styling purposes does not contain other item elements.

  • Attributes:

    • depth - Item depth in outline.
    • bodyContent - Item's text content minus project and task syntax and minus trialing tags syntax. Useful if you want to change styling of an item based on your own custom syntax. For example make an item that starts with >> red.
    • focused - True if is focused item.
    • mouseOver - True if mouse is over item.
    • mouseOverHandle - True if mouse is over item's handle.
    • leaf - True if item has no children.
    • expanded - True for expanded items.
    • collapsed - True for collapsed items.
    • filtered - True for items that are not showing all children because those children are filtered.
    • empty - True for items with no body text and no children.
    • Each @tagname(value) in the item's body text is exposed as data-[tagname].

  • Style Properties:

    • handle-size: Float;
    • handle-color: Color;
    • handle-border-color: Color;
    • handle-border-width: Float;
    • line-height-multiple: Float;
    • paragraph-spacing-before: Float;
    • paragraph-spacing-after: Float;
    • color: Color; inherited
    • font-family: Font; inherited
    • font-style: normal | italic; inherited
    • font-weight: normal | bold; inherited
    • font-size: Float; inherited
    • cursor: default | pointer | text;
    • background-color: Color;
    • text-decoration: none | underline | line-through;
    • text-underline: LineStyle;
    • text-underline-color: Color;
    • text-strikethrough: LineStyle;
    • text-strikethrough-color: Color;
    • text-baseline-offset: Float;
    • text-expansion: Float;

Run Element

Target the run element to style item body text runs. Run attributes allow you to style individual ranges of item text, instead of styling all item text the same.

  • Attributes:

    • link - Associated value is URL string.
    • tag - Associated value is tag name, applies to full tag range.
    • tagname - Associated value is tag name, applies to tag name range only.
    • tagvalue - Associated value is tag value, applies to tag value range only.
    • lead - No associated value, applies to a task's leading dash + space.
    • content - Marker with empty string value. This attribute is applied to an item's full text excluding:
      • Task's leading dash + space.
      • Project's trailing colon.
      • Any item's trailing tags.

  • Style Properties:

    • color: Color; inherited
    • font-family: Font; inherited
    • font-style: normal | italic; inherited
    • font-weight: normal | bold; inherited
    • font-size: Float; inherited
    • cursor: default | pointer | text;
    • background-color: Color;
    • text-decoration: none | underline | line-through;
    • text-underline: LineStyle;
    • text-underline-color: Color;
    • text-strikethrough: LineStyle;
    • text-strikethrough-color: Color;
    • text-baseline-offset: Float;
    • text-expansion: Float;

Style Property Value Formats

  • Float: Floating point number.
  • String: Quoted or unquoted text string.
  • Font: Comma separated list of font names.
  • Color: A standard CSS color declaration. See CSS Colors for more information.
  • AppearanceStyle: NSAppearanceNameVibrantLight or NSAppearanceNameVibrantDark

  • LineStyle: A space separated list of the following items. Each listed item combines with the other listed items to create a final line style. See NSUnderlineStyle for more information.

    • NSUnderlineStyleNone
    • NSUnderlineStyleSingle
    • NSUnderlineStyleThick
    • NSUnderlineStyleDouble
    • NSUnderlinePatternSolid
    • NSUnderlinePatternDot
    • NSUnderlinePatternDash
    • NSUnderlinePatternDashDot
    • NSUnderlinePatternDashDotDot
    • NSUnderlineByWord

results matching ""

    No results matching ""