Skip to content
This repository has been archived by the owner on Dec 12, 2023. It is now read-only.

Plugins꞉ 6. Notification window

Daniel Chýlek edited this page Aug 18, 2018 · 4 revisions

Here is a collection of useful features and tips for notification.js.

Theme & Font Size 1.10.2

The <html> element has the same data-td-theme and data-td-font attributes (with the same values and usage) as in the browser window.

CSS Selector Priority 1.11.1

The <html> element has an ID #tduck, which can be used at the start of CSS selectors when !important is not sufficient.

Body Classes

The <body> element has one or more classes:

  • td-hover 1.4.1
    • Present if the window is hovered (it may not be focused, so mouse events would not work)
  • td-screenshot 1.8.3
    • Since this version, injected HTML is included in tweet screenshots
    • The class is intended to modify or hide elements in screenshots
    • While the width of a screenshot is the same as the width of its source column, the height is calculated after all injections are applied
  • td-notification 1.13.3
    • The opposite of td-screenshot, use this for elements which should only be modified or hidden if they're not in a screenshot
  • td-example 1.16
    • Present for the example notification, which is displayed when Options -> Notifications is open
    • In previous versions, this was signified by a td-example-notification attribute on the <body> element

Example

#td-skip {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.td-hover #td-skip {
  opacity: 1;
}

.td-example #td-skip {
  display: none;
}