src/content.css (4284 bytes)
1 /* Over the YouTube player. Each name starts with subread- so that nothing of the page is touched. */ 2 #movie_player .subread-box { 3 position: absolute; left: 5%; right: 5%; bottom: 12%; z-index: 60; 4 text-align: center; pointer-events: none; line-height: 1.35; 5 /* Latin and Cyrillic fonts come first. The Japanese fonts have full-width Cyrillic letters. */ 6 font-family: "Noto Sans", Roboto, Arial, "Hiragino Sans", "Yu Gothic", sans-serif; 7 } 8 #movie_player .subread-box[hidden] { display: none; } 9 #movie_player .subread-line { 10 display: inline; white-space: pre-line; padding: 2px 8px; 11 color: #fff; background: rgba(8, 8, 8, .78); border-radius: 3px; 12 -webkit-box-decoration-break: clone; box-decoration-break: clone; 13 } 14 #movie_player .subread-button { 15 position: absolute; top: 12px; right: 12px; z-index: 61; 16 width: 34px; height: 26px; padding: 0; border: 1px solid rgba(255, 255, 255, .7); border-radius: 4px; 17 background: rgba(8, 8, 8, .6); color: #fff; font: 600 12px/1 Arial, sans-serif; cursor: pointer; opacity: .55; 18 } 19 #movie_player .subread-button:hover, #movie_player .subread-button.subread-on { opacity: 1; } 20 #movie_player .subread-button.subread-on { background: #fff; color: #000; } 21 #movie_player.ytp-autohide .subread-button:not(.subread-on) { opacity: 0; } 22 #movie_player .subread-panel { 23 position: absolute; top: 46px; right: 12px; z-index: 62; width: 300px; padding: 12px 14px; 24 background: rgba(16, 16, 16, .94); color: #eee; border-radius: 8px; font: 13px/1.4 Arial, sans-serif; text-align: left; 25 } 26 #movie_player .subread-panel[hidden] { display: none; } 27 #movie_player .subread-title { font-weight: 700; margin-bottom: 4px; } 28 #movie_player .subread-status { color: #bbb; margin-bottom: 8px; overflow-wrap: anywhere; } 29 #movie_player .subread-row { display: flex; align-items: center; gap: 6px; margin: 7px 0; flex-wrap: wrap; } 30 #movie_player .subread-panel button { 31 background: #2c2c2c; color: #eee; border: 1px solid #555; border-radius: 4px; padding: 3px 8px; cursor: pointer; font: inherit; 32 } 33 #movie_player .subread-panel button:hover { background: #3a3a3a; } 34 #movie_player .subread-offset { min-width: 58px; text-align: center; font-variant-numeric: tabular-nums; } 35 #movie_player .subread-rate { width: 84px; background: #222; color: #eee; border: 1px solid #555; border-radius: 4px; padding: 2px 4px; } 36 #movie_player .subread-file { max-width: 190px; color: #ccc; font-size: 12px; } 37 #movie_player .subread-help { color: #bbb; display: block; font-size: 12px; } 38 #movie_player .subread-help a { color: #9cc3ff; } 39 40 /* The transcript panel: SubRead's own, styled to sit next to YouTube's related videos. 41 YouTube sets the attribute "dark" on <html> in its dark theme. Its --yt-spec-* variables are not set on the page. */ 42 .subread-transcript { 43 --subread-bg: #f2f2f2; --subread-fg: #0f0f0f; --subread-dim: #606060; 44 --subread-hover: rgba(0, 0, 0, .06); --subread-current: rgba(0, 0, 0, .1); 45 margin: 0 0 12px; border-radius: 12px; overflow: hidden; 46 background: var(--subread-bg); 47 color: var(--subread-fg); 48 /* Latin and Cyrillic fonts come first. The Japanese fonts have full-width Cyrillic letters. */ 49 font-family: "Noto Sans", Roboto, Arial, "Hiragino Sans", "Yu Gothic", sans-serif; 50 font-size: 14px; 51 } 52 html[dark] .subread-transcript { 53 --subread-bg: #272727; --subread-fg: #f1f1f1; --subread-dim: #aaa; 54 --subread-hover: rgba(255, 255, 255, .08); --subread-current: rgba(255, 255, 255, .16); 55 } 56 .subread-transcript-header { 57 display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-weight: 700; 58 } 59 .subread-transcript-close { 60 background: none; border: none; color: inherit; font: inherit; font-size: 20px; line-height: 1; padding: 0 4px; cursor: pointer; 61 } 62 .subread-transcript-list { max-height: 60vh; overflow-y: auto; padding: 0 8px 12px; } 63 .subread-transcript-row { 64 display: flex; gap: 12px; padding: 6px 8px; border-radius: 6px; cursor: pointer; line-height: 1.4; 65 } 66 .subread-transcript-row:hover { background: var(--subread-hover); } 67 .subread-transcript-row.subread-current { background: var(--subread-current); } 68 .subread-transcript-stamp { 69 flex: none; width: 44px; color: var(--subread-dim); font-variant-numeric: tabular-nums; 70 } 71 .subread-transcript-text { white-space: pre-line; }