YouTube - problème CSS

YouTube - problème CSS - HTML/CSS - Programmation

Marsh Posté le 23-08-2020 à 11:25:25    


Salut les dingos du code :D
 
Je suis entrain de m'amuser avec le CSS de YouTube. J'ai un problème : sur la capture ci dessous, je voudrais déplacer le menu entouré en rouge plus haut. J'y arrive mais problème : les actions (clic de souris) associées aux boutons de ce menu sautent par la même occasion....
 
comment faire?
 
Merci!
 
https://i.imgur.com/njPVWfph.png

Reply

Marsh Posté le 23-08-2020 à 11:25:25   

Reply

Marsh Posté le 14-10-2020 à 20:56:44    

SI tu disais comment tu t'y prends, on pourrait peut etre te repondre.

Message cité 1 fois
Reply

Marsh Posté le 16-10-2020 à 10:20:09    

gelatine_velue a écrit :

SI tu disais comment tu t'y prends, on pourrait peut etre te repondre.


 
C'est bon je suis arrivé à faire ce que je voulais :
 
https://i.imgur.com/N7vHmAsh.png
 
J'ai modifié toutes les pages YouTubes principales. Voilà le code CSS que j'ai mis dans un script stylish :
(Pour ceux qui veulent essayer, l'affichage est adapté à mon pc 13 pouces avec le zoom windows à 130% et le zoom pour YouTube à 89% sur firefox. Donc ça risque de poser des problèmes sur un autre pc, vous êtes prévenu.  :sweat: )
 
 

Code :
  1. #contents.ytd-rich-grid-renderer, #grid-title.ytd-rich-grid-renderer {
  2.     width: calc(95% - var(--ytd-rich-grid-item-margin) * 2);
  3.     }
  5. #avatar-link.ytd-rich-grid-media {
  6. margin-top: 4px;
  7. }
  9. ytd-video-meta-block.grid {
  10.   margin-left: -4px;
  11. }
  13. #video-title.ytd-rich-grid-media {
  14. line-height: 1.8rem;
  15. margin-top: -10px;
  16. margin-left: 0px;   
  17. font-size: 1.4rem;   
  18. }
  20. #meta.ytd-rich-grid-media {
  21. margin-bottom: -40px;
  22. margin-left: 0px;   
  23. }
  25. paper-button.ytd-toggle-button-renderer {
  26. margin-top: 11px;
  27. margin-left: -369px; 
  28. margin-bottom: -40px;   
  29. }
  31. yt-icon.ytd-badge-supported-renderer {
  32. margin-top: -7px;
  33. }
  35. yt-formatted-string[has-link-only_]:not([force-default-style]) a.yt-simple-endpoint.yt-formatted-string {
  36. margin-left: 0px;
  37. margin-bottom: 7px;   
  38. font-size: 15px;
  39. }
  41. #channel-name.ytd-video-owner-renderer {
  42. margin-top: -17px;
  43. }
  45. ytd-toggle-button-renderer.style-scope:nth-child(2) > a:nth-child(1) {
  46. margin-right: -200px;
  47. margin-top: -35px;   
  48. }
  50. ytd-toggle-button-renderer.style-scope:nth-child(1) > a:nth-child(1) > yt-icon-button:nth-child(1) {
  51. margin-left: -90px;
  52. }
  54. #owner-sub-count {
  55. margin-left: 5px;
  56. }
  58. ytd-toggle-button-renderer.style-scope:nth-child(1) > a:nth-child(1) {
  59. margin-top: -35px;
  60. margin-right: -480px;
  61. }
  63. ytd-button-renderer.style-scope:nth-child(4) > a:nth-child(1) > yt-formatted-string:nth-child(2) {
  64. margin-top: 0px;
  65. }
  67. ytd-button-renderer.style-scope:nth-child(4) > a:nth-child(1) > yt-icon-button:nth-child(1) > button:nth-child(1) > yt-icon:nth-child(1) {
  68. margin-top: 0px;
  69. }
  71. ytd-video-primary-info-renderer {
  72. margin-left: 12px;
  73. }
  75. a.ytd-video-owner-renderer {
  76. margin-left: 160px;
  77. margin-top: -10px;   
  78. }
  80. ytd-subscribe-button-renderer.style-scope {
  81. margin-left: -1080px;
  82. margin-top: -15px;   
  83. }
  85. ytd-video-primary-info-renderer {
  86. border-bottom: 0px solid var(--yt-spec-10-percent-layer);
  87. }
  89. #guide-wrapper.ytd-app {
  90. margin-right: -27px;
  91. margin-left: 7px;
  92. }
  94. ytd-video-primary-info-renderer {
  95. padding: 10px 0 8px 0;
  96. }
  98. #top-row.ytd-video-secondary-info-renderer {
  99. padding-top: 0px;
  100. } 
  102. #text.ytd-channel-name {
  103.     line-height: var(--ytd-channel-name-text_-_line-height);
  104.     font-size: 22px;
  105.     }
  106.  
  107. #page-manager.ytd-app {
  108.     --ytd-toolbar-offset: 65px;
  109.     }
  110.  
  111. ytd-shelf-renderer {
  112.     margin-right: -68px;
  113.     }
  114.  
  115. ytd-watch-flexy[flexy_][is-two-columns_][is-extra-wide-video_] #primary.ytd-watch-flexy, ytd-watch-flexy[flexy_][is-two-columns_][is-four-three-to-sixteen-nine-video_] #primary.ytd-watch-flexy {
  116.     max-width: 66%;
  117.     }
  118.  
  119. ytd-watch-flexy:not([theater]):not([fullscreen]) #primary.ytd-watch-flexy, ytd-watch-flexy:not([theater]):not([fullscreen]) #secondary.ytd-watch-flexy {
  120.     padding-top: 0px;
  121.     }
  122.  
  123. yt-icon.yt-dropdown-menu:nth-child(1) {
  124.     margin-top: 14px;
  125.     margin-left: 1351px;
  126.     }
  127.  
  128. #channel-header.ytd-c4-tabbed-header-renderer {
  129.     padding: 9px 0px 1px 0px; 
  130.     margin-bottom: -5px;
  131.     margin-top: -10px;
  132.     margin-left: 30px; 
  133.     }
  134.  
  135. ytd-item-section-renderer.style-scope:nth-child(1) > div:nth-child(3) > ytd-shelf-renderer:nth-child(1) > div:nth-child(1) {
  136.     margin-top: 7px;
  137.     }
  138.  
  139. #info.ytd-channel-renderer {
  140.     padding: 0 464px 16px 16px;
  141.     }
  142.  
  143. #inner-header-container {
  144.     margin-bottom: -40px;
  145.     margin-top: 5px;
  146.     margin-left: -130px; 
  147.     }
  148.  
  149. paper-tabs.ytd-c4-tabbed-header-renderer {
  150.     --paper-tabs-selection-bar-color: red;
  151.     --paper-tabs-selection-bar_-_border-bottom-width: 3px; 
  152.     }
  153.  
  154. #tabsContent.paper-tabs {
  155.     height: 70%;
  156.     }
  157.  
  158. ytd-c4-tabbed-header-renderer[guide-persistent-and-visible] paper-tabs.ytd-c4-tabbed-header-renderer {
  159.     margin-top: -31px;
  160.     margin-left: 343px;
  161.     }
  162.  
  163. #header.ytd-c4-tabbed-header-renderer {
  164.     margin-left: 130px;
  165.     }
  166.  
  167. #inner-header-container > div:nth-child(1) {
  168.     margin-top: -73px;
  169.     margin-left: 140px;
  170.     }
  171.  
  172. #channel-container {
  173.     margin-top: 25px;
  174.     margin-left: -85px;
  175.     width: 37.5%;   
  176.     }
  177.  
  178. #contentContainer.app-header {
  179.     margin-top: -20px;
  180.     }
  181.  
  182. #header.ytd-c4-tabbed-header-renderer {
  183.     --app-header-background-front-layer_-_background-size: 95% auto;
  184.     }
  185.  
  186. ytd-channel-sub-menu-renderer.style-scope {
  187.     margin-top: -42px;
  188.     margin-left: 15px; 
  189.     }
  190.  
  191. #tabs-container.ytd-c4-tabbed-header-renderer {
  192.     height: 0px;
  193.     margin-top: -80px; 
  194.     }
  195.  
  196. paper-tab.style-scope:nth-child(8) {
  197.     display: none;
  198.     }
  199.  
  200. #channel-header-container.ytd-c4-tabbed-header-renderer {
  201.     margin-left: 100px;
  202.     }
  203.  
  204. ytd-subscribe-button-renderer.ytd-c4-tabbed-header-renderer {
  205.     margin-left: -260px;
  206.     margin-top: 41px;
  207.     }
  208.  
  209. #channel-container.ytd-c4-tabbed-header-renderer {
  210.     background-color: transparent;
  211.     }
  212.  
  213. #tabs-inner-container.ytd-c4-tabbed-header-renderer {
  214.     background-color: transparent;
  215.     }
  216.  
  217. #channel-header.ytd-c4-tabbed-header-renderer {
  218.     background-color: transparent;
  219.     margin-top: -15px; 
  220.     }
  221.  
  222. #channel-container.ytd-c4-tabbed-header-renderer, #tabs-container.ytd-c4-tabbed-header-renderer {
  223.     background-color: transparent;
  224.     }
  225.  
  226. yt-icon.ytd-subscription-notification-toggle-button-renderer {
  227.     margin-top: -10px;
  228.     margin-left: -10px;
  229.     }
  230.  
  231. #inner-header-container {
  232.     margin-bottom: -40px;
  233.     margin-top: 5px;
  234.     margin-left: -130px; 
  235.     }
  236.  
  237. paper-button.ytd-subscribe-button-renderer[subscribed] {
  238.     background-color: rgb(144,214,4);
  239.     color: ivory; 
  240.     }
  241.  
  242. ytd-app {
  243.     background: white; 
  244.     --app-drawer-width: 196px;
  245.     }
  246.  
  247. #video-title.ytd-rich-grid-video-renderer {
  248.     font-weight: 500;
  249.     margin-left: 5px;
  250.     line-height:initial;
  251.     }
  252.  
  253. ytd-video-meta-block[rich-meta] #channel-name.ytd-video-meta-block, ytd-video-meta-block[rich-meta] #metadata-line.ytd-video-meta-block {
  254.     margin-left: 5px;
  255.     font-size: 1.2rem;
  256.     }
  257.    
  258. #meta.ytd-rich-grid-video-renderer {
  259.     margin-bottom: -20px;
  260.     }
  261.  
  262. #metadata-line.ytd-grid-video-renderer {
  263.     margin-bottom: -17px;
  264.     max-height: 12px;
  265.     margin-top: 2px; 
  266.     font-size: 12px;
  267.     line-height: 11px;
  268.     }
  269.    
  270. #details.ytd-grid-video-renderer {
  271.     margin-bottom: 2px;
  272.     }
  273.  
  274. ytd-grid-video-renderer #video-title.yt-simple-endpoint.ytd-grid-video-renderer {
  275.     margin-top: -3px;
  276.     margin-bottom: -5px;
  277.     }
  278.  
  279. ytd-browse {
  280.     margin-left: -50px;
  281.     }
  282.  
  283. #channel-header-container.ytd-c4-tabbed-header-renderer {
  284.     max-width: 1250px;
  285.     }
  286.  
  287. #primary.ytd-watch-flexy {
  288.     padding-right: var(--ytd-margin-10x);
  289.     }
  290.  
  291. div.ytd-grid-renderer {
  292.     margin-left: -14px;
  293.     margin-top: -18px; 
  294.     }
  295.  
  296. #label.yt-dropdown-menu {
  297.     margin-left: -20px;
  298.     margin-top: 50px;
  299.     }
  300.  
  301. #other-buttons > ytd-button-renderer:nth-child(1) > a:nth-child(1) > yt-icon-button:nth-child(1) {
  302.     display: none;
  303.     }
  304.  
  305. #tabs-inner-container {
  306.     margin-top: 1px;
  307.     }
  308.    
  309. yt-dropdown-menu.style-scope:nth-child(2) > paper-menu-button:nth-child(1) > div:nth-child(1) > paper-button:nth-child(1) {
  310.     margin-top: 5px;
  311.     }
  312.  
  313. @media (min-width: 392px) {
  314.     #details.ytd-rich-grid-video-renderer {
  315.     margin-top: -12px;
  316.     margin-left: -4px;
  317.     margin-bottom: 4px;
  318.     }
  319.     }
  320.  
  321. ytd-rich-grid-renderer.style-scope {
  322.     margin-top: -38px;
  323.     margin-left: 31px; 
  324.     }
  325.  
  326. .badge-style-type-live-now {
  327.     margin-left: 94px;
  328.     margin-top: -21px;
  329.     }
  330.  
  331. ytd-rich-section-renderer.style-scope:nth-child {
  332.     margin-top: -40px;
  333.     }
  334.  
  335. ytd-rich-item-renderer.ytd-rich-grid-renderer {
  336.     margin-bottom: 35px;
  337.     }
  338.  
  339. ytd-grid-renderer.ytd-item-section-renderer > div:nth-child(2) {
  340.     width: 106%;
  341.     }
  342.  
  343. yt-dropdown-menu.style-scope:nth-child(2) > paper-menu-button:nth-child(1) > div:nth-child(1) > paper-button:nth-child(1) {
  344.     margin-left: 28px;
  345.     margin-top: -20px;
  346.     }
  347.  
  348. #right > iron-icon:nth-child(1) {
  349.     margin-left: -220px;
  350.     }
  351.  
  352. yt-dropdown-menu.style-scope:nth-child(2) > paper-menu-button:nth-child(1) > div:nth-child(1) > paper-button:nth-child(1) {
  353.     margin-left: 10px;
  354.     }
  355.  
  356. ytd-c4-tabbed-header-renderer[has-channel-art][guide-persistent-and-visible] .banner-visible-area.ytd-c4-tabbed-header-renderer {
  357.     height: calc((105vw - 240px) / 6.2 - 1px);
  358.     }
  359.  
  360. ytd-browse[page-subtype="channels"] {
  361.     background: none;
  362.     margin-left: -90px;
  363.     }
  364.  
  365. ytd-item-section-renderer.style-scope:nth-child(2) > div:nth-child(3) > ytd-shelf-renderer:nth-child(1) > div:nth-child(1) {
  366.     margin-left: 0px;
  367.     }
  368.    
  369. ytd-grid-video-renderer {
  370.     margin-left: 12px;
  371.     }
  372.  
  373. #contentContainer.app-drawer[persistent] {
  374.     width: 111%;
  375.     }
  377. ytd-topbar-logo-renderer.style-scope:nth-child(4) > a:nth-child(1) > div:nth-child(1) {
  378.     margin-left: 60px;
  379.     }
  380.  
  381. #end.ytd-masthead {
  382.     min-width: 275px;
  383.     }
  384.  
  385. a.ytd-guide-entry-renderer, paper-item.ytd-guide-entry-renderer {
  386.     width: 123%;
  387.     }
  388.  
  389. paper-item.ytd-guide-entry-renderer {
  390.     padding: 0 34px;
  391.     margin-left: 20px;
  392.     }
  393.  
  394. ytd-searchbox.style-scope {
  395.     margin-left: -116px;
  396.     margin-right: 357px;
  397.     }
  398.  
  399. #guide-section-title.ytd-guide-section-renderer {
  400.       color: red;
  401.       display: block;
  402.       padding: 18px 0px 10px;
  403.       font-size: var(--ytd-tab-system_-_font-size); font-weight: var(--ytd-tab-system_-_font-weight); letter-spacing: var(--ytd-tab-system_-_letter-spacing); text-transform: var(--ytd-tab-system_-_text-transform);
  404.       margin-left: 47px;
  405.       text-align: center;
  406.     }
  407.    
  408. #sections.ytd-guide-renderer > .ytd-guide-renderer:first-child {
  409.     padding: 0px 0;
  410.     }
  411.  
  412. #sections.ytd-guide-renderer > ytd-guide-section-renderer.ytd-guide-renderer:not(:first-child), #sections.ytd-guide-renderer > ytd-guide-subscriptions-section-renderer.ytd-guide-renderer {
  413.     width: 95%;
  414.     margin-left: -34px;
  415.     padding: 0px 0;
  416.     }
  417.    
  418. .title.ytd-guide-entry-renderer {
  419.     text-overflow: initial;
  420.     margin-left: -9px;
  421.     }
  422.  
  423. ytd-guide-section-renderer.style-scope:nth-child(1) > div:nth-child(2) {
  424.     margin-left: -34px;
  425.     }
  426.    
  427. ytd-guide-section-renderer {
  428.     --paper-item-min-height: 29px;
  429.     }
  430.  
  431. ytd-rich-grid-renderer:not([is-title-enabled]) #contents.ytd-rich-grid-renderer {
  432.     margin-top: 40px;
  433.     }
  434.  
  435. ytd-rich-grid-video-renderer {
  436.     margin-bottom: -24px;
  437.     margin-top: -3px;
  438.         margin-left: 0px;
  439. }
  440.  
  441. ytd-rich-item-renderer.ytd-rich-grid-renderer {
  442.     margin-bottom: 50px
  443. }


Message édité par leroimerlinbis le 16-10-2020 à 10:27:47
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed