[Enhancement] Improve styling and semantics for development and accessibility

[rockerBOO]

Is your enhancement request related to a problem? Please describe.

Related #5056 . The desire is to improve the theme-ablity of the application. In this push some issues came up.

• Pure CSS framework is used for layout, styling which isn't being updated
• Finding where parts of the code are found in the templates is difficult because of a lack of searchable terms
• HTML semantics are duplicated for styling when not necessary (<div class="pure-x"><div class="pure-y"></div></div>)
• Colors are various but somewhat similar making for increased complexity
• CSS styling using pixels infers different looks based on screen pixel density (like on mobile)
• JS implementations use .parentNode to target nodes compared to using querySelector or getElementByNode where appropriate. Reduced the resilience to changing the HTML structure.

JS/CSS utilizes IE11 support, limiting some usage of recent improvement in browsers.
Notably:

• CSS variables

Describe the solution you'd like
Improve the HTML semantics using naming conventions for the content and remove styling classes.

• <div class="video"></div> for example using the name of what we want to be. Allows us to search the code base for where it is defined
• Incrementally process to remove pure dependency and use CSS with standard classes and id's
• Utilize CSS grid/flex containers to replace pure
• Add CSS variables to allow theming, improve development, and reduce complexity
• Improve JS selectors targeting using id's for things like comments replies
• Remove styling divs and utilize semantic HTML

Describe alternatives you've considered
I looked at just porting the CSS values but targeting specific spots was difficult because they did not have associated classes or id's and used pure for styling. Using pure styling required specific "fixes" to undo some behavior that diminished accessibility, as well as applying theming to specific color, padding, font choices pure applys.

I then tried to limit changes to the HTML but the duplicate divs used for pure styling caused a lot of poor CSS implementations as targeting would be confusing.

Additional context
To this end I decided to rehash all the template HTML and make it as simple as possible. Reduced the complexity of the CSS to the bare minimum, and name things as appropriate to what they contain as possible.

Incrementally improve pure framework with theme-able fixes to deprecate pure. This is applying CSS variables to pure components and removing pure CSS components in the code until they are gone.

Improving JS free support as well as JS support in removing <a href="javascript:null;"> and keeping the link to remain valid, but prevent the URL from acting if JS is enabled, for AJAX enhanced support for things like subscribing.

Improving JS query selectors by adding appropriate id tagging for things like comments and replies.

Fieldset/form layout pretty generic styling but could be improved. Aligns to the center with 2 sides with the label and input. Increased form element size to the font size (1em/1rem)

Replace with buttons where no URL will ever be defined. Same behavior but acts as a button while helps with accessibility and styling as most cases these should be buttons that trigger javascript (like show/hide comments)

Improve player CSS to use em for font size vs 10px to improve click-ability. Various improvements to standardize the size of icons and text from various videojs extensions. I didn't (at this time) replicate behavior of "youtube" theme and the default theme for the player. Because the font size could be much larger (10px vs the default 16px on desktop) the player may look significantly different than it does currently. Also different font sizes were set by extension developers which made the look uneven.

Re-organized the comments structure for a little more flexibility and mimicking some styling similar to some other platforms. Open to feedback about these, and any other section.

Designed the channel page simply, with navigation and buttons. Also showing the pagination bar which I hope stands out as the text before was kinda hard to see.

Time elements now have hover to show the localized time as well as datetime inside <time>

Some pages like the playlists management I had to redesign or mostly re-implement. I use playlists a lot but still working through the behavior.

CSS variables for the main structure of the page.

:root {
  --sans-serif: ui-rounded, "Hiragino Maru Gothic ProN", "Quicksand",
    "Comfortaa", "Manjari", "Arial Rounded MT", "Arial Rounded MT Bold",
    "Calibri", source-sans-pro, sans-serif;
  --monospace: ui-monospace, "Cascadia Code", "Source Code Pro", "Menlo",
    "Consolas", "DejaVu Sans Mono", monospace;

  /** Gap between sections */
  --gap: 2rem;

  /** Gap between parts in a section */
  --secondary-gap: 0.6rem;

  /** Radius for rounded corners */
  --radius: 0.3rem;

  /** Border size */
  --border-width: 0.2rem;
}

I made a number of changes and had to make some decisions in some places to improve compatibility or recreate behavior pure was doing. This may have some consequences in how things may look or work than previously but I tried to remain as true as I could to the original design.

Theming works with this implementation but selecting it hasn't been added as it requires some database changes.

theme-tokyonight.css

:root {
  --fg-color-dark: #f8f8f2;
  --bg-color-dark: #1a1b26;
  --accent-color-dark: #fff;
  --accent-bg-color-dark: #3e4f80;
  --secondary-color-dark: #e3e3e3;
  --secondary-bg-color-dark: #2e2e3e;

  /* light theme colors */
  --fg-color-light: black;
  --bg-color-light: #eee;
  --accent-color-light: #3a3a3a;
  --accent-bg-color-light: #008bec;
  --secondary-color-light: #424242;
  --secondary-bg-color-light: #d9d9d9;
}

I am using a stylelint ruleset to make sure compatibility with browsers is supported. This browserlist ruleset > 0.2% and not dead but we can modify to whichever minimums might be required. Also hinted at in the theme issue is a CSS pre-processor could be used to improve compatibility through polyfills or modifying CSS to better support all the browsers.

/** @type {import('stylelint').Config} */
const browsers = ["> 0.2% and not dead"];
export default {
  extends: "stylelint-config-standard",
  plugins: [
    "stylelint-plugin-defensive-css",
    "stylelint-no-unsupported-browser-features",
  ],
  rules: {
    "plugin/use-defensive-css": [true, { severity: "warning" }],
    "media-feature-range-notation": "prefix",
    "plugin/no-unsupported-browser-features": [
      true,
      {
        browsers,
        ignore: ["rem"],
        ignorePartialSupport: true,
      },
    ],
    "unit-allowed-list": [
      ["em", "rem", "deg", "%", "s", "fr"],
      {
        ignoreProperties: {
          px: ["font-size", "/^border/"],
          vmin: "width",
          vh: "/height/",
          ms: ["/transition/", "/animation/"],
        },
      },
    ],
  },
};

Added a design-system.html page that showcases all the component elements to help improve styling and creating new themes. We can make sure all the components are supported without having to browse to individual pages, as well as easily changing themes and color schemes, for light, dark, and auto (dark or light depending on user preferences set in their OS).

Dark default colors

Light default colors

Light colors need more tuning but showing as it is right now.

Current issues at this time:

• Playlist management is incomplete in terms of design
• Playlist items not showing up on right side when watching a video (maybe some javascript selector issues)
• Light color styling incomplete
• Language support not fully tested
• Responsive support not complete
• Colors need a pass for when they are used. Some colors not used appropriately which can be improved
• Form elements can be a little disjointed and not consistent. Can feel floaty and might need improvement to make it feel congruent

Because of the number of changes and issues created from all these changes, I am requesting, if possible, someone to work with to get this released. I could try to break it up into smaller pieces but they are somewhat all connected. CSS/HTML template/JS changes were required for these improvements. No database changes or modeling changes required.

Willing to do what is required to get these changes accepted.

Thanks for reading this far and appreciate any feedback.