Greasy Fork 还支持 简体中文。

IdlePixelMobile

A plugin to add mobile styling to idle-pixel.com

目前為 2023-01-24 提交的版本,檢視 最新版本

  1. // ==UserScript==
  2. // @name IdlePixelMobile
  3. // @namespace com.evolsoulx.idlepixel.mobile
  4. // @version 1.0.5
  5. // @description A plugin to add mobile styling to idle-pixel.com
  6. // @author evolsoulx
  7. // @license MIT
  8. // @grant GM_addStyle
  9. // @match *://idle-pixel.com/login/play*
  10. // @require https://greasyfork.org/scripts/441206-idlepixel/code/IdlePixel+.js
  11. // ==/UserScript==
  12. (function() {
  13. 'use strict';
  14.  
  15. var mobileCSS = `
  16. @media only screen and (max-width: 1000px) {
  17.  
  18. body {}
  19.  
  20. /*reworking panel grid layout to be vertical*/
  21. #panels {
  22. background-color: lightblue !important;
  23. }
  24.  
  25. .top-bar {
  26. grid-column-start: 1 !important;
  27. grid-column-end: span 2 !important;
  28. grid-row-start: 1 !important;
  29. grid-row-end: span 1 !important;
  30. }
  31.  
  32. #menu-bar {
  33. grid-column-start: 1 !important;
  34. grid-column-end: span 2 !important;
  35. grid-row-start: 2 !important;
  36. grid-row-end: span 1 !important;
  37. }
  38.  
  39. #panels {
  40. grid-column-start: 1 !important;
  41. grid-column-end: span 2 !important;
  42. grid-row-start: 3 !important;
  43. grid-row-end: span 1 !important;
  44. }
  45.  
  46. /*Menu rework*/
  47. .left-menu-item {
  48. margin-bottom: 3px;
  49. display: inline-block;
  50. }
  51.  
  52. .hover.hover-menu-bar-item.left-menu-item {
  53. width: 90px;
  54. height: 90px;
  55. display: inline-block;
  56. border: 1px solid rgb(66, 66, 66);
  57. background-color: #54bcce;
  58. border-radius: 5pt;
  59. color: #F1F8F0;
  60. margin-bottom: 15px;
  61. text-align;
  62. center;
  63. }
  64.  
  65. .hover.hover-menu-bar-item.left-menu-item img {
  66. width: 100%;
  67. height: 100%;
  68. }
  69.  
  70. .color-light-red,
  71. .color-yellow,
  72. .color-silver {
  73. display: block;
  74. text-align: center;
  75. font-size: .9em;
  76. }
  77.  
  78. div[data-tooltip*=menu-bar-oil] .color-silver,
  79. #menu-bar-oil-in,
  80. #menu-bar-oil-out {
  81. display: inline;
  82. }
  83.  
  84. #menu-bar-buttons u {
  85. color: #F1F8F0;
  86. display: block;
  87. width: 100%;
  88. background-color: #0099A2;
  89. padding: 0px 10px;
  90. margin: 5px 0px;
  91. font-weight: bold;
  92. text-decoration: none;
  93. border: 1px none rgb(66, 66, 66);
  94. border-radius: 5pt;
  95. }
  96.  
  97. .hover.hover-menu-bar-item.left-menu-item span:nth-of-type(1),
  98. #menu-bar-buttons hr,
  99. #menu-bar-buttons br {
  100. white-space: nowrap;
  101. overflow: hidden;
  102. display: none;
  103. }
  104.  
  105. #menu-bar-buttons>hr:nth-child(26) {
  106. display: block;
  107. }
  108.  
  109. .hover.hover-menu-bar-item.left-menu-item[onclick*=quests],
  110. .hover.hover-menu-bar-item.left-menu-item[onclick*=shop],
  111. .hover.hover-menu-bar-item.left-menu-item[onclick*=player-market],
  112. .hover.hover-menu-bar-item.left-menu-item[onclick*=donor-shop],
  113. .hover.hover-menu-bar-item.left-menu-item[onclick*=achievements] {
  114. white-space: nowrap;
  115. overflow: hidden;
  116. }
  117.  
  118.  
  119. /*rework notifications*/
  120. #notifications-area div[id*=notification] {
  121. width: 100%;
  122. }
  123.  
  124. #ui-tweaks-notification-oil-full span {
  125. display: inline-block;
  126. }
  127.  
  128. #panels {
  129. padding: 3px 0px;
  130. }
  131.  
  132. .notifications-area {
  133. margin: 0px;
  134. padding: 0px;
  135. }
  136.  
  137. }
  138. `;
  139. if (typeof GM_addStyle != "undefined") {
  140. GM_addStyle(mobileCSS);
  141. } else if (typeof PRO_addStyle != "undefined") {
  142. PRO_addStyle(mobileCSS);
  143. } else if (typeof addStyle != "undefined") {
  144. addStyle(mobileCSS);
  145. } else {
  146. var node = document.createElement("style");
  147. node.type = "text/css";
  148. node.appendChild(document.createTextNode(mobileCSS));
  149. var heads = document.getElementsByTagName("head");
  150. if (heads.length > 0) {
  151. heads[0].appendChild(node);
  152. } else {
  153. // no head yet, stick it whereever
  154. document.documentElement.appendChild(node);
  155. }
  156. }
  157.  
  158.  
  159. class MobilePlugin extends IdlePixelPlusPlugin {
  160. constructor() {
  161. super("mobile", {
  162. about: {
  163. name: GM_info.script.name,
  164. version: GM_info.script.version,
  165. author: GM_info.script.author,
  166. description: GM_info.script.description,
  167. grant: GM_info.script.grant
  168. },
  169. config: [{
  170. type: "label",
  171. label: "Is this a mobile script?"
  172. },
  173. {
  174. id: "MyCheckbox",
  175. label: "Yes / No",
  176. type: "boolean",
  177. default: true
  178. }
  179. ]
  180. });
  181. }
  182.  
  183. onConfigsChanged() {
  184. }
  185.  
  186. onLogin() {
  187. console.log("MobilePlugin.onLogin");
  188. }
  189.  
  190. onMessageReceived(data) {
  191. // Will spam the console, uncomment if you want to see it
  192. //console.log("SamplePlugin.onMessageReceived: ", data);
  193. }
  194.  
  195. onVariableSet(key, valueBefore, valueAfter) {
  196. // Will spam the console, uncomment if you want to see it
  197. //console.log("SamplePlugin.onVariableSet", key, valueBefore, valueAfter);
  198. }
  199.  
  200. onChat(data) {
  201. // Could spam the console, uncomment if you want to see it
  202. //console.log("SamplePlugin.onChat", data);
  203. }
  204.  
  205. onPanelChanged(panelBefore, panelAfter) {
  206. console.log("MobilePlugin.onPanelChanged", panelBefore, panelAfter);
  207. }
  208.  
  209. onCombatStart() {
  210. console.log("MobilePlugin.onCombatStart");
  211. }
  212.  
  213. onCombatEnd() {
  214. console.log("MobilePlugin.onCombatEnd");
  215. }
  216.  
  217. }
  218.  
  219. const plugin = new MobilePlugin();
  220. IdlePixelPlus.registerPlugin(plugin);
  221.  
  222. })();
  223.