☰

Style Improvements

Simple style improvements for better player experience.

当前为 2025-02-01 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Style Improvements
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2.1.0
  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 table {
  41.     background: #a1a1a1;
  42.     border-radius: 10px;
  43.     border-top: 2px solid #71717150;
  44. }
  45. :root.dark #tankinfo table {
  46.     background: #161616;
  47.     border-radius: 10px;
  48.     border-top: 2px solid #10101050;
  49. }
  50. #tankinfo .progress {
  51.     background: #a1a1a1;
  52. }
  53. :root.dark #tankinfo .progress {
  54.     background: #161616;
  55. }
  56. #tankinfo .progress .border {
  57.     border-color: #71717150;
  58. }
  59. :root.dark #tankinfo .progress .border {
  60.     border-color: #10101050;
  61. }
  62. tr {
  63.     background: #a1a1a1;
  64.     border-bottom-right-radius: 5px;
  65.     border-bottom-left-radius: 5px;
  66.     padding: 0 0 5px 0;
  67. }
  68. :root.dark tr {
  69.     background: #161616;
  70.     border-bottom-right-radius: 5px;
  71.     border-bottom-left-radius: 5px;
  72.     padding: 0 0 5px 0;
  73. }
  74. #chat form {
  75.     border-radius: 3px;
  76.     border: 1px solid var(--jq-borderColorDefault);
  77.     background: rgb(255 255 255 / 80%);
  78.     margin-left: 20px;
  79.     padding: 1px;
  80.     width: 249px !important;
  81. }
  82. #chat form .autocomplete-dropdown{
  83.     margin-left: 255px !important;
  84.     margin-top: -1px !important;
  85. }
  86. :root.dark #chat form {
  87.     background: rgb(55 55 55 / 80%);
  88. }
  89. #chat.global form {
  90.     background: #68c5ff;
  91.     border: 1px solid #759fff;
  92. }
  93. #chat.user form {
  94.     background: #08ef0a;
  95.     border: 1px solid #01c701;
  96. }
  97. #chat:not(.open) form{
  98.     z-index: -1;
  99.     position: relative;
  100. 	  animation: moveLeft 0.1s cubic-bezier(0.79, -0.02, 0.32, 0.98) forwards;
  101. }
  102. #chat:is(.opening, .open) form {
  103.     z-index: -1;
  104.     position: relative;
  105.     padding-right: 0;
  106.     animation: moveRight 0.3s cubic-bezier(0.79, -0.02, 0.32, 0.98) forwards;
  107. }
  108. #chat:is(.opening, .open) .content, #chat:is(.opening, .open) textarea {
  109.     width: 230px !important;
  110. }
  111. #chat {
  112.     -webkit-filter: drop-shadow(0 7px 4px rgba(0, 0, 0, .5));
  113.     filter: drop-shadow(0 7px 4px rgba(0, 0, 0, .5));
  114. }
  115. #chat .body {
  116.     width: 240px;
  117.     height: 160px;
  118.     margin-left: 20px;
  119.     margin-top: 5px;
  120.     background: rgb(255 255 255 / 50%);
  121.     border-radius: 7px;
  122.     border: 1px solid var(--jq-borderColorDefault);
  123.     padding: 5px;
  124. }
  125. :root.dark #chat .body {
  126.     background: rgb(45 45 45 / 50%);
  127. }
  128. #chat .body.dragging {
  129.     background: rgb(225 225 225 / 50%);
  130.     border: none;
  131.     border-radius: 7px;
  132.     border: 1px solid var(--jq-borderColorDefault);
  133.     margin-left: 20px;
  134.     margin-top: 5px;
  135.     padding: 5px;
  136. }
  137. :root.dark #chat .body.dragging {
  138.     background: rgb(35 35 35 / 50%);
  139. }
  140. #chat.opening textarea, #chat.open textarea {
  141.     width: 220px !important;
  142.     margin-left: -20px !important;
  143. }
  144. #chat:not(.opening) textarea, #chat:not(.open) textarea {
  145.     margin-left: -20px !important;
  146. }
  147. .newsPost {
  148.     filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5));
  149. }
  150. .forum .bubble {
  151.     border: #cccccc90 2px solid;
  152.     border-radius: 7px;
  153.     transition: background .7s, border .3s;
  154.     filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5));
  155. }
  156. .forum .editing .bubble {
  157.     background-color: #fdfdfd;
  158. }
  159. .forum .bubble .pointer {
  160.     background: inherit;
  161.     position: absolute;
  162.     top: 8px;
  163.     width: 22px;
  164.     height: 15px;
  165. }
  166. #overlay {
  167.     background-color: rgb(0 0 0 / 90%);
  168. }
  169. #overlay>button {
  170.     font-size: 30px;
  171. }
  172. button.warning {
  173.     background: red;
  174.     border-radius: 3px;
  175. }
  176. #overlay .messages .message {
  177.     background: #24cb19 !important;
  178.     border-radius: 3px;
  179.     color: #fff;
  180. }
  181. :root.dark #overlay .messages .message {
  182.     background: #24cb19 !important;
  183. }
  184. #overlay .messages .message.important {
  185.     background: red !important;
  186. }
  187. :root.dark #overlay .messages .message.important {
  188.     background: red !important;
  189. }
  190. #overlay .messages .message .headers {
  191.     border-bottom: 1px solid #fff;
  192. }
  193. #overlay input[type="text"], #overlay input[type="password"], #overlay textarea {
  194.     background-color: #334655c7;
  195.     border: 2px solid #315d83b5;
  196.     border-radius: 3px;
  197. }
  198. #overlay .newGame .premium {
  199.     color: #000;
  200.     display: inline-block;
  201.     background: linear-gradient(to bottom, rgb(238, 238, 238), rgb(204, 204, 204));
  202.     border-radius: 7px;
  203.     border: none;
  204.     position: relative;
  205.     padding: 40px 40px 30px;
  206.     margin: 80px 20px 20px;
  207. }
  208. :root.dark #overlay .newGame .premium {
  209.     color: #fff;
  210.     background: linear-gradient(to bottom, rgb(41, 41, 41), rgb(32, 32, 32)) !important;
  211. }
  212. #overlay input[type="checkbox"]+label::before {
  213.     border: 2px solid red;
  214.     transition: border .7s;
  215.     border-radius: 7px;
  216.     color: #fff;
  217. }
  218. #overlay .shopItem {
  219.     background: repeating-radial-gradient(#555, #cccccc99 100px);
  220. }
  221. :root.dark #overlay .shopItem {
  222.     background: repeating-radial-gradient(#292929, #24242499 100px) !important;
  223. }
  224. #shopItem-122 {
  225.     background: repeating-radial-gradient(#1c8a3c, #2cdc60, #1c8a3c99 100px) !important;
  226. }
  227. :root.dark #shopItem-122 {
  228.     background: repeating-radial-gradient(#1c8a3c, #2cdc60, #1c8a3c99 100px) !important;
  229. }
  230. #shopItem-120 {
  231.     background: linear-gradient(to bottom, #fcdc88, #f8c23a) !important;
  232. }
  233. :root.dark #shopItem-120 {
  234.     background: linear-gradient(to bottom, #fcdc88, #f8c23a) !important;
  235. }
  236. #virtualShopItem-500 {
  237.     background: repeating-linear-gradient(55deg, #101010, #333 100px) !important;
  238. }
  239. :root.dark #overlay #virtualShopItem-500 {
  240.     background: repeating-linear-gradient(55deg, #101010, #333 100px) !important;
  241. }
  242. #virtualShopItem-520 {
  243.     background: repeating-linear-gradient(45deg, #ff00d4, #256cff, #00ffff, #02ff00, #e7ff00, #ffb300, red, #ff00d4 270px) !important;
  244. }
  245. :root.dark #overlay #virtualShopItem-520 {
  246.     background: repeating-linear-gradient(45deg, #ff00d4, #256cff, #00ffff, #02ff00, #e7ff00, #ffb300, red, #ff00d4 270px) !important;
  247. }
  248. #virtualShopItem-512 {
  249.     background: linear-gradient(to bottom, #e2bf49, #664600) !important;
  250. }
  251. :root.dark #overlay #virtualShopItem-512 {
  252.     background: linear-gradient(to bottom, #e2bf49, #664600) !important;
  253. }
  254. #virtualShopItem-509 {
  255.     background: linear-gradient(to bottom, #e2bf49, #664600) !important;
  256. }
  257. :root.dark #overlay #virtualShopItem-509 {
  258.     background: linear-gradient(to bottom, #e2bf49, #664600) !important;
  259. }
  260. .shopItem .soldOut text {
  261.     font-size: 30pt;
  262.     stroke-width: 0px;
  263.     transform: translate(70px, 150px) rotate(0deg);
  264. }
  265. `);