☰

YouTube - Large "Show less" Button

Turns the right half of the description box into a large "Show less" button.

当前为 2024-08-14 提交的版本，查看 最新版本。

  1. /* ==UserStyle==
  2. @name           YouTube - Large "Show less" Button
  3. @namespace      lednerg
  4. @version        24.8.14
  5. @description    Turns the right half of the description box into a large "Show less" button.
  6. @author         lednerg
  7. @license        CC-BY-NC-SA-4.0
  8. ==/UserStyle== */
  9.  
  10. /*  I got tired of having to scroll all the way down to get to the "Show less" button,
  11.    so I made this. It lets you collapse the description box by clicking the right half
  12.    of it. The button lights up when hovering over it. If there are any links where the
  13.    button is, they will still be clickable. It also allows you to select any text that
  14.    might be on top of where the button is. */
  15.  
  16. @-moz-document domain("youtube.com") {
  17.     
  18.     tp-yt-paper-button#collapse {
  19.         border: none !important;
  20.         box-shadow: none !important;
  21.     }
  22.     
  23.     /* "Show more" text */
  24.     ytd-watch-metadata[description-collapsed] tp-yt-paper-button#expand {
  25.         opacity: 0.2 !important;
  26.         transition: opacity .5s !important;
  27.         border-width: 0px !important;
  28.         box-shadow: none !important;
  29.     }
  30.     /* "Show more" text when hovered */
  31.     ytd-watch-metadata[description-collapsed] #description:hover tp-yt-paper-button#expand {
  32.         opacity: 1 !important;
  33.         transition: opacity .125s !important;
  34.     }
  35.     /* Puts some space before the "Show more" text */
  36.     ytd-watch-metadata[description-collapsed] tp-yt-paper-button#expand:before {
  37.         content: "   " !important
  38.     }
  39.     /* "Show less" button location, size, coloring, etc */
  40.     ytd-watch-metadata:not([description-collapsed]) tp-yt-paper-button#collapse {
  41.         color: transparent !important; /* hides original "Show less" text */
  42.         position: absolute !important;
  43.         bottom: 0% !important;
  44.         right: 0% !important;
  45.         height: 100%;
  46.         width: 50%;
  47.         opacity: 0 !important;
  48.         z-index: 0;
  49.         border-radius: 0;
  50.     }
  51.     /* "Show less" button when hovered */
  52.     ytd-watch-metadata:not([description-collapsed]) tp-yt-paper-button#collapse:hover {
  53.         background: linear-gradient(90deg, #9990 0%, #9992 22%, #9993 45%, #9993 55%, #9992 78%, #9990 100%) !important; 
  54.         transition: opacity .125s !important;
  55.         opacity: 1 !important; 
  56.     }
  57.     /* "Show less" text */
  58.     ytd-watch-metadata:not([description-collapsed]) tp-yt-paper-button#collapse:before {
  59.         color: #fff !important;
  60.         content: "Show less";
  61.         position: absolute;
  62.         bottom: 0;
  63.         text-align: center;
  64.         width: 100%;
  65.     }
  66.     /* "Show less" text when hovered */
  67.     ytd-watch-metadata:not([description-collapsed]) tp-yt-paper-button#collapse:hover:before {
  68.         opacity: 1 !important;
  69.         transition: opacity .25s !important;
  70.     }
  71.     /* Allows links, Chapters, Key Moments, etc to be clicked under "Show less" button*/
  72.     ytd-watch-metadata:not([description-collapsed]) #description a,
  73.     ytd-watch-metadata:not([description-collapsed]) #description span,
  74.     ytd-watch-metadata:not([description-collapsed]) #description .yt-formatted-string,
  75.     ytd-watch-metadata:not([description-collapsed]) div[slot="extra-content"] * {
  76.         position: relative !important;
  77.         z-index: 1 !important;
  78.     }
  79.     /* Move "Show less" down while open so it doesn't collide with text. */
  80.     ytd-watch-metadata:not([description-collapsed]) ytd-text-inline-expander {
  81.         min-height: 20px;
  82.         padding-bottom: 20px;
  83.         /* retrying the thing that was glitchy but in this element */
  84.         margin-top: -20px;
  85.         padding-top: 20px;
  86.     }
  87.  
  88.     /* Sometimes extra stuff under the description blocks the button. This narrows that area. */
  89.     div[slot="extra-content"] {
  90.         width: 70% !important;
  91.     }
  92.     div#left-arrow-container {
  93.         position: absolute !important;
  94.         z-index: 999 !important;
  95.     }
  96.     div#right-arrow-container {
  97.         position: absolute !important;
  98.         z-index: 999 !important;
  99.     }
  100.  
  101. }