☰

inject-viewerjs-style

Stylesheet for Viewer.js

此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.gf.qytechs.cn/scripts/512576/1464552/inject-viewerjs-style.js 

  1. (async function() {
  2.   // wait until document is ready
  3.   await new Promise(resolve => {
  4.     const timer = setInterval(() => {
  5.       if (document && document.createElement && document.head && document.head.appendChild) { clearInterval(timer); resolve(); }
  6.     }, 100);
  7.   });
  8.  
  9.   // inject stylesheet
  10.   const styleElement = document.createElement('style');
  11.   styleElement.textContent = `
  12. .viewer-zoom-in::before,
  13. .viewer-zoom-out::before,
  14. .viewer-one-to-one::before,
  15. .viewer-reset::before,
  16. .viewer-prev::before,
  17. .viewer-play::before,
  18. .viewer-next::before,
  19. .viewer-rotate-left::before,
  20. .viewer-rotate-right::before,
  21. .viewer-flip-horizontal::before,
  22. .viewer-flip-vertical::before,
  23. .viewer-fullscreen::before,
  24. .viewer-fullscreen-exit::before,
  25. .viewer-close::before {
  26.   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAAUCAYAAABWOyJDAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAQPSURBVHic7Zs/iFxVFMa/0U2UaJGksUgnIVhYxVhpjDbZCBmLdAYECxsRFBTUamcXUiSNncgKQbSxsxH8gzAP3FU2jY0kKKJNiiiIghFlccnP4p3nPCdv3p9778vsLOcHB2bfveeb7955c3jvvNkBIMdxnD64a94GHMfZu3iBcRynN7zAOI7TG15gHCeeNUkr8zaxG2lbYDYsdgMbktBsP03jdQwljSXdtBhLOmtjowC9Mg9L+knSlcD8TNKpSA9lBpK2JF2VdDSR5n5J64m0qli399hNFMUlpshQii5jbXTbHGviB0nLNeNDSd9VO4A2UdB2fp+x0eCnaXxWXGA2X0au/3HgN9P4LFCjIANOJdrLr0zzZ+BEpNYDwKbpnQMeAw4m8HjQtM6Z9qa917zPQwFr3M5KgA6J5rTJCdFZJj9/lyvGhsDvwFNVuV2MhhjrK6b9bFiE+j1r87eBl4HDwCF7/U/k+ofAX5b/EXBv5JoLMuILzf3Ap6Z3EzgdqHMCuF7hcQf4HDgeoHnccncqdK/TvSDWffFXI/exICY/xZyqc6XLWF1UFZna4gJ7q8BsRvgd2/xXpo6P+D9dfT7PpECtA3cnWPM0GXGFZh/wgWltA+cDNC7X+AP4GzjZQe+k5dRxuYPeiuXU7e1qwLpDz7dFjXKRaSwuMLvAlG8zZlG+YmiK1HoFqT7wP2z+4Q45TfEGcMt01xLoNZEBTwRqD4BLpnMLeC1A41UmVxsXgXeBayV/Wx20rpTyrpnWRft7p6O/FdqzGrDukPNtkaMoMo3FBdBSQMOnYBCReyf05s126fU9ytfX98+mY54Kxnp7S9K3kj6U9KYdG0h6UdLbkh7poFXMfUnSOyVvL0h6VtIXHbS6nOP+s/Zm9mvyXW1uuC9ohZ72E9uDmXWLJOB1GxsH+DxPftsB8B6wlGDN02TAkxG6+4D3TWsbeC5CS8CDFce+AW500LhhOW2020TRjK3b21HEmgti9m0RonxbdMZeVzV+/4tF3cBpP7E9mKHNL5q8h5g0eYsCMQz0epq8gQrwMXAgcs0FGXGFRcB9wCemF9PkbYqM/Bas7fxLwNeJPdTdpo4itQti8lPMqTpXuozVRVXPpbHI3KkNTB1NfkL81j2mvhDp91HgV9MKuRIqrykj3WPq4rHyL+axj8/qGPmTqi6F9YDlHOvJU6oYcTsh/TYSzWmTE6JT19CtLTJt32D6CmHe0eQn1O8z5AXgT4sx4Vcu0/EQecMydB8z0hUWkTd2t4CrwNEePqMBcAR4mrBbwyXLPWJa8zrXmmLEhNBmfpkuY2102xxrih+pb+ieAb6vGhuA97UcJ5KR8gZ77K+99xxeYBzH6Q3/Z0fHcXrDC4zjOL3hBcZxnN74F+zlvXFWXF9PAAAAAElFTkSuQmCC');
  27.   background-repeat: no-repeat;
  28.   background-size: 280px;
  29.   color: transparent;
  30.   display: block;
  31.   font-size: 0;
  32.   height: 20px;
  33.   line-height: 0;
  34.   width: 20px;
  35. }
  36.  
  37. .viewer-zoom-in::before {
  38.   background-position: 0 0;
  39.   content: 'Zoom In';
  40. }
  41.  
  42. .viewer-zoom-out::before {
  43.   background-position: -20px 0;
  44.   content: 'Zoom Out';
  45. }
  46.  
  47. .viewer-one-to-one::before {
  48.   background-position: -40px 0;
  49.   content: 'One to One';
  50. }
  51.  
  52. .viewer-reset::before {
  53.   background-position: -60px 0;
  54.   content: 'Reset';
  55. }
  56.  
  57. .viewer-prev::before {
  58.   background-position: -80px 0;
  59.   content: 'Previous';
  60. }
  61.  
  62. .viewer-play::before {
  63.   background-position: -100px 0;
  64.   content: 'Play';
  65. }
  66.  
  67. .viewer-next::before {
  68.   background-position: -120px 0;
  69.   content: 'Next';
  70. }
  71.  
  72. .viewer-rotate-left::before {
  73.   background-position: -140px 0;
  74.   content: 'Rotate Left';
  75. }
  76.  
  77. .viewer-rotate-right::before {
  78.   background-position: -160px 0;
  79.   content: 'Rotate Right';
  80. }
  81.  
  82. .viewer-flip-horizontal::before {
  83.   background-position: -180px 0;
  84.   content: 'Flip Horizontal';
  85. }
  86.  
  87. .viewer-flip-vertical::before {
  88.   background-position: -200px 0;
  89.   content: 'Flip Vertical';
  90. }
  91.  
  92. .viewer-fullscreen::before {
  93.   background-position: -220px 0;
  94.   content: 'Enter Full Screen';
  95. }
  96.  
  97. .viewer-fullscreen-exit::before {
  98.   background-position: -240px 0;
  99.   content: 'Exit Full Screen';
  100. }
  101.  
  102. .viewer-close::before {
  103.   background-position: -260px 0;
  104.   content: 'Close';
  105. }
  106.  
  107. .viewer-container {
  108.   bottom: 0;
  109.   direction: ltr;
  110.   font-size: 0;
  111.   left: 0;
  112.   line-height: 0;
  113.   overflow: hidden;
  114.   position: absolute;
  115.   right: 0;
  116.   -webkit-tap-highlight-color: transparent;
  117.   top: 0;
  118.   -ms-touch-action: none;
  119.   touch-action: none;
  120.   -webkit-touch-callout: none;
  121.   -webkit-user-select: none;
  122.   -moz-user-select: none;
  123.   -ms-user-select: none;
  124.   user-select: none;
  125. }
  126.  
  127. .viewer-container::-moz-selection,
  128. .viewer-container *::-moz-selection {
  129.   background-color: transparent;
  130. }
  131.  
  132. .viewer-container::selection,
  133. .viewer-container *::selection {
  134.   background-color: transparent;
  135. }
  136.  
  137. .viewer-container:focus {
  138.   outline: 0;
  139. }
  140.  
  141. .viewer-container img {
  142.   display: block;
  143.   height: auto;
  144.   max-height: none !important;
  145.   max-width: none !important;
  146.   min-height: 0 !important;
  147.   min-width: 0 !important;
  148.   width: 100%;
  149. }
  150.  
  151. .viewer-canvas {
  152.   bottom: 0;
  153.   left: 0;
  154.   overflow: hidden;
  155.   position: absolute;
  156.   right: 0;
  157.   top: 0;
  158. }
  159.  
  160. .viewer-canvas>img {
  161.   height: auto;
  162.   margin: 15px auto;
  163.   max-width: 90% !important;
  164.   width: auto;
  165. }
  166.  
  167. .viewer-footer {
  168.   bottom: 0;
  169.   left: 0;
  170.   overflow: hidden;
  171.   position: absolute;
  172.   right: 0;
  173.   text-align: center;
  174. }
  175.  
  176. .viewer-navbar {
  177.   background-color: rgba(0, 0, 0, 0.5);
  178.   overflow: hidden;
  179. }
  180.  
  181. .viewer-list {
  182.   box-sizing: content-box;
  183.   height: 50px;
  184.   margin: 0;
  185.   overflow: hidden;
  186.   padding: 1px 0;
  187. }
  188.  
  189. .viewer-list>li {
  190.   color: transparent;
  191.   cursor: pointer;
  192.   float: left;
  193.   font-size: 0;
  194.   height: 50px;
  195.   line-height: 0;
  196.   opacity: 0.5;
  197.   overflow: hidden;
  198.   transition: opacity 0.15s;
  199.   width: 30px;
  200. }
  201.  
  202. .viewer-list>li:focus,
  203. .viewer-list>li:hover {
  204.   opacity: 0.75;
  205. }
  206.  
  207. .viewer-list>li:focus {
  208.   outline: 0;
  209. }
  210.  
  211. .viewer-list>li+li {
  212.   margin-left: 1px;
  213. }
  214.  
  215. .viewer-list>.viewer-loading {
  216.   position: relative;
  217. }
  218.  
  219. .viewer-list>.viewer-loading::after {
  220.   border-width: 2px;
  221.   height: 20px;
  222.   margin-left: -10px;
  223.   margin-top: -10px;
  224.   width: 20px;
  225. }
  226.  
  227. .viewer-list>.viewer-active,
  228. .viewer-list>.viewer-active:focus,
  229. .viewer-list>.viewer-active:hover {
  230.   opacity: 1;
  231. }
  232.  
  233. .viewer-player {
  234.   background-color: #000;
  235.   bottom: 0;
  236.   cursor: none;
  237.   display: none;
  238.   left: 0;
  239.   position: absolute;
  240.   right: 0;
  241.   top: 0;
  242.   z-index: 1;
  243. }
  244.  
  245. .viewer-player>img {
  246.   left: 0;
  247.   position: absolute;
  248.   top: 0;
  249. }
  250.  
  251. .viewer-toolbar>ul {
  252.   display: inline-block;
  253.   margin: 0 auto 5px;
  254.   overflow: hidden;
  255.   padding: 6px 3px;
  256. }
  257.  
  258. .viewer-toolbar>ul>li {
  259.   background-color: rgba(0, 0, 0, 0.5);
  260.   border-radius: 50%;
  261.   cursor: pointer;
  262.   float: left;
  263.   height: 24px;
  264.   overflow: hidden;
  265.   transition: background-color 0.15s;
  266.   width: 24px;
  267. }
  268.  
  269. .viewer-toolbar>ul>li:focus,
  270. .viewer-toolbar>ul>li:hover {
  271.   background-color: rgba(0, 0, 0, 0.8);
  272. }
  273.  
  274. .viewer-toolbar>ul>li:focus {
  275.   box-shadow: 0 0 3px #fff;
  276.   outline: 0;
  277.   position: relative;
  278.   z-index: 1;
  279. }
  280.  
  281. .viewer-toolbar>ul>li::before {
  282.   margin: 2px;
  283. }
  284.  
  285. .viewer-toolbar>ul>li+li {
  286.   margin-left: 1px;
  287. }
  288.  
  289. .viewer-toolbar>ul>.viewer-small {
  290.   height: 18px;
  291.   margin-bottom: 3px;
  292.   margin-top: 3px;
  293.   width: 18px;
  294. }
  295.  
  296. .viewer-toolbar>ul>.viewer-small::before {
  297.   margin: -1px;
  298. }
  299.  
  300. .viewer-toolbar>ul>.viewer-large {
  301.   height: 30px;
  302.   margin-bottom: -3px;
  303.   margin-top: -3px;
  304.   width: 30px;
  305. }
  306.  
  307. .viewer-toolbar>ul>.viewer-large::before {
  308.   margin: 5px;
  309. }
  310.  
  311. .viewer-tooltip {
  312.   background-color: rgba(0, 0, 0, 0.8);
  313.   border-radius: 10px;
  314.   color: #fff;
  315.   display: none;
  316.   font-size: 12px;
  317.   height: 20px;
  318.   left: 50%;
  319.   line-height: 20px;
  320.   margin-left: -25px;
  321.   margin-top: -10px;
  322.   position: absolute;
  323.   text-align: center;
  324.   top: 50%;
  325.   width: 50px;
  326. }
  327.  
  328. .viewer-title {
  329.   color: #ccc;
  330.   display: inline-block;
  331.   font-size: 12px;
  332.   line-height: 1.2;
  333.   margin: 5px 5%;
  334.   max-width: 90%;
  335.   min-height: 14px;
  336.   opacity: 0.8;
  337.   overflow: hidden;
  338.   text-overflow: ellipsis;
  339.   transition: opacity 0.15s;
  340.   white-space: nowrap;
  341. }
  342.  
  343. .viewer-title:hover {
  344.   opacity: 1;
  345. }
  346.  
  347. .viewer-button {
  348.   -webkit-app-region: no-drag;
  349.   background-color: rgba(0, 0, 0, 0.5);
  350.   border-radius: 50%;
  351.   cursor: pointer;
  352.   height: 80px;
  353.   overflow: hidden;
  354.   position: absolute;
  355.   right: -40px;
  356.   top: -40px;
  357.   transition: background-color 0.15s;
  358.   width: 80px;
  359. }
  360.  
  361. .viewer-button:focus,
  362. .viewer-button:hover {
  363.   background-color: rgba(0, 0, 0, 0.8);
  364. }
  365.  
  366. .viewer-button:focus {
  367.   box-shadow: 0 0 3px #fff;
  368.   outline: 0;
  369. }
  370.  
  371. .viewer-button::before {
  372.   bottom: 15px;
  373.   left: 15px;
  374.   position: absolute;
  375. }
  376.  
  377. .viewer-fixed {
  378.   position: fixed;
  379. }
  380.  
  381. .viewer-open {
  382.   overflow: hidden;
  383. }
  384.  
  385. .viewer-show {
  386.   display: block;
  387. }
  388.  
  389. .viewer-hide {
  390.   display: none;
  391. }
  392.  
  393. .viewer-backdrop {
  394.   background-color: rgba(0, 0, 0, 0.5);
  395. }
  396.  
  397. .viewer-invisible {
  398.   visibility: hidden;
  399. }
  400.  
  401. .viewer-move {
  402.   cursor: move;
  403.   cursor: grab;
  404. }
  405.  
  406. .viewer-fade {
  407.   opacity: 0;
  408. }
  409.  
  410. .viewer-in {
  411.   opacity: 1;
  412. }
  413.  
  414. .viewer-transition {
  415.   transition: all 0.3s;
  416. }
  417.  
  418. @keyframes viewer-spinner {
  419.   0% {
  420.     transform: rotate(0deg);
  421.   }
  422.  
  423.   100% {
  424.     transform: rotate(360deg);
  425.   }
  426. }
  427.  
  428. .viewer-loading::after {
  429.   animation: viewer-spinner 1s linear infinite;
  430.   border: 4px solid rgba(255, 255, 255, 0.1);
  431.   border-left-color: rgba(255, 255, 255, 0.5);
  432.   border-radius: 50%;
  433.   content: '';
  434.   display: inline-block;
  435.   height: 40px;
  436.   left: 50%;
  437.   margin-left: -20px;
  438.   margin-top: -20px;
  439.   position: absolute;
  440.   top: 50%;
  441.   width: 40px;
  442.   z-index: 1;
  443. }
  444.  
  445. @media (max-width: 767px) {
  446.   .viewer-hide-xs-down {
  447.     display: none;
  448.   }
  449. }
  450.  
  451. @media (max-width: 991px) {
  452.   .viewer-hide-sm-down {
  453.     display: none;
  454.   }
  455. }
  456.  
  457. @media (max-width: 1199px) {
  458.   .viewer-hide-md-down {
  459.     display: none;
  460.   }
  461. }
  462.   `;
  463.   document.head.appendChild(styleElement);
  464. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

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