Greasy Fork镜像 支持简体中文。

anitube-modernstyle-dark

dark theme & small fixes for AniTube.in.ua

  1. // ==UserScript==
  2. // @name anitube-modernstyle-dark
  3. // @namespace https://anitube.in.ua/
  4. // @version 0.0.1
  5. // @description dark theme & small fixes for AniTube.in.ua
  6. // @author marshallovski
  7. // @match https://anitube.in.ua/*
  8. // @icon https://www.google.com/s2/favicons?sz=64&domain=anitube.in.ua
  9. // @grant none
  10. // // @license MIT
  11. // ==/UserScript==
  12.  
  13. (async () => {
  14. 'use strict';
  15. const stylesheetElementId = 'anitube-modernstyle_stylesheet';
  16. const stylesheetCode = `
  17. :root {
  18. --font: 'Segoe UI', 'Open Sans', 'Noto Sans', 'DejaVu Sans', Tahoma, Geneva, Verdana, sans-serif;
  19. --body-bg-color: #212121;
  20. --body-txt-color: #eee;
  21. --content-bg-color: #263238;
  22. --secondary-txt-color: #757575;
  23. --secondary-bg-color: #424242;
  24. --secondary-bg-border: #666;
  25. --secondary-bg-border-darker: #444;
  26. --heading-elem-color: #fff;
  27. --link-color: #29B6F6;
  28.  
  29. --color-success: #1DE9B6;
  30. --color-danger: #E57373;
  31. }
  32.  
  33. body {
  34. font-family: var(--font);
  35. background: var(--body-bg-color);
  36. color: var(--body-txt-color) !important;
  37. }
  38.  
  39. h1,
  40. h2,
  41. h3 {
  42. color: var(--heading-elem-color) !important;
  43. }
  44.  
  45. a {
  46. color: var(--link-color) !important;
  47. }
  48.  
  49. .inc_tab .case,
  50. .hepl_serch {
  51. background: none !important;
  52. }
  53.  
  54. .content {
  55. background: var(--content-bg-color);
  56. border: none;
  57. padding: 16px;
  58. border-radius: 8px;
  59. }
  60.  
  61. header {
  62. box-shadow: none !important;
  63. -moz-box-shadow: none !important;
  64. -webkit-box-shadow: none !important;
  65. }
  66.  
  67. #header {
  68. border-radius: 3px 3px 2px 2px;
  69. }
  70.  
  71. #header_img,
  72. #header_img #header_img,
  73. #header_menu,
  74. #header_menu #header_menu,
  75. header {
  76. border: none !important;
  77. background: var(--body-bg-color);
  78. -webkit-box-shadow: none !important;
  79. -moz-box-shadow: none !important;
  80. box-shadow: none !important;
  81. }
  82.  
  83. #header_img {
  84. background: none;
  85. }
  86.  
  87. .header_img {
  88. border: none;
  89. }
  90.  
  91. .header_menu_c,
  92. .header_menu nav,
  93. .inc_tab .controls {
  94. border: none;
  95. }
  96.  
  97. .header_menu_c {
  98. border: 1px solid var(--secondary-bg-border);
  99. margin-top: 5px;
  100. border-radius: 8px;
  101. background: var(--content-bg-color);
  102. }
  103.  
  104. .dcont {
  105. border: 1px solid var(--secondary-bg-border);
  106. background: var(--secondary-bg-color) !important;
  107. border-radius: 8px;
  108. margin-top: 10px !important;
  109. margin-bottom: 10px !important;
  110. }
  111.  
  112. .sortn .sortn {
  113. border: none;
  114. }
  115.  
  116. /* **AniTube** > ... */
  117. #dle-speedbar>span:nth-child(1)>span:nth-child(1) {
  118. font-weight: bold;
  119. }
  120.  
  121. #dle-speedbar>span:nth-child(1)>span {
  122. padding: 5px;
  123. font-size: 14px;
  124. }
  125.  
  126. .sortn {
  127. border: 1px solid var(--secondary-bg-border);
  128. background: var(--secondary-bg-color) !important;
  129. border-radius: 8px;
  130. }
  131.  
  132. .inc_tab .controls li a {
  133. color: var(--body-txt-color) !important;
  134. background: var(--secondary-bg-color) !important;
  135. line-height: 1.2;
  136. font-style: normal;
  137. font-size: 12.5px;
  138. text-align: center;
  139. }
  140.  
  141. .navi>li>a {
  142. padding: 0 15px !important;
  143. font-style: normal;
  144. }
  145.  
  146. /* navbar divider */
  147. .navi>li {
  148. background: none;
  149. border-right: 1px solid var(--link-color);
  150. }
  151.  
  152. .navi>li:last-child {
  153. border: none;
  154. }
  155.  
  156. .controls>li>a>sup {
  157. vertical-align: middle;
  158. }
  159.  
  160. .hepl_serch {
  161. padding: 2px 10px;
  162. margin-top: 0.5em;
  163. margin-bottom: 2em;
  164. font-size: 13px;
  165. color: var(--secondary-txt-color);
  166. }
  167.  
  168. /* search input */
  169. .header_search div.simt div input,
  170. .header_search div.simt div {
  171. color: var(--body-txt-color);
  172. font-style: normal;
  173. font-size: 16px;
  174. background-color: var(--secondary-bg-color);
  175. }
  176.  
  177. .header_search {
  178. background: none;
  179. }
  180.  
  181. /* search input clear button */
  182. .header_search div.simt div input .clear-icon {
  183. padding: 4px 8px;
  184. font-weight: bold;
  185. background: var(--secondary-bg-border-darker);
  186. }
  187.  
  188. .story_c h2 {
  189. background-color: var(--secondary-bg-color);
  190. border: 1px solid var(--secondary-bg-border);
  191. font-style: normal;
  192. font-weight: bold;
  193. font-size: 16px;
  194. text-shadow: none !important;
  195. color: var(--body-txt-color) !important;
  196. }
  197.  
  198. .story_c h2 a {
  199. font-style: normal;
  200. font-weight: bold;
  201. font-size: 16px;
  202. text-shadow: none !important;
  203. color: var(--body-txt-color) !important;
  204. }
  205.  
  206. .box {
  207. border: 1px solid var(--secondary-bg-border-darker) !important;
  208. -webkit-box-shadow: none !important;
  209. -moz-box-shadow: none !important;
  210. box-shadow: none !important;
  211. }
  212.  
  213. .box>h1,
  214. .box>h4,
  215. .box h2 {
  216. background: none;
  217. border-bottom: 1px solid var(--secondary-bg-border-darker) !important;
  218. }
  219.  
  220. .box h3 {
  221. border-bottom: 1px solid var(--secondary-bg-border-darker) !important;
  222. }
  223.  
  224. .story_c_left {
  225. border: none;
  226. box-shadow: none;
  227. }
  228.  
  229. .story_c .rcol {
  230. background: none;
  231. }
  232.  
  233.  
  234. .story_c_left span.story_post img {
  235. border: none;
  236. border-radius: 5px;
  237. box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.5);
  238. }
  239.  
  240. .story_c_left span.story_datenew {
  241. color: var(--content-bg-color);
  242. left: -32px;
  243. }
  244.  
  245. /* anime preview: youtube thumbnail */
  246. .story_c_r {
  247. border: 1px solid var(--secondary-bg-border-darker) !important;
  248. border-radius: 5px;
  249. margin-top: 10px;
  250. box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  251. font-size: 16px;
  252. padding: 5px;
  253. }
  254.  
  255. .trailer_preview img {
  256. width: 220px;
  257. }
  258.  
  259. .trailer_preview_overlay>h3:nth-child(2) {
  260. font-size: 14px;
  261. }
  262.  
  263. .trailer_preview .trailer_preview_overlay svg {
  264. width: 24px;
  265. height: 24px !important;
  266. margin-right: 5px;
  267. margin-top: 2px;
  268. }
  269.  
  270. .story_c_r hr {
  271. background: none;
  272. border: 1px solid var(--secondary-bg-border-darker) !important;
  273. }
  274.  
  275. .story_c_text {
  276. border: none !important;
  277. -webkit-box-shadow: none !important;
  278. -moz-box-shadow: none !important;
  279. box-shadow: none !important;
  280. }
  281.  
  282. /* elem: Приємного перегляду */
  283. .showsh {
  284. background: var(--secondary-bg-border-darker) !important;
  285. -webkit-box-shadow: none !important;
  286. -moz-box-shadow: none !important;
  287. box-shadow: none !important;
  288. margin-top: 1em;
  289. border-radius: 8px;
  290. border: 1px solid var(--secondary-bg-border) !important;
  291. font-style: normal;
  292. color: var(--body-txt-color);
  293. font-size: 14.5px;
  294. }
  295.  
  296. .info_translate {
  297. background: var(--secondary-bg-border-darker) !important;
  298. margin-top: 1em;
  299. border-radius: 8px;
  300. border: 1px solid var(--secondary-bg-border) !important;
  301. font-style: normal;
  302. color: var(--body-txt-color);
  303. font-size: 15px;
  304. }
  305.  
  306. .info_c_translate>strong>i,
  307. .info_c>strong>i {
  308. font-style: normal;
  309. font-size: 15px;
  310. }
  311.  
  312. .info_c_translate>strong:nth-child(3) {
  313. font-weight: normal;
  314. }
  315.  
  316. .info {
  317. background: var(--color-danger);
  318. }
  319.  
  320. .linnew {
  321. background: none;
  322. }
  323.  
  324. .story_screens img {
  325. border: 1px solid var(--secondary-bg-border);
  326. border-radius: 5px;
  327. }
  328.  
  329. .tagers,
  330. .story_ico_time,
  331. .story_ico_watch {
  332. background: var(--secondary-bg-border-darker) !important;
  333. border: 1px solid var(--secondary-bg-border) !important;
  334. padding: 8px;
  335. }
  336.  
  337. .tagers>span:nth-child(1) {
  338. font-size: 14px;
  339. }
  340.  
  341. .tagers>span:nth-child(1)>a {
  342. margin-left: 5px;
  343. }
  344.  
  345. .story_ico_time,
  346. .story_ico_watch {
  347. padding: 4px;
  348. }
  349.  
  350. .playlists-lists {
  351. margin: 1em;
  352. }
  353.  
  354. .playlists-items li {
  355. font-family: var(--font);
  356. }
  357.  
  358. .previous-episode,
  359. .next-episode {
  360. color: var(--body-bg-color);
  361. text-shadow: none;
  362. font-weight: bold;
  363. font-size: 16px;
  364. }
  365.  
  366. pjsdiv:nth-child(11)>pjsdiv:nth-child(2)>pjsdiv:nth-child(1) {
  367. font-family: var(--font);
  368. }
  369.  
  370. pjsdiv:nth-child(12)>pjsdiv:nth-child(2)>pjsdiv:nth-child(1) {
  371. font-family: var(--font) !important;
  372. }
  373.  
  374. .story_c_rate {
  375. border: 1px solid var(--secondary-bg-border) !important;
  376. -webkit-box-shadow: none !important;
  377. -moz-box-shadow: none !important;
  378. box-shadow: none !important;
  379. }
  380.  
  381. /* similar titles > title name */
  382. .horizontal ul li .text_content,
  383. .horizontal ul li:hover .text_content {
  384. background: var(--secondary-bg-border-darker);
  385. color: var(--body-txt-color) !important;
  386. text-shadow: none;
  387. }
  388.  
  389. .horizontal ul li .text_content {
  390. padding: 0 8px;
  391. height: fit-content;
  392. min-height: 35px;
  393. font-size: 12px;
  394. }
  395.  
  396. /* title poster */
  397. .horizontal ul li .sl_poster img {
  398. border: 1px solid var(--secondary-bg-border);
  399. border-radius: 5px;
  400. }
  401.  
  402. .horizontal ul li .text_content a {
  403. vertical-align: bottom;
  404. display: inline;
  405. color: var(--body-txt-color) !important;
  406. }
  407.  
  408. .n_comment .lcols {
  409. background: var(--secondary-bg-border-darker);
  410. border: 1px solid var(--secondary-bg-border) !important;
  411. border-radius: 6px;
  412. padding: 4px;
  413. text-shadow: none !important;
  414. color: var(--body-txt-color);
  415. }
  416.  
  417. .n_comment .lcols .lcol {
  418. color: var(--body-txt-color);
  419. text-shadow: none !important;
  420. }
  421.  
  422. .mwrat_gr {
  423. margin-top: 1em;
  424. margin-left: 5px;
  425. margin-bottom: 5px;
  426. border-radius: 5px;
  427. }
  428.  
  429. .ratingtypeplus {
  430. background: var(--secondary-bg-border) !important;
  431. color: var(--body-txt-color) !important;
  432. text-shadow: none;
  433. width: 30px !important;
  434. }
  435.  
  436. /* comment > user avatar */
  437. .n_comment .lcols .rcol img {
  438. border-radius: 100%;
  439. border: 1px solid var(--secondary-bg-border) !important;
  440. box-shadow: none !important;
  441. background: none !important;
  442. }
  443.  
  444. /* comment content */
  445. /*
  446. unfortunately, we must remove custom background
  447. image from message content, because the content
  448. of the message will be unvisible
  449. */
  450.  
  451. .n_comment .rcols {
  452. background: var(--secondary-bg-border-darker) !important;
  453. border: 1px solid var(--secondary-bg-border) !important;
  454. border-radius: 6px;
  455. padding: 4px;
  456. color: var(--body-txt-color);
  457. text-shadow: none !important;
  458. }
  459.  
  460. /* comment arrow */
  461. .n_comment .rcols::after {
  462. border: none;
  463. }
  464.  
  465. .scriptcode,
  466. .title_quote,
  467. .quote,
  468. .title_spoiler,
  469. .text_spoiler {
  470. background: var(--secondary-bg-color);
  471. border: 1px solid var(--secondary-bg-border);
  472. border-radius: 6px;
  473. }
  474.  
  475. .title_quote,
  476. .title_spoiler {
  477. border-radius: 6px 6px 0 0;
  478. margin-top: 5px;
  479. }
  480.  
  481. .quote,
  482. .text_spoiler {
  483. border-radius: 0 0 6px 6px;
  484. }
  485.  
  486. .text_spoiler,
  487. .quote {
  488. margin-bottom: 5px;
  489. }
  490.  
  491. #footer_img {
  492. background: none;
  493. margin-top: 1em;
  494. -webkit-box-shadow: none !important;
  495. -moz-box-shadow: none !important;
  496. box-shadow: none !important;
  497. }
  498.  
  499. footer {
  500. border: none !important;
  501. background: var(--body-bg-color);
  502. -webkit-box-shadow: none !important;
  503. -moz-box-shadow: none !important;
  504. box-shadow: none !important;
  505. }
  506.  
  507. .footer_text {
  508. background: none;
  509. }
  510.  
  511. /* registration page */
  512. .f_input {
  513. background: var(--secondary-bg-border-darker);
  514. color: var(--body-txt-color);
  515. border-radius: 6px;
  516. padding: 6px 8px;
  517. font-size: 14px;
  518. font-family: var(--font);
  519. border: 1px solid var(--secondary-bg-border);
  520. }
  521.  
  522. .fbutton {
  523. background: var(--color-success);
  524. color: var(--body-bg-color);
  525. border: none;
  526. padding: 10px 12px;
  527. height: auto;
  528. }
  529.  
  530. .fbutton:hover {
  531. color: var(--content-bg-color);
  532. }
  533.  
  534. .tableform tr td {
  535. padding: 8px !important;
  536. }
  537.  
  538. .fieldsubmit,
  539. .tableform td {
  540. background: none;
  541. border: 1px solid var(--secondary-bg-border-darker) !important;
  542. padding-left: 8px;
  543. }
  544.  
  545. /* ui dialog */
  546. .ui-widget-content {
  547. background: var(--content-bg-color);
  548. color: var(--body-txt-color) !important;
  549. font-size: 13px !important;
  550. }
  551.  
  552. .ui-widget-header {
  553. border-bottom: 1px solid var(--secondary-bg-border-darker) !important;
  554. }
  555.  
  556. .ui-dialog .ui-dialog-title {
  557. color: var(--heading-elem-color) !important;
  558. }
  559.  
  560. .ui-dialog .ui-dialog-buttonpane {
  561. background: var(--content-bg-color);
  562. color: var(--body-txt-color) !important;
  563. border-top: 1px solid var(--secondary-bg-border-darker) !important;
  564. }
  565.  
  566. .ui-dialog .ui-dialog-buttonpane button {
  567. background: var(--secondary-bg-color);
  568. color: var(--body-txt-color);
  569. border: 1px solid var(--secondary-bg-border) !important;
  570. box-shadow: none;
  571. border-radius: 5px;
  572. }
  573.  
  574. /* home page */
  575. .news_2 {
  576. border: none;
  577. background: none;
  578. }
  579.  
  580. .news_2 .title2 {
  581. background: var(--secondary-bg-color);
  582. border: 1px solid var(--secondary-bg-border) !important;
  583. font-size: 16px;
  584. font-weight: bold;
  585. }
  586.  
  587. .news_2 .title2 a {
  588. color: var(--body-txt-color) !important;
  589. }
  590.  
  591. .news_2 .title2:hover {
  592. background: var(--secondary-bg-border-darker);
  593. }
  594.  
  595. .news_date {
  596. color: var(--content-bg-color) !important;
  597. }
  598.  
  599. .news_2_c_l .news_link {
  600. text-shadow: none !important;
  601. background: var(--color-success) !important;
  602. }
  603.  
  604. .news_2_c_l .news_link:hover a {
  605. text-shadow: none !important;
  606. background: #63f0cd !important;
  607. }
  608.  
  609. .news_2_c_l .news_link a {
  610. color: var(--body-bg-color) !important;
  611. }
  612.  
  613. .news_2_c_l {
  614. border: none !important;
  615. -webkit-box-shadow: none !important;
  616. -moz-box-shadow: none !important;
  617. box-shadow: none !important;
  618. }
  619.  
  620. /* main page: title poster */
  621. .news_2_c_l span.news_post img,
  622. .news_3_c_l span.news_post img {
  623. border: none;
  624. border-radius: 8px;
  625. margin-bottom: 1em;
  626. height: 200px;
  627. width: 145px;
  628. box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  629. }
  630.  
  631. .news_2_c_inf {
  632. border: 1px solid var(--secondary-bg-border) !important;
  633. border-radius: 8px;
  634. }
  635.  
  636. .news_2_comm {
  637. color: var(--content-bg-color);
  638. text-shadow: none;
  639. }
  640.  
  641. .news_2_comm span {
  642. border-radius: 6px !important;
  643.  
  644. }
  645.  
  646. /* main page: title info */
  647. .news_2_infa {
  648. font-size: 13px;
  649. }
  650.  
  651. .news_2_infa dl {
  652. background: none;
  653. border-bottom: 1px solid var(--secondary-bg-border-darker) !important;
  654. }
  655.  
  656. .news_2_infa dt {
  657. color: var(--body-txt-color);
  658. }
  659.  
  660. /* main page: title desc. */
  661. .news_2_c_text {
  662. font-size: 14px;
  663. color: var(--body-txt-color);
  664. border-top: 1px solid var(--secondary-bg-border) !important;
  665. }
  666.  
  667. .news_2_c_text strong i,
  668. .news_2_c_text b i {
  669. font-style: normal;
  670. color: var(--color-success);
  671. font-size: 15px;
  672. }
  673.  
  674. /* main page: news */
  675. .news_r_h span.link {
  676. background: var(--secondary-bg-color);
  677. border: 1px solid var(--secondary-bg-border) !important;
  678. font-size: 14px;
  679. font-weight: bold;
  680. text-shadow: none !important;
  681. }
  682.  
  683. .news_r_h span.link:hover {
  684. background: var(--secondary-bg-border-darker) !important;
  685. text-shadow: none !important;
  686. }
  687.  
  688. .news_r_h span.link a {
  689. color: var(--body-txt-color) !important;
  690. text-shadow: none !important;
  691. }
  692.  
  693. /* news text */
  694. .news_r_c {
  695. color: var(--body-txt-color);
  696. }
  697.  
  698. /* top news */
  699. ul.topnews li a {
  700. background: none;
  701. animation: none !important;
  702. }
  703.  
  704. ul.topnews li {
  705. background: none;
  706. border-bottom: 1px solid var(--secondary-bg-border-darker) !important;
  707. }
  708.  
  709. ul.topnews li:hover span {
  710. animation: none !important;
  711. background: var(--content-bg-color) !important;
  712. }
  713.  
  714. .col_news {
  715. background: var(--secondary-bg-border);
  716. color: var(--body-txt-color);
  717. }
  718.  
  719. /* calendar */
  720. .news_2 .calend {
  721. background: none;
  722. }
  723.  
  724. .news_2 .calend span {
  725. background: var(--secondary-bg-border-darker);
  726. color: var(--body-txt-color);
  727. border-radius: 6px;
  728. border: 1px solid var(--secondary-bg-border) !important;
  729. text-shadow: none;
  730. }
  731.  
  732. /* carousel: new manga */
  733. .li_text {
  734. color: var(--body-txt-color);
  735. background: var(--secondary-bg-color) !important;
  736. text-shadow: none;
  737. padding: 0 8px;
  738. height: fit-content;
  739. min-height: 35px;
  740. font-size: 12px;
  741. }
  742.  
  743. .li_text:hover {
  744. background: var(--secondary-bg-border) !important;
  745. }
  746.  
  747. /* new collections */
  748. .li_poster {
  749. border-radius: 6px;
  750. border: 1px solid var(--secondary-bg-border) !important;
  751. text-shadow: none;
  752. }
  753.  
  754. .li_text {
  755. text-shadow: none !important;
  756. background: var(--secondary-bg-color) !important;
  757. font-size: 14px !important;
  758. }
  759.  
  760. /* comedies online */
  761. article.news,
  762. hr {
  763. background: none;
  764. border-bottom: 1px solid var(--secondary-bg-border-darker) !important;
  765. }
  766.  
  767. /* navbar paginator */
  768. .navi_pages {
  769. height: fit-content;
  770. }
  771.  
  772. span.lcol span,
  773. .navi_pages a {
  774. font-size: 18px !important;
  775. }
  776.  
  777. .navi_pages a:hover {
  778. color: var(--body-txt-color);
  779. background: var(--body-bg-color);
  780. }
  781.  
  782. .story_c_l span.story_link a {
  783. text-shadow: none;
  784. background: var(--secondary-bg-color);
  785. color: var(--body-txt-color) !important;
  786. }
  787.  
  788. .story_c_l span.story_link a:hover {
  789. background: var(--secondary-bg-border);
  790. text-shadow: none;
  791. }
  792.  
  793. /* page: anime */
  794. .story_infa {
  795. font-size: 14px;
  796. }
  797.  
  798. .story_comm span {
  799. border-radius: 5px;
  800. }
  801.  
  802. article.story .story_infa dt {
  803. color: var(--body-txt-color);
  804. }
  805.  
  806. /* title cover */
  807. .story_c_l {
  808. border: none;
  809. box-shadow: none;
  810. }
  811.  
  812. .story_c_l span.story_post img {
  813. border: 1px solid var(--secondary-bg-border);
  814. border-radius: 8px;
  815. }
  816.  
  817. .story_c_l .story_link {
  818. border-radius: 8px !important
  819. }
  820.  
  821. .story_c_inf {
  822. border: 1px solid var(--secondary-bg-border);
  823. border-radius: 8px;
  824. }
  825.  
  826. .story_c_l span.story_date {
  827. color: var(--content-bg-color);
  828. }
  829.  
  830. /* page: articles/statti */
  831. .showshh {
  832. background: var(--secondary-bg-border-darker) !important;
  833. -webkit-box-shadow: none !important;
  834. -moz-box-shadow: none !important;
  835. box-shadow: none !important;
  836. margin-top: 1em;
  837. border-radius: 8px;
  838. border: 1px solid var(--secondary-bg-border) !important;
  839. font-style: normal;
  840. color: var(--body-txt-color);
  841. font-size: 14.5px;
  842.  
  843. }`;
  844.  
  845.  
  846. const style = document.createElement('style');
  847. style.id = stylesheetElementId;
  848. style.innerHTML = stylesheetCode;
  849.  
  850. document.body.append(style);
  851.  
  852. if (document.getElementById(stylesheetElementId))
  853. console.info('[anitube-modernstyle-dark]: successfully injected the stylesheet!');
  854. else
  855. console.warn('[anitube-modernstyle-dark]: failed to inject the stylesheet!');
  856. })();

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址