☰

YouTube - Show Full View Count and Date (unless hovering)

Brings back the full view count and date to the description box.

  1. /* ==UserStyle==
  2. @name           YouTube - Show Full View Count and Date (unless hovering)
  3. @description    Brings back the full view count and date to the description box.
  4. @namespace      lednerg
  5. @version        23.7.26
  6. @author         lednerg
  7. @license        CC-BY-NC-SA-4.0
  8. ==/UserStyle== */
  9.  
  10. /* Instead of "1.7M views 2 years ago" it will say "1,739,201 views • Dec 12, 2019" in the description box.
  11.    In case you need to see the default numbers, just hover the mouse over the description box.
  12.    Normally there's a tooltip that appears when you hover over the view count, and it shows the full view count and date.
  13.    This CSS script works by keeping that tooltip visible and repositioning it over the default numbers. */
  14.  
  15. @-moz-document domain("youtube.com") {
  16.  
  17. /* Places the tooltip over the "time ago" statement and mimics the font */
  18.     #description .tp-yt-paper-tooltip {
  19.         opacity: 1;
  20.         transition: opacity .125s;
  21.         display: block !important;
  22.         position: relative;
  23.         bottom: 101px;
  24.         left: 2px;
  25.         padding: 2px !important;
  26.         padding-right: 50px !important; /* extra padding for large view counts */
  27.         font-size: 14px !important;
  28.         font-weight: 500 !important;
  29.     }
  30. /* Fade out tooltip whenever the mouse hovers over the description box (while it's collapsed) */
  31.     ytd-watch-metadata[description-collapsed] #description:hover .tp-yt-paper-tooltip {
  32.         opacity: 0 !important;
  33.         transition: opacity .125s;
  34.     }
  35. /* Keeps tooltip's background from appearing during transitions */
  36.     ytd-watch-metadata:not([description-collapsed]) #description .tp-yt-paper-tooltip {
  37.         opacity: 0 !important;
  38.         transition: opacity .125s;
  39.     }
  40. /* Adds the • symbol between the default view count and date in order to match the tooltip */
  41.     #description #info span:first-child + span:before {
  42.         content: " •";
  43.         margin-right: -3.5px;
  44.     }
  45. /* Matching background color for dark mode */
  46.     html[dark] #description .tp-yt-paper-tooltip {
  47.         background-color: #272727 !important;
  48.     }
  49.       /* dark mode while hovering */
  50.     html[dark] #description:hover .tp-yt-paper-tooltip {
  51.         background-color: #3f3f3f !important;
  52.     }
  53. /* Matching background color for light mode */
  54.     html:not([dark]) #description .tp-yt-paper-tooltip {
  55.         color: #0f0f0f !important;
  56.         background-color: #f2f2f2 !important;
  57.     }
  58.       /* light mode while hovering */
  59.     html:not([dark]) #description:hover .tp-yt-paper-tooltip {
  60.         color: #0f0f0f !important;
  61.         background-color: #e5e5e5 !important;
  62.     }
  63.  
  64. }