Style Improvements

Simple style improvements for better player experience.

  1. // ==UserScript==
  2. // @name Style Improvements
  3. // @namespace http://tampermonkey.net/
  4. // @version 3.2.1
  5. // @license GPL-3.0
  6. // @description Simple style improvements for better player experience.
  7. // @author kamarov
  8. // @match https://tanktrouble.com/*
  9. // @run-at document-end
  10. // @grant GM_addStyle
  11. // @require https://update.greasyfork.org/scripts/482092/1297984/TankTrouble%20Development%20Library.js
  12. // ==/UserScript==
  13.  
  14. GM_addStyle(`
  15. @keyframes moveLeft {
  16. 0% {
  17. transform: translateX(0) scale(1);
  18. }
  19. 100% {
  20. transform: translateX(-60%) scale(0);
  21. }
  22. }
  23. @keyframes moveRight {
  24. 0% {
  25. transform: translateX(-60%) scale(0);
  26. }
  27. 100% {
  28. transform: translateX(0) scale(1);
  29. }
  30. }
  31. #game {
  32. top: 0;
  33. }
  34. #secondaryContent, #tertiaryContent {
  35. margin-top: 7px;
  36. }
  37. a {
  38. margin-top: 7px;
  39. }
  40. #tankinfo .content {
  41. background: #eee;
  42. }
  43. :root.dark #tankinfo .content {
  44. background: #292929;
  45. }
  46. .box .tab.topRight {
  47. background: #eee;
  48. }
  49. .box .tab.bottom {
  50. background: #eee;
  51. }
  52. .box .tab.left {
  53. background: #eee;
  54. }
  55. .box .tab.right {
  56. background: #eee;
  57. }
  58. :root.dark .box .tab.topRight {
  59. background: #292929 !important;
  60. }
  61. :root.dark .box .tab.bottom {
  62. background: #292929 !important;
  63. }
  64. :root.dark .box .tab.left {
  65. background: #292929 !important;
  66. }
  67. :root.dark .box .tab.right {
  68. background: #292929 !important;
  69. }
  70. .box.noselect .content {
  71. background: #eee;
  72. }
  73. :root.dark .box.noselect .content {
  74. background: #292929 !important;
  75. }
  76. #tankinfo table {
  77. background: #ddd;
  78. border-radius: 10px;
  79. border-top: 2px solid #7171712b;
  80. margin: 8px 0 0 0;
  81. }
  82. :root.dark #tankinfo table {
  83. background: #222;
  84. border-radius: 10px;
  85. border-top: 2px solid #10101050;
  86. }
  87. .adminBadge {
  88. top: -64px !important;
  89. }
  90. .banned-Icon {
  91. top: -129px !important;
  92. }
  93. #tankinfo .progress {
  94. background: #ddd;
  95. }
  96. :root.dark #tankinfo .progress {
  97. background: #222;
  98. }
  99. #tankinfo .progress .border {
  100. border-color: #7171712b;
  101. }
  102. :root.dark #tankinfo .progress .border {
  103. border-color: #10101050;
  104. }
  105. #tankinfo tr {
  106. background: #ddd;
  107. border-bottom-right-radius: 5px;
  108. border-bottom-left-radius: 5px;
  109. }
  110. :root.dark #tankinfo tr {
  111. background: #222;
  112. border-bottom-right-radius: 5px;
  113. border-bottom-left-radius: 5px;
  114. }
  115. #tankinfo .actions:not(.centered) {
  116. text-align: center;
  117. margin: 8px 0 0 0;
  118. }
  119. .actions.centered {
  120. margin: 8px 0 0 0;
  121. }
  122. #tankinfo .icon {
  123. top: -154px;
  124. }
  125. #chat form {
  126. border-radius: 3px;
  127. border: 1px solid var(--jq-borderColorDefault);
  128. background: rgb(255 255 255 / 80%);
  129. margin-left: 20px;
  130. padding: 1px;
  131. width: 249px !important;
  132. }
  133. #chat form .autocomplete-dropdown{
  134. margin-left: 255px !important;
  135. margin-top: -1px !important;
  136. }
  137. :root.dark #chat form {
  138. background: rgb(55 55 55 / 80%);
  139. }
  140. #chat.global form {
  141. background: #68c5ff;
  142. border: 1px solid #759fff;
  143. }
  144. #chat.user form {
  145. background: #08ef0a;
  146. border: 1px solid #01c701;
  147. }
  148. #chat:not(.open) form{
  149. z-index: -1;
  150. position: relative;
  151. animation: moveLeft 0.1s cubic-bezier(0.79, -0.02, 0.32, 0.98) forwards;
  152. }
  153. #chat:is(.opening, .open) form {
  154. z-index: -1;
  155. position: relative;
  156. padding-right: 0;
  157. animation: moveRight 0.3s cubic-bezier(0.79, -0.02, 0.32, 0.98) forwards;
  158. }
  159. #chat:is(.opening, .open) .content, #chat:is(.opening, .open) textarea {
  160. width: 230px !important;
  161. }
  162. #chat {
  163. -webkit-filter: drop-shadow(0 7px 4px rgba(0, 0, 0, .5));
  164. filter: drop-shadow(0 7px 4px rgba(0, 0, 0, .5));
  165. }
  166. #chat .body {
  167. width: 240px;
  168. height: 160px;
  169. margin-left: 20px;
  170. margin-top: 5px;
  171. background: rgb(255 255 255 / 50%);
  172. border-radius: 7px;
  173. border: 1px solid var(--jq-borderColorDefault);
  174. padding: 5px;
  175. }
  176. :root.dark #chat .body {
  177. background: rgb(45 45 45 / 50%);
  178. }
  179. #chat .body.dragging {
  180. background: rgb(225 225 225 / 50%);
  181. border: none;
  182. border-radius: 7px;
  183. border: 1px solid var(--jq-borderColorDefault);
  184. margin-left: 20px;
  185. margin-top: 5px;
  186. padding: 5px;
  187. }
  188. :root.dark #chat .body.dragging {
  189. background: rgb(35 35 35 / 50%);
  190. }
  191. #chat.opening textarea, #chat.open textarea {
  192. width: 220px !important;
  193. margin-left: -20px !important;
  194. }
  195. #chat:not(.opening) textarea, #chat:not(.open) textarea {
  196. margin-left: -20px !important;
  197. }
  198. #chat .handle {
  199. width: 10px;
  200. height: 10px;
  201. }
  202. .newsPost {
  203. filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5));
  204. }
  205. .forum .bubble {
  206. background: #eee;
  207. border: #ffffff00 2px solid;
  208. border-radius: 15px;
  209. transition: background .7s, border .7s;
  210. filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5));
  211. }
  212. :root.dark .forum .bubble {
  213. background: #292929;
  214. border: #ffffff00 2px solid;
  215. }
  216. .forum .thread.selectable:not(.editing) .bubble:hover {
  217. background: #e2e2e2 !important
  218. }
  219. :root.dark .forum .thread.selectable:not(.editing) .bubble:hover {
  220. background: #222 !important
  221. }
  222. .forum .editing .bubble {
  223. background-color: #ebedf7;
  224. }
  225. :root.dark .forum .editing .bubble {
  226. background-color: #6b7089;
  227. }
  228. .forum .bubble .pointer {
  229. background: inherit;
  230. position: absolute;
  231. top: 8px;
  232. width: 22px;
  233. height: 15px;
  234. }
  235. #overlay {
  236. background-color: rgb(0 0 0 / 90%);
  237. }
  238. #overlay>button {
  239. font-size: 30px;
  240. }
  241. button.warning {
  242. background: red;
  243. border-radius: 3px;
  244. }
  245. #overlay .messages .message {
  246. background: #24cb19 !important;
  247. border-radius: 3px;
  248. color: #fff;
  249. }
  250. :root.dark #overlay .messages .message {
  251. background: #24cb19 !important;
  252. }
  253. #overlay .messages .message.important {
  254. background: red !important;
  255. }
  256. :root.dark #overlay .messages .message.important {
  257. background: red !important;
  258. }
  259. #overlay .messages .message .headers {
  260. border-bottom: 1px solid #fff;
  261. }
  262. #overlay input[type="text"], #overlay input[type="password"], #overlay textarea {
  263. background-color: #334655c7;
  264. border: 2px solid #315d83b5;
  265. border-radius: 3px;
  266. }
  267. #overlay .newGame .premium {
  268. color: #000;
  269. display: inline-block;
  270. background: linear-gradient(to bottom,#eee,#ccc);
  271. border-radius: 7px;
  272. border: none;
  273. position: relative;
  274. padding: 40px 40px 30px;
  275. margin: 80px 20px 20px;
  276. }
  277. :root.dark #overlay .newGame .premium {
  278. color: #fff;
  279. background: linear-gradient(to bottom,#292929,#242424) !important;
  280. }
  281. #overlay input[type="checkbox"]+label::before {
  282. border: 2px solid red;
  283. transition: border .7s;
  284. border-radius: 7px;
  285. color: #fff;
  286. }
  287. #overlay .shopItem {
  288. background: repeating-radial-gradient(#ccc, #55555599 100px);
  289. border: #55555599 dotted;
  290. }
  291. :root.dark #overlay .shopItem {
  292. background: repeating-radial-gradient(#292929, #00000099 100px) !important;
  293. border: #00000099 dotted;
  294. }
  295. #shopItem-122 {
  296. background: repeating-radial-gradient(#1c8a3c, #2cdc60, #1c8a3c99 100px) !important;
  297. border: none;
  298. }
  299. :root.dark #shopItem-122 {
  300. background: repeating-radial-gradient(#1c8a3c, #2cdc60, #1c8a3c99 100px) !important;
  301. border: none;
  302. }
  303. #shopItem-120 {
  304. background: linear-gradient(to bottom, #fcdc88, #f8c23a) !important;
  305. border: none;
  306. }
  307. :root.dark #shopItem-120 {
  308. background: linear-gradient(to bottom, #fcdc88, #f8c23a) !important;
  309. border: none;
  310. }
  311. #virtualShopItem-500 {
  312. background: repeating-linear-gradient(55deg, #101010, #333 100px) !important;
  313. border: none;
  314. }
  315. :root.dark #overlay #virtualShopItem-500 {
  316. background: repeating-linear-gradient(55deg, #101010, #333 100px) !important;
  317. border: none;
  318. }
  319. #virtualShopItem-520 {
  320. background: repeating-linear-gradient(45deg, #ff00d4, #256cff, #00ffff, #02ff00, #e7ff00, #ffb300, red, #ff00d4 270px) !important;
  321. border: none;
  322. }
  323. :root.dark #overlay #virtualShopItem-520 {
  324. background: repeating-linear-gradient(45deg, #ff00d4, #256cff, #00ffff, #02ff00, #e7ff00, #ffb300, red, #ff00d4 270px) !important;
  325. border: none;
  326. }
  327. #virtualShopItem-512 {
  328. background: linear-gradient(to bottom, #e2bf49, #664600) !important;
  329. border: none;
  330. }
  331. :root.dark #overlay #virtualShopItem-512 {
  332. background: linear-gradient(to bottom, #e2bf49, #664600) !important;
  333. border: none;
  334. }
  335. #virtualShopItem-509 {
  336. background: linear-gradient(to bottom, #e2bf49, #664600) !important;
  337. border: none;
  338. }
  339. :root.dark #overlay #virtualShopItem-509 {
  340. background: linear-gradient(to bottom, #e2bf49, #664600) !important;
  341. border: none;
  342. }
  343. .shopItem .soldOut text {
  344. font-size: 30pt;
  345. stroke-width: 0px;
  346. transform: translate(70px, 150px) rotate(0deg);
  347. }
  348. :root.dark #adduser .content, :root.dark #goldShopItemsContainer .shopItem, :root.dark #settings .content, :root.dark #shopItemsContainer .shopItem, :root.dark #tankinfo .content, :root.dark #switchcontrols .content {
  349. color: #fff;
  350. background: #292929;
  351. }
  352. `);
  353.  
  354. UIConstants.TANK_ICON_OUTLINE_WIDTH = 0.5