☰

Coursera layout optimization

Move the transcript under the video to the right of the video.

  1. /* ==UserStyle==
  2. @name         Coursera layout optimization
  3. @version      20230218.06.30
  4. @namespace    userstyles.world/user/happiness
  5. @description  Move the transcript under the video to the right of the video.
  6. @author       happiness
  7. @license      No License
  8. ==/UserStyle== */
  9.  
  10. @-moz-document domain("www.coursera.org") {
  11. /* Catalogue */
  12. @media (min-width: 1023.95px) {
  13.     .ItemPageLayout_content_navigation {
  14.         position: fixed;
  15.         top: 78px;
  16.         left: 4px;
  17.         max-height: 0;
  18.         max-width: 0;
  19.         border: 8px solid #1f55d0;
  20.         border-radius: 8px;
  21.         z-index: 999;
  22.     }
  23.     .ItemPageLayout_content_navigation:hover {
  24.         max-height: unset;
  25.         max-width: unset;
  26.         background: white;
  27.         border: 2px solid #1f55d0;
  28.     }
  29. }
  30.  
  31. /* content: video title + notes + video + transcript */
  32. .ItemPageLayout_content_body {
  33.     padding-bottom: 0;
  34. }
  35. #main {
  36.     padding-bottom: 0;
  37. }
  38. .css-1fkgl1r .ItemPageLayout_scoped_max_width {
  39.     max-width: unset;
  40. }
  41.  
  42. /* navigation */
  43. .ItemPageLayout_header.ItemPageLayout_scoped_max_width {
  44.     padding: unset;
  45. }
  46.  
  47. /* video title and notes */
  48. .ItemLecture_Video_Title,
  49. .ItemLecture_Video_Notes_Navigation {
  50.     flex-basis: 100%;
  51.     margin-top: 0;
  52. }
  53.  
  54. /* video */
  55. #main > div:first-child > div > div:nth-child(3) {
  56.     flex-basis: 60%;
  57. }
  58.  
  59. /* transcript */
  60. #main > div:first-child > div > div:nth-child(4) {
  61.     flex-basis: 39%;
  62. }
  63.  
  64. /* feedback */
  65. .rc-ItemFeedback,
  66. .rc-ShareButtonWithModal {
  67.     margin-top: 0 !important;
  68. }
  69.  
  70. /* transcript */
  71. /*
  72. global header: 66px
  73. navigation: 40px (被上方css去掉padding)
  74. video title: 48px/51.188px (viewpoint宽度<=1439.95px时因.css-1pvuh2q字体大小导致高度为48px);
  75. notes bar: 48px
  76. feedback: 36px
  77. item navigation: 48px (viewpoint宽度<=1024px出现，并被上方的CSS去掉8px bottom padding)
  78. */
  79. div[data-testid="ItemLecture_Video_Transcript"] {
  80.     margin-left: auto;
  81.     overflow-y: scroll;
  82.     padding: unset;
  83.     --offset: calc(66px + 40px + 51.188px + 48px + 36px);
  84.     max-height: calc(100vh - var(--offset));
  85. }
  86. @media (max-width: 1439.95px) {
  87.     .css-cvrgnq .ItemPageLayout_navToggle {
  88.         padding-bottom: 0;
  89.     }
  90.     div[data-testid="ItemLecture_Video_Transcript"] {
  91.         --offset: calc(66px + 40px + 48px + 48px + 36px);
  92.         max-height: calc(100vh - var(--offset));
  93.     }
  94. }
  95. @media (max-width: 1024px) {
  96.     .css-cvrgnq .ItemPageLayout_navToggle {
  97.         padding-bottom: 0;
  98.     }
  99.     div[data-testid="ItemLecture_Video_Transcript"] {
  100.         --offset: calc(66px + 40px + 48px + 48px + 36px + 48px);
  101.         max-height: calc(100vh - var(--offset));
  102.     }
  103. }
  104.  
  105. /* within transcript */
  106. .css-xl5mb3 .timestamp {
  107.     margin-left: unset;
  108.     padding: unset;
  109. }
  110. .rc-Phrase > span {
  111.     font-size: 0.9rem;
  112. }
  113. .rc-Paragraph {
  114.     padding: 0 0 0;
  115. }
  116.  
  117. /* Hide pause button logo at the begining of the video */
  118. .rc-PlayButton button {
  119.     opacity: 0;
  120. }
  121.  
  122. /* "Save note" button after clicking on the transcript */
  123. .rc-TranscriptHighlightButton {
  124.     left: 200px;
  125. }
  126.  
  127. }