BetterYTM.css 41 KB

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