BetterYTM.css 38 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879
  1. /* #region general */
  2. :root {
  3. --bytm-locale-color: #5ea2ec;
  4. --bytm-advanced-mode-color: #ceb663;
  5. --bytm-experimental-col: #cc83e5;
  6. --bytm-warning-col: #e07664;
  7. --bytm-reload-col: #77e064;
  8. }
  9. /* TODO: after cfg menu migration, leave only dialog styles here */
  10. #bytm-cfg-dialog-bg,
  11. #bytm-cfg-menu-bg
  12. {
  13. --bytm-dialog-width-max: 1150px;
  14. --bytm-menu-width-max: 1150px;
  15. --bytm-dialog-height-max: 800px;
  16. --bytm-menu-height-max: 800px;
  17. }
  18. /* Have to do it like this since various extensions use a pretty damn high z-index and since I haven't implemented top layer for dialogs yet (https://developer.mozilla.org/en-US/docs/Glossary/Top_layer) */
  19. .bytm-dom-yt .bytm-dialog-bg,
  20. .bytm-dom-yt .bytm-menu-bg {
  21. z-index: 10042;
  22. }
  23. .bytm-dom-yt .bytm-dialog,
  24. .bytm-dom-yt .bytm-menu {
  25. z-index: 10069;
  26. }
  27. .bytm-dialog-body p {
  28. overflow-wrap: break-word;
  29. }
  30. .bytm-dialog-body details summary {
  31. cursor: pointer;
  32. font-style: italic;
  33. }
  34. .bytm-secondary-label {
  35. padding-left: 12px;
  36. font-size: 1.3rem;
  37. }
  38. /* #region version notification */
  39. #bytm-version-notif-dialog-btns {
  40. display: flex;
  41. flex-direction: row;
  42. align-items: center;
  43. justify-content: space-between;
  44. margin-top: 20px;
  45. }
  46. #bytm-disable-update-check-wrapper {
  47. display: flex;
  48. align-items: center;
  49. font-size: 1.5rem;
  50. margin-top: 35px;
  51. }
  52. #bytm-disable-update-check-wrapper label {
  53. padding-left: 12px;
  54. }
  55. #bytm-version-notif-changelog-cont {
  56. max-height: calc(max(var(--calc-max-height) - 280px, 0px));
  57. overflow-y: auto;
  58. margin: 10px 0px;
  59. }
  60. #bytm-version-notif-changelog-details {
  61. margin-top: 15px;
  62. }
  63. .bytm-disable-update-check-toggle-label-wrapper {
  64. display: flex;
  65. flex-direction: column;
  66. justify-content: flex-start;
  67. }
  68. /* #region cfg menu */
  69. .bytm-ftconf-adv-copy-btn {
  70. margin: 0px 10px;
  71. }
  72. .bytm-adorn-icon {
  73. display: inline-flex;
  74. align-items: center;
  75. cursor: help;
  76. }
  77. /* #region cfg menu adornments */
  78. .bytm-ftitem-adornment svg path {
  79. fill: var(--bytm-locale-color, #fff) !important;
  80. }
  81. .bytm-advanced-mode-icon svg path {
  82. fill: var(--bytm-advanced-mode-color, #fff) !important;
  83. }
  84. .bytm-experimental-icon svg path {
  85. fill: var(--bytm-experimental-col, #fff) !important;
  86. }
  87. .bytm-warning-icon svg {
  88. width: 24px;
  89. height: 24px;
  90. }
  91. .bytm-warning-icon svg path {
  92. fill: var(--bytm-warning-col, #fff) !important;
  93. }
  94. .bytm-reload-icon svg path {
  95. fill: var(--bytm-reload-col, #fff) !important;
  96. }
  97. /* #region welcome dialog */
  98. #bytm-welcome-menu-title-wrapper {
  99. display: flex;
  100. flex-direction: row;
  101. align-items: center;
  102. }
  103. #bytm-welcome-menu-title-logo {
  104. width: 32px;
  105. height: 32px;
  106. margin-right: 20px;
  107. }
  108. #bytm-welcome-menu-content-wrapper {
  109. overflow-y: auto;
  110. }
  111. #bytm-welcome-menu-locale-cont {
  112. display: flex;
  113. flex-direction: column;
  114. align-items: center;
  115. justify-content: flex-start;
  116. }
  117. #bytm-welcome-menu-locale-img {
  118. width: 80px;
  119. height: 80px;
  120. margin-bottom: 10px;
  121. }
  122. #bytm-welcome-menu-text-cont {
  123. margin-top: 16px;
  124. }
  125. #bytm-welcome-menu-text {
  126. font-size: 1.6rem;
  127. line-height: 20px;
  128. }
  129. #bytm-welcome-menu-locale-select {
  130. font-size: 1.6rem;
  131. }
  132. #bytm-welcome-menu-footer-cont {
  133. display: flex;
  134. justify-content: space-between;
  135. border-radius: 0px 0px var(--bytm-menu-border-radius) var(--bytm-menu-border-radius);
  136. }
  137. #bytm-auto-like-channels-dialog-body {
  138. padding-left: 0;
  139. padding-right: 0;
  140. }
  141. .bytm-dialog-bg {
  142. --bytm-dialog-bg: #333333;
  143. --bytm-dialog-bg-highlight: #252525;
  144. --bytm-scroll-indicator-bg: rgba(10, 10, 10, 0.7);
  145. --bytm-dialog-separator-color: #797979;
  146. --bytm-dialog-border-radius: 10px;
  147. }
  148. .bytm-dialog-bg {
  149. display: block;
  150. position: fixed;
  151. width: 100%;
  152. height: 100%;
  153. top: 0;
  154. left: 0;
  155. z-index: 5;
  156. background-color: rgba(0, 0, 0, 0.6);
  157. }
  158. .bytm-dialog {
  159. --calc-max-height: calc(min(100vh - 40px, var(--bytm-dialog-height-max)));
  160. position: absolute;
  161. display: flex;
  162. flex-direction: column;
  163. width: calc(min(100% - 60px, var(--bytm-dialog-width-max)));
  164. border-radius: var(--bytm-dialog-border-radius);
  165. height: auto;
  166. max-height: var(--calc-max-height);
  167. left: 50%;
  168. top: 50%;
  169. transform: translate(-50%, -50%);
  170. z-index: 6;
  171. color: #fff;
  172. background-color: var(--bytm-dialog-bg);
  173. }
  174. .bytm-dialog-body {
  175. font-size: 1.5rem;
  176. padding: 20px;
  177. }
  178. .bytm-dialog-body.small {
  179. padding: 15px;
  180. }
  181. #bytm-dialog-opts {
  182. display: flex;
  183. flex-direction: column;
  184. position: relative;
  185. padding: 30px 0px;
  186. overflow-y: auto;
  187. }
  188. .bytm-dialog-header {
  189. display: flex;
  190. justify-content: space-between;
  191. align-items: center;
  192. margin-bottom: 6px;
  193. padding: 15px 20px 15px 20px;
  194. background-color: var(--bytm-dialog-bg);
  195. border: 2px solid var(--bytm-dialog-separator-color);
  196. border-style: none none solid none !important;
  197. border-radius: var(--bytm-dialog-border-radius) var(--bytm-dialog-border-radius) 0px 0px;
  198. }
  199. .bytm-dialog-header.small {
  200. padding: 10px 15px;
  201. border-style: none none solid none !important;
  202. }
  203. .bytm-dialog-header-pad {
  204. content: " ";
  205. min-height: 32px;
  206. }
  207. .bytm-dialog-header-pad.small {
  208. min-height: 24px;
  209. }
  210. .bytm-dialog-titlecont {
  211. display: flex;
  212. align-items: center;
  213. }
  214. .bytm-dialog-titlecont-no-title {
  215. display: flex;
  216. justify-content: flex-end;
  217. align-items: center;
  218. }
  219. .bytm-dialog-title {
  220. position: relative;
  221. display: inline-block;
  222. font-size: 22px;
  223. }
  224. #bytm-dialog-version {
  225. position: absolute;
  226. width: 100%;
  227. bottom: -10px;
  228. left: 0;
  229. font-size: 10px;
  230. font-weight: normal;
  231. z-index: 7;
  232. }
  233. #bytm-dialog-version .bytm-link {
  234. color: #c6d2db !important;
  235. text-decoration: none !important;
  236. cursor: pointer;
  237. }
  238. #bytm-dialog-version .bytm-link:hover {
  239. color: #c6d2db !important;
  240. text-decoration: underline !important;
  241. }
  242. #bytm-dialog-linkscont {
  243. display: flex;
  244. align-items: center;
  245. margin-left: 32px;
  246. }
  247. .bytm-dialog-link {
  248. display: inline-flex;
  249. align-items: center;
  250. cursor: pointer;
  251. }
  252. .bytm-dialog-link:not(:last-of-type) {
  253. margin-right: 10px;
  254. }
  255. .bytm-dialog-link .bytm-dialog-img {
  256. position: relative;
  257. border-radius: 50%;
  258. bottom: 0px;
  259. transition: bottom 0.15s ease-out;
  260. }
  261. .bytm-dialog-link:hover .bytm-dialog-img {
  262. bottom: 5px;
  263. }
  264. .bytm-dialog-close {
  265. cursor: pointer;
  266. }
  267. .bytm-dialog-header-img,
  268. .bytm-dialog-close
  269. {
  270. width: 32px;
  271. height: 32px;
  272. }
  273. .bytm-dialog-header-img.small,
  274. .bytm-dialog-close.small
  275. {
  276. width: 24px;
  277. height: 24px;
  278. }
  279. .bytm-dialog-footer {
  280. font-size: 17px;
  281. text-decoration: underline;
  282. }
  283. .bytm-dialog-footer.hidden {
  284. display: none;
  285. }
  286. .bytm-dialog-footer-cont {
  287. margin-top: 6px;
  288. padding: 15px 20px;
  289. background: var(--bytm-dialog-bg);
  290. background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--bytm-dialog-bg) 30%, var(--bytm-dialog-bg) 100%);
  291. border: 2px solid var(--bytm-dialog-separator-color);
  292. border-style: solid none none none !important;
  293. border-radius: 0px 0px var(--bytm-dialog-border-radius) var(--bytm-dialog-border-radius);
  294. }
  295. #bytm-dialog-footer-buttons-cont button:not(:last-of-type) {
  296. margin-right: 15px;
  297. }
  298. .bytm-dialog-footer-right {
  299. display: flex;
  300. flex-direction: row-reverse;
  301. align-items: center;
  302. margin-top: 15px;
  303. }
  304. #bytm-dialog-footer-left-buttons-cont button:not(:last-of-type) {
  305. margin-right: 15px;
  306. }
  307. #bytm-dialog-scroll-indicator {
  308. --bytm-scroll-indicator-padding: 5px;
  309. position: sticky;
  310. bottom: -15px;
  311. left: 50%;
  312. margin-top: calc(-32px - var(--bytm-scroll-indicator-padding) * 2);
  313. padding: var(--bytm-scroll-indicator-padding);
  314. transform: translateX(-50%);
  315. width: 32px;
  316. height: 32px;
  317. z-index: 7;
  318. background-color: var(--bytm-scroll-indicator-bg);
  319. border-radius: 50%;
  320. cursor: pointer;
  321. }
  322. .bytm-hidden {
  323. visibility: hidden !important;
  324. }
  325. .bytm-ftconf-category-header {
  326. font-size: 20px;
  327. margin-top: 32px;
  328. margin-bottom: 8px;
  329. padding: 0px 20px;
  330. }
  331. .bytm-ftconf-category-header:first-of-type {
  332. margin-top: 0;
  333. }
  334. .bytm-dialog .bytm-ftitem {
  335. display: flex;
  336. flex-direction: row;
  337. justify-content: space-between;
  338. align-items: center;
  339. font-size: 1.4em;
  340. padding: 8px 20px;
  341. transition: background-color 0.15s ease-out;
  342. }
  343. .bytm-dialog .bytm-ftitem:hover {
  344. background-color: var(--bytm-dialog-bg-highlight);
  345. }
  346. .bytm-ftitem-leftside {
  347. display: flex;
  348. align-items: center;
  349. min-height: 24px;
  350. }
  351. .bytm-ftconf-ctrl {
  352. display: inline-flex;
  353. align-items: center;
  354. white-space: nowrap;
  355. margin-left: 10px;
  356. }
  357. .bytm-ftconf-label {
  358. user-select: none;
  359. }
  360. .bytm-slider-label {
  361. margin-right: 10px;
  362. }
  363. .bytm-ftconf-input.bytm-hotkey-input {
  364. cursor: pointer;
  365. min-width: 80px;
  366. }
  367. .bytm-ftconf-input[type=number] {
  368. width: 75px;
  369. }
  370. .bytm-ftconf-input[type=range] {
  371. width: 200px;
  372. }
  373. .bytm-ftconf-input[type=text] {
  374. width: 200px;
  375. }
  376. .bytm-ftconf-input[type=checkbox] {
  377. margin-left: 5px;
  378. }
  379. select.bytm-ftconf-input {
  380. cursor: revert;
  381. }
  382. #bytm-export-dialog-text, #bytm-import-dialog-text {
  383. font-size: 1.6em;
  384. margin-bottom: 15px;
  385. }
  386. .bytm-dialog-footer-copied {
  387. font-size: 1.6em;
  388. margin-right: 15px;
  389. }
  390. #bytm-changelog-dialog-body {
  391. overflow-y: auto;
  392. }
  393. #bytm-export-dialog-textarea, #bytm-import-dialog-textarea {
  394. width: 100%;
  395. height: 150px;
  396. resize: none;
  397. }
  398. .bytm-markdown-container {
  399. display: flex;
  400. flex-direction: column;
  401. overflow-y: auto;
  402. font-size: 1.4rem;
  403. line-height: 20px;
  404. }
  405. /* Markdown stuff */
  406. .bytm-markdown-container kbd, .bytm-kbd {
  407. --bytm-easing: cubic-bezier(0.31, 0.58, 0.24, 1.15);
  408. display: inline-block;
  409. vertical-align: bottom;
  410. padding: 4px;
  411. padding-top: 2px;
  412. font-size: 0.95em;
  413. line-height: 11px;
  414. background-color: #222;
  415. border: 1px solid #777;
  416. border-radius: 5px;
  417. box-shadow: inset 0 -2px 0 #515559;
  418. transition: padding 0.1s var(--bytm-easing), margin-top 0.1s var(--bytm-easing), box-shadow 0.1s var(--bytm-easing);
  419. }
  420. .bytm-markdown-container kbd:active, .bytm-kbd:active {
  421. padding-bottom: 2px;
  422. margin-top: 2px;
  423. box-shadow: inset 0 0 0 initial;
  424. }
  425. .bytm-markdown-container kbd::selection, .bytm-kbd::selection {
  426. background: rgba(0, 0, 0, 0);
  427. }
  428. .bytm-markdown-container code {
  429. background-color: #222;
  430. border-radius: 3px;
  431. padding: 1px 5px;
  432. font-family: monospace;
  433. }
  434. .bytm-markdown-container h2 {
  435. margin-bottom: 5px;
  436. }
  437. .bytm-markdown-container h2:not(:first-of-type) {
  438. margin-top: 30px;
  439. }
  440. .bytm-markdown-container ul li::before {
  441. content: "• ";
  442. font-weight: bolder;
  443. }
  444. .bytm-markdown-container ul li > ul li::before {
  445. white-space: pre-wrap;
  446. content: " • ";
  447. font-weight: bolder;
  448. }
  449. #bytm-feat-help-dialog-desc, #bytm-feat-help-dialog-text {
  450. overflow-wrap: break-word;
  451. white-space: pre-wrap;
  452. font-size: 1.5em;
  453. }
  454. #bytm-feat-help-dialog-desc {
  455. font-size: 1.65em;
  456. padding-bottom: 5px;
  457. }
  458. .bytm-ftitem-help-btn {
  459. width: 24px !important;
  460. height: 24px !important;
  461. }
  462. .bytm-ftitem-help-btn svg {
  463. width: 18px !important;
  464. height: 18px !important;
  465. }
  466. .bytm-ftitem-help-btn svg > path {
  467. fill: #b3bec7 !important;
  468. }
  469. hr {
  470. display: block;
  471. margin: 8px 0px 12px 0px;
  472. border: revert;
  473. }
  474. .bytm-ftitem-adornment {
  475. display: inline-flex;
  476. justify-content: flex-start;
  477. align-items: center;
  478. margin-right: 6px;
  479. }
  480. .bytm-hotkey-wrapper {
  481. display: flex;
  482. flex-direction: row;
  483. align-items: center;
  484. justify-content: flex-end;
  485. }
  486. .bytm-hotkey-reset {
  487. font-size: 0.9em;
  488. margin-right: 10px;
  489. }
  490. .bytm-hotkey-info {
  491. font-size: 0.9em;
  492. white-space: nowrap;
  493. }
  494. /* use `html body` prefix for more specificity */
  495. html body .bytm-ripple {
  496. position: relative;
  497. overflow: hidden;
  498. white-space: nowrap;
  499. text-overflow: ellipsis;
  500. width: var(--bytm-ripple-width);
  501. height: var(--bytm-ripple-height);
  502. user-select: none;
  503. }
  504. html body .bytm-ripple,
  505. html body .bytm-ripple.normal {
  506. --bytm-ripple-anim-duration: 0.35s;
  507. }
  508. html body .bytm-ripple.fast {
  509. --bytm-ripple-anim-duration: 0.2s;
  510. }
  511. html body .bytm-ripple.slow {
  512. --bytm-ripple-anim-duration: 0.5s;
  513. }
  514. .bytm-ripple-area {
  515. position: absolute;
  516. background: rgba(255, 255, 255, 0.7);
  517. transform: translate(-50%, -50%);
  518. pointer-events: none;
  519. border-radius: 50%;
  520. animation: bytm-scale-ripple var(--bytm-ripple-anim-duration) ease-out;
  521. }
  522. @keyframes bytm-scale-ripple {
  523. 0% {
  524. width: 0;
  525. height: 0;
  526. opacity: 0.5;
  527. }
  528. 100% {
  529. /* Variable is added to .bytm-ripple by JS at runtime since there's no better way of getting the parent's width inside of here */
  530. width: calc(var(--bytm-ripple-cont-width) * 2);
  531. height: calc(var(--bytm-ripple-cont-width) * 2);
  532. opacity: 0;
  533. }
  534. }
  535. :root {
  536. --bytm-toast-bg-color: #323232;
  537. --bytm-toast-text-color: #fff;
  538. --bytm-toast-offset-ver: 80px;
  539. --bytm-toast-offset-hor: 25px;
  540. --bytm-toast-transition-time: 0.5s;
  541. --bytm-toast-transform-distance: 175px;
  542. }
  543. #bytm-toast {
  544. position: fixed;
  545. z-index: 1042069;
  546. opacity: 0.000001;
  547. pointer-events: none;
  548. padding: 10px 16px;
  549. border-radius: 3px;
  550. font-size: 1.5rem;
  551. background-color: var(--bytm-toast-bg-color);
  552. color: var(--bytm-toast-text-color);
  553. transition: opacity var(--bytm-toast-transition-time) ease, transform var(--bytm-toast-transition-time) ease;
  554. }
  555. #bytm-toast.visible {
  556. pointer-events: auto;
  557. opacity: 1;
  558. }
  559. #bytm-toast.pos-tl {
  560. top: var(--bytm-toast-offset-ver);
  561. left: var(--bytm-toast-offset-hor);
  562. transform: translate(0, calc(var(--bytm-toast-transform-distance) * -1));
  563. }
  564. #bytm-toast.pos-tr {
  565. top: var(--bytm-toast-offset-ver);
  566. right: var(--bytm-toast-offset-hor);
  567. transform: translate(0, calc(var(--bytm-toast-transform-distance) * -1));
  568. }
  569. #bytm-toast.pos-br {
  570. bottom: var(--bytm-toast-offset-ver);
  571. right: var(--bytm-toast-offset-hor);
  572. transform: translate(0, var(--bytm-toast-transform-distance));
  573. }
  574. #bytm-toast.pos-bl {
  575. bottom: var(--bytm-toast-offset-ver);
  576. left: var(--bytm-toast-offset-hor);
  577. transform: translate(0, var(--bytm-toast-transform-distance));
  578. }
  579. #bytm-toast.visible.pos-tl,
  580. #bytm-toast.visible.pos-tr,
  581. #bytm-toast.visible.pos-br,
  582. #bytm-toast.visible.pos-bl
  583. {
  584. transform: translate(0, 0);
  585. }
  586. .bytm-toast-flex-wrapper {
  587. display: flex;
  588. flex-direction: row;
  589. align-items: center;
  590. gap: 10px;
  591. }
  592. .bytm-toast-icon.img {
  593. width: 24px;
  594. height: 24px;
  595. }
  596. .bytm-toggle-input-wrapper {
  597. --toggle-height: 20px;
  598. --toggle-width: 40px;
  599. --toggle-knob-offset: 4px;
  600. --toggle-color-on: #3683d4;
  601. --toggle-color-off: #666;
  602. --toggle-knob-color: #f5f5f5;
  603. display: flex;
  604. align-items: center;
  605. }
  606. .bytm-toggle-input-wrapper .bytm-toggle-input-label {
  607. cursor: pointer;
  608. font-size: 1.5rem;
  609. padding: 3px 12px;
  610. }
  611. /* sauce: https://danklammer.com/articles/simple-css-toggle-switch/ */
  612. .bytm-toggle-input {
  613. display: flex;
  614. align-items: center;
  615. }
  616. .bytm-toggle-input input {
  617. appearance: none;
  618. display: inline-block;
  619. width: var(--toggle-width);
  620. height: var(--toggle-height);
  621. position: relative;
  622. border-radius: 50px;
  623. overflow: hidden;
  624. outline: none;
  625. border: none;
  626. margin: 0;
  627. padding: var(--toggle-knob-offset);
  628. cursor: pointer;
  629. background-color: var(--toggle-color-off);
  630. transition: justify-content 0.2s ease, background-color 0.2s ease;
  631. }
  632. .bytm-toggle-input input[data-toggled="true"] {
  633. background-color: var(--toggle-color-on);
  634. }
  635. .bytm-toggle-input input .bytm-toggle-input-knob {
  636. --toggle-knob-calc-width: calc(var(--toggle-height) - (var(--toggle-knob-offset) * 2));
  637. --toggle-knob-calc-height: calc(var(--toggle-height) - (var(--toggle-knob-offset) * 2));
  638. width: var(--toggle-knob-calc-width);
  639. height: var(--toggle-knob-calc-height);
  640. background-color: var(--toggle-knob-color);
  641. border-radius: 50%;
  642. position: absolute;
  643. top: 50%;
  644. transform: translateY(-50%);
  645. left: var(--toggle-knob-offset);
  646. transition: left 0.2s ease;
  647. }
  648. .bytm-toggle-input input[data-toggled="true"] .bytm-toggle-input-knob {
  649. left: calc(var(--toggle-width) - var(--toggle-knob-offset) - var(--toggle-knob-calc-width));
  650. }
  651. :root {
  652. --bytm-menu-bg-highlight: #252525;
  653. }
  654. .bytm-menu-bg {
  655. --bytm-menu-bg: #333333;
  656. --bytm-scroll-indicator-bg: rgba(10, 10, 10, 0.7);
  657. --bytm-menu-separator-color: #797979;
  658. --bytm-menu-border-radius: 10px;
  659. }
  660. .bytm-menu-bg {
  661. display: block;
  662. position: fixed;
  663. width: 100%;
  664. height: 100%;
  665. top: 0;
  666. left: 0;
  667. z-index: 5;
  668. background-color: rgba(0, 0, 0, 0.6);
  669. }
  670. .bytm-menu {
  671. position: fixed;
  672. display: flex;
  673. flex-direction: column;
  674. width: calc(min(100% - 60px, var(--bytm-menu-width-max)));
  675. border-radius: var(--bytm-menu-border-radius);
  676. height: auto;
  677. max-height: calc(min(100% - 40px, var(--bytm-menu-height-max)));
  678. left: 50%;
  679. top: 50%;
  680. transform: translate(-50%, -50%);
  681. z-index: 6;
  682. color: #fff;
  683. background-color: var(--bytm-menu-bg);
  684. }
  685. .bytm-menu.top-aligned {
  686. top: 0;
  687. transform: translate(-50%, 40px);
  688. }
  689. .bytm-menu-body {
  690. padding: 20px;
  691. }
  692. #bytm-menu-opts {
  693. display: flex;
  694. flex-direction: column;
  695. position: relative;
  696. padding: 20px 0px;
  697. overflow-y: auto;
  698. }
  699. .bytm-menu-header {
  700. display: flex;
  701. justify-content: space-between;
  702. align-items: center;
  703. margin-bottom: 6px;
  704. padding: 15px 20px 15px 20px;
  705. background-color: var(--bytm-menu-bg);
  706. border: 2px solid var(--bytm-menu-separator-color);
  707. border-style: none none solid none !important;
  708. border-radius: var(--bytm-menu-border-radius) var(--bytm-menu-border-radius) 0px 0px;
  709. }
  710. .bytm-menu-header.small {
  711. padding: 10px 15px;
  712. border-style: none none solid none !important;
  713. }
  714. .bytm-menu-titlecont {
  715. position: relative;
  716. display: flex;
  717. align-items: center;
  718. }
  719. .bytm-menu-titlecont-no-title {
  720. display: flex;
  721. justify-content: flex-end;
  722. align-items: center;
  723. }
  724. .bytm-menu-title {
  725. position: relative;
  726. display: inline-block;
  727. font-size: 22px;
  728. }
  729. #bytm-cfg-menu-bg .bytm-menu-title {
  730. transform: translate(0px, -6px);
  731. }
  732. #bytm-cfg-menu {
  733. --bytm-menu-subtitle-color: #c6d2db;
  734. }
  735. #bytm-menu-subtitle-cont {
  736. width: 100%;
  737. display: flex;
  738. gap: 6px;
  739. flex-direction: row;
  740. justify-content: space-between;
  741. align-items: end;
  742. position: absolute;
  743. bottom: -12px;
  744. left: 0;
  745. font-size: 10px;
  746. font-weight: normal;
  747. z-index: 7;
  748. }
  749. #bytm-menu-subtitle-cont, #bytm-menu-version-anchor {
  750. color: var(--bytm-menu-subtitle-color) !important;
  751. }
  752. #bytm-menu-subtitle-cont, #bytm-menu-mode-display {
  753. overflow: hidden;
  754. text-overflow: ellipsis;
  755. white-space: nowrap;
  756. }
  757. #bytm-menu-version-anchor {
  758. overflow: hidden;
  759. text-wrap: nowrap;
  760. text-overflow: ellipsis;
  761. }
  762. #bytm-menu-linkscont {
  763. display: flex;
  764. align-items: center;
  765. margin-left: 32px;
  766. }
  767. .bytm-menu-link {
  768. position: relative;
  769. max-height: 32px;
  770. max-width: 32px;
  771. display: inline-flex;
  772. flex-direction: column;
  773. align-items: center;
  774. cursor: pointer;
  775. }
  776. .bytm-menu-link:not(:last-of-type) {
  777. margin-right: 10px;
  778. }
  779. .bytm-menu-link .bytm-menu-img {
  780. width: 32px;
  781. height: 32px;
  782. border-radius: 50%;
  783. padding: 0px;
  784. transform: translateY(0px);
  785. transition: transform 0.15s ease-out, padding 0.15s ease-out;
  786. }
  787. .bytm-menu-link:hover .bytm-menu-img {
  788. padding: 7px;
  789. transform: translateY(-14px);
  790. }
  791. .bytm-menu-link .extended-link {
  792. visibility: hidden;
  793. position: absolute;
  794. top: 14px;
  795. padding-top: 13px;
  796. padding-bottom: 2px;
  797. opacity: 0;
  798. text-decoration: none;
  799. color: var(--bytm-menu-subtitle-color) !important;
  800. white-space: pre;
  801. font-size: 1.1rem;
  802. transition: visibility 0.15s ease-out, opacity 0.15s ease-out;
  803. }
  804. .bytm-menu-link:hover .extended-link {
  805. visibility: visible;
  806. opacity: 1;
  807. }
  808. .bytm-menu-close {
  809. width: 32px;
  810. height: 32px;
  811. cursor: pointer;
  812. }
  813. .bytm-menu-close.small {
  814. width: 24px;
  815. height: 24px;
  816. }
  817. .bytm-menu-footer {
  818. font-size: 17px;
  819. text-decoration: underline;
  820. }
  821. .bytm-menu-footer.hidden {
  822. display: none;
  823. }
  824. .bytm-menu-footer-cont {
  825. display: flex;
  826. flex-direction: row;
  827. justify-content: space-between;
  828. margin-top: 6px;
  829. padding: 15px 20px;
  830. background: var(--bytm-menu-bg);
  831. background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--bytm-menu-bg) 30%, var(--bytm-menu-bg) 100%);
  832. border: 2px solid var(--bytm-menu-separator-color);
  833. border-style: solid none none none !important;
  834. border-radius: 0px 0px var(--bytm-menu-border-radius) var(--bytm-menu-border-radius);
  835. }
  836. #bytm-menu-footer-buttons-cont button:not(:last-of-type) {
  837. margin-right: 15px;
  838. }
  839. .bytm-menu-footer-right {
  840. display: flex;
  841. flex-direction: row-reverse;
  842. align-items: center;
  843. }
  844. #bytm-menu-footer-left-buttons-cont button:not(:last-of-type) {
  845. margin-right: 15px;
  846. }
  847. #bytm-menu-scroll-indicator {
  848. --bytm-scroll-indicator-padding: 5px;
  849. position: sticky;
  850. bottom: -15px;
  851. left: 50%;
  852. margin-top: calc(-32px - var(--bytm-scroll-indicator-padding) * 2);
  853. padding: var(--bytm-scroll-indicator-padding);
  854. transform: translateX(-50%);
  855. width: 32px;
  856. height: 32px;
  857. z-index: 7;
  858. background-color: var(--bytm-scroll-indicator-bg);
  859. border-radius: 50%;
  860. cursor: pointer;
  861. }
  862. .bytm-hidden {
  863. visibility: hidden !important;
  864. }
  865. .bytm-ftconf-category-header {
  866. font-size: 20px;
  867. margin-top: 32px;
  868. margin-bottom: 8px;
  869. padding: 0px 20px;
  870. }
  871. .bytm-ftconf-category-header:first-of-type {
  872. margin-top: 0;
  873. }
  874. .bytm-ftitem {
  875. display: flex;
  876. flex-direction: row;
  877. justify-content: space-between;
  878. align-items: center;
  879. font-size: 1.4rem;
  880. padding: 8px 20px;
  881. transition: background-color 0.15s ease-out;
  882. }
  883. .bytm-ftitem:hover {
  884. background-color: var(--bytm-menu-bg-highlight);
  885. }
  886. .bytm-ftitem-leftside {
  887. display: flex;
  888. align-items: center;
  889. min-height: 24px;
  890. }
  891. .bytm-ftconf-ctrl {
  892. display: inline-flex;
  893. align-items: center;
  894. white-space: nowrap;
  895. margin-left: 10px;
  896. }
  897. .bytm-ftconf-label {
  898. user-select: none;
  899. }
  900. .bytm-slider-label {
  901. margin-right: 10px;
  902. }
  903. .bytm-toggle-label {
  904. padding-left: 10px;
  905. padding-right: 5px;
  906. }
  907. .bytm-ftconf-input.bytm-hotkey-input {
  908. cursor: pointer;
  909. min-width: 50px;
  910. }
  911. .bytm-ftconf-input[type=number] {
  912. width: 75px;
  913. }
  914. .bytm-ftconf-input[type=checkbox] {
  915. margin-left: 5px;
  916. }
  917. #bytm-export-menu-text, #bytm-import-menu-text {
  918. white-space: pre-wrap;
  919. font-size: 1.6rem;
  920. margin-bottom: 15px;
  921. }
  922. .bytm-menu-footer-copied {
  923. font-size: 1.6rem;
  924. margin-right: 15px;
  925. }
  926. #bytm-changelog-menu-body {
  927. overflow-y: auto;
  928. }
  929. .bytm-changelog-version-details:not(:first-of-type) {
  930. margin-top: 15px;
  931. }
  932. .bytm-changelog-version-details summary h2 {
  933. display: inline-block;
  934. }
  935. .bytm-changelog-version-details summary {
  936. cursor: pointer;
  937. }
  938. .bytm-changelog-version-details summary::marker {
  939. font-size: 2rem;
  940. }
  941. #bytm-export-menu-textarea, #bytm-import-menu-textarea {
  942. width: 100%;
  943. height: 150px;
  944. resize: none;
  945. }
  946. .bytm-markdown-container {
  947. display: flex;
  948. flex-direction: column;
  949. overflow-y: auto;
  950. font-size: 1.5rem;
  951. line-height: 20px;
  952. }
  953. /* Markdown stuff */
  954. .bytm-markdown-container kbd {
  955. --bytm-easing: cubic-bezier(0.31, 0.58, 0.24, 1.15);
  956. display: inline-block;
  957. vertical-align: bottom;
  958. padding: 4px;
  959. padding-top: 2px;
  960. font-size: 0.95em;
  961. line-height: 11px;
  962. background-color: #222;
  963. border: 1px solid #777;
  964. border-radius: 5px;
  965. box-shadow: inset 0 -2px 0 #515559;
  966. transition: padding 0.1s var(--bytm-easing), box-shadow 0.1s var(--bytm-easing);
  967. }
  968. .bytm-markdown-container kbd:active {
  969. padding-bottom: 2px;
  970. box-shadow: inset 0 0 0 initial;
  971. }
  972. .bytm-markdown-container kbd::selection {
  973. background: rgba(0, 0, 0, 0);
  974. }
  975. .bytm-markdown-container code {
  976. background-color: #222;
  977. border-radius: 3px;
  978. padding: 1px 5px;
  979. }
  980. .bytm-markdown-container h2 {
  981. margin-bottom: 5px;
  982. }
  983. .bytm-markdown-container h2:not(:first-of-type) {
  984. margin-top: 30px;
  985. }
  986. .bytm-markdown-container ul li {
  987. padding-left: 0px;
  988. }
  989. .bytm-markdown-container ul li::marker {
  990. content: none;
  991. }
  992. .bytm-markdown-container ul li::before {
  993. content: "• ";
  994. font-weight: bolder;
  995. }
  996. .bytm-markdown-container ul li > ul li {
  997. padding-left: 16px;
  998. }
  999. .bytm-markdown-container ul li > ul li::marker {
  1000. content: none;
  1001. }
  1002. .bytm-markdown-container ul li > ul li::before {
  1003. white-space: pre-wrap;
  1004. content: "• ";
  1005. font-weight: bolder;
  1006. }
  1007. .bytm-markdown-container ul li > ul li > ul li {
  1008. padding-left: 16px;
  1009. }
  1010. .bytm-markdown-container ul li > ul li > ul li::marker {
  1011. content: none;
  1012. }
  1013. .bytm-markdown-container ul li > ul li > ul li::before {
  1014. white-space: pre-wrap;
  1015. content: "• ";
  1016. font-weight: bolder;
  1017. }
  1018. .bytm-markdown-container .pr-link-cont {
  1019. padding-top: 10px;
  1020. }
  1021. #bytm-feat-help-dialog-desc, #bytm-feat-help-dialog-text {
  1022. overflow-wrap: break-word;
  1023. white-space: pre-wrap;
  1024. font-size: 1.5rem;
  1025. line-height: 1.25em;
  1026. }
  1027. #bytm-feat-help-dialog-desc {
  1028. font-size: 1.8rem;
  1029. padding-bottom: 10px;
  1030. }
  1031. .bytm-ftitem-help-btn {
  1032. width: 24px !important;
  1033. height: 24px !important;
  1034. }
  1035. .bytm-ftitem-help-btn svg {
  1036. width: 18px !important;
  1037. height: 18px !important;
  1038. }
  1039. .bytm-ftitem-help-btn svg > path {
  1040. fill: #b3bec7 !important;
  1041. }
  1042. hr {
  1043. display: block;
  1044. margin: 8px 0px 12px 0px;
  1045. border: revert;
  1046. }
  1047. /* #region misc */
  1048. .bytm-disable-scroll {
  1049. overflow: hidden !important;
  1050. }
  1051. .bytm-generic-btn {
  1052. --bytm-generic-btn-width: 36px;
  1053. --bytm-generic-btn-height: 36px;
  1054. display: inline-flex;
  1055. align-items: center;
  1056. justify-content: center;
  1057. position: relative;
  1058. vertical-align: middle;
  1059. cursor: pointer;
  1060. margin-left: 8px;
  1061. min-width: var(--bytm-generic-btn-width);
  1062. max-width: var(--bytm-generic-btn-width);
  1063. min-height: var(--bytm-generic-btn-height);
  1064. max-height: var(--bytm-generic-btn-height);
  1065. border: 1px solid transparent;
  1066. border-radius: calc(var(--bytm-generic-btn-height, 36px) / 2);
  1067. background-color: transparent;
  1068. transition: background-color 0.2s ease;
  1069. }
  1070. .bytm-generic-btn:not(.long):hover {
  1071. background-color: rgba(255, 255, 255, 0.2);
  1072. }
  1073. .bytm-generic-btn:active {
  1074. animation: flashBorder 0.4s ease 1;
  1075. }
  1076. .bytm-generic-btn:not(.bytm-toggle):active {
  1077. background-color: #5f5f5f;
  1078. }
  1079. .bytm-generic-btn.long {
  1080. --bytm-generic-btn-width: 136px;
  1081. padding: 0px;
  1082. line-height: 36px;
  1083. display: inline-flex;
  1084. align-items: center;
  1085. justify-content: center;
  1086. position: relative;
  1087. vertical-align: middle;
  1088. cursor: pointer;
  1089. margin-left: 0px;
  1090. }
  1091. .bytm-generic-btn.long .bytm-generic-btn-img.left {
  1092. margin-right: 8px;
  1093. }
  1094. .bytm-generic-btn.long .bytm-generic-btn-img.right {
  1095. margin-left: 8px;
  1096. }
  1097. .bytm-generic-long-btn-txt {
  1098. font-size: 14px;
  1099. }
  1100. .bytm-ftitem-help-btn.bytm-generic-btn {
  1101. --bytm-generic-btn-width: 24px;
  1102. --bytm-generic-btn-height: 24px;
  1103. }
  1104. @keyframes flashBorder {
  1105. 0% {
  1106. border: 1px solid initial;
  1107. }
  1108. 20% {
  1109. border: 1px solid #808080;
  1110. }
  1111. 100% {
  1112. border: 1px solid initial;
  1113. }
  1114. }
  1115. .bytm-generic-btn-img {
  1116. display: inline-block;
  1117. z-index: 1;
  1118. width: 24px;
  1119. height: 24px;
  1120. }
  1121. .bytm-spinner {
  1122. animation: rotate 1.2s linear infinite;
  1123. }
  1124. @keyframes rotate {
  1125. from {
  1126. transform: rotate(0deg);
  1127. }
  1128. to {
  1129. transform: rotate(360deg);
  1130. }
  1131. }
  1132. .bytm-anchor {
  1133. all: unset;
  1134. cursor: pointer;
  1135. }
  1136. /* ytmusic-logo a[bytm-animated="true"] .bytm-mod-logo-ellipse {
  1137. transform-origin: 12px 12px;
  1138. animation: rotate 1s ease-in-out infinite;
  1139. } */
  1140. ytmusic-logo a.bytm-logo-exchanged .bytm-mod-logo-path {
  1141. transform-origin: 12px 12px;
  1142. animation: rotate 1s ease-in-out;
  1143. }
  1144. ytmusic-logo a.bytm-logo-exchanged .bytm-mod-logo-img {
  1145. width: 24px;
  1146. height: 24px;
  1147. z-index: 1000;
  1148. position: absolute;
  1149. animation: rotate-fade-in 1s ease-in-out;
  1150. }
  1151. @keyframes rotate-fade-in {
  1152. 0% {
  1153. opacity: 0;
  1154. transform: rotate(0deg);
  1155. }
  1156. 30% {
  1157. opacity: 0;
  1158. }
  1159. 90% {
  1160. opacity: 1;
  1161. }
  1162. 100% {
  1163. transform: rotate(360deg);
  1164. }
  1165. }
  1166. .bytm-no-select {
  1167. user-select: none;
  1168. -ms-user-select: none;
  1169. -moz-user-select: none;
  1170. -webkit-user-select: none;
  1171. }
  1172. /* YTM does some weird styling that breaks everything, so this reverts all of BYTM's buttons to the browser default style */
  1173. button.bytm-btn {
  1174. padding: revert;
  1175. border: revert;
  1176. outline: revert;
  1177. font: revert;
  1178. text-transform: revert;
  1179. color: revert;
  1180. background: revert;
  1181. cursor: pointer;
  1182. line-height: 1.4em;
  1183. }
  1184. .bytm-link, .bytm-markdown-container a {
  1185. color: #369bff !important;
  1186. text-decoration: none !important;
  1187. cursor: pointer;
  1188. }
  1189. .bytm-link:hover, .bytm-markdown-container a:hover {
  1190. color: #369bff !important;
  1191. text-decoration: underline !important;
  1192. }
  1193. button[disabled] {
  1194. cursor: not-allowed;
  1195. }
  1196. button[disabled].bytm-busy {
  1197. cursor: progress;
  1198. }
  1199. /* #region random fixes */
  1200. .sponsorSkipNoticeContainer,
  1201. .sponsorSkipObject {
  1202. z-index: 4;
  1203. }
  1204. /* #region menu */
  1205. .bytm-cfg-menu-option {
  1206. display: block;
  1207. padding: 8px 0;
  1208. }
  1209. .bytm-cfg-menu-option-item {
  1210. display: flex;
  1211. flex-direction: row;
  1212. align-items: center;
  1213. font-size: 1.4rem;
  1214. font-weight: 400;
  1215. line-height: 24px;
  1216. padding: var(--yt-compact-link-paper-item-padding, 0px 36px 0 16px);
  1217. min-height: var(--paper-item-min-height, 40px);
  1218. white-space: nowrap;
  1219. cursor: pointer;
  1220. }
  1221. .bytm-cfg-menu-option-item:hover {
  1222. background-color: var(--yt-spec-badge-chip-background, #3e3e3e);
  1223. }
  1224. .bytm-cfg-menu-option-icon {
  1225. width: 24px;
  1226. height: 24px;
  1227. margin-right: 16px;
  1228. display: flex;
  1229. align-items: center;
  1230. flex-direction: row;
  1231. flex: none;
  1232. }
  1233. .bytm-cfg-menu-option-text {
  1234. font-size: 1.4rem;
  1235. line-height: 2rem;
  1236. }
  1237. yt-multi-page-menu-section-renderer.ytd-multi-page-menu-renderer {
  1238. border-bottom: 1px solid var(--yt-spec-10-percent-layer, #3e3e3e);
  1239. }
  1240. .bytm-yt-cfg-menu-option {
  1241. position: relative;
  1242. width: calc(100% - 12px);
  1243. }
  1244. .bytm-yt-cfg-menu-option-inner {
  1245. display: flex;
  1246. flex-direction: row;
  1247. justify-content: flex-start;
  1248. align-items: center;
  1249. min-height: var(--paper-item-min-height, 48px);
  1250. max-width: calc(100% - 12px);
  1251. padding: 0px 12px;
  1252. border-radius: var(--paper-item-focused-before-border-radius, 10px);
  1253. cursor: pointer;
  1254. background-color: transparent;
  1255. transition: background-color 0.2s ease;
  1256. }
  1257. .bytm-yt-cfg-menu-option-inner:hover {
  1258. background-color: var(--yt-spec-badge-chip-background, rgba(255, 255, 255, 0.1));
  1259. }
  1260. .bytm-yt-cfg-menu-option-icon {
  1261. display: flex;
  1262. align-items: center;
  1263. flex-direction: row;
  1264. width: 24px;
  1265. height: 24px;
  1266. margin-right: 24px;
  1267. }
  1268. .bytm-yt-cfg-menu-option-item {
  1269. width: 100%;
  1270. color: #fff;
  1271. font-size: 14px;
  1272. }
  1273. .bytm-yt-cfg-menu-option-item:hover {
  1274. /* Support for "Enhancer for YouTube" extension's custom themes */
  1275. color: var(--main-color, #fff) !important;
  1276. }
  1277. /* #region watermark */
  1278. #bytm-watermark {
  1279. font-size: 10px;
  1280. display: inline-block;
  1281. position: absolute;
  1282. left: 97px;
  1283. top: 45px;
  1284. z-index: 10;
  1285. color: #f1f1f1;
  1286. text-decoration: none;
  1287. cursor: pointer;
  1288. }
  1289. #bytm-watermark:hover {
  1290. text-decoration: underline;
  1291. }
  1292. /* #region above queue btns */
  1293. #bytm-above-queue-btn-cont {
  1294. display: flex;
  1295. flex-direction: row;
  1296. justify-content: center;
  1297. align-items: center;
  1298. flex-wrap: nowrap;
  1299. height: 100%;
  1300. }
  1301. #bytm-above-queue-btn-wrapper {
  1302. white-space: nowrap;
  1303. }
  1304. .bytm-above-queue-btn {
  1305. width: 32px;
  1306. height: 32px;
  1307. margin-left: 0;
  1308. margin-right: 8px;
  1309. }
  1310. /* #region scroll to active */
  1311. #bytm-scroll-to-active-btn-cont {
  1312. display: flex;
  1313. flex-direction: column;
  1314. justify-content: center;
  1315. align-items: center;
  1316. height: 100%;
  1317. }
  1318. #bytm-scroll-to-active-btn-cont.hidden {
  1319. display: none;
  1320. }
  1321. #bytm-scroll-to-active-btn {
  1322. display: inline-flex;
  1323. align-items: center;
  1324. justify-content: center;
  1325. border-radius: 50%;
  1326. cursor: pointer;
  1327. }
  1328. #bytm-scroll-to-active-btn {
  1329. width: revert;
  1330. height: revert;
  1331. }
  1332. #bytm-scroll-to-active-btn .bytm-generic-btn-img {
  1333. padding: 4px;
  1334. }
  1335. /* #region thumbnail */
  1336. #bytm-thumbnail-overlay {
  1337. position: absolute;
  1338. top: 0;
  1339. left: 0;
  1340. width: 100%;
  1341. height: 100%;
  1342. display: none;
  1343. background-color: #030303;
  1344. z-index: 0;
  1345. }
  1346. #bytm-thumbnail-overlay-img {
  1347. position: relative;
  1348. width: 100%;
  1349. height: 100%;
  1350. }
  1351. #bytm-thumbnail-overlay-indicator {
  1352. position: absolute;
  1353. bottom: 16px;
  1354. right: 16px;
  1355. width: calc(min(56px, 100% - 16px));
  1356. height: calc(min(56px, 100% - 16px));
  1357. z-index: 1;
  1358. cursor: help;
  1359. filter: drop-shadow(0 0 3px #000);
  1360. }
  1361. ytmusic-player#player #bezel {
  1362. z-index: 1;
  1363. }
  1364. :root {
  1365. --bytm-auto-like-btn-color: #bf87f0;
  1366. }
  1367. #bytm-auto-like-channels-list {
  1368. display: flex;
  1369. flex-direction: column;
  1370. overflow-x: hidden;
  1371. overflow-y: auto;
  1372. white-space: nowrap;
  1373. text-overflow: ellipsis;
  1374. /* idk how else to get the scroll bar to show up correctly */
  1375. max-height: calc(min(100vh - 40px, var(--bytm-dialog-height-max)) - 300px);
  1376. }
  1377. .bytm-auto-like-channel-row-left-cont {
  1378. display: flex;
  1379. align-items: center;
  1380. gap: 10px;
  1381. }
  1382. .bytm-auto-like-channel-row {
  1383. display: flex;
  1384. justify-content: space-between;
  1385. align-items: center;
  1386. padding: 8px 15px;
  1387. transition: background-color 0.15s ease-out;
  1388. }
  1389. .bytm-auto-like-channels-desc {
  1390. padding: 0px 15px;
  1391. white-space: pre-wrap;
  1392. font-size: 1.6rem;
  1393. margin-bottom: 15px;
  1394. }
  1395. #bytm-auto-like-channels-add-new-wrapper {
  1396. margin: 15px;
  1397. margin-top: 5px;
  1398. }
  1399. .bytm-auto-like-channel-row:hover {
  1400. background-color: var(--bytm-menu-bg-highlight);
  1401. }
  1402. .bytm-auto-like-channel-row .bytm-toggle-input-wrapper.bytm-auto-like-channel-toggle {
  1403. --toggle-height: 18px !important;
  1404. --toggle-width: 36px !important;
  1405. }
  1406. .bytm-auto-like-channel-row .bytm-generic-btn {
  1407. --bytm-generic-btn-width: 30px;
  1408. --bytm-generic-btn-height: 30px;
  1409. }
  1410. .bytm-auto-like-channel-name-label {
  1411. display: flex;
  1412. flex-direction: row;
  1413. align-items: center;
  1414. }
  1415. .bytm-auto-like-channel-id {
  1416. cursor: text;
  1417. font-size: 1.1rem;
  1418. color: #aaa;
  1419. margin-left: 10px;
  1420. }
  1421. .bytm-auto-like-toggle-btn {
  1422. margin-right: 8px;
  1423. border: 1px solid var(--bytm-auto-like-btn-color);
  1424. box-sizing: border-box;
  1425. background-color: transparent;
  1426. transition: border-color 0.2s ease;
  1427. animation: none;
  1428. }
  1429. .bytm-auto-like-toggle-btn.left-margin {
  1430. margin: 0;
  1431. margin-left: 8px;
  1432. }
  1433. .bytm-auto-like-toggle-btn:active {
  1434. background-color: rgba(255, 255, 255, 0.1);
  1435. }
  1436. .bytm-auto-like-toggle-btn:active,
  1437. .bytm-auto-like-toggle-btn.toggled {
  1438. border-color: rgba(255, 255, 255, 0.2);
  1439. }
  1440. .bytm-auto-like-toggle-btn svg path {
  1441. fill: var(--bytm-auto-like-btn-color);
  1442. transition: fill 0.2s ease;
  1443. }
  1444. .bytm-auto-like-toggle-btn:active svg path,
  1445. .bytm-auto-like-toggle-btn.toggled svg path {
  1446. fill: var(--ytmusic-subscribe-button-color, rgba(255, 255, 255, 0.7));
  1447. }
  1448. .bytm-auto-like-toggle-btn .bytm-generic-long-btn-txt {
  1449. font-weight: 500;
  1450. color: var(--bytm-auto-like-btn-color);
  1451. transition: color 0.2s ease;
  1452. }
  1453. .bytm-auto-like-toggle-btn:active .bytm-generic-long-btn-txt,
  1454. .bytm-auto-like-toggle-btn.toggled .bytm-generic-long-btn-txt
  1455. {
  1456. color: var(--ytmusic-subscribe-button-color, rgba(255, 255, 255, 0.7));
  1457. }
  1458. /* #region queue buttons */
  1459. #side-panel ytmusic-player-queue-item .song-info.ytmusic-player-queue-item {
  1460. position: relative;
  1461. }
  1462. #side-panel ytmusic-player-queue-item .bytm-queue-btn-container {
  1463. background: rgb(0, 0, 0);
  1464. background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #030303 15%);
  1465. display: none;
  1466. position: absolute;
  1467. right: 0;
  1468. padding-left: 25px;
  1469. height: 100%;
  1470. }
  1471. #side-panel ytmusic-player-queue-item[selected] .bytm-queue-btn-container {
  1472. background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #1D1D1D 15%);
  1473. }
  1474. .bytm-generic-list-queue-btn-container {
  1475. /* otherwise the queue buttons render over the currently playing song page */
  1476. z-index: 1;
  1477. }
  1478. #side-panel ytmusic-player-queue-item:hover .bytm-queue-btn-container,
  1479. ytmusic-playlist-shelf-renderer ytmusic-responsive-list-item-renderer:hover .bytm-queue-btn-container,
  1480. ytmusic-shelf-renderer ytmusic-responsive-list-item-renderer:hover .bytm-queue-btn-container,
  1481. /* same thing but with :focus-within */
  1482. #side-panel ytmusic-player-queue-item:focus-within .bytm-queue-btn-container,
  1483. ytmusic-playlist-shelf-renderer ytmusic-responsive-list-item-renderer:focus-within .bytm-queue-btn-container,
  1484. ytmusic-shelf-renderer ytmusic-responsive-list-item-renderer:focus-within .bytm-queue-btn-container
  1485. {
  1486. display: inline-flex;
  1487. align-items: center;
  1488. }
  1489. ytmusic-responsive-list-item-renderer .title-column {
  1490. align-items: center;
  1491. }
  1492. #side-panel ytmusic-player-queue-item[play-button-state="loading"] .bytm-queue-btn-container,
  1493. #side-panel ytmusic-player-queue-item[play-button-state="playing"] .bytm-queue-btn-container,
  1494. #side-panel ytmusic-player-queue-item[play-button-state="paused"] .bytm-queue-btn-container
  1495. {
  1496. /* using a var() with predefined value from YTM is not viable since the nesting changes the actual value of the variable */
  1497. background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #030303 15%);
  1498. }
  1499. #side-panel ytmusic-player-queue-item[selected][play-button-state="loading"] .bytm-queue-btn-container,
  1500. #side-panel ytmusic-player-queue-item[selected][play-button-state="playing"] .bytm-queue-btn-container,
  1501. #side-panel ytmusic-player-queue-item[selected][play-button-state="paused"] .bytm-queue-btn-container
  1502. {
  1503. /* using a var() with predefined value from YTM is not viable since the nesting changes the actual value of the variable */
  1504. background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #1D1D1D 15%);
  1505. }
  1506. ytmusic-app ytmusic-popup-container tp-yt-iron-dropdown[data-bytm-hidden=true] {
  1507. display: none !important;
  1508. }
  1509. ytmusic-responsive-list-item-renderer.bytm-has-queue-btns .bytm-generic-list-queue-btn-container {
  1510. visibility: hidden;
  1511. }
  1512. ytmusic-responsive-list-item-renderer.bytm-has-queue-btns .bytm-generic-list-queue-btn-container a.bytm-generic-btn {
  1513. visibility: hidden !important;
  1514. }
  1515. ytmusic-responsive-list-item-renderer.bytm-has-queue-btns:hover .bytm-generic-list-queue-btn-container,
  1516. ytmusic-responsive-list-item-renderer.bytm-has-queue-btns:focus-within .bytm-generic-list-queue-btn-container
  1517. {
  1518. visibility: visible;
  1519. }
  1520. ytmusic-responsive-list-item-renderer.bytm-has-queue-btns:hover .bytm-generic-list-queue-btn-container a.bytm-generic-btn,
  1521. ytmusic-responsive-list-item-renderer.bytm-has-queue-btns:focus-within .bytm-generic-list-queue-btn-container a.bytm-generic-btn
  1522. {
  1523. visibility: visible !important;
  1524. }
  1525. /* #region volume slider */
  1526. #bytm-vol-slider-cont {
  1527. position: relative;
  1528. }
  1529. #bytm-vol-slider-label {
  1530. opacity: 0.000001;
  1531. position: absolute;
  1532. display: flex;
  1533. flex-direction: row;
  1534. align-items: center;
  1535. gap: 5px;
  1536. font-size: 1.4rem;
  1537. top: 50%;
  1538. left: 0;
  1539. transform: translate(calc(-50% - 10px), -50%);
  1540. text-align: right;
  1541. transition: opacity 0.2s ease;
  1542. }
  1543. #bytm-vol-slider-label.has-icon {
  1544. transform: translate(calc(-50% - 25px), -50%);
  1545. }
  1546. #bytm-vol-slider-label svg {
  1547. padding: 4px;
  1548. }
  1549. #bytm-vol-slider-label svg path {
  1550. fill: #909090;
  1551. }
  1552. #bytm-vol-slider-label.bytm-visible {
  1553. opacity: 1;
  1554. }
  1555. #bytm-vol-slider-shared {
  1556. display: flex;
  1557. flex-direction: row;
  1558. align-items: center;
  1559. }
  1560. #bytm-vol-slider-shared svg {
  1561. width: 20px;
  1562. height: 20px;
  1563. }