Advertisement
kaedepat

Gridded Fields w/Easy Click

Mar 29th, 2023 (edited)
928
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 11.06 KB | None | 0 0
  1. /*
  2.  * Field CSS
  3.  * Show Pokemon in a grid and create a progress bar
  4.  * Code created by PFQ user DrWho
  5.  */
  6.  
  7. #field_field[data-mode=public] .fieldmon {
  8.     left: 0 !important;
  9.     top: 0 !important;
  10.     right: 0 !important;
  11.     bottom: 0 !important;
  12.     display: flex !important;
  13.     margin: 0 !important;
  14.     padding: 0 !important;
  15.     position: absolute !important;
  16.     justify-content: stretch;
  17.     align-items: stretch;
  18. }
  19.  
  20. /* disable tooltip */
  21. #field_field[data-mode=public] .fieldmon:hover + .tooltip_content {
  22.     display: none;
  23. }
  24.  
  25. #field_field[data-mode=public] .fieldmon img {
  26.     flex-grow: 1;
  27.     animation: none !important;
  28.     background: none !important;
  29.     object-fit: none;
  30.     object-position: 0 0;
  31. }
  32.  
  33. /* each pokemon causes a block to appear to make a progress bar, this is the block */
  34. #field_field[data-mode=public] .fieldmon:after {
  35.     content: "";
  36.     display: block;
  37.     position: absolute;
  38.     box-sizing: border-box;
  39.     width: 10px;
  40.     height: 15px;
  41.     background: #cc4244;
  42.     border-right: 2px solid #262626;
  43. }
  44.  
  45. /* the color of the block for fed pokemon */
  46. #field_field[data-mode=public] .fieldmon.nothungry:after {
  47.     background: #f2da4b;
  48. }
  49.  
  50. /* necesarry to make the sprite invisible, but keep the block in the progress bar */
  51. #field_field[data-mode=public] > div.field > .fieldmon.nothungry {
  52.     opacity: 1;
  53. }
  54. #field_field[data-mode=public] > div.field > .fieldmon.nothungry > img {
  55.     opacity: 0;
  56. }
  57.  
  58. /* draws the progress bar */
  59. #field_field[data-mode=public] .fieldmon:nth-of-type(2):after { left: 10px; }
  60. #field_field[data-mode=public] .fieldmon:nth-of-type(3):after { left: 20px; }
  61. #field_field[data-mode=public] .fieldmon:nth-of-type(4):after { left: 30px; }
  62. #field_field[data-mode=public] .fieldmon:nth-of-type(5):after { left: 40px; }
  63. #field_field[data-mode=public] .fieldmon:nth-of-type(6):after { left: 50px; }
  64. #field_field[data-mode=public] .fieldmon:nth-of-type(7):after { left: 60px; }
  65. #field_field[data-mode=public] .fieldmon:nth-of-type(8):after { left: 70px; }
  66. #field_field[data-mode=public] .fieldmon:nth-of-type(9):after { left: 80px; }
  67. #field_field[data-mode=public] .fieldmon:nth-of-type(10):after { left: 90px; }
  68. #field_field[data-mode=public] .fieldmon:nth-of-type(11):after { left: 100px; }
  69. #field_field[data-mode=public] .fieldmon:nth-of-type(12):after { left: 110px; }
  70. #field_field[data-mode=public] .fieldmon:nth-of-type(13):after { left: 120px; }
  71. #field_field[data-mode=public] .fieldmon:nth-of-type(14):after { left: 130px; }
  72. #field_field[data-mode=public] .fieldmon:nth-of-type(15):after { left: 140px; }
  73. #field_field[data-mode=public] .fieldmon:nth-of-type(16):after { left: 150px; }
  74. #field_field[data-mode=public] .fieldmon:nth-of-type(17):after { left: 160px; }
  75. #field_field[data-mode=public] .fieldmon:nth-of-type(18):after { left: 170px; }
  76. #field_field[data-mode=public] .fieldmon:nth-of-type(19):after { left: 180px; }
  77. #field_field[data-mode=public] .fieldmon:nth-of-type(20):after { left: 190px; }
  78. #field_field[data-mode=public] .fieldmon:nth-of-type(21):after { left: 200px; }
  79. #field_field[data-mode=public] .fieldmon:nth-of-type(22):after { left: 210px; }
  80. #field_field[data-mode=public] .fieldmon:nth-of-type(23):after { left: 220px; }
  81. #field_field[data-mode=public] .fieldmon:nth-of-type(24):after { left: 230px; }
  82. #field_field[data-mode=public] .fieldmon:nth-of-type(25):after { left: 240px; }
  83. #field_field[data-mode=public] .fieldmon:nth-of-type(26):after { left: 250px; }
  84. #field_field[data-mode=public] .fieldmon:nth-of-type(27):after { left: 260px; }
  85. #field_field[data-mode=public] .fieldmon:nth-of-type(28):after { left: 270px; }
  86. #field_field[data-mode=public] .fieldmon:nth-of-type(29):after { left: 280px; }
  87. #field_field[data-mode=public] .fieldmon:nth-of-type(30):after { left: 290px; }
  88. #field_field[data-mode=public] .fieldmon:nth-of-type(31):after { left: 300px; }
  89. #field_field[data-mode=public] .fieldmon:nth-of-type(32):after { left: 310px; }
  90. #field_field[data-mode=public] .fieldmon:nth-of-type(33):after { left: 320px; }
  91. #field_field[data-mode=public] .fieldmon:nth-of-type(34):after { left: 330px; }
  92. #field_field[data-mode=public] .fieldmon:nth-of-type(35):after { left: 340px; }
  93. #field_field[data-mode=public] .fieldmon:nth-of-type(36):after { left: 350px; }
  94. #field_field[data-mode=public] .fieldmon:nth-of-type(37):after { left: 360px; }
  95. #field_field[data-mode=public] .fieldmon:nth-of-type(38):after { left: 370px; }
  96. #field_field[data-mode=public] .fieldmon:nth-of-type(39):after { left: 380px; }
  97. #field_field[data-mode=public] .fieldmon:nth-of-type(40):after { left: 390px; }
  98.  
  99. /* shows pokemon in a grid */
  100. #field_field[data-mode=public] .fieldmon:nth-of-type(1) img { object-position: 0 0;}
  101. #field_field[data-mode=public] .fieldmon:nth-of-type(2) img { object-position: 12.5% 0;}
  102. #field_field[data-mode=public] .fieldmon:nth-of-type(3) img { object-position: 25% 0;}
  103. #field_field[data-mode=public] .fieldmon:nth-of-type(4) img { object-position: 37.5% 0;}
  104. #field_field[data-mode=public] .fieldmon:nth-of-type(5) img { object-position: 50% 0;}
  105. #field_field[data-mode=public] .fieldmon:nth-of-type(6) img { object-position: 62.5% 0;}
  106. #field_field[data-mode=public] .fieldmon:nth-of-type(7) img { object-position: 75% 0;}
  107. #field_field[data-mode=public] .fieldmon:nth-of-type(8) img { object-position: 87.5% 0;}
  108. #field_field[data-mode=public] .fieldmon:nth-of-type(9) img { object-position: 0 20%;}
  109. #field_field[data-mode=public] .fieldmon:nth-of-type(10) img { object-position: 12.5% 20%;}
  110. #field_field[data-mode=public] .fieldmon:nth-of-type(11) img { object-position: 25% 20%;}
  111. #field_field[data-mode=public] .fieldmon:nth-of-type(12) img { object-position: 37.5% 20%;}
  112. #field_field[data-mode=public] .fieldmon:nth-of-type(13) img { object-position: 50% 20%;}
  113. #field_field[data-mode=public] .fieldmon:nth-of-type(14) img { object-position: 62.5% 20%;}
  114. #field_field[data-mode=public] .fieldmon:nth-of-type(15) img { object-position: 75% 20%;}
  115. #field_field[data-mode=public] .fieldmon:nth-of-type(16) img { object-position: 87.5% 20%;}
  116. #field_field[data-mode=public] .fieldmon:nth-of-type(17) img { object-position: 0 40%;}
  117. #field_field[data-mode=public] .fieldmon:nth-of-type(18) img { object-position: 12.5% 40%;}
  118. #field_field[data-mode=public] .fieldmon:nth-of-type(19) img { object-position: 25% 40%;}
  119. #field_field[data-mode=public] .fieldmon:nth-of-type(20) img { object-position: 37.5% 40%;}
  120. #field_field[data-mode=public] .fieldmon:nth-of-type(21) img { object-position: 50% 40%;}
  121. #field_field[data-mode=public] .fieldmon:nth-of-type(22) img { object-position: 62.5% 40%;}
  122. #field_field[data-mode=public] .fieldmon:nth-of-type(23) img { object-position: 75% 40%;}
  123. #field_field[data-mode=public] .fieldmon:nth-of-type(24) img { object-position: 87.5% 40%;}
  124. #field_field[data-mode=public] .fieldmon:nth-of-type(25) img { object-position: 0 60%;}
  125. #field_field[data-mode=public] .fieldmon:nth-of-type(26) img { object-position: 12.5% 60%;}
  126. #field_field[data-mode=public] .fieldmon:nth-of-type(27) img { object-position: 25% 60%;}
  127. #field_field[data-mode=public] .fieldmon:nth-of-type(28) img { object-position: 37.5% 60%;}
  128. #field_field[data-mode=public] .fieldmon:nth-of-type(29) img { object-position: 50% 60%;}
  129. #field_field[data-mode=public] .fieldmon:nth-of-type(30) img { object-position: 62.5% 60%;}
  130. #field_field[data-mode=public] .fieldmon:nth-of-type(31) img { object-position: 75% 60%;}
  131. #field_field[data-mode=public] .fieldmon:nth-of-type(32) img { object-position: 87.5% 60%;}
  132. #field_field[data-mode=public] .fieldmon:nth-of-type(33) img { object-position: 0 80%;}
  133. #field_field[data-mode=public] .fieldmon:nth-of-type(34) img { object-position: 12.5% 80%;}
  134. #field_field[data-mode=public] .fieldmon:nth-of-type(35) img { object-position: 25% 80%;}
  135. #field_field[data-mode=public] .fieldmon:nth-of-type(36) img { object-position: 37.5% 80%;}
  136. #field_field[data-mode=public] .fieldmon:nth-of-type(37) img { object-position: 50% 80%;}
  137. #field_field[data-mode=public] .fieldmon:nth-of-type(38) img { object-position: 62.5% 80%;}
  138. #field_field[data-mode=public] .fieldmon:nth-of-type(39) img { object-position: 75% 80%;}
  139. #field_field[data-mode=public] .fieldmon:nth-of-type(40) img { object-position: 87.5% 80%;}
  140.  
  141. #field_field[data-mode=public] .fieldmon:nth-of-type(1) { z-index: 1; }
  142. #field_field[data-mode=public] .fieldmon:nth-of-type(2) { z-index: 2; }
  143. #field_field[data-mode=public] .fieldmon:nth-of-type(3) { z-index: 3; }
  144. #field_field[data-mode=public] .fieldmon:nth-of-type(4) { z-index: 4; }
  145. #field_field[data-mode=public] .fieldmon:nth-of-type(5) { z-index: 5; }
  146. #field_field[data-mode=public] .fieldmon:nth-of-type(6) { z-index: 6; }
  147. #field_field[data-mode=public] .fieldmon:nth-of-type(7) { z-index: 7; }
  148. #field_field[data-mode=public] .fieldmon:nth-of-type(8) { z-index: 8; }
  149. #field_field[data-mode=public] .fieldmon:nth-of-type(9) { z-index: 9; }
  150. #field_field[data-mode=public] .fieldmon:nth-of-type(10) { z-index: 10; }
  151. #field_field[data-mode=public] .fieldmon:nth-of-type(11) { z-index: 11; }
  152. #field_field[data-mode=public] .fieldmon:nth-of-type(12) { z-index: 12; }
  153. #field_field[data-mode=public] .fieldmon:nth-of-type(13) { z-index: 13; }
  154. #field_field[data-mode=public] .fieldmon:nth-of-type(14) { z-index: 14; }
  155. #field_field[data-mode=public] .fieldmon:nth-of-type(15) { z-index: 15; }
  156. #field_field[data-mode=public] .fieldmon:nth-of-type(16) { z-index: 16; }
  157. #field_field[data-mode=public] .fieldmon:nth-of-type(17) { z-index: 17; }
  158. #field_field[data-mode=public] .fieldmon:nth-of-type(18) { z-index: 18; }
  159. #field_field[data-mode=public] .fieldmon:nth-of-type(19) { z-index: 19; }
  160. #field_field[data-mode=public] .fieldmon:nth-of-type(20) { z-index: 20; }
  161. #field_field[data-mode=public] .fieldmon:nth-of-type(21) { z-index: 21; }
  162. #field_field[data-mode=public] .fieldmon:nth-of-type(22) { z-index: 22; }
  163. #field_field[data-mode=public] .fieldmon:nth-of-type(23) { z-index: 23; }
  164. #field_field[data-mode=public] .fieldmon:nth-of-type(24) { z-index: 24; }
  165. #field_field[data-mode=public] .fieldmon:nth-of-type(25) { z-index: 25; }
  166. #field_field[data-mode=public] .fieldmon:nth-of-type(26) { z-index: 26; }
  167. #field_field[data-mode=public] .fieldmon:nth-of-type(27) { z-index: 27; }
  168. #field_field[data-mode=public] .fieldmon:nth-of-type(28) { z-index: 28; }
  169. #field_field[data-mode=public] .fieldmon:nth-of-type(29) { z-index: 29; }
  170. #field_field[data-mode=public] .fieldmon:nth-of-type(30) { z-index: 30; }
  171. #field_field[data-mode=public] .fieldmon:nth-of-type(31) { z-index: 31; }
  172. #field_field[data-mode=public] .fieldmon:nth-of-type(32) { z-index: 32; }
  173. #field_field[data-mode=public] .fieldmon:nth-of-type(33) { z-index: 33; }
  174. #field_field[data-mode=public] .fieldmon:nth-of-type(34) { z-index: 34; }
  175. #field_field[data-mode=public] .fieldmon:nth-of-type(35) { z-index: 35; }
  176. #field_field[data-mode=public] .fieldmon:nth-of-type(36) { z-index: 36; }
  177. #field_field[data-mode=public] .fieldmon:nth-of-type(37) { z-index: 37; }
  178. #field_field[data-mode=public] .fieldmon:nth-of-type(38) { z-index: 38; }
  179. #field_field[data-mode=public] .fieldmon:nth-of-type(39) { z-index: 39; }
  180. #field_field[data-mode=public] .fieldmon:nth-of-type(40) { z-index: 40; }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement