Warnings and error from Stylish editor not understood.

I wrote a style to change the font on YouTube to Times New Roman. But the editor used by Stylish is giving me warnings and an error that I don't understand. They just don't make sense. In order to be more specific, I have to use the same rules used by YouTube's server. The style I wrote is below. The warnings and errors are below that. If someone could explain what's going on, I'd appreciate it.

body, #search-input.ytd-searchbox-spt input, paper-item, .entity-type.ytcp-navigation-drawer, .entity-name.ytcp-navigation-drawer, paper-item.ytcp-navigation-drawer, paper-icon-item.ytcp-navigation-drawer, input.ytcp-omnisearch, ytcp-app[enable-page-title] .page-title.ytcp-app, .tab-content.paper-tab, .chip-and-bar.ytcp-chip-bar .ytcp-chip-bar, ytcp-button, ytcp-table-header, .icon-text-edit-triangle-wrap.ytcp-video-row .label-span.ytcp-video-row, .restrictions-list.ytcp-video-row, .tablecell-date.cell-body.ytcp-video-row, #row-container.ytcp-video-row, .tablecell-date.cell-body.ytcp-video-row .cell-description.ytcp-video-row, .tablecell-comments.cell-body.ytcp-video-row a.ytcp-video-row, .tablecell-comments.cell-body.ytcp-video-row span.ytcp-video-row, .likes-container.ytcp-video-row .primary-label.ytcp-video-row, .likes-container.ytcp-video-row .percent-label.ytcp-video-row, #video-title.ytcp-video-list-cell-video, .description.ytcp-video-list-cell-video, .ghp-header-title, .ghp-header-searchBox, .ghp-card-title, .ghp-iconTextComponent-label, .ghp-button, ytcp-app
{
    font-family: Times New Roman!important
}

ytcp-popup-container
{
    --yt-sort-menu-item-style_-_font-family: Times New Roman!important;
    --ytd-code-snippet_-_font-family: Times New Roman!important;
    --ytd-caption_-_font-family: Times New Roman!important;
}

The error

  1. "Expected rbrace"—Seems the parser doesn't understand CSS variables. YouTube uses a lot of them.

The warnings

  1. "Don't use adjoining classes"—Again, I need to match the selector used by Google. They used adjoining classes. This warning appears many times.
  2. "Don't use IDs in selectors"—So where do you use the ID syntax in CSS?
  3. "Element (input.ytcp-omnisearch) is overqualified, just use .ytcp-omnisearch without element name."—Well, tell that to Google.
  4. "Use of !important"—It's rather needed in order for the style to override the stock stylesheet.
  5. "Empty rule"—Cascade from the error above.
Sign In or Register to comment.