☰

Better Youtube

Prettier youtube with red sub button and less rounded edges

  1. // ==UserScript==
  2. // @name        Better Youtube
  3. // @version     3.7
  4. // @author      tiramifue
  5. // @description Prettier youtube with red sub button and less rounded edges
  6. // @match       https://*.youtube.com/*
  7. // @exclude     *://music.youtube.com/*
  8. // @exclude     *://*.music.youtube.com/*
  9. // @run-at      document-end
  10. // @grant       GM_addStyle
  11. // @namespace   https://greasyfork.org/users/570213
  12. // @license     Apache-2.0
  13. // ==/UserScript==
  14.  
  15. // updated      2024-12-15
  16.  
  17. (function(){
  18.     GM_addStyle(
  19. `
  20. html:not(.style-scope)[dark],:not(.style-scope)[dark]{
  21.     --yt-spec-10-percent-layer:rgb(255 255 255 / 10%);
  22.     --yt-spec-badge-chip-background:rgb(255 255 255 / 7%);
  23.     --yt-spec-additive-background:rgb(255 255 255 / 7%);
  24.     --yt-spec-menu-background:rgb(18 18 18 / 98%);
  25. }
  26. #ytp-id-18 {
  27.     background:rgb(18 18 18 / 98%);
  28.     border:1px solid rgb(255 255 255 / 10%);
  29.     box-shadow: 0px 0px 30px 6px rgba(0, 0, 0, 0.7);
  30. }
  31. div.sbdd_b {
  32.     backdrop-filter: blur(90px);
  33. }
  34. html[dark] div.sbsb_a {
  35.     background:rgb(18 18 18 / 80%);
  36. }
  37. div.sbfl_b {
  38.     background:transparent;
  39.     color:var(--yt-spec-text-primary);
  40. }
  41. li.gsfs {
  42.     color:var(--yt-spec-text-primary);
  43. }
  44. li.sbsb_d {
  45.     background:hsla(18, 0%, 100%, 0.08);
  46. }
  47. tp-yt-iron-dropdown.style-scope.ytd-popup-container {
  48.     backdrop-filter: blur(90px);
  49.     border: 1px solid rgb(255 255 255 / 10%);
  50.     border-radius: 12px;
  51.     box-shadow: 0px 0px 30px 6px rgba(0, 0, 0, 0.7);
  52. }
  53. .YtSearchboxComponentSuggestionsContainer, .ytSearchboxComponentSuggestionsContainer {
  54.     backdrop-filter: blur(90px);
  55.     border: 1px solid rgb(255 255 255 / 10%);
  56.     border-radius: 12px;
  57.     box-shadow: 0px 0px 30px 6px rgba(0, 0, 0, 0.7);
  58.     background:rgb(18 18 18 / 80%);
  59. }
  60. ytd-thumbnail[size=large] a.ytd-thumbnail, ytd-thumbnail[size=large]:before {
  61.     border-radius: 1px;
  62. }
  63. #thumbnail {
  64.     border-radius: 1px;
  65. }
  66. .yt-spec-button-shape-next.yt-spec-button-shape-next--filled.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--size-m {
  67.     color: var(--yt-spec-text-primary);
  68.     background: #cc0000;
  69.     border-radius: 2px;
  70.     text-transform: uppercase;
  71. }
  72. button.yt-spec-button-shape-next.yt-spec-button-shape-next--filled.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--size-m:hover {
  73.     background: #880000;
  74. }
  75. .yt-spec-button-shape-next.yt-spec-button-shape-next--filled.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--size-m[aria-label="Join this channel"] {
  76.     background: var(--yt-spec-badge-chip-background);
  77.     text-transform: capitalize;
  78. }
  79. button.yt-spec-button-shape-next.yt-spec-button-shape-next--filled.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--size-m[aria-label="Join this channel"]:hover {
  80.     background: #414141;
  81. }
  82. .yt-spec-button-shape-next--size-m {
  83.     border-radius: 2px;
  84. }
  85. .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-start {
  86.     border-radius: 2px 0 0 2px;
  87. }
  88. .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-end {
  89.     border-radius: 0 2px 2px 0;
  90. }
  91. yt-chip-cloud-chip-renderer[modern-chips][chip-style] {
  92.     border-radius: 2px;
  93. }
  94. #container.ytd-searchbox {
  95.     border-radius: 2px 0 0 2px;
  96. }
  97. #search-icon-legacy.ytd-searchbox {
  98.     border-radius: 0 2px 2px 0;
  99. }
  100. .sbdd_b {
  101.     border-radius: 8px;
  102. }
  103. ytd-watch-metadata[modern-metapanel] #description.ytd-watch-metadata {
  104.     border-radius: 2px;
  105. }
  106. ytd-guide-entry-renderer[guide-refresh] {
  107.     border-radius: 2px;
  108. }
  109. .yt-spec-touch-feedback-shape {
  110.     border-radius: 2px;
  111. }
  112. ytd-rich-metadata-renderer[rounded] {
  113.     border-radius: 2px;
  114. }
  115. #tooltip {
  116.     display: none;
  117. }
  118. ytd-engagement-panel-section-list-renderer[dialog] #content.ytd-engagement-panel-section-list-renderer {
  119.     background: transparent;
  120. }
  121. #header.ytd-engagement-panel-title-header-renderer {
  122.     background: rgb(18 18 18 / 80%);
  123.     border-bottom: 1px solid rgb(255 255 255 / 5%);
  124. }
  125. ytd-engagement-panel-section-list-renderer[dialog] #header.ytd-engagement-panel-section-list-renderer {
  126.     margin: 0;
  127. }
  128. ytd-engagement-panel-section-list-renderer[dialog] ytd-section-list-renderer.ytd-engagement-panel-section-list-renderer {
  129.     background: rgb(18 18 18 / 50%);
  130. }
  131. ytd-engagement-panel-section-list-renderer[dialog][target-id=engagement-panel-comments-section] {
  132.     width: 40vmax;
  133. }
  134. #menu.ytd-engagement-panel-title-header-renderer:not(:empty) {
  135.     flex: 1;
  136. }
  137. #title-container.ytd-engagement-panel-title-header-renderer {
  138.     max-width: 150px;
  139. }
  140. tp-yt-paper-dialog[modern] {
  141.     background: rgb(18 18 18 / 98%);
  142.     border: 1px solid rgb(255 255 255 / 10%);
  143. }
  144. tp-yt-iron-overlay-backdrop.opened {
  145.     opacity: 0.6;
  146. }
  147. ytd-dismissal-follow-up-renderer[darker-dark-theme][dialog][dialog][dialog] {
  148.     background-color: transparent;
  149. }
  150. ytd-guide-entry-renderer[guide-refresh] #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer:hover, ytd-guide-entry-renderer[guide-refresh] #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer:focus {
  151.     border-radius: 2px;
  152. }
  153. ytd-guide-entry-renderer[guide-refresh] #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer:active {
  154.     border-radius: 2px;
  155. }
  156. ytd-guide-entry-renderer[guide-refresh] yt-interaction.ytd-guide-entry-renderer {
  157.     border-radius: 2px;
  158. }
  159. .yt-spec-button-shape-next--size-s {
  160.     border-radius: 2px;
  161. }
  162. button.yt-spec-button-shape-next.yt-spec-button-shape-next--text.yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading.yt-spec-button-shape-next--align-by-text:hover {
  163.     background-color: rgb(38 56 80 / 55%);
  164. }
  165. .yt-spec-button-shape-next--size-l {
  166.     border-radius: 2px;
  167. }
  168. .yt-spec-button-shape-next--size-l.yt-spec-button-shape-next--icon-button {
  169.     width: 44px;
  170.     height: 44px;
  171. }
  172. #content.ytd-engagement-panel-section-list-renderer, ytd-item-section-renderer[static-comments-header] #header.ytd-item-section-renderer, .watch-while-engagement-panel.ytd-reel-video-renderer {
  173.     background: rgb(18 18 18);
  174. }
  175. ytd-reel-video-renderer[is-watch-while-mode] .watch-while-engagement-panel.ytd-reel-video-renderer {
  176.     border-radius: 12px;
  177. }
  178. ytd-item-section-renderer[static-comments-header] #header.ytd-item-section-renderer {
  179.     border-top: 1px solid rgb(255 255 255 / 10%);
  180. }
  181. yt-chip-cloud-chip-renderer, ytd-guide-entry-renderer, #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer:active, #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer:hover, #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer:focus, yt-interaction.ytd-guide-entry-renderer, #description.ytd-watch-metadata {
  182.     border-radius: 2px;
  183. }
  184. tp-yt-paper-item.ytd-guide-entry-renderer {
  185.     --paper-item-focused-before-border-radius: 2px;
  186. }
  187. #sponsor-button > ytd-button-renderer {
  188.     background: rgb(35 35 35);
  189.     border-radius: 2px;
  190. }
  191. #sponsor-button > ytd-button-renderer > yt-button-shape > button {
  192.     border: none;
  193. }
  194. #navigation-button-down > ytd-button-renderer > yt-button-shape > button > yt-touch-feedback-shape > div {
  195.     border-radius: 28px;
  196. }
  197. #voice-search-button.ytd-masthead {
  198.     background-color: transparent;
  199. }
  200. yt-interaction.rounded-large .fill.yt-interaction, yt-interaction.rounded-large .stroke.yt-interaction {
  201.     border-radius: 2px;
  202. }
  203. #target[title="Email"] > yt-icon > span > div {
  204.     filter: invert(1);
  205. }
  206. ytd-engagement-panel-section-list-renderer[modern-panels]:not([live-chat-engagement-panel]) {
  207.     border-radius: 2px;
  208. }
  209. ytd-reel-video-renderer:not([enable-player-metadata-container]) .watch-while-engagement-panel.ytd-reel-video-renderer {
  210.     background: rgb(15 15 15);
  211. }
  212. yt-interaction.circular .fill.yt-interaction, yt-interaction.circular .stroke.yt-interaction {
  213.     border-radius: 2px;
  214. }
  215. yt-icon-button.ytd-masthead:hover, ytd-topbar-menu-button-renderer.ytd-masthead:hover, ytd-notification-topbar-button-renderer.ytd-masthead:hover, .ytSearchboxComponentClearButton:hover {
  216.     border-radius: 2px;
  217. }
  218. #overlays > yt-thumbnail-overlay-badge-view-model {
  219.     display: none;
  220. }
  221. ytd-watch-flexy[rounded-player-large][default-layout] #ytd-player.ytd-watch-flexy {
  222.     border-radius: 2px;
  223. }
  224. .YtSearchboxComponentInputBox, .ytSearchboxComponentInputBox {
  225.     border-radius: 2px 0 0 2px;
  226. }
  227. .YtSearchboxComponentSearchButton, .ytSearchboxComponentSearchButton {
  228.     border-radius: 0 2px 2px 0;
  229. }
  230. .ytSearchboxComponentClearButton {
  231.     margin-right: 6px;
  232. }
  233. `
  234.     );
  235. })();