☰

Style Improvements

Simple style improvements for better experience.

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

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