alien_fx_fiend

YouTube UserStyle Khaki CodePen Script

Dec 25th, 2024 (edited)
14
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 7.02 KB | Source Code | 0 0
  1. /* https://codepen.io/TikiHead/pen/gOpKjZa */
  2. /* imo, Roboto is too narrow, this spaces it more nicely */
  3. html, body,
  4. ytd-page-manager > *.ytd-page-manager {
  5.     letter-spacing: 0.2px;
  6.     background-color: rgba(85, 85, 75, 1) !important;
  7.    
  8. }
  9.  
  10. /* VIDEO TITLE */
  11. .title.ytd-video-primary-info-renderer {
  12.     color: lime  !important; /* #98b4ed #dce1eb */
  13.     font-size: 22px !important;
  14. }
  15. #video-title.yt-simple-endpoint.ytd-grid-video-renderer {
  16.     color: #dce1eb;  /* #98b4ed - #dce1eb */
  17. }
  18. .title.ytd-guide-entry-renderer {
  19.     color: #dce1eb;
  20. }
  21.  
  22. /* VIDEO DESC */
  23. .content.ytd-video-secondary-info-renderer {
  24.    color: #789ade; /* #789ade - #cbd1dd */
  25. }
  26.  
  27. .count-text.ytd-comments-header-renderer {
  28.     color: #cbd1dd;
  29. }
  30.  
  31. #owner-name.ytd-video-owner-renderer {
  32.     font-size: 1.6rem;
  33.     margin-bottom: 4px;
  34. }
  35.  
  36. /* VIDEO MENU BTN TEXT */
  37. ytd-toggle-button-renderer.force-icon-button a.ytd-toggle-button-renderer {
  38.     font-size: 15px;
  39.  
  40. }
  41.  
  42. /* COMMENT TEXT, RELATED VIDS TITLE TEXT */
  43. #content-text.ytd-comment-renderer,
  44. #video-title {
  45.     color: #cbd1dd;
  46.     font-size: 14px !important;
  47. }
  48.  
  49. /* COMMENT USERNAME, MORE/LESS BTN */
  50. #author-text.yt-simple-endpoint.ytd-comment-renderer,
  51. .more-button.ytd-comment-renderer, .less-button.ytd-comment-renderer {
  52.     color: rgba(140, 202, 255, 0.9);
  53.     font-size: 13px !important;
  54. }
  55.  
  56. /* COMMENT USERNAME (OP) */
  57. ytd-author-comment-badge-renderer.creator {
  58.    background-color: rgb(72, 122, 235) !important;
  59. }
  60. ytd-author-comment-badge-renderer.creator yt-formatted-string {
  61.     color: white !important;
  62. }
  63.    
  64.  
  65. /* NAVBAR, CHANNEL HEADER, NOTIFICATIONS BOX */
  66. #masthead,
  67. #channel-header.ytd-c4-tabbed-header-renderer,
  68. #tabs-inner-container.ytd-c4-tabbed-header-renderer,
  69. ytd-multi-page-menu-renderer {
  70.  background-color: rgba(21, 25, 36, 1);
  71.  box-shadow: 0 6px 50px rgba(0, 0, 0, 0.3);
  72. }
  73.  
  74. /* POPOVERS */
  75. paper-menu {
  76.     background-color: rgba(21, 25, 36, 0.94);
  77.     border-radius: 4px;
  78. }
  79. .dropdown-content.paper-menu-button {
  80.     background-color: transparent;
  81. }
  82.  
  83. /* THUMBNAILS */
  84. ytd-thumbnail.ytd-compact-video-renderer,
  85. ytd-thumbnail.ytd-video-renderer {
  86.     box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.4);
  87. }
  88. ytd-thumbnail.ytd-compact-video-renderer img,
  89. ytd-thumbnail.ytd-video-renderer img {
  90.     border-radius: 2px;
  91. }
  92.  
  93. /* SEARCH */
  94. ytd-searchbox[mode=legacy] #container.ytd-searchbox {
  95.     background-color: rgba(255, 255, 255, 0.1);
  96.     border: 1px solid transparent;
  97.     box-shadow: none;
  98.     border-radius: 2px;
  99. }
  100. #search-icon-legacy.ytd-searchbox {
  101.     background-color: transparent;
  102.     border: none;
  103.     border-radius: 3px;
  104.     width: 50px;
  105. }
  106. ytd-searchbox[mode=legacy] #search-icon-legacy.ytd-searchbox:hover > yt-icon {
  107.     color: rgba(255,255,255,0.8) !important;
  108. }
  109. ytd-searchbox[mode=legacy] #search-icon-legacy.ytd-searchbox:hover {
  110.     background-color: transparent;
  111. }
  112.  
  113. /* SIDEBBAR */
  114. ytd-guide-renderer.ytd-app,
  115. app-drawer.ytd-app:not([persistent]) #header.ytd-app {
  116.      background-color: rgb(34, 37, 48);
  117. }
  118. #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer:hover {
  119.     background-color: rgb(53, 58, 69);
  120. }
  121.  
  122. /* MINOR TEXT (off-white) */
  123. #published-time-text.ytd-comment-renderer [is=yt-endpoint],
  124. ytd-button-renderer #button.ytd-button-renderer,
  125. yt-icon,
  126. #metadata-line.ytd-grid-video-renderer,
  127. .more-button.ytd-comment-replies-renderer, .less-button.ytd-comment-replies-renderer,
  128. .more-button.ytd-video-secondary-info-renderer, .less-button.ytd-video-secondary-info-renderer,
  129. .date.ytd-video-secondary-info-renderer,
  130. #metadata.ytd-video-meta-block,
  131. .view-count,
  132. #title.ytd-metadata-row-renderer,
  133. #byline.ytd-video-meta-block,
  134. #metadata-line.ytd-video-meta-block,
  135. #label.ytd-pinned-comment-badge-renderer,
  136. paper-tab:not(.iron-selected) > .tab-content.paper-tab,
  137. #footer.ytd-guide-renderer  #guide-links-primary a, #footer.ytd-guide-renderer  #guide-links-secondary a,
  138. #autoplay.ytd-compact-autoplay-renderer,
  139. #title-annotation.ytd-shelf-renderer,
  140. paper-button.yt-next-continuation,
  141. #description-text.ytd-video-renderer,
  142. ytd-toggle-button-renderer.force-icon-button a.ytd-toggle-button-renderer,
  143. #subtitle.ytd-shelf-renderer,
  144. #published-time-text.ytd-comment-renderer {
  145.     color: rgba(180, 190, 200, 0.8) !important;
  146. }
  147.  
  148. /* LIKE BTN */
  149. ytd-toggle-button-renderer.force-icon-button a.ytd-toggle-button-renderer .style-default-active {
  150.     color: white !important;
  151. }
  152.  
  153. #top-level-buttons ytd-toggle-button-renderer.style-default-active:first-child yt-icon,
  154. #like-button .style-default-active > yt-icon {
  155.     color: #5fd9b1 !important;
  156. }
  157.  
  158. #top-level-buttons ytd-toggle-button-renderer.style-default-active:nth-child(2) yt-icon,
  159. #dislike-button .style-default-active > yt-icon {
  160.     color: hsl(3, 100%, 66%) !important;
  161. }
  162.  
  163. /* COMMENT BTN */
  164. ytd-button-renderer #button.ytd-button-renderer.style-primary {
  165.  color: white !important;  
  166. }
  167.  
  168. paper-button {
  169.     background-color: transparent;
  170. }
  171.  
  172. /* VIEWS */
  173. .view-count {
  174.     font-size: 18px;
  175. }
  176.  
  177. /* RED ICON */
  178. ytd-guide-entry-renderer[active] .guide-icon.ytd-guide-entry-renderer {
  179.     color: rgba(255, 78, 78, 0.83) !important;
  180. }
  181.  
  182. /* RED 'NEW' ICON */
  183. .badge-style-type-simple.ytd-badge-supported-renderer {
  184.     background-color: rgba(96, 100, 118, 0.83);
  185.     color: rgba(255, 255, 255, 0.78);
  186. }
  187.  
  188. /* LINKS */
  189. [is=yt-endpoint],
  190. .yt-simple-endpoint,
  191. paper-tab:not(.iron-selected):hover > .tab-content {
  192.    color: rgba(140, 202, 255, 0.9);
  193. }
  194. [is=yt-endpoint]:hover,
  195. .yt-simple-endpoint:hover {
  196.     color: rgba(180, 230, 255, 1);
  197. }
  198.  
  199. /* SUBSCRIBE BTN */
  200. paper-button.ytd-subscribe-button-renderer {
  201.     background: linear-gradient(90deg,hsl(341, 80%, 49%), hsl(3, 81.8%, 49.6%));
  202.     transition: all 0.2s ease;
  203. }
  204. paper-button.ytd-subscribe-button-renderer:hover {
  205.     filter: brightness(1.25);
  206. }
  207. paper-button[subscribed].ytd-subscribe-button-renderer {
  208.     background: hsl(0, 0%, 93.3%);
  209. }
  210.  
  211. /* VOTE COUNT (on comments) */
  212. #vote-count.ytd-comment-action-buttons-renderer {
  213.  color: #5fd9b1;  
  214. }
  215.  
  216. /* LIKE BAR */
  217. #sentiment.ytd-video-primary-info-renderer {
  218.  width: 255px;
  219.  height: 3px;
  220.  margin-top: 6px;
  221. }
  222. #like-bar.ytd-sentiment-bar-renderer {
  223.  height: 3px;  
  224. }
  225.  
  226. /* MODS */
  227. ytd-compact-video-renderer #video-title.ytd-compact-video-renderer {
  228. color: lime  !important;
  229. }
  230.  
  231. #video-title.ytd-rich-grid-video-renderer {
  232. color: lime  !important;
  233. }
  234.  
  235. ytd-compact-playlist-renderer #video-title.ytd-compact-playlist-renderer {
  236. color: lime  !important;
  237. }
  238.  
  239. ytd-compact-radio-renderer.use-ellipsis #video-title.ytd-compact-radio-renderer {
  240. color: lime  !important;
  241. }
  242.  
  243. #label.ytd-compact-link-renderer {
  244. color: lime  !important;
  245. }
  246.  
  247. #video-title.ytd-rich-grid-video-renderer {
  248. color: lime  !important;
  249. }
  250.  
  251.  
  252. .title.ytd-guide-entry-renderer {
  253. color: orange  !important;
  254. }
  255.  
  256.  
  257. #guide-section-title.ytd-guide-section-renderer{
  258. color: #8B6D9B  !important;
  259. }
  260.  
  261. :not(pre):not(code):not(textarea):not(tt):not(kbd):not(samp):not(var) {
  262. color: #f0eb22 !important; /*darkkhaki silver gold #e7a212 orange #b30061 pink #a3de34 lumigreen #f0eb22 yellow*/
  263. }
Add Comment
Please, Sign In to add comment