Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Shop Recherche
1797 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  YouTube - problème CSS

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

YouTube - problème CSS

n°2360407
leroimerli​nbis
Posté le 23-08-2020 à 11:25:25  profilanswer
 


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

mood
Publicité
Posté le 23-08-2020 à 11:25:25  profilanswer
 

n°2364637
gelatine_v​elue
Posté le 14-10-2020 à 20:56:44  profilanswer
 

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


---------------
Vends des trucs sur Bdx
n°2364778
leroimerli​nbis
Posté le 16-10-2020 à 10:20:09  profilanswer
 

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


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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  YouTube - problème CSS

 

Sujets relatifs
Problème reception mail depuis un formulaire (OVH)Proposition playlist Youtube SQL/Powershell/Postgres
[PHP] Problème nouveau avec exif_read_dataProbleme list -> apprentissage PHP
[Résolu] Performance Elementor et One Page, trop de CSS et JavascriptProblème de connexion de client (Socket)
problème de charactèresBlend Mode CSS
[C] Problème de pointeur[résolu] Problème jQuery
Plus de sujets relatifs à : YouTube - problème CSS


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR