Advertisement
Guest User

Stigma Desktop (Edited) - Original by Catgrills

a guest
Dec 7th, 2016
96
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 38.41 KB | None | 0 0
  1. /* GENERAL */
  2.  
  3. html {
  4. overflow-x: hidden;
  5. height: 100% !important;
  6. }
  7.  
  8. body{
  9. background:#232a31;
  10. }
  11. * {
  12. font-family: "Roboto", "ぼくたちのゴシック2ボールド" !important;
  13. }
  14. #ad_creative_expand_btn_1{display:none;}
  15. a,
  16. a:hover,
  17. .title,
  18. .title:hover {
  19. text-decoration: none !important;
  20. }
  21. .title:hover,
  22. .yt-uix-sessionlink.yt-uix-tile-link.yt-ui-ellipsis.yt-ui-ellipsis-2.spf-link:hover {
  23. color: #44BBFF !important;
  24. }
  25. .yt-uix-sessionlink.yt-ui-ellipsis.yt-ui-ellipsis-2.spf-link:hover,
  26. .feed-item-container .yt-uix-sessionlink.yt-uix-tile-link.spf-link.yt-ui-ellipsis.yt-ui-ellipsis-2:hover {
  27. color: #112233 !important;
  28. }
  29. #page-container {
  30. margin-top: 2px !important;
  31. }
  32. #page {
  33. margin-left: 28px !important;
  34. }
  35. /* Let's get this party started */
  36. ::-webkit-scrollbar {
  37. width: 7px;
  38. background:rgba(0,0,0,0.1);
  39. }
  40.  
  41. /* Track */
  42.  
  43.  
  44. /* Handle */
  45. ::-webkit-scrollbar-thumb {
  46. background: #ff6766;
  47. }
  48. ::-webkit-scrollbar-thumb:window-inactive {
  49. background:#ff6766;
  50. }
  51. /** HEADER **/
  52.  
  53. #masthead-positioner {
  54. height: 100% !important;
  55. width: 10px !important;
  56. }
  57. #masthead-positioner-height-offset {
  58. height: 0px !important;
  59. }
  60. #yt-masthead-container {
  61. background: #232a31 !important;
  62. border-bottom: 0px solid #e8e8e8;
  63. height: 100% !important;
  64. width: 17px !important;
  65. margin-left: -18px !important;
  66. }
  67. /*** LOGO ***/
  68.  
  69. #yt-masthead #logo-container .logo {
  70. background-image: url("http://i.imgur.com/n02Oi7Z.png") !important;
  71. background-repeat: no-repeat !important;
  72. background-position: 66% 50% !important;
  73. background-size: 15px auto !important;
  74. width: 36px !important;
  75. padding-left:36px !important;
  76. height: 56px;
  77. position: absolute !important;
  78. background-color: #ff6766 !important;
  79. top: -22px !important;
  80. left: -4px !important;
  81. }
  82. #yt-masthead #logo-container span.content-region {
  83. display: none !important;
  84. }
  85. #yt-masthead #logo-container.doodle img {
  86. background: none;
  87. width: 0px !important;
  88. padding: 0px 0px 0px 260px;
  89. }
  90. /*** SEARCH ***/
  91.  
  92. #masthead-search {
  93. padding-bottom: 30px !important;
  94. }
  95. #yt-masthead-content {
  96. position: absolute !important;
  97. left: 22px !important;
  98. top: 227px !important;
  99. width: 20px !important;
  100. height: 50px !important;
  101. transition: all .5s ease-in-out !important;
  102. }
  103. #yt-masthead-content:hover {
  104. width: 450px !important;
  105. transition: all .5s ease-in-out !important;
  106. }
  107. #masthead-search .search-btn-component {
  108. height: 41px !important;
  109. float: left !important;
  110. background: transparent !important;
  111. border: none !important;
  112. height: 0px !important;
  113. width: 0px !important;
  114. padding: 11px !important;
  115. margin-left: -2.5px !important;
  116. margin-top: 8px !important;
  117. box-shadow: none !important;
  118. margin-right: 10px !important;
  119. opacity: 0;
  120. }
  121. #yt-masthead-content {
  122. background-color: #232a31 !important;
  123. background-image: url("http://i.imgur.com/n0mhXCg.png") !important;
  124. background-position: center left !important;
  125. background-repeat: no-repeat !important;
  126. background-size: 17px auto !important;
  127. margin-top: -3px !important;
  128. }
  129. #masthead-search-terms {
  130. background: #232a31 !important;
  131. border: none !important;
  132. box-shadow: none !important;
  133. height: 41px !important;
  134. }
  135. #masthead-search-terms input {
  136. color: #FFF !important;
  137. font-family: "Roboto", "ぼくたちのゴシック2ボールド" !important;
  138. font-size: 13pt !important;
  139. font-weight: bold !important;
  140. margin-bottom: 20px !important;
  141. }
  142. /*** MENU ***/
  143.  
  144. #appbar-guide-button {
  145. position: absolute !important;
  146. margin-top: 58px !important;
  147. margin-left: -1px !important;
  148. }
  149. .yt-base-gutter {
  150. padding-left: 15px !IMPORTANT;
  151. padding-right: 15px !important;
  152. }
  153. #appbar-guide-menu {
  154. position: fixed !important;
  155. left: 29px !important;
  156. margin-top: 0px !important;
  157. max-height: 100% !important;
  158. box-shadow: none !important;
  159. border: 1px solid #EBEBEB !important;
  160. border-width: 0px 1px 1px 0px !important;
  161. overflow-y: hidden !important;
  162. z-index: 9 !important;
  163. }
  164. #what_to_watch-guide-item {
  165. background: no-repeat url("http://i.4cdn.org/w/1475656572491.png") center 60% !important;
  166. background-size: auto 200px !important;
  167. margin-left: -22px !important;
  168. margin-top: -14px !important;
  169. margin-bottom: 20px !important;
  170. padding: 14px !important;
  171. width: 109% !important;
  172. }
  173. .guide-item.yt-uix-sessionlink.yt-valign.spf-link.guide-item-selected[title="Home"] {
  174. opacity: 0;
  175. }
  176. .guide-item.yt-uix-sessionlink.yt-valign.spf-link.guide-item-selected {
  177. background: transparent !important;
  178. color: #444 !important;
  179. font-weight: bold !important;
  180. text-shadow: none !important;
  181. }
  182. #what_to_watch-guide-item a,
  183. guide-item.yt-uix-sessionlink.yt-valign.spf-link.guide-item-selected span {
  184. color: transparent !important;
  185. }
  186. .guide-user-links.yt-uix-tdl.yt-box .thumb {
  187. display: none !important;
  188. }
  189. #appbar-guide-menu .guide-section-separator {
  190. visibility: hidden;
  191. }
  192. .guide-item .guide-count {
  193. color: #FF6766 !important;
  194. font-size: 9pt !important;
  195. font-weight: bold !important;
  196. }
  197. .guide-item.yt-uix-sessionlink.yt-valign.spf-link:hover {
  198. background: transparent !important;
  199. color: #232a31 !important;
  200. font-weight: bold !important;
  201. }
  202. li.guide-section h3 a {
  203. border-bottom: 2px solid #ebebeb !important;
  204. color: #232a31 !important;
  205. font-family: "Roboto", "ぼくたちのゴシック2ボールド" !important;
  206. font-size: 13pt !important;
  207. font-weight: bold !important;
  208. padding: 10px 0px !important;
  209. }
  210. li.guide-section h3 a:hover {
  211. text-decoration: none !important;
  212. }
  213. .yt-uix-button-icon-hover-action-menu {
  214. background: no-repeat url("https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png") center !important;
  215. background-size: cover !important;
  216. margin-top: 10px !important;
  217. }
  218. /*** USER ***/
  219.  
  220. #yt-masthead-user {
  221. position: absolute !important;
  222. margin-top: 100px !important;
  223. margin-left: 10px !important;
  224. }
  225. #upload-btn {
  226. background-color: transparent !important;
  227. background: url('http://i.imgur.com/naGokm2.png') !important;
  228. background-size: 35px auto !important;
  229. background-repeat: no-repeat !important;
  230. background-position: center !important;
  231. border: none !important;
  232. box-shadow: none !important;
  233. color: transparent !important;
  234. opacity: .5 !important;
  235. margin-right: 15px;
  236. margin-left: -20px !important;
  237. filter: brightness(0) invert(1) !important;
  238. }
  239. #sb-button-notify::before {
  240. display: none !important;
  241. }
  242. #sb-button-notify {
  243. background: no-repeat url("http://i.imgur.com/omK5Bl1.png") center !important;
  244. background-size: 28px auto !important;
  245. opacity: .7 !important;
  246. margin-left: -8.8px !important;
  247. margin-top: 10px !important;
  248. }
  249. .yt-uix-button-icon.yt-uix-button-icon-bell.yt-sprite {
  250. display: none !important;
  251. }
  252. #yt-masthead-user .yt-masthead-user-icon {
  253. border-radius: 0% !important;
  254. margin-top: 15px !important;
  255. margin-left: -7px !important;
  256. border-radius: 0% !important;
  257. margin-top: 16px !important;
  258. margin-left: -8px !important;
  259. padding-top: 40px !important;
  260. background: no-repeat url("http://i.imgur.com/e4elpdE.png") center top !important;
  261. background-size: 25px auto !important;
  262. }
  263. .yt-thumb-clip img {
  264. border-radius: 1px !important;
  265. }
  266. .yt-masthead-picker-footer .yt-masthead-picker-button span,
  267. .yt-masthead-picker-info a.yt-uix-button span {
  268. font-size: 13px !important;
  269. text-transform: lowercase !important;
  270. }
  271. .yt-masthead-picker-footer .yt-masthead-picker-button,
  272. .yt-masthead-picker-info a.yt-uix-button {
  273. border: 1px solid #E7E7E7 !important;
  274. padding-top: 2px !important;
  275. }
  276. #yt-masthead-user .signin-container {
  277. position: absolute !important;
  278. right: 3px !important;
  279. top: 110px !important;
  280. }
  281. #yt-masthead-user .yt-uix-button.yt-uix-button-size-default.yt-uix-button-primary {
  282. background: no-repeat url("http://i.imgur.com/sjrfMCf.jpg") center top !important;
  283. background-size: 25px auto !important;
  284. background-color: transparent !important;
  285. border: none !important;
  286. color: transparent !important;
  287. }
  288. .yt-uix-clickcard-card {
  289. position: fixed !important;
  290. left: 70px !important;
  291. margin-top: -150px !important;
  292. }
  293. .yt-masthead-picker-header.yt-masthead-picker-active-account,
  294. .yt-uix-clickcard-card.yt-masthead-multilogin .yt-masthead-multilogin-users-header {
  295. background: #232a31 !important;
  296. color: #FFF !important;
  297. font-weight: 700 !important;
  298. font-size: 10pt !important;
  299. text-transform: lowercase !important;
  300. padding: 10px !important;
  301. }
  302. .yt-uix-clickcard-card-border,
  303. .yt-uix-hovercard-card-border {
  304. float: left;
  305. background: #fff;
  306. border: none !important;
  307. box-shadow: 0px 1px 2px rgba(0, 0, 0, .1) !important;
  308. }
  309. .sb-card-border {
  310. background: none repeat scroll 0 0 #fff;
  311. border: none !important;
  312. box-shadow: 0px 1px 2px rgba(0, 0, 0, .1) !important;
  313. position: fixed !important;
  314. left: 80px !important;
  315. }
  316. .sb-card-arrow,
  317. .sb-card-body-arrow,
  318. .yt-uix-clickcard-card-reverse .yt-uix-card-border-arrow-vertical,
  319. .yt-uix-clickcard-card.yt-masthead-multilogin .yt-uix-card-body-arrow,
  320. .yt-uix-card-body-arrow.yt-uix-card-body-arrow-vertical {
  321. display: none !important;
  322. }
  323.  
  324. .ytp-gradient-bottom{
  325. background-image: url(http://i.imgur.com/dEQkxRO.png);
  326.  
  327. }
  328. /** FOOTER **/
  329.  
  330. body #footer-container {
  331. display: none !important;
  332. }
  333. /* HOME SECTION */
  334. /** CARDS **/
  335.  
  336. .branded-page-v2-container.branded-page-base-bold-titles.branded-page-v2-container-flex-width.branded-page-v2-secondary-column-hidden .yt-card {
  337. background: transparent !important;
  338. box-shadow: none !important;
  339. }
  340. .feed-item-container.browse-list-item-container.yt-section-hover-container.compact-shelf.shelf-item.branded-page-box.clearfix {
  341. background: #FFF !important;
  342. box-shadow: 0 1px 2px rgba(0, 0, 0, .1) !important;
  343. border: none !important;
  344. margin-top: 10px !important;
  345. }
  346. .multirow-shelf .yt-uix-expander-head {
  347. background: #232a31 !important;
  348. color: #FFF !important;
  349. font-size: 14px !important;
  350. font-weight: bold !important;
  351. padding: 10px 10px 10px 16px !important;
  352. text-align: center !important;
  353. text-transform: lowercase !important;
  354. width: 100% !important;
  355. margin-left: -18px !important;
  356. margin-right: 10px;
  357. margin-top: 20px !important;
  358. margin-bottom: -15px !important;
  359. }
  360. .multirow-shelf .yt-uix-expander-head:hover {
  361. color: #66CC99 !important;
  362. }
  363. /** TITLE **/
  364.  
  365. .shelf-item .shelf-title-table {
  366. background: #F5F8F9 !important;
  367. padding: 20px 16px 13px 20px !important;
  368. margin-left: -18px !important;
  369. margin-top: -15px !important;
  370. margin-bottom: 17px !important;
  371. }
  372. .section-list > li:nth-child(2) .shelf-title-table {
  373. background: no-repeat url("http://i.imgur.com/aAJOImx.jpg") center !important;
  374. background-size: cover !important;
  375. }
  376. .section-list > li:nth-child(2) .shelf-title-table a,
  377. .section-list > li:nth-child(2) .shelf-title-table span {
  378. color: #FFF !important;
  379. }
  380. .exp-responsive .shelf-item .branded-page-module-title .branded-page-module-title-link,
  381. .exp-responsive .shelf-item .branded-page-module-title .branded-page-module-title-text {
  382. font-size: 20px !important;
  383. }
  384. /** VIDEOS **/
  385.  
  386. .section-list .video-time {
  387. background-color: rgba(35, 42, 49, 0.38) !important;
  388. font-family: "Roboto" !important;
  389. font-weight: bold !important;
  390. padding: 7px 10px 7px 10px !important;
  391. opacity: 1 !important;
  392. text-align: left !important;
  393. width: 100% !important;
  394. margin-bottom: -2px !important;
  395. margin-right: -20px !important;
  396. position: absolute !important;
  397. left: -1px !important;
  398. }
  399. .yt-uix-button-empty .yt-uix-button-arrow {
  400. display: none;
  401. }
  402. .video-stream,
  403. .html5-main-video {
  404. left: -15.1667px !important;
  405. top: 0px !important;
  406. }
  407. /* SEARCH SECTION */
  408. /** CARDS **/
  409.  
  410. #results {
  411. background: #FFF !important;
  412. box-shadow: 0px 1px 2px rgba(0, 0, 0, .1) !important;
  413. padding-bottom: 6px !important;
  414. }
  415. #results .yt-lockup-tile {
  416. padding: 10px 15px;
  417. background: #FFF !important;
  418. }
  419. /** BANNER **/
  420.  
  421. #results .branded-page-v2-subnav-container {
  422. background: no-repeat url("http://i.imgur.com/lLFytHx.jpg") center !important;
  423. background-size: cover !important;
  424. padding: 16px 16px 18px 20px !important;
  425. margin-bottom: 5px !important;
  426. }
  427. .search-header {
  428. border-bottom: none !important;
  429. }
  430. .num-results.first-focus {
  431. font-size: 20px !important;
  432. color: #FFF !important;
  433. font-weight: 500 !important;
  434. text-transform: lowercase !important;
  435. }
  436. .yt-uix-button.yt-uix-button-size-small.yt-uix-button-default.filter-button {
  437. border: none !important;
  438. box-shadow: none !important;
  439. background: transparent !important;
  440. margin-top: -12px !important;
  441. margin-left: -18px !important;
  442. }
  443. #results .branded-page-v2-subnav-container .yt-uix-button-arrow {
  444. filter: brightness(0) invert(1) !important;
  445. }
  446. .search-header .num-results,
  447. .search-header .num-results strong,
  448. .search-header .yt-uix-button-content {
  449. color: #FFF !important;
  450. font-size: 20px !important;
  451. font-weight: 500 !important;
  452. }
  453. #filter-dropdown {
  454. padding: 7px !important;
  455. }
  456. .filter-col-title,
  457. .filter {
  458. color: #FFF;
  459. font-size: 16px;
  460. font-weight: bold !important;
  461. }
  462. #filter-dropdown span {
  463. color: #FFF !important;
  464. }
  465. /* HISTORY SECTION */
  466. /** CARDS **/
  467.  
  468. .branded-page-v2-subnav-container,
  469. .yt-lockup.yt-lockup-tile.yt-lockup-video.clearfix {
  470. background: #FFF !important;
  471. border-color: #EBEBEB !important;
  472. }
  473. .feed-item-container.browse-list-item-container.yt-section-hover-container.search-history-item.branded-page-box {
  474. background: #FFF !important;
  475. border-color: #EBEBEB !important;
  476. }
  477. /** TITLE **/
  478.  
  479. .feed-header {
  480. background: no-repeat url("http://i.imgur.com/6qamRuW.jpg") center !important;
  481. background-size: cover !important;
  482. padding: 18px 16px 13px 20px !important;
  483. margin-top: -15px !important;
  484. }
  485. .epic-nav-item-heading.first-focus,
  486. .feed-header .yt-uix-button-content {
  487. border: none !important;
  488. color: #FFF !important;
  489. font-size: 20px !important;
  490. font-weight: 500 !important;
  491. }
  492. .feed-header .yt-uix-button-content {
  493. margin-left: -12px !important;
  494. }
  495. .feed-header #channel-navigation-menu > li:first-child .epic-nav-item-heading:after,
  496. .feed-header #channel-navigation-menu > li:first-child span:after {
  497. content: " | " !important;
  498. font-weight: bold !important;
  499. margin-left: 10px !important;
  500. }
  501. .feed-header #channel-navigation-menu > li:first-child span {
  502. padding-left: 12px !important;
  503. margin-right: -16px !important;
  504. }
  505. .yt-uix-button.spf-link.yt-uix-sessionlink.yt-uix-button-epic-nav-item.yt-uix-button-size-default:hover {
  506. border-bottom: 3px solid transparent !important;
  507. opacity: .7 !important;
  508. }
  509. /** OPTIONS **/
  510.  
  511. .branded-page-v2-subnav-container.branded-page-gutter-padding.history-controls-container {
  512. text-align: right !important;
  513. border: none !important;
  514. margin-top: -38px !important;
  515. background: transparent !important;
  516. }
  517. #watch-history-clear-button,
  518. #search-history-clear-button {
  519. border: none !important;
  520. box-shadow: none !important;
  521. color: transparent !important;
  522. width: 0px !important;
  523. height: 0px !important;
  524. background: no-repeat url("http://i.imgur.com/2n3rpjO.png") center !important;
  525. padding: 20px 0px 0px 20px !important;
  526. margin-top: -30px;
  527. background-size: 35px auto !important;
  528. position: absolute !important;
  529. right: 23px !important;
  530. visibility: visible !important;
  531. }
  532. #watch-history-pause-button,
  533. #search-history-pause-button {
  534. display: none !important;
  535. }
  536. /** VIDEOS **/
  537.  
  538. #results .yt-lockup .yt-uix-button-action-menu {
  539. opacity: 1 !important;
  540. }
  541. /** PAGINATION **/
  542.  
  543. .branded-page-box.search-pager.spf-link {
  544. background: #232a31 !important;
  545. box-shadow: 0px 1px 2px rgba(0, 0, 0, .1) !important;
  546. width: 97.6% !important;
  547. text-align: left !important;
  548. }
  549. .branded-page-box.search-pager.spf-link .yt-uix-button.yt-uix-sessionlink.yt-uix-button-default.yt-uix-button-size-default {
  550. margin-left: -4px !important;
  551. border-radius: 1px !important;
  552. padding: 5px 11px !important;
  553. background: transparent !important;
  554. border: none !important;
  555. color: #FFF !important;
  556. font-size: 10pt !important;
  557. transition: all .3s ease-in-out !important;
  558. }
  559. .branded-page-box.search-pager.spf-link .yt-uix-button.yt-uix-sessionlink.yt-uix-button-default.yt-uix-button-size-default:hover {
  560. color: #444 !important;
  561. transition: all .3s ease-in-out !important;
  562. }
  563. .yt-uix-button-default[disabled] {
  564. border-radius: 1px !important;
  565. background: #444 !important;
  566. border: 1px solid #444 !important;
  567. }
  568. .yt-uix-button-default[disabled] span {
  569. color: #FFF !important;
  570. opacity: 1 !important;
  571. font-size: 10pt !important;
  572. }
  573. .branded-page-box.search-pager.spf-link .yt-uix-button.yt-uix-sessionlink.yt-uix-button-default.yt-uix-button-size-default .yt-uix-button-content {
  574. padding-top: 2px !important;
  575. font-weight: bold !important;
  576. }
  577. /* LIKE/WATCH(LATER)/MYCHANNEL SECTION */
  578. /** CARDS **/
  579.  
  580. #pl-header {
  581. background: #232a31 !important;
  582. }
  583. .pl-header-title {
  584. color: #FFF !important;
  585. }
  586. .pl-header-details {
  587. color: #FFF !important;
  588. font-weight: 500 !important;
  589. font-size: 10pt !important;
  590. }
  591. .pl-header-title-icon {
  592. opacity: 1;
  593. filter: brightness(0) invert(1) !important;
  594. }
  595. #pl-header .playlist-actions .yt-uix-button,
  596. #gh-playlist-add-video {
  597. margin-right: 5px;
  598. border-radius: 1px !important;
  599. box-shadow: none !important;
  600. background: #444 !important;
  601. border: none !important;
  602. color: #FFF !important;
  603. font-weight: bold !important;
  604. font-size: 13px !important;
  605. }
  606. #pl-header .playlist-actions .yt-uix-button-icon-wrapper,
  607. #pl-header .playlist-actions .yt-uix-button-has-icon.no-icon-markup::before {
  608. margin-right: 6px;
  609. filter: invert(1) !important;
  610. opacity: 1 !important;
  611. }
  612. #pl-video-list {
  613. background: #FFF !important;
  614. box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1) !important;
  615. }
  616. .pl-video .pl-video-index {
  617. display: none;
  618. }
  619. .pl-video .pl-video-handle {
  620. width: 16px;
  621. }
  622. .branded-page-v2-primary-col .branded-page-box,
  623. .section-list li .item-section .branded-page-box {
  624. border-bottom: 1px solid #ebebeb;
  625. }
  626. /** BANNER **/
  627.  
  628. .channel-header .secondary-header-contents {
  629. padding: 0px !important;
  630. background-color: #fff;
  631. border-bottom: none !important;
  632. box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1) !important;
  633. width: 100% !important;
  634. }
  635. .secondary-header-action {
  636. font-size: 10pt !important;
  637. margin-left: 15px !important;
  638. margin-right: 0px !important;
  639. }
  640. .secondary-header-action span {
  641. font-size: 9.5pt !important;
  642. }
  643. .yt-uix-button.yt-uix-button-size-default.yt-uix-button-default.yt-uix-button-empty.yt-uix-button-has-icon.casual-settings-button {
  644. margin-top: -6px !important;
  645. position: fixed !important;
  646. bottom: 16px !important;
  647. right: 10px !important;
  648. }
  649. .channel-header-subscription-button-container.yt-uix-button-subscription-container.yt-subscription-button-disabled-mask-container.with-preferences {
  650. display: none !important;
  651. }
  652. .yt-uix-inlineedit-view-container.yt-uix-flipwidget-front {
  653. background: #FFF !important;
  654. padding-left: 6px !important;
  655. font-size: 20px !important;
  656. font-weight: 500 !important;
  657. box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1) !important;
  658. margin-top: -40px !important;
  659. }
  660. /* CHANNEL SECTION */
  661. /** BANNER **/
  662.  
  663. .channel-header-profile-image-container {
  664. background: transparent !important;
  665. }
  666. .channel-header-profile-image {
  667. background-color: transparent !important;
  668. box-shadow: none !important;
  669. margin-top: 12px !important;
  670. }
  671. .spf-link.branded-page-header-title-link.yt-uix-sessionlink {
  672. display: none !important;
  673. }
  674. .channel-header .primary-header-actions,
  675. .channel-header-subscription-button-container {
  676. float: right;
  677. margin-top: -11px !important;
  678. margin-right: -3px !important;
  679. }
  680. .branded-page-v2-top-row #channel-subheader {
  681. margin-top: -70px !important;
  682. padding-top: 4px !important;
  683. }
  684. .qualified-channel-title-badge {
  685. display: none !important;
  686. }
  687. /** CARDS **/
  688.  
  689. .video-time {
  690. display: inherit !important;
  691. }
  692. .branded-page-v2-primary-col .yt-card {
  693. background: transparent !important;
  694. box-shadow: none !important;
  695. }
  696. .video-player-view-component.branded-page-box,
  697. .feed-item-container.yt-section-hover-container.browse-list-item-container.branded-page-box.vve-check {
  698. margin-bottom: 10px !important;
  699. background: #FFF !important;
  700. border: none !important;
  701. box-shadow: 0 1px 2px rgba(0, 0, 0, .1) !important;
  702. }
  703. #c4-primary-header-contents {
  704. margin-top: -3px !important;
  705. }
  706. #channel-subheader {
  707. background: #FFF !important;
  708. box-shadow: 0 1px 2px rgba(0, 0, 0, .05) !important;
  709. }
  710. #channel-subheader .yt-uix-button {
  711. box-shadow: none !important;
  712. }
  713. .branded-page-v2-subnav-container.branded-page-gutter-padding.clearfix {
  714. display: none !important;
  715. }
  716. .channels-browse-content-grid {
  717. margin-right: 0px !important;
  718. background: #FFF !important;
  719. }
  720. #channels-browse-content-grid.grid-lockups-container {
  721. padding-top: 15px;
  722. box-shadow: 0px 1px 2px rgba(0, 0, 0, .1) !important;
  723. }
  724. .about-metadata-container {
  725. background: #FFF !important;
  726. box-shadow: 0px 1px 2px rgba(0, 0, 0, .1) !important;
  727. padding: 10px !important;
  728. }
  729. .comment-renderer.channel-owner .comment-author-text {
  730. background: no-repeat url("http://www.freeiconspng.com/uploads/queen-crown-icon-6.png") -2% 60% !important;
  731. background-color: transparent !important;
  732. background-size: 30px auto !important;
  733. padding-left: 25px !important;
  734. }
  735. /** TITLE **/
  736.  
  737. .flex-width-enabled .feed-item-container .feed-item-main.feed-item-no-author .branded-page-module-title {
  738. background: #F5F8F9;
  739. padding: 16px 16px 20px 20px;
  740. margin-left: -18px;
  741. margin-top: -15px;
  742. margin-bottom: 17px;
  743. width: 100% !important;
  744. max-width: 1226px !important;
  745. }
  746. .shelf-wrapper .lohp-newspaper-shelf {
  747. margin-top: 60px !important;
  748. padding-bottom: 4px !important;
  749. }
  750. .shelf-wrapper .lohp-newspaper-shelf .branded-page-module-title {
  751. background: #F5F8F9 !important;
  752. padding: 16px 0px 17px 0px !important;
  753. position: absolute !important;
  754. top: 15px !important;
  755. max-width: 1056px !important;
  756. }
  757. .shelf-wrapper .lohp-newspaper-shelf .branded-page-module-title span {
  758. margin-left: 20px !important;
  759. }
  760. .yt-uix-button.shelves-play.play-all-icon-btn {
  761. opacity: 1 !important;
  762. background: #EBEBEB !important;
  763. border: none !important;
  764. box-shadow: none !important;
  765. font-weight: bold !important;
  766. font-size: 12px !important;
  767. height: 25px !important;
  768. text-transform: lowercase !important;
  769. position: absolute !important;
  770. margin-left: 10px !important;
  771. }
  772. /** VIDEOS **/
  773.  
  774. .feed-item-container.yt-section-hover-container.browse-list-item-container.branded-page-box.vve-check .video-time,
  775. .channels-browse-content-grid .video-time {
  776. background-color: rgba(35, 42, 49, 0.38) !important;
  777. font-family: "Roboto" !important;
  778. font-weight: bold !important;
  779. padding: 7px 10px 7px 10px !important;
  780. opacity: 1 !important;
  781. text-align: left !important;
  782. width: 100% !important;
  783. margin-bottom: -2px !important;
  784. margin-right: -20px !important;
  785. position: absolute !important;
  786. left: -1px !important;
  787. }
  788. .expanded-shelf button.yt-uix-expander-head,
  789. .expanded-shelf .expanded-shelf-view-all {
  790. background: #232a31 !important;
  791. border-radius: 1px !important;
  792. color: #FFF !important;
  793. font-size: 14px !important;
  794. font-weight: bold !important;
  795. padding: 0px 20px 0px 16px !important;
  796. text-align: center !important;
  797. text-transform: lowercase !important;
  798. width: 100% !important;
  799. margin-left: -18px !important;
  800. margin-top: 20px !important;
  801. margin-bottom: -3px !important;
  802. }
  803. .expanded-shelf button.yt-uix-expander-head:hover,
  804. .expanded-shelf .expanded-shelf-view-all:hover {
  805. color: #66CC99 !important;
  806. }
  807. .yt-card.yt-uix-expander .yt-uix-button-expander,
  808. .yt-card .yt-uix-expander .yt-uix-button-expander {
  809. border-radius: 1px !important;
  810. padding: 0px 20px 0px 16px !important;
  811. margin-bottom: -15px !important;
  812. width: 105% !important;
  813. max-width: 1056px !important;
  814. }
  815. .yt-card.yt-uix-expander .yt-uix-button-expander span,
  816. .yt-card .yt-uix-expander .yt-uix-button-expander span,
  817. .expanded-shelf .expanded-shelf-view-all .expanded-shelf-view-all-link-text {
  818. color: #FFF !important;
  819. font-weight: bold !important;
  820. text-transform: lowercase !important;
  821. font-size: 14px !important;
  822. }
  823. .yt-card.yt-uix-expander .yt-uix-button-expander:hover span,
  824. .yt-card .yt-uix-expander .yt-uix-button-expander:hover span,
  825. .expanded-shelf .expanded-shelf-view-all .expanded-shelf-view-all-link-text:hover {
  826. color: #66CC99 !important;
  827. }
  828. .yt-uix-button.yt-uix-button-size-default.yt-uix-button-default.load-more-button.yt-uix-load-more.browse-items-load-more-button {
  829. background: #232a31 !important;
  830. border: none !important;
  831. border-radius: 1px !important;
  832. color: #FFF !important;
  833. font-size: 14px !important;
  834. font-weight: bold !important;
  835. height: 40px !important;
  836. padding: 6px 20px 8px 20px !important;
  837. text-align: center !important;
  838. text-transform: lowercase !important;
  839. width: 100% !important;
  840. margin-left: 0px !important;
  841. margin-top: 0px !important;
  842. margin-bottom: -3px !important;
  843. opacity: 1 !important;
  844. }
  845. .branded-page-gutter-padding {
  846. padding-right: 0px !important;
  847. }
  848. /* WATCH SECTION */
  849. /** VIDEO **/
  850.  
  851. .video-stream,
  852. .html5-main-video {
  853. width: 100%;
  854. left: 0px !important
  855. }
  856. body .watch-stage-mode #movie_player {
  857. background: transparent !important;
  858. }
  859. #movie_player {
  860. background-color: #000 !important;
  861. }
  862. .player-api {
  863. background: #232a31 !important;
  864. }
  865. body .watch-stage-mode #player {
  866. margin-top: -5px !important;
  867. }
  868. body .watch-stage-mode #player .player-api {
  869. margin-top: -5px !important;
  870. padding: 0px !important;
  871. }
  872. body .watch-stage-mode #player .player-width {
  873. left: auto;
  874. top: -7px;
  875. margin-left: 0;
  876. }
  877. .watch-stage-mode #placeholder-player {
  878. background: #000 !important;
  879. margin-top: -627px !important;
  880. height: 617px !important;
  881. }
  882. .watch-stage-mode .ytp-progress-bar-container {
  883. width: 100% !important;
  884. }
  885. .watch-stage-mode .ytp-chrome-bottom {
  886. width: 98% !important;
  887. margin-top: -10px!important;
  888. margin-left: 0px !important;
  889. }
  890. .watch-stage-mode .ytp-fullscreen .ytp-chrome-bottom {
  891. width: calc(100% - 48px) !important;
  892. }
  893. .watch-stage-mode #player,
  894. .watch-stage-mode #player #player-api {
  895. width: 95vw !important;
  896. height: 100vh !important;
  897. margin-top: 0px !important;
  898. margin-bottom: -40px !important;
  899. }
  900. .watch-stage-mode #player {
  901. margin-top: 0 !important;
  902. margin-bottom: 10px !important;
  903. }
  904. .watch-stage-mode #player video {
  905. width: 95vw !important;
  906. height: 100vh !important;
  907. left: 0px !important;
  908. top: 0 !important;
  909. object-fit: contain !important;
  910. }
  911. .watch-stage-mode .player-height {
  912. height: 100vh !important;
  913. }
  914. #watch7-main {
  915. margin-top: 11px !important;
  916. }
  917. .ytp-right-controls {
  918. float: right;
  919. height: 100%;
  920. position: absolute !important;
  921. right: 10px !important;
  922. }
  923. .iv-drawer {
  924. position: absolute;
  925. top: 0;
  926. bottom: 0;
  927. right: 30px;
  928. z-index: 28;
  929. width: 177px;
  930. background-color: rgba(0, 0, 0, .2);
  931. color: #fff;
  932. font-size: 11px;
  933. line-height: 12px;
  934. }
  935. .ytp-cards-button {
  936. right: 40px;
  937. }
  938. .watch-stage-mode #placeholder-player {
  939. background: #232a31 !important;
  940. margin-top: -627px !important;
  941. height: 617px !important;
  942. }
  943. /** INFORMATION **/
  944. /*** TITLE ***/
  945.  
  946. #watch7-headline {
  947. background: #f5f8f9 !important;
  948. border-bottom: 1px solid #E7E7E7 !important;
  949. padding: 13px 16px 13px 14px !important;
  950. width: 100% !important;
  951. margin-left: -15px !important;
  952. margin-top: -15px !important;
  953. margin-bottom: 5px !important;
  954. }
  955. .watch-title-container {
  956. width: 100% !important;
  957. }
  958. #eow-title {
  959. font-weight: 400 !important;
  960. }
  961. /*** UPLOADER ***/
  962.  
  963. .yt-uix-button-subscribe-branded::before,
  964. .yt-uix-button-subscribed-branded::before {
  965. display: none !important;
  966. }
  967. .yt-uix-button-subscribe-branded,
  968. .yt-uix-button-subscribe-branded span {
  969. background-color: #EB6361 !important;
  970. text-transform: lowercase !important;
  971. font-weight: bold !important;
  972. padding: 0px 3px 0px 2px !important;
  973. }
  974. .yt-uix-button-subscribed-branded,
  975. .yt-uix-button-subscribed-branded span {
  976. background-color: #586474 !important;
  977. border: none !important;
  978. color: #FFF !important;
  979. text-transform: lowercase !important;
  980. font-weight: bold !important;
  981. padding: 0px 4px 0px 3px !important;
  982. }
  983. .yt-subscription-button-subscriber-count-branded-horizontal {
  984. line-height: 21.5px !important;
  985. }
  986. /*** ACTIONS ***/
  987.  
  988. #watch8-secondary-actions .yt-uix-button-content {
  989. display: none !important;
  990. }
  991. .addto-button::before {
  992. background: no-repeat url("http://i.imgur.com/II9p6Kj.png") center !important;
  993. background-size: 22px auto !important;
  994. width: 20px;
  995. height: 20px;
  996. opacity: 1 !important;
  997. }
  998. .action-panel-trigger-share::before {
  999. background: no-repeat url("http://i.imgur.com/2dPIub9.png") center;
  1000. background-size: 26px auto !important;
  1001. width: 20px;
  1002. height: 20px;
  1003. filter: brightness(0) !important;
  1004. margin-left: -16px !important;
  1005. opacity: .7 !important;
  1006. }
  1007. #action-panel-overflow-button::before {
  1008. margin-left: -15px !important;
  1009. }
  1010. /*** VIEWS ***/
  1011.  
  1012. .video-extras-sparkbar-likes {
  1013. background: #71BA51 !important;
  1014. }
  1015. .like-button-renderer-like-button::before {
  1016. background: no-repeat url("http://i.imgur.com/zR1ss8X.png") center !important;
  1017. background-size: 16px auto !important;
  1018. width: 20px;
  1019. height: 20px;
  1020. }
  1021. .like-button-renderer-dislike-button::before {
  1022. background: no-repeat url("http://i.imgur.com/C1WX1Lo.png") center !important;
  1023. background-size: 25px auto !important;
  1024. width: 20px;
  1025. height: 20px;
  1026. }
  1027. .like-button-renderer-like-button,
  1028. .like-button-renderer-dislike-button {
  1029. color: #000 !important;
  1030. font-weight: bold !important;
  1031. font-size: 9.5pt !important;
  1032. }
  1033. .like-button-renderer-like-button.yt-uix-button-toggled .yt-uix-button-content {
  1034. color: #71BA51;
  1035. }
  1036. .like-button-renderer-dislike-button.yt-uix-button-toggled .yt-uix-button-content {
  1037. color: #E3000E;
  1038. }
  1039. /** DESCRIPTION **/
  1040.  
  1041. #watch-description {
  1042. margin-left: -15px !important;
  1043. margin-right: -15px !important;
  1044. margin-top: -15px !important;
  1045. }
  1046. #action-panel-details .yt-uix-button.yt-uix-button-size-default.yt-uix-button-expander,
  1047. #watch-action-panels .yt-uix-button.yt-uix-button-size-default.yt-uix-button-expander {
  1048. background: #232a31 !important;
  1049. border: none !important;
  1050. border-radius: 1px !important;
  1051. box-shadow: 0px 1px 2px rgba(0, 0, 0, .1) !important;
  1052. color: #FFF !important;
  1053. font-weight: bold !important;
  1054. padding: 5px 10px 25px 10px !important;
  1055. text-align: center !important;
  1056. text-transform: lowercase !important;
  1057. min-width: 640px !important;
  1058. max-width: 1280px !important;
  1059. width: 103.8% !important;
  1060. margin-left: -15px !important;
  1061. }
  1062. #action-panel-details .yt-uix-button.yt-uix-button-size-default.yt-uix-button-expander:hover,
  1063. #watch-action-panels .yt-uix-button.yt-uix-button-size-default.yt-uix-button-expander:hover {
  1064. color: #66CC99 !important;
  1065. }
  1066. #watch-uploader-info {
  1067. background: #f5f8f9 !important;
  1068. border-bottom: 1px solid #E7E7E7 !important;
  1069. padding: 14px 16px 16px 16px !important;
  1070. width: 100% !important;
  1071. }
  1072. .watch-time-text::before {
  1073. color: transparent !important;
  1074. content: "dd" !important;
  1075. background: no-repeat url("http://vignette2.wikia.nocookie.net/gravityfalls/images/5/55/More_info_icon.png/revision/20131229000053") center 70% !important;
  1076. background-size: 19px auto !important;
  1077. margin-right: 8px !important;
  1078. margin-left: -4px !important;
  1079. }
  1080. .watch-time-text {
  1081. color: #000 !important;
  1082. font-size: 20px !important;
  1083. font-weight: 400 !important;
  1084. }
  1085. #eow-description {
  1086. margin-left: 16px !important;
  1087. margin-top: 13px !important;
  1088. margin-right: 16px !important;
  1089. }
  1090. #watch-description-extras {
  1091. display: none !important;
  1092. }
  1093. /** COMMENTS **/
  1094.  
  1095. .comment-section-header-renderer {
  1096. background: #F5F8F9 !important;
  1097. color: #000;
  1098. font-size: 20px !important;
  1099. font-weight: 400 !important;
  1100. padding: 14px 14px 14px 16px !important;
  1101. text-transform: none!important;
  1102. width: 100% !important;
  1103. margin-left: -15px !important;
  1104. margin-top: -15px !important;
  1105. border-bottom: 1px solid #E7E7E7 !important;
  1106. margin-bottom: 15px !important;
  1107. }
  1108. .comment-section-header-renderer b::before {
  1109. background: no-repeat url("http://i.imgur.com/pu4S5vj.png") center 75% !important;
  1110. background-size: 21px auto !important;
  1111. content: "dd" !important;
  1112. color: transparent !important;
  1113. margin-right: 10px !important;
  1114. }
  1115. .comment-section-header-renderer b {
  1116. font-weight: 400 !important;
  1117. }
  1118. .yt-uix-menu.comment-section-sort-menu .yt-uix-button-content {
  1119. font-size: 13px !important;
  1120. text-transform: lowercase !important;
  1121. }
  1122. .yt-uix-menu.comment-section-sort-menu button {
  1123. border: 1px solid #E7E7E7 !important;
  1124. }
  1125. .comment-author-text {
  1126. color: #128ee9;
  1127. font-size: 11pt !important;
  1128. }
  1129. .comment-renderer-author-comment-badge.creator {
  1130. background: no-repeat url("http://www.freeiconspng.com/uploads/queen-crown-icon-6.png") -2% 100% !important;
  1131. background-color: transparent !important;
  1132. background-size: 30px auto !important;
  1133. padding-left: 25px !important;
  1134. }
  1135. .comment-renderer-author-comment-badge.creator .comment-author-text {
  1136. color: #000 !important;
  1137. }
  1138. .yt-uix-button-action-menu::before,
  1139. .yt-uix-button-lockup-action-menu::before {
  1140. opacity: .8 !important;
  1141. background: no-repeat url("https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png") center !important;
  1142. background-size: 10px auto !important;
  1143. width: 13px;
  1144. height: 13px;
  1145. margin-top: -10px !important;
  1146. }
  1147. .comment-renderer-header .comment-renderer-time a {
  1148. color: #212121;
  1149. font-weight: bold !important;
  1150. font-size: 10pt !important;
  1151. }
  1152. .comment-replies-renderer .comment-renderer {
  1153. border-left: 2px solid #EBEBEB !important;
  1154. padding: 15px !important;
  1155. }
  1156. .comment-renderer-reply {
  1157. color: #3E4651 !important;
  1158. font-size: 10.5pt !important;
  1159. font-weight: bold !important;
  1160. text-transform: lowercase !important;
  1161. margin-top: -2px !important;
  1162. }
  1163. .comment-renderer-reply::after {
  1164. content: "";
  1165. }
  1166. .comment-renderer-like-count {
  1167. color: #2CC990 !important;
  1168. font-size: 10pt;
  1169. font-weight: bold !important;
  1170. }
  1171. .comment-section-renderer-paginator {
  1172. background: #232a31 !important;
  1173. border: none !important;
  1174. border-radius: 1px !important;
  1175. color: #FFF !important;
  1176. font-size: 14px !important;
  1177. font-weight: bold !important;
  1178. padding: 10px 10px 10px 10px !important;
  1179. text-align: center !important;
  1180. text-transform: lowercase !important;
  1181. min-width: 641px !important;
  1182. width: 103.8% !important;
  1183. margin-left: -16px !important;
  1184. margin-top: 20px !important;
  1185. margin-bottom: -16px !important
  1186. }
  1187. .comment-section-renderer-paginator:hover {
  1188. color: #66CC99 !important;
  1189. }
  1190. /** SIDEBAR **/
  1191. /*** VIDEOS ***/
  1192.  
  1193. #watch7-sidebar .watch-sidebar-head {
  1194. color: #FFF !important;
  1195. width: 99% !important;
  1196. background-color: #232a31 !important;
  1197. padding: 15px !important;
  1198. margin-left: -11px !important;
  1199. margin-top: -15px !important;
  1200. margin-bottom: 17px !important;
  1201. font-size: 12pt !important;
  1202. }
  1203. .autoplay-bar .checkbox-on-off {
  1204. font-size: 12pt !important;
  1205. color: transparent !important;
  1206. text-transform: lowercase !important;
  1207. margin-top: 13px !important;
  1208. }
  1209. .yt-uix-checkbox-on-off label {
  1210. background: #555 !important;
  1211. }
  1212. .yt-uix-checkbox-on-off input[type="checkbox"]:checked + label .checked {
  1213. margin-top: -1.7px !important;
  1214. }
  1215. .autoplay-bar .autoplay-info-icon {
  1216. display: none !important;
  1217. }
  1218. #watch7-sidebar .video-time {
  1219. background-color: rgba(35, 42, 49, 0.38) !important;
  1220. font-family: "Roboto" !important;
  1221. font-weight: bold !important;
  1222. padding: 6px 10px !important;
  1223. opacity: 1 !important;
  1224. width: 100% !important;
  1225. margin-bottom: -2px !important;
  1226. margin-right: -20px !important;
  1227. position: absolute !important;
  1228. left: -1px !important;
  1229. }
  1230. .yt-pl-thumb .sidebar {
  1231. display: none !important;
  1232. }
  1233. .resume-playback-background,
  1234. .resume-playback-progress-bar {
  1235. top: 0 !important;
  1236. }
  1237. #a11y-announcements-message {
  1238. display: none !important;
  1239. }
  1240. #watch7-sidebar .yt-uix-button.yt-uix-button-size-default.yt-uix-button-expander {
  1241. background: #232a31 !important;
  1242. border: none !important;
  1243. border-radius: 1px !important;
  1244. box-shadow: 0px 1px 2px rgba(0, 0, 0, .1) !important;
  1245. color: #FFF !important;
  1246. font-weight: bold !important;
  1247. padding: 5px 10px 25px 10px !important;
  1248. text-align: center !important;
  1249. text-transform: lowercase !important;
  1250. width: 106.4% !important;
  1251. margin-left: -10px !important;
  1252. }
  1253. /*** PLAYLIST ***/
  1254.  
  1255. .watch-stage-mode #player-playlist .watch-playlist {
  1256. margin-top: 64px !important;
  1257. margin-left: -10px !important;
  1258. margin-right: -90px !important;
  1259. height: 100px !important;
  1260. }
  1261. #player-playlist .playlist-info {
  1262. margin-top: 4px !important;
  1263. }
  1264. #player-playlist .playlist-mix-icon {
  1265. float: left;
  1266. margin-right: 10px !important;
  1267. margin-top: 0px !important;
  1268. }
  1269. #player-playlist .author-attribution,
  1270. #player-playlist .playlist-details > li {
  1271. display: none !important;
  1272. }
  1273. #player-playlist .control-bar {
  1274. border-top: 1px solid #444;
  1275. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement