☰

Style Improvements

Simple style improvements for better player experience.

目前為 2025-01-31 提交的版本，檢視 最新版本。

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