Greasy Fork is available in English.

Better Icons for Invidious

using css icon alternatives instead of font variant.

  1. /* ==UserStyle==
  2. @name Better Icons for Invidious
  3. @description using css icon alternatives instead of font variant.
  4. @author NotYou
  5. @namespace -
  6. @version 0.5.1
  7. @license GPL-3.0-or-later
  8. ==/UserStyle== */
  9.  
  10. @-moz-document domain("invidious.snopyta.org"), domain("yewtu.be"), domain("invidious.kavin.rocks"), domain("vid.puffyan.us"), domain("invidious.namazso.eu"), domain("inv.riverside.rocks"), domain("invidious.osi.kr"), domain("youtube.076.ne.jp"), domain("yt.artemislena.eu"), domain("youtube.076.ne.jp"), domain("tube.cthd.icu"), domain("invidious.flokinet.to"), domain("invidious.privacy.gd"), domain("invidious.weblibre.org"), domain("invidious.esmailelbob.xyz"), domain("invidious.lunar.icu"), domain("invidious.mutahar.rocks"), domain("y.com.sb"), domain("invidious.sethforprivacy.com"), domain("c7hqkpkpemu6e7emz5b4vyz7idjgdvgaaa3dyimmeojqbgpea3xqjoid.onion"), domain("w6ijuptxiku4xpnnaetxvnkc5vqcdu7mgns2u77qefoixi63vbvnpnqd.onion"), domain("kbjggqkzv65ivcqj6bumvp337z6264huv5kpkwuv6gu5yjiskvan7fad.onion"), domain("grwp24hodrefzvjjuccrkw3mjq4tzhaaq32amf33dzpmuxe7ilepcmad.onion"), domain("hpniueoejy4opn7bc4ftgazyqjoeqwlvh2uiku2xqku6zpoa4bf5ruid.onion"), domain("osbivz6guyeahrwp2lnwyjk2xos342h4ocsxyqrlaopqjuhwn2djiiyd.onion"), domain("u2cvlit75owumwpy4dj2hsmvkq7nvrclkpht7xgyye2pyoxhpmclkrad.onion"), domain("2rorw2w54tr7jkasn53l5swbjnbvz3ubebhswscnc54yac6gmkxaeeqd.onion"), domain("euxxcnhsynwmfidvhjf6uzptsmh4dipkmgdmcmxxuo7tunp3ad2jrwyd.onion") {
  11.  
  12. [class*="icon"]::before {
  13. content: '' !important;
  14. }
  15.  
  16. .creator-heart-background-hearted {
  17. border-radius: 50%;
  18. }
  19.  
  20. .ion-ios-cog {
  21. box-sizing: border-box;
  22. position: relative;
  23. display: block;
  24. transform: scale(var(--ggs,1));
  25. width: 10px;
  26. height: 2px;
  27. box-shadow: -3px 4px 0 0, 3px -4px 0 0;
  28. }
  29.  
  30. .ion-ios-cog::after, .ion-ios-cog::before {
  31. content: "";
  32. display: block;
  33. box-sizing: border-box;
  34. position: absolute;
  35. width: 8px;
  36. height: 8px;
  37. border: 2px solid;
  38. border-radius: 100%;
  39. }
  40.  
  41. .ion-ios-cog::before {
  42. top: -7px;
  43. left: -4px;
  44. }
  45.  
  46. .ion-ios-cog::after {
  47. bottom: -7px;
  48. right: -4px;
  49. }
  50.  
  51. .ion-ios-notifications-outline, .ion-ios-notifications-outline::before {
  52. border-top-left-radius: 100px;
  53. border-top-right-radius: 100px;
  54. }
  55.  
  56. .ion-ios-notifications-outline {
  57. box-sizing: border-box;
  58. position: relative;
  59. display: block;
  60. transform: scale(var(--ggs,1));
  61. border: 2px solid;
  62. border-bottom: 0;
  63. width: 14px;
  64. height: 14px;
  65. }
  66.  
  67. .ion-ios-notifications-outline::after, .ion-ios-notifications-outline::before {
  68. content: "";
  69. display: block;
  70. box-sizing: border-box;
  71. position: absolute;
  72. }
  73.  
  74. .ion-ios-notifications-outline::before {
  75. background: currentColor;
  76. width: 4px;
  77. height: 4px;
  78. top: -4px;
  79. left: 3px;
  80. }
  81.  
  82. .ion-ios-notifications-outline::after {
  83. width: 16px;
  84. height: 10px;
  85. border: 6px solid transparent;
  86. border-top: 1px solid transparent;
  87. box-shadow: inset 0 0 0 4px, 0 -2px 0 0;
  88. top: 14px;
  89. left: -3px;
  90. border-radius: 0px 0px 20px 20px;
  91. }
  92.  
  93. .ion-ios-notifications, .ion-ios-notifications::before {
  94. border-top-left-radius: 100px;
  95. border-top-right-radius: 100px;
  96. }
  97.  
  98. .ion-ios-notifications {
  99. background: currentcolor none repeat scroll 0% 0%;
  100. box-sizing: border-box;
  101. position: relative;
  102. display: inline-block;
  103. transform: scale(var(--ggs,1));
  104. border: 2px solid;
  105. border-bottom: 0;
  106. width: 14px;
  107. height: 14px;
  108. }
  109.  
  110. .ion-ios-notifications::after, .ion-ios-notifications::before {
  111. content: "";
  112. display: block;
  113. box-sizing: border-box;
  114. position: absolute;
  115. }
  116.  
  117. .ion-ios-notifications::before {
  118. background: currentColor;
  119. width: 4px;
  120. height: 4px;
  121. top: -4px;
  122. left: 3px;
  123. }
  124.  
  125. .ion-ios-notifications::after {
  126. width: 16px;
  127. height: 10px;
  128. border: 6px solid transparent;
  129. border-top: 1px solid transparent;
  130. box-shadow: inset 0 0 0 4px, 0 -2px 0 0;
  131. top: 14px;
  132. left: -3px;
  133. border-radius: 0px 0px 20px 20px;
  134. }
  135.  
  136. .ion-ios-moon {
  137. background: white;
  138. height: 18px;
  139. width: 18px;
  140. display: inline-block;
  141. border-radius: 10px;
  142. box-shadow: currentcolor -6px 2px 0px;
  143. margin-right: -8px;
  144. }
  145.  
  146. .ion-ios-moon::before {
  147. content: "";
  148. }
  149.  
  150. .ion-ios-sunny::before {
  151. content: "";
  152. }
  153.  
  154. .ion-ios-sunny::after {
  155. transform: rotate(45deg);
  156. }
  157.  
  158. .ion-ios-sunny::after, .ion-ios-sunny::before {
  159. content: "";
  160. display: block;
  161. box-sizing: border-box;
  162. position: absolute;
  163. width: 24px;
  164. height: 2px;
  165. border-right: 4px solid;
  166. border-left: 4px solid;
  167. left: -6px;
  168. top: 5px;
  169. }
  170.  
  171. .ion-ios-sunny::before {
  172. transform: rotate(-45deg);
  173. }
  174.  
  175. .ion-ios-sunny {
  176. box-sizing: border-box;
  177. position: relative;
  178. display: block;
  179. transform: scale(var(--ggs,1));
  180. width: 24px;
  181. height: 24px;
  182. background: linear-gradient(currentcolor 4px, #f000 0px) no-repeat scroll 5px -6px / 2px 6px, linear-gradient(currentcolor 4px, transparent 0px) no-repeat scroll 5px 14px / 2px 6px, linear-gradient(currentcolor 4px, transparent 0px) no-repeat scroll -8px 5px / 6px 2px, rgba(0, 0, 0, 0) linear-gradient(currentcolor 4px, transparent 0px) no-repeat scroll 14px 5px / 6px 2px;
  183. border-radius: 100px;
  184. box-shadow: 0px 0px 26px 2px inset;
  185. border: 6px solid #f000;
  186. }
  187.  
  188. .ion-ios-paper {
  189. box-sizing: border-box;
  190. position: relative;
  191. display: inline-block;
  192. transform: scale(var(--ggs,1));
  193. width: 14px;
  194. height: 16px;
  195. border: 2px solid transparent;
  196. border-right: 0;
  197. border-top: 0;
  198. box-shadow: 0 0 0 2px;
  199. border-radius: 1px;
  200. border-top-right-radius: 4px;
  201. overflow: hidden;
  202. }
  203.  
  204. .ion-ios-paper::after, .ion-ios-paper::before {
  205. content: "";
  206. display: block;
  207. box-sizing: border-box;
  208. position: absolute;
  209. }
  210.  
  211. .ion-ios-paper::before {
  212. content: "";
  213. background: currentColor;
  214. box-shadow: 0 4px 0, -6px -4px 0;
  215. left: 0;
  216. width: 10px;
  217. height: 2px;
  218. top: 8px;
  219. }
  220.  
  221. .ion-ios-paper::after {
  222. width: 6px;
  223. height: 6px;
  224. border-left: 2px solid;
  225. border-bottom: 2px solid;
  226. right: -1px;
  227. top: -1px;
  228. }
  229.  
  230. .ion-logo-javascript::before {
  231. content: "JS" !important;
  232. background: #fded00;
  233. color: rgb(0, 0, 0);
  234. padding: 8px 2px 1px 6px;
  235. font-weight: 700;
  236. font-family: "Segoe UI"
  237. }
  238.  
  239. .ion-ios-wallet {
  240. box-sizing: border-box;
  241. position: relative;
  242. display: inline-block;
  243. transform: scale(var(--ggs,0.8));
  244. width: 2px;
  245. height: 20px;
  246. background: currentColor;
  247. margin-bottom: -4px;
  248. margin-right: 2px;
  249. }
  250.  
  251. .ion-ios-wallet::after, .ion-ios-wallet::before {
  252. content: "";
  253. display: block;
  254. box-sizing: border-box;
  255. position: absolute;
  256. width: 12px;
  257. height: 8px;
  258. border: 2px solid;
  259. }
  260.  
  261. .ion-ios-wallet::before {
  262. border-right: 0;
  263. border-top-left-radius: 100px;
  264. border-bottom-left-radius: 100px;
  265. top: 3px;
  266. left: -6px;
  267. box-shadow: 4px -2px 0 -2px;
  268. }
  269.  
  270. .ion-ios-wallet::after {
  271. border-left: 0;
  272. border-top-right-radius: 100px;
  273. border-bottom-right-radius: 100px;
  274. bottom: 3px;
  275. right: -6px;
  276. box-shadow: -4px 2px 0 -2px;
  277. }
  278.  
  279. .ion-logo-github {
  280. transform: scale(var(--ggs,1));
  281. margin-bottom: -3px;
  282. padding-right: 10px;
  283. }
  284.  
  285. .ion-logo-github, .ion-logo-github::after, .ion-logo-github::before {
  286. box-sizing: border-box;
  287. position: relative;
  288. display: inline-block;
  289. width: 8px;
  290. height: 20px
  291. }
  292.  
  293. .ion-logo-github::after, .ion-logo-github::before {
  294. content: "";
  295. position: absolute;
  296. height: 8px;
  297. border-left: 2px solid;
  298. border-bottom: 2px solid;
  299. transform: rotate(45deg) scaleY(1);
  300. left: -4px;
  301. top: 6px
  302. }
  303.  
  304. .ion-logo-github::after {
  305. transform: rotate(-45deg) scaleX(-1);
  306. left: 4px
  307. }
  308.  
  309. .ion-md-jet::before {
  310. content: "";
  311. }
  312.  
  313. .ion-md-jet {
  314. box-sizing: border-box;
  315. position: relative;
  316. display: inline-block;
  317. transform: scale(var(--ggs,1));
  318. border-radius: 40px;
  319. border: 2px solid;
  320. margin-bottom: -2px;
  321. border-left-color: transparent;
  322. border-right-color: transparent;
  323. width: 18px;
  324. height: 18px;
  325. }
  326.  
  327. .ion-md-jet::after, .ion-md-jet::before {
  328. content: "";
  329. display: block;
  330. box-sizing: border-box;
  331. position: absolute;
  332. width: 0;
  333. height: 0;
  334. border-top: 4px solid transparent;
  335. border-bottom: 4px solid transparent;
  336. transform: rotate(-45deg);
  337. }
  338.  
  339. .ion-md-jet::before {
  340. border-left: 6px solid;
  341. bottom: -1px;
  342. right: -3px;
  343. }
  344.  
  345. .ion-md-jet::after {
  346. border-right: 6px solid;
  347. top: -1px;
  348. left: -3px;
  349. }
  350.  
  351. .ion-md-headset::before {
  352. content: "";
  353. }
  354.  
  355. .ion-md-headset {
  356. box-sizing: border-box;
  357. position: relative;
  358. display: inline-block;
  359. transform: scale(var(--ggs,1));
  360. width: 18px;
  361. height: 16px;
  362. border-top-left-radius: 120px;
  363. border-top-right-radius: 120px;
  364. border-bottom-left-radius: 30px;
  365. border-bottom-right-radius: 30px;
  366. border: 2px solid;
  367. border-bottom: 0;
  368. }
  369.  
  370. .ion-md-headset::after, .ion-md-headset::before {
  371. background: currentColor;
  372. border-radius: 8px;
  373. content: "";
  374. display: block;
  375. box-sizing: border-box;
  376. position: absolute;
  377. border: 2px solid;
  378. width: 6px;
  379. height: 8px;
  380. top: 8px;
  381. }
  382.  
  383. .ion-md-headset::before {
  384. border-top-right-radius: 2px;
  385. border-bottom-right-radius: 2px;
  386. left: -2px;
  387. }
  388.  
  389. .ion-md-headset::after {
  390. border-top-left-radius: 2px;
  391. border-bottom-left-radius: 2px;
  392. left: 10px;
  393. }
  394.  
  395. .ion-ios-videocam {
  396. background: currentColor;
  397. box-sizing: border-box;
  398. position: relative;
  399. display: inline-block;
  400. transform: scale(var(--ggs,1.1));
  401. border: 2px solid;
  402. border-radius: 4px;
  403. width: 18px;
  404. height: 15px;
  405. perspective: 24px;
  406. margin-bottom: 4px;
  407. }
  408.  
  409. .ion-ios-videocam::after, .ion-ios-videocam::before {
  410. content: "";
  411. display: block;
  412. box-sizing: border-box;
  413. position: absolute;
  414. margin-right: -4px;
  415. }
  416.  
  417. .ion-ios-videocam::before {
  418. background: currentColor;
  419. border: 4px solid;
  420. border-left-color: transparent;
  421. transform: rotateY(-70deg);
  422. width: 8px;
  423. height: 8px;
  424. right: -7px;
  425. top: 1px;
  426. }
  427.  
  428. .ion-ios-videocam::after {
  429. border-right: 2px solid;
  430. top: -5px;
  431. right: 2px;
  432. border-top-right-radius: 2px;
  433. }
  434.  
  435.  
  436. .ion-logo-youtube {
  437. box-sizing: border-box;
  438. position: relative;
  439. display: inline-block;
  440. transform: scale(var(--ggs,1));
  441. width: 18px;
  442. height: 12px;
  443. border-radius: 3px 3px 3px 3px;
  444. background: red;
  445. color: rgb(255, 255, 255) !important;
  446. }
  447. .ion-logo-youtube::before {
  448. content: "";
  449. display: block;
  450. box-sizing: border-box;
  451. position: absolute;
  452. left: 8px;
  453. top: 3px;
  454. border-left: 4px solid currentColor;
  455. border-top: 3px solid transparent;
  456. border-bottom: 3px solid transparent;
  457. }
  458.  
  459. .ion-ios-eye {
  460. position: relative;
  461. display: inline-block;
  462. transform: scale(var(--ggs,1));
  463. width: 24px;
  464. height: 18px;
  465. border-bottom-right-radius: 100px;
  466. border-bottom-left-radius: 100px;
  467. overflow: hidden;
  468. box-sizing: border-box;
  469. }
  470.  
  471. .ion-ios-eye::after, .ion-ios-eye::before {
  472. content: "";
  473. display: block;
  474. border-radius: 100px;
  475. position: absolute;
  476. box-sizing: border-box;
  477. }
  478.  
  479. .ion-ios-eye::after {
  480. top: 2px;
  481. box-shadow: inset 0 -8px 0 2px, inset 0 0 0 2px;
  482. width: 24px;
  483. height: 24px;
  484. }
  485.  
  486. .ion-ios-eye::before {
  487. width: 8px;
  488. height: 8px;
  489. border: 2px solid transparent;
  490. box-shadow: inset 0 0 0 6px, 0 0 0 4px, 6px 0 0 0, -6px 0 0 0 ;
  491. bottom: 4px;
  492. left: 8px;
  493. }
  494.  
  495. .ion-md-trash {
  496. box-sizing: border-box;
  497. position: relative;
  498. display: inline-block;
  499. transform: scale(var(--ggs,1));
  500. width: 10px;
  501. height: 12px;
  502. border: 2px solid transparent;
  503. box-shadow: 0 0 0 2px, inset -2px 0 0, inset 2px 0 0;
  504. border-bottom-left-radius: 1px;
  505. border-bottom-right-radius: 1px;
  506. margin-top: 4px;
  507. color: rgb(224, 224, 224);
  508. }
  509.  
  510. .ion-md-trash:hover {
  511. color: rgb(255, 255, 255);
  512. }
  513.  
  514. .ion-md-trash::after, .ion-md-trash::before {
  515. content: "";
  516. display: block;
  517. box-sizing: border-box;
  518. position: absolute;
  519. }
  520.  
  521. .ion-md-trash::after {
  522. background: currentColor;
  523. border-radius: 3px;
  524. width: 16px;
  525. height: 2px;
  526. top: -4px;
  527. left: -5px;
  528. }
  529.  
  530. .ion-md-trash::before {
  531. width: 10px;
  532. height: 4px;
  533. border: 2px solid;
  534. border-bottom: transparent;
  535. border-top-left-radius: 2px;
  536. border-top-right-radius: 2px;
  537. top: -7px;
  538. left: -2px;
  539. }
  540.  
  541. .ion-md-add::before {
  542. content: "";
  543. }
  544.  
  545. .ion-md-add, .ion-md-add::after {
  546. display: block;
  547. box-sizing: border-box;
  548. background: currentColor;
  549. border-radius: 10px;
  550. }
  551.  
  552. .ion-md-add {
  553. margin-top: -2px;
  554. position: relative;
  555. transform: scale(var(--ggs,1));
  556. width: 16px;
  557. height: 2px;
  558. }
  559.  
  560. .ion-md-add::after {
  561. content: "";
  562. position: absolute;
  563. width: 2px;
  564. height: 16px;
  565. top: -7px;
  566. left: 7px;
  567. }
  568.  
  569. .ion-logo-rss::after {
  570. width: 4px !important;
  571. height: 4px !important;
  572. border-style: solid !important;
  573. border-width: 2px !important;
  574. border-color: transparent currentcolor transparent transparent !important;
  575. border-image: none 100% / 1 0 stretch !important;
  576. bottom: -2px !important;
  577. left: -2px !important;
  578. }
  579.  
  580. .ion-logo-rss::after, .ion-logo-rss::before {
  581. content: "";
  582. display: block;
  583. box-sizing: border-box;
  584. position: absolute;
  585. width: 20px;
  586. height: 20px;
  587. border-style: double;
  588. border-width: 6px;
  589. border-color: transparent currentcolor transparent transparent;
  590. border-image: none 100% / 1 0 stretch;
  591. border-radius: 50%;
  592. transform: rotate(-45deg);
  593. bottom: -10px;
  594. left: -10px;
  595. }
  596.  
  597. .ion-logo-rss {
  598. box-sizing: border-box;
  599. position: relative;
  600. display: inline-block;
  601. transform: scale(var(--ggs,1.4));
  602. width: 20px;
  603. height: 16px;
  604. border-radius: 2px;
  605. }
  606.  
  607. #descexpansionbutton:checked ~ label > a::after {
  608. content: "↑ Show less";
  609. }
  610.  
  611. #descexpansionbutton ~ label > a::after {
  612. content: "↓ Show more";
  613. }
  614.  
  615. .pure-u-1-24 {
  616. box-sizing: border-box;
  617. position: relative;
  618. display: inline-block;
  619. width: 0px;
  620. height: 0px;
  621. color: currentColor;
  622. border-left: 6px solid transparent;
  623. border-right: 6px solid transparent;
  624. border-bottom: 6px solid;
  625. transform: rotate(180deg);
  626. margin-top: 22px;
  627. margin-right: 4px;
  628. }
  629.  
  630. .pure-u-1-24:active {
  631. transform: rotate(0deg);
  632. }
  633.  
  634. .ion-ios-heart::after {
  635. right: -9px;
  636. transform: rotate(90deg);
  637. top: 5px;
  638. }
  639.  
  640. .ion-ios-heart::after, .ion-ios-heart::before {
  641. content: "";
  642. display: block;
  643. box-sizing: border-box;
  644. position: absolute;
  645. }
  646.  
  647. .ion-ios-heart::before {
  648. width: 10px;
  649. height: 11px;
  650. border-left: 2px solid;
  651. border-bottom: 2px solid;
  652. left: -2px;
  653. top: 3px;
  654. }
  655.  
  656. .ion-ios-heart, .ion-ios-heart::after, .ion-ios-heart::before {
  657. background: currentColor;
  658. }
  659.  
  660. .ion-ios-heart {
  661. box-sizing: border-box;
  662. position: relative;
  663. transform: translate(calc(-10px / 2 * var(--ggs,1)),calc(-6px / 2 * var(--ggs,1)))rotate(-46deg)scale(var(--ggs,0.8));
  664. display: inline-block;
  665. }
  666.  
  667. .ion-ios-heart, .ion-ios-heart::after {
  668. border-color: currentcolor;
  669. border-style: solid solid none;
  670. border-width: 2px 2px 0px;
  671. border-image: none 100% / 1 0 stretch;
  672. border-top-left-radius: 100px;
  673. border-top-right-radius: 100px;
  674. width: 10px;
  675. height: 8px;
  676. }
  677.  
  678. .ion-ios-thumbs-up::after {
  679. right: -9px;
  680. transform: rotate(90deg);
  681. top: 5px;
  682. }
  683.  
  684. .icon.ion-ios-thumbs-up:active {
  685. color: red;
  686. transition: 4s;
  687. }
  688.  
  689. .ion-ios-thumbs-up::after, .ion-ios-thumbs-up::before {
  690. content: "";
  691. display: block;
  692. box-sizing: border-box;
  693. position: absolute;
  694. }
  695.  
  696. .ion-ios-thumbs-up::before {
  697. width: 10px;
  698. height: 11px;
  699. border-left: 2px solid;
  700. border-bottom: 2px solid;
  701. left: -2px;
  702. top: 3px;
  703. }
  704.  
  705. .ion-ios-thumbs-up, .ion-ios-thumbs-up::after, .ion-ios-thumbs-up::before {
  706. background: currentColor;
  707. }
  708.  
  709. .ion-ios-thumbs-up {
  710. box-sizing: border-box;
  711. position: relative;
  712. transform: translate(calc(-10px / 2 * var(--ggs,1)),calc(-6px / 2 * var(--ggs,1)))rotate(-46deg)scale(var(--ggs,1));
  713. display: inline-block;
  714. }
  715.  
  716. .ion-ios-thumbs-up, .ion-ios-thumbs-up::after {
  717. border-color: currentcolor;
  718. border-style: solid solid none;
  719. border-width: 2px 2px 0px;
  720. border-image: none 100% / 1 0 stretch;
  721. border-top-left-radius: 100px;
  722. border-top-right-radius: 100px;
  723. width: 10px;
  724. height: 8px;
  725. }
  726.  
  727. .ion-ios-thumbs-down, .ion-ios-thumbs-down::after {
  728. border: 2px solid;
  729. border-top-left-radius: 100px;
  730. border-top-right-radius: 100px;
  731. width: 10px;
  732. height: 8px;
  733. border-bottom: 0;
  734. }
  735.  
  736. .ion-ios-thumbs-down {
  737. box-sizing: border-box;
  738. position: relative;
  739. transform: translate(calc(-10px / 2 * var(--ggs,1)), calc(-6px / 2 * var(--ggs,1)))rotate(-45deg)scale(var(--ggs,1));
  740. display: inline-block;
  741. }
  742.  
  743. .ion-ios-thumbs-down::after, .ion-ios-thumbs-down::before {
  744. content: "";
  745. display: block;
  746. box-sizing: border-box;
  747. position: absolute;
  748. }
  749.  
  750. .ion-ios-thumbs-down::after {
  751. right: -9px;
  752. transform: rotate(90deg);
  753. top: 5px;
  754. }
  755.  
  756. .ion-ios-thumbs-down::before {
  757. width: 11px;
  758. height: 11px;
  759. border-left: 2px solid;
  760. border-bottom: 2px solid;
  761. left: -2px;
  762. top: 3px;
  763. }
  764.  
  765. .icon.ion-ios-thumbs-up, .icon.ion-ios-thumbs-down {
  766. margin-right: 2px;
  767. margin-bottom: 2px;
  768. }
  769.  
  770. .loading {
  771. animation: 0s !important;
  772. }
  773.  
  774. @keyframes loadbar {
  775. 0%,to { left: 0; right: 80% }
  776. 25%,75% { left: 0; right: 0 }
  777. 50% { left: 80%; right: 0 }
  778. }
  779.  
  780. .icon.ion-ios-refresh, .icon.ion-ios-refresh::before {
  781. display: inline-block;
  782. box-sizing: border-box;
  783. height: 4px;
  784. }
  785.  
  786. .icon.ion-ios-refresh {
  787. position: relative;
  788. transform: scale(var(--ggs,2));
  789. width: 18px;
  790. }
  791.  
  792. .icon.ion-ios-refresh::before {
  793. content: "";
  794. position: absolute;
  795. border-radius: 4px;
  796. background: currentColor;
  797. animation: loadbar 2s cubic-bezier(0,0,.58,1) infinite !important;
  798. }
  799.  
  800. .icon.ion-md-checkmark-circle::after {
  801. content: "";
  802. position: absolute;
  803. top: -1px;
  804. width: 6px;
  805. height: 10px;
  806. transform-origin: left bottom 0px;
  807. transform: rotate(45deg);
  808. display: block;
  809. box-sizing: border-box;
  810. left: 3px;
  811. border-width: 0px 2px 2px 0px;
  812. border-style: solid;
  813. border-color: rgb(255, 255, 255);
  814. }
  815.  
  816. .icon.ion-md-checkmark-circle {
  817. box-sizing: border-box;
  818. position: relative;
  819. width: 22px;
  820. height: 22px;
  821. border: 2px solid;
  822. border-radius: 100px;
  823. background-color: currentcolor;
  824. transform: scale(0.7);
  825. }
  826.  
  827. .icon.ion-md-checkmark-circle::before {
  828. content: "";
  829. }
  830.  
  831. .vjs-icon-pause::before, .video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder::before {
  832. content: "";
  833. }
  834.  
  835. [title="Pause"] {
  836. box-sizing: border-box;
  837. position: relative;
  838. display: inline-block;
  839. transform: scale(var(--ggs,1.9));
  840. width: 8px !important;
  841. height: 10px !important;
  842. border-left: 3px solid !important;
  843. border-right: 3px solid !important;
  844. margin-top: 11px !important;
  845. margin-left: 11px !important;
  846. margin-right: 11px !important;
  847. }
  848.  
  849. .vjs-icon-volume-high::before, .video-js .vjs-mute-control .vjs-icon-placeholder::before, .vjs-icon-volume-mid::before, .video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder::before, .vjs-icon-volume-low::before, .video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder::before, .vjs-icon-volume-mute::before, .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder::before {
  850. content: "";
  851. }
  852.  
  853. .video-js .vjs-volume-panel > *:not(.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal) {
  854. transform: scale(1.9);
  855. }
  856.  
  857. .vjs-vol-3::before {
  858. content: "🔊";
  859. }
  860.  
  861. .vjs-vol-2::before {
  862. content: "🔉";
  863. }
  864.  
  865. .vjs-vol-1::before {
  866. content: "🔈";
  867. }
  868.  
  869. .vjs-vol-0::before {
  870. content: "🔇";
  871. }
  872.  
  873. .vjs-icon-play::before, .video-js .vjs-play-control .vjs-icon-placeholder::before, .video-js .vjs-big-play-button .vjs-icon-placeholder::before {
  874. content: "";
  875. }
  876.  
  877. .vjs-big-play-button, .vjs-paused {
  878. box-sizing: border-box;
  879. position: relative;
  880. display: inline-block;
  881. margin-right: 5px !important;
  882. width: 22px;
  883. height: 22px;
  884. }
  885.  
  886. .vjs-quality-selector > .vjs-menu {
  887. margin-bottom: 4px;
  888. }
  889.  
  890. .vjs-quality-selector::after {
  891. width: 8px;
  892. height: 1px;
  893. background: currentcolor none repeat scroll 0% 0%;
  894. border-radius: 10px;
  895. bottom: -4px;
  896. right: 2px;
  897. }
  898.  
  899. .vjs-quality-selector::after, .vjs-quality-selector::before {
  900. content: "";
  901. display: block;
  902. box-sizing: border-box;
  903. position: absolute;
  904. }
  905.  
  906. .vjs-quality-selector {
  907. box-sizing: border-box;
  908. position: relative !important;
  909. display: block;
  910. transform: scale(var(--ggs,1));
  911. width: 16px !important;
  912. height: 11px !important;
  913. border: 2px solid;
  914. border-radius: 2px;
  915. margin-top: 10px !important;
  916. margin-left: 8px !important;
  917. }
  918.  
  919. .vjs-quality-selector .vjs-icon-placeholder::before {
  920. content: "";
  921. }
  922.  
  923. .vjs-big-play-button::before {
  924. top: 16px !important;
  925. left: 40px !important;
  926. }
  927.  
  928. .vjs-big-play-button::before, .vjs-paused::before {
  929. content: "";
  930. display: block;
  931. box-sizing: border-box;
  932. position: absolute;
  933. width: 0;
  934. height: 10px;
  935. border-top: 5px solid transparent;
  936. border-bottom: 5px solid transparent;
  937. border-left: 6px solid;
  938. top: 12px;
  939. left: 25px;
  940. transform: scale(var(--ggs,1.8));
  941. }
  942.  
  943. .vjs-icon-share {
  944. box-sizing: border-box;
  945. position: relative !important;
  946. display: inline-block !important;
  947. transform: scale(var(--ggs,1));
  948. width: 6px !important;
  949. height: 6px !important;
  950. background: currentColor !important;
  951. border-radius: 100px;
  952. box-shadow: 10px -6px 0, 10px 6px 0;
  953. margin-top: 10px !important;
  954. margin-right: 10px !important;
  955. }
  956.  
  957. .vjs-icon-share::after, .vjs-icon-share::before {
  958. content: "";
  959. display: block;
  960. box-sizing: border-box;
  961. position: absolute;
  962. border-radius: 3px;
  963. width: 10px;
  964. height: 2px;
  965. background: currentColor;
  966. left: 2px;
  967. }
  968.  
  969. .vjs-icon-share::before {
  970. top: 0;
  971. transform: rotate(-35deg);
  972. }
  973.  
  974. .vjs-icon-share::after {
  975. bottom: 0;
  976. transform: rotate(35deg);
  977. }
  978.  
  979. .vjs-icon-captions::before, .video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder::before, .video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder::before, .video-js .vjs-captions-button .vjs-icon-placeholder::before {
  980. content: "";
  981. }
  982.  
  983. .vjs-captions-button > .vjs-menu {
  984. margin-bottom: 5px;
  985. }
  986.  
  987. .vjs-captions-button {
  988. border-radius: 1px;
  989. transform: scale(var(--ggs,1));
  990. }
  991.  
  992. .vjs-captions-button, .vjs-captions-button::after, .vjs-captions-button::before {
  993. box-sizing: border-box;
  994. position: relative;
  995. display: block !important;
  996. width: 20px !important;
  997. height: 16px !important;
  998. border: 2px solid;
  999. margin-top: -6px;
  1000. top: 6px;
  1001. }
  1002.  
  1003. .vjs-captions-button::after, .vjs-captions-button::before {
  1004. content: "";
  1005. position: absolute;
  1006. width: 5px !important;
  1007. height: 8px !important;
  1008. border-right: transparent;
  1009. top: 8px;
  1010. left: 2px;
  1011. }
  1012.  
  1013. .vjs-captions-button::before {
  1014. left: 9px;
  1015. }
  1016.  
  1017. .vjs-icon-fullscreen-enter::before, .video-js .vjs-fullscreen-control .vjs-icon-placeholder::before {
  1018. content: "";
  1019. }
  1020.  
  1021. .vjs-icon-circle::before, .vjs-seek-to-live-control .vjs-icon-placeholder::before, .video-js .vjs-volume-level::before, .video-js .vjs-play-progress::before {
  1022. content: "︱";
  1023. }
  1024.  
  1025. .vjs-close-button {
  1026. box-sizing: border-box;
  1027. position: relative;
  1028. display: block;
  1029. transform: scale(var(--ggs,1));
  1030. width: 22px;
  1031. height: 22px;
  1032. border: 2px solid transparent;
  1033. border-radius: 40px;
  1034. }
  1035.  
  1036. .vjs-close-button::after, .vjs-close-button::before {
  1037. content: "";
  1038. display: block;
  1039. box-sizing: border-box;
  1040. position: absolute;
  1041. width: 16px;
  1042. height: 2px;
  1043. background: currentColor;
  1044. transform: rotate(45deg);
  1045. border-radius: 5px;
  1046. left: 8px;
  1047. }
  1048.  
  1049. .vjs-close-button::after {
  1050. transform: rotate(-45deg);
  1051. }
  1052.  
  1053. .vjs-icon-cancel::before, .video-js .vjs-control.vjs-close-button .vjs-icon-placeholder::before {
  1054. content: "";
  1055. }
  1056.  
  1057. [title="Fullscreen"] {
  1058. box-sizing: border-box;
  1059. position: relative !important;
  1060. display: block !important;
  1061. transform: scale(var(--ggs,1));
  1062. width: 14px !important;
  1063. height: 14px !important;
  1064. box-shadow: -6px -6px 0 -4px, 6px 6px 0 -4px, 6px -6px 0 -4px, -6px 6px 0 -4px;
  1065. margin-top: 7px !important;
  1066. margin-left: 8px !important;
  1067. margin-right: 10px !important;
  1068. }
  1069.  
  1070. .vjs-icon-fullscreen-exit::before, .video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder::before {
  1071. content: "";
  1072. }
  1073.  
  1074. [title="Non-Fullscreen"] {
  1075. box-sizing: border-box;
  1076. position: relative !important;
  1077. display: block !important;
  1078. transform: scale(var(--ggs,1));
  1079. width: 4px !important;
  1080. height: 4px !important;
  1081. box-shadow: -8px -4px 0 -1px, -6px -4px 0 -1px, 8px 4px 0 -1px, 6px 4px 0 -1px, 8px -4px 0 -1px, 6px -4px 0 -1px, -8px 4px 0 -1px, -6px 4px 0 -1px;
  1082. margin-top: 13px !important;
  1083. margin-left: 12px !important;
  1084. margin-right: 13px !important;
  1085. }
  1086.  
  1087. [title="Non-Fullscreen"]::after, [title="Non-Fullscreen"]::before {
  1088. content: "";
  1089. display: block;
  1090. box-sizing: border-box;
  1091. position: absolute;
  1092. width: 2px;
  1093. height: 18px;
  1094. border-top: 6px solid;
  1095. border-bottom: 6px solid;
  1096. box-shadow: 18px 0 0 -2px;
  1097. top: -7px;
  1098. }
  1099.  
  1100. [title="Non-Fullscreen"]::after {
  1101. left: -3px;
  1102. }
  1103.  
  1104. [title="Non-Fullscreen"]::before {
  1105. right: -3px;
  1106. }
  1107.  
  1108. .dark-theme a {
  1109. color: rgb(223, 223, 223);
  1110. }
  1111.  
  1112. #contents > .h-box > h3 {
  1113. display: none !important;
  1114. }
  1115. }
  1116.  
  1117.  
  1118.  
  1119.  
  1120.  
  1121.  
  1122.  
  1123.  
  1124.